Mercurial > code > home > repos > light9
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)