@canvasengine/presets 2.0.0-beta.4 → 2.0.0-beta.40

package/package.json

@@ -1,29 +1,54 @@
 {
   "name": "@canvasengine/presets",
-  "version": "2.0.0-beta.4",
+  "version": "2.0.0-beta.40",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
-  "keywords": [],
-  "author": "",
-  "license": "ISC",
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "canvasengine": "^2.0.0-beta.24",
+    "pixi.js": "^8.9.2"
+  },
+  "devDependencies": {
+    "typescript": "^5.6.2",
+    "vite": "^5.4.4",
+    "vite-plugin-dts": "^4.5.4"
+  },
+  "author": "Samuel Ronce",
+  "license": "MIT",
+  "homepage": "https://canvasengine.net",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/RSamaium/CanvasEngine.git"
+  },
+  "bugs": {
+    "url": "https://github.com/RSamaium/CanvasEngine/issues"
+  },
+  "keywords": [
+    "canvas",
+    "pixijs",
+    "reactive",
+    "html5",
+    "presets"
+  ],
   "dependencies": {
-    "pixi.js": "^8.6.4",
+    "@canvasengine/tilemap": "^5.0.1",
     "revolt-fx": "^1.3.5",
-    "@pixi/tilemap": "^5.0.1",
-    "@rpgjs/tiled": "^4.3.0",
-    "canvasengine": "2.0.0-beta.4"
+    "rxjs": "^7.8.1",
+    "@canvasengine/tiled": "2.0.0-beta.40"
   },
   "publishConfig": {
     "access": "public"
   },
   "overrides": {
     "revolt-fx": {
-      "pixi.js": "^8.6.4"
+      "pixi.js": "^8.9.2"
     }
   },
   "scripts": {
-    "build": "tsup",
-    "dev": "tsup --watch"
+    "build": "vite build",
+    "dev": "vite build --watch"
   }
 }

package/src/Bar.ts

@@ -1,87 +0,0 @@
-import { Graphics, h, useProps } from "canvasengine";
-import * as PIXI from "pixi.js";
-
-interface BarProps {
-  backgroundColor?: string;
-  foregroundColor?: string;
-  value: number;
-  maxValue: number;
-  width: number;
-  height: number;
-}
-
-function componentToHex(c) {
-  var hex = c.toString(16);
-  return hex.length == 1 ? "0" + hex : hex;
-}
-
-function rgbToHex(r, g, b) {
-  return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
-}
-
-export function Bar(opts: BarProps) {
-  const {
-    width,
-    height,
-    value,
-    maxValue,
-    backgroundColor,
-    foregroundColor,
-    border,
-    innerMargin,
-    borderRadius,
-  } = useProps(opts, {
-    backgroundColor: "#000000",
-    foregroundColor: "#FFFFFF",
-    innerMargin: 0,
-    borderRadius: 0,
-  });
-
-  return h(
-    Graphics,
-    {
-      ...opts,
-      width,
-      height,
-      draw(g: PIXI.Graphics) {
-        if (borderRadius()) {
-          g.roundRect(0, 0, width(), height(), borderRadius());
-        } else {
-          g.rect(0, 0, width(), height());
-        }
-        if (border) {
-          g.stroke(border);
-        }
-        g.fill(backgroundColor());
-      },
-    },
-    h(Graphics, {
-      width,
-      height,
-      draw(g: PIXI.Graphics) {
-        const margin = innerMargin();
-        const _borderRadius = borderRadius();
-        const w = Math.max(
-          0,
-          Math.min(
-            width() - 2 * margin,
-            (value() / maxValue()) * (width() - 2 * margin)
-          )
-        );
-        const h = height() - 2 * margin;
-        if (borderRadius) {
-          g.roundRect(margin, margin, w, h, _borderRadius);
-        } else {
-          g.rect(margin, margin, w, h);
-        }
-        const color = foregroundColor();
-        if (color.startsWith("rgba")) {
-          const [r, g, b, a] = color.match(/\d+(\.\d+)?/g).map(Number);
-          g.fill({ color: rgbToHex(r, g, b), alpha: a });
-        } else {
-          g.fill(color);
-        }
-      },
-    })
-  );
-}

