@shopware-ag/dive 1.1.2 → 1.3.0

package/README.md

@@ -172,6 +172,7 @@ In the following you find a list of all available actions to perform on DIVEComm
 | [ZOOM_CAMERA](./src/com/actions/camera/zoomcamera.ts)                     | Zoom in or out
 | [GENERATE_MEDIA](./src/com/actions/media/generatemedia.ts)                | Generate a screenshot with the specified parameters
 | [MODEL_LOADED](./src/com/actions/object/model/modelloaded.ts)             | Is performed when a model file is completely loaded
+| [DROP_IT](./src/com/actions/object/model/dropit.ts)                       | Places the model onto the nextg underlying object's bounding box
 | [PLACE_ON_FLOOR](./src/com/actions/object/model/placeonfloor.ts)          | Set a model onto to the floor
 | [ADD_OBJECT](./src/com/actions/object/addobject.ts)                       | Add an object to the scene
 | [UPDATE_OBJECT](./src/com/actions/object/updateobject.ts)                 | Update an existing object

package/build/dive.cjs

@@ -296,6 +296,10 @@ var _DIVECommunication = class _DIVECommunication {
         returnValue = this.setBackground(payload);
         break;
       }
+      case "DROP_IT": {
+        returnValue = this.dropIt(payload);
+        break;
+      }
       case "PLACE_ON_FLOOR": {
         returnValue = this.placeOnFloor(payload);
         break;
@@ -385,11 +389,13 @@ var _DIVECommunication = class _DIVECommunication {
     return this.registered;
   }
   getObjects(payload) {
+    if (payload.ids.length === 0) return [];
+    const objects = [];
     this.registered.forEach((object) => {
-      if (payload.ids && payload.ids.length > 0 && !payload.ids.includes(object.id)) return;
-      payload.map.set(object.id, object);
+      if (!payload.ids.includes(object.id)) return;
+      objects.push(object);
     });
-    return payload.map;
+    return objects;
   }
   addObject(payload) {
     if (this.registered.get(payload.id)) return false;
@@ -429,6 +435,13 @@ var _DIVECommunication = class _DIVECommunication {
     this.scene.SetBackground(payload.color);
     return true;
   }
+  dropIt(payload) {
+    const object = this.registered.get(payload.id);
+    if (!object) return false;
+    const model = this.scene.GetSceneObject(object);
+    model.DropIt();
+    return true;
+  }
   placeOnFloor(payload) {
     if (!this.registered.get(payload.id)) return false;
     this.scene.PlaceOnFloor(payload);
@@ -636,7 +649,6 @@ var DIVELightRoot = class extends import_three6.Object3D {
     if (light.visible !== void 0 && light.visible !== null) sceneObject.visible = light.visible;
   }
   DeleteLight(light) {
-    var _a;
     if (light.id === void 0) {
       console.warn("LightRoot.DeleteLight: light.id is undefined");
       return;
@@ -646,9 +658,19 @@ var DIVELightRoot = class extends import_three6.Object3D {
       console.warn(`LightRoot.DeleteLight: Light with id ${light.id} not found`);
       return;
     }
-    if ("isMoveable" in sceneObject) {
-      (_a = sceneObject.gizmo) == null ? void 0 : _a.detach();
-    }
+    const findScene = (object) => {
+      if (object.parent !== null) {
+        return findScene(object.parent);
+      }
+      ;
+      return object;
+    };
+    const scene = findScene(sceneObject);
+    scene.children.find((object) => {
+      if ("isTransformControls" in object) {
+        object.detach();
+      }
+    });
     this.remove(sceneObject);
   }
 };
@@ -658,6 +680,16 @@ var import_three8 = require("three");
 
 // src/model/Model.ts
 var import_three7 = require("three");
+
+// src/helper/findSceneRecursive/findSceneRecursive.ts
+var findSceneRecursive = (object) => {
+  if (object.parent) {
+    return findSceneRecursive(object.parent);
+  }
+  return object;
+};
+
+// src/model/Model.ts
 var DIVEModel = class extends import_three7.Object3D {
   constructor() {
     super();
@@ -696,6 +728,30 @@ var DIVEModel = class extends import_three7.Object3D {
     this.position.y = -this.boundingBox.min.y * this.scale.y;
     (_a = DIVECommunication.get(this.userData.id)) == null ? void 0 : _a.PerformAction("UPDATE_OBJECT", { id: this.userData.id, position: this.position, rotation: this.rotation, scale: this.scale });
   }
+  DropIt() {
+    var _a;
+    if (!this.parent) {
+      console.warn("DIVEModel: DropIt() called on a model that is not in the scene.", this);
+      return;
+    }
+    const bottomY = this.boundingBox.min.y * this.scale.y;
+    const bbBottomCenter = this.localToWorld(this.boundingBox.getCenter(new import_three7.Vector3()).multiply(this.scale));
+    bbBottomCenter.y = bottomY + this.position.y;
+    const raycaster = new import_three7.Raycaster(bbBottomCenter, new import_three7.Vector3(0, -1, 0));
+    raycaster.layers.mask = PRODUCT_LAYER_MASK;
+    const intersections = raycaster.intersectObjects(findSceneRecursive(this).Root.children, true);
+    if (intersections.length > 0) {
+      const mesh = intersections[0].object;
+      mesh.geometry.computeBoundingBox();
+      const meshBB = mesh.geometry.boundingBox;
+      const worldPos = mesh.localToWorld(meshBB.max.clone());
+      const oldPos = this.position.clone();
+      const newPos = this.position.clone().setY(worldPos.y).add(new import_three7.Vector3(0, bottomY, 0));
+      this.position.copy(newPos);
+      if (this.position.y === oldPos.y) return;
+      (_a = DIVECommunication.get(this.userData.id)) == null ? void 0 : _a.PerformAction("UPDATE_OBJECT", { id: this.userData.id, position: this.position, rotation: this.rotation, scale: this.scale });
+    }
+  }
   onMove() {
     var _a;
     (_a = DIVECommunication.get(this.userData.id)) == null ? void 0 : _a.PerformAction("UPDATE_OBJECT", { id: this.userData.id, position: this.position, rotation: this.rotation, scale: this.scale });
@@ -771,7 +827,6 @@ var DIVEModelRoot = class extends import_three8.Object3D {
     if (object.visible !== void 0) sceneObject.visible = object.visible;
   }
   DeleteModel(object) {
-    var _a;
     if (object.id === void 0) {
       console.warn(`ModelRoot.DeleteModel: object.id is undefined`);
       return;
@@ -781,9 +836,19 @@ var DIVEModelRoot = class extends import_three8.Object3D {
       console.warn(`ModelRoot.DeleteModel: Model with id ${object.id} not found`);
       return;
     }
-    if ("isMoveable" in sceneObject) {
-      (_a = sceneObject.gizmo) == null ? void 0 : _a.detach();
-    }
+    const findScene = (object2) => {
+      if (object2.parent !== null) {
+        return findScene(object2.parent);
+      }
+      ;
+      return object2;
+    };
+    const scene = findScene(sceneObject);
+    scene.children.find((object2) => {
+      if ("isTransformControls" in object2) {
+        object2.detach();
+      }
+    });
     this.remove(sceneObject);
   }
   PlaceOnFloor(object) {
@@ -1096,84 +1161,282 @@ var DIVEMediaCreator = class {
   }
 };
 
-// src/toolbox/select/SelectTool.ts
+// src/interface/Selectable.ts
+function isSelectable(object) {
+  return "isSelectable" in object;
+}
+
+// src/toolbox/BaseTool.ts
 var import_three15 = require("three");
-var import_Addons3 = require("three/examples/jsm/Addons.js");
+
+// src/interface/Draggable.ts
+var isDraggable = (object) => {
+  return "isDraggable" in object;
+};
+var findDraggableInterface = (child) => {
+  if (child === void 0) return void 0;
+  if (child.parent === null) {
+    return void 0;
+  }
+  if (isDraggable(child)) {
+    return child;
+  }
+  return findDraggableInterface(child.parent);
+};
+
+// src/interface/Hoverable.ts
+var isHoverable = (object) => {
+  return "isHoverable" in object;
+};
+var findHoverableInterface = (child) => {
+  if (child === void 0) return void 0;
+  if (child.parent === null) {
+    return void 0;
+  }
+  if (isHoverable(child)) {
+    return child;
+  }
+  return findHoverableInterface(child.parent);
+};
 
 // src/toolbox/BaseTool.ts
 var DIVEBaseTool = class {
-  constructor() {
+  constructor(scene, controller) {
+    this.POINTER_DRAG_THRESHOLD = 1e-3;
     this.name = "BaseTool";
+    this._canvas = controller.domElement;
+    this._scene = scene;
+    this._controller = controller;
+    this._pointer = new import_three15.Vector2();
+    this._pointerPrimaryDown = false;
+    this._pointerMiddleDown = false;
+    this._pointerSecondaryDown = false;
+    this._lastPointerDown = new import_three15.Vector2();
+    this._lastPointerUp = new import_three15.Vector2();
+    this._raycaster = new import_three15.Raycaster();
+    this._raycaster.layers.mask = PRODUCT_LAYER_MASK | UI_LAYER_MASK;
+    this._intersects = [];
+    this._hovered = null;
+    this._dragging = false;
+    this._dragStart = new import_three15.Vector3();
+    this._dragCurrent = new import_three15.Vector3();
+    this._dragEnd = new import_three15.Vector3();
+    this._dragDelta = new import_three15.Vector3();
+    this._draggable = null;
+    this._dragRaycastOnObjects = null;
+  }
+  get _pointerAnyDown() {
+    return this._pointerPrimaryDown || this._pointerMiddleDown || this._pointerSecondaryDown;
   }
   Activate() {
   }
   Deactivate() {
   }
   onPointerDown(e) {
+    var _a;
+    switch (e.button) {
+      case 0:
+        this._pointerPrimaryDown = true;
+        break;
+      case 1:
+        this._pointerMiddleDown = true;
+        break;
+      case 2:
+        this._pointerSecondaryDown = true;
+        break;
+    }
+    this._lastPointerDown.copy(this._pointer);
+    this._draggable = findDraggableInterface((_a = this._intersects[0]) == null ? void 0 : _a.object) || null;
+  }
+  onDragStart(e) {
+    if (!this._draggable) return;
+    if (this._dragRaycastOnObjects !== null) {
+      this._intersects = this._raycaster.intersectObjects(this._dragRaycastOnObjects, true);
+    }
+    if (this._intersects.length === 0) return;
+    this._dragStart.copy(this._intersects[0].point.clone());
+    this._dragCurrent.copy(this._intersects[0].point.clone());
+    this._dragEnd.copy(this._dragStart.clone());
+    this._dragDelta.set(0, 0, 0);
+    if (this._draggable && this._draggable.onDragStart) {
+      this._draggable.onDragStart({
+        dragStart: this._dragStart,
+        dragCurrent: this._dragCurrent,
+        dragEnd: this._dragEnd,
+        dragDelta: this._dragDelta
+      });
+      this._dragging = true;
+      this._controller.enabled = false;
+    }
+  }
+  onPointerMove(e) {
+    var _a;
+    this._pointer.x = e.offsetX / this._canvas.clientWidth * 2 - 1;
+    this._pointer.y = -(e.offsetY / this._canvas.clientHeight) * 2 + 1;
+    this._raycaster.setFromCamera(this._pointer, this._controller.object);
+    this._intersects = this.raycast(this._scene.children);
+    const hoverable = findHoverableInterface((_a = this._intersects[0]) == null ? void 0 : _a.object);
+    if (this._intersects[0] && hoverable) {
+      if (!this._hovered) {
+        if (hoverable.onPointerEnter) hoverable.onPointerEnter(this._intersects[0]);
+        this._hovered = hoverable;
+        return;
+      }
+      if (this._hovered.uuid !== hoverable.uuid) {
+        if (this._hovered.onPointerLeave) this._hovered.onPointerLeave();
+        if (hoverable.onPointerEnter) hoverable.onPointerEnter(this._intersects[0]);
+        this._hovered = hoverable;
+        return;
+      }
+      if (hoverable.onPointerOver) hoverable.onPointerOver(this._intersects[0]);
+      this._hovered = hoverable;
+    } else {
+      if (this._hovered) {
+        if (this._hovered.onPointerLeave) this._hovered.onPointerLeave();
+      }
+      this._hovered = null;
+    }
+    if (this._pointerAnyDown) {
+      if (!this._dragging) {
+        this.onDragStart(e);
+      }
+      this.onDrag(e);
+    }
+  }
+  onDrag(e) {
+    if (this._dragRaycastOnObjects !== null) {
+      this._intersects = this._raycaster.intersectObjects(this._dragRaycastOnObjects, true);
+    }
+    const intersect = this._intersects[0];
+    if (!intersect) return;
+    this._dragCurrent.copy(intersect.point.clone());
+    this._dragEnd.copy(intersect.point.clone());
+    this._dragDelta.subVectors(this._dragCurrent.clone(), this._dragStart.clone());
+    if (this._draggable && this._draggable.onDrag) {
+      this._draggable.onDrag({
+        dragStart: this._dragStart,
+        dragCurrent: this._dragCurrent,
+        dragEnd: this._dragEnd,
+        dragDelta: this._dragDelta
+      });
+    }
   }
   onPointerUp(e) {
+    if (this.pointerWasDragged() || this._dragging) {
+      if (this._draggable) {
+        this.onDragEnd(e);
+      }
+    } else {
+      this.onClick(e);
+    }
+    switch (e.button) {
+      case 0:
+        this._pointerPrimaryDown = false;
+        break;
+      case 1:
+        this._pointerMiddleDown = false;
+        break;
+      case 2:
+        this._pointerSecondaryDown = false;
+        break;
+    }
+    this._lastPointerUp.copy(this._pointer);
+  }
+  onClick(e) {
+  }
+  onDragEnd(e) {
+    const intersect = this._intersects[0];
+    if (intersect) {
+      this._dragEnd.copy(intersect.point.clone());
+      this._dragCurrent.copy(intersect.point.clone());
+      this._dragDelta.subVectors(this._dragCurrent.clone(), this._dragStart.clone());
+    }
+    if (this._draggable && this._draggable.onDragEnd) {
+      this._draggable.onDragEnd({
+        dragStart: this._dragStart,
+        dragCurrent: this._dragCurrent,
+        dragEnd: this._dragEnd,
+        dragDelta: this._dragDelta
+      });
+    }
+    this._draggable = null;
+    this._dragging = false;
+    this._dragStart.set(0, 0, 0);
+    this._dragCurrent.set(0, 0, 0);
+    this._dragEnd.set(0, 0, 0);
+    this._dragDelta.set(0, 0, 0);
+    this._controller.enabled = true;
   }
   onWheel(e) {
   }
+  raycast(objects) {
+    if (objects !== void 0) return this._raycaster.intersectObjects(objects, true);
+    return this._raycaster.intersectObjects(this._scene.children, true);
+  }
+  pointerWasDragged() {
+    return this._lastPointerDown.distanceTo(this._pointer) > this.POINTER_DRAG_THRESHOLD;
+  }
 };
 
-// src/toolbox/select/SelectTool.ts
-var DIVESelectTool = class extends DIVEBaseTool {
+// src/toolbox/transform/TransformTool.ts
+var import_Addons3 = require("three/examples/jsm/Addons");
+var DIVETransformTool = class extends DIVEBaseTool {
   constructor(scene, controller) {
-    super();
-    this.name = "SelectTool";
-    this.canvas = controller.domElement;
-    this.scene = scene;
-    this.controller = controller;
-    this.raycaster = new import_three15.Raycaster();
-    this.raycaster.layers.mask = PRODUCT_LAYER_MASK | HELPER_LAYER_MASK;
-    this.gizmo = new import_Addons3.TransformControls(this.controller.object, this.canvas);
-    this.gizmo.layers.mask = UI_LAYER_MASK;
-    this.gizmo.getRaycaster().layers.mask = UI_LAYER_MASK & this.controller.object.layers.mask;
-    this.gizmo.traverse((child) => {
-      child.layers.mask = UI_LAYER_MASK;
-    });
-    this.gizmo.addEventListener("objectChange", () => {
-      if (!this.gizmo.object) return;
-      if (!("onMove" in this.gizmo.object)) return;
-      if (typeof this.gizmo.object.onMove !== "function") return;
-      this.gizmo.object.onMove();
-    });
-    this.controller.object.onSetCameraLayer = (mask) => {
-      this.gizmo.getRaycaster().layers.mask = UI_LAYER_MASK & mask;
-    };
-    this.gizmo.addEventListener("dragging-changed", function(event) {
-      controller.enabled = !event.value;
-    });
-    this.scene.add(this.gizmo);
+    super(scene, controller);
+    this.name = "DIVETransformTool";
+    this._gizmo = new import_Addons3.TransformControls(this._controller.object, this._controller.domElement);
+    this._gizmo.mode = "translate";
+    scene.add(this._gizmo);
   }
   Activate() {
   }
   SetGizmoMode(mode) {
-    this.gizmo.setMode(mode);
+    this._gizmo.mode = mode;
+  }
+  // public onPointerDown(e: PointerEvent): void {
+  //     super.onPointerDown(e);
+  //     // if (this._hovered) {
+  //     //     this._dragRaycastOnObjects = this._gizmo.gizmoPlane.children;
+  //     // }
+  // }
+  // protected raycast(): Intersection[] {
+  //     return super.raycast(this._gizmo.gizmoNode.children);
+  // }
+};
+
+// src/toolbox/select/SelectTool.ts
+var DIVESelectTool = class extends DIVETransformTool {
+  constructor(scene, controller) {
+    super(scene, controller);
+    this.name = "SelectTool";
+  }
+  Activate() {
   }
   Select(selectable) {
     if (selectable.onSelect) selectable.onSelect();
     if ("isMoveable" in selectable) {
       const movable = selectable;
-      movable.gizmo = this.gizmo;
-      this.gizmo.attach(movable);
+      this._gizmo.attach(movable);
     }
   }
   Deselect(selectable) {
     if (selectable.onDeselect) selectable.onDeselect();
-    if ("isMoveable" in selectable) selectable.gizmo = null;
-    this.gizmo.detach();
+    this._gizmo.detach();
   }
-  onPointerUp(e) {
-    const pointerPos = new import_three15.Vector2(e.offsetX / this.canvas.clientWidth * 2 - 1, e.offsetY / this.canvas.clientHeight * -2 + 1);
-    this.raycaster.setFromCamera(pointerPos, this.controller.object);
-    const first = this.raycastFirst();
+  onClick(e) {
+    super.onClick(e);
+    const first = this._raycaster.intersectObjects(this._scene.Root.children, true)[0];
     const selectable = this.findSelectableInterface(first == null ? void 0 : first.object);
     if (!first || !selectable) {
-      if (this.gizmo.object) this.Deselect(this.gizmo.object);
+      if (this._gizmo.object) {
+        this.Deselect(this._gizmo.object);
+      }
       return;
     }
+    if (this._gizmo.object) {
+      if (this._gizmo.object.uuid === selectable.uuid) return;
+      this.Deselect(this._gizmo.object);
+    }
     this.Select(selectable);
   }
   findSelectableInterface(child) {
@@ -1181,17 +1444,11 @@ var DIVESelectTool = class extends DIVEBaseTool {
     if (child.parent === null) {
       return void 0;
     }
-    if ("isSelectable" in child) {
+    if (isSelectable(child)) {
       return child;
     }
     return this.findSelectableInterface(child.parent);
   }
-  raycastFirst() {
-    return this.raycastAll()[0];
-  }
-  raycastAll() {
-    return this.raycaster.intersectObjects(this.scene.Root.children, true);
-  }
 };
 
 // src/toolbox/Toolbox.ts
@@ -1200,10 +1457,12 @@ var DIVEToolbox = class {
     this.removeListenersCallback = () => {
     };
     this.selectTool = new DIVESelectTool(scene, controller);
+    controller.domElement.addEventListener("pointermove", this.onPointerMove.bind(this));
     controller.domElement.addEventListener("pointerdown", this.onPointerDown.bind(this));
     controller.domElement.addEventListener("pointerup", this.onPointerUp.bind(this));
     controller.domElement.addEventListener("wheel", this.onWheel.bind(this));
     this.removeListenersCallback = () => {
+      controller.domElement.removeEventListener("pointermove", this.onPointerMove.bind(this));
       controller.domElement.removeEventListener("pointerdown", this.onPointerDown.bind(this));
       controller.domElement.removeEventListener("pointerup", this.onPointerUp.bind(this));
       controller.domElement.removeEventListener("wheel", this.onWheel.bind(this));
@@ -1233,6 +1492,9 @@ var DIVEToolbox = class {
   SetGizmoMode(mode) {
     this.selectTool.SetGizmoMode(mode);
   }
+  onPointerMove(e) {
+    this.activeTool.onPointerMove(e);
+  }
   onPointerDown(e) {
     this.activeTool.onPointerDown(e);
   }
@@ -1383,6 +1645,11 @@ function roundExponential(number, decimals = 0) {
   return shift(Math.round(n), -decimals);
 }
 
+// src/math/signedAngleTo/signedAngleTo.ts
+function signedAngleTo(vecA, vecB, planeNormal) {
+  return Math.atan2(vecA.clone().cross(vecB).dot(planeNormal), vecB.clone().dot(vecA));
+}
+
 // src/math/toFixed/toFixedExp.ts
 function toFixedExp(number, decimals = 0) {
   const n = shift(number, +decimals);
@@ -1401,7 +1668,8 @@ var DIVEMath = {
   floorExp,
   roundExp: roundExponential,
   toFixedExp,
-  truncateExp
+  truncateExp,
+  signedAngleTo
 };
 
 // src/dive.ts
@@ -1477,6 +1745,11 @@ var DIVE = class {
       this.addResizeObserver();
     }
     this.renderer.StartRenderer(this.scene, this.perspectiveCamera);
+    window.DIVE = {
+      PrintScene: () => {
+        console.log(this.scene);
+      }
+    };
   }
   // methods
   OnResize(width, height) {