Changeset - 53f751982ddf
Parent rev.
Child rev.
[Not reviewed]
default
0 5 1
drewp@bigasterisk.com - 7 years ago 2018-04-26 05:40:12
drewp@bigasterisk.com
WIP polymer2 upgrade, timeline rewrite
Ignore-this: 73b86663c0dcb783c9c6e65f6be901a
6 files changed with 101 insertions and 106 deletions:
light9/web/edit-choice-demo.html
29
light9/web/edit-choice.coffee
4
1
light9/web/lib/bower.json
18
16
light9/web/resource-display.html
1
light9/web/timeline/timeline-elements.html
24
43
light9/web/timeline/timeline.coffee
25
46
0 comments (0 inline, 0 general)
light9/web/edit-choice-demo.html
➞
Show inline comments
 
new file 100644
 
<!doctype html>
 
<html>
 
  <head>
 
    <title></title>
 
    <meta charset="utf-8" />
 
    <script src="/lib/webcomponentsjs/webcomponents-hi-sd-ce.js"></script>
 
    <link rel="import" href="rdfdb-synced-graph.html">
 
    <link rel="import" href="edit-choice.html">
 
    <script src="/lib/N3.js-pull61/browser/n3-browser.js"></script>
 
      <script src="/lib/knockout/dist/knockout.js"></script>
 
      <script src="/lib/shortcut/index.js"></script>
 
      <script src="/lib/async/dist/async.js"></script>
 
      <script src="/lib/underscore/underscore-min.js"></script>
 
  </head>
 
  <body>
 
    <dom-bind>
 
      <template>
 
        <p>
 
          <rdfdb-synced-graph graph="{{graph}}"></rdfdb-synced-graph>
 
        </p>
 
        <p>
 
          edit-choice: <edit-choice graph="{{graph}}" uri="http://example.com/hello"></edit-choice>
 
        </p>
 
        <p>
 
          <a href="http://light9.bigasterisk.com/effect/spideredge" >this has a label</a>
 
      </template>
 
    </dom-bind>
 
  </body>
 
</html>
light9/web/edit-choice.coffee
➞
Show inline comments
 
