diff --git a/light9/web/coffee_element.coffee b/light9/web/coffee_element.coffee
new file mode 100644
--- /dev/null
+++ b/light9/web/coffee_element.coffee
@@ -0,0 +1,15 @@
+# Polymer seems to need static getters for 'observers' and
+# 'listeners', not just static attributes, though I don't know how it
+# can even tell the difference.
+#
+# This workaround is to use names like '@getter_properties' in the
+# class then register with this function that fixes them.
+#
+# Also see http://coffeescript.org/#unsupported-get-set
+window.coffeeElementSetup = (cls) ->
+ for attr in ['properties', 'observers', 'listeners']
+ val = cls['getter_' + attr]
+ if val?
+ do (val) ->
+ Object.defineProperty(cls, attr, {get: ( -> val)})
+ customElements.define(cls.is, cls)
diff --git a/light9/web/edit-choice.coffee b/light9/web/edit-choice.coffee
--- a/light9/web/edit-choice.coffee
+++ b/light9/web/edit-choice.coffee
@@ -42,9 +42,9 @@ window.setupDrop = (senseElem, highlight
-class EditChoice extends Polymer.Element
+coffeeElementSetup(class EditChoice extends Polymer.Element
@is: "edit-choice",
- @properties:
+ @getter_properties:
graph: {type: Object, notify: true},
uri: {type: String, notify: true},
@@ -57,5 +57,4 @@ class EditChoice extends Polymer.Element
unlink: ->
@uri = null
-
-customElements.define(EditChoice.is, EditChoice)
\ No newline at end of file
+)
diff --git a/light9/web/edit-choice.html b/light9/web/edit-choice.html
--- a/light9/web/edit-choice.html
+++ b/light9/web/edit-choice.html
@@ -28,5 +28,6 @@
+
diff --git a/light9/web/light9-music.coffee b/light9/web/light9-music.coffee
--- a/light9/web/light9-music.coffee
+++ b/light9/web/light9-music.coffee
@@ -1,9 +1,9 @@
log = console.log
# port of light9/curvecalc/musicaccess.py
-Polymer
- is: "light9-music",
- properties:
+coffeeElementSetup(class Music extends Polymer.Element
+ @is: "light9-music",
+ @getter_properties:
status: { type: String, notify: true }
statusTitle: { type: String, notify: true }
turboSign: { type: String, notify: true }
@@ -16,15 +16,16 @@ Polymer
t: { type: Number, notify: true }
ready: ->
+ super.ready()
@turboUntil = 0
- @$.getTime.addEventListener('response', @onResponse.bind(@))
- @$.getTime.addEventListener 'error', (e) =>
- req = @$.getTime.lastRequest
- @status = "✘"
- @statusTitle = "GET "+req.url+ " -> " + req.status + " " + req.statusText
- setTimeout(@poll.bind(@), 2000)
@poll()
setInterval(@estimateTimeLoop.bind(@), 30)
+
+ onError: (e) ->
+ req = @$.getTime.lastRequest
+ @status = "✘"
+ @statusTitle = "GET "+req.url+ " -> " + req.status + " " + req.statusText
+ setTimeout(@poll.bind(@), 2000)
estimateTimeLoop: ->
if @playing
@@ -33,6 +34,9 @@ Polymer
@t = @remoteT
poll: ->
+ if not @$?.getTime?
+ setTimeout(@poll.bind(@), 200)
+ return
clearTimeout(@nextPoll) if @nextPoll
@$.getTime.generateRequest()
@status = "♫"
@@ -65,4 +69,5 @@ Polymer
@turboUntil = Date.now() + 1000
@poll()
-
+)
+
diff --git a/light9/web/light9-music.html b/light9/web/light9-music.html
--- a/light9/web/light9-music.html
+++ b/light9/web/light9-music.html
@@ -1,4 +1,4 @@
-
+
@@ -14,12 +14,13 @@
font-size: 12px;
}
-
+
[[status]][[turboSign]]
+
diff --git a/light9/web/timeline/adjusters.coffee b/light9/web/timeline/adjusters.coffee
--- a/light9/web/timeline/adjusters.coffee
+++ b/light9/web/timeline/adjusters.coffee
@@ -2,15 +2,14 @@ log = console.log
Drawing = window.Drawing
-class AdjustersCanvas extends Polymer.Element
+coffeeElementSetup(class AdjustersCanvas extends Polymer.mixinBehaviors([Polymer.IronResizableBehavior], Polymer.Element)
@is: 'light9-adjusters-canvas'
- @behaviors: [ Polymer.IronResizableBehavior ]
- @properties:
+ @getter_properties:
adjs: { type: Object, notify: true }, # adjId: Adjustable
- @observers: [
+ @getter_observers: [
'updateAllCoords(adjs)'
]
- @listeners:
+ @getter_listeners:
'iron-resize': 'resizeUpdate'
connectedCallback: ->
super.connectedCallback()
@@ -158,5 +157,4 @@ class AdjustersCanvas extends Polymer.El
# l/r arrows
# mouse arrow cursor upon hover, and accent the hovered adjuster
# connector
-
-customElements.define(AdjustersCanvas.is, AdjustersCanvas)
\ No newline at end of file
+)
\ No newline at end of file
diff --git a/light9/web/timeline/cursor_canvas.coffee b/light9/web/timeline/cursor_canvas.coffee
--- a/light9/web/timeline/cursor_canvas.coffee
+++ b/light9/web/timeline/cursor_canvas.coffee
@@ -1,11 +1,10 @@
-
-Polymer
- is: 'light9-cursor-canvas'
- behaviors: [ Polymer.IronResizableBehavior ]
- listeners: 'iron-resize': 'update'
- properties:
+coffeeElementSetup(class CursorCanvas extends Polymer.mixinBehaviors([Polymer.IronResizableBehavior], Polymer.Element)
+ @is: 'light9-cursor-canvas'
+ @getter_properties:
viewState: { type: Object, notify: true, observer: "onViewState" }
- ready: ->
+ @getter_listeners: 'iron-resize': 'update'
+ connectedCallback: ->
+ super.connectedCallback()
@mouseX = 0
@mouseY = 0
@cursorPath = null
@@ -67,4 +66,4 @@ Polymer
@ctx.beginPath()
Drawing.line(@ctx, @cursorPath.bot0, @cursorPath.bot1, '#ff0303', '3px')
@ctx.stroke()
-
\ No newline at end of file
+)
\ No newline at end of file
diff --git a/light9/web/timeline/inline-attrs.coffee b/light9/web/timeline/inline-attrs.coffee
--- a/light9/web/timeline/inline-attrs.coffee
+++ b/light9/web/timeline/inline-attrs.coffee
@@ -1,8 +1,8 @@
log = console.log
-class InlineAttrs extends Polymer.Element
+coffeeElementSetup(class InlineAttrs extends Polymer.Element
@is: "light9-timeline-note-inline-attrs"
- @properties:
+ @getter_properties:
graph: { type: Object, notify: true }
song: { type: String, notify: true }
uri: { type: String, notify: true } # the Note
@@ -11,7 +11,7 @@ class InlineAttrs extends Polymer.Elemen
colorScale: { type: String, notify: true }
noteLabel: { type: String, notify: true }
selection: { type: Object, notify: true }
- @observers: [
+ @getter_observers: [
'addHandler(graph, uri)'
'onColorScale(graph, uri, colorScale)'
]
@@ -72,4 +72,4 @@ class InlineAttrs extends Polymer.Elemen
onDel: ->
deleteNote(@graph, @song, @uri, @selection)
-customElements.define(InlineAttrs.is, InlineAttrs)
+)
diff --git a/light9/web/timeline/timeline-elements.html b/light9/web/timeline/timeline-elements.html
--- a/light9/web/timeline/timeline-elements.html
+++ b/light9/web/timeline/timeline-elements.html
@@ -267,6 +267,7 @@
+
diff --git a/light9/web/timeline/timeline.coffee b/light9/web/timeline/timeline.coffee
--- a/light9/web/timeline/timeline.coffee
+++ b/light9/web/timeline/timeline.coffee
@@ -181,10 +181,11 @@ class ViewState
@zoomSpec.t1(newT1)
@zoomSpec.t2(newT2)
, lastTime + 10)
+
-class TimelineEditor extends Polymer.mixinBehaviors([Polymer.IronResizableBehavior], Polymer.Element)
+coffeeElementSetup(class TimelineEditor extends Polymer.mixinBehaviors([Polymer.IronResizableBehavior], Polymer.Element)
@is: 'light9-timeline-editor'
- @properties:
+ @getter_properties:
viewState: { type: Object }
debug: {type: String}
graph: {type: Object, notify: true}
@@ -194,23 +195,23 @@ class TimelineEditor extends Polymer.mix
followPlayerSong: {type: Boolean, notify: true, value: true}
song: {type: String, notify: true}
show: {value: 'http://light9.bigasterisk.com/show/dance2017'}
- songTime: {type: Number, notify: true},#, observer: '_onSongTime'}
- songDuration: {type: Number, notify: true},#, observer: '_onSongDuration'}
+ songTime: {type: Number, notify: true}
+ songDuration: {type: Number, notify: true}
songPlaying: {type: Boolean, notify: true}
selection: {type: Object, notify: true}
- @observers: [
+ @getter_observers: [
'setSong(playerSong, followPlayerSong)',
'onGraph(graph)',
- ]
-
+ '_onSongDuration(songDuration, viewState)',
+ '_onSongTime(songTime, viewState)',
+ ]
connectedCallback: ->
super.connectedCallback()
ko.options.deferUpdates = true;
@dia = @$.dia
-
-
+
@selection = {hover: ko.observable(null), selected: ko.observable([])}
window.debug_zoomOrLayoutChangedCount = 0
@@ -373,36 +374,25 @@ class TimelineEditor extends Polymer.mix
getSuggestedTargetOffset: () => $V([0, 0])
getValueForPos: valForPos
}))
-
-customElements.define(TimelineEditor.is, TimelineEditor)
+)
+
# plan: in here, turn all the notes into simple js objects with all
# their timing data and whatever's needed for adjusters. From that, do
# the brick layout. update only changing adjusters.
-class TimeZoomed extends Polymer.mixinBehaviors([Polymer.IronResizableBehavior], Polymer.Element)
+coffeeElementSetup(class TimeZoomed extends Polymer.mixinBehaviors([Polymer.IronResizableBehavior], Polymer.Element)
@is: 'light9-timeline-time-zoomed'
- @behaviors: [ Polymer.IronResizableBehavior ]
- @properties:
+ @getter_properties:
graph: { type: Object, notify: true }
project: { type: Object }
selection: { type: Object, notify: true }
dia: { type: Object, notify: true }
song: { type: String, notify: true }
viewState: { type: Object, notify: true }
- @observers: [
+ @getter_observers: [
'onGraph(graph, setAdjuster, song, viewState, project)',
'onZoom(viewState)',
]
- update: ->
- @renderer.resize(@clientWidth, @clientHeight)
- @renderer.render(@stage)
-
- onZoom: ->
- updateZoomFlattened = ->
- log('updateZoomFlattened')
- @zoomFlattened = ko.toJS(@viewState.zoomSpec)
- ko.computed(updateZoomFlattened.bind(@))
-
constructor: ->
super()
@stage = new PIXI.Container()
@@ -419,8 +409,19 @@ class TimeZoomed extends Polymer.mixinBe
@$.rows.appendChild(@renderer.view);
+ update: ->
+ @renderer.resize(@clientWidth, @clientHeight)
+ @renderer.render(@stage)
+
+ onZoom: ->
+ updateZoomFlattened = ->
+ log('updateZoomFlattened')
+ @zoomFlattened = ko.toJS(@viewState.zoomSpec)
+ ko.computed(updateZoomFlattened.bind(@))
+
onGraph: ->
@graph.runHandler(@gatherNotes.bind(@), 'zoom notes')
+
gatherNotes: ->
U = (x) => @graph.Uri(x)
@@ -476,12 +477,12 @@ class TimeZoomed extends Polymer.mixinBe
desiredWidthT = @viewState.zoomInX.invert(desiredWidthX) - @viewState.zoomInX.invert(0)
desiredWidthT = Math.min(desiredWidthT, @zoom.duration() - dropTime)
@project.makeNewNote(effect, dropTime, desiredWidthT)
-
-customElements.define(TimeZoomed.is, TimeZoomed)
+)
+
-class TimeAxis extends Polymer.Element
+coffeeElementSetup(class TimeAxis extends Polymer.Element
@is: "light9-timeline-time-axis",
- @properties:
+ @getter_properties:
viewState: { type: Object, notify: true, observer: "onViewState" }
onViewState: ->
ko.computed =>
@@ -489,8 +490,8 @@ class TimeAxis extends Polymer.Element
pxPerTick = 50
axis = d3.axisTop(@viewState.zoomInX).ticks(@viewState.width() / pxPerTick)
d3.select(@$.axis).call(axis)
+)
-customElements.define(TimeAxis.is, TimeAxis)
class NoteRow
constructor: (@graph, @dia, @song, @zoomInX, @noteUris, @rowIndex, @selection) ->
@@ -501,7 +502,6 @@ class NoteRow
'onZoom(zoomInX)'
]
-
observedUpdate: (graph, song, rowIndex) ->
@update() # old behavior
#@graph.runHandler(@update.bind(@), "row notes #{@rowIndex}")
@@ -696,10 +696,10 @@ class Note
-class DiagramLayer extends Polymer.Element
+coffeeElementSetup(class DiagramLayer extends Polymer.Element
# note boxes.
@is: 'light9-timeline-diagram-layer'
- @properties: {
+ @getter_properties: {
selection: {type: Object, notify: true}
}
connectedCallback: ->
@@ -794,4 +794,4 @@ class DiagramLayer extends Polymer.Eleme
#elem.setAttribute('x', curvePts[0].e(1)+20)
#elem.setAttribute('y', curvePts[0].e(2)-10)
#elem.innerHTML = effectLabel;
-customElements.define(DiagramLayer.is, DiagramLayer)
\ No newline at end of file
+)
\ No newline at end of file