@tomorrowevening/hermes 0.1.39 → 0.1.41

package/dist/editor/tools/splineEditor/Spline.js

@@ -0,0 +1,348 @@
+import { Object3D as d, CatmullRomCurve3 as p, MeshBasicMaterial as g, Color as P, LineBasicMaterial as y, Line as _, BufferGeometry as u, Mesh as m, SphereGeometry as S, Raycaster as w, BoxGeometry as C, Vector3 as b, Vector2 as x } from "three/webgpu";
+import { lerp as a } from "three/src/math/MathUtils.js";
+import o from "../../multiView/MultiView.js";
+import f from "../Transform.js";
+import { copyToClipboard as k } from "../../utils.js";
+import { roundTo as h } from "../../../utils/math.js";
+import { dispose as v } from "../../../utils/three.js";
+const M = new C(), l = new x();
+class B extends d {
+  curve = new p();
+  line;
+  draggable;
+  curvePos;
+  // Variables
+  tension = 0.5;
+  closed = !1;
+  subdivide = 50;
+  curveType;
+  offset = 1;
+  lineMaterial;
+  _camera;
+  _curvePercentage = 0;
+  _draggableScale = 10;
+  _transform;
+  raycaster;
+  draggedMat = new g();
+  parentGroup;
+  group;
+  constructor(e, t) {
+    const i = new P(a(0.5, 1, Math.random()), a(0.5, 1, Math.random()), a(0.5, 1, Math.random()));
+    super(), this.name = e, this.lineMaterial = new y({ color: i }), this.line = new _(new u(), this.lineMaterial), this.line.name = "line", this.line.visible = !1, this.add(this.line), this._camera = t, this.curveType = "catmullrom", this.draggedMat.color = i, this.draggable = new d(), this.draggable.name = "draggablePoints", this.add(this.draggable), this.curvePos = new m(new S(1.5), new g({ color: i })), this.curvePos.name = "curvePos", this.curvePos.scale.setScalar(this._draggableScale), this.curvePos.visible = !1, this.add(this.curvePos), this.raycaster = new w(), this.raycaster.params.Line.threshold = 3, this.enable();
+  }
+  enable() {
+    document.addEventListener("pointerdown", this.onMouseClick);
+  }
+  disable() {
+    document.removeEventListener("pointerdown", this.onMouseClick);
+  }
+  dispose = () => {
+    this._transform && (this._transform.removeEventListener("objectChange", this.updateSpline), f.instance.remove(this.name)), this.disable(), this.parentGroup.removeGroup(this.name);
+  };
+  hideTransform = () => {
+    this._transform?.detach();
+  };
+  exportSpline = () => {
+    const e = [];
+    this.draggable.children.forEach((t) => {
+      e.push([
+        h(t.position.x, 3),
+        h(t.position.y, 3),
+        h(t.position.z, 3)
+      ]);
+    }), k({
+      name: this.name,
+      points: e,
+      tension: this.tension,
+      closed: this.closed,
+      subdivide: this.subdivide,
+      type: this.curveType
+    }), console.log("Spline copied!");
+  };
+  showPoints = (e = !0) => {
+    this.draggable.visible = e;
+  };
+  // Modifiers
+  addPoints = (e = []) => {
+    if (e.length > 0) {
+      const t = e.length - 1;
+      for (let i = 0; i < t; i++)
+        this.addPoint(e[i], !1);
+      this.addPoint(e[t]);
+    }
+  };
+  addPoint = (e, t = !0) => {
+    const i = this.draggable.children.length, r = new m(M, this.draggedMat);
+    r.name = `point_${i}`, r.position.copy(e), r.scale.setScalar(this._draggableScale), this.draggable.add(r), this._transform?.attach(r);
+    const n = this.points.length > 1;
+    return n && t && this.updateSpline(), this.line.visible = n, this.updateCurrentPoint(), r;
+  };
+  addNextPt = () => {
+    const e = this.draggable.children.length, t = e > 1 ? this.draggable.children[e - 1].position.clone() : new b(), i = this.addPoint(t);
+    this.updateField(i.position);
+  };
+  removePoint = (e) => {
+    if (this._transform?.object === e) {
+      this._transform?.detach();
+      const t = this.draggable.children[this.draggable.children.length - 1];
+      this._transform?.attach(t), this.updateField(t.position);
+    }
+    v(e), this.updateSpline();
+  };
+  removePointAt = (e) => {
+    const t = this.draggable.children[e];
+    this.removePoint(t);
+  };
+  removeSelectedPt = () => {
+    this._transform?.object !== void 0 && this.removePoint(this._transform?.object);
+  };
+  updateLastPoint(e) {
+    const t = this.draggable.children.length;
+    t > 0 && (this.draggable.children[t - 1].position.copy(e), this.updateSpline());
+  }
+  updateSpline = () => {
+    this.points.length < 2 || (this.curve = new p(this.points, this.closed, this.curveType, this.tension), this.line.geometry.dispose(), this.line.geometry = new u().setFromPoints(this.curve.getPoints(this.subdivide)), this.curvePos.position.copy(this.getPointAt(this._curvePercentage)));
+  };
+  updateField(e) {
+    this.group.current?.setField("Current Point", e);
+  }
+  // Handlers
+  onMouseClick = (e) => {
+    if (!o.instance || !o.instance.currentWindow || this._transform && !this._transform.getHelper().visible) return;
+    const i = o.instance.currentWindow.current.getBoundingClientRect();
+    l.x = (e.clientX - i.x) / i.width * 2 - 1, l.y = -((e.clientY - i.y) / i.height) * 2 + 1, this.raycaster.setFromCamera(l, this.camera);
+    const r = this.raycaster.intersectObjects(this.draggable.children, !1);
+    if (r.length > 0) {
+      const n = r[0].object;
+      n !== this._transform?.object && (this._transform?.attach(n), this.updateField(n.position));
+    }
+  };
+  // Getters
+  getPointAt(e) {
+    return this.curve.points.length > 1 ? this.curve.getPointAt(e) : this.curve.points.length === 1 ? this.curve.points[0] : new b();
+  }
+  getTangentAt(e) {
+    return this.curve.getTangentAt(e);
+  }
+  get points() {
+    const e = [];
+    return this.draggable.children.forEach((t) => {
+      e.push(t.position);
+    }), e;
+  }
+  get total() {
+    return this.draggable.children.length;
+  }
+  get draggableScale() {
+    return this._draggableScale;
+  }
+  set draggableScale(e) {
+    this._draggableScale = e, this.draggable.children.forEach((t) => t.scale.setScalar(e)), this.curvePos.scale.setScalar(e);
+  }
+  get camera() {
+    return this._camera;
+  }
+  set camera(e) {
+    this._camera = e, this._transform !== void 0 && (this._transform.camera = e);
+  }
+  get curvePercentage() {
+    return this._curvePercentage;
+  }
+  set curvePercentage(e) {
+    this._curvePercentage = e, this.curvePos.position.copy(this.getPointAt(e));
+  }
+  // Debug
+  updateCurrentPoint() {
+    if (this._transform?.object && this.group) {
+      const e = this._transform?.object;
+      e.name.search("point") > -1 && this.updateField(e.position);
+    }
+  }
+  onUpdateTransform = () => {
+    this.updateCurrentPoint(), this.updateSpline();
+  };
+  initDebug(e, t) {
+    const i = this.draggable.children;
+    this.visible = t, this.parentGroup = e, this._transform = f.instance.add(this.name), this._transform.camera = this._camera, this._transform.addEventListener("objectChange", this.onUpdateTransform), i.length > 0 && this._transform.attach(i[i.length - 1]), o.instance?.helpersContainer.add(this._transform.getHelper());
+    const r = i.length > 0 ? i[i.length - 1].position : { x: 0, y: 0, z: 0 };
+    this.group = e.addGroup({
+      title: this.name,
+      expanded: t,
+      items: [
+        {
+          prop: "Closed",
+          type: "boolean",
+          value: this.closed
+        },
+        {
+          prop: "Visible",
+          type: "boolean",
+          value: this.visible
+        },
+        {
+          prop: "Show Position",
+          type: "boolean",
+          value: this.curvePos.visible
+        },
+        {
+          prop: "Show Points",
+          type: "boolean",
+          value: this.draggable.visible
+        },
+        {
+          prop: "Color",
+          type: "color",
+          value: `#${this.draggedMat.color.getHexString()}`
+        },
+        {
+          prop: "Curve",
+          type: "option",
+          options: [
+            {
+              title: "Catmullrom",
+              value: "catmullrom"
+            },
+            {
+              title: "Centripetal",
+              value: "centripetal"
+            },
+            {
+              title: "Chordal",
+              value: "chordal"
+            }
+          ]
+        },
+        {
+          prop: "Draggable Scale",
+          type: "range",
+          min: 0.01,
+          max: 100,
+          step: 0.01,
+          value: this._draggableScale
+        },
+        {
+          prop: "Subdivide",
+          type: "range",
+          min: 1,
+          max: 1e3,
+          step: 1,
+          value: this.subdivide
+        },
+        {
+          prop: "Tension",
+          type: "range",
+          min: 0,
+          max: 1,
+          step: 0.01,
+          value: this.tension
+        },
+        {
+          prop: "New Pt Offset",
+          type: "range",
+          min: 0,
+          max: 10,
+          value: this.offset
+        },
+        {
+          prop: "Curve At",
+          type: "range",
+          min: 0,
+          max: 1,
+          step: 0.01,
+          value: 0
+        },
+        {
+          prop: "Toggle Transform",
+          type: "button"
+        },
+        {
+          prop: "Add Point",
+          type: "button"
+        },
+        {
+          prop: "Remove Point",
+          type: "button"
+        },
+        {
+          prop: "Export",
+          type: "button"
+        },
+        {
+          prop: "Delete",
+          type: "button"
+        },
+        {
+          prop: "Current Point",
+          type: "grid3",
+          value: r
+        }
+      ],
+      onUpdate: (n, s) => {
+        switch (n) {
+          case "Closed":
+            this.closed = s, this.updateSpline();
+            break;
+          case "Visible":
+            this.visible = s;
+            break;
+          case "Color":
+            this.lineMaterial.color.setStyle(s), this.draggedMat.color.setStyle(s);
+            break;
+          case "Curve":
+            this.curveType = s, this.updateSpline();
+            break;
+          case "Draggable Scale":
+            this.draggableScale = s;
+            break;
+          case "Subdivide":
+            this.subdivide = s, this.updateSpline();
+            break;
+          case "Tension":
+            this.tension = s, this.updateSpline();
+            break;
+          case "New Pt Offset":
+            this.offset = s;
+            break;
+          case "Curve At":
+            this.curvePos.position.copy(this.getPointAt(s));
+            break;
+          case "Show Position":
+            this.curvePos.visible = s;
+            break;
+          case "Show Points":
+            this.draggable.visible = s;
+            break;
+          case "Toggle Transform":
+            this._transform && (this._transform.getHelper().visible = !this._transform.getHelper().visible);
+            break;
+          case "Add Point":
+            this.addNextPt();
+            break;
+          case "Remove Point":
+            this.removeSelectedPt();
+            break;
+          case "Export":
+            this.exportSpline();
+            break;
+          case "Delete":
+            this.parent.currentSpline = null, v(this);
+            break;
+          case "Current Point":
+            if (this.group.current && this._transform?.object) {
+              const c = this._transform?.object;
+              c.name.search("point") > -1 && (c.position.copy(s), this.updateSpline());
+            }
+            break;
+        }
+      }
+    }), this.draggable.children.forEach((n) => {
+      this.debugPoint(n);
+    });
+  }
+  debugPoint = (e) => {
+    e.name, e.visible = this.draggable.visible;
+  };
+}
+export {
+  B as default
+};

