kritzel-stencil 0.0.124 → 0.0.126

package/dist/collection/components/core/kritzel-cursor-trail/kritzel-cursor-trail.js

@@ -1,154 +0,0 @@
-import { Host, h } from "@stencil/core";
-import { KritzelMouseButton } from "../../../enums/event-button.enum";
-export class KritzelCursorTrail {
-    constructor() {
-        this.cursorTrailPoints = [];
-        this.isLeftButtonDown = false;
-        this.TRAIL_DURATION_MS = 100;
-        this.MAX_TRAIL_POINTS = 50;
-    }
-    componentDidLoad() {
-        this.trailCleanupIntervalId = window.setInterval(() => {
-            const now = Date.now();
-            const newTrailPoints = this.cursorTrailPoints.filter(p => now - p.timestamp < this.TRAIL_DURATION_MS);
-            if (newTrailPoints.length !== this.cursorTrailPoints.length) {
-                this.cursorTrailPoints = newTrailPoints;
-            }
-        }, 50);
-    }
-    disconnectedCallback() {
-        if (this.trailCleanupIntervalId) {
-            window.clearInterval(this.trailCleanupIntervalId);
-        }
-    }
-    handleMouseDown(ev) {
-        if (ev.pointerType === 'mouse') {
-            if (ev.button === KritzelMouseButton.Left) {
-                this.isLeftButtonDown = true;
-                this.cursorTrailPoints = [];
-            }
-        }
-        if (ev.pointerType === 'touch') {
-            if (this.store.state.pointers.size === 1) {
-                this.isLeftButtonDown = true;
-                this.cursorTrailPoints = [];
-            }
-        }
-    }
-    handlePointerMove(ev) {
-        if (!this.isLeftButtonDown) {
-            return;
-        }
-        const newPoint = { x: ev.clientX, y: ev.clientY, timestamp: Date.now() };
-        const updatedTrail = [newPoint, ...this.cursorTrailPoints];
-        if (updatedTrail.length > this.MAX_TRAIL_POINTS) {
-            this.cursorTrailPoints = updatedTrail.slice(0, this.MAX_TRAIL_POINTS);
-        }
-        else {
-            this.cursorTrailPoints = updatedTrail;
-        }
-    }
-    handlePointerUp(ev) {
-        if (ev.pointerType === 'mouse') {
-            if (ev.button === KritzelMouseButton.Left) {
-                this.isLeftButtonDown = false;
-                this.cursorTrailPoints = [];
-            }
-        }
-        if (ev.pointerType === 'touch') {
-            if (this.store.state.pointers.size === 0) {
-                this.isLeftButtonDown = false;
-                this.cursorTrailPoints = [];
-            }
-        }
-    }
-    render() {
-        return (h(Host, { key: '2e6ee739a4c25cee00470ee95ca22e55712c8d7b' }, this.cursorTrailPoints.length > 1 && (h("svg", { key: '483aa687ccd290980ca9c588a84547df2bfdb659', class: "cursor-trail-svg", xmlns: "http://www.w3.org/2000/svg", style: {
-                position: 'absolute',
-                left: '0',
-                top: '0',
-                width: '100%',
-                height: '100%',
-                pointerEvents: 'none',
-                opacity: 'var(--kritzel-cursor-trail-opacity, 0.6)',
-                zIndex: '9000',
-            } }, this.cursorTrailPoints.slice(1).map((point, index) => {
-            const prevPoint = this.cursorTrailPoints[index];
-            const now = Date.now();
-            const age = now - point.timestamp;
-            const progress = Math.max(0, Math.min(1, age / this.TRAIL_DURATION_MS));
-            if (progress >= 1)
-                return null;
-            const baseStrokeWidth = Math.max(2, 15 * (1 - progress));
-            return (h("line", { key: `trail-segment-${point.timestamp}`, x1: prevPoint.x.toString(), y1: prevPoint.y.toString(), x2: point.x.toString(), y2: point.y.toString(), stroke: "var(--kritzel-cursor-trail-color, rgb(228, 228, 228))", "stroke-width": baseStrokeWidth.toString(), "stroke-linecap": "round" }));
-        })))));
-    }
-    static get is() { return "kritzel-cursor-trail"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["kritzel-cursor-trail.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["kritzel-cursor-trail.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "store": {
-                "type": "unknown",
-                "attribute": "store",
-                "mutable": false,
-                "complexType": {
-                    "original": "KritzelStore",
-                    "resolved": "KritzelStore",
-                    "references": {
-                        "KritzelStore": {
-                            "location": "import",
-                            "path": "../../../classes/store.class",
-                            "id": "src/classes/store.class.ts::KritzelStore"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false
-            }
-        };
-    }
-    static get states() {
-        return {
-            "cursorTrailPoints": {},
-            "isLeftButtonDown": {}
-        };
-    }
-    static get listeners() {
-        return [{
-                "name": "pointerdown",
-                "method": "handleMouseDown",
-                "target": "window",
-                "capture": false,
-                "passive": true
-            }, {
-                "name": "pointermove",
-                "method": "handlePointerMove",
-                "target": "window",
-                "capture": false,
-                "passive": true
-            }, {
-                "name": "pointerup",
-                "method": "handlePointerUp",
-                "target": "window",
-                "capture": false,
-                "passive": true
-            }];
-    }
-}
-//# sourceMappingURL=kritzel-cursor-trail.js.map

package/dist/collection/components/core/kritzel-cursor-trail/kritzel-cursor-trail.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"kritzel-cursor-trail.js","sourceRoot":"","sources":["../../../../src/components/core/kritzel-cursor-trail/kritzel-cursor-trail.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Listen, Prop, State, h } from '@stencil/core';\r\nimport { KritzelMouseButton } from '../../../enums/event-button.enum';\r\nimport { KritzelStore } from '../../../classes/store.class';\r\n\r\n@Component({\r\n  tag: 'kritzel-cursor-trail',\r\n  styleUrl: 'kritzel-cursor-trail.css',\r\n  shadow: true,\r\n})\r\nexport class KritzelCursorTrail {\r\n  @Prop()\r\n  store: KritzelStore;\r\n\r\n  @State()\r\n  cursorTrailPoints: Array<{ x: number; y: number; timestamp: number }> = [];\r\n\r\n  @State()\r\n  isLeftButtonDown: boolean = false;\r\n\r\n  private trailCleanupIntervalId: number;\r\n\r\n  private readonly TRAIL_DURATION_MS = 100;\r\n\r\n  private readonly MAX_TRAIL_POINTS = 50;\r\n\r\n  componentDidLoad() {\r\n    this.trailCleanupIntervalId = window.setInterval(() => {\r\n      const now = Date.now();\r\n      const newTrailPoints = this.cursorTrailPoints.filter(p => now - p.timestamp < this.TRAIL_DURATION_MS);\r\n      if (newTrailPoints.length !== this.cursorTrailPoints.length) {\r\n        this.cursorTrailPoints = newTrailPoints;\r\n      }\r\n    }, 50);\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    if (this.trailCleanupIntervalId) {\r\n      window.clearInterval(this.trailCleanupIntervalId);\r\n    }\r\n  }\r\n\r\n  @Listen('pointerdown', { target: 'window', passive: true })\r\n  handleMouseDown(ev: PointerEvent) {\r\n    if (ev.pointerType === 'mouse') {\r\n      if (ev.button === KritzelMouseButton.Left) {\r\n        this.isLeftButtonDown = true;\r\n        this.cursorTrailPoints = [];\r\n      }\r\n    }\r\n\r\n    if (ev.pointerType === 'touch') {\r\n      if (this.store.state.pointers.size === 1) {\r\n        this.isLeftButtonDown = true;\r\n        this.cursorTrailPoints = [];\r\n      }\r\n    }\r\n  }\r\n\r\n  @Listen('pointermove', { target: 'window', passive: true })\r\n  handlePointerMove(ev: PointerEvent) {\r\n     if (!this.isLeftButtonDown) {\r\n      return;\r\n    }\r\n    const newPoint = { x: ev.clientX, y: ev.clientY, timestamp: Date.now() };\r\n    const updatedTrail = [newPoint, ...this.cursorTrailPoints];\r\n    if (updatedTrail.length > this.MAX_TRAIL_POINTS) {\r\n      this.cursorTrailPoints = updatedTrail.slice(0, this.MAX_TRAIL_POINTS);\r\n    } else {\r\n      this.cursorTrailPoints = updatedTrail;\r\n    }\r\n  }\r\n\r\n  @Listen('pointerup', { target: 'window', passive: true })\r\n  handlePointerUp(ev: PointerEvent) {\r\n    if (ev.pointerType === 'mouse') {\r\n      if(ev.button === KritzelMouseButton.Left){\r\n        this.isLeftButtonDown = false;\r\n        this.cursorTrailPoints = [];\r\n      }\r\n    }\r\n\r\n    if (ev.pointerType === 'touch') {\r\n      if(this.store.state.pointers.size === 0){\r\n        this.isLeftButtonDown = false;\r\n        this.cursorTrailPoints = [];\r\n      }\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        {this.cursorTrailPoints.length > 1 && (\r\n          <svg\r\n            class=\"cursor-trail-svg\"\r\n            xmlns=\"http://www.w3.org/2000/svg\"\r\n            style={{\r\n              position: 'absolute',\r\n              left: '0',\r\n              top: '0',\r\n              width: '100%',\r\n              height: '100%',\r\n              pointerEvents: 'none',\r\n              opacity: 'var(--kritzel-cursor-trail-opacity, 0.6)',\r\n              zIndex: '9000',\r\n            }}\r\n          >\r\n            {this.cursorTrailPoints.slice(1).map((point, index) => {\r\n              const prevPoint = this.cursorTrailPoints[index];\r\n              const now = Date.now();\r\n              const age = now - point.timestamp;\r\n              const progress = Math.max(0, Math.min(1, age / this.TRAIL_DURATION_MS));\r\n\r\n              if (progress >= 1) return null;\r\n\r\n              const baseStrokeWidth = Math.max(2, 15 * (1 - progress));\r\n\r\n              return (\r\n                <line\r\n                  key={`trail-segment-${point.timestamp}`}\r\n                  x1={prevPoint.x.toString()}\r\n                  y1={prevPoint.y.toString()}\r\n                  x2={point.x.toString()}\r\n                  y2={point.y.toString()}\r\n                  stroke=\"var(--kritzel-cursor-trail-color, rgb(228, 228, 228))\"\r\n                  stroke-width={baseStrokeWidth.toString()}\r\n                  stroke-linecap=\"round\"\r\n                />\r\n              );\r\n            })}\r\n          </svg>\r\n        )}\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}

package/dist/collection/components/core/kritzel-editor/kritzel-editor.css

@@ -1,24 +0,0 @@
-kritzel-editor{
-  display: flex;
-  margin: 0;
-  position: relative;
-  overflow: hidden;
-  width: 100%;
-  height: 100%;
-  align-items: center;
-  justify-content: center;
-  touch-action: manipulation;
-  user-select: none;
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  -khtml-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;           
-}
-
-
-kritzel-controls {
-  position: absolute;
-  bottom: 28px;
-}