Merge pull request #70 from KaliedaRik/v8-dev

Bump to v8.12.0
KaliedaRik · Jan 13, 2024 · f698ed9 · f698ed9
2 parents 64af53b + 000b09c
commit f698ed9
Show file tree

Hide file tree

Showing 430 changed files with 24,067 additions and 4,763 deletions.
diff --git a/README.md b/README.md
@@ -1,5 +1,5 @@
 # Welcome to the Scrawl-canvas Library
-Version: `8.11.0 - 23 December 2023` 
+Version: `8.12.0 - 12 January 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.11.0 files can be downloaded from this link: [scrawl.rikweb.org.uk/downloads/scrawl-canvas_8-11-0.zip](https://scrawl.rikweb.org.uk/downloads/scrawl-canvas_8-11-0.zip) - that package only includes the minified file.
+Alternatively, a zip package of the v8.12.0 files can be downloaded from this link: [scrawl.rikweb.org.uk/downloads/scrawl-canvas_8-12-0.zip](https://scrawl.rikweb.org.uk/downloads/scrawl-canvas_8-12-0.zip) - that package only includes the minified file.
 
 ```html
 <!-- Hello world -->
@@ -106,7 +106,7 @@ Alternatively, a zip package of the v8.11.0 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.11.0';
+    import * as scrawl from 'https://unpkg.com/scrawl-canvas@8.12.0';
     [...]
 </script>
 ```
@@ -184,6 +184,9 @@ Running the following command on the command line will recreate the minified fil
 $> yarn build
 ```
 
