scrawl-canvas

<!DOCTYPE html> <html> <head> <title>Demo Modules 005</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"> <link rel="stylesheet" media="all" href="../../docco.css" /> </head> <body> <div id="container"> <div id="background"></div> <ul id="jump_to"> <li> <a class="large" href="javascript:void(0);">Jump To …</a> <a class="small" href="javascript:void(0);">+</a> <div id="jump_wrapper"> <div id="jump_page_wrapper"> <div id="jump_page"> <a class="source" href="canvas-minimap.html"> ./demo/modules/canvas-minimap.js </a> <a class="source" href="canvas-scene-editor.html"> ./demo/modules/canvas-scene-editor.js </a> <a class="source" href="dom-entity-editor.html"> ./demo/modules/dom-entity-editor.js </a> <a class="source" href="entity-copy-paste.html"> ./demo/modules/entity-copy-paste.js </a> <a class="source" href="entity-manipulation-gui.html"> ./demo/modules/entity-manipulation-gui.js </a> <a class="source" href="entity-navigation.html"> ./demo/modules/entity-navigation.js </a> <a class="source" href="entity-ring-builder.html"> ./demo/modules/entity-ring-builder.js </a> <a class="source" href="london-crime-graphic.html"> ./demo/modules/london-crime-graphic.js </a> <a class="source" href="london-crime-lines.html"> ./demo/modules/london-crime-lines.js </a> <a class="source" href="london-crime-stacked-bars.html"> ./demo/modules/london-crime-stacked-bars.js </a> <a class="source" href="lottie-loader.html"> ./demo/modules/lottie-loader.js </a> <a class="source" href="simple-chart-frame-tests.html"> ./demo/modules/simple-chart-frame-tests.js </a> <a class="source" href="simple-chart-frame.html"> ./demo/modules/simple-chart-frame.js </a> <a class="source" href="simple-graph-lines.html"> ./demo/modules/simple-graph-lines.js </a> <a class="source" href="simple-graph-stacked-bars.html"> ./demo/modules/simple-graph-stacked-bars.js </a> <a class="source" href="wikipedia-views-spiral-chart.html"> ./demo/modules/wikipedia-views-spiral-chart.js </a> <a class="source" href="../snippets/animated-highlight-gradient-text-snippet.html"> ./demo/snippets/animated-highlight-gradient-text-snippet.js </a> <a class="source" href="../snippets/animated-hover-gradient-snippet.html"> ./demo/snippets/animated-hover-gradient-snippet.js </a> <a class="source" href="../snippets/animated-word-gradient-snippet.html"> ./demo/snippets/animated-word-gradient-snippet.js </a> <a class="source" href="../snippets/before-after-slider-infographic.html"> ./demo/snippets/before-after-slider-infographic.js </a> <a class="source" href="../snippets/bubbles-text-snippet.html"> ./demo/snippets/bubbles-text-snippet.js </a> <a class="source" href="../snippets/green-box-snippet.html"> ./demo/snippets/green-box-snippet.js </a> <a class="source" href="../snippets/jazzy-button-snippet.html"> ./demo/snippets/jazzy-button-snippet.js </a> <a class="source" href="../snippets/page-performance-snippet-test.html"> ./demo/snippets/page-performance-snippet-test.js </a> <a class="source" href="../snippets/page-performance-snippet.html"> ./demo/snippets/page-performance-snippet.js </a> <a class="source" href="../snippets/pan-image-snippet.html"> ./demo/snippets/pan-image-snippet.js </a> <a class="source" href="../snippets/placeholder-effect-snippet.html"> ./demo/snippets/placeholder-effect-snippet.js </a> <a class="source" href="../snippets/ripple-effect-snippet.html"> ./demo/snippets/ripple-effect-snippet.js </a> <a class="source" href="../snippets/risograph-text-gradient-snippet.html"> ./demo/snippets/risograph-text-gradient-snippet.js </a> <a class="source" href="../snippets/spotlight-text-snippet-test.html"> ./demo/snippets/spotlight-text-snippet-test.js </a> <a class="source" href="../snippets/spotlight-text-snippet.html"> ./demo/snippets/spotlight-text-snippet.js </a> <a class="source" href="../snippets/swirling-stripes-text-snippet.html"> ./demo/snippets/swirling-stripes-text-snippet.js </a> <a class="source" href="../snippets/text-snippet-helper.html"> ./demo/snippets/text-snippet-helper.js </a> <a class="source" href="../snippets/word-highlighter-snippet.html"> ./demo/snippets/word-highlighter-snippet.js </a> <a class="source" href="../snippets/worley-text-gradient-snippet.html"> ./demo/snippets/worley-text-gradient-snippet.js </a> </div> </div> </li> </ul> <ul class="sections"> <li id="section-1"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-1">§</a> </div> <h1 id="demo-modules-005">Demo Modules 005</h1> Accessible GUI-based simple canvas editor Related files: <ul> <li><a href="../modules-005.html">Accessible GUI-based simple canvas editor - main demo</a></li> </ul> <h4 id="usage">Usage</h4> This sub-module creates accessible forms which can be used to update attributes to a selected entity, or group of entitys. The forms update in real-time as the user selects entitys for editing. The sub-module’s output is required by the entity-navigation sub-module, to help build a fully accessible editing environment. Inputs to the <code>initializeDomEntityEditor</code> function <ul> <li><code>queryString</code> - CSS query string to locate the DOM element where the entity editor form will appear (required)</li> </ul> Output from the <code>initializeDomEntityEditor</code> function - is an object containing the following attributes: <ul> <li><code>dashboard</code> - an object containing functions - <code>refresh, update, queue</code> - which will be consumed by other sub-modules</li> <li><code>killDomEntityEditor</code> - kill function, to remove everything associated with the DOM entity editor from the SC library</li> </ul> </div> </li> <li id="section-2"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-2">§</a> </div> <h3 id="template-functions">Template functions</h3> This sort of functionality could also be managed by React/Vue/Svelte/etc components if the code is going to run in those environments </div> <div class="content"><div class='highlight'><pre>const getElementHelper = (tag, classSuffix, contents) => { const el = document.createElement(tag); el.classList.add(`sc-dee-${classSuffix}`); if (contents != null) { if (Array.isArray(contents)) contents.forEach(c => el.appendChild(c)); else el.appendChild(contents); } return el; }; const getContainer = (contents) => getElementHelper('div', 'container', contents); const getForm = (contents = []) => getElementHelper('form', 'form', contents); const addTitle = (title) => { const el = document.createElement('h3'); el.classList.add('sc-dee-title'); if (title != null) el.textContent = title; return el; }; const fieldHandles = {}; const getInputField = (entity, key, fieldData) => { const el = document.createElement('div'); el.classList.add('sc-dee-field-container'); const field = document.createElement('input'); field.id = key; field.setAttribute('type', fieldData.inputType); if ('Group' !== entity.type) field.setAttribute('value', entity.get(key)); field.classList.add('sc-dee-field-controller'); field.style.fontSize = 'inherit'; field.style.fontFamily = 'inherit'; if (fieldData.controlMin != null) field.setAttribute('min', fieldData.controlMin); if (fieldData.controlMax != null) field.setAttribute('max', fieldData.controlMax); if (fieldData.controlStep != null) field.setAttribute('step', fieldData.controlStep); if (fieldData.order.includes('00 ')) el.classList.add('sc-dee-field-color-0'); else if (fieldData.order.includes('01 ')) el.classList.add('sc-dee-field-color-1'); else if (fieldData.order.includes('02 ')) el.classList.add('sc-dee-field-color-2'); else if (fieldData.order.includes('03 ')) el.classList.add('sc-dee-field-color-3'); else if (fieldData.order.includes('04 ')) el.classList.add('sc-dee-field-color-4'); const label = document.createElement('label'); label.textContent = fieldData.label; label.setAttribute('for', key); el.appendChild(label); el.appendChild(field); fieldHandles[key] = field; return el; }; const getSelectField = (entity, key, fieldData) => { const isBoolean = ('boolean' === fieldData.glue[1]); const optionsList = []; const el = document.createElement('div'); el.classList.add('sc-dee-field-container'); const field = document.createElement('select'); field.id = key; for (const [k, v] of Object.entries(fieldData.selectOptions)) { optionsList.push(v); const opt = document.createElement('option'); opt.setAttribute('value', v); opt.textContent = k; field.appendChild(opt); } field.classList.add('sc-dee-field-controller'); field.style.fontSize = 'inherit'; field.style.fontFamily = 'inherit'; if ('Group' !== entity.type) { const entityVal = entity.get(key); if (isBoolean) { field.options.selectedIndex = entityVal ? 1 : 0; } else field.options.selectedIndex = optionsList.indexOf(entityVal); } else field.options.selectedIndex = 0; if (fieldData.order.includes('00 ')) el.classList.add('sc-dee-field-color-0'); else if (fieldData.order.includes('01 ')) el.classList.add('sc-dee-field-color-1'); else if (fieldData.order.includes('02 ')) el.classList.add('sc-dee-field-color-2'); else if (fieldData.order.includes('03 ')) el.classList.add('sc-dee-field-color-3'); else if (fieldData.order.includes('04 ')) el.classList.add('sc-dee-field-color-4'); const label = document.createElement('label'); label.textContent = fieldData.label; label.setAttribute('for', key); el.appendChild(label); el.appendChild(field); fieldHandles[key] = field; return el; }; const addFields = (entity) => { let fieldData; if ('Group' !== entity.type) { fieldData = { ...commonRequirements, ...entityRequirements[entity.type], }; } else { fieldData = { ...groupRequirements, }; } let fieldKeys = Object.keys(fieldData); fieldKeys = fieldKeys.sort((a, b) => { const A = fieldData[a], B = fieldData[b]; if (A.order === B.order) { return (A.label < B.label) ? -1 : 1; } return (A.order < B.order) ? -1 : 1; }); const elements = []; fieldKeys.forEach(key => { const data = fieldData[key]; if (data.selectOptions != null) elements.push(getSelectField(entity, key, data)); else if (data.inputType != null) elements.push(getInputField(entity, key, data)); }); return elements; };</pre></div></div> </li> <li id="section-3"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-3">§</a> </div> Definition objects - define the form inputs based on the entity type, or the inputs for group selections </div> <div class="content"><div class='highlight'><pre>const groupRequirements = { method: { order: '02 display', label: 'Stamp Method', selectOptions: { 'draw': 'draw', 'fill': 'fill', 'drawAndFill': 'drawAndFill', 'fillAndDraw': 'fillAndDraw', 'drawThenFill': 'drawThenFill', 'fillThenDraw': 'fillThenDraw', 'clear': 'clear', }, glue: ['method', 'raw'], }, flipUpend: { order: '01 position flip', label: 'Flip Upend', selectOptions: { false: '0', true: '1', }, glue: ['flipUpend', 'boolean'], }, flipReverse: { order: '01 position flip', label: 'Flip Reverse', selectOptions: { false: '0', true: '1', }, glue: ['flipReverse', 'boolean'], }, fillStyle: { order: '02 display style', label: 'Fill', inputType: 'color', glue: ['fillStyle', 'raw'], }, strokeStyle: { order: '02 display style', label: 'Stroke', inputType: 'color', glue: ['strokeStyle', 'raw'], }, lineWidth: { order: '03 display line', label: 'Line Width', inputType: 'number', controlMin: 0, controlStep: 0.5, glue: ['lineWidth', 'float'], }, lineCap: { order: '03 display line', label: 'Line Cap', selectOptions: { butt: 'butt', round: 'round', square: 'square', }, glue: ['lineCap', 'raw'], }, lineJoin: { order: '03 display line', label: 'Line Join', selectOptions: { miter: 'miter', round: 'round', join: 'bevel', }, glue: ['lineJoin', 'raw'], }, scaleOutline: { order: '03 display line', label: 'Scale Outline', selectOptions: { false: '0', true: '1', }, glue: ['scaleOutline', 'boolean'], }, shadowOffsetX: { order: '04 display shadow', label: 'Shadow Offset X (px)', inputType: 'number', controlStep: 0.5, glue: ['shadowOffsetX', 'float'], }, shadowOffsetY: { order: '04 display shadow', label: 'Shadow Offset Y (px)', inputType: 'number', controlStep: 0.5, glue: ['shadowOffsetY', 'float'], }, shadowBlur: { order: '04 display shadow', label: 'Shadow Blur', inputType: 'number', controlMin: 0, controlStep: 0.5, glue: ['shadowBlur', 'float'], }, shadowColor: { order: '04 display shadow', label: 'Shadow Color', inputType: 'color', glue: ['shadowColor', 'raw'], }, }; const commonRequirements = { ...groupRequirements, handleX: { order: '01 position handle', label: 'Handle X (%)', inputType: 'number', controlStep: 1, glue: ['handleX', '%'], }, handleY: { order: '01 position handle', label: 'Handle Y (%)', inputType: 'number', controlStep: 1, glue: ['handleY', '%'], }, startX: { order: '01 position start', label: 'Start X (px)', inputType: 'number', controlStep: 1, glue: ['startX', 'round'], }, startY: { order: '01 position start', label: 'Start Y (px)', inputType: 'number', controlStep: 1, glue: ['startY', 'round'], }, offsetX: { order: '01 position offset', label: 'Offset X (px)', inputType: 'number', controlStep: 1, glue: ['offsetX', 'round'], }, offsetY: { order: '01 position offset', label: 'Offset Y (px)', inputType: 'number', controlStep: 1, glue: ['offsetY', 'round'], }, roll: { order: '01 shape roll', label: 'Roll (deg)', inputType: 'number', controlMin: -360, controlMax: 360, controlStep: 0.2, glue: ['roll', 'float'], }, scale: { order: '01 shape scale', label: 'Scale', inputType: 'number', controlMin: 0, controlStep: 0.005, glue: ['scale', 'float'], }, }; const entityRequirements = { Block: { width: { order: '00 shape', label: 'Width (px)', inputType: 'number', controlMin: 0, controlStep: 1, glue: ['width', 'round'], }, height: { order: '00 shape', label: 'Height (px)', inputType: 'number', controlMin: 0, controlStep: 1, glue: ['height', 'round'], }, }, Wheel: { radius: { order: '00 shape', label: 'Radius (px)', inputType: 'number', controlMin: 0, controlStep: 1, glue: ['radius', 'round'], }, startAngle: { order: '00 shape', label: 'Start Angle (deg)', inputType: 'number', controlMin: -360, controlMax: 360, controlStep: 0.2, glue: ['startAngle', 'float'], }, endAngle: { order: '00 shape', label: 'End Angle (deg)', inputType: 'number', controlMin: -360, controlMax: 360, controlStep: 0.2, glue: ['endAngle', 'float'], }, includeCenter: { order: '00 shape', label: 'Include Center', selectOptions: { false: '0', true: '1', }, glue: ['includeCenter', 'boolean'], }, closed: { order: '00 shape', label: 'Closed', selectOptions: { false: '0', true: '1', }, glue: ['closed', 'boolean'], }, }, Phrase: { width: { order: '00 shape', label: 'Width (px)', inputType: 'number', controlMin: 0, controlStep: 1, glue: ['width', 'round'], }, text: { order: '00 content', label: 'Text', inputType: 'text', glue: ['text', 'raw'], }, lineHeight: { order: '00 shape', label: 'Line height', inputType: 'number', controlMin: 0, controlStep: 0.1, glue: ['lineHeight', 'float'], }, letterSpacing: { order: '00 shape', label: 'Letter spacing (px)', inputType: 'number', controlMin: 0, controlStep: 0.2, glue: ['letterSpacing', 'float'], }, justify: { order: '00 shape', label: 'Justify text', selectOptions: { left: 'left', center: 'center', right: 'right', full: 'full', }, glue: ['justify&#