@@ -25,25 +25,28 @@ window.setupDrop = (senseElem, highlight
 
    unhighlight()
 
 
  senseElem.addEventListener 'drop', (event) ->
 
    event.preventDefault()
 
    uri = event.dataTransfer.getData('text/uri-list')
 

			




	
	
	
		
 
    pos = if coordinateOriginElem?

			




	
	
	
		
 
        root = coordinateOriginElem.getBoundingClientRect()

			




	
	
	
		
 
        $V([event.pageX - root.left, event.pageY - root.top])

			




	
	
	
		
 
      else

			




	
	
	
		
 
        null

			




	
	
	
		
 

			




	
	
	
		
 
    onDrop(uri, pos)

			




	
	
	
		
 
    try

			




	
	
	
		
 
      onDrop(uri, pos)

			




	
	
	
		
 
    catch e

			




	
	
	
		
 
      console.log(e)

			




	
	
	
		
 
    unhighlight()

			




	
	
	
		
 

			




	
	
	
		
 

			




	
	
	
		
 

			




	
	
	
		
 
Polymer

			




	
	
	
		
 
    is: "edit-choice",

			




	
	
	
		
 
    properties:

			




	
	
	
		
 
        graph: {type: Object, notify: true},

			




	
	
	
		
 
        uri: {type: String, notify: true},

			




	
	
	
		
 

			




	
	
	
		
 
    ready: ->

			




	
	
	
		
 
      @uri = null

			




        

    


    
    

    

        

                

                    light9/web/lib/bower.json
                

                

                  
                      
                        

                      ➞

                      
                        
                  

                  
                      
                  
                      
                  
                      
                  
                      
                  
                  
                

                

                    Show inline comments
                    
                

        

        

            



	
	
	
		
 
{

			




	
	
	
		
 
  "name": "3rd-party libs",

			




	
	
	
		
 
  "dependencies": {

			




	
	
	
		
 
    "polymer": "~1.4.0",

			




	
	
	
		
 
    "paper-slider": "PolymerElements/paper-slider#~1.0.11",

			




	
	
	
		
 
    "iron-ajax": "PolymerElements/iron-ajax#~1.2.0",

			




	
	
	
		
 
    "jquery": "^3.2.1",

			




	
	
	
		
 
    "polymer": "2.6.0",

			




	
	
	
		
 
    "paper-slider": "PolymerElements/paper-slider#~2.0.6",

			




	
	
	
		
 
    "iron-ajax": "PolymerElements/iron-ajax#~2.1.3",

			




	
	
	
		
 
    "jquery": "^3.3.1",

			




	
	
	
		
 
    "underscore": "~1.8.3",

			




	
	
	
		
 
    "jquery-ui": "~1.11.4",

			




	
	
	
		
 
    "QueryString": "http://unixpapa.com/js/QueryString.js",

			




	
	
	
		
 
    "knockout": "knockoutjs#^3.4.0",

			




	
	
	
		
 
    "knockout": "knockoutjs#^3.4.2",

			




	
	
	
		
 
    "sylvester": "~0.1.3",

			




	
	
	
		
 
    "d3": "https://github.com/d3/d3.git#e7194db33090a0afc06c77a959594361ffb949df",

			




	
	
	
		
 
    "rdflib.js": "https://github.com/linkeddata/rdflib.js.git#920e59fe37",

			




	
	
	
		
 
    "rdfstore": "https://github.com/antoniogarrote/rdfstore-js.git#b3f7c0c9c1da9b26261af0d4858722fa982411bb",

			




	
	
	
		
 
    "N3.js": "https://github.com/RubenVerborgh/N3.js.git#04f4e21f4ccb351587dc00a3f26340b28d4bb10f",

			




	
	
	
		
 
    "shortcut": "http://www.openjs.com/scripts/events/keyboard_shortcuts/shortcut.js",

			




	
	
	
		
 
    "async": "https://github.com/caolan/async.git#^1.5.2",

			




	
	
	
		
 
    "iron-resizable-behavior": "PolymerElements/iron-resizable-behavior#^1.0.3",

			




	
	
	
		
 
    "paper-radio-button": "PolymerElements/paper-radio-button#^1.2.2",

			




	
	
	
		
 
    "paper-button": "PolymerElements/paper-button#^1.0.12",

			




	
	
	
		
 
    "paper-dialog": "PolymerElements/paper-dialog#^1.0.4",

			




	
	
	
		
 
    "paper-radio-group": "PolymerElements/paper-radio-group#^1.2.2",

			




	
	
	
		
 
    "iron-resizable-behavior": "PolymerElements/iron-resizable-behavior#^2.1.0",

			




	
	
	
		
 
    "paper-radio-button": "PolymerElements/paper-radio-button#^2.1.0",

			




	
	
	
		
 
    "paper-button": "PolymerElements/paper-button#^2.1.0",

			




	
	
	
		
 
    "paper-dialog": "PolymerElements/paper-dialog#^2.1.0",

			




	
	
	
		
 
    "paper-radio-group": "PolymerElements/paper-radio-group#^2.1.0",

			




	
	
	
		
 
    "color": "https://github.com/One-com/one-color.git#^3.0.4",

			




	
	
	
		
 
    "paper-listbox": "PolymerElements/paper-listbox#1.1.3",

			




	
	
	
		
 
    "paper-item": "PolymerElements/paper-item#1.2.2",

			




	
	
	
		
 
    "paper-listbox": "PolymerElements/paper-listbox#2.1.0",

			




	
	
	
		
 
    "paper-item": "PolymerElements/paper-item#2.1.0",

			




	
	
	
		
 
    "paper-styles": "PolymerElements/paper-styles#^2.1.0",

			




	
	
	
		
 
    "isotope": "^3.0.4",

			




	
	
	
		
 
    "isotope-fit-columns": "^1.1.3",

			




	
	
	
		
 
    "jquery.columnizer": "https://github.com/adamwulf/Columnizer-jQuery-Plugin.git#^1.6.2"

			




	
	
	
		
 
  },

			




	
	
	
		
 
  "resolutions": {

			




	
	
	
		
 
    "paper-styles": "^1.1.4",

			




	
	
	
		
 
    "rdflib.js": "920e59fe37",

			




	
	
	
		
 
    "d3": "e7194db33090a0afc06c77a959594361ffb949df",

			




	
	
	
		
 
    "webcomponentsjs": "^0.7.24",

			




	
	
	
		
 
    "polymer": "^1.2.1",

			




	
	
	
		
 
    "jquery": "^3.2.1"

			




	
	
	
		
 
    "jquery": "^3.2.1",

			




	
	
	
		
 
    "webcomponentsjs": "^v1.1.0",

			




	
	
	
		
 
    "paper-radio-button": "^2.1.0",

			




	
	
	
		
 
    "iron-resizable-behavior": "^2.1.0",

			




	
	
	
		
 
    "polymer": "2.6.0"

			




	
	
	
		
 
  }

			




	
	
	
		
 
}

			




        

    


    
    

    

        

                

                    light9/web/resource-display.html
                

                

                  
                      
                        

                      ➞

                      
                        
                  

                  
                      
                  
                      
                  
                      
                  
                      
                  
                  
                

                

                    Show inline comments
                    
                

        

        

            



	
	
		
 
@@ -45,24 +45,25 @@

			




	
	
	
		
 
           uri: { type: String },

			




	
	
	
		
 
           label: { type: String },

			




	
	
	
		
 
           rename: { type: Boolean },

			




	
	
	
		
 
           minor: { type: Boolean },

			




	
	
	
		
 
           resClasses: { type: String, computed: '_resClasses(minor)', value: 'resource' },

			




	
	
	
		
 
           renameTo: { type: String, notify: true },

			




	
	
	
		
 
       },

			




	
	
	
		
 
       observers: ['onUri(graph, uri)'],

			




	
	
	
		
 
       _resClasses: function(minor) {

			




	
	
	
		
 
           return minor ? 'resource minor' : 'resource';

			




	
	
	
		
 
       },

			




	
	
	
		
 
       onUri: function(graph, uri) {

			




	
	
	
		
 
           if (!this.graph) return;

			




	
	
	
		
 
           this.graph.runHandler(this.setLabel.bind(this), `label ${this.uri}`);

			




	
	
	
		
 
       },

			




	
	
	
		
 
       setLabel: function() {

			




	
	
	
		
 
           if (!this.uri) {

			




	
	
	
		
 
               this.label = "<no uri>";

			




	
	
	
		
 
               return;

			




	
	
	
		
 
           }

			




	
	
	
		
 
           try {

			




	
	
	
		
 
               this.label = this.graph.stringValue(this.uri,

			




	
	
	
		
 
                                                   this.graph.Uri('rdfs:label'));

			




	
	
	
		
 
           } catch(e) {

			




	
	
	
		
 
               this.label = null;

			




        

    


    
    

    

        

                

                    light9/web/timeline/timeline-elements.html
                

                

                  
                      
                        

                      ➞

                      
                        
                  

                  
                      
                  
                      
                  
                      
                  
                      
                  
                  
                

                

                    Show inline comments
                    
                

        

        

            



	
	
		
 
@@ -20,65 +20,70 @@

			




	
	
	
		
 
         flex-direction: column;

			




	
	
	
		
 
         position: relative;

			




	
	
	
		
 
         border: 1px solid black;

			




	
	
	
		
 
         overflow: hidden;

			




	
	
	
		
 
     }

			




	
	
	
		
 
     light9-timeline-audio {

			




	
	
	
		
 
         width: 100%;

			




	
	
	
		
 
         height: 30px;

			




	
	
	
		
 
     }

			




	
	
	
		
 
     light9-timeline-time-zoomed {

			




	
	
	
		
 
         flex-grow: 1;

			




	
	
	
		
 
     }

			




	
	
	
		
 
     #coveredByDiagram {

			




	
	
	
		
 
         position: relative;

			




	
	
	
		
 
     }

			




	
	
	
		
 
     #dia, #adjusters, #cursorCanvas, #adjustersCanvas {

			




	
	
	
		
 
         position: absolute;

			




	
	
	
		
 
         left: 0; top: 0; right: 0; bottom: 0;

			




	
	
	
		
 
     }

			




	
	
	
		
 
     #debug {

			




	
	
	
		
 
      background: white;

			




	
	
	
		
 
      font-family: monospace;

			




	
	
	
		
 
      font-size: 125%;

			




	
	
	
		
 
      height: 15px;

			




	
	
	
		
 
     }

			




	
	
	
		
 
    </style>

			




	
	
	
		
 
    <div>

			




	
	
	
		
 
      <rdfdb-synced-graph graph="{{graph}}"></rdfdb-synced-graph>

			




	
	
	
		
 
      <light9-music id="music"

			




	
	
	
		
 
                    song="{{playerSong}}"

			




	
	
	
		
 
                    t="{{songTime}}"

			




	
	
	
		
 
                    playing="{{songPlaying}}"

			




	
	
	
		
 
                    duration="{{songDuration}}"></light9-music>

			




	
	
	
		
 
      timeline editor: song <edit-choice graph="{{graph}}" uri="{{song}}"></edit-choice>

			




	
	
	
		
 
      <label><input type="checkbox" checked="{{followPlayerSong::change}}" > follow player song choice</label>

			




	
	
	
		
 
    </div>

			




	
	
	
		
 
    <div id="debug">[[debug]]</div>

			




	
	
	
		
 
    <iron-ajax id="vidrefTime" url="/vidref/time" method="PUT" content-type="application/json"></iron-ajax>

			




	
	
	
		
 
    <light9-timeline-audio id="audio"

			




	
	
	
		
 
                           graph="{{graph}}"

			




	
	
	
		
 
                           show="{{show}}"

			




	
	
	
		
 
                           song="{{song}}"></light9-timeline-audio>

			




	
	
	
		
 
    <light9-timeline-time-zoomed id="zoomed"

			




	
	
	
		
 
                                 graph="{{graph}}"

			




	
	
	
		
 
                                 selection="{{selection}}"

			




	
	
	
		
 
                                 dia="{{dia}}"

			




	
	
	
		
 
                                 set-adjuster="{{setAdjuster}}"

			




	
	
	
		
 
                                 song="{{song}}"

			




	
	
	
		
 
                                 show="{{show}}"

			




	
	
	
		
 
                                 zoom="{{viewState.zoomSpec}}"

			




	
	
	
		
 
                                 zoom-in-x="{{zoomInX}}">

			




	
	
	
		
 
    </light9-timeline-time-zoomed>

			




	
	
	
		
 
    <light9-timeline-diagram-layer id="dia" selection="{{selection}}"></light9-timeline-diagram-layer>

			




	
	
	
		
 
    <light9-adjusters-canvas id="adjustersCanvas" set-adjuster="{{setAdjuster}}">

			




	
	
	
		
 
    </light9-adjusters-canvas>

			




	
	
	
		
 
    <light9-cursor-canvas id="cursorCanvas"></light9-cursor-canvas>

			




	
	
	
		
 
    <div id="coveredByDiagram">

			




	
	
	
		
 
      <light9-timeline-audio id="audio"

			




	
	
	
		
 
                             graph="{{graph}}"

			




	
	
	
		
 
                             show="{{show}}"

			




	
	
	
		
 
                             song="{{song}}"></light9-timeline-audio>

			




	
	
	
		
 
      <light9-timeline-time-zoomed id="zoomed"

			




	
	
	
		
 
                                   graph="{{graph}}"

			




	
	
	
		
 
                                   selection="{{selection}}"

			




	
	
	
		
 
                                   dia="{{dia}}"

			




	
	
	
		
 
                                   set-adjuster="{{setAdjuster}}"

			




	
	
	
		
 
                                   song="{{song}}"

			




	
	
	
		
 
                                   show="{{show}}"

			




	
	
	
		
 
                                   zoom="{{viewState.zoomSpec}}"

			




	
	
	
		
 
                                   zoom-in-x="{{zoomInX}}">

			




	
	
	
		
 
      </light9-timeline-time-zoomed>

			




	
	
	
		
 
      <light9-timeline-diagram-layer id="dia" selection="{{selection}}"></light9-timeline-diagram-layer>

			




	
	
	
		
 
      <light9-adjusters-canvas id="adjustersCanvas" set-adjuster="{{setAdjuster}}">

			




	
	
	
		
 
      </light9-adjusters-canvas>

			




	
	
	
		
 
      <light9-cursor-canvas id="cursorCanvas"></light9-cursor-canvas>

			




	
	
	
		
 
    </div>

			




	
	
	
		
 
  </template>

			




	
	
	
		
 
 

			




	
	
	
		
 
