- Jump To … +
  ./demo/modules/canvas-minimap.js ./demo/modules/canvas-scene-editor.js ./demo/modules/demo-m006-c1.js ./demo/modules/demo-m006-c2.js ./demo/modules/demo-m006-c3.js ./demo/modules/demo-m006-c4.js ./demo/modules/demo-m006-utils.js ./demo/modules/dom-entity-editor.js ./demo/modules/entity-copy-paste.js ./demo/modules/entity-manipulation-gui.js ./demo/modules/entity-navigation.js ./demo/modules/entity-ring-builder.js ./demo/modules/london-crime-lines.js ./demo/modules/london-crime-stacked-bars.js ./demo/modules/lottie-loader.js ./demo/modules/simple-chart-frame.js ./demo/modules/simple-graph-lines.js ./demo/modules/simple-graph-stacked-bars.js ./demo/modules/wikipedia-views-spiral-chart.js ./demo/snippets/animated-highlight-gradient-text-snippet.js ./demo/snippets/animated-hover-gradient-snippet.js ./demo/snippets/animated-word-gradient-snippet.js ./demo/snippets/before-after-slider-infographic.js ./demo/snippets/bubbles-text-snippet.js ./demo/snippets/green-box-snippet.js ./demo/snippets/jazzy-button-snippet.js ./demo/snippets/page-performance-snippet-test.js ./demo/snippets/page-performance-snippet.js ./demo/snippets/pan-image-snippet.js ./demo/snippets/placeholder-effect-snippet.js ./demo/snippets/ripple-effect-snippet.js ./demo/snippets/risograph-text-gradient-snippet.js ./demo/snippets/spotlight-text-snippet-test.js ./demo/snippets/spotlight-text-snippet.js ./demo/snippets/swirling-stripes-text-snippet.js ./demo/snippets/text-snippet-helper.js ./demo/snippets/word-highlighter-snippet.js ./demo/snippets/worley-text-gradient-snippet.js

- §

  # Demo Modules 003

  Factory functions to create more complex, compound entitys

  Related files:

  - Compound entitys - main module

  #### The entity ring factory

  This factory takes a single items Javascript Object argument (to match the functionality of built-in Scrawl-canvas factories). Four of the attributes of this argument object are required, the others will fall back on default values. These attrributes are:

  - canvas (required) - Scrawl-canvas Canvas wrapper object - the canvas which will be hosting the compound entity we are about to create
  - namespace (required) - String - unique name value
  - entity (required) - Scrawl-canvas entity object - any valid entity that has already been created
  - scrawl (required) - Scrawl-canvas object
  - dimensions - Number - the square dimensions of the compound entity; default: 400
  - buildStartAngle - Number - the angle of the first entity we lay down; default: -45
  - buildEndAngle - Number - the angle of the last entity we lay down - note that this needs to be sufficient to cover at least half of the ring, which we can then copy and stamp to create the final output; default: 225
  - buildStepAngle - Number - the repeat value - higher values lead to fewer entitys making up the final ring; default: 15
  - buildOffset - Number - the entity’s offset from the center of the ring (as measured in px); default: 0
  - reflectOnly - Boolean - when the ring half is copied and pasted back into the final output, it can be set to reflect only, which will give us a bilateral rather than a radial symmetry; default: false

      export default function (items = {}) {

          const { canvas, namespace, entity, scrawl } = items;

          if (!(canvas && entity && namespace && scrawl)) return {};

          const name = item => `${namespace}-${item}`;

          const {
              dimensions = 400,
              buildStartAngle = -45,
              buildEndAngle = 225,
              buildStepAngle = 15,
              buildOffset = 0,
              reflectOnly = false,
          } = items;

          const cell = canvas.buildCell({
              name: name('cell'),
              dimensions: [dimensions, dimensions],
              shown: false,
              compileOrder: 0,
          });

          scrawl.makeGroup({
              name: name('clip-group'),
              host: name('cell'),
              order: 0,
          });

          scrawl.makeGroup({
              name: name('reflect-group'),
              host: name('cell'),
              order: 1,
          });

          scrawl.makeBlock({
              name: name('clipper'),
              group: name('clip-group'),
              start: ['left', 'center'],
              dimensions: ['100%', '50%'],
              method: 'clip'
          });

          const v = scrawl.requestVector(0, buildOffset);
          v.rotate(buildStartAngle);

          for (let i = buildStartAngle; i <= buildEndAngle; i += buildStepAngle) {

              entity.clone({
                  name: name(`ringitem-${i}`),
                  group: name('clip-group'),
                  roll: i,
                  offset: [v.x, v.y],
              });

              v.rotate(buildStepAngle);
          }

          scrawl.releaseVector(v);

          scrawl.makePicture({
              name: name('reflection'),
              group: name('reflect-group'),
              asset: name('cell'),

              start: ['center', '25%'],
              handle: ['center', 'center'],
              flipUpend: true,
              flipReverse: !reflectOnly,

              dimensions: ['100%', '50%'],
              copyDimensions: ['100%', '50%'],
              copyStartY: '50%',

              method: 'fill',
          });

          entity.set({
              visibility: false,
          });

          return {
              cell,
              kill: () => scrawl.library.purge(namespace),
          }
      }