Add canvas.Frame component

FelixHenninger · FelixHenninger · commit 71cb89d39329 · 2017-07-22T19:16:25.000+02:00
diff --git a/packages/library/src/canvas.js b/packages/library/src/canvas.js
@@ -1,6 +1,9 @@
 // Canvas-based displays for lab.js
 import { Component } from './core'
-import { Sequence as BaseSequence } from './flow'
+import { Sequence as BaseSequence, Loop, Parallel,
+  prepareNested } from './flow'
+import { Frame as BaseFrame } from './html'
+import { reduce } from './util/tree'
 
 // Global canvas functions used in all of the following components
 // (multiple inheritance would come in handy here, but alas...)
@@ -164,3 +167,84 @@ Sequence.metadata = {
   module: ['canvas'],
   nestedComponents: ['content'],
 }
+
+export class Frame extends BaseFrame {
+  constructor(options={}) {
+    super(addCanvasDefaults({
+      context: '<canvas></canvas>',
+      ...options,
+    }))
+
+    // Push canvas to nested components
+    if (!this.options.handMeDowns.includes('canvas')) {
+      this.options.handMeDowns.push('canvas')
+    }
+  }
+
+  async onPrepare() {
+    // Check that all nested components
+    // are either flow components or
+    // that they use the canvas
+    const isFlowOrCanvasBased = (acc, c) =>
+      acc && (
+        c === this ||
+        c instanceof Screen ||
+        c instanceof Sequence ||
+        c instanceof BaseSequence ||
+        c instanceof Loop ||
+        c instanceof Parallel
+      )
+
+    const canvasBasedSubtree = reduce(this, isFlowOrCanvasBased, true)
+    if (!canvasBasedSubtree) {
+      throw 'CanvasFrame may only contain flow or canvas-based components'
+    }
+
+    // TODO: This is largely lifted (with some adaptations)
+    // from the html.Frame implementation. It would be great
+    // to reduce duplication slightly. (the differences
+    // are the allocation of the el option, and the
+    // extraction of the canvas from the parsed context)
+
+    // Parse context HTML
+    const parser = new DOMParser()
+    this.internals.parsedContext = parser.parseFromString(
+      this.options.context, 'text/html',
+    )
+
+    // Extract canvas
+    this.options.canvas = this.internals
+      .parsedContext.querySelector('canvas')
+
+    if (!this.options.canvas) {
+      throw 'No canvas found in context'
+    }
+
+    // Set nested component el to the parent
+    // element of the canvas, or the current el
+    // (if the canvas is at the uppermost level
+    // in the context HTML structure, and
+    // therefore its parent in the virtual DOM
+    // is a <body> element)
+    this.options.content.options.el =
+      this.options.canvas.parentElement === null ||
+      this.options.canvas.parentElement.tagName === 'BODY'
+        ? this.options.el
+        : this.options.canvas.parentElement
+
+    // Couple the run cycle of the frame to its content
+    this.internals.contentEndHandler = () => this.end()
+    this.options.content.on(
+      'after:end',
+      this.internals.contentEndHandler,
+    )
+
+    // Prepare content
+    await prepareNested([this.options.content], this)
+  }
+}
+
+Frame.metadata = {
+  module: ['canvas'],
+  nestedComponents: ['content'],
+}
diff --git a/packages/library/src/html.js b/packages/library/src/html.js
@@ -191,7 +191,8 @@ export class Frame extends Component {
       this.options.context, 'text/html',
     )
 
-    // Setup nested component to use the context
+    // Setup nested component to operate within
+    // the element addressed by the selector
     this.options.content.options.el = this.internals
       .parsedContext.querySelector(this.options.contextSelector)
 
diff --git a/packages/library/src/index.js b/packages/library/src/index.js
@@ -1,6 +1,7 @@
 // Components
 import { Component, Dummy } from './core'
-import { Screen as CanvasScreen, Sequence as CanvasSequence } from './canvas'
+import { Screen as CanvasScreen, Sequence as CanvasSequence,
+         Frame as CanvasFrame } from './canvas'
 import { Screen, Form, Frame } from './html'
 import { Sequence, Parallel, Loop } from './flow'
 