package/dist/editor/tools/splineEditor/index.js

@@ -0,0 +1,193 @@
+import { Object3D as M, Vector3 as m, Raycaster as P, Vector2 as x } from "three";
+import w from "./Spline.js";
+import D from "../../sidePanel/DebugData.js";
+import g from "../../multiView/MultiView.js";
+import { ToolEvents as C } from "../../../core/remote/RemoteThree.js";
+let S = 0;
+class N extends M {
+  defaultScale = 10;
+  currentSpline = null;
+  _camera;
+  group = null;
+  three;
+  splineDataText = "";
+  constructor(e, t) {
+    super(), this.name = "Spline Editor", this._camera = e, this.three = t, this.three.addEventListener(C.ADD_SPLINE, this.onAddSpline);
+  }
+  initDebug() {
+    this.group = D.addEditorGroup({
+      title: this.name,
+      items: [
+        {
+          type: "field",
+          prop: "Spline Data",
+          value: "",
+          disabled: !1
+        },
+        {
+          type: "button",
+          prop: "Import Spline"
+        },
+        {
+          type: "button",
+          prop: "New Spline"
+        },
+        {
+          type: "boolean",
+          prop: "Show Points",
+          value: !0
+        },
+        {
+          type: "boolean",
+          prop: "Draw Mode",
+          value: !1
+        },
+        {
+          type: "boolean",
+          prop: "Visible",
+          value: this.visible
+        },
+        {
+          type: "range",
+          prop: "Default Scale",
+          min: 0,
+          max: 50,
+          step: 0.01,
+          value: this.defaultScale
+        }
+      ],
+      onUpdate: (e, t) => {
+        switch (e) {
+          case "New Spline":
+            this.createSpline();
+            break;
+          case "Spline Data":
+            this.splineDataText = t;
+            break;
+          case "Import Spline":
+            this.createSplineFromJSON(JSON.parse(this.splineDataText));
+            break;
+          case "Show Points":
+            this.showPoints(t);
+            break;
+          case "Visible":
+            this.visible = t;
+            break;
+          case "Default Scale":
+            this.defaultScale = t;
+            break;
+          case "Draw Mode":
+            t ? this.enableClickToDraw() : this.disableClickToDraw();
+            break;
+        }
+      }
+    });
+  }
+  dispose() {
+    this.three.removeEventListener(C.ADD_SPLINE, this.onAddSpline), D.removeEditorGroup(this.name);
+  }
+  addSpline(e, t) {
+    e.draggableScale = this.defaultScale, e.hideTransform(), this.group?.current !== null && e.initDebug(this.group.current, t), this.add(e), this.currentSpline = e;
+  }
+  createSpline = (e = []) => {
+    const t = `Spline ${S + 1}`, i = new w(t, this._camera);
+    return i.addPoints(e), this.addSpline(i, !0), S++, i;
+  };
+  createSplineFromArray = (e) => {
+    const t = [];
+    return e.forEach((i) => {
+      t.push(new m(i[0], i[1], i[2]));
+    }), this.createSpline(t);
+  };
+  createSplineFromCatmullRom = (e) => this.createSpline(e.points);
+  createSplineFromJSON = (e) => {
+    const t = [];
+    e.points.forEach((n) => {
+      t.push(new m(n[0], n[1], n[2]));
+    });
+    const i = new w(e.name, this._camera);
+    return i.closed = e.closed, i.subdivide = e.subdivide, i.tension = e.tension, i.type = e.type, i.addPoints(t), i.updateSpline(), this.addSpline(i, !1), i;
+  };
+  showPoints = (e = !0) => {
+    this.children.forEach((t) => {
+      t.showPoints(e);
+    });
+  };
+  onAddSpline = (e) => {
+    const t = JSON.parse(e.value), i = t.name !== void 0 ? t.name : `Spline ${S + 1}`, n = new w(i, this.camera);
+    t.tension !== void 0 && (n.tension = t.tension), t.closed !== void 0 && (n.closed = t.closed), t.subdivide !== void 0 && (n.subdivide = t.subdivide), t.type !== void 0 && (n.curveType = t.type);
+    const s = [];
+    t.points.forEach((r) => {
+      s.push(new m(r[0], r[1], r[2]));
+    }), n.addPoints(s), this.addSpline(n, !1), S++;
+  };
+  isMouseDown = !1;
+  enableClickToDraw() {
+    document.querySelectorAll(".clickable").forEach((e) => {
+      e.addEventListener("mousedown", this.onClickCanvas), e.addEventListener("mousemove", this.onMouseMove), e.addEventListener("mouseup", this.onMouseUp);
+    });
+  }
+  disableClickToDraw() {
+    document.querySelectorAll(".clickable").forEach((e) => {
+      e.removeEventListener("mousedown", this.onClickCanvas), e.removeEventListener("mousemove", this.onMouseMove), e.removeEventListener("mouseup", this.onMouseUp);
+    });
+  }
+  onClickCanvas = (e) => {
+    if (e.button !== 0) return;
+    if (this._camera.type !== "OrthographicCamera") {
+      console.warn("Spline Editor - 3D Camera not supported in Draw Mode");
+      return;
+    }
+    const i = e.target.getBoundingClientRect(), n = (e.clientX - i.left) / i.width * 2 - 1, s = -((e.clientY - i.top) / i.height) * 2 + 1;
+    if (g.instance) {
+      const o = new P();
+      o.setFromCamera(new x(n, s), this._camera);
+      const c = o.intersectObjects(g.instance.helpersContainer.children, !0);
+      for (let l = 0; l < c.length; l++) {
+        const a = c[l];
+        if (!(a.object.isLine || a.object.isTransformControlsPlane) && a.object.isObject3D)
+          return;
+      }
+    }
+    this.currentSpline === null && (this.currentSpline = this.createSpline());
+    const r = this.mouseToSplinePos(n, s, i.width, i.height);
+    this.currentSpline?.addPoint(r), this.isMouseDown = !0;
+  };
+  onMouseMove = (e) => {
+    if (!this.isMouseDown) return;
+    const i = e.target.getBoundingClientRect(), n = (e.clientX - i.left) / i.width * 2 - 1, s = -((e.clientY - i.top) / i.height) * 2 + 1, r = this.mouseToSplinePos(n, s, i.width, i.height);
+    this.currentSpline?.updateLastPoint(r), this.currentSpline?.updateField(r);
+  };
+  onMouseUp = () => {
+    this.isMouseDown = !1;
+  };
+  mouseToSplinePos(e, t, i, n) {
+    const s = new m(), r = Math.PI / 2, o = this._camera, c = o.zoom, l = o.rotation.x === -6123233995736766e-32 && o.rotation.y === 0 && o.rotation.z === 0, a = o.rotation.x === -Math.PI && o.rotation.y === 12246467991473532e-32 && o.rotation.z === Math.PI, E = o.rotation.x === -6162975822039155e-48 && o.rotation.y === -r && o.rotation.z === 0, v = o.rotation.x === -6162975822039155e-48 && o.rotation.y === r && o.rotation.z === 0, y = o.rotation.x === -1.5707953264174506 && o.rotation.y === 0 && o.rotation.z === 0, k = o.rotation.x === 1.5707953264174506 && o.rotation.y === 0 && o.rotation.z === 0;
+    let p = e, d = t;
+    a || v ? p *= -1 : y && (d *= -1);
+    const f = i / 2 / c, b = n / 2 / c;
+    if (this.currentSpline === null && (this.currentSpline = this.createSpline()), l || a) {
+      const h = p * f + o.position.x, u = d * b + o.position.y;
+      s.set(h, u, 0);
+    } else if (E || v) {
+      const h = p * f + o.position.z, u = d * b + o.position.y;
+      s.set(0, u, h);
+    } else if (y || k) {
+      const h = p * f + o.position.x, u = d * b + o.position.z;
+      s.set(h, 0, u);
+    }
+    return s;
+  }
+  get camera() {
+    return this._camera;
+  }
+  set camera(e) {
+    this._camera = e, this.children.forEach((t) => {
+      const i = t;
+      i.camera = e;
+    });
+  }
+}
+export {
+  N as default
+};

package/dist/editor/utils.js

@@ -0,0 +1,27 @@
+function d(t) {
+  return t.substring(0, 1).toUpperCase() + t.substring(1);
+}
+function g(t) {
+  const n = JSON.stringify(t);
+  return navigator.clipboard.writeText(n), n;
+}
+function h() {
+  return Math.round(Math.random() * 1e6).toString();
+}
+function p(t) {
+  return t.r !== void 0 && t.g !== void 0 && t.b !== void 0;
+}
+function f(t) {
+  const n = Math.round(t.r * 255), e = Math.round(t.g * 255), i = Math.round(t.b * 255), r = (a) => {
+    const o = a.toString(16);
+    return o.length === 1 ? "0" + o : o;
+  }, c = r(n), u = r(e), s = r(i);
+  return "#" + c + u + s;
+}
+export {
+  d as capitalize,
+  f as colorToHex,
+  g as copyToClipboard,
+  p as isColor,
+  h as randomID
+};