release action

.github/workflows/release.yml

@@ -0,0 +1,23 @@
+---
+name: 'tagged-release'
+
+on:
+  push:
+    tags:
+      - '*'
+
+jobs:
+  tagged-release:
+    name: 'Tagged Release'
+    runs-on: 'ubuntu-latest'
+
+    steps:
+      # ...
+      - name: 'Build & test'
+        run: |
+          echo "done!"
+
+      - uses: 'marvinpinto/action-automatic-releases@latest'
+        with:
+          repo_token: '${{ secrets.GITHUB_TOKEN }}'
+          prerelease: false

test/sandbox.html

@@ -30,28 +30,73 @@
     <script type="module">
       import Konva from '../src/index.ts';
 
-      const stage = new Konva.Stage({
+      const config = {
+        canvas: { width: window.innerWidth, height: window.innerHeight },
+        filter: { pixelSize: 26 },
+        image: { naturalWidth: 500, naturalHeight: 500, scale: 1 },
+        imageCropped: { width: 150, height: 150 },
+        shapeReference: { colorOdd: 'white', colorEven: 'black' },
+      };
+
+      const image = document.createElement('img');
+      image.crossOrigin = 'anonymous';
+      image.src = `https://placekitten.com/${config.image.naturalWidth}/${config.image.naturalHeight}`;
+
+      var stage = new Konva.Stage({
         container: 'container',
-        width: window.innerWidth / 2,
-        height: window.innerHeight / 2,
+        width: config.canvas.width,
+        height: config.canvas.height,
       });
-      const layer = new Konva.Layer();
+
+      var layer = new Konva.Layer();
       stage.add(layer);
-      console.time('load');
-      for (var i = 0; i < 30000; i++) {
-        const shape = new Konva.Circle({
-          x: Math.random() * stage.width(),
-          y: Math.random() * stage.height(),
-          radius: 10,
-          draggable: true,
-          fill: Konva.Util.getRandomColor(),
+
+      image.onload = async function () {
+        // await image.decode(); // used to dynamically determine natural dimensions - not needed, in config
+
+        var imageOriginal = new Konva.Image({
+          x: 0,
+          y: 0,
+          scaleX: config.image.scale,
+          scaleY: config.image.scale,
+          image,
+          width: config.image.naturalWidth,
+          height: config.image.naturalHeight,
         });
-        layer.add(shape);
-      }
-      console.timeEnd('load');
-      console.time('draw');
-      layer.draw();
-      console.timeEnd('draw');
+
+        var imageFiltered = new Konva.Image({
+          cropX: 0,
+          cropY: 0,
+          cropWidth: config.imageCropped.width,
+          cropHeight: config.imageCropped.height,
+          x: 0,
+          y: 0,
+          scaleX: config.image.scale,
+          scaleY: config.image.scale,
+          image,
+          width: config.imageCropped.width,
+          height: config.imageCropped.height,
+          pixelSize: config.filter.pixelSize,
+        });
+
+        imageFiltered.cache();
+
+        imageFiltered.filters([Konva.Filters.Pixelate]);
+
+        var rect = new Konva.Image({
+          x: 0,
+          y: 0,
+          scaleX: config.image.scale,
+          scaleY: config.image.scale,
+          width: config.imageCropped.width,
+          height: config.imageCropped.height,
+          stroke: 'red',
+          strokeWidth: 0.5,
+        });
+
+        // add the shapes to the layer
+        layer.add(imageOriginal, imageFiltered, rect);
+      };
     </script>
   </body>
 </html>