- Jump To … +
  ./demo/canvas-001.js ./demo/canvas-002.js ./demo/canvas-003.js ./demo/canvas-004.js ./demo/canvas-005.js ./demo/canvas-006.js ./demo/canvas-007.js ./demo/canvas-008.js ./demo/canvas-009.js ./demo/canvas-010.js ./demo/canvas-011.js ./demo/canvas-012.js ./demo/canvas-013.js ./demo/canvas-014.js ./demo/canvas-015.js ./demo/canvas-015a.js ./demo/canvas-016.js ./demo/canvas-017.js ./demo/canvas-018.js ./demo/canvas-019.js ./demo/canvas-019a.js ./demo/canvas-020.js ./demo/canvas-021.js ./demo/canvas-022.js ./demo/canvas-023.js ./demo/canvas-024.js ./demo/canvas-025.js ./demo/canvas-026.js ./demo/canvas-027.js ./demo/canvas-028.js ./demo/canvas-029.js ./demo/canvas-030.js ./demo/canvas-031.js ./demo/canvas-032.js ./demo/canvas-033.js ./demo/canvas-034.js ./demo/canvas-035.js ./demo/canvas-036.js ./demo/canvas-037.js ./demo/canvas-038.js ./demo/canvas-039.js ./demo/canvas-040.js ./demo/canvas-041.js ./demo/canvas-042.js ./demo/canvas-043.js ./demo/canvas-044.js ./demo/canvas-045.js ./demo/canvas-046.js ./demo/canvas-047.js ./demo/canvas-048.js ./demo/canvas-049.js ./demo/canvas-050.js ./demo/canvas-051.js ./demo/canvas-052.js ./demo/canvas-053.js ./demo/canvas-054.js ./demo/canvas-055.js ./demo/canvas-056.js ./demo/canvas-058.js ./demo/canvas-059.js ./demo/canvas-060.js ./demo/canvas-061.js ./demo/canvas-062.js ./demo/canvas-063.js ./demo/canvas-064.js ./demo/core-001.js ./demo/delaunator-001.js ./demo/delaunator-002.js ./demo/dom-001.js ./demo/dom-002.js ./demo/dom-003.js ./demo/dom-004.js ./demo/dom-005.js ./demo/dom-006.js ./demo/dom-007.js ./demo/dom-008.js ./demo/dom-009.js ./demo/dom-010.js ./demo/dom-011.js ./demo/dom-012.js ./demo/dom-013.js ./demo/dom-015.js ./demo/dom-016.js ./demo/dom-017.js ./demo/dom-018.js ./demo/filters-001.js ./demo/filters-002.js ./demo/filters-002a.js ./demo/filters-003.js ./demo/filters-004.js ./demo/filters-005.js ./demo/filters-006.js ./demo/filters-007.js ./demo/filters-008.js ./demo/filters-009.js ./demo/filters-010.js ./demo/filters-011.js ./demo/filters-012.js ./demo/filters-013.js ./demo/filters-014.js ./demo/filters-015.js ./demo/filters-016.js ./demo/filters-017.js ./demo/filters-018.js ./demo/filters-019.js ./demo/filters-020.js ./demo/filters-021.js ./demo/filters-022.js ./demo/filters-023.js ./demo/filters-024.js ./demo/filters-025.js ./demo/filters-026.js ./demo/filters-027.js ./demo/filters-028.js ./demo/filters-101.js ./demo/filters-102.js ./demo/filters-103.js ./demo/filters-104.js ./demo/filters-105.js ./demo/filters-501.js ./demo/filters-502.js ./demo/filters-503.js ./demo/filters-504.js ./demo/filters-505.js ./demo/mediapipe-001.js ./demo/mediapipe-002.js ./demo/mediapipe-003.js ./demo/modules-001.js ./demo/modules-002.js ./demo/modules-003.js ./demo/modules-004.js ./demo/modules-005.js ./demo/modules-006.js ./demo/packets-001.js ./demo/packets-002.js ./demo/particles-001.js ./demo/particles-002.js ./demo/particles-003.js ./demo/particles-004.js ./demo/particles-005.js ./demo/particles-006.js ./demo/particles-007.js ./demo/particles-008.js ./demo/particles-009.js ./demo/particles-010.js ./demo/particles-011.js ./demo/particles-012.js ./demo/particles-013.js ./demo/particles-014.js ./demo/particles-015.js ./demo/particles-016.js ./demo/rapier-001.js ./demo/snippets-001.js ./demo/snippets-002.js ./demo/snippets-003.js ./demo/snippets-004.js ./demo/snippets-005.js ./demo/snippets-006.js ./demo/tensorflow-001.js ./demo/tensorflow-002.js ./demo/utilities.js