</dom-module>

			




	
	
	
		
 

			




	
	
	
		
 
<!-- the whole section that pans/zooms in time (most of the editor) -->

			




	
	
	
		
 
<dom-module id="light9-timeline-time-zoomed">

			




	
	
	
		
 
  <template>

			




	
	
	
		
 
    <style>

			




	
	
	
		
 
     :host {

			




	
	
	
		
 
         display: flex;

			




	
	
	
		
 
         height: 100%;

			




	
	
	
		
 
     }

			




	
	
		
 
@@ -98,35 +103,24 @@

			




	
	
	
		
 
         flex-grow: 1;

			




	
	
	
		
 
     }

			




	
	
	
		
 
    </style>

			




	
	
	
		
 
    <div id="top">

			




	
	
	
		
 
      <light9-timeline-time-axis id="time"></light9-timeline-time-axis>

			




	
	
	
		
 
      <light9-timeline-audio id="audio"

			




	
	
	
		
 
                             graph="{{graph}}"

			




	
	
	
		
 
                             song="{{song}}"

			




	
	
	
		
 
                             show="{{show}}"

			




	
	
	
		
 
                             zoom="{{zoomFlattened}}">

			




	
	
	
		
 
      </light9-timeline-audio>

			




	
	
	
		
 
      <div id="rows">

			




	
	
	
		
 
        <template is="dom-repeat" items="{{rows}}">

			




	
	
	
		
 
          <light9-timeline-graph-row graph="{{graph}}"

			




	
	
	
		
 
                                     selection="{{selection}}"

			




	
	
	
		
 
                                     dia="{{dia}}"

			




	
	
	
		
 
                                     set-adjuster="{{setAdjuster}}"

			




	
	
	
		
 
                                     song="{{song}}"

			




	
	
	
		
 
                                     zoom-in-x="{{zoomInX}}"

			




	
	
	
		
 
                                     row-index="{{item}}"

			




	
	
	
		
 
          >

			




	
	
	
		
 
          </light9-timeline-graph-row>

			




	
	
	
		
 
        </template>

			




	
	
	
		
 
      </div>

			




	
	
	
		
 
    </div>

			




	
	
	
		
 
  </template>

			




	
	
	
		
 
