Mercurial > code > home > repos > light9
annotate light9/web/timeline-elements.html @ 1323:a77bb5bf9d89
switch zoom system to ko.observable, which works much better
Ignore-this: a35d2a2a045cdc4d5002ba5f5085fbef
| author | Drew Perttula <drewp@bigasterisk.com> |
|---|---|
| date | Sat, 04 Jun 2016 01:39:16 +0000 |
| parents | fb8aa1cb96e1 |
| children | bb4cd6d7d274 |
| rev | line source |
|---|---|
| 1314 | 1 <link rel="import" href="/lib/polymer/polymer.html"> |
| 2 <link rel="import" href="light9-timeline-audio.html"> | |
| 3 <link rel="import" href="/lib/iron-resizable-behavior/iron-resizable-behavior.html"> | |
| 4 | |
| 5 <!-- Whole editor- include this on your page. | |
| 6 Most coordinates are relative to this element. | |
| 7 --> | |
| 8 <dom-module id="light9-timeline-editor"> | |
| 9 <template> | |
| 10 <style> | |
| 11 :host { | |
| 12 background: #444; | |
| 13 display: flex; | |
| 14 flex-direction: column; | |
| 15 position: relative; | |
| 16 border: 1px solid black; | |
| 17 } | |
| 18 light9-timeline-audio { | |
| 19 width: 100%; | |
| 20 height: 30px; | |
| 21 } | |
| 22 light9-timeline-time-zoomed { | |
| 23 flex-grow: 1; | |
| 24 } | |
|
1315
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
25 light9-timeline-diagram-layer, light9-timeline-adjusters { |
| 1314 | 26 position: absolute; |
|
1317
4c6d88aa9e26
enough element and rdf support to drag one adjuster and see its value change
Drew Perttula <drewp@bigasterisk.com>
parents:
1315
diff
changeset
|
27 left: 0; top: 0; right: 0; bottom: 0; |
| 1314 | 28 } |
|
1322
fb8aa1cb96e1
attempt zoom controls, but updates aren't working well.
Drew Perttula <drewp@bigasterisk.com>
parents:
1321
diff
changeset
|
29 #debug { |
|
fb8aa1cb96e1
attempt zoom controls, but updates aren't working well.
Drew Perttula <drewp@bigasterisk.com>
parents:
1321
diff
changeset
|
30 position: fixed; |
|
fb8aa1cb96e1
attempt zoom controls, but updates aren't working well.
Drew Perttula <drewp@bigasterisk.com>
parents:
1321
diff
changeset
|
31 right: 0; |
|
fb8aa1cb96e1
attempt zoom controls, but updates aren't working well.
Drew Perttula <drewp@bigasterisk.com>
parents:
1321
diff
changeset
|
32 bottom: 0; |
|
fb8aa1cb96e1
attempt zoom controls, but updates aren't working well.
Drew Perttula <drewp@bigasterisk.com>
parents:
1321
diff
changeset
|
33 } |
| 1314 | 34 </style> |
| 35 <div> | |
| 36 timeline editor: song [uri] <button>unlink</button> | |
| 37 <label><input type="checkbox"> follow player song choice</label> | |
| 38 </div> | |
| 39 <!-- | |
| 40 Old zoom menu: | |
| 41 See current time .. esc | |
| 42 See from current time -> end .. shift+esc | |
| 43 Zoom all .. ctrl+esc | |
| 44 --> | |
|
1323
a77bb5bf9d89
switch zoom system to ko.observable, which works much better
Drew Perttula <drewp@bigasterisk.com>
parents:
1322
diff
changeset
|
45 <light9-timeline-audio id="audio"></light9-timeline-audio> |
|
1315
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
46 <light9-timeline-time-zoomed id="zoomed" zoom="{{viewState.zoomSpec}}"></light9-timeline-time-zoomed> |
|
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
47 <light9-timeline-diagram-layer id="dia"></light9-timeline-diagram-layer> |
|
1317
4c6d88aa9e26
enough element and rdf support to drag one adjuster and see its value change
Drew Perttula <drewp@bigasterisk.com>
parents:
1315
diff
changeset
|
48 <light9-timeline-adjusters id="adjusters" adjs="{{adjs}}"></light9-timeline-adjusters> |
|
1322
fb8aa1cb96e1
attempt zoom controls, but updates aren't working well.
Drew Perttula <drewp@bigasterisk.com>
parents:
1321
diff
changeset
|
49 <div id="debug">[[debug]]</div> |
| 1314 | 50 </template> |
|
1317
4c6d88aa9e26
enough element and rdf support to drag one adjuster and see its value change
Drew Perttula <drewp@bigasterisk.com>
parents:
1315
diff
changeset
|
51 |
| 1314 | 52 </dom-module> |
| 53 | |
| 54 | |
| 55 <!-- the whole section that pans/zooms in time (most of the editor) --> | |
| 56 <dom-module id="light9-timeline-time-zoomed"> | |
| 57 <template> | |
| 58 <style> | |
| 59 :host { | |
| 60 display: flex; | |
| 61 height: 100%; | |
| 62 } | |
| 63 div { | |
| 64 display: flex; | |
| 65 flex-direction: column; | |
| 66 height: 100%; | |
| 67 | |
| 68 } | |
| 69 light9-timeline-audio { | |
| 70 width: 100%; | |
| 71 height: 90px; | |
| 72 } | |
| 73 light9-timeline-graph-row { | |
| 74 flex-grow: 1; | |
| 75 } | |
| 76 </style> | |
| 77 <div> | |
|
1315
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
78 <light9-timeline-time-axis id="time"></light9-timeline-time-axis> |
|
1323
a77bb5bf9d89
switch zoom system to ko.observable, which works much better
Drew Perttula <drewp@bigasterisk.com>
parents:
1322
diff
changeset
|
79 <light9-timeline-audio zoom="{{zoomFlattened}}"></light9-timeline-audio> |
|
1315
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
80 <template is="dom-repeat" items="{{rows}}"> |
|
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
81 <light9-timeline-graph-row></light9-timeline-graph-row> |
|
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
82 </template> |
| 1314 | 83 </div> |
| 84 </template> | |
| 85 <script> | |
| 86 Polymer({ | |
| 87 is: "light9-timeline-time-zoomed", | |
|
1323
a77bb5bf9d89
switch zoom system to ko.observable, which works much better
Drew Perttula <drewp@bigasterisk.com>
parents:
1322
diff
changeset
|
88 behaviors: [ |
|
a77bb5bf9d89
switch zoom system to ko.observable, which works much better
Drew Perttula <drewp@bigasterisk.com>
parents:
1322
diff
changeset
|
89 Polymer.IronResizableBehavior |
|
a77bb5bf9d89
switch zoom system to ko.observable, which works much better
Drew Perttula <drewp@bigasterisk.com>
parents:
1322
diff
changeset
|
90 ], |
| 1314 | 91 properties: { |
| 92 rows: {value: [0, 1, 2, 3]}, | |
|
1323
a77bb5bf9d89
switch zoom system to ko.observable, which works much better
Drew Perttula <drewp@bigasterisk.com>
parents:
1322
diff
changeset
|
93 zoom: {type: Object, notify: true, observer: 'onZoom'}, |
|
a77bb5bf9d89
switch zoom system to ko.observable, which works much better
Drew Perttula <drewp@bigasterisk.com>
parents:
1322
diff
changeset
|
94 zoomFlattened: {type: Object, notify: true} |
|
a77bb5bf9d89
switch zoom system to ko.observable, which works much better
Drew Perttula <drewp@bigasterisk.com>
parents:
1322
diff
changeset
|
95 }, |
|
a77bb5bf9d89
switch zoom system to ko.observable, which works much better
Drew Perttula <drewp@bigasterisk.com>
parents:
1322
diff
changeset
|
96 onZoom: function() { |
|
a77bb5bf9d89
switch zoom system to ko.observable, which works much better
Drew Perttula <drewp@bigasterisk.com>
parents:
1322
diff
changeset
|
97 ko.computed(function() { |
|
a77bb5bf9d89
switch zoom system to ko.observable, which works much better
Drew Perttula <drewp@bigasterisk.com>
parents:
1322
diff
changeset
|
98 this.zoomFlattened = ko.toJS(this.zoom); |
|
a77bb5bf9d89
switch zoom system to ko.observable, which works much better
Drew Perttula <drewp@bigasterisk.com>
parents:
1322
diff
changeset
|
99 }.bind(this)); |
| 1314 | 100 } |
| 101 }); | |
| 102 </script> | |
| 103 </dom-module> | |
| 104 | |
| 105 | |
| 106 <!-- | |
| 107 SVG or canvas that draws these: | |
| 108 - background grids | |
| 109 - zoom arcs | |
| 110 - notes | |
| 111 - annotations on notes | |
|
1315
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
112 - connectors between adjusters and their targets |
| 1314 | 113 |
| 114 This element is not responsible for any hit detection. Things you click (rows, | |
|
1315
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
115 notes, adjusters, etc) are caught on their respective elements. (But is that |
| 1314 | 116 wrong in the case of notes?) |
| 117 --> | |
| 118 <dom-module id="light9-timeline-diagram-layer"> | |
| 119 <template> | |
|
1315
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
120 <style> |
|
1317
4c6d88aa9e26
enough element and rdf support to drag one adjuster and see its value change
Drew Perttula <drewp@bigasterisk.com>
parents:
1315
diff
changeset
|
121 :host { |
|
4c6d88aa9e26
enough element and rdf support to drag one adjuster and see its value change
Drew Perttula <drewp@bigasterisk.com>
parents:
1315
diff
changeset
|
122 pointer-events: none; |
|
4c6d88aa9e26
enough element and rdf support to drag one adjuster and see its value change
Drew Perttula <drewp@bigasterisk.com>
parents:
1315
diff
changeset
|
123 } |
|
1315
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
124 svg { |
|
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
125 width: 100%; |
|
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
126 height: 100%; |
|
1317
4c6d88aa9e26
enough element and rdf support to drag one adjuster and see its value change
Drew Perttula <drewp@bigasterisk.com>
parents:
1315
diff
changeset
|
127 pointer-events: none; |
|
1315
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
128 } |
|
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
129 </style> |
|
1317
4c6d88aa9e26
enough element and rdf support to drag one adjuster and see its value change
Drew Perttula <drewp@bigasterisk.com>
parents:
1315
diff
changeset
|
130 <svg |
|
4c6d88aa9e26
enough element and rdf support to drag one adjuster and see its value change
Drew Perttula <drewp@bigasterisk.com>
parents:
1315
diff
changeset
|
131 xmlns:dc="http://purl.org/dc/elements/1.1/" |
|
4c6d88aa9e26
enough element and rdf support to drag one adjuster and see its value change
Drew Perttula <drewp@bigasterisk.com>
parents:
1315
diff
changeset
|
132 xmlns:cc="http://creativecommons.org/ns#" |
|
4c6d88aa9e26
enough element and rdf support to drag one adjuster and see its value change
Drew Perttula <drewp@bigasterisk.com>
parents:
1315
diff
changeset
|
133 xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" |
|
4c6d88aa9e26
enough element and rdf support to drag one adjuster and see its value change
Drew Perttula <drewp@bigasterisk.com>
parents:
1315
diff
changeset
|
134 xmlns:svg="http://www.w3.org/2000/svg" |
|
4c6d88aa9e26
enough element and rdf support to drag one adjuster and see its value change
Drew Perttula <drewp@bigasterisk.com>
parents:
1315
diff
changeset
|
135 xmlns="http://www.w3.org/2000/svg" |
|
4c6d88aa9e26
enough element and rdf support to drag one adjuster and see its value change
Drew Perttula <drewp@bigasterisk.com>
parents:
1315
diff
changeset
|
136 xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" |
|
4c6d88aa9e26
enough element and rdf support to drag one adjuster and see its value change
Drew Perttula <drewp@bigasterisk.com>
parents:
1315
diff
changeset
|
137 xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" |
|
4c6d88aa9e26
enough element and rdf support to drag one adjuster and see its value change
Drew Perttula <drewp@bigasterisk.com>
parents:
1315
diff
changeset
|
138 viewBox="0 0 1021 600" |
|
4c6d88aa9e26
enough element and rdf support to drag one adjuster and see its value change
Drew Perttula <drewp@bigasterisk.com>
parents:
1315
diff
changeset
|
139 > |
|
4c6d88aa9e26
enough element and rdf support to drag one adjuster and see its value change
Drew Perttula <drewp@bigasterisk.com>
parents:
1315
diff
changeset
|
140 <g id="layer1"> |
|
4c6d88aa9e26
enough element and rdf support to drag one adjuster and see its value change
Drew Perttula <drewp@bigasterisk.com>
parents:
1315
diff
changeset
|
141 |
|
4c6d88aa9e26
enough element and rdf support to drag one adjuster and see its value change
Drew Perttula <drewp@bigasterisk.com>
parents:
1315
diff
changeset
|
142 <path |
|
4c6d88aa9e26
enough element and rdf support to drag one adjuster and see its value change
Drew Perttula <drewp@bigasterisk.com>
parents:
1315
diff
changeset
|
143 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;" |
|
4c6d88aa9e26
enough element and rdf support to drag one adjuster and see its value change
Drew Perttula <drewp@bigasterisk.com>
parents:
1315
diff
changeset
|
144 d="m 202.190957,301.51493 22.56802038,0" |
|
4c6d88aa9e26
enough element and rdf support to drag one adjuster and see its value change
Drew Perttula <drewp@bigasterisk.com>
parents:
1315
diff
changeset
|
145 id="adjConnector"/> |
|
4c6d88aa9e26
enough element and rdf support to drag one adjuster and see its value change
Drew Perttula <drewp@bigasterisk.com>
parents:
1315
diff
changeset
|
146 <text |
|
4c6d88aa9e26
enough element and rdf support to drag one adjuster and see its value change
Drew Perttula <drewp@bigasterisk.com>
parents:
1315
diff
changeset
|
147 xml:space="preserve" |
|
4c6d88aa9e26
enough element and rdf support to drag one adjuster and see its value change
Drew Perttula <drewp@bigasterisk.com>
parents:
1315
diff
changeset
|
148 style="font-size:13px;line-height:125%;font-family:'Verana Sans';-inkscape-font-specification:'Verana Sans';text-align:start;text-anchor:start;fill:#000000;" |
|
4c6d88aa9e26
enough element and rdf support to drag one adjuster and see its value change
Drew Perttula <drewp@bigasterisk.com>
parents:
1315
diff
changeset
|
149 x="-338.38403" |
|
4c6d88aa9e26
enough element and rdf support to drag one adjuster and see its value change
Drew Perttula <drewp@bigasterisk.com>
parents:
1315
diff
changeset
|
150 y="631.3988" |
|
4c6d88aa9e26
enough element and rdf support to drag one adjuster and see its value change
Drew Perttula <drewp@bigasterisk.com>
parents:
1315
diff
changeset
|
151 id="text4290" |
|
4c6d88aa9e26
enough element and rdf support to drag one adjuster and see its value change
Drew Perttula <drewp@bigasterisk.com>
parents:
1315
diff
changeset
|
152 sodipodi:linespacing="125%" ><tspan sodipodi:role="line" id="tspan4292" x="-338.38403" y="631.3988">spotchase</tspan></text> |
|
4c6d88aa9e26
enough element and rdf support to drag one adjuster and see its value change
Drew Perttula <drewp@bigasterisk.com>
parents:
1315
diff
changeset
|
153 |
|
4c6d88aa9e26
enough element and rdf support to drag one adjuster and see its value change
Drew Perttula <drewp@bigasterisk.com>
parents:
1315
diff
changeset
|
154 <g id="notes"> |
|
4c6d88aa9e26
enough element and rdf support to drag one adjuster and see its value change
Drew Perttula <drewp@bigasterisk.com>
parents:
1315
diff
changeset
|
155 </g> |
|
4c6d88aa9e26
enough element and rdf support to drag one adjuster and see its value change
Drew Perttula <drewp@bigasterisk.com>
parents:
1315
diff
changeset
|
156 <g id="cursor"> |
|
4c6d88aa9e26
enough element and rdf support to drag one adjuster and see its value change
Drew Perttula <drewp@bigasterisk.com>
parents:
1315
diff
changeset
|
157 <path id="cursor1" style="fill:none; stroke:#ff0303; stroke-width:1.5; stroke-linecap:butt;" /> |
|
4c6d88aa9e26
enough element and rdf support to drag one adjuster and see its value change
Drew Perttula <drewp@bigasterisk.com>
parents:
1315
diff
changeset
|
158 <path id="cursor2" style="fill:#9c0303;" /> |
|
4c6d88aa9e26
enough element and rdf support to drag one adjuster and see its value change
Drew Perttula <drewp@bigasterisk.com>
parents:
1315
diff
changeset
|
159 <path id="cursor3" style="fill:none; stroke:#ff0303; stroke-width:3; stroke-linecap:butt;" /> |
|
4c6d88aa9e26
enough element and rdf support to drag one adjuster and see its value change
Drew Perttula <drewp@bigasterisk.com>
parents:
1315
diff
changeset
|
160 </g> |
|
4c6d88aa9e26
enough element and rdf support to drag one adjuster and see its value change
Drew Perttula <drewp@bigasterisk.com>
parents:
1315
diff
changeset
|
161 </g> |
|
4c6d88aa9e26
enough element and rdf support to drag one adjuster and see its value change
Drew Perttula <drewp@bigasterisk.com>
parents:
1315
diff
changeset
|
162 </svg> |
| 1314 | 163 |
| 164 </template> | |
| 165 <script> | |
|
1315
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
166 function svgPathFromPoints(pts) { |
|
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
167 var out = ""; |
|
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
168 pts.forEach(function(p) { |
|
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
169 if (out.length == 0) { |
|
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
170 out = 'M '; |
|
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
171 } else { |
|
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
172 out += 'L '; |
| 1314 | 173 } |
|
1315
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
174 out += '' + p[0] + ',' + p[1] + ' '; |
| 1314 | 175 }); |
|
1315
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
176 return out; |
|
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
177 } |
|
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
178 |
|
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
179 Polymer({ |
|
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
180 is: "light9-timeline-diagram-layer", |
|
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
181 properties: { |
|
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
182 }, |
|
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
183 ready: function() { |
|
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
184 window.setNote = this.setNote.bind(this); |
|
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
185 |
|
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
186 this.cursorPath = { |
|
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
187 top: this.querySelector("#cursor1"), |
|
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
188 mid: this.querySelector("#cursor2"), |
|
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
189 bot: this.querySelector("#cursor3") |
|
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
190 }; |
|
1317
4c6d88aa9e26
enough element and rdf support to drag one adjuster and see its value change
Drew Perttula <drewp@bigasterisk.com>
parents:
1315
diff
changeset
|
191 |
|
4c6d88aa9e26
enough element and rdf support to drag one adjuster and see its value change
Drew Perttula <drewp@bigasterisk.com>
parents:
1315
diff
changeset
|
192 this.noteById = {}; |
|
1315
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
193 }, |
|
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
194 setNote: function(uri, x1, x2, y1, y2) { |
|
1317
4c6d88aa9e26
enough element and rdf support to drag one adjuster and see its value change
Drew Perttula <drewp@bigasterisk.com>
parents:
1315
diff
changeset
|
195 var elem = this.noteById[uri]; |
|
4c6d88aa9e26
enough element and rdf support to drag one adjuster and see its value change
Drew Perttula <drewp@bigasterisk.com>
parents:
1315
diff
changeset
|
196 if (!elem) { |
|
4c6d88aa9e26
enough element and rdf support to drag one adjuster and see its value change
Drew Perttula <drewp@bigasterisk.com>
parents:
1315
diff
changeset
|
197 var s = '<path id="'+uri+'" style="fill:#53774b; stroke:#000000; stroke-width:1.5;"/>'; |
|
4c6d88aa9e26
enough element and rdf support to drag one adjuster and see its value change
Drew Perttula <drewp@bigasterisk.com>
parents:
1315
diff
changeset
|
198 this.$.notes.innerHTML += s; |
|
4c6d88aa9e26
enough element and rdf support to drag one adjuster and see its value change
Drew Perttula <drewp@bigasterisk.com>
parents:
1315
diff
changeset
|
199 elem = this.noteById[uri] = this.$.notes.lastChild; |
|
4c6d88aa9e26
enough element and rdf support to drag one adjuster and see its value change
Drew Perttula <drewp@bigasterisk.com>
parents:
1315
diff
changeset
|
200 } |
|
1315
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
201 |
|
1317
4c6d88aa9e26
enough element and rdf support to drag one adjuster and see its value change
Drew Perttula <drewp@bigasterisk.com>
parents:
1315
diff
changeset
|
202 var d = svgPathFromPoints([[x1, y2], [x1*.75 + x2*.25, y1], [x1*.25 + x2*.75, y1], [x2, y2]]); |
|
4c6d88aa9e26
enough element and rdf support to drag one adjuster and see its value change
Drew Perttula <drewp@bigasterisk.com>
parents:
1315
diff
changeset
|
203 elem.setAttribute('d', d); |
|
1315
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
204 }, |
|
1321
715a442c2635
cursor use d3.scales for coordinate system transforms
Drew Perttula <drewp@bigasterisk.com>
parents:
1320
diff
changeset
|
205 setCursor: function(y1, h1, y2, h2, fullZoomX, zoomInX, cursor) { |
|
715a442c2635
cursor use d3.scales for coordinate system transforms
Drew Perttula <drewp@bigasterisk.com>
parents:
1320
diff
changeset
|
206 var xZoomedOut = fullZoomX(cursor.t); |
|
715a442c2635
cursor use d3.scales for coordinate system transforms
Drew Perttula <drewp@bigasterisk.com>
parents:
1320
diff
changeset
|
207 var xZoomedIn = zoomInX(cursor.t); |
|
715a442c2635
cursor use d3.scales for coordinate system transforms
Drew Perttula <drewp@bigasterisk.com>
parents:
1320
diff
changeset
|
208 this.cursorPath.top.setAttribute('d', svgPathFromPoints([ |
|
715a442c2635
cursor use d3.scales for coordinate system transforms
Drew Perttula <drewp@bigasterisk.com>
parents:
1320
diff
changeset
|
209 [xZoomedOut, y1], |
|
715a442c2635
cursor use d3.scales for coordinate system transforms
Drew Perttula <drewp@bigasterisk.com>
parents:
1320
diff
changeset
|
210 [xZoomedOut, y1 + h1]])); |
|
1315
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
211 this.cursorPath.mid.setAttribute('d', svgPathFromPoints([ |
|
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
212 [xZoomedIn + 2, y2 + h2], |
|
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
213 [xZoomedIn - 2, y2 + h2], |
|
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
214 [xZoomedOut - 1, y1 + h1], |
|
1321
715a442c2635
cursor use d3.scales for coordinate system transforms
Drew Perttula <drewp@bigasterisk.com>
parents:
1320
diff
changeset
|
215 [xZoomedOut + 1, y1 + h1]]) + ' Z'); |
|
715a442c2635
cursor use d3.scales for coordinate system transforms
Drew Perttula <drewp@bigasterisk.com>
parents:
1320
diff
changeset
|
216 this.cursorPath.bot.setAttribute('d', svgPathFromPoints([ |
|
715a442c2635
cursor use d3.scales for coordinate system transforms
Drew Perttula <drewp@bigasterisk.com>
parents:
1320
diff
changeset
|
217 [xZoomedIn, y2 + h2], |
|
715a442c2635
cursor use d3.scales for coordinate system transforms
Drew Perttula <drewp@bigasterisk.com>
parents:
1320
diff
changeset
|
218 [xZoomedIn, this.offsetParent.offsetHeight]])); |
|
1315
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
219 |
|
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
220 } |
|
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
221 }); |
| 1314 | 222 </script> |
| 223 </dom-module> | |
| 224 | |
| 225 | |
| 226 <!-- seconds labels --> | |
| 227 <dom-module id="light9-timeline-time-axis"> | |
| 228 <template> | |
| 229 <pre>0 sec 10 20 30 40 50</pre> | |
| 230 </template> | |
| 231 <script> | |
| 232 Polymer({ | |
| 233 is: "light9-timeline-time-axis", | |
| 234 properties: { | |
| 235 } | |
| 236 }); | |
| 237 </script> | |
| 238 </dom-module> | |
| 239 | |
| 240 <!-- one row of notes --> | |
| 241 <dom-module id="light9-timeline-graph-row"> | |
| 242 <template> | |
| 243 <style> | |
| 244 :host { | |
| 245 border-top: 1px solid black; | |
| 246 display: flex; | |
| 247 } | |
| 248 </style> | |
| 249 <template is="dom-repeat" items="[1,2,3]"> | |
| 250 <light9-timeline-note></light9-timeline-note> | |
| 251 </template> | |
| 252 </template> | |
| 253 <script> | |
| 254 Polymer({ | |
| 255 is: "light9-timeline-graph-row", | |
| 256 behaviors: [ | |
| 257 Polymer.IronResizableBehavior | |
| 258 ], | |
| 259 properties: { | |
| 260 | |
| 261 } | |
| 262 }); | |
| 263 </script> | |
| 264 </dom-module> | |
| 265 | |
| 266 <!-- One trapezoid note shape in a row. | |
| 267 This element has the right Y coords. | |
| 268 We compute X coords from the zoom setting. | |
| 269 diagram-layer draws the note body. --> | |
| 270 <dom-module id="light9-timeline-note"> | |
| 271 <template> | |
| 272 <style> | |
| 273 :host { | |
| 274 display: block; | |
| 275 background: green; | |
| 276 outline: 2px solid red; | |
| 277 } | |
| 278 </style> | |
| 279 <light9-timeline-note-inline-attrs></light9-timeline-note-inline-attrs> | |
| 280 </template> | |
| 281 <script> | |
|
1315
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
282 window.xserial = 0; |
| 1314 | 283 Polymer({ |
| 284 is: "light9-timeline-note", | |
| 285 behaviors: [ | |
| 286 Polymer.IronResizableBehavior | |
| 287 ], | |
| 288 listeners: { | |
| 289 'iron-resize': '_onIronResize' | |
| 290 }, | |
| 291 properties: { | |
| 292 }, | |
| 293 | |
| 294 _onIronResize: function() { | |
| 295 | |
|
1315
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
296 setNote('myuri', 60 + 150 * (window.xserial++), 180, this.offsetTop, this.offsetTop + this.offsetHeight); |
| 1314 | 297 |
| 298 } | |
| 299 }); | |
| 300 </script> | |
| 301 </dom-module> | |
| 302 | |
|
1315
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
303 <!-- All the adjusters you can edit or select. |
| 1314 | 304 This element manages their layout and suppresion. |
| 305 Owns the selection. | |
|
1315
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
306 Maybe includes selecting things that don't even have adjusters. |
|
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
307 Maybe manages the layout of other labels and text too, to avoid overlaps. |
|
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
308 --> |
|
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
309 <dom-module id="light9-timeline-adjusters"> |
| 1314 | 310 <template> |
| 311 <style> | |
|
1315
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
312 :host { |
|
1317
4c6d88aa9e26
enough element and rdf support to drag one adjuster and see its value change
Drew Perttula <drewp@bigasterisk.com>
parents:
1315
diff
changeset
|
313 } |
| 1314 | 314 </style> |
|
1315
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
315 |
|
1317
4c6d88aa9e26
enough element and rdf support to drag one adjuster and see its value change
Drew Perttula <drewp@bigasterisk.com>
parents:
1315
diff
changeset
|
316 <template is="dom-repeat" items="{{adjs}}"> |
|
4c6d88aa9e26
enough element and rdf support to drag one adjuster and see its value change
Drew Perttula <drewp@bigasterisk.com>
parents:
1315
diff
changeset
|
317 <light9-timeline-adjuster adj="{{item}}"></light9-timeline-adjuster> |
|
4c6d88aa9e26
enough element and rdf support to drag one adjuster and see its value change
Drew Perttula <drewp@bigasterisk.com>
parents:
1315
diff
changeset
|
318 </template> |
| 1314 | 319 </template> |
| 320 <script> | |
| 321 Polymer({ | |
|
1315
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
322 is: "light9-timeline-adjusters", |
| 1314 | 323 properties: { |
|
1317
4c6d88aa9e26
enough element and rdf support to drag one adjuster and see its value change
Drew Perttula <drewp@bigasterisk.com>
parents:
1315
diff
changeset
|
324 adjs: { type: Array } |
| 1314 | 325 } |
| 326 }); | |
| 327 </script> | |
| 328 </dom-module> | |
| 329 | |
| 330 <!-- Yellow dotted handle that you can adjust to edit something. | |
| 331 Knows an attribute to edit and the true screen location, even if | |
|
1315
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
332 parent <light9-timeline-adjusters> has offset us a bit to avoid a |
| 1314 | 333 text overlap. |
| 334 Draws affordance arrows and a connector line if we're far | |
| 335 away from the point that we edit. | |
| 336 May grow to a bigger editor when you click or drag. | |
| 337 --> | |
|
1315
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
338 <dom-module id="light9-timeline-adjuster"> |
| 1314 | 339 <template> |
|
1315
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
340 <style> |
|
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
341 table { |
|
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
342 position: absolute; |
|
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
343 z-index: 2; |
|
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
344 border-collapse: collapse; |
|
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
345 } |
|
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
346 td { |
|
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
347 text-align: center; |
|
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
348 font-size: 20px; |
|
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
349 } |
|
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
350 span { |
|
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
351 font-size: 16px; |
|
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
352 background: rgba(255, 255, 0, 0.5); |
|
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
353 border: 3px yellow dotted; |
|
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
354 border-radius: 8px; |
|
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
355 padding: 5px; |
|
1317
4c6d88aa9e26
enough element and rdf support to drag one adjuster and see its value change
Drew Perttula <drewp@bigasterisk.com>
parents:
1315
diff
changeset
|
356 |
|
4c6d88aa9e26
enough element and rdf support to drag one adjuster and see its value change
Drew Perttula <drewp@bigasterisk.com>
parents:
1315
diff
changeset
|
357 cursor: ew-resize; |
|
4c6d88aa9e26
enough element and rdf support to drag one adjuster and see its value change
Drew Perttula <drewp@bigasterisk.com>
parents:
1315
diff
changeset
|
358 -webkit-user-select: none; |
|
1315
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
359 } |
|
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
360 </style> |
|
1319
a6259ab66885
another pass at adjusters making rdf patches.
Drew Perttula <drewp@bigasterisk.com>
parents:
1317
diff
changeset
|
361 <table id="top" style$="left: [[centerStyle.x]]px; top: [[centerStyle.y]]px"> |
|
1315
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
362 <tr><td></td><td>↑</td><td></td></tr> |
|
1319
a6259ab66885
another pass at adjusters making rdf patches.
Drew Perttula <drewp@bigasterisk.com>
parents:
1317
diff
changeset
|
363 <tr><td>←</td><td><span id="label">[[displayValue]]</span></td><td>→</td></tr> |
|
1315
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
364 <tr><td></td><td>↓</td><td></td></tr> |
|
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
365 </table> |
|
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
366 |
| 1314 | 367 </template> |
| 368 </dom-module> | |
| 369 | |
| 370 <!-- sometimes we draw attrs within the shape of a note. --> | |
| 371 <dom-module id="light9-timeline-note-inline-attrs"> | |
| 372 <template> | |
| 373 | |
| 374 </template> | |
| 375 <script> | |
| 376 Polymer({ | |
| 377 is: "light9-timeline-note-inline-attrs", | |
| 378 properties: { | |
| 379 } | |
| 380 }); | |
| 381 </script> | |
| 382 </dom-module> | |
|
1317
4c6d88aa9e26
enough element and rdf support to drag one adjuster and see its value change
Drew Perttula <drewp@bigasterisk.com>
parents:
1315
diff
changeset
|
383 |
|
4c6d88aa9e26
enough element and rdf support to drag one adjuster and see its value change
Drew Perttula <drewp@bigasterisk.com>
parents:
1315
diff
changeset
|
384 <script src="/lib/sylvester/sylvester.js"></script> |
|
1319
a6259ab66885
another pass at adjusters making rdf patches.
Drew Perttula <drewp@bigasterisk.com>
parents:
1317
diff
changeset
|
385 <script src="/lib/d3/build/d3.js"></script> |
|
1317
4c6d88aa9e26
enough element and rdf support to drag one adjuster and see its value change
Drew Perttula <drewp@bigasterisk.com>
parents:
1315
diff
changeset
|
386 <script src="/lib/N3.js/browser/n3-browser.js"></script> |
|
1323
a77bb5bf9d89
switch zoom system to ko.observable, which works much better
Drew Perttula <drewp@bigasterisk.com>
parents:
1322
diff
changeset
|
387 <script src="/lib/knockout/dist/knockout.js"></script> |
|
1317
4c6d88aa9e26
enough element and rdf support to drag one adjuster and see its value change
Drew Perttula <drewp@bigasterisk.com>
parents:
1315
diff
changeset
|
388 <script src="graph.js"></script> |
|
4c6d88aa9e26
enough element and rdf support to drag one adjuster and see its value change
Drew Perttula <drewp@bigasterisk.com>
parents:
1315
diff
changeset
|
389 <script src="timeline.js"></script> |