shop-components 0.0.9 → 0.0.10

package/dist/device-viewer/scene.d.ts

@@ -11,11 +11,12 @@ import Stats from 'stats-fps.js';
 import { Slot } from './slot';
 import { DeviceLines } from './lines';
 import './style.styl';
-interface Logo {
+export { Slot };
+export interface Logo {
     name: string;
     target: Mesh;
 }
-interface Skin {
+export interface Skin {
     name: string;
     target: MeshStandardMaterial;
 }
@@ -103,4 +104,3 @@ export declare class Scene3D {
     ticker: () => void;
     destroy(): void;
 }
-export {};

package/dist/device-viewer/slot.d.ts

@@ -5,6 +5,12 @@ export interface SlotProps {
     name: string;
     slot: Object3D;
 }
+export interface DeviceInfo {
+    name: string;
+    id: string;
+    url: string;
+    logo?: string;
+}
 export declare class Slot extends CSS2DObject {
     private props;
     private _emitter;
@@ -13,8 +19,9 @@ export declare class Slot extends CSS2DObject {
     removeEventListener: <T extends string | symbol>(event: T, fn: (...args: any[]) => void, context?: any) => EventEmitter<string | symbol, any>;
     private _canInstall;
     get hasDevice(): boolean;
-    deviceInfo: any;
+    deviceInfo: DeviceInfo | undefined;
     constructor(props: SlotProps);
+    install(info: DeviceInfo): Promise<void>;
     getWP: (target: import("three").Vector3) => import("three").Vector3;
     clearSlot(): void;
     enable(): void;

package/dist/shop-components.mjs

@@ -33566,7 +33566,7 @@ class nL {
 class j0 extends gq {
   constructor(e) {
     const t = document.createElement("div");
-    super(t), this.props = e, this._emitter = new $w(), this._slotContainer = new Ss(), this.addEventListener = this._emitter.on.bind(this._emitter), this.removeEventListener = this._emitter.on.bind(this._emitter), this._canInstall = !0, this.deviceInfo = {}, this.getWP = this._slotContainer.getWorldPosition.bind(this._slotContainer), this.name = e.name, t.className = "slot-item", t.setAttribute("data-name", this.props.name), this.add(this._slotContainer), this.props.slot.add(this), t.addEventListener("dragover", (i) => {
+    super(t), this.props = e, this._emitter = new $w(), this._slotContainer = new Ss(), this.addEventListener = this._emitter.on.bind(this._emitter), this.removeEventListener = this._emitter.on.bind(this._emitter), this._canInstall = !0, this.getWP = this._slotContainer.getWorldPosition.bind(this._slotContainer), this.name = e.name, t.className = "slot-item", t.setAttribute("data-name", this.props.name), this.add(this._slotContainer), this.props.slot.add(this), t.addEventListener("dragover", (i) => {
       i.preventDefault();
     }), t.addEventListener("click", () => {
       this._emitter.emit("slot-on-select", this);
@@ -33581,24 +33581,27 @@ class j0 extends gq {
         return;
       const s = (r = i.dataTransfer) == null ? void 0 : r.getData("application/json");
       if (s) {
-        const o = JSON.parse(s), { id: a, url: l, name: h } = o;
-        this.deviceInfo = o, this.clearSlot();
-        const c = await new nL({ useCache: !0 }).loadAsync(l);
-        if (!c.glb)
-          return;
-        const u = c.glb.clone(!0);
-        this._slotContainer.add(u);
+        const o = JSON.parse(s);
+        await this.install(o);
       }
-      t.classList.add("filled"), this._emitter.emit("slot-on-drop", this);
+      this._emitter.emit("slot-on-drop", this);
     });
   }
   get hasDevice() {
     return this._slotContainer.children.length > 0;
   }
+  async install(e) {
+    this.deviceInfo = e, this.clearSlot();
+    const i = await new nL({ useCache: !0 }).loadAsync(e.url);
+    if (!i.glb)
+      return;
+    const s = i.glb.clone(!0);
+    this._slotContainer.add(s), this.element.classList.add("filled");
+  }
   clearSlot() {
     this._slotContainer.children.forEach((e) => {
       e.removeFromParent(), am(e);
-    });
+    }), this.element.classList.remove("filled"), this.deviceInfo = void 0;
   }
   enable() {
     this.element.classList.remove("disable");
@@ -34351,8 +34354,8 @@ ja.styles = oL`
       left: var(--left);
       top: var(--top);
       pointer-events: none;
-      width: 100%;
-      height: 100%;
+      width: calc(100% - var(--left));
+      height: calc(100% - var(--top));
     }
     
     svg {
@@ -34423,7 +34426,7 @@ class NZ {
     ), this._container = new Ss(), this._raycaster = new hE(), this._selected = [], this._pointerDownTimeout = 0, this.sceneInfo = {
       materials: [],
       textures: []
-    }, this.css2dRenderer = new vq(), this._slots = [], this._logos = [], this._skins = [], this.maxSample = 1024, this.sampleCount = 0, this._usePathTracing = !1, this._fpsCache = [], this._fpsCacheMax = 20, this._bodyOpacity = 1, this.lines = new ja(new ge(8, 0)), this._emitter = new $w(), this._sound = new Cq(), this._materialsCache = /* @__PURE__ */ new Map(), this.opacityCache = void 0, this.addEventListener = this._emitter.on.bind(this._emitter), this.removeEventListener = this._emitter.on.bind(this._emitter), this._pointermove = (t) => {
+    }, this.css2dRenderer = new vq(), this._slots = [], this._logos = [], this._skins = [], this.maxSample = 1024, this.sampleCount = 0, this._usePathTracing = !1, this._fpsCache = [], this._fpsCacheMax = 20, this._bodyOpacity = 1, this.lines = new ja(new ge(-108, 0)), this._emitter = new $w(), this._sound = new Cq(), this._materialsCache = /* @__PURE__ */ new Map(), this.opacityCache = void 0, this.addEventListener = this._emitter.on.bind(this._emitter), this.removeEventListener = this._emitter.on.bind(this._emitter), this._pointermove = (t) => {
       if (this._pointerDownTimeout)
         return clearTimeout(this._pointerDownTimeout), this._pointerDownTimeout = 0;
       const { top: i, left: s } = this.renderer.domElement.getBoundingClientRect();
@@ -59917,6 +59920,7 @@ export {
   rd as Cropper,
   nL as SGLBLoader,
   NZ as Scene3D,
+  j0 as Slot,
   Az as SlotState,
   W0 as arrayBufferToUrl,
   xq as calculateArrayAverage,