light9 Changeset - 5aa9ed11d374

Changeset - 5aa9ed11d374

Parent rev.

Child rev.

[Not reviewed]

default

0 2 2

Drew Perttula - 7 years ago 2018-05-06 05:29:13
drewp@bigasterisk.com

extract inline-attrs
Ignore-this: b23190840318574ebf33006553370d75

4 files changed with 106 insertions and 100 deletions:

light9/web/timeline/inline-attrs.coffee

light9/web/timeline/inline-attrs.html

light9/web/timeline/timeline-elements.html

light9/web/timeline/timeline.coffee

0 comments (0 inline, 0 general)

light9/web/timeline/inline-attrs.coffee

➞

Show inline comments

@@ new file 100644 @@
 log = console.log
 class InlineAttrs extends Polymer.Element
   @is: "light9-timeline-note-inline-attrs"
   @properties:
     graph: { type: Object, notify: true }
     song: { type: String, notify: true }
     uri: { type: String, notify: true }  # the Note
     rect: { type: Object, notify: true }
     effect: { type: String, notify: true }
     colorScale: { type: String, notify: true }
     noteLabel: { type: String, notify: true }
     selection: { type: Object, notify: true }
   @observers: [
     'addHandler(graph, uri)'
     'onColorScale(graph, uri, colorScale)'
+    ]
   displayed: ->
     @querySelector('light9-color-picker').displayed()
   onColorScale: ->
     U = (x) => @graph.Uri(x)
     if @colorScale == @colorScaleFromGraph
       return
     @editAttr(@song, @uri, U(':colorScale'), @graph.Literal(@colorScale))
   editAttr: (song, note, attr, value) ->
     U = (x) => @graph.Uri(x)
     if not song?
       log("can't edit inline attr yet, no song")
       return
     quad = (s, p, o) => {subject: s, predicate: p, object: o, graph: song}
     existingColorScaleSetting = null
     for setting in @graph.objects(note, U(':setting'))
       ea = @graph.uriValue(setting, U(':effectAttr'))
       if ea == attr
         existingColorScaleSetting = setting
     if existingColorScaleSetting
       @graph.patchObject(existingColorScaleSetting, U(':value'), value, song)
     else
       setting = @graph.nextNumberedResource(note + 'set')
       patch = {delQuads: [], addQuads: [
         quad(note, U(':setting'), setting)
         quad(setting, U(':effectAttr'), attr)
         quad(setting, U(':value'), value)
         ]}
       @graph.applyAndSendPatch(patch)
   addHandler: ->
     @graph.runHandler(@update.bind(@), "update inline attrs #{@uri}")
   update: ->
     #console.time('attrs update')
     U = (x) => @graph.Uri(x)
     @effect = @graph.uriValue(@uri, U(':effectClass'))
     @noteLabel = @uri.replace(/.*\//, '')
     existingColorScaleSetting = null
     for setting in @graph.objects(@uri, U(':setting'))
       ea = @graph.uriValue(setting, U(':effectAttr'))
       value = @graph.stringValue(setting, U(':value'))
       if ea == U(':colorScale')
         @colorScaleFromGraph = value
         @colorScale = value
         existingColorScaleSetting = setting
     if existingColorScaleSetting == null
       @colorScaleFromGraph = '#ffffff'
       @colorScale = '#ffffff'
     #console.timeEnd('attrs update')
   onDel: ->
     deleteNote(@graph, @song, @uri, @selection)
 customElements.define(InlineAttrs.is, InlineAttrs)

light9/web/timeline/inline-attrs.html

➞

Show inline comments

@@ new file 100644 @@
 <link rel="import" href="/lib/polymer/polymer-element.html">
 <link rel="import" href="../light9-color-picker.html">
 <link rel="import" href="../edit-choice.html">
 <!-- sometimes we draw attrs within the shape of a note. -->
 <dom-module id="light9-timeline-note-inline-attrs">
   <template>
     <style>
      #top {
          position: absolute;
          overflow: hidden;
          background: rgba(19, 19, 19, 0.65);
          border-radius: 6px;
          border: 1px solid #313131;
          padding: 3px;
          z-index: 2;
+     }
     </style>
     <div id="top" style$="left: [[rect.left]]px; top: [[rect.top]]px; width: [[rect.width]]px; height: [[rect.height]]px; display: [[rect.display]]">
       <div>note [[noteLabel]] <button on-click="onDel">del</button></div>
       <table>
         <tr><th>effect:</th><td><edit-choice graph="{{graph}}" uri="{{effect}}"></edit-choice></td></tr>
         <tr><th>colorScale:</th><td>
           <light9-color-picker color="{{colorScale}}"></light9-color-picker>
         </td></tr>
       </table>
     </div>
   </template>
   <script src="inline-attrs.js"></script>
 </dom-module>