</dom-module>

			




	
	
	
		
 

			




	
	
	
		
 

			




	
	
	
		
 
<!--

			




	
	
	
		
 
     SVG or canvas that draws these:

			




	
	
	
		
 
       - background grids

			




	
	
	
		
 
       - zoom arcs

			




	
	
	
		
 
       - notes

			




	
	
	
		
 
     

			




	
	
		
 
@@ -203,37 +197,24 @@

			




	
	
	
		
 
<dom-module id="light9-timeline-time-axis">

			




	
	
	
		
 
  <template>

			




	
	
	
		
 
    <style>

			




	
	
	
		
 
     div {

			




	
	
	
		
 
         width: 100%;

			




	
	
	
		
 
         height: 31px;

			




	
	
	
		
 
     }

			




	
	
	
		
 
    </style>

			




	
	
	
		
 
    <div></div>

			




	
	
	
		
 
  </template>

			




	
	
	
		
 
</dom-module>

			




	
	
	
		
 

			




	
	
	
		
 
<!-- one row of notes -->

			




	
	
	
		
 
<dom-module id="light9-timeline-graph-row">

			




	
	
	
		
 
  <template>

			




	
	
	
		
 
    <style>

			




	
	
	
		
 
     :host {

			




	
	
	
		
 
         border-top: 1px solid black;

			




	
	
	
		
 
         display: flex;

			




	
	
	
		
 
     }

			




	
	
	
		
 
    </style>

			




	
	
	
		
 
    <!-- light9-timeline-note repeated here -->

			




	
	
	
		
 
  </template>

			




	
	
	
		
 
