shop-components 0.0.25 → 0.0.26

package/dist/stories/device-viewer/index.d.ts

@@ -0,0 +1,47 @@
+import { LitElement, PropertyValues } from 'lit';
+import { Scene3D } from './scene';
+export interface Props {
+    test: string;
+    count: number;
+    onChange: () => {};
+}
+export declare class DeviceViewer extends LitElement {
+    scene: Scene3D;
+    container: HTMLDivElement | undefined;
+    drag: HTMLButtonElement | undefined;
+    constructor();
+    protected firstUpdated(_changedProperties: PropertyValues): void;
+    protected updated(_changedProperties: PropertyValues): void;
+    disconnectedCallback(): void;
+    test: string;
+    count: number;
+    theme: undefined | string;
+    onChange: undefined | Function;
+    usePathTracing: boolean;
+    shelfLevel: number;
+    shapeKeys: Map<any, any>;
+    progressBar: HTMLDivElement | undefined;
+    lineCircles: HTMLDivElement[] | undefined;
+    lineWrapper: HTMLDivElement | undefined;
+    sizeLength: HTMLDivElement | undefined;
+    sizeWidth: HTMLDivElement | undefined;
+    sizeHeight: HTMLDivElement | undefined;
+    fit: () => void;
+    generateBVH: () => void;
+    download: () => string;
+    clearAMR: () => void;
+    exportAMR: () => Promise<void>;
+    addAMR: () => void;
+    generateEdges: () => void;
+    setShapeKey: (key: string, val: any) => void;
+    cancel: () => void;
+    changeShelfLevel: (e: any) => void;
+    changeAmrHeight: (e: any) => void;
+    changeAmrLevel: (e: any) => void;
+    changeGoodsSize: (e: any) => void;
+    dragstart: (e: DragEvent) => void;
+    dragend: (e: DragEvent) => void;
+    getShapeKeyValue: (key: string) => any;
+    protected render(): unknown;
+    static styles: import("lit").CSSResult;
+}

package/dist/stories/device-viewer/index.js

