Merge pull request #89 from KaliedaRik/bump-to-v8.13.1

Bump to v8.13.1
KaliedaRik · May 3, 2024 · a78e2af · a78e2af
2 parents da00f72 + f48474f
commit a78e2af
Show file tree

Hide file tree

Showing 302 changed files with 3,485 additions and 706 deletions.
diff --git a/README.md b/README.md
@@ -1,5 +1,5 @@
 # Welcome to the Scrawl-canvas Library
-Version: `8.13.0 - 27 April 2024` 
+Version: `8.13.1 - 3 May 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.0 files can be downloaded from this link: [scrawl.rikweb.org.uk/downloads/scrawl-canvas_8-13-0.zip](https://scrawl.rikweb.org.uk/downloads/scrawl-canvas_8-13-0.zip) - that package only includes the minified file.
+Alternatively, a zip package of the v8.13.1 files can be downloaded from this link: [scrawl.rikweb.org.uk/downloads/scrawl-canvas_8-13-1.zip](https://scrawl.rikweb.org.uk/downloads/scrawl-canvas_8-13-1.zip) - that package only includes the minified file.
 
 ```html
 <!-- Hello world -->
@@ -102,7 +102,7 @@ Alternatively, a zip package of the v8.13.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/[email protected].0';
+    import * as scrawl from 'https://unpkg.com/[email protected].1';
     [...]
 </script>
 ```

diff --git a/demo/canvas-001.js b/demo/canvas-001.js
@@ -215,5 +215,5 @@ console.log('canvas.get(\'baseGroup\')', canvas.get('baseGroup'));
 console.log('canvas.base.get(\'group\')', canvas.base.get('group'));
 
 // Kill, and packet, functionality tests
-killArtefact(canvas, name('block-fill'), 4000);
-killArtefact(canvas, name('wheel-fillAndDraw'), 6000);
+killArtefact(scrawl, canvas, name('block-fill'), 4000);
+killArtefact(scrawl, canvas, name('wheel-fillAndDraw'), 6000);
diff --git a/demo/canvas-002.js b/demo/canvas-002.js
@@ -252,7 +252,7 @@ console.log(scrawl.library);
 
 console.log('Performing tests ...');
 
-killArtefact(canvas, name('mouse-pivot'), 4000, () => {
+killArtefact(scrawl, canvas, name('mouse-pivot'), 4000, () => {
 
     myPivot = scrawl.findEntity(name('mouse-pivot'));
 
@@ -267,4 +267,4 @@ killArtefact(canvas, name('mouse-pivot'), 4000, () => {
     });
 });
 
-killArtefact(canvas, name('mimic-block'), 6000);
+killArtefact(scrawl, canvas, name('mimic-block'), 6000);
diff --git a/demo/canvas-003.js b/demo/canvas-003.js
@@ -186,7 +186,7 @@ console.log(scrawl.library);
 
 console.log('Performing tests ...');
 
-killStyle(canvas, name('mygradient'), 3000, () => {
+killStyle(scrawl, canvas, name('mygradient'), 3000, () => {
 
     // Repopulate the graddy variable
 /** @ts-expect-error */

diff --git a/demo/canvas-009.js b/demo/canvas-009.js
@@ -308,7 +308,7 @@ console.log(scrawl.library);
 console.log('Performing tests ...');
 
 // We use the __canvas__ and __myTracker__ variables in our blocks' onEnter, onLeave and onUp functions. While this works fine for the blocks created in the scope of this module file's code, it will fail when we kill and resurrect a block - in the resurrected block the canvas and myTracker variables will be 'undefined'. So we need to reset the block's 'on...' functions (in this module file's code) after the block has resurrected
-killArtefactAndAnchor(canvas, name('brick-in-marble'), 'wikipedia-brick-link', 2000, () => {
+killArtefactAndAnchor(scrawl, canvas, name('brick-in-marble'), 'wikipedia-brick-link', 2000, () => {
 
     scrawl.findArtefact(name('brick-in-marble')).set({
 
@@ -342,7 +342,7 @@ killArtefactAndAnchor(canvas, name('brick-in-marble'), 'wikipedia-brick-link', 2
     });
 });
 
-killStyle(canvas, name('marble-pattern'), 3000, () => {
+killStyle(scrawl, canvas, name('marble-pattern'), 3000, () => {
 
     // Reset entitys, whose fill/strokeStyles will have been set to default values when the Pattern died
     scrawl.findEntity(name('brick-in-marble')).set({

diff --git a/demo/canvas-011.js b/demo/canvas-011.js
@@ -467,5 +467,5 @@ scrawl.makeRender({
 console.log(scrawl.library);
 
 console.log('Performing tests ...');
-killArtefact(canvas, name('japan_fill'), 4000);
-killArtefact(canvas, name('japan_fillAndDraw'), 6000);
+killArtefact(scrawl, canvas, name('japan_fill'), 4000);
+killArtefact(scrawl, canvas, name('japan_fillAndDraw'), 6000);
diff --git a/demo/canvas-012.js b/demo/canvas-012.js
@@ -12,10 +12,6 @@ const canvas = scrawl.findCanvas('mycanvas');
 
 
 // Namespacing boilerplate
-// + We don't need to give SC objects a `name` attribute - it's just a lot more convenient if we do.
-// + In particular, namespacing SC objects names helps make clearing them up after we've finished with them a lot easier!
-// + For this test demo, we forgo names and namespaces to make sure things still get generated and lodged in the library
-
 const namespace = canvas.name;
 const name = (n) => `${namespace}-${n}`;
 
@@ -93,6 +89,7 @@ const myWheel = scrawl.makeWheel({
 
     path: arrow,
     pathPosition: 0,
+    constantSpeedAlongPath: true,
     addPathRotation: true,
     lockTo: 'path',
 

diff --git a/demo/canvas-014.js b/demo/canvas-014.js
@@ -144,6 +144,8 @@ scrawl.makeLine({
     endPathPosition: 0,
     endLockTo: 'path',
 
+    constantSpeedAlongPath: true,
+
     lineWidth: 5,
     lineCap: 'round',
     strokeStyle: 'black',
@@ -308,7 +310,7 @@ console.log(scrawl.library);
 
 console.log('Performing tests ...');
 
-killArtefact(canvas, name('pin-1'), 2000, () => {
+killArtefact(scrawl, canvas, name('pin-1'), 2000, () => {
 
     pins.addArtefacts(name('pin-1'));
 
@@ -318,7 +320,7 @@ killArtefact(canvas, name('pin-1'), 2000, () => {
     });
 });
 
-killArtefact(canvas, name('pin-5'), 3000, () => {
+killArtefact(scrawl, canvas, name('pin-5'), 3000, () => {
 
     pins.addArtefacts(name('pin-5'));
 
@@ -328,7 +330,7 @@ killArtefact(canvas, name('pin-5'), 3000, () => {
     });
 });
 
-killArtefact(canvas, name('pin-7'), 4000, () => {
+killArtefact(scrawl, canvas, name('pin-7'), 4000, () => {
 
     pins.addArtefacts(name('pin-7'));
 
@@ -338,7 +340,7 @@ killArtefact(canvas, name('pin-7'), 4000, () => {
     });
 });
 
-killArtefact(canvas, name('my-bezier'), 5000, () => {
+killArtefact(scrawl, canvas, name('my-bezier'), 5000, () => {
 
     scrawl.findEntity(name('path-line')).set({
         endPath: name('my-bezier'),

diff --git a/demo/canvas-024.js b/demo/canvas-024.js
@@ -23,15 +23,22 @@ scrawl.importDomImage('.flowers');
 
 // Define some filters to play with
 scrawl.makeFilter({
+
     name: name('grayscale'),
     method: 'grayscale',
+
 }).clone({
+
     name: name('sepia'),
     method: 'sepia',
+
 }).clone({
+
     name: name('cyan'),
     method: 'cyan',
+
 }).clone({
+
     name: name('pixelate'),
     method: 'pixelate',
     tileWidth: 8,
@@ -95,28 +102,34 @@ scrawl.makeWheel({
     method: 'fillAndDraw',
 
 }).clone({
+
     name: name('pin-2'),
     startY: 300,
 
 }).clone({
+
     name: name('pin-3'),
     startY: 500,
 
 }).clone({
+
     name: name('pin-4'),
     fillStyle: 'green',
     startX: 500,
     startY: 100,
 
 }).clone({
+
     name: name('pin-5'),
     startY: 230,
 
 }).clone({
+
     name: name('pin-6'),
     startY: 370,
 
 }).clone({
+
     name: name('pin-7'),
     startY: 500,
 });
@@ -191,7 +204,7 @@ const myLoom = scrawl.makeLoom({
 
     name: name('display-loom'),
 
-    // Check to see that paths can be loaded either as picture name strings, or as the entity itself
+    // Check to see that paths can be loaded either as name strings, or as the entity itself
     fromPath: name('my-quad'),
     toPath: myBez,
 
@@ -247,7 +260,7 @@ scrawl.makeRender({
 
 
 // #### Drag-and-Drop image loading functionality
-addImageDragAndDrop(canvas, '#my-image-store', piccy);
+addImageDragAndDrop(scrawl, canvas, '#my-image-store', piccy);
 
 
 // #### More user interaction

diff --git a/demo/canvas-030.js b/demo/canvas-030.js
@@ -94,11 +94,6 @@ const myline = scrawl.makePolyline({
     startX: 0,
     startY: 0,
 
-    // The `precision` attribute determines the accuracy for positioning artefacts on the path when they have set their `constantPathSpeed` flag to `true`
-    // + Natural path speed leads to slower progression around tight corners; constant path speed attempts to even out these variations across the length of the path.
-    // + The default precision value is `10`; decreasing the value increases the positioning accuracy. The more accurate the positioning, the greater the computational (and memory) burden.
-    precision: 0.05,
-
     pivot: name('pivot-wheel'),
     lockTo: 'start',
 
@@ -121,6 +116,11 @@ const myline = scrawl.makePolyline({
     // + It generates more accurate results - particularly when the Polyline is flipped, rolled and/or scaled, and when underlying pins (particularly when those pins are artefacts) update their coordinates.
     useAsPath: true,
 
+    // The `precision` attribute determines the accuracy for positioning artefacts on the path when they have set their `constantSpeedAlongPath` flag to `true`
+    // + Natural path speed leads to slower progression around tight corners; constant path speed attempts to even out these variations across the length of the path.
+    // + The default precision value is `10`; decreasing the value increases the positioning accuracy. The more accurate the positioning, the greater the computational (and memory) burden.
+    precision: 0.05,
+
     bringToFrontOnDrag: false,
 });
 
@@ -288,4 +288,4 @@ console.log(scrawl.library);
 
 console.log('Performing tests ...');
 
-killPolylineArtefact(canvas, name('pin-2'), 3000, myline, () => myline.updatePinAt(name('pin-2'), 2));
+killPolylineArtefact(scrawl, canvas, name('pin-2'), 3000, myline, () => myline.updatePinAt(name('pin-2'), 2));
diff --git a/demo/canvas-033.js b/demo/canvas-033.js
@@ -43,7 +43,6 @@ const track = scrawl.makeOval({
     },
 
     useAsPath: true,
-    constantPathSpeed: true,
     precision: 0.1
 });
 
@@ -68,6 +67,7 @@ scrawl.makeEnhancedLabel({
 
     layoutTemplate: name('loader-track'),
     useLayoutTemplateAsPath: true,
+    constantSpeedAlongPath: true,
 
     breakTextOnSpaces: false,
 

diff --git a/demo/canvas-036.js b/demo/canvas-036.js
@@ -76,7 +76,6 @@ scrawl.makeOval({
     method: 'draw',
 
     useAsPath: true,
-    precision: 0.1,
 });
 
 
@@ -97,7 +96,7 @@ const cell3 = canvas.buildCell({
     constantSpeedAlongPath: true,
 
     delta: {
-      pathPosition: -0.001,
+        pathPosition: -0.001,
     },
 
     backgroundColor: 'black',

diff --git a/demo/canvas-039.js b/demo/canvas-039.js
@@ -84,7 +84,7 @@ scrawl.makeGroup({
 // Create draggable entitys
 scrawl.makeWheel({
 
-    name: name('wheel-1'),
+    name: name('wheel-red'),
     group: name('drag-group'),
 
     radius: 40,
@@ -96,23 +96,24 @@ scrawl.makeWheel({
 
 }).clone({
 
-    name: name('wheel-2'),
+    name: name('wheel-blue'),
     start: [250, 250],
     fillStyle: 'blue',
 
 }).clone({
 
-    name: name('wheel-3'),
+    name: name('wheel-green'),
     start: [350, 250],
     fillStyle: 'green',
 
 }).clone({
 
-    name: name('wheel-4'),
+    name: name('wheel-yellow'),
     start: [350, 150],
     fillStyle: 'yellow',
 });
 
+
 scrawl.makeBlock({
 
     name: name('block-1'),
@@ -137,6 +138,16 @@ scrawl.makeWheel({
 });
 
 
+// Test to make sure EnhancedLabel entitys can be used on non-base Cells
+scrawl.makeEnhancedLabel({
+    name: name('label'),
+    group: name('drag-group'),
+    layoutTemplate: name('wheel-yellow'),
+    text: 'Drag the dots around the canvas',
+    justifyLine: 'space-around',
+});
+
+
 // #### Scene animation
 // Function to display frames-per-second data, and other information relevant to the demo
 const report = reportSpeed('#reportmessage', function () {