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
75
light9/web/timeline/inline-attrs.html
30
light9/web/timeline/timeline-elements.html
1
26
light9/web/timeline/timeline.coffee
74
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;

			




	
	
		
 
@@ -238,49 +238,24 @@

			




	
	
	
		
 
   -->

			




	
	
	
		
 
<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>

			




        

    


    
    

    

        

                

                    light9/web/timeline/timeline.coffee
                

                

                  
                      
                        

                      ➞

                      
                        
                  

                  
                      
                  
                      
                  
                      
                  
                      
                  
                  
                

                

                    Show inline comments
                    
                

        

        

            



	
	
		
 
@@ -619,98 +619,24 @@ class Note

			




	
	
	
		
 

			




	
	
	
		
 
  _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}

			




        

    



    


    



    



      

      





    
    0 comments (0 inline, 0 general)
    





    


  

  







  


    




    








    
        Server instance: kallithea-749ff669b6-v9g5f-75
    
    
        This site is powered by
            Kallithea 0.7.0,
        which is
        © 2010–2021 by various authors & licensed under GPLv3.
            – Support