Mercurial > code > home > repos > light9
changeset 1617:ff193840cd84
timeline cleanups. rm old adjuster class.
Ignore-this: cbcaa296b818ebef0a155f13a4004be2
author | Drew Perttula <drewp@bigasterisk.com> |
---|---|
date | Wed, 07 Jun 2017 07:28:37 +0000 |
parents | 2362fcf5e220 |
children | ab025bf6c3df |
files | light9/web/timeline/timeline-elements.html light9/web/timeline/timeline.coffee |
diffstat | 2 files changed, 3 insertions(+), 125 deletions(-) [+] |
line wrap: on
line diff
--- a/light9/web/timeline/timeline-elements.html Wed Jun 07 05:48:04 2017 +0000 +++ b/light9/web/timeline/timeline-elements.html Wed Jun 07 07:28:37 2017 +0000 @@ -87,7 +87,7 @@ height: 100%; } #rows.dragging { -background: rgba(126, 52, 245, 0.0784313725490196); + background: rgba(126, 52, 245, 0.0784); } light9-timeline-audio { width: 100%; @@ -127,8 +127,6 @@ - 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 @@ -160,8 +158,6 @@ <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> @@ -255,66 +251,6 @@ </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>
--- a/light9/web/timeline/timeline.coffee Wed Jun 07 05:48:04 2017 +0000 +++ b/light9/web/timeline/timeline.coffee Wed Jun 07 07:28:37 2017 +0000 @@ -633,57 +633,6 @@ 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) -> @@ -881,7 +830,7 @@ 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) @@ -936,6 +885,7 @@ # 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 @@ -1003,11 +953,3 @@ #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]))