</dom-module>

			




	
	
	
		
 

			




	
	
	
		
 
<!-- One trapezoid note shape in a row.

			




	
	
	
		
 
     This element has the right Y coords.

			




	
	
	
		
 
     We compute X coords from the zoom setting.

			




	
	
	
		
 
     diagram-layer draws the note body. -->

			




	
	
	
		
 
<dom-module id="light9-timeline-note">

			




	
	
	
		
 
  <template>

			




	
	
	
		
 
    <style>

			




	
	
	
		
 
     :host {

			




	
	
	
		
 
         display: block;

			




	
	
	
		
 
         background: green;

			




	
	
	
		
 
         /* outline: 2px solid red; */

			




	
	
	
		
 
     }

			




	
	
		
 
@@ -291,19 +272,19 @@

			




	
	
	
		
 
    </div>

			




	
	
	
		
 
  </template>

			




	
	
	
		
 
</dom-module>

			




	
	
	
		
 

			




	
	
	
		
 
<script src="/lib/sylvester/sylvester.js"></script>

			




	
	
	
		
 
<script src="/lib/d3/build/d3.min.js"></script>

			




	
	
	
		
 

			




	
	
	
		
 
<!-- version with https://github.com/RubenVerborgh/N3.js/pull/61 -->

			




	
	
	
		
 
<script src="/lib/N3.js-pull61/browser/n3-browser.js"></script>

			




	
	
	
		
 
<!-- master version -->

			




	
	
	
		
 
<xxscript src="/lib/N3.js/browser/n3-browser.js"></script>

			




	
	
	
		
 
  

			




	
	
	
		
 
<script src="/lib/knockout/dist/knockout.debug.js"></script>

			




	
	
	
		
 
<script src="/lib/knockout/dist/knockout.js"></script>

			




	
	
	
		
 
<script src="/lib/shortcut/index.js"></script>

			




	
	
	
		
 
<script src="/lib/async/dist/async.js"></script>

			




	
	
	
		
 
<script src="/lib/underscore/underscore-min.js"></script>

			




	
	
	
		
 
<script src="adjustable.js"></script>

			




	
	
	
		
 
<script src="drawing.js"></script>

			




	
	
	
		
 
<script src="timeline.js"></script>

			




        

    


    
    

    

        

                

                    light9/web/timeline/timeline.coffee
                

                

                  
                      
                        

                      ➞

                      
                        
                  

                  
                      
                  
                      
                  
                      
                  
                      
                  
                  
                

                

                    Show inline comments
                    
                

        

        

            



	
	
	
		
 