light9/web/timeline/timeline-elements.html

➞

Show inline comments

 <link rel="import" href="/lib/polymer/polymer.html">
 <link rel="import" href="/lib/iron-resizable-behavior/iron-resizable-behavior.html">
 <link rel="import" href="/lib/iron-ajax/iron-ajax.html">
 <link rel="import" href="light9-timeline-audio.html">
 <link rel="import" href="../rdfdb-synced-graph.html">
 <link rel="import" href="../light9-music.html">
 <link rel="import" href="../light9-color-picker.html">
 <link rel="import" href="../edit-choice.html">
 <link rel="import" href="inline-attrs.html">
 <!-- Whole editor- include this on your page.
      Most coordinates are relative to this element.
    -->
 <dom-module id="light9-timeline-editor">
   <template>
     <style>
      :host {
          background: #444;
          display: flex;
          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 {
@@ @@ -226,64 +226,39 @@ @@
                                        uri="{{uri}}"
                                        effect="{{effect}}"
+    >
     </light9-timeline-note-inline-attrs>
   </template>
 </dom-module>
 <!-- All the adjusters you can edit or select. Tells a light9-adjusters-canvas how to draw them. Probabaly doesn't need to be an element.
      This element manages their layout and suppresion.
      Owns the selection.
      Maybe includes selecting things that don't even have adjusters.
      Maybe manages the layout of other labels and text too, to avoid overlaps.
    -->
 <dom-module id="light9-timeline-adjusters">
   <template>
     <style>
      :host {
          pointer-events: none; /* restored on the individual adjusters */
+     }
     </style>
   </template>
 </dom-module>
 <!-- sometimes we draw attrs within the shape of a note. -->
 <dom-module id="light9-timeline-note-inline-attrs">
   <template>
     <style>
      #top {
          position: absolute;
          overflow: hidden;
          background: rgba(19, 19, 19, 0.65);
          border-radius: 6px;
          border: 1px solid #313131;
          padding: 3px;
          z-index: 2;
+     }
     </style>
     <div id="top" style$="left: [[rect.left]]px; top: [[rect.top]]px; width: [[rect.width]]px; height: [[rect.height]]px; display: [[rect.display]]">
       <div>note [[noteLabel]] <button on-click="onDel">del</button></div>
       <table>
         <tr><th>effect:</th><td><edit-choice graph="{{graph}}" uri="{{effect}}"></edit-choice></td></tr>
         <tr><th>colorScale:</th><td>
           <light9-color-picker color="{{colorScale}}"></light9-color-picker>
         </td></tr>
       </table>
     </div>
   </template>
 </dom-module>
 <script src="/lib/async/dist/async.js"></script>
 <script src="/lib/knockout/dist/knockout.js"></script>
 <script src="/lib/shortcut/index.js"></script>
 <script src="/lib/sylvester/sylvester.js"></script>
 <script src="/lib/underscore/underscore-min.js"></script>
 <script src="/node_modules/d3/dist/d3.min.js"></script>
 <script src="/node_modules/n3/n3-browser.js"></script>
 <script src="/node_modules/pixi.js/dist/pixi.min.js"></script>
 <script src="adjustable.js"></script>
 <script src="adjusters.js"></script>
 <script src="drawing.js"></script>
 <script src="timeline.js"></script>
 <script src="cursor_canvas.js"></script>

light9/web/timeline/timeline.coffee

➞

Show inline comments

@@ @@ -607,122 +607,48 @@ class Note @@
           # display bug: should be working from pt[0].t, not from origin
           $V([@zoomInX(value + curveWidthCalc() / 2), yForV(.5)])
         getValueForPos: (pos) =>
           @zoomInX.invert(pos.e(1)) - curveWidthCalc() / 2
         getSuggestedTargetOffset: () => $V([-10, 0])
       })
       adj
   _makeFadeAdjusters: (yForV, ctx) ->
     @_makeFadeAdjuster(yForV, ctx, @uri + '/fadeIn', 0, 1, $V([-50, -10]))
     n = @worldPts.length
     @_makeFadeAdjuster(yForV, ctx, @uri + '/fadeOut', n - 2, n - 1, $V([50, -10]))
   _makeFadeAdjuster: (yForV, ctx, adjId, i0, i1, offset) ->
     @adjusterIds[adjId] = true
     @setAdjuster adjId, => new AdjustableFade(yForV, i0, i1, @, offset, ctx)
   _suggestedOffset: (pt) ->
     if pt.e(2) > .5
       $V([0, 30])
     else
       $V([0, -30])
 class InlineAttrs extends Polymer.Element
   @is: "light9-timeline-note-inline-attrs"
   @properties:
     graph: { type: Object, notify: true }
     song: { type: String, notify: true }
     uri: { type: String, notify: true }  # the Note
     rect: { type: Object, notify: true }
     effect: { type: String, notify: true }
     colorScale: { type: String, notify: true }
     noteLabel: { type: String, notify: true }
     selection: { type: Object, notify: true }
   @observers: [
     'addHandler(graph, uri)'
     'onColorScale(graph, uri, colorScale)'
+    ]
   displayed: ->
     @querySelector('light9-color-picker').displayed()
   onColorScale: ->
     U = (x) => @graph.Uri(x)
     if @colorScale == @colorScaleFromGraph
       return
     @editAttr(@song, @uri, U(':colorScale'), @graph.Literal(@colorScale))
   editAttr: (song, note, attr, value) ->
     U = (x) => @graph.Uri(x)
     if not song?
       log("can't edit inline attr yet, no song")
       return
     quad = (s, p, o) => {subject: s, predicate: p, object: o, graph: song}
     existingColorScaleSetting = null
     for setting in @graph.objects(note, U(':setting'))
       ea = @graph.uriValue(setting, U(':effectAttr'))
       if ea == attr
         existingColorScaleSetting = setting
     if existingColorScaleSetting
       @graph.patchObject(existingColorScaleSetting, U(':value'), value, song)
     else
       setting = @graph.nextNumberedResource(note + 'set')
       patch = {delQuads: [], addQuads: [
         quad(note, U(':setting'), setting)
         quad(setting, U(':effectAttr'), attr)
         quad(setting, U(':value'), value)
         ]}
       @graph.applyAndSendPatch(patch)
   addHandler: ->
     @graph.runHandler(@update.bind(@), "update inline attrs #{@uri}")
   update: ->
     #console.time('attrs update')
     U = (x) => @graph.Uri(x)
     @effect = @graph.uriValue(@uri, U(':effectClass'))
     @noteLabel = @uri.replace(/.*\//, '')
     existingColorScaleSetting = null
     for setting in @graph.objects(@uri, U(':setting'))
       ea = @graph.uriValue(setting, U(':effectAttr'))
       value = @graph.stringValue(setting, U(':value'))
       if ea == U(':colorScale')
         @colorScaleFromGraph = value
         @colorScale = value
         existingColorScaleSetting = setting
     if existingColorScaleSetting == null
       @colorScaleFromGraph = '#ffffff'
       @colorScale = '#ffffff'
     #console.timeEnd('attrs update')
   onDel: ->
     deleteNote(@graph, @song, @uri, @selection)
 customElements.define(InlineAttrs.is, InlineAttrs)
 deleteNote = (graph, song, note, selection) ->
   patch = {delQuads: [{subject: song, predicate: graph.Uri(':note'), object: note, graph: song}], addQuads: []}
   graph.applyAndSendPatch(patch)
   if note in selection.selected()
     selection.selected(_.without(selection.selected(), note))
 class DiagramLayer extends Polymer.Element
   # note boxes.
   @is: 'light9-timeline-diagram-layer'
   @properties: {
     selection: {type: Object, notify: true}
+  }
   connectedCallback: ->
     super.connectedCallback()
     @elemById = {}
   setTimeAxis: (width, yTop, scale) ->
     pxPerTick = 50
     axis = d3.axisTop(scale).ticks(width / pxPerTick)
     d3.select(@$.timeAxis).attr('transform', 'translate(0,'+yTop+')').call(axis)
   getOrCreateElem: (uri, groupId, tag, attrs, moreBuild) ->
     elem = @elemById[uri]

0 comments (0 inline, 0 general)