Mercurial > code > home > repos > light9

changeset 1693:53f751982ddf

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
WIP polymer2 upgrade, timeline rewrite Ignore-this: 73b86663c0dcb783c9c6e65f6be901a
author drewp@bigasterisk.com
date Thu, 26 Apr 2018 05:40:12 +0000
parents 6fa4288da8a6
children 0f1b6f48ae1e
files 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
diffstat 6 files changed, 101 insertions(+), 106 deletions(-) [+]
line wrap: on
line diff
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/light9/web/edit-choice-demo.html	Thu Apr 26 05:40:12 2018 +0000
@@ -0,0 +1,29 @@
+<!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>
--- a/light9/web/edit-choice.coffee	Wed Mar 21 08:31:45 2018 +0000
+++ b/light9/web/edit-choice.coffee	Thu Apr 26 05:40:12 2018 +0000
@@ -34,7 +34,10 @@
       else
         null
 
-    onDrop(uri, pos)
+    try
+      onDrop(uri, pos)
+    catch e
+      console.log(e)
     unhighlight()
 
 
--- a/light9/web/lib/bower.json	Wed Mar 21 08:31:45 2018 +0000
+++ b/light9/web/lib/bower.json	Thu Apr 26 05:40:12 2018 +0000
@@ -1,14 +1,14 @@
 {
   "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"
   }
 }
--- a/light9/web/resource-display.html	Wed Mar 21 08:31:45 2018 +0000
+++ b/light9/web/resource-display.html	Thu Apr 26 05:40:12 2018 +0000
@@ -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() {
--- a/light9/web/timeline/timeline-elements.html	Wed Mar 21 08:31:45 2018 +0000
+++ b/light9/web/timeline/timeline-elements.html	Thu Apr 26 05:40:12 2018 +0000
@@ -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>
--- a/light9/web/timeline/timeline.coffee	Wed Mar 21 08:31:45 2018 +0000
+++ b/light9/web/timeline/timeline.coffee	Thu Apr 26 05:40:12 2018 +0000
@@ -3,24 +3,6 @@
 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 @@
     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 @@
     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 @@
   # 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 @@
         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 }