@@ -0,0 +1,530 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { css, html, LitElement, unsafeCSS } from 'lit';
+import { customElement, property, query, queryAll, state } from 'lit/decorators.js';
+import { Vector2 } from 'three';
+import { Scene3D } from './scene';
+import bg from './asserts/bg-png.png';
+import bgCircle from './asserts/bg-circle.png';
+import Radar from './asserts/img-radar.png';
+import Radar2 from './asserts/img-radar2.png';
+import { getElementLeftPosition, getRelativePosition } from './utils';
+import { Line } from './lines';
+import Model from './asserts/models/SFL-CDD14.glb?url';
+import { downloadBlob } from '../utils';
+let DeviceViewer = class DeviceViewer extends LitElement {
+    constructor() {
+        super();
+        this.scene = new Scene3D({
+            useSound: true
+        });
+        this.test = '';
+        this.count = 4;
+        this.usePathTracing = false;
+        this.shelfLevel = 5;
+        this.shapeKeys = new Map();
+        this.fit = this.scene.fit.bind(this.scene);
+        this.generateBVH = () => {
+            this.usePathTracing = true;
+            this.scene.generateBVH().then();
+        };
+        this.download = this.scene.download.bind(this.scene);
+        this.clearAMR = this.scene.clearAMR.bind(this.scene);
+        this.exportAMR = async () => {
+            const glb = await this.scene.exportAMR();
+            if (glb) {
+                downloadBlob(new Blob([glb]), 'ttt.glb');
+            }
+        };
+        this.addAMR = () => {
+            this.scene.addAMR(Model)
+                .then(this.scene.fit.bind(this.scene))
+                .then(() => {
+                this.shapeKeys = this.scene.amr.shapeKeys;
+                console.log(this.scene.amr.shapeKeys);
+            });
+        };
+        this.generateEdges = () => {
+            this.scene.generateEdges();
+        };
+        this.setShapeKey = (key, val) => {
+            this.scene.amr.setShapeKey(key, val);
+        };
+        this.cancel = () => {
+            this.usePathTracing = false;
+            this.scene.usePathTracing = false;
+        };
+        this.changeShelfLevel = (e) => {
+            const v = parseInt(e.target.value);
+            if (!v)
+                return;
+            this.shelfLevel = v;
+            this.scene.amr.generateShelfLevel(this.shelfLevel);
+        };
+        this.changeAmrHeight = (e) => {
+            const v = parseFloat(e.target.value);
+            if (!v)
+                return;
+            this.scene.amr.setShapeKey('height', v);
+            this.scene.amr.setForkHeight(v - 1);
+            this.scene.fit();
+        };
+        this.changeAmrLevel = (e) => {
+            const v = parseFloat(e.target.value);
+            if (!v)
+                return;
+            this.scene.amr.setLevel(v);
+            this.changeGoodsSize(undefined);
+        };
+        this.changeGoodsSize = (e) => {
+            const length = parseFloat(this.sizeLength.value || '0');
+            const width = parseFloat(this.sizeWidth.value || '0');
+            const height = parseFloat(this.sizeHeight.value || '0');
+            this.scene.amr.setGoodsSize({
+                length: length,
+                width: width,
+                height: height
+            });
+        };
+        this.dragstart = (e) => {
+            const deviceId = e.target?.getAttribute('data-id');
+            let url = 'https://cdn2-1304552240.cos.ap-shanghai.myqcloud.com/rp/devices/Livox-Mid-70.sglb';
+            let bracketUrl = '';
+            if (deviceId === '2') {
+                url = 'https://cdn2-1304552240.cos.ap-shanghai.myqcloud.com/rp/devices/UB250-F77-E0-V31.sglb';
+            }
+            this.drag?.classList.add('dragging');
+            const id = e.target.getAttribute('data-id');
+            const jsonDataString = JSON.stringify({
+                id, name: '',
+                url,
+                bracketUrl
+            });
+            e.dataTransfer?.setData('application/json', jsonDataString);
+            this.scene.amr.slots.forEach((s, i) => s.canInstall(Math.random() > 0.5));
+            this.scene.amr.bodyOpacity = 0.2;
+        };
+        this.dragend = (e) => {
+            this.drag?.classList.remove('dragging');
+            this.scene.amr.slots.forEach(s => s.canInstall(false));
+        };
+        this.getShapeKeyValue = (key) => {
+            const v = this.shapeKeys.get(key).toFixed(3);
+            if (v.endsWith('.000'))
+                return v.replace('.000', '');
+            return v;
+        };
+        const style = document.createElement('style');
+        document.head.append(style);
+        this.scene.renderer.domElement.addEventListener('ticker', () => {
+            const percent = this.scene.sampleCount / this.scene.maxSample;
+            if (this.progressBar) {
+                this.progressBar.style.width = percent * 100 + '%';
+            }
+        });
+    }
+    firstUpdated(_changedProperties) {
+        super.firstUpdated(_changedProperties);
+        if (!this.container)
+            return;
+        this.scene.appendTo(this.container);
+        this.scene.addAMR(Model)
+            .then(this.scene.fit.bind(this.scene))
+            .then(() => {
+            this.shapeKeys = this.scene.amr.shapeKeys;
+            console.log(this.shapeKeys);
+            this.scene.amr.slots.forEach(s => {
+            });
+        });
+        this.scene.lines.setOffset(10, 0);
+        this.scene.lines.setHeightOffset(200);
+        setTimeout(() => {
+            this.changeGoodsSize(undefined);
+        }, 300);
+        this.lineCircles?.forEach(l => {
+            l.parentElement.addEventListener('pointerenter', e => {
+                const name = l.parentElement.innerText;
+                const lines = this.scene.lines.getLineByName(name);
+                lines.forEach(l => l.highlight = true);
+            });
+            l.parentElement.addEventListener('pointerleave', e => {
+                const name = l.parentElement.innerText;
+                const lines = this.scene.lines.getLineByName(name);
+                lines.forEach(l => l.highlight = false);
+            });
+        });
+        if (this.lineCircles && this.lineCircles.length && this.lineWrapper) {
+            const { offsetLeft, offsetTop, clientHeight } = this.lineWrapper;
+            const run = () => {
+                requestAnimationFrame(run);
+                this.lineCircles?.forEach(i => {
+                    const name = i.parentElement.innerText;
+                    const lines = this.scene.lines.getLineByName(name);
+                    let { x, y } = getRelativePosition(i, this.lineWrapper);
+                    if (y < 0)
+                        y = 0;
+                    if (y > clientHeight)
+                        y = clientHeight;
+                    y += 3;
+                    const start = new Vector2(x, y + offsetTop);
+                    this.scene.amr.slots.forEach(slot => {
+                        const { x: x2, y: y2 } = getElementLeftPosition(slot.element);
+                        const end = new Vector2(x2, y2);
+                        if (!lines.length) {
+                            const line = new Line(name, slot.name, start, end);
+                            line.editable = true;
+                            this.scene.lines.addLine(line);
+                        }
+                        else {
+                            lines.forEach(l => {
+                                if (l.name === name && l.slot === slot.name) {
+                                    l.update(start, end);
+                                    l.valid = slot.hasDevice;
+                                }
+                            });
+                        }
+                    });
+                });
+            };
+        }
+    }
+    updated(_changedProperties) {
+        super.updated(_changedProperties);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.scene.destroy();
+    }
+    render() {
+        return html `
+      <div class="container">
+        <div class="progress-bar"></div>
+        <div class="actions">
+          <button @click=${this.fit}>聚焦</button>
+          ${this.usePathTracing
+            ? html `
+                <button @click=${this.cancel}>取消渲染</button>`
+            : html `
+                <button @click=${this.generateBVH}>渲染</button>`}
+          <button @click=${this.download}>Download</button>
+          <button @click=${this.clearAMR}>CLEAR</button>
+          <button @click=${this.addAMR}>ADD</button>
+          <button @click=${this.exportAMR}>EXPORT</button>
+          <button @click=${this.generateEdges}>Generate Edges</button>
+          <div class="amr-actions">
+            <label>滚筒层数：</label>
+            <input value="1" @change=${this.changeAmrLevel}>
+            <div>
+              <label>货物尺寸：</label>
+              <input value="0.6" id="sizeLength" @change=${this.changeGoodsSize}>
+              <input value="0.9" id="sizeWidth" @change=${this.changeGoodsSize}>
+              <input value="0.35" id="sizeHeight" @change=${this.changeGoodsSize}>
+            </div>
+          </div>
+          ${[...this.shapeKeys.keys()].map(key => {
+            return html `
+                <div class="shape-key">
+                  <label>${key}</label>
+                  <input
+                    value=${this.getShapeKeyValue(key)}
+                    @change=${(e) => this.setShapeKey(key, e.target.value)}>
+                </div>`;
+        })}
+          <div
+            class="drag"
+            @dragstart=${this.dragstart}
+            @dragend=${this.dragend}
+            draggable="true">
+            <img alt=""
+                 data-id="1"
+                 src=${Radar}>
+          </div>
+          <div
+            class="drag"
+            @dragstart=${this.dragstart}
+            @dragend=${this.dragend}
+            draggable="true">
+            <img alt=""
+                 data-id="2"
+                 src=${Radar2}>
+          </div>
+        </div>
+
+        <!--        <div class="test">-->
+        <!--          <ul>-->
+        <!--            <li>功能1</li>-->
+        <!--            <li>功能2</li>-->
+        <!--            <li>功能3<i class="line-start"></i></li>-->
+        <!--            <li>功能4<i class="line-start"></i></li>-->
+        <!--            <li>功能5<i class="line-start"></i></li>-->
+        <!--            <li>功能6</li>-->
+        <!--            <li>功能7<i class="line-start"></i></li>-->
+        <!--            <li>功能8</li>-->
+        <!--            <li>功能9</li>-->
+        <!--            <li>功能10<i class="line-start"></i></li>-->
+        <!--            <li>功能11</li>-->
+        <!--            <li>功能12<i class="line-start"></i></li>-->
+        <!--            <li>功能13<i class="line-start"></i></li>-->
+        <!--            <li>功能14<i class="line-start"></i></li>-->
+        <!--            <li>功能15</li>-->
+        <!--            <li>功能16</li>-->
+        <!--          </ul>-->
+        <!--        </div>-->
+      </div>`;
+    }
+    static { this.styles = css `
+    :root {
+        display:block;
+        width:100%;
+        height:100%;
+      }
+      .test {
+        position: absolute;
+        z-index: 1000;
+        left: 0;
+        top: 240px;
+        overflow-y: auto;
+        overflow-x: auto;
+        width: auto;
+        height: 300px;
+      }
+      li {
+        margin: 10px 0;
+        margin-right: 20px;
+        width: 100px;
+        line-height: 30px;
+        background: #ddd;
+      }
+      .pane-container {
+        position: absolute;
+        left: auto;
+        right: 0;
+        top: 0;
+      }
+      
+      .shape-key {
+        label {
+          font-size: 12px;
+        }
+        input {
+          width: 70px;
+        }
+      }
+      
+      .amr-actions {
+        margin-top: 10px;
+        margin-bottom: 10px;
+        font-size: 12px;
+        input {
+          width: 60px;
+        }
+      }
+    
+        .container {
+          overflow: hidden;
+          border: 0;
+          position: absolute;
+          left: 0;
+          top: 0;
+          width: 100%;
+          height: 100%;
+          transform: scale3d(1, 1, 1);
+        }
+        
+        .drag{
+          width: 100px;
+          height: 100px;
+        }
+        .drag.dragging{
+          opacity: 0.4;
+        }
+        
+        .drag img {
+          width: 100%;
+          height: 100%;
+          object-fit: contain;
+        }
+    
+        canvas {
+          width: 100%;
+          height: 100%;
+          // background: url(${unsafeCSS(bg)}) center repeat;
+          // background: linear-gradient(to bottom, #898996 0%, #454555 60%, #111125 100%);
+          // background: #F5F7FC url(${unsafeCSS(bgCircle)}) 0% 50% no-repeat;
+          background: #eaf7fd;
+          background-size: auto 100%;
+        }
+    
+        .actions {
+          position: absolute;
+          left: 0;
+          top: 0;
+          padding: 10px;
+        }
+    
+          button {
+            font-size: 12px;
+          }
+          
+        .progress-bar {
+          position: absolute;
+          left: 0;
+          height: 2px;
+          background: #f00;
+          transition: width 0.3s;
+        }
+        
+        li {
+          position: relative;
+        }
+        .line-start {
+          z-index: 100;
+          position: absolute;
+          left: 100%;
+          top: 50%;
+          width: 6px;
+          height: 6px;
+          margin-top: -3px;
+          margin-left: 4px;
+          border-radius: 50%;
+          background: red;
+        }
+        
+        .slot-item {
+          pointer-events: auto;
+          cursor: pointer;
+          font-size:12px;
+          color: #fff;
+          width:12px;
+          height:12px;
+          background: rgba(255,255,255,0);
+          border: 1px solid #fff;
+          border-radius: 50%;
+          transition: background .2s, width 0.14s, height 0.14s, border 0.14s;
+          
+          &.disable {
+            cursor: not-allowed;
+          }
+          
+          &.hidden {
+            display: none;
+          }
+          
+          &.drag-over {
+            border-color: red;
+          }
+          
+          &.can-install {
+            position:relative;
+            width:34px;
+            height:34px;
+            background:rgba(0,102,255,0.1);
+            border-color: #0066FF;
+            // &:before {
+            //   content: "";
+            //   position: absolute;
+            //   left: 50%;
+            //   top: 50%;
+            //   width:3px;
+            //   height:3px;
+            //   transform: translate3d(-50%,-50%,0);
+            //   border-radius: 50%;
+            //   background: #00FF95;
+            // }
+          }
+          &.filled {
+            border-color: #00FF95;
+          }
+
+          &.selected {
+            border-width: 4px;
+          } 
+          
+          &.has-error {
+            border-color: #ff0000;
+          }
+          
+          &:hover {
+            background: rgba(255,255,255,0.5);
+          }
+        
+          &:hover:after {
+            pointer-events: auto;
+            transition: all .2s ease-in-out;
+            opacity: 1;
+            transform: translate3d(-50%,-4px,0);
+          }
+          
+          &:after {
+              pointer-events: none;
+              content: attr(data-name);
+              transition: all .2s 0.3s;
+              opacity: 0;
+              position:absolute;
+              left: 50%;
+              bottom: 100%;
+              transform: translate3d(-50%,5px,0);
+              white-space: nowrap;
+              font-size: 12px;
+              color: #000;
+              padding: 2px 8px;
+              border-radius: 2px;
+              background: #fff;
+            }
+        }
+  `; }
+};
+__decorate([
+    query('.container')
+], DeviceViewer.prototype, "container", void 0);
+__decorate([
+    query('#drag')
+], DeviceViewer.prototype, "drag", void 0);
+__decorate([
+    property()
+], DeviceViewer.prototype, "test", void 0);
+__decorate([
+    property()
+], DeviceViewer.prototype, "count", void 0);
+__decorate([
+    property()
+], DeviceViewer.prototype, "theme", void 0);
+__decorate([
+    property()
+], DeviceViewer.prototype, "onChange", void 0);
+__decorate([
+    state()
+], DeviceViewer.prototype, "usePathTracing", void 0);
+__decorate([
+    state()
+], DeviceViewer.prototype, "shelfLevel", void 0);
+__decorate([
+    state()
+], DeviceViewer.prototype, "shapeKeys", void 0);
+__decorate([
+    query('.progress-bar')
+], DeviceViewer.prototype, "progressBar", void 0);
+__decorate([
+    queryAll('li .line-start')
+], DeviceViewer.prototype, "lineCircles", void 0);
+__decorate([
+    query('.test')
+], DeviceViewer.prototype, "lineWrapper", void 0);
+__decorate([
+    query('#sizeLength')
+], DeviceViewer.prototype, "sizeLength", void 0);
+__decorate([
+    query('#sizeWidth')
+], DeviceViewer.prototype, "sizeWidth", void 0);
+__decorate([
+    query('#sizeHeight')
+], DeviceViewer.prototype, "sizeHeight", void 0);
+DeviceViewer = __decorate([
+    customElement('device-viewer')
+], DeviceViewer);
+export { DeviceViewer };
+//# sourceMappingURL=index.js.map

