light9 Changeset - ce1f94c5ca93

Changeset - ce1f94c5ca93

Parent rev.

Child rev.

[Not reviewed]

default

0 2 0

Drew Perttula - 8 years ago 2017-06-08 07:54:08
drewp@bigasterisk.com

note selection and hover look
Ignore-this: 5b18cd57e1607d9d5291159cbe392aee

2 files changed with 50 insertions and 12 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

@@ @@ -132,17 +132,30 @@ @@
      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">
   <template>
     <style>
      :host {
       :host {
+      }
       svg {
       width: 100%;
       height: 100%;
+      }
       #notes > path {
       stroke:#000000;
       stroke-width:1.5;
+      }
      #notes > path.hover {
          stroke-width: 1.5;
          stroke: #888;
+     }
      svg {
          width: 100%;
          height: 100%;
      #notes > path.selected {
          stroke-width: 5;
          stroke: red;
+     }
     </style>
     <svg xmlns="http://www.w3.org/2000/svg"
          xmlns:svg="http://www.w3.org/2000/svg"
          xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" >
       <g id="layer1">

light9/web/timeline/timeline.coffee

➞

Show inline comments

@@ @@ -456,13 +456,12 @@ Polymer @@
         if (add.predicate == del.predicate == @graph.Uri(':time') and
             add.subject == del.subject)
           timeEditFor = add.subject
           if @worldPts and timeEditFor not in @pointUris
             return false
     return true
   update: (patch) ->
     if not @patchCouldAffectMe(patch)
       # as autodep still fires all handlers on all patches, we just
       # need any single dep to cause another callback. (without this,
       # we would no longer be registered at all)
@@ @@ -887,34 +886,37 @@ Polymer @@
     # l/r arrows
     # mouse arrow cursor upon hover, and accent the hovered adjuster
     # connector
 Polymer
   # note boxes
+  # note boxes. Page selection.
   is: 'light9-timeline-diagram-layer'
   properties: {}
   ready: ->
     @elemById = {}
     @selection = {hover: ko.observable(null), selected: ko.observable([])}
   attached: ->
     @querySelector('svg').add
   setTimeAxis: (width, yTop, scale) ->
     pxPerTick = 50
     axis = d3.axisTop(scale).ticks(width / pxPerTick)
     d3.select(@$.timeAxis).attr('transform', 'translate(0,'+yTop+')').call(axis)
   getOrCreateElem: (uri, groupId, tag, attrs) ->
+  getOrCreateElem: (uri, groupId, tag, attrs, moreBuild) ->
     elem = @elemById[uri]
     if !elem
       elem = @elemById[uri] = document.createElementNS("http://www.w3.org/2000/svg", tag)
       @$[groupId].appendChild(elem)
       elem.setAttribute('id', uri)
       for k,v of attrs
         elem.setAttribute(k, v)
       if moreBuild
         moreBuild(elem)
     return elem
   clearElem: (uri, suffixes) -> # todo: caller shouldn't have to know suffixes!
     for suff in suffixes
       elem = @elemById[uri+suff]
       if elem
@@ @@ -925,13 +927,13 @@ Polymer @@
     for pt in pts
       # wrong:
       if pt.e(1) > -100 && pt.e(1) < 2500
         return true
     return false
   setNote: (uri, curvePts, effect) ->
+  setNote: (uri, curvePts, effect, classes) ->
     areaId = uri + '/area'
     labelId = uri + '/label'
     if not @anyPointsInView(curvePts)
       @clearElem(uri, ['/area', '/label'])
       return
     # for now these need to be pretty transparent since they're
@@ @@ -944,15 +946,38 @@ Polymer @@
     else
       hash = 0
       for i in [(effect.length-10)...effect.length]
         hash += effect.charCodeAt(i)
       hue = (hash * 8) % 360
       sat = 40 + (hash % 20) # don't conceal colorscale too much
     attrs = {style: "fill:hsla(#{hue}, #{sat}%, 58%, 0.313);"}
     elem = @getOrCreateElem areaId, 'notes', 'path', attrs, (elem) =>
       elem.addEventListener 'mouseenter', =>
         @selection.hover(uri)
         log('enter', uri)
       elem.addEventListener 'mousedown', (ev) =>
         log('click', uri)
         sel = @selection.selected()
         if ev.getModifierState('Control')
           if uri in sel
             sel = _.without(sel, uri)
           else
             sel.push(uri)
         else
           sel = [uri]
         @selection.selected(sel)
       elem.addEventListener 'mouseleave', =>
         log('leave', uri)
         @selection.hover(null)
     elem.setAttribute('d', svgPathFromPoints(curvePts))
     @updateNotePathClasses(uri, elem)
   updateNotePathClasses: (uri, elem) ->
     ko.computed =>
       classes = 'light9-timeline-diagram-layer ' + (if @selection.hover() == uri then 'hover' else '') + ' '  + (if uri in @selection.selected() then 'selected' else '')
       elem.setAttribute('class', classes)
     elem = @getOrCreateElem(areaId, 'notes', 'path',
       {style:"fill:hsla(#{hue}, #{sat}%, 58%, 0.313); stroke:#000000; stroke-width:1.5;"})
     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;

0 comments (0 inline, 0 general)