light9 Changeset - a73468c02bce

Changeset - a73468c02bce

Parent rev.

Child rev.

[Not reviewed]

default

0 3 0

Drew Perttula - 7 years ago 2018-05-27 02:20:42
drewp@bigasterisk.com

new adjuster layout algorithm
Ignore-this: 166c186d1932b6ad737f67135c95e131

3 files changed with 38 insertions and 29 deletions:

light9/web/timeline/adjustable.coffee

light9/web/timeline/adjusters.coffee

light9/web/timeline/timeline.coffee

0 comments (0 inline, 0 general)

light9/web/timeline/adjustable.coffee

➞

Show inline comments

@@ @@ -17,26 +17,26 @@ class Adjustable @@
     # config has:
     #   getTarget -> vec2 of current target position
     #   getSuggestedTargetOffset -> vec2 pixel offset from target
     #   emptyBox -> true if you want no value display
     # updated later by layout algoritm
-    @centerOffset = $V([0, 0])
+    @handle = $V([0, 0])
   getDisplayValue: () ->
     return '' if @config.emptyBox
     defaultFormat = d3.format(".4g")(@_getValue())
     if @config.getDisplayValue?
       return @config.getDisplayValue(@_getValue(), defaultFormat)
     defaultFormat
-  getSuggestedCenter: () ->
+  getSuggestedHandle: () ->
     @getTarget().add(@config.getSuggestedTargetOffset())
   getCenter: () -> # vec2 of pixels
     @getTarget().add(@centerOffset)
   getHandle: () -> # vec2 of pixels
     @handle
   getTarget: () -> # vec2 of pixels
     @config.getTarget()
   subscribe: (onChange) ->
     # change could be displayValue or center or target. This likely

light9/web/timeline/adjusters.coffee

➞

