shop-components 0.4.19 → 0.4.20

package/dist/shop-components.mjs

@@ -9185,7 +9185,7 @@ class zr extends ze {
     const t = document.createElement("div");
     super(t), this.props = e, this._emitter = new kt(), this._slotContainer = new me(), this._bracketSlots = [], this._hasError = !1, this.useBracket = !1, this.addEventListener = this._emitter.addListener.bind(this._emitter), this.removeEventListener = this._emitter.removeListener.bind(this._emitter), this._canInstall = !1, this._loading = !1, this._selected = !1, this._deviceSelected = !1, this._focused = !1, this._toBeInstalled = !1, this._toBeReplaced = !1, this._allFunctions = /* @__PURE__ */ new Set(), this._functions = /* @__PURE__ */ new Set(), this._timer = 0, this._parentPos = new b(), this._wrapper = new me(), this._showSlot = !0, this._isMirror = !1, this.beforeInstall = void 0, this._preventDefaults = (i) => {
       i.preventDefault(), i.stopPropagation();
-    }, this.getWP = this._slotContainer.getWorldPosition.bind(this._slotContainer), this._showSlot = typeof e.show == "boolean" ? e.show : !0, this.name = e.name, this._isMirror = e.isMirror, this._slotUI = new Pn({
+    }, this.getWP = this._slotContainer.getWorldPosition.bind(this._slotContainer), t.setAttribute("data-ui-type", "slot"), this._showSlot = typeof e.show == "boolean" ? e.show : !0, this.name = e.name, this._isMirror = e.isMirror, this._slotUI = new Pn({
       name: e.name,
       isMobile: e.isMobile,
       onRemove: () => {
@@ -9593,70 +9593,105 @@ class Hr extends ze {
     const i = document.createElement("div");
     super(i), this.props = e, this.amr = t, this._direction = 1, this._controllingRotate = !1, this._controlling = !1, this._startAt = 0, this._looper = 0, this._initial = 0, this._canRotate = !1, this._emitter = new kt(), this.addListener = this._emitter.addListener.bind(this._emitter), this.removeListener = this._emitter.removeListener.bind(this._emitter), this._update = () => {
       if (this._looper = requestAnimationFrame(this._update), this._controlling) {
-        let c = (Date.now() - this._startAt) / 200;
-        c > 4 && (c = 4);
-        let h = this._initial + 5e-3 * c * this._direction;
-        if (h > this.props.max || h < this.props.min) {
-          this.mechanism && (h < this.props.min ? (this.mechanism.position.setZ(this.props.min), this._emitter.emit("change", this.props.min)) : h > this.props.max && (this.mechanism.position.setZ(this.props.max), this._emitter.emit("change", this.props.max)));
+        let r = (Date.now() - this._startAt) / 200;
+        r > 4 && (r = 4);
+        let l = this._initial + 5e-3 * r * this._direction;
+        if (l > this.props.max || l < this.props.min) {
+          this.mechanism && (l < this.props.min ? (this.mechanism.position.setZ(this.props.min), this._emitter.emit("change", this.props.min)) : l > this.props.max && (this.mechanism.position.setZ(this.props.max), this._emitter.emit("change", this.props.max)));
           return;
         }
-        if (this._initial = h, !this.mechanism)
+        if (this._initial = l, !this.mechanism)
           return;
-        this.mechanism.position.setZ(h), this._emitter.emit("change", h);
+        this.mechanism.position.setZ(l), this._emitter.emit("change", l);
       }
-    };
+    }, i.setAttribute("data-ui-type", "mechanism");
     const s = Qs();
-    e.userData && e.userData.target && (this.name = e.userData.target.name, t.traverse((c) => {
-      c.name === e.userData.target.name && (this.mechanism = c);
+    e.userData && e.userData.target && (this.name = e.userData.target.name, t.traverse((r) => {
+      r.name === e.userData.target.name && (this.mechanism = r);
     })), i.style.fontSize = "30px", i.style.color = "#0066FF", i.style.cursor = "pointer", i.style.pointerEvents = "auto";
-    const a = document.createElement("div");
-    a.style.position = "absolute", a.style.left = "0", a.style.transform = "translateX(-50%) rotate(-180deg)", a.style.marginBottom = "5px", a.style.width = a.style.height = s ? "34px" : "44px", a.style.background = `url(${Ur}) center no-repeat`, a.style.backgroundSize = "100% auto", a.setAttribute("data-direction", "up"), a.style.transition = "all .2s";
-    const n = document.createElement("div");
-    if (n.style.position = "absolute", n.style.left = "0", n.style.transform = "translateX(-50%)", a.style.bottom = n.style.top = "8px", n.style.width = n.style.height = a.style.width, n.style.background = `url(${Ur}) center no-repeat`, n.style.backgroundSize = "100% auto", n.style.transition = "all .2s", n.setAttribute("data-direction", "down"), Array.from([a, n]).forEach((c) => {
-      s || c.addEventListener("mousemove", () => {
-        c.style.filter = "invert(100%)";
-      }), c.addEventListener("mouseleave", () => {
-        c.style.filter = "";
-      }), c.addEventListener("pointerdown", () => {
-        this.mechanism && (c.style.filter = "invert(100%)", this._controlling = !0, this._startAt = Date.now(), this._initial = this.mechanism.position.z, this._direction = c.getAttribute("data-direction") === "up" ? 1 : -1, this._update());
-      }), c.addEventListener("pointerup", () => {
-        this._controlling = !1, cancelAnimationFrame(this._looper), c.style.filter = "";
-      }), c.addEventListener("pointerleave", () => {
-        this._controlling = !1, cancelAnimationFrame(this._looper), c.style.filter = "";
+    const a = (r) => {
+      r.stopPropagation();
+    }, n = (r) => {
+      r.preventDefault(), r.stopPropagation();
+    }, c = {
+      capture: !1,
+      passive: !0
+    }, h = {
+      capture: !1,
+      passive: !1
+    };
+    [
+      "pointerdown",
+      "pointerup",
+      "pointermove",
+      "pointercancel",
+      "click",
+      "dblclick",
+      "contextmenu",
+      "mousemove"
+    ].forEach((r) => {
+      i.addEventListener(r, a, c);
+    }), [
+      "wheel",
+      "dragenter",
+      "dragover",
+      "dragleave",
+      "drop"
+    ].forEach((r) => {
+      i.addEventListener(
+        r,
+        n,
+        h
+      );
+    });
+    const f = document.createElement("div");
+    f.style.position = "absolute", f.style.left = "0", f.style.transform = "translateX(-50%) rotate(-180deg)", f.style.marginBottom = "5px", f.style.width = f.style.height = s ? "34px" : "44px", f.style.background = `url(${Ur}) center no-repeat`, f.style.backgroundSize = "100% auto", f.setAttribute("data-direction", "up"), f.style.transition = "all .2s";
+    const d = document.createElement("div");
+    if (d.style.position = "absolute", d.style.left = "0", d.style.transform = "translateX(-50%)", f.style.bottom = d.style.top = "8px", d.style.width = d.style.height = f.style.width, d.style.background = `url(${Ur}) center no-repeat`, d.style.backgroundSize = "100% auto", d.style.transition = "all .2s", d.setAttribute("data-direction", "down"), Array.from([f, d]).forEach((r) => {
+      s || r.addEventListener("mousemove", () => {
+        r.style.filter = "invert(100%)";
+      }), r.addEventListener("mouseleave", () => {
+        r.style.filter = "";
+      }), r.addEventListener("pointerdown", () => {
+        this.mechanism && (r.style.filter = "invert(100%)", this._controlling = !0, this._startAt = Date.now(), this._initial = this.mechanism.position.z, this._direction = r.getAttribute("data-direction") === "up" ? 1 : -1, this._update());
+      }), r.addEventListener("pointerup", () => {
+        this._controlling = !1, cancelAnimationFrame(this._looper), r.style.filter = "";
+      }), r.addEventListener("pointerleave", () => {
+        this._controlling = !1, cancelAnimationFrame(this._looper), r.style.filter = "";
       });
     }), e.userData && (this._canRotate = e.userData.canRotate, this._canRotate)) {
-      const { rotateTarget: c, rotateDuration: h, rotateStep: f, rotateMax: d, rotateMin: r } = e.userData;
-      let l;
-      if (c && (t.traverse((u) => {
-        u.name === c.name && (l = u);
-      }), l)) {
-        const u = document.createElement("div");
-        u.style.background = `url(${fc}) center no-repeat`, u.style.backgroundSize = "100% auto", u.style.position = "absolute", u.style.top = "-50%", u.style.left = "-50%", u.style.width = s ? "140px" : "160px", u.style.height = s ? "70px" : "80px", u.style.transform = "translateX(-50%) translateY(-50%)", i.append(u);
-        const m = document.createElement("div");
-        m.style.background = `url(${uc}) center no-repeat`, m.style.backgroundSize = "100% auto", m.style.width = m.style.height = s ? "20px" : "26px", m.style.position = "absolute", m.style.top = "0", m.style.transform = "translateY(-50%)", m.style.marginBottom = "5px", m.setAttribute("data-direction", "left"), i.append(m);
-        const _ = document.createElement("div");
-        _.style.background = `url(${hc}) center no-repeat`, _.style.backgroundSize = "100% auto", _.style.width = _.style.height = s ? "20px" : "26px", _.style.position = "absolute", m.style.left = _.style.right = s ? "62px" : "69px", _.style.top = "0", _.style.transform = "translateY(-50%)", _.style.marginBottom = "5px", _.setAttribute("data-direction", "right"), i.append(_), Array.from([m, _]).forEach((p) => {
-          s || p.addEventListener("mousemove", () => {
-            p.style.filter = "invert(100%)";
-          }), p.addEventListener("mouseleave", () => {
-            p.style.filter = "";
-          }), p.addEventListener("pointerdown", () => {
+      const { rotateTarget: r, rotateDuration: l, rotateStep: u, rotateMax: m, rotateMin: _ } = e.userData;
+      let p;
+      if (r && (t.traverse((g) => {
+        g.name === r.name && (p = g);
+      }), p)) {
+        const g = document.createElement("div");
+        g.style.background = `url(${fc}) center no-repeat`, g.style.backgroundSize = "100% auto", g.style.position = "absolute", g.style.top = "-50%", g.style.left = "-50%", g.style.width = s ? "140px" : "160px", g.style.height = s ? "70px" : "80px", g.style.transform = "translateX(-50%) translateY(-50%)", i.append(g);
+        const v = document.createElement("div");
+        v.style.background = `url(${uc}) center no-repeat`, v.style.backgroundSize = "100% auto", v.style.width = v.style.height = s ? "20px" : "26px", v.style.position = "absolute", v.style.top = "0", v.style.transform = "translateY(-50%)", v.style.marginBottom = "5px", v.setAttribute("data-direction", "left"), i.append(v);
+        const y = document.createElement("div");
+        y.style.background = `url(${hc}) center no-repeat`, y.style.backgroundSize = "100% auto", y.style.width = y.style.height = s ? "20px" : "26px", y.style.position = "absolute", v.style.left = y.style.right = s ? "62px" : "69px", y.style.top = "0", y.style.transform = "translateY(-50%)", y.style.marginBottom = "5px", y.setAttribute("data-direction", "right"), i.append(y), Array.from([v, y]).forEach((x) => {
+          s || x.addEventListener("mousemove", () => {
+            x.style.filter = "invert(100%)";
+          }), x.addEventListener("mouseleave", () => {
+            x.style.filter = "";
+          }), x.addEventListener("pointerdown", () => {
             if (this._timer && this._timer.isPlaying())
               return;
-            p.style.filter = "invert(100%)", this._controllingRotate = !0, this._startAt = Date.now(), this._direction = p.getAttribute("data-direction") === "left" ? 1 : -1;
-            let g = f / 180 * Math.PI * this._direction + l.rotation.z;
-            g > d / 180 * Math.PI ? g = d / 180 * Math.PI : g < r / 180 * Math.PI && (g = r / 180 * Math.PI), this._timer = new zi(l.rotation).to({
-              z: g
-            }).duration(h).start(), this._update();
-          }), p.addEventListener("pointerup", () => {
-            this._controllingRotate = !1, cancelAnimationFrame(this._looper), p.style.filter = "";
-          }), p.addEventListener("pointerleave", () => {
-            this._controllingRotate = !1, cancelAnimationFrame(this._looper), p.style.filter = "";
+            x.style.filter = "invert(100%)", this._controllingRotate = !0, this._startAt = Date.now(), this._direction = x.getAttribute("data-direction") === "left" ? 1 : -1;
+            let w = u / 180 * Math.PI * this._direction + p.rotation.z;
+            w > m / 180 * Math.PI ? w = m / 180 * Math.PI : w < _ / 180 * Math.PI && (w = _ / 180 * Math.PI), this._timer = new zi(p.rotation).to({
+              z: w
+            }).duration(l).start(), this._update();
+          }), x.addEventListener("pointerup", () => {
+            this._controllingRotate = !1, cancelAnimationFrame(this._looper), x.style.filter = "";
+          }), x.addEventListener("pointerleave", () => {
+            this._controllingRotate = !1, cancelAnimationFrame(this._looper), x.style.filter = "";
           });
         });
       }
     }
-    i.append(a, n), this.scale.set(0.01, 0.01, 0.01), this.matrixAutoUpdate = !1, this.updateMatrix();
+    i.append(f, d), this.scale.set(0.01, 0.01, 0.01), this.matrixAutoUpdate = !1, this.updateMatrix();
   }
   hide() {
     this.element.style.display = "none", this.traverse((e) => {
@@ -13412,7 +13447,7 @@ class Mu {
       -this.d,
       0.1,
       1e3
-    ), this._axisMoving = !1, this._container = new me(), this._raycaster = new fo(), this._selected = [], this._pointerDownTimeout = 0, this._dragging = !1, this.maxSample = 1024 * 2, this.sampleCount = 0, this._usePathTracing = !1, this._fpsCache = [], this._fpsCacheMax = 20, this._emitter = new kt(), this.sound = new Kl(), this._rafId = null, this._destroyed = !1, this._ground = new X(
+    ), this._axisMoving = !1, this._container = new me(), this._raycaster = new fo(), this._selected = [], this._pointerDownTimeout = 0, this._dragging = !1, this.maxSample = 1024 * 2, this.sampleCount = 0, this._usePathTracing = !1, this._fpsCache = [], this._fpsCacheMax = 20, this._emitter = new kt(), this.sound = new Kl(), this._rafId = null, this._destroyed = !1, this._css2dUiStyleInjected = !1, this._ground = new X(
       new Oi(100, 100),
       new po({
         color: new J("#eee"),
@@ -13646,7 +13681,7 @@ class Mu {
         }
         this.stats.end();
       }
-    }, this.stats.showPanel(0), this.hideState(), e.fov && (this.camera.fov = e.fov, this.camera.updateProjectionMatrix()), Cn(Et, this.renderer), this._ground.visible = !1, this.controls = new vo(this.camera, this.renderer.domElement), this.controls.enablePan = !0, this.controls.rotateSpeed = this.props.isMobile ? 0.6 : 0.5, this.controls.dampingFactor = sn, this.controls.enableDamping = !0, this.controls.maxDistance = 10, this.controls.minDistance = 1, this.controls.zoomSpeed = this.props.isMobile ? 0.3 : Yl() ? 0.2 : 1, this._cameraPositionUI = new Sh(this.controls), this.renderer.setPixelRatio(window.devicePixelRatio || 1), this.renderer.autoClear = !0, this.renderer.toneMapping = mo, this.renderer.toneMappingExposure = 1.4, this.renderer.outputColorSpace = si, this.renderer.localClippingEnabled = !0, this.renderer.shadowMap.enabled = !0, this.css2dRenderer.domElement.style.pointerEvents = "none", this.css2dRenderer.domElement.style.position = "absolute", this.css2dRenderer.domElement.style.top = "0px", this.camera.position.set(10, -10, 5), this.camera.lookAt(new b());
+    }, this.stats.showPanel(0), this.hideState(), e.fov && (this.camera.fov = e.fov, this.camera.updateProjectionMatrix()), Cn(Et, this.renderer), this._ground.visible = !1, this.controls = new vo(this.camera, this.renderer.domElement), this.controls.enablePan = !0, this.controls.rotateSpeed = this.props.isMobile ? 0.6 : 0.5, this.controls.dampingFactor = sn, this.controls.enableDamping = !0, this.controls.maxDistance = 10, this.controls.minDistance = 1, this.controls.zoomSpeed = this.props.isMobile ? 0.3 : Yl() ? 0.2 : 1, this._cameraPositionUI = new Sh(this.controls), this.renderer.setPixelRatio(window.devicePixelRatio || 1), this.renderer.autoClear = !0, this.renderer.toneMapping = mo, this.renderer.toneMappingExposure = 1.4, this.renderer.outputColorSpace = si, this.renderer.localClippingEnabled = !0, this.renderer.shadowMap.enabled = !0, this.css2dRenderer.domElement.style.pointerEvents = "none", this.css2dRenderer.domElement.style.position = "absolute", this.css2dRenderer.domElement.style.top = "0px", this.css2dRenderer.domElement.setAttribute("data-css2d-root", "1"), this._ensureCss2dUiStyle(), this.camera.position.set(10, -10, 5), this.camera.lookAt(new b());
     const { tiles: t } = Jl();
     this.pathTracer = new pl(this.renderer), this.pathTracer.multipleImportanceSampling = !0, this.pathTracer.filterGlossyFactor = 0.6;
     let i = window.devicePixelRatio;
@@ -13897,6 +13932,21 @@ class Mu {
   add(e) {
     this._container.add(e);
   }
+  _ensureCss2dUiStyle() {
+    if (this._css2dUiStyleInjected)
+      return;
+    const e = "ms-css2d-ui-style";
+    if (document.getElementById(e)) {
+      this._css2dUiStyleInjected = !0;
+      return;
+    }
+    const t = document.createElement("style");
+    t.id = e, t.textContent = `
+      [data-css2d-root="1"] [data-ui-type="mechanism"] {
+        z-index: 2147483647 !important;
+      }
+    `, document.head.append(t), this._css2dUiStyleInjected = !0;
+  }
   updatePosition() {
   }
   removeFromParent() {
@@ -14102,7 +14152,7 @@ class Oh {
     return this.canvas || (this.canvas = document.createElement("canvas")), (this.canvas.width !== e || this.canvas.height !== t) && (this.canvas.width = e, this.canvas.height = t), this.canvas;
   }
 }
-const zh = "shop-components", Uh = "0.4.19", Hh = "Shop components", Wh = "dist/shop-components.umd.js", Nh = "dist/shop-components.mjs", Vh = "dist/main.d.ts", Gh = {
+const zh = "shop-components", Uh = "0.4.20", Hh = "Shop components", Wh = "dist/shop-components.umd.js", Nh = "dist/shop-components.mjs", Vh = "dist/main.d.ts", Gh = {
   dts: "tsc --emitDeclarationOnly & tsc & storybook build -o dist",
   dev: "vite dev",
   build: "vite build",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shop-components",
-  "version": "0.4.19",
+  "version": "0.4.20",
   "description": "Shop components",
   "main": "dist/shop-components.umd.js",
   "module": "dist/shop-components.mjs",