package/dist/stories/device-viewer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../stories/device-viewer/index.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAkB,SAAS,EAAE,MAAM,KAAK,CAAA;AACtE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAO,mBAAmB,CAAA;AACpF,OAAO,EAAE,OAAO,EAAE,MAA+C,OAAO,CAAA;AACxE,OAAO,EAAE,OAAO,EAAE,MAA+C,SAAS,CAAA;AAC1E,OAAO,EAAE,MAAwD,sBAAsB,CAAA;AACvF,OAAO,QAAQ,MAAkD,yBAAyB,CAAA;AAC1F,OAAO,KAAK,MAAqD,yBAAyB,CAAA;AAC1F,OAAO,MAAM,MAAoD,0BAA0B,CAAA;AAC3F,OAAO,EAAE,sBAAsB,EAAE,mBAAmB,EAAE,MAAW,SAAS,CAAA;AAC1E,OAAO,EAAE,IAAI,EAAE,MAAkD,SAAS,CAAA;AAC1E,OAAO,KAAK,MAAqD,oCAAoC,CAAA;AAGrG,OAAO,EAAE,YAAY,EAAE,MAA0C,UAAU,CAAA;AAUpE,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,UAAU;IAgB1C;QACE,KAAK,EAAE,CAAA;QAfT,UAAK,GAAG,IAAI,OAAO,CAAC;YAClB,QAAQ,EAAE,IAAI;SACf,CAAC,CAAA;QA+GF,SAAI,GAAG,EAAE,CAAA;QAGT,UAAK,GAAG,CAAC,CAAA;QAST,mBAAc,GAAG,KAAK,CAAA;QAGtB,eAAU,GAAG,CAAC,CAAA;QAGd,cAAS,GAAG,IAAI,GAAG,EAAE,CAAA;QAoBrB,QAAG,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;QACrC,gBAAW,GAAG,GAAG,EAAE;YACjB,IAAI,CAAC,cAAc,GAAG,IAAI,CAAA;YAC1B,IAAI,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,IAAI,EAAE,CAAA;QACjC,CAAC,CAAA;QACD,aAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;QAC/C,aAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;QAC/C,cAAS,GAAG,KAAK,IAAI,EAAE;YACrB,MAAM,GAAG,GAAG,MAAM,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,CAAA;YAExC,IAAI,GAAG,EAAE,CAAC;gBACR,YAAY,CAAC,IAAI,IAAI,CAAC,CAAC,GAAe,CAAC,CAAC,EAAE,SAAS,CAAC,CAAA;YACtD,CAAC;QACH,CAAC,CAAA;QACD,WAAM,GAAG,GAAG,EAAE;YACZ,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;iBACrB,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;iBACrC,IAAI,CAAC,GAAG,EAAE;gBACT,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,SAAS,CAAA;gBACzC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC,CAAA;YACvC,CAAC,CAAC,CAAA;QACN,CAAC,CAAA;QAGD,kBAAa,GAAG,GAAG,EAAE;YACnB,IAAI,CAAC,KAAK,CAAC,aAAa,EAAE,CAAA;QAC5B,CAAC,CAAA;QAED,gBAAW,GAAG,CAAC,GAAW,EAAE,GAAQ,EAAE,EAAE;YACtC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,GAAG,EAAE,GAAG,CAAC,CAAA;QACtC,CAAC,CAAA;QAED,WAAM,GAAG,GAAG,EAAE;YACZ,IAAI,CAAC,cAAc,GAAG,KAAK,CAAA;YAC3B,IAAI,CAAC,KAAK,CAAC,cAAc,GAAG,KAAK,CAAA;QACnC,CAAC,CAAA;QAED,qBAAgB,GAAG,CAAC,CAAM,EAAE,EAAE;YAE5B,MAAM,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;YAClC,IAAI,CAAC,CAAC;gBAAE,OAAM;YACd,IAAI,CAAC,UAAU,GAAG,CAAC,CAAA;YACnB,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,kBAAkB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAA;QACpD,CAAC,CAAA;QAED,oBAAe,GAAG,CAAC,CAAM,EAAE,EAAE;YAE3B,MAAM,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;YACpC,IAAI,CAAC,CAAC;gBAAE,OAAM;YACd,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAA;YACvC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC,GAAG,CAAC,CAAC,CAAA;YACnC,IAAI,CAAC,KAAK,CAAC,GAAG,EAAE,CAAA;QAClB,CAAC,CAAA;QAED,mBAAc,GAAG,CAAC,CAAM,EAAE,EAAE;YAC1B,MAAM,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;YACpC,IAAI,CAAC,CAAC;gBAAE,OAAM;YACd,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAA;YAC1B,IAAI,CAAC,eAAe,CAAC,SAAS,CAAC,CAAA;QAEjC,CAAC,CAAA;QAED,oBAAe,GAAG,CAAC,CAAM,EAAE,EAAE;YAC3B,MAAM,MAAM,GAAG,UAAU,CAAC,IAAI,CAAC,UAAW,CAAC,KAAK,IAAI,GAAG,CAAC,CAAA;YACxD,MAAM,KAAK,GAAG,UAAU,CAAC,IAAI,CAAC,SAAU,CAAC,KAAK,IAAI,GAAG,CAAC,CAAA;YACtD,MAAM,MAAM,GAAG,UAAU,CAAC,IAAI,CAAC,UAAW,CAAC,KAAK,IAAI,GAAG,CAAC,CAAA;YAIxD,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,YAAY,CAAC;gBAC1B,MAAM,EAAE,MAAM;gBACd,KAAK,EAAE,KAAK;gBACZ,MAAM,EAAE,MAAM;aACf,CAAC,CAAA;QACJ,CAAC,CAAA;QAED,cAAS,GAAG,CAAC,CAAY,EAAE,EAAE;YAC3B,MAAM,QAAQ,GAAI,CAAC,CAAC,MAAsB,EAAE,YAAY,CAAC,SAAS,CAAC,CAAA;YACnE,IAAI,GAAG,GAAG,mFAAmF,CAAA;YAE7F,IAAI,UAAU,GAAG,EAAE,CAAA;YACnB,IAAI,QAAQ,KAAK,GAAG,EAAE,CAAC;gBACrB,GAAG,GAAG,uFAAuF,CAAA;YAE/F,CAAC;YACD,IAAI,CAAC,IAAI,EAAE,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC,CAAA;YACpC,MAAM,EAAE,GAAI,CAAC,CAAC,MAA2B,CAAC,YAAY,CAAC,SAAS,CAAC,CAAA;YACjE,MAAM,cAAc,GAAG,IAAI,CAAC,SAAS,CAAC;gBAEpC,EAAE,EAAE,IAAI,EAAE,EAAE;gBACZ,GAAG;gBACH,UAAU;aACG,CAAC,CAAA;YAChB,CAAC,CAAC,YAAY,EAAE,OAAO,CAAC,kBAAkB,EAAE,cAAc,CAAC,CAAA;YAE3D,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,UAAU,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,GAAG,CAAC,CAAC,CAAA;YACzE,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,WAAW,GAAG,GAAG,CAAA;QAClC,CAAC,CAAA;QAED,YAAO,GAAG,CAAC,CAAY,EAAE,EAAE;YACzB,IAAI,CAAC,IAAI,EAAE,SAAS,CAAC,MAAM,CAAC,UAAU,CAAC,CAAA;YACvC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CAAA;QAExD,CAAC,CAAA;QAED,qBAAgB,GAAG,CAAC,GAAW,EAAE,EAAE;YACjC,MAAM,CAAC,GAAG,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAA;YAC5C,IAAI,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC;gBAAE,OAAO,CAAC,CAAC,OAAO,CAAC,MAAM,EAAE,EAAE,CAAC,CAAA;YACpD,OAAO,CAAC,CAAA;QACV,CAAC,CAAA;QApPC,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAA;QAC7C,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;QAE3B,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,GAAG,EAAE;YAC7D,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,CAAA;YAC7D,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;gBACrB,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,KAAK,GAAG,OAAO,GAAG,GAAG,GAAG,GAAG,CAAA;YACpD,CAAC;QACH,CAAC,CAAC,CAAA;IACJ,CAAC;IAES,YAAY,CAAC,kBAAkC;QACvD,KAAK,CAAC,YAAY,CAAC,kBAAkB,CAAC,CAAA;QACtC,IAAI,CAAC,IAAI,CAAC,SAAS;YAAE,OAAM;QAC3B,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,CAAA;QAEnC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;aACrB,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;aACrC,IAAI,CAAC,GAAG,EAAE;YACT,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,SAAS,CAAA;YACzC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,CAAA;YAE3B,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE;YAQjC,CAAC,CAAC,CAAA;QACJ,CAAC,CAAC,CAAA;QACJ,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,SAAS,CAAC,EAAE,EAAE,CAAC,CAAC,CAAA;QACjC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,eAAe,CAAC,GAAG,CAAC,CAAA;QAErC,UAAU,CAAC,GAAG,EAAE;YAEd,IAAI,CAAC,eAAe,CAAC,SAAS,CAAC,CAAA;QACjC,CAAC,EAAE,GAAG,CAAC,CAAA;QAEP,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE;YAC5B,CAAC,CAAC,aAAc,CAAC,gBAAgB,CAAC,cAAc,EAAE,CAAC,CAAC,EAAE;gBACpD,MAAM,IAAI,GAAG,CAAC,CAAC,aAAc,CAAC,SAAS,CAAA;gBACvC,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,aAAa,CAAC,IAAI,CAAC,CAAA;gBAClD,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,GAAG,IAAI,CAAC,CAAA;YACxC,CAAC,CAAC,CAAA;YACF,CAAC,CAAC,aAAc,CAAC,gBAAgB,CAAC,cAAc,EAAE,CAAC,CAAC,EAAE;gBACpD,MAAM,IAAI,GAAG,CAAC,CAAC,aAAc,CAAC,SAAS,CAAA;gBACvC,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,aAAa,CAAC,IAAI,CAAC,CAAA;gBAClD,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,GAAG,KAAK,CAAC,CAAA;YACzC,CAAC,CAAC,CAAA;QACJ,CAAC,CAAC,CAAA;QAEF,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,WAAW,CAAC,MAAM,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YACpE,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,YAAY,EAAE,GAAG,IAAI,CAAC,WAAW,CAAA;YAChE,MAAM,GAAG,GAAG,GAAG,EAAE;gBACf,qBAAqB,CAAC,GAAG,CAAC,CAAA;gBAC1B,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE;oBAC5B,MAAM,IAAI,GAAG,CAAC,CAAC,aAAc,CAAC,SAAS,CAAA;oBACvC,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,aAAa,CAAC,IAAI,CAAC,CAAA;oBAClD,IAAI,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,mBAAmB,CAAC,CAAC,EAAE,IAAI,CAAC,WAAY,CAAC,CAAA;oBACxD,IAAI,CAAC,GAAG,CAAC;wBAAE,CAAC,GAAG,CAAC,CAAA;oBAChB,IAAI,CAAC,GAAG,YAAY;wBAAE,CAAC,GAAG,YAAY,CAAA;oBACtC,CAAC,IAAI,CAAC,CAAA;oBACN,MAAM,KAAK,GAAG,IAAI,OAAO,CAAC,CAAC,EAAE,CAAC,GAAG,SAAS,CAAC,CAAA;oBAC3C,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;wBAClC,MAAM,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,GAAG,sBAAsB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;wBAC7D,MAAM,GAAG,GAAG,IAAI,OAAO,CAAC,EAAE,EAAE,EAAE,CAAC,CAAA;wBAC/B,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC;4BAClB,MAAM,IAAI,GAAG,IAAI,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,CAAC,CAAA;4BAClD,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAA;4BACpB,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,CAAA;wBAChC,CAAC;6BAAM,CAAC;4BACN,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE;gCAChB,IAAI,CAAC,CAAC,IAAI,KAAK,IAAI,IAAI,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI,EAAE,CAAC;oCAC5C,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE,GAAG,CAAC,CAAA;oCACpB,CAAC,CAAC,KAAK,GAAG,IAAI,CAAC,SAAS,CAAA;gCAC1B,CAAC;4BACH,CAAC,CAAC,CAAA;wBACJ,CAAC;oBACH,CAAC,CAAC,CAAA;gBACJ,CAAC,CAAC,CAAA;YACJ,CAAC,CAAA;QAEH,CAAC;IACH,CAAC;IAES,OAAO,CAAC,kBAAkC;QAClD,KAAK,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAA;IACnC,CAAC;IAED,oBAAoB;QAClB,KAAK,CAAC,oBAAoB,EAAE,CAAA;QAC5B,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,CAAA;IACtB,CAAC;IAwJS,MAAM;QACd,OAAO,IAAI,CAAA;;;;2BAIY,IAAI,CAAC,GAAG;YAEvB,IAAI,CAAC,cAAc;YACjB,CAAC,CAAC,IAAI,CAAA;iCACa,IAAI,CAAC,MAAM,gBAAgB;YAC9C,CAAC,CAAC,IAAI,CAAA;iCACa,IAAI,CAAC,WAAW,cACvC;2BACiB,IAAI,CAAC,QAAQ;2BACb,IAAI,CAAC,QAAQ;2BACb,IAAI,CAAC,MAAM;2BACX,IAAI,CAAC,SAAS;2BACd,IAAI,CAAC,aAAa;;;uCAGN,IAAI,CAAC,cAAc;;;2DAGC,IAAI,CAAC,eAAe;0DACrB,IAAI,CAAC,eAAe;4DAClB,IAAI,CAAC,eAAe;;;YAIpE,CAAC,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE;YACnC,OAAO,IAAI,CAAA;;2BAEE,GAAG;;4BAEF,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC;8BACxB,CAAC,CAAc,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;uBAChE,CAAA;QACX,CAAC,CACH;;;yBAGe,IAAI,CAAC,SAAS;uBAChB,IAAI,CAAC,OAAO;;;;uBAIZ,KAAK;;;;yBAIH,IAAI,CAAC,SAAS;uBAChB,IAAI,CAAC,OAAO;;;;uBAIZ,MAAM;;;;;;;;;;;;;;;;;;;;;;;;aAwBhB,CAAA;IACX,CAAC;aAEM,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+BA4EU,SAAS,CAAC,EAAE,CAAC;;uCAEL,SAAS,CAAC,QAAQ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0HvD,AAxMY,CAwMZ;;AA3hBD;IADC,KAAK,CAAC,YAAY,CAAC;+CACiB;AAGrC;IADC,KAAK,CAAC,OAAO,CAAC;0CACoB;AAyGnC;IADC,QAAQ,EAAE;0CACF;AAGT;IADC,QAAQ,EAAE;2CACF;AAGT;IADC,QAAQ,EAAE;2CACc;AAGzB;IADC,QAAQ,EAAE;8CACmB;AAG9B;IADC,KAAK,EAAE;oDACc;AAGtB;IADC,KAAK,EAAE;gDACM;AAGd;IADC,KAAK,EAAE;+CACa;AAGrB;IADC,KAAK,CAAC,eAAe,CAAC;iDACgB;AAGvC;IADC,QAAQ,CAAC,gBAAgB,CAAC;iDACc;AAGzC;IADC,KAAK,CAAC,OAAO,CAAC;iDACwB;AAGvC;IADC,KAAK,CAAC,aAAa,CAAC;gDACiB;AAGtC;IADC,KAAK,CAAC,YAAY,CAAC;+CACiB;AAGrC;IADC,KAAK,CAAC,aAAa,CAAC;gDACiB;AAvJ3B,YAAY;IADxB,aAAa,CAAC,eAAe,CAAC;GAClB,YAAY,CAmiBxB"}

