light9 Changeset - 53f751982ddf

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

light9/web/edit-choice.coffee

light9/web/lib/bower.json

light9/web/resource-display.html

light9/web/timeline/timeline-elements.html

light9/web/timeline/timeline.coffee

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

@@ @@ -34,7 +34,10 @@ window.setupDrop = (senseElem, highlight @@
       else
         null
     onDrop(uri, pos)
     try
       onDrop(uri, pos)
     catch e
       console.log(e)
     unhighlight()

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",
@@ @@ -16,24 +16,26 @@ @@
     "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

@@ @@ -54,6 +54,7 @@ @@
            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() {

light9/web/timeline/timeline-elements.html

➞

Show inline comments

@@ @@ -29,6 +29,9 @@ @@
      light9-timeline-time-zoomed {
          flex-grow: 1;
+     }
      #coveredByDiagram {
          position: relative;
+     }
      #dia, #adjusters, #cursorCanvas, #adjustersCanvas {
          position: absolute;
          left: 0; top: 0; right: 0; bottom: 0;
@@ @@ -52,24 +55,26 @@ @@
     </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>
@@ @@ -107,17 +112,6 @@ @@
                              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>
@@ @@ -212,19 +206,6 @@ @@
   </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.
@@ @@ -300,7 +281,7 @@ @@
 <!-- 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>

light9/web/timeline/timeline.coffee

➞

Show inline comments

@@ @@ -3,24 +3,6 @@ RDF = 'http://www.w3.org/1999/02/22-rdf- @@
 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'
@@ @@ -287,9 +269,11 @@ Polymer @@
     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')
@@ @@ -297,6 +281,17 @@ Polymer @@
     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')
@@ @@ -389,24 +384,15 @@ Polymer @@
   # 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
@@ @@ -422,26 +408,19 @@ Polymer @@
         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 }

0 comments (0 inline, 0 general)