package/src/DrawMap/index.ts

@@ -1,60 +0,0 @@
-import { effect, signal, loop, h, Container, Sprite, useProps } from "canvasengine";
-
-interface TileData {
-  id: number;
-  rect: [number, number, number, number];
-  drawIn: [number, number];
-  layerIndex: number;
-}
-
-export function ImageMap(props) {
-  const { imageSource, tileData } = useProps(props);
-  const tiles = signal<TileData[]>([]);
-
-  effect(async () => {
-    const data = await fetch(tileData()).then((response) => response.json());
-    const objects = data;
-    if (props.objects) {
-      objects.push(...props.objects(data));
-    }
-    tiles.set(objects);
-  });
-
-  const createLayeredTiles = () => {
-    const layers = [createTileLayer(0), createTileLayer(1, true), createTileLayer(2)];
-
-    return h(Container, props, ...layers);
-  };
-
-  const createTileLayer = (layerIndex: number, sortableChildren = false) => {
-    return h(
-      Container,
-      {
-        sortableChildren,
-      },
-      loop(tiles, (object) => {
-
-        if (object.tag && layerIndex == 1) {
-            return object
-        }
-
-        object.layerIndex ||= 1;
-        if (object.layerIndex !== layerIndex) return null;
-
-        const [x, y, width, height] = object.rect;
-        const [drawX, drawY] = object.drawIn;
-
-        return h(Sprite, {
-          image: imageSource(),
-          x: drawX,
-          y: drawY,
-          rectangle: { x, y, width, height },
-          zIndex: drawY + height - 70,
-        // zIndex: 0
-        });
-      })
-    );
-  };
-
-  return createLayeredTiles();
-}

package/src/Joystick.ts

