npm - @mertdogar/phaser-procedural-walls - Versions diffs - 0.3.0 → 0.4.1 - Mend

@mertdogar/phaser-procedural-walls 0.3.0 → 0.4.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/README.md +23 -4
package/dist/WallEditor.d.ts +58 -0
package/dist/editor/assets/{index-DvPiYA-G.js → index-BIMJ5usj.js} +1298 -1298
package/dist/editor/index.html +1 -1
package/dist/index.d.ts +2 -0
package/dist/index.js +264 -35
package/package.json +11 -12

package/dist/editor/index.html CHANGED Viewed

@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Wallcraft Prototype</title>
-    <script type="module" crossorigin src="/assets/index-DvPiYA-G.js"></script>
+    <script type="module" crossorigin src="/assets/index-BIMJ5usj.js"></script>
     <link rel="stylesheet" crossorigin href="/assets/index-BVmRKDUb.css">
   </head>
   <body>

package/dist/index.d.ts CHANGED Viewed

@@ -1,4 +1,6 @@
 export { WallMapPlugin } from "./WallMapPlugin";
 export { WallMap } from "./WallMap";
+export { WallEditor } from "./WallEditor";
+export type { WallEditorCallbacks, WallEditorOptions, WallEditorState, WallEditorTool } from "./WallEditor";
 export { resolveWalls } from "./geometry";
 export type * from "./types";

package/dist/index.js CHANGED Viewed

