Changeset - 53f751982ddf
[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 82 insertions and 87 deletions:
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
 
@@ -31,13 +31,16 @@ window.setupDrop = (senseElem, highlight
 
    pos = if coordinateOriginElem?
 
        root = coordinateOriginElem.getBoundingClientRect()
 
        $V([event.pageX - root.left, event.pageY - root.top])
 
      else
 
        null
 

	
 
    try
 
    onDrop(uri, pos)
 
    catch e
 
      console.log(e)
 
    unhighlight()
 

	
 

	
 

	
 
Polymer
 
    is: "edit-choice",
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
 
@@ -51,12 +51,13 @@
 
       },
 
       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;
light9/web/timeline/timeline-elements.html
Show inline comments
 
@@ -26,12 +26,15 @@
 
         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;
 
@@ -49,12 +52,13 @@
 
                    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>
 
    <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}}"
 
@@ -67,12 +71,13 @@
 
                                 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">
 
@@ -104,23 +109,12 @@
 
                             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>
 

	
 

	
 
@@ -209,25 +203,12 @@
 
     }
 
    </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>
 
@@ -297,13 +278,13 @@
 

	
 
<!-- 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 }
 
@@ -284,22 +266,35 @@ Polymer
 
  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)
 

	
 
@@ -386,30 +381,21 @@ Polymer
 
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) ->
 
@@ -419,32 +405,25 @@ Polymer
 
    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 }
0 comments (0 inline, 0 general)