scrawl-canvas

<!DOCTYPE html> <html> <head> <title>Demo Modules 001</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-001">Demo Modules 001</h1> Scrawl-canvas modularized code - London crime charts Related files: <ul> <li><a href="../modules-001.html">London crime charts - main module</a></li> <li><a href="./london-crime-graphic.html">London crime graphic module</a></li> <li><a href="./london-crime-lines.html">London crime lines module</a></li> <li><a href="./london-crime-stacked-bars.html">London crime stacked bar module</a></li> <li><a href="./simple-chart-frame.html">Simple chart frame module</a></li> <li><a href="./simple-chart-frame-tests.html">Simple chart frame tests module</a></li> <li><a href="./simple-graph-lines.html">Simple graph lines module</a></li> <li><a href="./simple-graph-stacked-bars.html">Simple graph stacked bars module</a></li> </ul> </div> <div class="content"><div class='highlight'><pre> import * as scrawl from '../../source/scrawl.js'; scrawl.importDomImage('.crime'); let background, title, subtitle, yLabelTop, yLabelBottom, xLabelLeft, xLabelRight, group, navigation;</pre></div></div> </li> <li id="section-2"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-2">§</a> </div> Magic numbers to define where the chart will go within the grid </div> <div class="content"><div class='highlight'><pre>const graphWidth = 90; const graphHeight = 80; const graphBottom = 95; const graphLeft = 10; const build = function (namespace, canvas, backgroundImage) {</pre></div></div> </li> <li id="section-3"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-3">§</a> </div> Accessibility </div> <div class="content"><div class='highlight'><pre> canvas.set({ includeInTabNavigation: true, }); navigation = addArrowNavigation(canvas);</pre></div></div> </li> <li id="section-4"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-4">§</a> </div> Build out the frame </div> <div class="content"><div class='highlight'><pre> group = scrawl.makeGroup({ name: `${namespace}-group`, host: canvas.base.name, order: 1, visibility: false, }); background = scrawl.makePicture({ name: `${namespace}-background`, group: group, order: 0, width: '100%', height: '100%', copyWidth: '100%', copyHeight: '100%', globalAlpha: 0.65, asset: backgroundImage, }); title = scrawl.makePhrase({ name: `${namespace}-title`, group: group, order: 1, text: 'No title', width: '100%', justify: 'center', startY: '3%', font: '1.5rem Roboto, Arial, sans-serif', fillStyle: 'black', }); subtitle = title.clone({ name: `${namespace}-subtitle`, text: 'No data selected', startY: '9%', size: '1.2rem', }); subtitle.addSectionClass('RED', { fill: 'darkred' }); yLabelTop = scrawl.makePhrase({ name: `${namespace}-y-top`, group: group, order: 1, text: '0', startX: '1%', startY: '12%', font: '0.9rem Roboto, Arial, sans-serif', fillStyle: 'darkred', }); yLabelBottom = yLabelTop.clone({ name: `${namespace}-y-bottom`, startY: '92%', }); xLabelLeft = yLabelTop.clone({ name: `${namespace}-x-left`, startX: '10%', startY: '96%', }); xLabelRight = xLabelLeft.clone({ name: `${namespace}-x-right`, startX: '89%', }); scrawl.makeLine({ name: `${namespace}-upperline`, group: group, order: 1, startX: 0, startY: `${graphBottom - graphHeight}%`, endX: '100%', endY: `${graphBottom - graphHeight}%`, strokeStyle: 'red', method: 'draw', lineWidth: 1, }).clone({ name: `${namespace}-lowerline`, startY: `${graphBottom}%`, endY: `${graphBottom}%`, }).clone({ name: `${namespace}-leftline`, startX: `${graphLeft}%`, endX: `${graphLeft}%`, startY: `${graphBottom - graphHeight}%`, endY: `${graphBottom}%`, }); show(); };</pre></div></div> </li> <li id="section-5"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-5">§</a> </div> Accessibility </div> <div class="content"><div class='highlight'><pre>const arrowActions = { up: () => {}, right: () => {}, down: () => {}, left: () => {}, }; const setArrowAction = (key, action) => { if (key != null && action != null) { arrowActions[key] = action; } }; const addArrowNavigation = (canvas) => { const entityNavigationKeysDown = (e) => { const { key } = e;</pre></div></div> </li> <li id="section-6"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-6">§</a> </div> Tab, Enter/Return, Esc </div> <div class="content"><div class='highlight'><pre> if ('Tab' === key || 'Escape' === key) { canvas.domElement.blur(); return; }</pre></div></div> </li> <li id="section-7"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-7">§</a> </div> Prevent various combikey events interfering with navigation functionality </div> <div class="content"><div class='highlight'><pre> if ('Shift' === key || 'Alt' === key || 'Ctrl' === key|| 'Meta' === key) return; else if ('ArrowLeft' === key) arrowActions.left(); else if ('ArrowUp' === key) arrowActions.up(); else if ('ArrowRight' === key) arrowActions.right(); else if ('ArrowDown' === key) arrowActions.down(); e.preventDefault(); } return scrawl.addNativeListener('keydown', entityNavigationKeysDown, canvas.domElement); };</pre></div></div> </li> <li id="section-8"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-8">§</a> </div> API </div> <div class="content"><div class='highlight'><pre>const kill = () => { if (group != null && navigation != null) { group.kill(true); navigation(); } } const hide = () => { if (group != null) group.set({ visibility: false, }); }; const show = () => { if (group != null) group.set({ visibility: true, }); }; const updateTextHelper = function (item, text) { if (item != null && text != null) item.set({ text }); }; const updateTitle = (text) => updateTextHelper(title, text); const updateSubtitle = (text) => updateTextHelper(subtitle, text); const updateYTop = (text) => updateTextHelper(yLabelTop, text); const updateYBottom = (text) => updateTextHelper(yLabelBottom, text); const updateXLeft = (text) => updateTextHelper(xLabelLeft, text); const updateXRight = (text) => updateTextHelper(xLabelRight, text); const updateBackground = function (asset) { if (background != null && asset != null) background.set({ asset }); }; export { graphWidth, graphHeight, graphBottom, graphLeft, build, kill, hide, show, updateTitle, updateSubtitle, updateYTop, updateYBottom, updateXLeft, updateXRight, updateBackground, setArrowAction, };</pre></div></div> </li> </ul> </div> </body> </html>