@@ -1,9 +1,9 @@
-var g = Object.defineProperty;
-var x = (n, t, i) => t in n ? g(n, t, { enumerable: !0, configurable: !0, writable: !0, value: i }) : n[t] = i;
-var a = (n, t, i) => x(n, typeof t != "symbol" ? t + "" : t, i);
-import b from "phaser";
-import { resolveWalls as p } from "./geometry.js";
-class R {
+var m = Object.defineProperty;
+var S = (f, t, i) => t in f ? m(f, t, { enumerable: !0, configurable: !0, writable: !0, value: i }) : f[t] = i;
+var a = (f, t, i) => S(f, typeof t != "symbol" ? t + "" : t, i);
+import h from "phaser";
+import { resolveWalls as g } from "./geometry.js";
+class D {
   constructor(t, i) {
     a(this, "scene");
     a(this, "containers", []);
@@ -26,47 +26,276 @@ class R {
     this.containers = [], (t = this.bodies) == null || t.destroy(!0), this.bodies = null;
   }
   build() {
-    const { presets: t, walls: i, collide: s } = this.config, o = p(i, t);
-    s && (this.bodies = this.scene.physics.add.staticGroup());
-    for (const l of o)
-      this.containers.push(this.drawWall(l, t[l.spec.preset])), this.bodies && this.addBody(l);
+    const { presets: t, walls: i, collide: e } = this.config, n = g(i, t);
+    e && (this.bodies = this.scene.physics.add.staticGroup());
+    for (const s of n)
+      this.containers.push(this.drawWall(s, t[s.spec.preset])), this.bodies && this.addBody(s);
   }
   drawWall(t, i) {
-    const { body: s, lip: o, bodyPieces: l, lipPieces: r, windows: f, sills: w } = t, c = this.scene.add.container(0, 0), h = this.scene.add.graphics(), d = this.scene.add.graphics(), y = i.edgeWidth ?? 2;
-    for (const e of l) this.fillRect(c, h, e, i.fill, i.texture);
-    for (const e of r) this.fillRect(c, h, e, i.lipFill ?? i.fill, i.lipTexture);
-    const u = i.windowFill ?? 4030344;
-    for (const e of f)
-      h.fillStyle(u, i.windowAlpha ?? 0.5), h.fillRect(e.x, e.y, e.w, e.h);
-    c.add(h);
-    for (const e of w) this.fillRect(c, d, e, i.fill, i.texture);
-    for (const e of w) d.lineStyle(1, i.edge).lineBetween(e.x, e.y, e.x + e.w, e.y);
+    const { body: e, lip: n, bodyPieces: s, lipPieces: l, windows: c, sills: r } = t, d = this.scene.add.container(0, 0), u = this.scene.add.graphics(), w = this.scene.add.graphics(), x = i.edgeWidth ?? 2;
+    for (const o of s) this.fillRect(d, u, o, i.fill, i.texture);
+    for (const o of l) this.fillRect(d, u, o, i.lipFill ?? i.fill, i.lipTexture);
+    const y = i.windowFill ?? 4030344;
+    for (const o of c)
+      u.fillStyle(y, i.windowAlpha ?? 0.5), u.fillRect(o.x, o.y, o.w, o.h);
+    d.add(u);
+    for (const o of r) this.fillRect(d, w, o, i.fill, i.texture);
+    for (const o of r) w.lineStyle(1, i.edge).lineBetween(o.x, o.y, o.x + o.w, o.y);
     if (i.windowFrame !== void 0)
-      for (const e of f) d.lineStyle(1, i.windowFrame).strokeRect(e.x, e.y, e.w, e.h);
-    return d.lineStyle(y, i.edge), d.strokeRect(s.x, s.y, s.w, s.h), o && d.lineStyle(y, i.edge).strokeRect(o.x, o.y, o.w, o.h), c.add(d), c.setDepth(t.depth), c;
+      for (const o of c) w.lineStyle(1, i.windowFrame).strokeRect(o.x, o.y, o.w, o.h);
+    return w.lineStyle(x, i.edge), w.strokeRect(e.x, e.y, e.w, e.h), n && w.lineStyle(x, i.edge).strokeRect(n.x, n.y, n.w, n.h), d.add(w), d.setDepth(t.depth), d;
   }
-  fillRect(t, i, s, o, l) {
-    if (!l) {
-      i.fillStyle(o).fillRect(s.x, s.y, s.w, s.h);
+  fillRect(t, i, e, n, s) {
+    if (!s) {
+      i.fillStyle(n).fillRect(e.x, e.y, e.w, e.h);
       return;
     }
-    const r = this.scene.add.tileSprite(s.x + s.w / 2, s.y + s.h / 2, s.w, s.h, l);
-    r.setTilePosition(s.x, s.y), t.add(r);
+    const l = this.scene.add.tileSprite(e.x + e.w / 2, e.y + e.h / 2, e.w, e.h, s);
+    l.setTilePosition(e.x, e.y), t.add(l);
   }
   addBody(t) {
-    const { collider: i } = t, s = this.scene.add.zone(i.x + i.w / 2, i.y + i.h / 2, i.w, i.h);
-    this.scene.physics.add.existing(s, !0), this.bodies.add(s);
+    const { collider: i } = t, e = this.scene.add.zone(i.x + i.w / 2, i.y + i.h / 2, i.w, i.h);
+    this.scene.physics.add.existing(e, !0), this.bodies.add(e);
   }
 }
-class P extends b.Plugins.ScenePlugin {
-  constructor(t, i, s) {
-    super(t, i, s), typeof t.add.wallMap != "function" && i.registerGameObject("wallMap", function(o) {
-      return new R(this.scene, o);
+class M extends h.Plugins.ScenePlugin {
+  constructor(t, i, e) {
+    super(t, i, e), typeof t.add.wallMap != "function" && i.registerGameObject("wallMap", function(n) {
+      return new D(this.scene, n);
     });
   }
 }
+class P {
+  constructor(t, i) {
+    a(this, "configData");
+    a(this, "selectedIndex");
+    a(this, "tool");
+    a(this, "enabled");
+    a(this, "camera");
+    a(this, "gridSize");
+    a(this, "overlay");
+    a(this, "callbacks");
+    a(this, "newWall");
+    a(this, "drawStart", null);
+    a(this, "pointerPosition", null);
+    a(this, "anchorDrag", null);
+    a(this, "windowDrag", null);
+    a(this, "wallDrag", null);
+    a(this, "wallPreview", null);
+    var e;
+    if (this.scene = t, this.gridSize = i.gridSize ?? 32, !Number.isFinite(this.gridSize) || this.gridSize <= 0) throw new Error("gridSize must be positive and finite");
+    this.camera = i.camera ?? t.cameras.main, this.configData = i.config, this.selectedIndex = i.selectedIndex, this.tool = i.tool, this.enabled = i.enabled ?? !0, this.callbacks = i, this.newWall = { ...i.newWall, thickness: ((e = i.newWall) == null ? void 0 : e.thickness) ?? 16 }, this.overlay = t.add.graphics().setDepth(i.overlayDepth ?? 1e4), t.input.on("pointerdown", this.handlePointerDown, this), t.input.on("pointermove", this.handlePointerMove, this), t.input.on("pointerup", this.handlePointerUp, this), t.input.on("pointerupoutside", this.handlePointerUp, this), t.events.once("shutdown", this.destroy, this), this.refresh();
+  }
+  setState(t) {
+    (t.config !== this.configData || t.selectedIndex !== this.selectedIndex || t.tool !== this.tool || (t.enabled ?? !0) !== this.enabled) && this.cancel(), this.configData = t.config, this.selectedIndex = t.selectedIndex, this.tool = t.tool, this.enabled = t.enabled ?? !0, this.refresh();
+  }
+  setNewWall(t) {
+    this.newWall = { ...t, thickness: t.thickness ?? 16 };
+  }
+  get dragging() {
+    return !!(this.drawStart || this.anchorDrag || this.windowDrag || this.wallDrag);
+  }
+  cancel() {
+    var t;
+    this.drawStart = null, this.pointerPosition = null, this.anchorDrag = null, this.windowDrag = null, this.wallDrag = null, (t = this.wallPreview) == null || t.destroy(), this.wallPreview = null, this.scene.input.setDefaultCursor("default"), this.refresh();
+  }
+  destroy() {
+    this.cancel(), this.scene.input.off("pointerdown", this.handlePointerDown, this), this.scene.input.off("pointermove", this.handlePointerMove, this), this.scene.input.off("pointerup", this.handlePointerUp, this), this.scene.input.off("pointerupoutside", this.handlePointerUp, this), this.scene.events.off("shutdown", this.destroy, this), this.scene.input.setDefaultCursor("default"), this.overlay.destroy();
+  }
+  handlePointerDown(t) {
+    if (!this.enabled || !t.leftButtonDown()) return;
+    t.updateWorldPoint(this.camera);
+    const i = this.snapPoint(t.worldX, t.worldY);
+    if (this.tool === "select") {
+      const e = this.findAnchor(t.worldX, t.worldY);
+      if (e && this.selectedIndex !== null) {
+        this.anchorDrag = {
+          index: this.selectedIndex,
+          endpoint: e,
+          wall: { ...this.configData.walls[this.selectedIndex] }
+        }, this.scene.input.setDefaultCursor("grabbing");
+        return;
+      }
+      const n = this.findWindow(t.worldX, t.worldY);
+      if (n !== null && this.selectedIndex !== null) {
+        this.windowDrag = {
+          index: this.selectedIndex,
+          windowIndex: n,
+          wall: { ...this.configData.walls[this.selectedIndex] }
+        }, this.scene.input.setDefaultCursor("grabbing");
+        return;
+      }
+      if (this.selectedIndex !== null && this.onSelectedLine(t.worldX, t.worldY)) {
+        const s = this.configData.walls[this.selectedIndex];
+        this.wallDrag = { index: this.selectedIndex, wall: s, start: new h.Math.Vector2(t.worldX, t.worldY), preview: s }, this.scene.input.setDefaultCursor("grabbing");
+        return;
+      }
+      this.callbacks.onSelectWall(this.findWall(t.worldX, t.worldY));
+      return;
+    }
+    this.drawStart = i, this.pointerPosition = i.clone(), this.refresh();
+  }
+  handlePointerMove(t) {
+    if (this.enabled) {
+      if (t.updateWorldPoint(this.camera), this.wallDrag && t.isDown) {
+        const i = this.wallDrag;
+        i.preview = this.moveWall(i, t.worldX, t.worldY), this.wallPreview ?? (this.wallPreview = new D(this.scene, { presets: this.configData.presets, walls: [i.wall] }));
+        for (const e of this.wallPreview.containers)
+          e.setPosition(i.preview.x1 - i.wall.x1, i.preview.y1 - i.wall.y1).setAlpha(0.65).setDepth(this.overlay.depth - 1);
+        this.refresh();
+        return;
+      }
+      if (this.windowDrag && t.isDown) {
+        this.windowDrag.wall = this.moveWindow(
+          this.windowDrag.wall,
+          this.windowDrag.windowIndex,
+          t.worldX,
+          t.worldY
+        ), this.refresh();
+        return;
+      }
+      if (this.anchorDrag && t.isDown) {
+        this.anchorDrag.wall = this.moveEndpoint(
+          this.anchorDrag.wall,
+          this.anchorDrag.endpoint,
+          this.snapPoint(t.worldX, t.worldY)
+        ), this.refresh();
+        return;
+      }
+      if (this.tool === "select" && !t.isDown)
+        if (this.findWindow(t.worldX, t.worldY) !== null && this.selectedIndex !== null) {
+          const e = this.configData.walls[this.selectedIndex];
+          this.scene.input.setDefaultCursor(e.y1 === e.y2 ? "ew-resize" : "ns-resize");
+        } else
+          this.scene.input.setDefaultCursor(this.findAnchor(t.worldX, t.worldY) || this.onSelectedLine(t.worldX, t.worldY) ? "grab" : "default");
+      !this.drawStart || !t.isDown || (this.pointerPosition = this.axisLock(this.drawStart, this.snapPoint(t.worldX, t.worldY)), this.refresh());
+    }
+  }
+  handlePointerUp(t) {
+    if (!this.enabled) return;
+    if (t.updateWorldPoint(this.camera), this.wallDrag) {
+      const n = this.wallDrag, s = this.moveWall(n, t.worldX, t.worldY);
+      this.cancel(), (s.x1 !== n.wall.x1 || s.y1 !== n.wall.y1) && this.callbacks.onUpdateWall(n.index, { x1: s.x1, y1: s.y1, x2: s.x2, y2: s.y2 });
+      return;
+    }
+    if (this.windowDrag) {
+      const n = this.windowDrag, s = this.moveWindow(n.wall, n.windowIndex, t.worldX, t.worldY);
+      this.windowDrag = null, this.scene.input.setDefaultCursor("default"), this.callbacks.onUpdateWall(n.index, { windows: s.windows }), this.refresh();
+      return;
+    }
+    if (this.anchorDrag) {
+      const n = this.anchorDrag, s = this.moveEndpoint(
+        n.wall,
+        n.endpoint,
+        this.snapPoint(t.worldX, t.worldY)
+      );
+      this.anchorDrag = null, this.scene.input.setDefaultCursor("default"), h.Math.Distance.Between(s.x1, s.y1, s.x2, s.y2) >= this.gridSize && this.callbacks.onUpdateWall(n.index, {
+        x1: s.x1,
+        y1: s.y1,
+        x2: s.x2,
+        y2: s.y2
+      }), this.refresh();
+      return;
+    }
+    if (!this.drawStart) return;
+    const i = this.axisLock(this.drawStart, this.snapPoint(t.worldX, t.worldY)), e = this.drawStart;
+    if (this.drawStart = null, this.pointerPosition = null, h.Math.Distance.Between(e.x, e.y, i.x, i.y) >= this.gridSize) {
+      const n = this.newWall.preset ?? (Object.hasOwn(this.configData.presets, "interior") ? "interior" : Object.keys(this.configData.presets)[0]);
+      if (!n || !Object.hasOwn(this.configData.presets, n)) throw new Error("Choose an existing wall preset before drawing");
+      this.callbacks.onAddWall({
+        x1: e.x,
+        y1: e.y,
+        x2: i.x,
+        y2: i.y,
+        ...this.newWall,
+        preset: n
+      });
+    }
+    this.refresh();
+  }
+  refresh() {
+    var i, e, n, s;
+    if (!this.overlay || (this.overlay.clear(), !this.enabled)) return;
+    const t = ((i = this.wallDrag) == null ? void 0 : i.preview) ?? ((e = this.windowDrag) == null ? void 0 : e.wall) ?? ((n = this.anchorDrag) == null ? void 0 : n.wall) ?? (this.selectedIndex === null ? null : this.configData.walls[this.selectedIndex]);
+    if (t) {
+      const l = 8 / this.camera.zoom;
+      this.overlay.lineStyle(4, 2980428, 1).lineBetween(t.x1, t.y1, t.x2, t.y2), this.overlay.fillStyle(16777215, 1).fillCircle(t.x1, t.y1, l).fillCircle(t.x2, t.y2, l), this.overlay.lineStyle(3 / this.camera.zoom, 2980428, 1).strokeCircle(t.x1, t.y1, l).strokeCircle(t.x2, t.y2, l);
+      for (const [c, r] of this.getWindowRects(t).entries()) {
+        const d = ((s = this.windowDrag) == null ? void 0 : s.windowIndex) === c;
+        this.overlay.fillStyle(d ? 2980428 : 16777215, d ? 0.35 : 0.75).fillRect(r.x, r.y, r.w, r.h), this.overlay.lineStyle(3, 2980428, 1).strokeRect(r.x, r.y, r.w, r.h);
+      }
+    }
+    this.drawStart && this.pointerPosition && (this.overlay.lineStyle(4, 14916150, 0.95).lineBetween(
+      this.drawStart.x,
+      this.drawStart.y,
+      this.pointerPosition.x,
+      this.pointerPosition.y
+    ), this.overlay.fillStyle(14916150).fillCircle(this.drawStart.x, this.drawStart.y, 5));
+  }
+  findWall(t, i) {
+    let e = null;
+    for (const [n, s] of this.configData.walls.entries()) {
+      const l = s.x1 === s.x2 ? Math.hypot(t - s.x1, i - h.Math.Clamp(i, Math.min(s.y1, s.y2), Math.max(s.y1, s.y2))) : Math.hypot(t - h.Math.Clamp(t, Math.min(s.x1, s.x2), Math.max(s.x1, s.x2)), i - s.y1);
+      l <= s.thickness / 2 + 10 / this.camera.zoom && (!e || l < e.distance) && (e = { index: n, distance: l });
+    }
+    return (e == null ? void 0 : e.index) ?? null;
+  }
+  onSelectedLine(t, i) {
+    const e = this.selectedIndex === null ? void 0 : this.configData.walls[this.selectedIndex];
+    if (!e) return !1;
+    const n = e.y1 === e.y2, s = n ? t : i, l = n ? e.x1 : e.y1, c = n ? e.x2 : e.y2;
+    return s >= Math.min(l, c) && s <= Math.max(l, c) && Math.abs(n ? i - e.y1 : t - e.x1) <= 6 / this.camera.zoom;
+  }
+  moveWall(t, i, e) {
+    const n = Math.round((i - t.start.x) / this.gridSize) * this.gridSize, s = Math.round((e - t.start.y) / this.gridSize) * this.gridSize, l = t.wall;
+    return { ...l, x1: l.x1 + n, y1: l.y1 + s, x2: l.x2 + n, y2: l.y2 + s };
+  }
+  findAnchor(t, i) {
+    if (this.selectedIndex === null) return null;
+    const e = this.configData.walls[this.selectedIndex];
+    if (!e) return null;
+    const n = h.Math.Distance.Between(t, i, e.x1, e.y1), s = h.Math.Distance.Between(t, i, e.x2, e.y2);
+    return Math.min(n, s) > 16 / this.camera.zoom ? null : n <= s ? "start" : "end";
+  }
+  findWindow(t, i) {
+    if (this.selectedIndex === null) return null;
+    const e = this.configData.walls[this.selectedIndex];
+    if (!e) return null;
+    const n = 10 / this.camera.zoom, s = this.getWindowRects(e).findIndex((l) => t >= l.x - n && t <= l.x + l.w + n && i >= l.y - n && i <= l.y + l.h + n);
+    return s === -1 ? null : s;
+  }
+  getWindowRects(t) {
+    var i;
+    return ((i = g([t], this.configData.presets)[0]) == null ? void 0 : i.windows) ?? [];
+  }
+  moveWindow(t, i, e, n) {
+    var y;
+    const s = ((y = t.windows) == null ? void 0 : y.map((o) => ({ ...o }))) ?? [], l = s[i];
+    if (!l) return t;
+    const c = t.y1 === t.y2, r = c ? Math.sign(t.x2 - t.x1) || 1 : Math.sign(t.y2 - t.y1) || 1, d = c ? (e - t.x1) * r : (n - t.y1) * r, u = Math.abs(t.x2 - t.x1) + Math.abs(t.y2 - t.y1), w = Math.max(0, u - l.width), x = h.Math.Clamp(
+      Math.round((d - l.width / 2) / this.gridSize) * this.gridSize,
+      0,
+      w
+    );
+    return s[i] = { ...l, offset: x }, { ...t, windows: s };
+  }
+  moveEndpoint(t, i, e) {
+    const n = i === "start" ? new h.Math.Vector2(t.x2, t.y2) : new h.Math.Vector2(t.x1, t.y1), s = this.axisLock(n, e);
+    return i === "start" ? { ...t, x1: s.x, y1: s.y } : { ...t, x2: s.x, y2: s.y };
+  }
+  snapPoint(t, i) {
+    return new h.Math.Vector2(
+      Math.round(t / this.gridSize) * this.gridSize,
+      Math.round(i / this.gridSize) * this.gridSize
+    );
+  }
+  axisLock(t, i) {
+    return Math.abs(i.x - t.x) >= Math.abs(i.y - t.y) ? new h.Math.Vector2(i.x, t.y) : new h.Math.Vector2(t.x, i.y);
+  }
+}
 export {
-  R as WallMap,
-  P as WallMapPlugin,
-  p as resolveWalls
+  P as WallEditor,
+  D as WallMap,
+  M as WallMapPlugin,
+  g as resolveWalls
 };

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@mertdogar/phaser-procedural-walls",
-  "version": "0.3.0",
+  "version": "0.4.1",
   "description": "Phaser 4 scene plugin that renders procedural top-down walls with faces, see-through windows, depth sorting and Arcade colliders from wall centerline data.",
   "keywords": [
     "phaser",
@@ -53,16 +53,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build && tsc -p tsconfig.lib.json && vite build --mode editor",
-    "editor": "node bin/cli.mjs editor",
-    "test:cli": "node --test tests/cli.test.mjs",
-    "test": "vitest run",
-    "typecheck": "tsc --noEmit",
-    "lint": "oxlint src demo tests bin",
-    "prepublishOnly": "pnpm typecheck && pnpm lint && pnpm test && pnpm build && pnpm test:cli"
-  },
   "peerDependencies": {
     "phaser": "^4.0.0"
   },
@@ -88,5 +78,14 @@
     "react-dom": "^19.3.0",
     "react-resizable-panels": "^4.12.4",
     "tailwind-merge": "^3.7.0"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build && tsc -p tsconfig.lib.json && vite build --mode editor",
+    "editor": "node bin/cli.mjs editor",
+    "test:cli": "node --test tests/cli.test.mjs",
+    "test": "vitest run",
+    "typecheck": "tsc --noEmit",
+    "lint": "oxlint src demo tests bin"
   }
-}
+}