package/dist/stories/device-viewer/index.stories.d.ts

@@ -0,0 +1,27 @@
+import { DeviceViewer, Props } from './index';
+declare const _default: {
+    title: string;
+    tags: string[];
+    render: (args: Props) => DeviceViewer;
+    argTypes: {
+        test: {
+            control: string;
+            description: string;
+        };
+        count: {
+            control: string;
+        };
+        onChange: {
+            control: string;
+            description: string;
+            value: () => void;
+        };
+    };
+};
+export default _default;
+export declare const Primary: {
+    args: {
+        test: string;
+        count: number;
+    };
+};

package/dist/stories/device-viewer/index.stories.js

@@ -0,0 +1,37 @@
+import { DeviceViewer } from './index';
+export default {
+    title: 'Shop/DeviceViewer',
+    tags: ['autodocs'],
+    render: (args) => {
+        const deviceViewer = new DeviceViewer();
+        deviceViewer.test = args.test;
+        deviceViewer.count = args.count;
+        deviceViewer.onChange = args.onChange;
+        deviceViewer.addEventListener('ticker', () => {
+            console.log('tttt');
+        });
+        return deviceViewer;
+    },
+    argTypes: {
+        test: {
+            control: 'text',
+            description: 'test'
+        },
+        count: {
+            control: 'number'
+        },
+        onChange: {
+            control: 'function',
+            description: '选择回调',
+            value: () => {
+            }
+        }
+    }
+};
+export const Primary = {
+    args: {
+        test: 'test',
+        count: 4
+    }
+};
+//# sourceMappingURL=index.stories.js.map