- §

  # Demo Packets 001

  Save and load Scrawl-canvas entity using text packets

- §

  Run code

      import * as scrawl from '../source/scrawl.js';

      import { reportSpeed } from './utilities.js';

- §

  #### Scene setup

      const canvas = scrawl.library.canvas.mycanvas;

- §

  Event listeners

      scrawl.addListener('move', () => canvas.cascadeEventAction('move'), canvas.domElement);
      scrawl.addListener('up', () => canvas.cascadeEventAction('up'), canvas.domElement);

- §

  Testing Block entity

      const box = scrawl.makeBlock({

          name: 'my-box',

          startX: 10,
          startY: 10,

          width: 100,
          height: 50,

          fillStyle: 'red',

          onEnter: function () {

- §

  @ts-expect-error

              this.set({
                  fillStyle: 'pink',
              });
          },

          onLeave: function () {

- §

  @ts-expect-error

              this.set({
                  fillStyle: 'red',
              });
          },

- §

  @ts-expect-error

          onUp: function () { this.clickAnchor() },

          anchor: {
              name: 'wikipedia-box-link',
              href: 'https://en.wikipedia.org/wiki/Box',
              description: 'Link to the Wikipedia article on boxes (opens in new tab)',

              clickAction: function () { return `console.log('box clicked')` },
          },
      });

- §

      Test 1 - no argument supplied

      const boxPacket1 = box.saveAsPacket();

- §

      Test 2 - argument === true

      const boxPacket2 = box.saveAsPacket(true);

- §

      Test 3 - argument.includeDefaults === true

      const boxPacket3 = box.saveAsPacket({
          includeDefaults: true,
      });

- §

      Test 4 - argument.includeDefaults === Array

      const boxPacket4 = box.saveAsPacket({
          includeDefaults: ['handle', 'miterLimit', 'onUp', 'useMimicScale', 'anchor'],
      });

      console.log('Save test 1 result: ', boxPacket1);
      console.log('Save test 2 result: ', boxPacket2);
      console.log('Save test 3 result: ', boxPacket3);
      console.log('Save test 4 result: ', boxPacket4);

- §

  Save tests - expected results

      TEST 1
      [
          "my-box",
          "Block",
          "entity",
          {
              "name":"my-box",
              "dimensions":[100,50],
              "start":[10,10],
              "delta":{},
              "onEnter":"~~~\n\t\tthis.set({\n\t\t\tfillStyle: 'pink',\n\t\t});\n\t",
              "onLeave":"~~~\n\t\tthis.set({\n\t\t\tfillStyle: 'red',\n\t\t});\n\t",
              "onUp":"~~~ this.clickAnchor() ",
              "anchor":{
                  "name":"wikipedia-box-link",
                  "description":"Link to the Wikipedia article on boxes (opens in new tab)",
                  "href":"https://en.wikipedia.org/wiki/Box",
                  "clickAction":"~~~ return `console.log('box clicked')`"
              },
              "group":"mycanvas_base",
              "fillStyle":"red"
          }
      ]

      TEST 2, TEST 3
      [
          "my-box",
          "Block",
          "entity",
          {
              "name":"my-box",
              "dimensions":[100,50],
              "start":[10,10],
              "handle":[0,0],
              "offset":[0,0],
              "delta":{},
              "lockTo":["start","start"],
              "visibility":true,
              "order":0,
              "addPivotHandle":false,
              "addPivotOffset":true,
              "addPivotRotation":false,
              "pathPosition":0,
              "addPathHandle":false,
              "addPathOffset":true,
              "addPathRotation":false,
              "useMimicDimensions":false,
              "useMimicScale":false,
              "useMimicStart":false,
              "useMimicHandle":false,
              "useMimicOffset":false,
              "useMimicRotation":false,
              "useMimicFlip":false,
              "addOwnDimensionsToMimic":false,
              "addOwnScaleToMimic":false,
              "addOwnStartToMimic":false,
              "addOwnHandleToMimic":false,
              "addOwnOffsetToMimic":false,
              "addOwnRotationToMimic":false,
              "scale":1,
              "roll":0,
              "collides":false,
              "sensorSpacing":50,
              "noUserInteraction":false,
              "noDeltaUpdates":false,
              "noPositionDependencies":false,
              "noCanvasEngineUpdates":false,
              "noFilters":false,
              "noPathUpdates":false,
              "method":"fill",
              "winding":"nonzero",
              "flipReverse":false,
              "flipUpend":false,
              "scaleOutline":true,
              "lockFillStyleToEntity":false,
              "lockStrokeStyleToEntity":false,
              "isStencil":false,
              "filterAlpha":1,
              "filterComposite":"source-over",
              "onEnter":"~~~\n\t\tthis.set({\n\t\t\tfillStyle: 'pink',\n\t\t});\n\t",
              "onLeave":"~~~\n\t\tthis.set({\n\t\t\tfillStyle: 'red',\n\t\t});\n\t",
              "onDown":"~~~",
              "onUp":"~~~",
              "anchor":{
                  "name":"wikipedia-box-link",
                  "description":
                  "Link to the Wikipedia article on boxes (opens in new tab)",
                  "download":"",
                  "href":"https://en.wikipedia.org/wiki/Box",
                  "hreflang":"",
                  "ping":"",
                  "referrerpolicy":"",
                  "rel":"noreferrer",
                  "target":"_blank",
                  "anchorType":"",
                  "clickAction":"~~~ return `console.log('box clicked')`"
              },
              "group":"mycanvas_base",
              "fillStyle":"red",
              "strokeStyle":"rgb(0 0 0 / 1)",
              "globalAlpha":1,
              "globalCompositeOperation":"source-over",
              "lineWidth":1,
              "lineCap":"butt",
              "lineJoin":"miter",
              "lineDash":[],
              "lineDashOffset":0,
              "miterLimit":10,
              "shadowOffsetX":0,
              "shadowOffsetY":0,
              "shadowBlur":0,
              "shadowColor":"rgb(0 0 0 / 0)",
              "font":"12px sans-serif",
              "textAlign":"start",
              "textBaseline":"alphabetic"
          }
      ]

      TEST 4
      [
          "my-box",
          "Block",
          "entity",
          {
              "name":"my-box",
              "dimensions":[100,50],
              "start":[10,10],
              "handle":[0,0],
              "delta":{},
              "useMimicScale":false,
              "onEnter":"~~~\n\t\tthis.set({\n\t\t\tfillStyle: 'pink',\n\t\t});\n\t",
              "onLeave":"~~~\n\t\tthis.set({\n\t\t\tfillStyle: 'red',\n\t\t});\n\t",
              "onUp":"~~~",
              "anchor":{
                  "name":"wikipedia-box-link",
                  "description":"Link to the Wikipedia article on boxes (opens in new tab)",
                  "href":"https://en.wikipedia.org/wiki/Box",
                  "clickAction":"~~~ return `console.log('box clicked')`"
              },
              "group":"mycanvas_base",
              "fillStyle":"red",
              "miterLimit":10
          }
      ]

