changeset 1717:5aa9ed11d374

extract inline-attrs Ignore-this: b23190840318574ebf33006553370d75
author Drew Perttula <drewp@bigasterisk.com>
date Sun, 06 May 2018 05:29:13 +0000
parents 0dd23a0cbba1
children 00d0dbc2d6db
files light9/web/timeline/inline-attrs.coffee light9/web/timeline/inline-attrs.html light9/web/timeline/timeline-elements.html light9/web/timeline/timeline.coffee
diffstat 4 files changed, 106 insertions(+), 100 deletions(-) [+]
line wrap: on
line diff
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/light9/web/timeline/inline-attrs.coffee	Sun May 06 05:29:13 2018 +0000
@@ -0,0 +1,75 @@
+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)
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/light9/web/timeline/inline-attrs.html	Sun May 06 05:29:13 2018 +0000
@@ -0,0 +1,30 @@
+<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>
--- a/light9/web/timeline/timeline-elements.html	Sun May 06 05:10:13 2018 +0000
+++ b/light9/web/timeline/timeline-elements.html	Sun May 06 05:29:13 2018 +0000
@@ -4,8 +4,8 @@
 <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.
@@ -247,31 +247,6 @@
   </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>
--- a/light9/web/timeline/timeline.coffee	Sun May 06 05:10:13 2018 +0000
+++ b/light9/web/timeline/timeline.coffee	Sun May 06 05:29:13 2018 +0000
@@ -628,80 +628,6 @@
       $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)