package/dist/stories/device-viewer/index.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../stories/device-viewer/index.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAS,MAAM,SAAS,CAAA;AAE7C,eAAe;IACb,KAAK,EAAE,mBAAmB;IAC1B,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,MAAM,EAAE,CAAC,IAAW,EAAE,EAAE;QACtB,MAAM,YAAY,GAAG,IAAI,YAAY,EAAE,CAAA;QACvC,YAAY,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAA;QAC7B,YAAY,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAA;QAC/B,YAAY,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAA;QACrC,YAAY,CAAC,gBAAgB,CAAC,QAAQ,EAAE,GAAG,EAAE;YAC3C,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,CAAA;QACrB,CAAC,CAAC,CAAA;QACF,OAAO,YAAY,CAAA;IACrB,CAAC;IACD,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,MAAM;SACpB;QACD,KAAK,EAAE;YACL,OAAO,EAAE,QAAQ;SAClB;QACD,QAAQ,EAAE;YACR,OAAO,EAAE,UAAU;YACnB,WAAW,EAAE,MAAM;YACnB,KAAK,EAAE,GAAG,EAAE;YAEZ,CAAC;SACF;KACF;CACF,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,IAAI,EAAE;QACJ,IAAI,EAAE,MAAM;QACZ,KAAK,EAAE,CAAC;KACT;CACF,CAAA"}