@@ -27,6 +28,7 @@ export const core = {
 }
 
 export const canvas = {
+  Frame: CanvasFrame,
   Screen: CanvasScreen,
   Sequence: CanvasSequence,
 }
diff --git a/packages/library/test/canvas.js b/packages/library/test/canvas.js
@@ -257,5 +257,92 @@ describe('Canvas-based components', () => {
         })
     })
   })
+
+  describe('Frame', () => {
+
+    let f, s, a, b
+    beforeEach(() => {
+      a = new lab.canvas.Screen()
+      b = new lab.canvas.Screen()
+      s = new lab.flow.Sequence({
+        content: [a, b],
+      })
+      f = new lab.canvas.Frame({
+        content: s,
+        el: document.createElement('div'),
+      })
+    })
+
+    it('provides canvas to nested components', () =>
+      f.prepare().then(() => {
+        assert.deepEqual(
+          f.options.canvas,
+          a.options.canvas,
+        )
+      })
+    )
+
+    it('throws error if nested components are incompatible', () => {
+      s.options.content.push(new lab.html.Screen())
+
+      return f.prepare().then(() => {
+          assert.ok(false, 'Component should throw error during preparation')
+        }).catch(err => {
+          assert.equal(
+            err,
+            'CanvasFrame may only contain flow or canvas-based components',
+          )
+        })
+    })
+
+    it('throws error if the context does not contain a canvas element', () => {
+      f.options.context = '<div>Nope</div>'
+
+      return f.prepare().then(() => {
+          assert.ok(false, 'Component should throw error during preparation')
+        }).catch(err => {
+          assert.equal(
+            err,
+            'No canvas found in context',
+          )
+        })
+    })
+
+    it('hands down the canvas parent element', () => {
+      f.options.context = '<div id="canvas-parent"><canvas></div>'
+
+      return f.run().then(() =>
+        assert.equal(
+          f.options.el.querySelector('div#canvas-parent'),
+          a.options.el,
+        )
+      )
+    })
+
+    it('hands down working el if canvas is at top level in context', () => {
+      // ... as above, but without the wrapper
+      f.options.context = '<canvas>'
+
+      return f.run().then(() =>
+        assert.equal(
+          f.options.el,
+          a.options.el,
+        )
+      )
+    })
+
+    it('ends with content', () =>
+      // This is tested in more depth
+      // in the HTML.Frame test suite
+      f.run().then(
+        () => s.end()
+      ).then(() => {
+        assert.equal(
+          f.status,
+          3 // done
+        )
+      })
+    )
+  })
 })
 })

Original file line number	Diff line number	Diff line change
`@@ -191,7 +191,8 @@ export class Frame extends Component {`
`191`	`191`	`this.options.context, 'text/html',`
`192`	`192`	`)`
`193`	`193`
`194`		`- // Setup nested component to use the context`
	`194`	`+ // Setup nested component to operate within`
	`195`	`+ // the element addressed by the selector`
`195`	`196`	`this.options.content.options.el = this.internals`
`196`	`197`	`.parsedContext.querySelector(this.options.contextSelector)`
`197`	`198`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,7 @@`
`1`	`1`	`// Components`
`2`	`2`	`import { Component, Dummy } from './core'`
`3`		`-import { Screen as CanvasScreen, Sequence as CanvasSequence } from './canvas'`
	`3`	`+import { Screen as CanvasScreen, Sequence as CanvasSequence,`
	`4`	`+ Frame as CanvasFrame } from './canvas'`
`4`	`5`	`import { Screen, Form, Frame } from './html'`
`5`	`6`	`import { Sequence, Parallel, Loop } from './flow'`
`6`	`7`
`@@ -27,6 +28,7 @@ export const core = {`
`27`	`28`	`}`
`28`	`29`
`29`	`30`	`export const canvas = {`
	`31`	`+ Frame: CanvasFrame,`
`30`	`32`	`Screen: CanvasScreen,`
`31`	`33`	`Sequence: CanvasSequence,`
`32`	`34`	`}`