@@ -1,284 +0,0 @@
-/*
- * Joystick
- *
- * Inspired by https://github.com/endel/pixi-virtual-joystick
- */
-
-import * as PIXI from "pixi.js";
-import { Container, Graphics, Sprite, h, signal } from "canvasengine";
-
-export interface JoystickChangeEvent {
-  angle: number;
-  direction: Direction;
-  power: number;
-}
-
-export enum Direction {
-  LEFT = "left",
-  TOP = "top",
-  BOTTOM = "bottom",
-  RIGHT = "right",
-  TOP_LEFT = "top_left",
-  TOP_RIGHT = "top_right",
-  BOTTOM_LEFT = "bottom_left",
-  BOTTOM_RIGHT = "bottom_right",
-}
-
-export interface JoystickSettings {
-  outer?: string;
-  inner?: string;
-  outerScale?: { x: number; y: number };
-  innerScale?: { x: number; y: number };
-  onChange?: (data: JoystickChangeEvent) => void;
-  onStart?: () => void;
-  onEnd?: () => void;
-}
-
-export function Joystick(opts: JoystickSettings = {}) {
-  const settings = Object.assign(
-    {
-      outerScale: { x: 1, y: 1 },
-      innerScale: { x: 1, y: 1 },
-    },
-    opts
-  );
-
-  let outerRadius = 70;
-  let innerRadius = 10;
-  const innerAlphaStandby = 0.5;
-
-  let dragging = false;
-  let startPosition: PIXI.PointData | null = null;
-  let power = 0;
-
-  const innerPositionX = signal(0);
-  const innerPositionY = signal(0);
-  const innerAlpha = signal(innerAlphaStandby);
-
-  function getPower(centerPoint: PIXI.Point) {
-    const a = centerPoint.x - 0;
-    const b = centerPoint.y - 0;
-    return Math.min(1, Math.sqrt(a * a + b * b) / outerRadius);
-  }
-
-  function getDirection(center: PIXI.Point) {
-    let rad = Math.atan2(center.y, center.x); // [-PI, PI]
-    if ((rad >= -Math.PI / 8 && rad < 0) || (rad >= 0 && rad < Math.PI / 8)) {
-      return Direction.RIGHT;
-    } else if (rad >= Math.PI / 8 && rad < (3 * Math.PI) / 8) {
-      return Direction.BOTTOM_RIGHT;
-    } else if (rad >= (3 * Math.PI) / 8 && rad < (5 * Math.PI) / 8) {
-      return Direction.BOTTOM;
-    } else if (rad >= (5 * Math.PI) / 8 && rad < (7 * Math.PI) / 8) {
-      return Direction.BOTTOM_LEFT;
-    } else if (
-      (rad >= (7 * Math.PI) / 8 && rad < Math.PI) ||
-      (rad >= -Math.PI && rad < (-7 * Math.PI) / 8)
-    ) {
-      return Direction.LEFT;
-    } else if (rad >= (-7 * Math.PI) / 8 && rad < (-5 * Math.PI) / 8) {
-      return Direction.TOP_LEFT;
-    } else if (rad >= (-5 * Math.PI) / 8 && rad < (-3 * Math.PI) / 8) {
-      return Direction.TOP;
-    } else {
-      return Direction.TOP_RIGHT;
-    }
-  }
-
-  function handleDragStart(event: PIXI.FederatedPointerEvent) {
-    startPosition = event.getLocalPosition(this);
-    dragging = true;
-    innerAlpha.set(1);
-    settings.onStart?.();
-  }
-
-  function handleDragEnd() {
-    if (!dragging) return;
-    innerPositionX.set(0);
-    innerPositionY.set(0);
-    dragging = false;
-    innerAlpha.set(innerAlphaStandby);
-    settings.onEnd?.();
-  }
-
-  function handleDragMove(event: PIXI.FederatedPointerEvent) {
-    if (dragging == false) {
-      return;
-    }
-
-    let newPosition = event.getLocalPosition(this);
-
-    let sideX = newPosition.x - (startPosition?.x ?? 0);
-    let sideY = newPosition.y - (startPosition?.y ?? 0);
-
-    let centerPoint = new PIXI.Point(0, 0);
-    let angle = 0;
-
-    if (sideX == 0 && sideY == 0) {
-      return;
-    }
-
-    let calRadius = 0;
-
-    if (sideX * sideX + sideY * sideY >= outerRadius * outerRadius) {
-      calRadius = outerRadius;
-    } else {
-      calRadius = outerRadius - innerRadius;
-    }
-
-    /**
-     * x:   -1 <-> 1
-     * y:   -1 <-> 1
-     *          Y
-     *          ^
-     *          |
-     *     180  |  90
-     *    ------------> X
-     *     270  |  360
-     *          |
-     *          |
-     */
-
-    let direction = Direction.LEFT;
-
-    if (sideX == 0) {
-      if (sideY > 0) {
-        centerPoint.set(0, sideY > outerRadius ? outerRadius : sideY);
-        angle = 270;
-        direction = Direction.BOTTOM;
-      } else {
-        centerPoint.set(
-          0,
-          -(Math.abs(sideY) > outerRadius ? outerRadius : Math.abs(sideY))
-        );
-        angle = 90;
-        direction = Direction.TOP;
-      }
-      innerPositionX.set(centerPoint.x);
-      innerPositionY.set(centerPoint.y);
-      power = getPower(centerPoint);
-      settings.onChange?.({ angle, direction, power });
-      return;
-    }
-
-    if (sideY == 0) {
-      if (sideX > 0) {
-        centerPoint.set(
-          Math.abs(sideX) > outerRadius ? outerRadius : Math.abs(sideX),
-          0
-        );
-        angle = 0;
-        direction = Direction.LEFT;
-      } else {
-        centerPoint.set(
-          -(Math.abs(sideX) > outerRadius ? outerRadius : Math.abs(sideX)),
-          0
-        );
-        angle = 180;
-        direction = Direction.RIGHT;
-      }
-
-      innerPositionX.set(centerPoint.x);
-      innerPositionY.set(centerPoint.y);
-      power = getPower(centerPoint);
-      settings.onChange?.({ angle, direction, power });
-      return;
-    }
-
-    let tanVal = Math.abs(sideY / sideX);
-    let radian = Math.atan(tanVal);
-    angle = (radian * 180) / Math.PI;
-
-    let centerX = 0;
-    let centerY = 0;
-
-    if (sideX * sideX + sideY * sideY >= outerRadius * outerRadius) {
-      centerX = outerRadius * Math.cos(radian);
-      centerY = outerRadius * Math.sin(radian);
-    } else {
-      centerX = Math.abs(sideX) > outerRadius ? outerRadius : Math.abs(sideX);
-      centerY = Math.abs(sideY) > outerRadius ? outerRadius : Math.abs(sideY);
-    }
-
-    if (sideY < 0) {
-      centerY = -Math.abs(centerY);
-    }
-    if (sideX < 0) {
-      centerX = -Math.abs(centerX);
-    }
-
-    if (sideX > 0 && sideY < 0) {
-      // < 90
-    } else if (sideX < 0 && sideY < 0) {
-      // 90 ~ 180
-      angle = 180 - angle;
-    } else if (sideX < 0 && sideY > 0) {
-      // 180 ~ 270
-      angle = angle + 180;
-    } else if (sideX > 0 && sideY > 0) {
-      // 270 ~ 369
-      angle = 360 - angle;
-    }
-    centerPoint.set(centerX, centerY);
-    power = getPower(centerPoint);
-
-    direction = getDirection(centerPoint);
-    innerPositionX.set(centerPoint.x);
-    innerPositionY.set(centerPoint.y);
-
-    settings.onChange?.({ angle, direction, power });
-  }
-
-  let innerElement;
-  let outerElement;
-
-  if (!settings.outer) {
-    outerElement = h(Graphics, {
-      draw: (g) => {
-        g.circle(0, 0, outerRadius).fill(0x000000);
-      },
-      alpha: 0.5,
-    });
-  } else {
-    outerElement = h(Sprite, {
-      image: settings.outer,
-      anchor: { x: 0.5, y: 0.5 },
-      scale: settings.outerScale,
-    });
-  }
-
-  const innerOptions: any = {
-    scale: settings.innerScale,
-    x: innerPositionX,
-    y: innerPositionY,
-    alpha: innerAlpha,
-  };
-
-  if (!settings.inner) {
-    innerElement = h(Graphics, {
-      draw: (g) => {
-        g.circle(0, 0, innerRadius * 2.5).fill(0x000000);
-      },
-      ...innerOptions,
-    });
-  } else {
-    innerElement = h(Sprite, {
-      image: settings.inner,
-      anchor: { x: 0.5, y: 0.5 },
-      ...innerOptions,
-    });
-  }
-
-  return h(
-    Container,
-    {
-      ...opts,
-      pointerdown: handleDragStart,
-      pointerup: handleDragEnd,
-      pointerupoutside: handleDragEnd,
-      pointermove: handleDragMove,
-    },
-    outerElement,
-    innerElement
-  );
-}