log = console.log

			




	
	
	
		
 
RDF = 'http://www.w3.org/1999/02/22-rdf-syntax-ns#'

			




	
	
	
		
 
Drawing = window.Drawing

			




	
	
	
		
 
ROW_COUNT = 7

			




	
	
	
		
 

			




	
	
	
		
 
# polymer dom-repeat is happy to shuffle children by swapping their

			




	
	
	
		
 
# attribute values, and it's hard to correctly setup/teardown your

			




	
	
	
		
 
# side effects if your attributes are changing before the detach

			




	
	
	
		
 
# call. This alternative to dom-repeat never reassigns

			




	
	
	
		
 
# attributes. But, it can't set up property bindings.

			




	
	
	
		
 
updateChildren = (parent, newUris, makeChild) ->

			




	
	
	
		
 
  childUris = []

			




	
	
	
		
 
  childByUri = {}

			




	
	
	
		
 
  for e in parent.children

			




	
	
	
		
 
    childUris.push(e.uri)

			




	
	
	
		
 
    childByUri[e.uri] = e

			




	
	
	
		
 

			




	
	
	
		
 
  for uri in _.difference(childUris, newUris)

			




	
	
	
		
 
    childByUri[uri].detached()

			




	
	
	
		
 
    ko.removeNode(childByUri[uri])

			




	
	
	
		
 
  for uri in _.difference(newUris, childUris)

			




	
	
	
		
 
    parent.appendChild(makeChild(uri))

			




	
	
	
		
 

			




	
	
	
		
 

			




	
	
	
		
 
Polymer

			




	
	
	
		
 
  is: 'light9-timeline-editor'

			




	
	
	
		
 
  behaviors: [ Polymer.IronResizableBehavior ]

			




	
	
	
		
 
  properties:

			




	
	
	
		
 
    viewState: { type: Object }

			




	
	
	
		
 
    debug: {type: String}

			




	
	
	
		
 
    graph: {type: Object, notify: true}

			




	
	
	
		
 
    setAdjuster: {type: Function, notify: true}

			




	
	
	
		
 
    playerSong: {type: String, notify: true}

			




	
	
	
		
 
    followPlayerSong: {type: Boolean, notify: true, value: true}

			




	
	
	
		
 
    song: {type: String, notify: true}

			




	
	
		
 