- §

  Import tests - note that importPacket() is an asynchronous function that returns a promise

      box.kill();
      console.log('Import test setup - check to see if entity has been deleted', Object.keys(scrawl.library.entity));

- §

  Import test 1 - expect the import to fail due to a bad packet (malformed JSON string)

      canvas.importPacket(boxPacket1.substring(0, 50))
      .then(res => console.log('Import test 1 success -', res))
      .catch(err => console.log('Import test 1 error -', err));

- §

  Import test 2 - expect the import to succeed

      canvas.importPacket(boxPacket1)
      .then(res => console.log('Import test 2 success -', res))
      .catch(err => console.log('Import test 2 error -', err));

      setTimeout(() => {

- §

  Import test 3 - expect the import to fail due to incorrect url (missing .txt)

          canvas.importPacket('./packets/packets-003-block')
          .then(res => console.log('Import test 3 success -', res))
          .catch(err => console.log('Import test 3 error -', err));

- §

  Import test 4 - expect the import to succeed

          canvas.importPacket('./packets/packets-003-block.txt')
          .then(res => console.log('Import test 4 success -', res))
          .catch(err => console.log('Import test 4 error -', err));

          setTimeout(() => {

- §

  Import test 5 - expect the import to succeed

              canvas.importPacket('./packets/packets-003-block-updated.txt')
              .then(res => console.log('Import test 5 success -', res))
              .catch(err => console.log('Import test 5 error -', err));
          }, 5000);
      }, 5000);

- §

  Import tests - expected results (result order may vary due to asynchronous fetch/promise resolve)

      SETUP
      Import test setup - check to see if entity has been deleted |> []

      TEST 1
      Import test 1 error - Error: Failed to process packet due to JSON parsing error - Unexpected end of JSON input

      TEST 2
      Import test 2 success - |> Block

      TEST 3
      Import test 3 error - Error: Packet import from server failed - 404: Not Found - http://localhost:8080/demo/packets/packets-003-block

      TEST 4
      Import test 4 success - |> Block

      TEST 5
      Import test 5 success - |> Block

      const report = reportSpeed('#reportmessage');

- §

  #### Scene animation

  Create the Display cycle animation

      scrawl.makeRender({

          name: 'demo-animation',
          target: canvas,
          afterShow: report,
      });

      console.log(scrawl.library);