+### Star History
+[![Star History Chart](https://api.star-history.com/svg?repos=KaliedaRik/Scrawl-canvas&type=Date)](https://star-history.com/#KaliedaRik/Scrawl-canvas&Date)
+
 
 ### Development team
 Developed by Rik Roots: [email protected]
diff --git a/demo/canvas-009.html b/demo/canvas-009.html
@@ -48,6 +48,8 @@ <h4>Test purpose</h4>
       <li>Use the new cell as the source for a Pattern style</li>
     </ul>
 
+    <p><b>To be aware:</b> for reasons unknown, Chrome browsers struggle to apply shadows to entitys that use patterns for their fill and/or stroke, which can lead to a serious decrease in frame rate.</p>
+
     <p>Additionally, using this demo to check zoned canvas User Interactions</p>
     <ul>
       <li>Define onEnter and onLeave functions on the first defined block, to change its linewidth attribute when the mouse cursor hovers over it</li>

diff --git a/demo/canvas-009.js b/demo/canvas-009.js
@@ -36,7 +36,7 @@ ga(function() {
     myTracker.set('campaignKeyword', 'Scrawl-canvas demo');
 
     // Uncomment the next line to suppress tracker packets (so they don't show up in the console)
-    // myTracker.set('sendHitTask', null);
+    myTracker.set('sendHitTask', null);
 });
 
 
@@ -92,8 +92,6 @@ canvas.buildCell({
 
     shown: false,
     useAsPattern: true,
-
-    // willReadFrequently: false,
 });
 
 canvas.base.set({
@@ -149,6 +147,7 @@ makeBlock({
     fillStyle: name('cell-pattern'),
     strokeStyle: name('leaves-pattern'),
 
+    // To be aware: adding shadows to entitys using patterns for their fill and/or stroke styles can lead to a serious decrease in frame rate
     shadowOffsetX: 5,
     shadowOffsetY: 5,
     shadowBlur: 3,
@@ -164,15 +163,12 @@ makeBlock({
 
         // The clickAction attribute captures both Scrawl-canvas trigger clicks and also non-mouse 'clicks' on the anchor element hidden at the top of the web page, for example using the keyboard (tab, return) or other assistive technology.
 
-        // The function returns a string which Scrawl-canvas will add to the anchor's 'onclick' attribute when it creates the anchor element dynamically and adds it to the DOM.
+        // This function gets invoked by an event listener added to the &lt;a> link element in the DOM. `this` refers to the element, not the SC anchor wrapper or the Block entity object. The `myTracker` object is not recognised by the link element (the object's scope is local to this module), so instead we fire the `ga` analytics object directly as that lives in the global space - see line 19 above.
         clickAction: function () {
 
-            return `ga('demoCanvasTracker.send', 'event', 'Outbound link', 'click', '${this.href}')`;
+// @ts-expect-error
+            ga('demoCanvasTracker.send', 'event', 'Outbound link', 'click', this.href);
         },
-
-        // Include focus and blur actions, which will trigger the onEnter and onLeave functions (below) for visitors using non-mouse/touch navigation (for example: keyboard tabbing)
-        focusAction: true,
-        blurAction: true,
     },
 
     // Accessibility functionality to be used by event functions defined below in response to user activity - this time moving the mouse cursor across the &lt;canvas> element. Note that 'this' refers to the entity object, meaning the functions can be safely cloned into other entitys.

diff --git a/demo/canvas-017.js b/demo/canvas-017.js
@@ -38,6 +38,7 @@ const lorem = makePhrase({
     // + Yes, this is a bug
     // + We have no plans to fix this issue in the near future
     text: '&shy;§ITALIC§Lorem§/ITALIC§ ipsum §Red-Text§har varit <ITALIC>standard 😀</ITALIC> &auml;nda sedan §SMALL-CAPS§1500-talet§/SMALL-CAPS§, när-en-ok&aring;nd-§BOLD§bok§DEFAULTS§sättare-tog att antal 🤖 §BOLD§bok§/BOLD§stäver §OVERLINE§och <HIGHLIGHT>blandade§/OVERLINE§ dem</HIGHLIGHT> för §size-24§Red-Text§att§DEFAULTS§ g&ouml;ra, §Letter-spacing-10§ett 🎻 prov§UNDERLINE§exemplar</UNDERLINE>§/Letter-spacing-10§ §MONO§av en §BOLD§b&oacute;k.',
+    // Note also that the `SMALL-CAPS` styling has been deprecated and shouldn't be used. Included here only for testing the deprecated functionality
 
     font: "16px 'Open Sans', 'Fira Sans', 'Lucida Sans', 'Lucida Sans Unicode', 'Trebuchet MS', 'Liberation Sans', 'Nimbus Sans L', sans-serif",
 

diff --git a/demo/canvas-018.js b/demo/canvas-018.js
@@ -108,6 +108,7 @@ const lorem = makePhrase({
 
     name: name('myPhrase'),
 
+    // Note that the `SMALL-CAPS` styling has been deprecated and shouldn't be used. Included here only for testing the deprecated functionality
     text: '&shy;§ITALIC§Lorem§/ITALIC§ ipsum §Red-Text§har varit <i>standard 😀</i> &auml;nda sedan §SMALL-CAPS§1500-talet§/SMALL-CAPS§, när-en-ok&aring;nd-§BOLD§bok§DEFAULTS§sättare-tog att antal 🤖 §BOLD§bok§/BOLD§stäver §OVERLINE§och <HIGHLIGHT>blandade§/OVERLINE§ dem</HIGHLIGHT> för §size-24§Red-Text§att§DEFAULTS§ g&ouml;ra, §Letter-spacing-10§ett 🎻 prov§u§exemplar</UNDERLINE>§/Letter-spacing-10§ §MONO§av en §BOLD§b&oacute;k.',
 
     font: "16px 'Open Sans', 'Fira Sans', 'Lucida Sans', 'Lucida Sans Unicode', 'Trebuchet MS', 'Liberation Sans', 'Nimbus Sans L', sans-serif",

diff --git a/demo/canvas-027.js b/demo/canvas-027.js
@@ -31,7 +31,7 @@ const myvideo = scrawl.makePicture({
     copyHeight: '100%',
 });
 
-const initialVideoStart = scrawl.addListener('up', () => {
+const initialVideoStart = scrawl.addNativeListener(['mouseup', 'touchend', 'keyup'], () => {
 
     myvideo.set({
 
@@ -46,9 +46,23 @@ const initialVideoStart = scrawl.addListener('up', () => {
 
 
 // canvas-based buttons
-scrawl.makePhrase({
+const playPauseAction = function () {
 
-    name: name('test-button-play-pause'),
+    if (myvideo.get('video_paused')) {
+
+        playPause.set({ text: 'PAUSE' });
+        myvideo.videoPlay();
+    }
+    else {
+
+        playPause.set({ text: 'PLAY' });
+        myvideo.videoPause();
+    }
+};
+
+const playPause = scrawl.makePhrase({
+
+    name: name('play-pause-button'),
     order: 2,
 
     text: 'PLAY',
@@ -58,14 +72,17 @@ scrawl.makePhrase({
 
     startX: '75%',
     handleX: 'center',
-    startY: '90%',
+    startY: 'bottom',
+    handleY: 'bottom',
 
     letterSpacing: 2,
     underlinePosition: 0.75,
+    lineHeight: 1,
 
     fillStyle: 'yellow',
 
     underlineStyle: 'yellow',
+    underlineWidth: 4,
 
     onEnter: function () {
 
@@ -97,61 +114,48 @@ scrawl.makePhrase({
         });
     },
 
-    onUp: function () {
+    button: {
 
-        if (myvideo.get('video_paused')) {
+        name: name('play-pause-el'),
+        description: 'Play | Pause',
+        clickAction: playPauseAction,
+        tabOrder: 0,
+    },
 
-// @ts-expect-error
-            this.set({
-                text: 'PAUSE',
-            });
+    onUp: playPauseAction,
+});
 
-            myvideo.videoPlay();
-        }
-        else {
+const listenMuteAction = function () {
 
-// @ts-expect-error
-            this.set({
-                text: 'PLAY',
-            });
+    if (myvideo.get('video_muted')) {
 
-            myvideo.videoPause();
-        }
-    },
+        listenMute.set({ text: 'MUTE' });
+        myvideo.set({ video_muted: false });
+    }
+    else {
 
-}).clone({
+        listenMute.set({ text: 'LISTEN' });
+        myvideo.set({ video_muted: true });
+    }
+};
+
+const listenMute = playPause.clone({
 
-    name: name('test-button-listen-mute'),
+    name: name('listen-mute-button'),
 
     text: 'LISTEN',
 
     startX: '25%',
 
-    onUp: function () {
-
-        if (myvideo.get('video_muted')) {
-
-// @ts-expect-error
-            this.set({
-                text: 'MUTE',
-            });
-
-            myvideo.set({
-                video_muted: false,
-            });
-        }
-        else {
-
-// @ts-expect-error
-            this.set({
-                text: 'LISTEN',
-            });
+    button: {
 
-            myvideo.set({
-                video_muted: true,
-            });
-        }
+        name: name('listen-mute-el'),
+        description: 'Listen | Mute',
+        clickAction: listenMuteAction,
+        tabOrder: 1,
     },
+
+    onUp: listenMuteAction,
 });
 
 // Turn the swans pink
@@ -232,9 +236,7 @@ scrawl.makePicture({
         name: name('wikipedia-swan-link'),
         href: 'https://en.wikipedia.org/wiki/Swan',
         description: 'Link to the Wikipedia article on swans',
-
-        focusAction: true,
-        blurAction: true,
+        tabOrder: 2,
     },
 
     checkHitIgnoreTransparency: true,
@@ -334,12 +336,10 @@ const mygoose = scrawl.makeBlock({
     },
 
     anchor: {
-        name: name('wikipedia-goose-link'),
+        name: name('wikipedia-goose-link-1'),
         href: 'https://en.wikipedia.org/wiki/Goose',
-        description: 'Link to the Wikipedia article on geese',
-
-        focusAction: true,
-        blurAction: true,
+        description: 'First link to the Wikipedia article on geese',
+        tabOrder: 3,
     },
 });
 
@@ -368,6 +368,7 @@ scrawl.makeAction({
         this.targets[0].set({
 
             visibility: true,
+            anchorDisabled: false,
         });
     },
 
@@ -381,6 +382,7 @@ scrawl.makeAction({
         this.targets[0].set({
 
             visibility: false,
+            anchorDisabled: true,
         });
     },
 });
@@ -393,12 +395,13 @@ mygoose.clone({
     width: '22%',
     height: '16%',
 
-    onUp: function () {
-
-        mygoose.clickAnchor();
+    // It's generally not a good idea to share &lt;a> anchor link elements between interactive artefacts. However, be aware that repeating a link may not be the best user experience for those users accessing the web page with assistive technologies.
+    anchor: {
+        name: name('wikipedia-goose-link-2'),
+        href: 'https://en.wikipedia.org/wiki/Goose',
+        description: 'Second link to the Wikipedia article on geese',
+        tabOrder: 4,
     },
-
-    anchor: null,
 });
 
 myLocalTweenFactory(

diff --git a/demo/canvas-050.html b/demo/canvas-050.html
@@ -18,7 +18,7 @@
 
 <body>
   <h1><a href="index.html">Scrawl-canvas v8</a> - Canvas test 050</h1>
-  <h2>Manipulate artefact delta animation values</h2>
+  <h2>Manipulate artefact delta animation values; test animation maxFrameRate</h2>
 
   <div class="controls">
     <div class="yellow label">Constraint action</div>
@@ -32,6 +32,20 @@ <h2>Manipulate artefact delta animation values</h2>
     <div id="scaling-label" class="pink label">Scaling</div>
     <button class="pink controlItem" id="scaling" value="0">Add scaling</button>
 
+    <div class="green label">Max frames/second</div>
+    <div class="green">
+      <select class="controlItem" id="maxFrameRate">
+        <option value="120">120</option>
+        <option value="90">90</option>
+        <option value="60">60</option>
+        <option value="45">45</option>
+        <option value="30">30</option>
+        <option value="15">15</option>
+        <option value="5">5</option>
+        <option value="1">1</option>
+      </select>
+    </div>
+
   </div>
 
   <canvas 
@@ -50,6 +64,10 @@ <h4>Test purpose</h4>
       <li>Check that reverse and loop actions work as expected</li>
       <li>Check that scaling animation can be added to and deleted from the delta object</li>
     </ul>
+    <p>Additionally:</p>
+    <ul>
+      <li>Change the frame rate; check that the displayed screen refresh frame rate does not exceed this value</li>
+    </ul>
     <p>setDeltaValues() actions not yet tested: 'newString', 'update', 'reverse', 'add', 'multiply'</p>
     <p><b>Touch test:</b> not required</p>