light9 Changeset - ff193840cd84

Changeset - ff193840cd84

Parent rev.

Child rev.

[Not reviewed]

default

0 2 0

Drew Perttula - 8 years ago 2017-06-07 07:28:37
drewp@bigasterisk.com

timeline cleanups. rm old adjuster class.
Ignore-this: cbcaa296b818ebef0a155f13a4004be2

2 files changed with 3 insertions and 125 deletions:

light9/web/timeline/timeline-elements.html

light9/web/timeline/timeline.coffee

0 comments (0 inline, 0 general)

light9/web/timeline/timeline-elements.html

➞

Show inline comments

@@ @@ -84,13 +84,13 @@ @@
      div {
          display: flex;
          flex-direction: column;
          height: 100%;
+     }
      #rows.dragging {
-background: rgba(126, 52, 245, 0.0784313725490196);
+         background: rgba(126, 52, 245, 0.0784);
+         }
      light9-timeline-audio {
          width: 100%;
          height: 100px;
+     }
      light9-timeline-graph-row {
@@ @@ -124,14 +124,12 @@ background: rgba(126, 52, 245, 0.0784313 @@
 <!--
      SVG or canvas that draws these:
        - background grids
        - zoom arcs
        - notes
        - annotations on notes
        - connectors between adjusters and their targets
      This element is not responsible for any hit detection. Things you click (rows,
      notes, adjusters, etc) are caught on their respective elements. (But is that
      wrong in the case of notes?)
    -->
 <dom-module id="light9-timeline-diagram-layer">
@@ @@ -157,14 +155,12 @@ background: rgba(126, 52, 245, 0.0784313 @@
             y="631.3988"
             id="text4290"
             sodipodi:linespacing="125%" ><tspan sodipodi:role="line" id="tspan4292" x="-338.38403" y="631.3988">spotchase</tspan></text>
         <g id="timeAxis" transform="translate(0,40)"></g>
         <g id="mouse"></g>
         <g id="notes"></g>
         <g id="noteLabels"></g>
         <g id="connectors"></g>
       </g>
     </svg>
   </template>
 </dom-module>
 <dom-module id="light9-cursor-canvas">
@@ @@ -252,72 +248,12 @@ background: rgba(126, 52, 245, 0.0784313 @@
+     }
     </style>
   </template>
 </dom-module>
 <!-- Yellow dotted handle that you can adjust to edit something.
      Knows an attribute to edit and the true screen location, even if
      parent <light9-timeline-adjusters> has offset us a bit to avoid a
      text overlap.
      Draws affordance arrows and a connector line if we're far
      away from the point that we edit.
      May grow to a bigger editor when you click or drag.
    -->
 <dom-module id="light9-timeline-adjuster">
   <template>
     <style>
      /*
      #top {outline: 2px solid rgba(255, 0, 0, 0.25);}
      table {outline: 2px solid rgba(0, 0, 255, 0.19);}
      */
      #top {
          position: absolute;
          display: inline-block;
+     }
      table {
          position: relative;
          left: -50%;
          top: -40px; /* percent had no effect */
          z-index: 2;
          border-collapse: collapse;
+     }
      td {
          text-align: center;
          font-size: 20px;
+     }
      span {
          font-size: 16px;
          background: rgba(255, 255, 0, 0.5);
          border: 3px yellow dotted;
          border-radius: 8px;
          padding: 5px;
          cursor: ew-resize;
          -webkit-user-select: none;
          pointer-events: all;
+     }
      span.empty {
          width: 30px; /* todo: supposed to fill the whole visible section*/
          height: 13px;
          display: inline-block;
          background: rgba(0,0,0,0);
+     }
     </style>
     <div id="top" style$="left: [[centerStyle.x]]px; top: [[centerStyle.y]]px">
       <table>
         <tr><td></td><td style="visibility: hidden">↑</td><td></td></tr>
         <tr><td>←</td><td><span id="label" class$="[[spanClass]]">[[displayValue]]</span></td><td>→</td></tr>
         <tr><td></td><td style="visibility: hidden">↓</td><td></td></tr>
       </table>
     </div>
   </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;

light9/web/timeline/timeline.coffee

➞

Show inline comments

@@ @@ -630,63 +630,12 @@ Polymer @@
   onDel: ->
     patch = {delQuads: [{subject: @song, predicate: @graph.Uri(':note'), object: @uri, graph: @song}], addQuads: []}
     @graph.applyAndSendPatch(patch)
 class deleteme
   go: ->
     visible: { type: Boolean, notify: true }
     displayValue: { type: String }
     centerStyle: { type: Object }
     spanClass: { type: String, value: '' }
   observer: [
     'onAdj(graph, adj, dia, id, visible)'
+    ]
   onAdj:  ->
     log('onAdj', @id)
     @adj.subscribe(@updateDisplay.bind(this))
     @graph.runHandler(@updateDisplay.bind(@))
   updateDisplay: () ->
     go = =>
       if !@visible
         @clearElements()
         return
       window.debug_adjUpdateDisplay++
       @spanClass = if @adj.config.emptyBox then 'empty' else ''
       @displayValue = @adj.getDisplayValue()
       center = @adj.getCenter()
       target = @adj.getTarget()
       #log("adj updateDisplay center #{center.elements} target #{target.elements}")
       return if isNaN(center.e(1))
       @centerStyle = {x: center.e(1), y: center.e(2)}
       @dia.setAdjusterConnector(@adj.id + '/conn', center, target)
     @debounce('updateDisplay', go)
   attached: ->
     drag = d3.drag()
     sel = d3.select(@$.label)
     sel.call(drag)
     drag.subject((d) -> {x: @offsetLeft, y: @offsetTop})
     drag.container(@offsetParent)
     drag.on('start', () => @adj?.startDrag())
     drag.on 'drag', () =>
       @adj?.continueDrag($V([d3.event.x, d3.event.y]))
     drag.on('end', () => @adj?.endDrag())
     @updateDisplay()
   detached: -> @clearElements()
   clearElements: ->
     @dia.clearElem(@adj.id, ['/conn'])
 svgPathFromPoints = (pts) ->
   out = ''
   pts.forEach (p) ->
     p = p.elements if p.elements # for vec2
     if out.length == 0
       out = 'M '
@@ @@ -878,13 +827,13 @@ Polymer @@
     # Todo: don't let their connector lines cross each other
     @qt = d3.quadtree([], ((d)->d.e(1)), ((d)->d.e(2)))
     @qt.extent([[0,0], [8000,8000]])
     for _, adj of @adjs
       desired = adj.getSuggestedCenter()
       output = desired
-      for tries in [0...2]
+      for tries in [0...4]
         nearest = @qt.find(output.e(1), output.e(2))
         if nearest
           dist = output.distanceFrom(nearest)
           if dist < 60
             away = output.subtract(nearest).toUnitVector()
             toScreenCenter = $V([500,200]).subtract(output).toUnitVector()
@@ @@ -933,12 +882,13 @@ Polymer @@
     @ctx.fillStyle = '#000'
     @ctx.fillText(label, x1 + 5, y2 - 5, x2 - x1 - 10)
     # coords from a center that's passed in
     # # special layout for the thaeter ones with middinh
     # l/r arrows
     # mouse arrow cursor upon hover, and accent the hovered adjuster
     # connector
 Polymer
   # note boxes
   is: 'light9-timeline-diagram-layer'
@@ @@ -1000,14 +950,6 @@ Polymer @@
     elem.setAttribute('d', svgPathFromPoints(curvePts))
     #elem = @getOrCreateElem(uri+'/label', 'noteLabels', 'text', {style: "font-size:13px;line-height:125%;font-family:'Verana Sans';text-align:start;text-anchor:start;fill:#000000;"})
     #elem.setAttribute('x', curvePts[0].e(1)+20)
     #elem.setAttribute('y', curvePts[0].e(2)-10)
     #elem.innerHTML = effectLabel;
   setAdjusterConnector: (uri, center, target) ->
     id = uri + '/adj'
     if not @anyPointsInView([center, target])
       @clearElem(id, [''])
       return
     elem = @getOrCreateElem(uri, 'connectors', 'path', {style: "fill:none;stroke:#d4d4d4;stroke-width:0.9282527;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:2.78475821, 2.78475821;stroke-dashoffset:0;"})
     elem.setAttribute('d', svgPathFromPoints([center, target]))

0 comments (0 inline, 0 general)