Show inline comments

 log = console.log
 Drawing = window.Drawing
 maxDist = 60
 coffeeElementSetup(class AdjustersCanvas extends Polymer.mixinBehaviors([Polymer.IronResizableBehavior], Polymer.Element)
   @is: 'light9-adjusters-canvas'
   @getter_properties:
     setAdjuster: {type: Function, notify: true }
   @getter_observers: [
     'updateAllCoords(adjs)'
@@ @@ -68,31 +70,34 @@ coffeeElementSetup(class AdjustersCanvas @@
     @redraw()
   _adjAtPoint: (pt) ->
     nearest = @qt.find(pt.e(1), pt.e(2))
     if nearest?
       log('near', nearest.distanceFrom(pt))
-    if not nearest? or nearest.distanceFrom(pt) > 70
+    if not nearest? or nearest.distanceFrom(pt) > maxDist
       return null
     return nearest?.adj
   resizeUpdate: (ev) ->
     @$.canvas.width = ev.target.offsetWidth
     @$.canvas.height = ev.target.offsetHeight
     @canvasCenter = $V([@$.canvas.width / 2, @$.canvas.height / 2])
     @redraw()
   _throttledRedraw: () ->
     return unless @ctx?
     console.time('adjs redraw')
     @_layoutCenters()
     @ctx.clearRect(0, 0, @$.canvas.width, @$.canvas.height)
     for adjId, adj of @adjs
-      ctr = adj.getCenter()
+      ctr = adj.getHandle()
       target = adj.getTarget()
       if target.e(1) < 0 or target.e(1) > @$.canvas.width or target.e(2) < 0 or target.e(2) > @$.canvas.height
         continue
       @_drawConnector(ctr, target)
       @_drawAdjuster(adj.getDisplayValue(),
                      Math.floor(ctr.e(1)) - 20, Math.floor(ctr.e(2)) - 10,
                      Math.floor(ctr.e(1)) + 20, Math.floor(ctr.e(2)) + 10)
     console.timeEnd('adjs redraw')
@@ @@ -100,33 +105,39 @@ coffeeElementSetup(class AdjustersCanvas @@
   _layoutCenters: ->
     # push Adjustable centers around to avoid overlaps
     # Todo: also don't overlap inlineattr boxes
     # 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...4]
         nearest = @qt.find(output.e(1), output.e(2))
       adj.handle = adj.getSuggestedHandle()
     for tries in [0...5]
       for _, adj of @adjs
         current = adj.handle
         @qt.remove(current)
         nearest = @qt.find(current.e(1), current.e(2), maxDist)
         if nearest
           dist = output.distanceFrom(nearest)
           if dist < 60
             away = output.subtract(nearest).toUnitVector()
             toScreenCenter = $V([500,200]).subtract(output).toUnitVector()
             output = output.add(away.x(60).add(toScreenCenter.x(10)))
           dist = current.distanceFrom(nearest)
           if dist < maxDist
             away = current.subtract(nearest).toUnitVector()
             toScreenCenter = @canvasCenter.subtract(current).toUnitVector()
             current = current.add(away.x(20).add(toScreenCenter.x(2)))
             marg = 10
             current = $V([Math.max(marg, Math.min(@$.canvas.width - marg, current.e(1))),
                          Math.max(marg, Math.min(@$.canvas.height - marg, current.e(2)))])
             adj.handle = current
         current.adj = adj
         @qt.add(current)
       if -50 < output.e(1) < 20 # mostly for zoom-left
         output.setElements([
           Math.max(20, output.e(1)),
           output.e(2)])
       #if -50 < output.e(1) < 20 # mostly for zoom-left
       #  output.setElements([
       #    Math.max(20, output.e(1)),
       #    output.e(2)])
       adj.centerOffset = output.subtract(adj.getTarget())
       output.adj = adj
       @qt.add(output)
   _drawConnector: (ctr, target) ->
     @ctx.strokeStyle = '#aaa'
     @ctx.lineWidth = 2
     @ctx.beginPath()
     Drawing.line(@ctx, ctr, target)
     @ctx.stroke()

light9/web/timeline/timeline.coffee

➞

Show inline comments

@@ @@ -49,26 +49,24 @@ class Project @@
         quad(newNote, U(':originTime'), @graph.LiteralRoundedFloat(dropTime))
         quad(newNote, U(':effectClass'), effect)
         quad(newNote, U(':curve'), newCurve)
         quad(newCurve, U('rdf:type'), U(':Curve'))
         quad(newCurve, U(':attr'), U(':strength'))
+      ]
     pointQuads = []
     for i in [0...4]
       pt = points[i]
       pointQuads.push(quad(newCurve, U(':point'), pt))
       pointQuads.push(quad(pt, U(':time'), @graph.LiteralRoundedFloat(i/3 * desiredWidthT)))
       pointQuads.push(quad(pt, U(':value'), @graph.LiteralRoundedFloat(i == 1 or i == 2)))
     patch = {
       delQuads: []
       addQuads: curveQuads.concat(pointQuads)
+      }
+    }
     @graph.applyAndSendPatch(patch)
   getCurvePoints: (curve, xOffset) ->
     worldPts = []
     uris = @graph.objects(curve, @graph.Uri(':point'))
     for pt in uris
@@ @@ -242,21 +240,21 @@ coffeeElementSetup(class TimelineEditor @@
       x = pos.e(1)
       t = @viewState.fullZoomX.invert(x)
     @setAdjuster('zoom-left', => new AdjustableFloatObservable({
       observable: @viewState.zoomSpec.t1,
       getTarget: () =>
         $V([@viewState.fullZoomX(@viewState.zoomSpec.t1()), yMid()])
-      getSuggestedTargetOffset: () => $V([50, 0])
+      getSuggestedTargetOffset: () => $V([50, 10])
       getValueForPos: valForPos
     }))
     @setAdjuster('zoom-right', => new AdjustableFloatObservable({
       observable: @viewState.zoomSpec.t2,
       getTarget: () =>
         $V([@viewState.fullZoomX(@viewState.zoomSpec.t2()), yMid()])
-      getSuggestedTargetOffset: () => $V([-50, 0])
+      getSuggestedTargetOffset: () => $V([-50, 10])
       getValueForPos: valForPos
     }))
     panObs = ko.pureComputed({
       read: () =>
         (@viewState.zoomSpec.t1() + @viewState.zoomSpec.t2()) / 2

0 comments (0 inline, 0 general)