@@ -278,34 +260,47 @@ Polymer

			




	
	
	
		
 
# plan: in here, turn all the notes into simple js objects with all

			




	
	
	
		
 
# their timing data and whatever's needed for adjusters. From that, do

			




	
	
	
		
 
# the brick layout. update only changing adjusters.

			




	
	
	
		
 
Polymer

			




	
	
	
		
 
  is: 'light9-timeline-time-zoomed'

			




	
	
	
		
 
  behaviors: [ Polymer.IronResizableBehavior ]

			




	
	
	
		
 
  properties:

			




	
	
	
		
 
    graph: { type: Object, notify: true }

			




	
	
	
		
 
    selection: { type: Object, notify: true }

			




	
	
	
		
 
    dia: { type: Object, notify: true }

			




	
	
	
		
 
    song: { type: String, notify: true }

			




	
	
	
		
 
    zoomInX: { type: Object, notify: true }

			




	
	
	
		
 
    rows: { value: [0...ROW_COUNT] }

			




	
	
	
		
 
    zoom: { type: Object, notify: true, observer: 'onZoom' } # viewState.zoomSpec

			




	
	
	
		
 
    zoomFlattened: { type: Object, notify: true }

			




	
	
	
		
 
  observers: [

			




	
	
	
		
 
    'onGraph(graph, dia, setAdjuster, song, zoomInX)'

			




	
	
	
		
 
  ]

			




	
	
	
		
 
  onZoom: ->

			




	
	
	
		
 
    updateZoomFlattened = ->

			




	
	
	
		
 
      log('updateZoomFlattened')

			




	
	
	
		
 
      @zoomFlattened = ko.toJS(@zoom)

			




	
	
	
		
 
    ko.computed(updateZoomFlattened.bind(@))

			




	
	
	
		
 
  ready: ->

			




	
	
	
		
 

			




	
	
	
		
 
  onGraph: ->

			




	
	
	
		
 
    U = (x) => @graph.Uri(x)

			




	
	
	
		
 
    log('assign rows',@song)

			




	
	
	
		
 

			




	
	
	
		
 
    for uri in _.sortBy(@graph.objects(@song, U(':note')), 'uri')

			




	
	
	
		
 
      #should only make new ones

			




	
	
	
		
 
      child = new Note(@graph, @selection, @dia, uri, @setAdjuster, @song, @zoomInX)

			




	
	
	
		
 
      log('note ',uri)

			




	
	
	
		
 
    

			




	
	
	
		
 
    @rows = (new NoteRow(@graph, @dia, @song, @zoomInX, @noteUris, i, @selection) for i in [0...ROW_COUNT])

			




	
	
	
		
 

			




	
	
	
		
 
  attached: ->

			




	
	
	
		
 
    root = @closest('light9-timeline-editor')

			




	
	
	
		
 

			




	
	
	
		
 
  onDrop: (effect, pos) ->

			




	
	
	
		
 
    U = (x) => @graph.Uri(x)

			




	
	
	
		
 

			




	
	
	
		
 
    return unless effect and effect.match(/^http/)

			




	
	
	
		
 

			




	
	
	
		
 
    # we could probably accept some initial overrides right on the

			




	
	
	
		
 
    # effect uri, maybe as query params

			




	
	
	
		
 

			




	
	
	
		
 
    if not @graph.contains(effect, RDF + 'type', U(':Effect'))

			




	
	
		
 
@@ -380,77 +375,61 @@ Polymer

			




	
	
	
		
 
    patch = {

			




	
	
	
		
 
      delQuads: []

			




	
	
	
		
 
      addQuads: curveQuads.concat(pointQuads)

			




	
	
	
		
 
      }

			




	
	
	
		
 
    @graph.applyAndSendPatch(patch)

			




	
	
	
		
 

			




	
	
	
		
 
Polymer

			




	
	
	
		
 
  is: "light9-timeline-time-axis",

			




	
	
	
		
 
  # for now since it's just one line calling dia,

			




	
	
	
		
 
  # light9-timeline-editor does our drawing work.

			




	
	
	
		
 

			




	
	
	
		
 

			




	
	
	
		
 
Polymer

			




	
	
	
		
 
  is: 'light9-timeline-graph-row'

			




	
	
	
		
 
  behaviors: [ Polymer.IronResizableBehavior ]

			




	
	
	
		
 
  properties:

			




	
	
	
		
 
    graph: { type: Object, notify: true }

			




	
	
	
		
 
    dia: { type: Object, notify: true }

			




	
	
	
		
 
    song:  { type: String, notify: true }

			




	
	
	
		
 
    zoomInX: { type: Object, notify: true }

			




	
	
	
		
 
    noteUris: { type: Array, notify: true }

			




	
	
	
		
 
    rowIndex: { type: Object, notify: true }

			




	
	
	
		
 
    selection: { type: Object, notify: true }

			




	
	
	
		
 