package/src/NightAmbiant.ts

@@ -1,116 +0,0 @@
-import { Container, Graphics, h, mount, useProps, animatedSignal, RadialGradient, effect, isSignal, signal, isObservable } from "canvasengine";
-
-export function LightSpot(opts) {
-  const { radius } = useProps(opts);
-  const scale = animatedSignal(1);
-
-  const minScale = 1;
-  const maxScale = 2; // Reduced max scale for subtler effect
-  const scintillationSpeed = 0.001; // Significantly reduced for slower scintillation
-
-  const animate = () => {
-    // Use time-based animation for smoother, slower scintillation
-    const time = Date.now() * scintillationSpeed;
-
-    // Combine multiple sine waves for a more natural, less predictable effect
-    const scintillationFactor =
-      (Math.sin(time) + Math.sin(time * 1.3) + Math.sin(time * 0.7)) / 3;
-
-    // Map the scintillation factor to the scale range
-    const newScale =
-      minScale + (maxScale - minScale) * (scintillationFactor * 0.5 + 0.5);
-
-    scale.update(() => newScale);
-
-    requestAnimationFrame(animate);
-  };
-
-  animate();
-
-  const draw = (g) => {
-    const size = radius() * 2;
-    const gradient = new RadialGradient(size, size, 0, size, size, 0);
-    gradient.addColorStop(0, "rgba(255, 255, 0, 1)");
-    gradient.addColorStop(0.5, "rgba(255, 255, 0, 0.3)");
-    gradient.addColorStop(0.8, "rgba(255, 255, 0, 0)");
-
-    const translate = size / 2;
-
-    g.rect(-translate, -translate, size, size).fill(
-      gradient.render({ translate: { x: translate, y: translate } })
-    );
-  };
-
-  return h(Graphics, {
-    draw,
-    ...opts,
-    scale,
-  });
-}
-
-export function NightAmbiant(props) {
-  const { children } = props;
-  let el
-  const width = signal(0);
-  const height = signal(0);
-  let subscription
-  const draw = (rectAndHole) => {
-    const margin = 80
-    rectAndHole.rect(-margin, -margin, width() + margin*2, height() + margin*2);
-    rectAndHole.fill(0x000000);
-    const applyChildren = (child) => {
-      const x = isSignal(child.propObservables.x)
-        ? child.propObservables.x()
-        : child.props.x;
-      const y = isSignal(child.propObservables.y)
-        ? child.propObservables.y()
-        : child.props.y;
-      const radius = isSignal(child.propObservables.radius)
-        ? child.propObservables.radius()
-        : child.props.radius;
-      rectAndHole.circle(x, y, radius);
-      rectAndHole.cut();
-    }
-    for (let child of children) {
-      if (isObservable(child)) {
-        if (subscription) {
-          subscription.unsubscribe()
-        }
-        subscription = child.subscribe((event: any) => {
-           for (let child of event.fullElements) {
-            applyChildren(child)
-           }
-        })
-        return
-      }
-      applyChildren(child)
-    }
-  };
-
-  mount((el) => {
-    effect(() => {
-      const { displayWidth, displayHeight } = el.componentInstance as any
-      const w = +displayWidth()
-      const h = +displayHeight()
-      setTimeout(() => {
-        width.update(() => w)
-        height.update(() => h)
-      }, 0) // hack
-    });
-  });
-
-  return h(
-    Container,
-    {
-      width: "100%",
-      height: "100%",
-      ...props,
-    },
-    h(Graphics, {
-      draw,
-      alpha: 0.8,
-      blur: 80,
-    }),
-    ...children
-  );
-}

