Merge pull request #98 from KaliedaRik/bump-version-to-v8.14.0

Bump version to v8.14.0

README.md

@@ -1,5 +1,5 @@
 # Welcome to the Scrawl-canvas Library
-Version: `8.13.2 - 15 July 2024` 
+Version: `8.14.0 - 1 September 2024` 
 
 Scrawl-canvas website: [scrawl-v8.rikweb.org.uk](https://scrawl-v8.rikweb.org.uk).
 + learning materials: [scrawl-v8.rikweb.org.uk/learn](https://scrawl-v8.rikweb.org.uk/learn).
@@ -58,7 +58,7 @@ There are three main ways to include Scrawl-canvas in your project:
 2. Unzip the file to a folder in your project. 
 3. Import the library into the script code where you will be using it.
 
-Alternatively, a zip package of the v8.13.2 files can be downloaded from this link: [scrawl.rikweb.org.uk/downloads/scrawl-canvas_8-13-2.zip](https://scrawl.rikweb.org.uk/downloads/scrawl-canvas_8-13-2.zip) - that package only includes the minified file.
+Alternatively, a zip package of the v8.14.0 files can be downloaded from this link: [scrawl.rikweb.org.uk/downloads/scrawl-canvas_8-14-0.zip](https://scrawl.rikweb.org.uk/downloads/scrawl-canvas_8-14-0.zip) - that package only includes the minified file.
 
 ```html
 <!-- Hello world -->
@@ -102,7 +102,7 @@ Alternatively, a zip package of the v8.13.2 files can be downloaded from this li
 This will pull the requested npm package directly into your web page:
 ```html
 <script type="module">
-    import * as scrawl from 'https://unpkg.com/scrawl-canvas@8.13.2';
+    import * as scrawl from 'https://unpkg.com/scrawl-canvas@8.14.0';
     [...]
 </script>
 ```

demo/canvas-007.html

@@ -68,6 +68,9 @@ <h2>Apply filters at the entity, group and cell level</h2>
         <option value="mapToGradient">mapToGradient</option>
         <option value="matrix">matrix</option>
         <option value="matrix5">matrix5</option>
+        <option value="modifyOk">modifyOk</option>
+        <option value="modulateOk">modulateOk</option>
+        <option value="negative">negative</option>
         <option value="newsprint">newsprint</option>
         <option value="notblue">notblue</option>
         <option value="notgreen">notgreen</option>
@@ -78,6 +81,7 @@ <h2>Apply filters at the entity, group and cell level</h2>
         <option value="randomNoise">randomNoise</option>
         <option value="red">red</option>
         <option value="reducePalette">reducePalette</option>
+        <option value="rotateHue">rotateHue</option>
         <option value="saturation">saturation</option>
         <option value="sepia">sepia</option>
         <option value="sharpen">sharpen</option>
@@ -87,8 +91,8 @@ <h2>Apply filters at the entity, group and cell level</h2>
         <option value="tint">tint</option>
         <option value="yellow">yellow</option>
         <option value="" disabled>--Compound filters--</option>
-        <option value="blend">blend (with image)</option>
-        <option value="compose">compose (with image)</option>
+        <option value="blend">blend (color)</option>
+        <option value="compose">compose (destination-in)</option>
         <option value="displace">displace (with noise asset)</option>
         <option value="dropShadow">Drop Shadow</option>
         <option value="redBorder">Red Borders</option>

demo/canvas-007.js

@@ -207,7 +207,7 @@ scrawl.makeFilter({
         {
             action: 'blend',
             lineMix: 'flower',
-            blend: 'color-burn',
+            blend: 'color',
         }
     ],
 });
@@ -308,6 +308,11 @@ scrawl.makeFilter({
 }).clone({
     name: name('sharpen'),
     method: 'sharpen',
+
+// __Negative__ filter
+}).clone({
+    name: name('negative'),
+    method: 'negative',
 });
 
 // __Emboss__ filter
@@ -389,13 +394,34 @@ scrawl.makeFilter({
     tileRadius: 24,
 });
 
+// __Modulate Ok__ filter
+scrawl.makeFilter({
+    name: name('modulateOk'),
+    method: 'modulateOk',
+    channelA: 0,
+});
+
+// __Modify Ok__ filter
+scrawl.makeFilter({
+    name: name('modifyOk'),
+    method: 'modifyOk',
+    channelA: -0.5,
+});
+
 // __Newsprint__ filter
 scrawl.makeFilter({
     name: name('newsprint'),
     method: 'newsprint',
     width: 2,
 });
 
+// __Rotate Hue__ filter
+scrawl.makeFilter({
+    name: name('rotateHue'),
+    method: 'rotateHue',
+    angle: 180,
+});
+
 // __Tint__ filter
 scrawl.makeFilter({
     name: name('tint'),
@@ -583,6 +609,7 @@ scrawl.makeFilter({
 scrawl.makeFilter({
     name: name('reducePalette'),
     method: 'reducePalette',
+    noiseType: 'ordered',
 });
 
 scrawl.makeGradient({

demo/canvas-009.html

@@ -43,7 +43,11 @@
   </div>
   <h1><a href="index.html">Scrawl-canvas v8</a> - Canvas test 009</h1>
   <h2>Pattern styles; Entity web link anchors; Dynamic accessibility</h2>
-  <h3>Move cursor over canvas, or use keyboard tab,<br />to see dynamic hover and accessibility functionality<br />Click (or press keyboard enter) on a highlighted entity<br />to open a new web page</h3>
+  <h3>
+    Move cursor over canvas, or use keyboard tab, to see dynamic hover and accessibility functionality
+    <br />&nbsp;<br />Keyboard navigate between blocks using the tab key. Click (or press keyboard enter) on an entity<br />to open a new web page
+    <br />&nbsp;<br />Right-click on an entity to reveal a normal &lt;a> anchor link element
+  </h3>
 
   <canvas 
     id="mycanvas" 
@@ -90,6 +94,18 @@ <h4>Test purpose</h4>
       <li>Check that the tracking functionality works as expected, both for mouse/touch interactions and for keyboard interactions</li>
     </ul>
 
+    <p>Handle a right-click <i>contextmenu</i> user interaction on a block</p>
+    <ul>
+      <li>MVP of a method for dealing with the right-click functionality that happens on normal &lt;a> link elements in a web page</li>
+      <li>Right-click on a block entity</li>
+      <li>A new &lt;a> link element should appear over the block, centred on the mouse pointer</li>
+      <li>Right-click on the new element - a link-related context menu should appear</li>
+      <li>The new element should disappear after 5 seconds. If the context menu is visible, it should remain visible and interactive; it should disappear after the user interacts with it, or clicks on the page surrounding it</li>
+      <li>Right-clicking on the canvas element outside of the block entitys should display the normal image-related context menu</li>
+      <li>Note that the new element has <i>position: fixed</i> styling - it will not move when the user scrolls through the web page</li>
+      <li>Note that this MVP solution does not listen for keyboard <i>context menu key</i> presses</li>
+    </ul>
+
     <p>Kill and resurrect</p>
     <ul>
       <li>Kill and resurrect a Block entity to make sure it removes itself entirely from the Scrawl-canvas system, and cleanly recreate itself from saved packet, and that full functionality - including analytics tracking - can be re-applied to it</li>

demo/canvas-009.js

@@ -200,7 +200,8 @@ scrawl.makeBlock({
         myTracker.send('event', 'Canvas Entity', 'hover end', `${this.name} ${this.type}`);
     },
 
-    // Used by the Scrawl-canvas click event, below. This hit report will only be generated from user interaction on the canvas element, thus will supply different numbers to the anchor's clickAction function above - a useful way to help calculate the volume of users bypassing the canvas and opening the Wikipedia page using the keyboard or assistive technology
+    // Used by the Scrawl-canvas `click` event, below.
+    // + This hit report will only be generated from user interaction on the canvas element, thus will supply different numbers to the anchor's clickAction function above - a useful way to help calculate the volume of users bypassing the canvas and opening the Wikipedia page using the keyboard or assistive technology
     onUp: function () {
 
         // Track the action in Google Analytics
@@ -212,6 +213,35 @@ scrawl.makeBlock({
         this.clickAnchor();
     },
 
+    // Used by the Scrawl-canvas `contextmenu` event, below.
+    // + When the user right-clicks on a block, we want them to see the context menu for a link element, not an image element
+    // + Sadly I don't know a good way to achieve this - creating a `contextmenu` Pointer event and dispatching it on the anchor's element associated with the block doesn't work for me
+    // + Instead, the following functionality clones the anchor's element, styles and positions it, then adds it to the web page where user can (again) right-click on it to display the context menu
+    // + We then destroy the cloned element after five seconds
+    // + (If anyone has a better solution for this functionality, please create a PR!)
+    onOtherInteraction: function (e) {
+
+        e.preventDefault();
+
+/** @ts-expect-error */
+        const el = this.anchor.domElement;
+        const clone = el.cloneNode(true);
+        const style = clone.style;
+
+        clone.id = `${el.id}_clone`;
+        style.position = 'fixed';
+        style.left = `${e.clientX}px`;
+        style.top = `${e.clientY}px`;
+        style.transform = 'translate(-50%, -50%)';
+        style.backgroundColor = 'rgb(200 200 200)';
+        style.padding = '4px';
+        style.border = '1px solid black';
+        style.borderRadius = '4px';
+
+        document.body.append(clone);
+        setTimeout(() => clone.remove(), 5000);
+    },
+
 }).clone({
 
     name: name('leaves-in-brick'),
@@ -268,11 +298,11 @@ scrawl.makeBlock({
 // Additionally, it will update the <canvas> element's title attribute (for tool tips) and its ARIA label value (for accessibility)
 //
 // The cascadeEventAction function returns an Array of name Strings for the entitys at the current mouse cursor coordinates
-let interactionResults = '';
+const interactionResults = [];
 const interactions = function () {
 
-    if (canvas.here.active) interactionResults = canvas.cascadeEventAction('move');
-    else interactionResults = '';
+    interactionResults.length = 0;
+    if (canvas.here.active) interactionResults.push(...canvas.cascadeEventAction('move'));
 };
 scrawl.addListener('move', interactions, canvas.domElement);
 
@@ -283,7 +313,17 @@ const mylinks = function () {
 
     if (canvas.here.active) canvas.cascadeEventAction('up');
 };
-scrawl.addListener('up', mylinks, canvas.domElement);
+scrawl.addNativeListener('click', mylinks, canvas.domElement);
+
+// Handle a right-click `contextmenu` user interaction on a block
+// + Note that the `otherInteraction` string was introduced with SC v8.14.0
+// + An entity can have a maximum of one other interaction
+// + The `cascadeEventAction` function can include the (mouse or pointer) event object as its second argument
+const myLinksContextMenu = function (e) {
+
+    if (canvas.here.active) canvas.cascadeEventAction('otherInteraction', e);
+};
+scrawl.addNativeListener('contextmenu', (e) => myLinksContextMenu(e), canvas.domElement);
 
 
 // #### Scene animation
@@ -339,6 +379,24 @@ killArtefactAndAnchor(scrawl, canvas, name('brick-in-marble'), 'wikipedia-brick-
 /** @ts-expect-error */
             this.clickAnchor();
         },
+        onOtherInteraction: function (e) {
+            e.preventDefault();
+/** @ts-expect-error */
+            const el = this.anchor.domElement;
+            const clone = el.cloneNode(true);
+            const style = clone.style;
+            clone.id = `${el.id}_clone`;
+            style.position = 'fixed';
+            style.left = `${e.clientX}px`;
+            style.top = `${e.clientY}px`;
+            style.transform = 'translate(-50%, -50%)';
+            style.backgroundColor = 'rgb(255 200 180)';
+            style.padding = '4px';
+            style.border = '1px solid black';
+            style.borderRadius = '4px';
+            document.body.append(clone);
+            setTimeout(() => clone.remove(), 5000);
+        },
     });
 });
 

demo/dom-001.html

@@ -54,7 +54,7 @@ <h3><b>import</b> * as scrawl from 'scrawl-canvas';</h3>
 
   <p>... or if using the remote CDN version:</p>
 
-  <h3><b>import</b> * as scrawl from 'https://unpkg.com/scrawl-canvas@8.13.2';</h3>
+  <h3><b>import</b> * as scrawl from 'https://unpkg.com/scrawl-canvas@8.14.0';</h3>
 
   <p>The import doesn't need to be called <span class="scrawl-code">'scrawl'</span> - it can be whatever the user prefers.</p>
 

demo/dom-001.js

@@ -53,9 +53,7 @@ scrawl.makeAnimation({
     // Giving the animation object a name will make it easy to find in the Scrawl-canvas library object
     name: name('animation'),
 
-    // Every animation object must include a __fn__ function attribute which ___MUST___ return a Promise object - even if the functionality within the function is entirely synchronous.
-    //
-    // This is because some animation functions (for instance: canvas filters) rely on web workers to speed up their calculations which are - by definition - asynchronous. The promise should resolve as true if all is well; false otherwise
+    // Every animation object must include a __fn__ function attribute.
     fn: function () {
 
         scrawl.render()

demo/filters-019.js

@@ -38,7 +38,7 @@ scrawl.makePicture({
 
     name: name('edgeDetect-image'),
     asset: 'iris',
-    dimensions: ['100%', '100%'],
+    dimensions: ['50%', '100%'],
     copyDimensions: ['100%', '100%'],
 
     filters: [name('edgeDetect')],

demo/filters-027.html

@@ -66,10 +66,11 @@
   <h1><a href="index.html">Scrawl-canvas v8</a> - Filters test 027</h1>
   <h2>Parameters for: reducePalette filter</h2>
   <h3>To change image, drag-and-drop an image file over the canvas</h3>
+  <p>When calculating the "commonest colors" palette, color selection is dependent on the "minimum color distance" attribute - changing this will affect colors selected for the palette. Be aware that every image is different: settings that produce a good result in one image will produce terrible results for other images.</p>
 
   <div class="controls">
 
-    <div class="green label">Predefined palette</div>
+    <div class="green label">Palette string (predefined grays)</div>
     <div class="green">
       <select class="controlItem" id="palette">
         <option value="black-white">black-white</option>
@@ -79,27 +80,16 @@ <h3>To change image, drag-and-drop an image file over the canvas</h3>
       </select>
     </div>
 
-    <div class="green label">String of colors</div>
+    <div class="green label">Palette array (string colors)</div>
     <div class="green"><input class="controlItem" id="paletteString" type="text" value="" /></div>
 
-    <div class="blue label">Commonest colors</div>
+    <div class="blue label">Palette number (commonest colors)</div>
     <div class="blue"><input class="controlItem" id="paletteNumber" type="range" value="10" min="2" max="48" step="1" /></div>
 
-    <div class="blue label">Min color distance</div>
-    <div class="blue"><input class="controlItem" id="minimumColorDistance" type="range" value="1000" min="250" max="8000" step="250" /></div>
+    <div class="blue label">Min color distance (for commonest colors)</div>
+    <div class="blue"><input class="controlItem" id="minimumColorDistance" type="range" value="650" min="300" max="3000" step="5" /></div>
 
-    <div class="yellow label">Use OKLAB for distance</div>
-    <div class="yellow">
-      <select class="controlItem" id="useLabForPaletteDistance">
-        <option value="0">false</option>
-        <option value="1">true</option>
-      </select>
-    </div>
-
-    <div class="yellow label">Random seed</div>
-    <div class="yellow"><input class="controlItem" id="seed" type="text" value="some-random-string-or-other" /></div>
-
-    <div class="yellow label">Noise type</div>
+    <div class="yellow label">Noise type (for dithers)</div>
     <div class="yellow">
       <select class="controlItem" id="noiseType">
         <option value="random">Random</option>
@@ -108,6 +98,9 @@ <h3>To change image, drag-and-drop an image file over the canvas</h3>
       </select>
     </div>
 
+    <div class="yellow label">Random seed (for dithers)</div>
+    <div class="yellow"><input class="controlItem" id="seed" type="text" value="some-random-string-or-other" /></div>
+
     <div class="lavender label">Opacity</div>
     <div class="lavender"><input class="controlItem" id="opacity" type="range" value="1" min="0" max="1" step="0.01" /></div>
 
@@ -177,6 +170,10 @@ <h4>Test purpose</h4>
 
     <p><b>Touch test:</b> not required</p>
 
+    <p><b>Known issue (2024-08-26):</b> Beyond the simplest of predefined grayscale settings, this filter can becomes very computationally intensive (thus very slow). Performance in Firefox and Safari browsers appears to be significantly worse than in Chrome. Wherever possible, memoize the filter output to prevent significant page performance degradation!</p>
+
+    <p><b>Known issue (2024-08-26):</b> Safari browser does not like named colors strings - eg: 'red' - in a palette defined as an array of color strings, but seems happy to process structured color strings - eg: 'rgb(255 0 0)'. Firefox and Chrome just get on with the job (as normal).</p>
+
     <p><a href="../docs/demo/filters-027.html">Annotated code</a></p>
   </div>
 

demo/filters-027.js

@@ -63,10 +63,17 @@ const original = dithered.clone({
 // Function to display frames-per-second data, and other information relevant to the demo
 const report = reportSpeed('#reportmessage', function () {
 
+    let LUP = scrawl.getLastUsedReducePalette();
+    if (Array.isArray(LUP)) LUP = JSON.stringify(LUP);
+    console.log(LUP);
+
     return `
     Commonest colors: ${dom.paletteNumber.value}
     Minimum color distance: ${dom.minimumColorDistance.value}
-    Opacity: ${dom.opacity.value}`;
+    Opacity: ${dom.opacity.value}
+
+Last used palette:
+    ${LUP}`;
 });
 
 
@@ -89,14 +96,13 @@ scrawl.makeRender({
 // Setup form
 const dom = initializeDomInputs([
     ['input', 'paletteNumber', '16'],
-    ['input', 'minimumColorDistance', '1000'],
+    ['input', 'minimumColorDistance', '650'],
     ['input', 'opacity', '1'],
-    ['input', 'paletteString', 'yellow, green, darkgreen, limegreen, olivedrab, mediumseagreen, seagreen, lightblue, darkslategray, lavender, slateblue, mediumslateblue, black, indigo, brown, antiquewhite'],
+    ['input', 'paletteString', 'rgb(255 0 0), rgb(0 255 0), rgb(0 0 255), rgb(255 255 0), rgb(0 0 0), rgb(255 255 255)'],
     ['input', 'seed', 'some-random-string-or-other'],
     ['select', 'memoizeFilterOutput', 0],
     ['select', 'noiseType', 2],
     ['select', 'palette', 0],
-    ['select', 'useLabForPaletteDistance', 0],
 ]);
 
 
@@ -131,7 +137,6 @@ scrawl.makeUpdater({
         minimumColorDistance: ['minimumColorDistance', 'round'],
         seed: ['seed', 'raw'],
         noiseType: ['noiseType', 'raw'],
-        useLabForPaletteDistance: ['useLabForPaletteDistance', 'boolean'],
         opacity: ['opacity', 'float'],
     },
 });