class NoteRow

			




	
	
	
		
 
  constructor: (@graph, @dia, @song, @zoomInX, @noteUris, @rowIndex, @selection) ->

			




	
	
	
		
 
    @graph.runHandler(@update.bind(@), "row notes #{@rowIndex}")

			




	
	
	
		
 

			




	
	
	
		
 
  observers: [

			




	
	
	
		
 
    'onGraph(graph, dia, setAdjuster, song, zoomInX)'

			




	
	
	
		
 
    'observedUpdate(graph, song, rowIndex)'

			




	
	
	
		
 
    'onZoom(zoomInX)'

			




	
	
	
		
 
    ]

			




	
	
	
		
 
  onGraph: ->

			




	
	
	
		
 
    @graph.runHandler(@update.bind(@), "row notes #{@rowIndex}")

			




	
	
	
		
 

			




	
	
	
		
 

			




	
	
	
		
 
  observedUpdate: (graph, song, rowIndex) ->

			




	
	
	
		
 
    @update() # old behavior

			




	
	
	
		
 
    #@graph.runHandler(@update.bind(@), "row notes #{@rowIndex}")

			




	
	
	
		
 

			




	
	
	
		
 
  update: (patch) ->

			




	
	
	
		
 
    U = (x) => @graph.Uri(x)

			




	
	
	
		
 

			




	
	
	
		
 
    notesForThisRow = []

			




	
	
	
		
 
    i = 0

			




	
	
	
		
 
    for n in _.sortBy(@graph.objects(@song, U(':note')), 'uri')

			




	
	
	
		
 
      if (i % ROW_COUNT) == @rowIndex

			




	
	
	
		
 
        notesForThisRow.push(n)

			




	
	
	
		
 
      i++

			




	
	
	
		
 

			




	
	
	
		
 
    updateChildren @, notesForThisRow, (newUri) =>

			




	
	
	
		
 
      child = document.createElement('light9-timeline-note')

			




	
	
	
		
 
      child.graph = @graph

			




	
	
	
		
 
      child.selection = @selection

			




	
	
	
		
 
      child.dia = @dia

			




	
	
	
		
 
      child.uri = newUri

			




	
	
	
		
 
      child.setAdjuster = @setAdjuster

			




	
	
	
		
 
      child.song = @song # could change, but all the notes will be rebuilt

			




	
	
	
		
 
      child.zoomInX = @zoomInX # missing binding; see onZoom

			




	
	
	
		
 
      return child      

			




	
	
	
		
 
    for newUri in notesForThisRow

			




	
	
	
		
 
      #should only make new ones

			




	
	
	
		
 
      child = new Note(@graph, @selection, @dia, newUri, @setAdjuster, @song, @zoomInX)

			




	
	
	
		
 

			




	
	
	
		
 
  onZoom: ->

			




	
	
	
		
 
    for e in @children

			




	
	
	
		
 
      e.zoomInX = @zoomInX

			




	
	
	
		
 

			




	
	
	
		
 

			




	
	
	
		
 
Polymer

			




	
	
	
		
 
class Note

			




	
	
	
		
 
  constructor: (@graph, @selection, @dia, @uri, @setAdjuster, @song, @zoomInX)->0

			




	
	
	
		
 
  is: 'light9-timeline-note'

			




	
	
	
		
 
  behaviors: [ Polymer.IronResizableBehavior ]

			




	
	
	
		
 
  listeners: 'iron-resize': 'update'

			




	
	
	
		
 
  listeners: 'iron-resize': 'update' #move to parent elem

			




	
	
	
		
 
  properties:

			




	
	
	
		
 
    graph: { type: Object, notify: true }

			




	
	
	
		
 
    selection: { type: Object, notify: true }

			




	
	
	
		
 
    dia: { type: Object, notify: true }

			




	
	
	
		
 
    uri: { type: String, notify: true }

			




	
	
	
		
 
    zoomInX: { type: Object, notify: true }

			




	
	
	
		
 
    setAdjuster: {type: Function, notify: true }

			




	
	
	
		
 
    inlineRect: { type: Object, notify: true }

			




	
	
	
		
 
    song: { type: String, notify: true }

			




	
	
	
		
 
  observers: [

			




	
	
	
		
 
    'onUri(graph, dia, uri, zoomInX, setAdjuster, song)'

			




	
	
	
		
 
    'update(graph, dia, uri, zoomInX, setAdjuster, song)'

			




        

    



    


    



    



      

      





    
    0 comments (0 inline, 0 general)
    





    


  

  







  


    




    








    
        Server instance: kallithea-749ff669b6-v9g5f-75
    
    
        This site is powered by
            Kallithea 0.7.0,
        which is
        © 2010–2021 by various authors & licensed under GPLv3.
            – Support