- 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 DOM 003

  Dynamically create and clone Element artefacts; drag and drop elements (including SVG elements) around a Stack

- §

  Run code

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

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

- §

  #### Scene setup

  Create some variables for use elsewhere in the script

      const artefact = scrawl.library.artefact,
          stack = artefact.mystack;

- §

  Create a new group to which we can assign the artefacts we want to drag around the stack

      const hitGroup = scrawl.makeGroup({

          name: 'my-hit-group',
          host: stack.name,
      });

- §

  TODO: we need perspectiveZ (CSS perspective) to be picked up from CSS setting in html file. The code where this is handled is in mixin/dom.js lines 355 onwards. Currently is a known issue (low priority)

      stack.set({
          perspectiveZ: 1200
      });

- §

  Generate new (DOM) element artefacts and add them to the stack via our new group

      stack.addNewElement({

          name: 'basic-square',
          group: 'my-hit-group',
          tag: 'div',

          text: 'Default square <div>',

          css: {
              border: '1px solid black',
              padding: '1em',
              textAlign: 'center',
              cursor: 'grab',
          },

      }).clone({

          name: 'oval',

          startX: 150,
          startY: 50,
          width: 150,
          height: 'auto',

          classes: 'circle',
          text: 'Oval <div> with added class',

          css: {
              font: '12px monospace',
          },
      });

- §

  Clones will create literal clones of the element they are cloning. Thus cannot clone an element and attempt to change its tag value at the same time.

      stack.addNewElement({

          name: 'list',
          group: hitGroup.name,
          tag: 'ul',

          width: '25%',
          height: 80,
          startX: 400,
          startY: 120,
          handleX: 'center',
          handleY: 'center',
          roll: 30,

          classes: 'red-text',

          content: `<li>unordered list</li>
      <li>with several</li>
      <li>bullet points</li>`,

          css: {
              font: '12px fantasy',
              paddingInlineStart: '20px',
              paddingTop: '0.5em',
              margin: '0',
              border: '1px solid red',
              cursor: 'grab',
          },

      }).clone({

          name: 'list-no-border',

          startY: 250,
          scale: 1.25,
          pitch: 60,
          yaw: 80,

          css: {
              border: 0,
          },
      });

- §

  Generate more elements - these ones won’t be draggable: instead we will pivot them to the element artefacts generated above

      stack.addNewElement({

          name: 'pivot-1',
          tag: 'div',

          width: 12,
          height: 12,
          handleX: 'center',
          handleY: 'center',

          pivot: 'basic-square',
          lockTo: 'pivot',
          order: 1,

          css: {
              backgroundColor: 'blue',
          },

      }).clone({

          name: 'pivot-2',
          pivot: 'oval',

      }).clone({

          name: 'pivot-3',
          pivot: 'list',

      }).clone({

          name: 'pivot-4',
          pivot: 'list-no-border',
      });

- §

  Handle the pre-existing SVG elements that have been automatically imported into the stack

- §

  SVG elements, because their child elements are effectively instructions on how to draw them, do not play nicely with Scrawl-canvas’s inbuilt drag-and-drop functionality. We can get around this issue by creating elements to be used for DnD, then pivot the SVG elements to those elements.

      stack.addNewElement({

          name: 'weather-icon-dragger',
          tag: 'div',

          width: 40,
          height: 40,

          startX: 340,
          startY: 360,
          handleX: 'center',
          handleY: 'center',

          group: hitGroup.name,

          classes: 'circle',
          css: {
              cursor: 'grab',
              border: '5px solid gold',
              backgroundColor: 'darkgray',
          },

      }).clone({

          name: 'simple-svg-dragger',
          startX: 60,
          startY: 220,

      });

      artefact.weathericon.set({

          pivot: 'weather-icon-dragger',
          lockTo: 'pivot',
          order: 1,
      });

      artefact['simple-svg'].set({

          pivot: 'simple-svg-dragger',
          lockTo: 'pivot',
          order: 1,

          pitch: 30,
          yaw: 50,
      });

- §

  #### User interaction

  Create the drag-and-drop zone

      scrawl.makeDragZone({

          zone: stack,
          collisionGroup: hitGroup,
          endOn: ['up', 'leave'],
          preventTouchDefaultWhenDragging: true,
      });

- §

  #### Scene animation

  Function to display frames-per-second data, and other information relevant to the demo

      const report = reportSpeed('#reportmessage');

- §

  Create the Display cycle animation

      scrawl.makeRender({

          name: 'demo-animation',
          target: stack,
          afterShow: report,

- §

  The elements in the stack don’t know their positions, and thus their hit zones (for drag-and-drop), until after the first render. This one-time-run function is enough to get the elements to perform the necessary recalculations.

          afterCreated: () => stack.set({ width: stack.get('width')}),
      });

- §

  #### Development and testing

      console.log(scrawl.library);