@shopify/klint 0.0.4 → 0.0.7

package/dist/index.d.ts

@@ -807,4 +807,4 @@ declare const useStorage: <T extends object = Record<string, unknown>>(initialPr
     store: T;
 };
 
-export { CONFIG_PROPS, EPSILON, Klint, KlintCanvasOptions, KlintConfig, KlintContext, KlintContextWrapper, KlintContexts, KlintCoreFunctions, KlintFunctions, KlintMouse, KlintOffscreenContext, KlintProps, KlintScroll, useKlint, useProps, useStorage };
+export { CONFIG_PROPS, EPSILON, Klint, type KlintCanvasOptions, type KlintConfig, type KlintContext, type KlintContextWrapper, type KlintContexts, KlintCoreFunctions, KlintFunctions, type KlintMouse, type KlintOffscreenContext, type KlintProps, type KlintScroll, useKlint, useProps, useStorage };

package/dist/index.js

@@ -43,10 +43,8 @@ function useAnimate(contextRef, draw, isVisible) {
   const animationFrameId = useRef(0);
   const animate = useCallback(
     (timestamp = 0) => {
-      if (!contextRef.current || !isVisible)
-        return;
-      if (!contextRef.current.__isReadyToDraw)
-        return;
+      if (!contextRef.current || !isVisible) return;
+      if (!contextRef.current.__isReadyToDraw) return;
       if (!contextRef.current.__isPlaying) {
         return;
       }
@@ -62,10 +60,8 @@ function useAnimate(contextRef, draw, isVisible) {
       if (sinceLast >= target - epsilon) {
         context.deltaTime = now - context.__lastRealTime;
         draw(context);
-        if (context.time > 1e7)
-          context.time = 0;
-        if (context.frame > 1e7)
-          context.frame = 0;
+        if (context.time > 1e7) context.time = 0;
+        if (context.frame > 1e7) context.frame = 0;
         context.time += context.deltaTime / DEFAULT_FPS;
         context.frame++;
         context.__lastTargetTime = now;
@@ -118,19 +114,16 @@ function Klint({
     if (__options.origin === "center") {
       context2.translate(canvas.width * 0.5, canvas.height * 0.5);
     }
-    if (shouldRedraw)
-      draw(context2);
+    if (shouldRedraw) draw(context2);
   };
   useEffect(() => {
-    if (!canvasRef.current || !containerRef.current)
-      return;
+    if (!canvasRef.current || !containerRef.current) return;
     const canvas = canvasRef.current;
     const container = containerRef.current;
     const dpr = window.devicePixelRatio || 3;
     contextRef.current = initContext ? initContext(canvas, __options) : null;
     const context2 = contextRef.current;
-    if (!context2)
-      return;
+    if (!context2) return;
     context2.__dpr = dpr;
     if (__options.fps && __options.fps !== context2.fps) {
       context2.fps = __options.fps;
@@ -153,8 +146,7 @@ function Klint({
     );
     intersectionObserverRef.current.observe(container);
     const initializeKlint = async () => {
-      if (!context2)
-        return;
+      if (!context2) return;
       const handleStaticMode = () => {
         try {
           const imageUrl = canvas.toDataURL("image/png");
@@ -168,8 +160,7 @@ function Klint({
         if (preload && (unsafeReset || !context2.__isPreloaded)) {
           try {
             await preload(context2);
-            if (!unsafeReset)
-              context2.__isPreloaded = true;
+            if (!unsafeReset) context2.__isPreloaded = true;
           } catch (error) {
             const message = error instanceof Error ? error.message : String(error);
             throw new Error(`Klint error in the preload: ${message}`);
@@ -178,8 +169,7 @@ function Klint({
         if (setup && (unsafeReset || !context2.__isSetup)) {
           try {
             setup(context2);
-            if (!unsafeReset)
-              context2.__isSetup = true;
+            if (!unsafeReset) context2.__isSetup = true;
           } catch (error) {
             const message = error instanceof Error ? error.message : String(error);
             throw new Error(`Klint error in the setup: ${message}`);
@@ -196,14 +186,12 @@ function Klint({
         }
       };
       const unsafeMode = __options.unsafemode === "true";
-      if (!unsafeMode && context2.__isReadyToDraw)
-        return;
+      if (!unsafeMode && context2.__isReadyToDraw) return;
       await initializeContext(unsafeMode);
       if (__options.static === "true") {
         handleStaticMode();
       } else {
-        if (__options.noloop !== "true")
-          animate();
+        if (__options.noloop !== "true") animate();
       }
     };
     initializeKlint();
@@ -256,19 +244,16 @@ var KlintCoreFunctions = {
     ctx.canvas.requestFullscreen?.();
   },
   play: (ctx) => () => {
-    if (!ctx.__isPlaying)
-      ctx.__isPlaying = true;
+    if (!ctx.__isPlaying) ctx.__isPlaying = true;
   },
   pause: (ctx) => () => {
-    if (ctx.__isPlaying)
-      ctx.__isPlaying = false;
+    if (ctx.__isPlaying) ctx.__isPlaying = false;
   },
   // to do
   redraw: () => () => {
   },
   extend: (ctx) => (name, data, enforceReplace = false) => {
-    if (name in ctx && !enforceReplace)
-      return;
+    if (name in ctx && !enforceReplace) return;
     ctx[name] = data;
   },
   passImage: () => (element) => {
@@ -309,8 +294,7 @@ var KlintCoreFunctions = {
       alpha: options?.alpha ?? true,
       willReadFrequently: options?.willreadfrequently ?? false
     });
-    if (!context)
-      throw new Error("Failed to create offscreen context");
+    if (!context) throw new Error("Failed to create offscreen context");
     context.__dpr = ctx.__dpr;
     context.width = width * ctx.__dpr;
     context.height = height * ctx.__dpr;
@@ -359,8 +343,7 @@ var KlintCoreFunctions = {
 };
 var KlintFunctions = {
   extend: (ctx) => (name, data, enforceReplace = false) => {
-    if (name in ctx && !enforceReplace)
-      return;
+    if (name in ctx && !enforceReplace) return;
     ctx[name] = data;
   },
   background: (ctx) => (color) => {
@@ -414,27 +397,21 @@ var KlintFunctions = {
     ctx.restore();
   },
   point: (ctx) => (x, y) => {
-    if (!ctx.checkTransparency("stroke"))
-      return;
+    if (!ctx.checkTransparency("stroke")) return;
     ctx.beginPath();
     ctx.strokeRect(x, y, 1, 1);
   },
   checkTransparency: (ctx) => (toCheck) => {
-    if (toCheck === "stroke" && ctx.strokeStyle === "transparent")
-      return false;
-    if (toCheck === "fill" && ctx.fillStyle === "transparent")
-      return false;
+    if (toCheck === "stroke" && ctx.strokeStyle === "transparent") return false;
+    if (toCheck === "fill" && ctx.fillStyle === "transparent") return false;
     return true;
   },
   drawIfVisible: (ctx) => () => {
-    if (ctx.checkTransparency("fill"))
-      ctx.fill();
-    if (ctx.checkTransparency("stroke"))
-      ctx.stroke();
+    if (ctx.checkTransparency("fill")) ctx.fill();
+    if (ctx.checkTransparency("stroke")) ctx.stroke();
   },
   line: (ctx) => (x1, y1, x2, y2) => {
-    if (!ctx.checkTransparency("stroke"))
-      return;
+    if (!ctx.checkTransparency("stroke")) return;
     ctx.beginPath();
     ctx.moveTo(x1, y1);
     ctx.lineTo(x2, y2);
@@ -480,25 +457,21 @@ var KlintFunctions = {
       const angle = i * 2 * Math.PI / sides + rotation;
       const pointX = x + radius * Math.cos(angle);
       const pointY = y + (radius2 ? radius2 : radius) * Math.sin(angle);
-      if (i === 0)
-        ctx.moveTo(pointX, pointY);
-      else
-        ctx.lineTo(pointX, pointY);
+      if (i === 0) ctx.moveTo(pointX, pointY);
+      else ctx.lineTo(pointX, pointY);
     }
     ctx.closePath();
     ctx.drawIfVisible();
   },
   beginShape: (ctx) => () => {
-    if (ctx.__startedShape)
-      return;
+    if (ctx.__startedShape) return;
     ctx.beginPath();
     ctx.__startedShape = true;
     ctx.__currentShape = [];
     ctx.__currentContours = [];
   },
   beginContour: (ctx) => () => {
-    if (!ctx.__startedShape)
-      return;
+    if (!ctx.__startedShape) return;
     if (ctx.__startedContour && ctx.__currentContour?.length) {
       ctx.__currentContours?.push([...ctx.__currentContour]);
     }
@@ -506,14 +479,12 @@ var KlintFunctions = {
     ctx.__currentContour = [];
   },
   vertex: (ctx) => (x, y) => {
-    if (!ctx.__startedShape)
-      return;
+    if (!ctx.__startedShape) return;
     const points = ctx.__startedContour ? ctx.__currentContour : ctx.__currentShape;
     points?.push([x, y]);
   },
   endContour: (ctx) => (forceRevert = true) => {
-    if (!ctx.__startedContour || !ctx.__currentContour?.length)
-      return;
+    if (!ctx.__startedContour || !ctx.__currentContour?.length) return;
     const contourPoints = [...ctx.__currentContour];
     if (forceRevert) {
       contourPoints.reverse();
@@ -523,13 +494,10 @@ var KlintFunctions = {
     ctx.__startedContour = false;
   },
   endShape: (ctx) => (close = false) => {
-    if (!ctx.__startedShape)
-      return;
-    if (ctx.__startedContour)
-      ctx.endContour();
+    if (!ctx.__startedShape) return;
+    if (ctx.__startedContour) ctx.endContour();
     const points = ctx.__currentShape;
-    if (!points?.length)
-      return;
+    if (!points?.length) return;
     const drawPath = (points2, close2 = false) => {
       ctx.moveTo(points2[0][0], points2[0][1]);
       for (let i = 1; i < points2.length; i++) {
@@ -579,8 +547,7 @@ var KlintFunctions = {
     if (mode === "fast") {
       return n - ~~(n / mod) * mod;
     }
-    if (n >= 0)
-      return n % mod;
+    if (n >= 0) return n % mod;
     return mod - -n % mod;
   },
   distance: (ctx) => (x1, y1, x2, y2, mode = "precise") => {
@@ -642,16 +609,14 @@ var KlintFunctions = {
   },
   computeFont: (ctx) => () => {
     ctx.computeTextStyle();
-    if (ctx.font !== ctx.__computedTextFont)
-      ctx.font = ctx.__computedTextFont;
+    if (ctx.font !== ctx.__computedTextFont) ctx.font = ctx.__computedTextFont;
   },
   textWidth: (ctx) => (text) => {
     ctx.computeFont();
     return ctx.measureText(text).width;
   },
   text: (ctx) => (text, x, y, maxWidth = void 0) => {
-    if (text === void 0)
-      return;
+    if (text === void 0) return;
     ctx.computeFont();
     if (ctx.textAlign !== ctx.__textAlignment.horizontal) {
       ctx.textAlign = ctx.__textAlignment.horizontal;
@@ -762,8 +727,7 @@ var KlintFunctions = {
     Object.assign(ctx, config);
   },
   resizeCanvas: (ctx) => (width, height) => {
-    if (ctx.__isMainContext)
-      return;
+    if (ctx.__isMainContext) return;
     const config = ctx.saveConfig();
     ctx.canvas.width = ctx.width = width;
     ctx.canvas.height = ctx.height = height;
@@ -863,8 +827,7 @@ function useKlint() {
     const mouseDownCallbackRef = useRef2(null);
     const mouseUpCallbackRef = useRef2(null);
     useEffect2(() => {
-      if (!contextRef.current?.canvas)
-        return;
+      if (!contextRef.current?.canvas) return;
       const canvas = contextRef.current.canvas;
       const ctx = contextRef.current;
       const updateMousePosition = (e) => {
@@ -887,32 +850,23 @@ function useKlint() {
         }
       };
       const handleMouseDown = (e) => {
-        if (mouseRef.current)
-          mouseRef.current.isPressed = true;
-        if (mouseDownCallbackRef.current)
-          mouseDownCallbackRef.current(ctx, e);
+        if (mouseRef.current) mouseRef.current.isPressed = true;
+        if (mouseDownCallbackRef.current) mouseDownCallbackRef.current(ctx, e);
       };
       const handleMouseUp = (e) => {
-        if (mouseRef.current)
-          mouseRef.current.isPressed = false;
-        if (mouseUpCallbackRef.current)
-          mouseUpCallbackRef.current(ctx, e);
+        if (mouseRef.current) mouseRef.current.isPressed = false;
+        if (mouseUpCallbackRef.current) mouseUpCallbackRef.current(ctx, e);
       };
       const handleMouseEnter = (e) => {
-        if (mouseRef.current)
-          mouseRef.current.isHover = true;
-        if (mouseInCallbackRef.current)
-          mouseInCallbackRef.current(ctx, e);
+        if (mouseRef.current) mouseRef.current.isHover = true;
+        if (mouseInCallbackRef.current) mouseInCallbackRef.current(ctx, e);
       };
       const handleMouseLeave = (e) => {
-        if (mouseRef.current)
-          mouseRef.current.isHover = false;
-        if (mouseOutCallbackRef.current)
-          mouseOutCallbackRef.current(ctx, e);
+        if (mouseRef.current) mouseRef.current.isHover = false;
+        if (mouseOutCallbackRef.current) mouseOutCallbackRef.current(ctx, e);
       };
       const handleClick = (e) => {
-        if (clickCallbackRef.current)
-          clickCallbackRef.current(ctx, e);
+        if (clickCallbackRef.current) clickCallbackRef.current(ctx, e);
       };
       canvas.addEventListener("mousemove", updateMousePosition);
       canvas.addEventListener("mousedown", handleMouseDown);
@@ -944,14 +898,12 @@ function useKlint() {
     }
     const scrollCallbackRef = useRef2(null);
     useEffect2(() => {
-      if (!contextRef.current?.canvas)
-        return;
+      if (!contextRef.current?.canvas) return;
       const canvas = contextRef.current.canvas;
       const ctx = contextRef.current;
       const handleScroll = (e) => {
         e.preventDefault();
-        if (!scrollRef.current)
-          return;
+        if (!scrollRef.current) return;
         const currentTime = performance.now();
         const deltaTime = currentTime - scrollRef.current.lastTime;
         scrollRef.current.distance += e.deltaY;
@@ -977,20 +929,16 @@ function useKlint() {
     const focusCallbackRef = useRef2(null);
     const visibilityChangeCallbackRef = useRef2(null);
     useEffect2(() => {
-      if (!contextRef.current)
-        return;
+      if (!contextRef.current) return;
       const ctx = contextRef.current;
       const handleResize = () => {
-        if (resizeCallbackRef.current)
-          resizeCallbackRef.current(ctx);
+        if (resizeCallbackRef.current) resizeCallbackRef.current(ctx);
       };
       const handleBlur = () => {
-        if (blurCallbackRef.current)
-          blurCallbackRef.current(ctx);
+        if (blurCallbackRef.current) blurCallbackRef.current(ctx);
       };
       const handleFocus = () => {
-        if (focusCallbackRef.current)
-          focusCallbackRef.current(ctx);
+        if (focusCallbackRef.current) focusCallbackRef.current(ctx);
       };
       const handleVisibilityChange = () => {
         const isVisible = document.visibilityState === "visible";
@@ -1055,8 +1003,7 @@ function useKlint() {
           alpha: options.alpha ?? true,
           willReadFrequently: options.willreadfrequently ?? true
         });
-        if (!ctx)
-          throw new Error("Failed to get canvas context");
+        if (!ctx) throw new Error("Failed to get canvas context");
         contextRef.current = buildKlintContext(ctx, options);
       }
       return contextRef.current;
@@ -1064,8 +1011,7 @@ function useKlint() {
     []
   );
   const togglePlay = useCallback2((playing) => {
-    if (!contextRef.current)
-      return;
+    if (!contextRef.current) return;
     if (playing !== void 0) {
       contextRef.current.__isPlaying = playing;
     } else {

package/dist/plugins/index.cjs

@@ -18,8 +18,8 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/plugins/index.tsx
-var plugins_exports = {};
-__export(plugins_exports, {
+var index_exports = {};
+__export(index_exports, {
   Color: () => Color_default,
   Easing: () => Easing_default,
   SVGfont: () => SVGfont_default,
@@ -29,7 +29,7 @@ __export(plugins_exports, {
   Time: () => Time_default,
   Vector: () => Vector_default
 });
-module.exports = __toCommonJS(plugins_exports);
+module.exports = __toCommonJS(index_exports);
 
 // src/plugins/Color.tsx
 var Color = class {
@@ -419,8 +419,7 @@ var Easing = class {
       const m = val - 1;
       const t = val * 2;
       const k = 1.70158 * 1.525;
-      if (val < 0.5)
-        return val * t * (t * (k + 1) - k);
+      if (val < 0.5) return val * t * (t * (k + 1) - k);
       return 1 + 2 * m * m * (2 * m * (k + 1) + k);
     };
     this.bounceOut = (val) => {
@@ -450,8 +449,7 @@ var Easing = class {
     };
     this.bounceInOut = (val) => {
       const t = val * 2;
-      if (t < 1)
-        return 0.5 - 0.5 * this.bounceOut(1 - t);
+      if (t < 1) return 0.5 - 0.5 * this.bounceOut(1 - t);
       return 0.5 + 0.5 * this.bounceOut(t - 1);
     };
     this.elasticIn = (val) => {
@@ -464,8 +462,7 @@ var Easing = class {
     this.elasticInOut = (val) => {
       const s = 2 * val - 1;
       const k = (80 * s - 9) * Math.PI / 18;
-      if (s < 0)
-        return -0.5 * Math.pow(2, 10 * s) * Math.sin(k);
+      if (s < 0) return -0.5 * Math.pow(2, 10 * s) * Math.sin(k);
       return 1 + 0.5 * Math.pow(2, -10 * s) * Math.sin(k);
     };
     this.smoothstep = (val, x0 = 0, x1 = 1) => {
@@ -596,8 +593,7 @@ var SVGfont = class {
       const glyph = this.glyphs.get(char);
       if (glyph) {
         totalWidth += glyph.horizAdvX;
-        if (i < chars.length - 1)
-          totalWidth += letterSpacing;
+        if (i < chars.length - 1) totalWidth += letterSpacing;
       }
     });
     let currentX = 0;
@@ -622,8 +618,7 @@ var SVGfont = class {
     }
     for (const char of chars) {
       const glyph = this.glyphs.get(char);
-      if (!glyph)
-        continue;
+      if (!glyph) continue;
       if (!glyph.d) {
         currentX += glyph.horizAdvX + letterSpacing;
         continue;
@@ -632,8 +627,7 @@ var SVGfont = class {
       const subpaths = glyph.d.split(/(?=[Mm])/);
       const glyphContours = [];
       for (const subpath of subpaths) {
-        if (!subpath.trim())
-          continue;
+        if (!subpath.trim()) continue;
         path.setAttribute("d", subpath);
         const pathLength = path.getTotalLength();
         const numPoints = Math.max(10, Math.floor(pathLength * factor));
@@ -738,7 +732,7 @@ var State = class {
 var State_default = State;
 
 // src/plugins/Vector.tsx
-var Vector = class {
+var Vector = class _Vector {
   /**
    * Creates a new Vector
    * @param x - X-coordinate (default: 0)
@@ -845,7 +839,7 @@ var Vector = class {
    * @returns A new Vector with the same coordinates
    */
   copy() {
-    return new Vector(this.x, this.y);
+    return new _Vector(this.x, this.y);
   }
   /**
    * Normalizes this vector (sets its magnitude to 1)
@@ -876,7 +870,7 @@ var Vector = class {
   static fromAngle(center, a, r) {
     const x = Math.cos(a) * r + center.x;
     const y = Math.sin(a) * r + center.y;
-    return new Vector(x, y);
+    return new _Vector(x, y);
   }
 };
 var Vector_default = Vector;