package/src/Particle.ts

@@ -1,50 +0,0 @@
-import * as PIXI from "pixi.js";
-import { FX } from "revolt-fx";
-import { h, mount, tick, Container, on, useProps } from "canvasengine";
-
-export function Particle(options) {
-  const { emit, settings = {} } = options;
-  const { name } = useProps(options);
-  const fx = new FX();
-  let element;
-
-  PIXI.Assets.add({ alias: "fx_settings", src: "/default-bundle.json" });
-  PIXI.Assets.add({
-    alias: "fx_spritesheet",
-    src: "/revoltfx-spritesheet.json",
-  });
-
-  tick(({deltaRatio}) => {
-    fx.update(deltaRatio);
-  });
-
-  mount(async (_element) => {
-    element = _element;
-
-    const data = await PIXI.Assets.load(["fx_settings", "fx_spritesheet"]);
-    let fxSettings = {...data.fx_settings};
-
-    if (settings.emitters) {
-      const lastId = 10000;
-      const emittersWithIds = settings.emitters.map((emitter, index) => ({
-        ...emitter,
-        id: lastId + index
-      }));
-
-      fxSettings.emitters = [
-        ...fxSettings.emitters,
-        ...emittersWithIds,
-      ];
-
-    }
-
-    fx.initBundle(fxSettings, true);
-  });
-
-  on(emit, () => {
-    const emitter = fx.getParticleEmitter(name());
-    emitter.init(element.componentInstance);
-  });
-
-  return h(Container);
-}