@operato/scene-visualizer 9.2.2 → 10.0.0-beta.2

package/dist/tank.js

@@ -0,0 +1,312 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+import { __decorate } from "tslib";
+import { RealObjectGroup, RectPath, Shape, ValueHolder, sceneComponent } from '@hatiolab/things-scene';
+import * as THREE from 'three';
+const NATURE = {
+    mutable: false,
+    resizable: true,
+    rotatable: true,
+    properties: [
+        {
+            type: 'number',
+            label: 'value',
+            name: 'value',
+            property: 'value'
+        },
+        {
+            type: 'color',
+            label: 'liquid-color',
+            name: 'liquidColor',
+            property: 'liquidColor'
+        }
+    ],
+    help: 'scene/component/tank'
+};
+/* ── 상수 ── */
+const TANK_COLOR = '#aaaaaa';
+const LIQUID_COLOR = '#4488ff';
+const LIQUID_OPACITY = 0.8;
+/* ── 게이지 ── */
+const GAUGE_TEX_W = 64;
+const GAUGE_TEX_H = 256;
+const GAUGE_ARC = 0.22; // 라디안 (~13°) — 더 좁고 세련된 폭
+const BEZEL_COLOR = '#2a2a2a';
+/* ── 2D 렌더 ── */
+function renderTank(ctx, x, y, w, h, value, liquidColor) {
+    const capH = Math.min(w * 0.25, h * 0.15);
+    const bodyY = y + capH;
+    const bodyH = h - capH;
+    // 외벽 — 본체 (불투명)
+    ctx.fillStyle = TANK_COLOR;
+    ctx.fillRect(x, bodyY, w, bodyH);
+    // 외벽 — 상단 둥근 캡
+    ctx.beginPath();
+    ctx.ellipse(x + w / 2, bodyY, w / 2, capH, 0, Math.PI, 0);
+    ctx.fill();
+    // 외벽 윤곽선
+    ctx.strokeStyle = '#888888';
+    ctx.lineWidth = 1.5;
+    ctx.beginPath();
+    ctx.moveTo(x, bodyY);
+    ctx.lineTo(x, bodyY + bodyH);
+    ctx.lineTo(x + w, bodyY + bodyH);
+    ctx.lineTo(x + w, bodyY);
+    ctx.stroke();
+    ctx.beginPath();
+    ctx.ellipse(x + w / 2, bodyY, w / 2, capH, 0, Math.PI, 0);
+    ctx.stroke();
+    // ── 전면 게이지 ──
+    const gw = Math.max(6, w * 0.15);
+    const gPad = bodyH * 0.15;
+    const gx = x + (w - gw) / 2;
+    const gy = bodyY + gPad;
+    const gh = bodyH - gPad * 2;
+    const gr = gw / 2;
+    // 액체 채움
+    const level = Math.max(0, Math.min(100, value)) / 100;
+    if (level > 0) {
+        const fp = 2;
+        const fillH = (gh - fp * 2) * level;
+        const fillY = gy + gh - fp - fillH;
+        ctx.save();
+        ctx.beginPath();
+        ctx.roundRect(gx + fp, gy + fp, gw - fp * 2, gh - fp * 2, Math.max(0, gr - fp));
+        ctx.clip();
+        ctx.fillStyle = liquidColor || LIQUID_COLOR;
+        ctx.globalAlpha = LIQUID_OPACITY;
+        ctx.fillRect(gx + fp, fillY, gw - fp * 2, fillH);
+        ctx.globalAlpha = 1;
+        ctx.restore();
+    }
+    // 눈금 (우측, 20% 단위)
+    ctx.strokeStyle = 'rgba(255,255,255,0.45)';
+    const tickTop = gy + 4;
+    const tickAreaH = gh - 8;
+    for (let pct = 20; pct <= 80; pct += 20) {
+        const ty = tickTop + tickAreaH * (1 - pct / 100);
+        const tw = pct === 50 ? gw * 0.35 : gw * 0.2;
+        ctx.lineWidth = pct === 50 ? 1 : 0.5;
+        ctx.beginPath();
+        ctx.moveTo(gx + gw - tw - 1, ty);
+        ctx.lineTo(gx + gw - 1, ty);
+        ctx.stroke();
+    }
+    // 게이지 테두리 (라운드)
+    ctx.strokeStyle = 'rgba(255,255,255,0.2)';
+    ctx.lineWidth = 1;
+    ctx.beginPath();
+    ctx.roundRect(gx, gy, gw, gh, gr);
+    ctx.stroke();
+    // 수치 (게이지 중앙)
+    const pctText = `${Math.round(value)}%`;
+    const fontSize = Math.max(7, Math.round(gw * 0.55));
+    ctx.font = `bold ${fontSize}px sans-serif`;
+    ctx.textAlign = 'center';
+    ctx.textBaseline = 'middle';
+    ctx.shadowColor = 'rgba(0,0,0,0.7)';
+    ctx.shadowBlur = 2;
+    ctx.fillStyle = '#ffffff';
+    ctx.fillText(pctText, gx + gw / 2, gy + gh / 2);
+    ctx.shadowColor = 'transparent';
+    ctx.shadowBlur = 0;
+    // bounds path 등록
+    ctx.beginPath();
+    ctx.rect(x, y, w, h);
+}
+/* ── 3D 렌더 ── */
+export class Tank3D extends RealObjectGroup {
+    _gaugeCanvas;
+    _gaugeCtx;
+    _gaugeTexture;
+    _gaugeMesh;
+    // build 시 저장
+    _bodyRadius = 0;
+    _bodyDepth = 0;
+    _domeH = 0;
+    build() {
+        super.build();
+        const { width, height } = this.component.bounds;
+        const { depth } = this.component.state;
+        const d = depth || Math.max(width, height) * 2;
+        const radius = Math.min(width, height) / 2;
+        const domeH = radius * 0.5;
+        const bodyH = d - domeH;
+        this._bodyRadius = radius;
+        this._bodyDepth = bodyH;
+        this._domeH = domeH;
+        const gaugeH = bodyH * 0.55;
+        // ── 솔리드 탱크 본체 ──
+        const tankMat = new THREE.MeshStandardMaterial({
+            color: TANK_COLOR,
+            roughness: 0.35,
+            metalness: 0.5
+        });
+        // 원기둥 (닫힌 양 끝)
+        const wallGeo = new THREE.CylinderGeometry(radius, radius, bodyH, 32);
+        const wallMesh = new THREE.Mesh(wallGeo, tankMat);
+        wallMesh.position.y = bodyH / 2;
+        wallMesh.castShadow = true;
+        this.object3d.add(wallMesh);
+        // 상단 반구 돔
+        const domeGeo = new THREE.SphereGeometry(radius, 32, 16, 0, Math.PI * 2, 0, Math.PI / 2);
+        const domeMesh = new THREE.Mesh(domeGeo, tankMat);
+        domeMesh.position.y = bodyH;
+        domeMesh.castShadow = true;
+        this.object3d.add(domeMesh);
+        // ── 게이지 (곡면, 단일 메시 — 캔버스로 전부 그림) ──
+        this._gaugeCanvas = document.createElement('canvas');
+        this._gaugeCanvas.width = GAUGE_TEX_W;
+        this._gaugeCanvas.height = GAUGE_TEX_H;
+        this._gaugeCtx = this._gaugeCanvas.getContext('2d');
+        this._gaugeTexture = new THREE.CanvasTexture(this._gaugeCanvas);
+        this._gaugeTexture.minFilter = THREE.LinearFilter;
+        const gaugeR = radius * 1.04;
+        const gaugeGeo = new THREE.CylinderGeometry(gaugeR, gaugeR, gaugeH, 24, 1, true, -GAUGE_ARC / 2, GAUGE_ARC);
+        const gaugeMat = new THREE.MeshBasicMaterial({
+            map: this._gaugeTexture,
+            transparent: true,
+            alphaTest: 0.05
+        });
+        this._gaugeMesh = new THREE.Mesh(gaugeGeo, gaugeMat);
+        this._gaugeMesh.position.y = bodyH / 2;
+        this.object3d.add(this._gaugeMesh);
+        // 게이지 그리기
+        this._drawGauge();
+        // 수직 중앙 정렬
+        const totalH = bodyH + domeH;
+        this.object3d.children.forEach(child => {
+            child.position.y -= totalH / 2;
+        });
+    }
+    _drawGauge() {
+        const ctx = this._gaugeCtx;
+        const w = GAUGE_TEX_W;
+        const h = GAUGE_TEX_H;
+        const comp = this.component;
+        const value = Math.max(0, Math.min(100, comp.value ?? 0));
+        const level = value / 100;
+        const liquidColor = comp.getState('liquidColor') || LIQUID_COLOR;
+        // 레이아웃 — 캡슐 형태 유리 영역만
+        const gx = 6;
+        const gy = 10;
+        const gw = w - gx * 2;
+        const gh = h - gy * 2;
+        const gr = gw / 2; // 캡슐 라운드
+        ctx.clearRect(0, 0, w, h);
+        // ── 빈 영역 (어두운 배경) ──
+        ctx.fillStyle = 'rgba(15, 20, 25, 0.8)';
+        ctx.beginPath();
+        ctx.roundRect(gx, gy, gw, gh, gr);
+        ctx.fill();
+        // ── 액체 채움 ──
+        if (level > 0) {
+            const fillH = Math.round(gh * level);
+            const fillY = gy + gh - fillH;
+            ctx.save();
+            ctx.beginPath();
+            ctx.roundRect(gx, gy, gw, gh, gr);
+            ctx.clip();
+            ctx.fillStyle = liquidColor;
+            ctx.globalAlpha = LIQUID_OPACITY;
+            ctx.fillRect(gx, fillY, gw, fillH);
+            // 수면 하이라이트
+            ctx.globalAlpha = 0.3;
+            const surfGrad = ctx.createLinearGradient(0, fillY, 0, fillY + 4);
+            surfGrad.addColorStop(0, '#ffffff');
+            surfGrad.addColorStop(1, 'transparent');
+            ctx.fillStyle = surfGrad;
+            ctx.fillRect(gx, fillY, gw, 4);
+            ctx.globalAlpha = 1;
+            ctx.restore();
+        }
+        // ── 눈금 (우측, 20% 단위) ──
+        ctx.strokeStyle = 'rgba(255,255,255,0.4)';
+        for (let pct = 20; pct <= 80; pct += 20) {
+            const ty = gy + gh * (1 - pct / 100);
+            const tw = pct === 50 ? gw * 0.35 : gw * 0.22;
+            ctx.lineWidth = pct === 50 ? 1.5 : 1;
+            ctx.beginPath();
+            ctx.moveTo(gx + gw - tw, ty);
+            ctx.lineTo(gx + gw, ty);
+            ctx.stroke();
+        }
+        // ── 유리 반사 (좌측 하이라이트) ──
+        ctx.save();
+        ctx.beginPath();
+        ctx.roundRect(gx, gy, gw, gh, gr);
+        ctx.clip();
+        const hlGrad = ctx.createLinearGradient(gx, 0, gx + gw, 0);
+        hlGrad.addColorStop(0, 'rgba(255,255,255,0.12)');
+        hlGrad.addColorStop(0.3, 'rgba(255,255,255,0.03)');
+        hlGrad.addColorStop(1, 'rgba(255,255,255,0)');
+        ctx.fillStyle = hlGrad;
+        ctx.fillRect(gx, gy, gw, gh);
+        ctx.restore();
+        // ── 유리 테두리 ──
+        ctx.strokeStyle = 'rgba(255,255,255,0.15)';
+        ctx.lineWidth = 1;
+        ctx.beginPath();
+        ctx.roundRect(gx, gy, gw, gh, gr);
+        ctx.stroke();
+        // ── 수치 (게이지 중앙) ──
+        ctx.fillStyle = '#ffffff';
+        ctx.font = 'bold 14px sans-serif';
+        ctx.textAlign = 'center';
+        ctx.textBaseline = 'middle';
+        ctx.shadowColor = 'rgba(0,0,0,0.7)';
+        ctx.shadowBlur = 3;
+        ctx.fillText(`${Math.round(value)}%`, w / 2, gy + gh / 2);
+        ctx.shadowColor = 'transparent';
+        ctx.shadowBlur = 0;
+        this._gaugeTexture.needsUpdate = true;
+    }
+    updateFillLevel() {
+        this._drawGauge();
+    }
+    update() {
+        super.update();
+        this.updateFillLevel();
+    }
+    updateDimension() {
+        this.clear();
+        this.build();
+    }
+    onchange(after, before) {
+        super.onchange(after, before);
+        if ('value' in after || 'liquidColor' in after) {
+            this.updateFillLevel();
+        }
+    }
+}
+/* ── Component 클래스 ── */
+const MixedShape = ValueHolder(RectPath(Shape));
+let Tank = class Tank extends MixedShape {
+    is3dish() {
+        return true;
+    }
+    buildRealObject() {
+        return new Tank3D(this);
+    }
+    get nature() {
+        return NATURE;
+    }
+    onchange(after, before) {
+        super.onchange(after, before);
+        if ('value' in after || 'liquidColor' in after) {
+            this.invalidate();
+        }
+    }
+    render(ctx) {
+        const { left, top, width, height } = this.bounds;
+        renderTank(ctx, left, top, width, height, this.value, this.getState('liquidColor') || LIQUID_COLOR);
+        ctx.beginPath();
+        ctx.rect(left, top, width, height);
+    }
+};
+Tank = __decorate([
+    sceneComponent('tank')
+], Tank);
+export { Tank };
+//# sourceMappingURL=tank.js.map

package/dist/tank.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tank.js","sourceRoot":"","sources":["../src/tank.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport {\n  ComponentNature,\n  RealObjectGroup,\n  RealObject,\n  RectPath,\n  Shape,\n  ValueHolder,\n  sceneComponent\n} from '@hatiolab/things-scene'\nimport * as THREE from 'three'\n\nconst NATURE: ComponentNature = {\n  mutable: false,\n  resizable: true,\n  rotatable: true,\n  properties: [\n    {\n      type: 'number',\n      label: 'value',\n      name: 'value',\n      property: 'value'\n    },\n    {\n      type: 'color',\n      label: 'liquid-color',\n      name: 'liquidColor',\n      property: 'liquidColor'\n    }\n  ],\n  help: 'scene/component/tank'\n}\n\n/* ── 상수 ── */\nconst TANK_COLOR = '#aaaaaa'\nconst LIQUID_COLOR = '#4488ff'\nconst LIQUID_OPACITY = 0.8\n\n/* ── 게이지 ── */\nconst GAUGE_TEX_W = 64\nconst GAUGE_TEX_H = 256\nconst GAUGE_ARC = 0.22 // 라디안 (~13°) — 더 좁고 세련된 폭\nconst BEZEL_COLOR = '#2a2a2a'\n\n/* ── 2D 렌더 ── */\n\nfunction renderTank(\n  ctx: CanvasRenderingContext2D,\n  x: number,\n  y: number,\n  w: number,\n  h: number,\n  value: number,\n  liquidColor: string\n) {\n  const capH = Math.min(w * 0.25, h * 0.15)\n  const bodyY = y + capH\n  const bodyH = h - capH\n\n  // 외벽 — 본체 (불투명)\n  ctx.fillStyle = TANK_COLOR\n  ctx.fillRect(x, bodyY, w, bodyH)\n\n  // 외벽 — 상단 둥근 캡\n  ctx.beginPath()\n  ctx.ellipse(x + w / 2, bodyY, w / 2, capH, 0, Math.PI, 0)\n  ctx.fill()\n\n  // 외벽 윤곽선\n  ctx.strokeStyle = '#888888'\n  ctx.lineWidth = 1.5\n  ctx.beginPath()\n  ctx.moveTo(x, bodyY)\n  ctx.lineTo(x, bodyY + bodyH)\n  ctx.lineTo(x + w, bodyY + bodyH)\n  ctx.lineTo(x + w, bodyY)\n  ctx.stroke()\n  ctx.beginPath()\n  ctx.ellipse(x + w / 2, bodyY, w / 2, capH, 0, Math.PI, 0)\n  ctx.stroke()\n\n  // ── 전면 게이지 ──\n  const gw = Math.max(6, w * 0.15)\n  const gPad = bodyH * 0.15\n  const gx = x + (w - gw) / 2\n  const gy = bodyY + gPad\n  const gh = bodyH - gPad * 2\n  const gr = gw / 2\n\n  // 액체 채움\n  const level = Math.max(0, Math.min(100, value)) / 100\n  if (level > 0) {\n    const fp = 2\n    const fillH = (gh - fp * 2) * level\n    const fillY = gy + gh - fp - fillH\n\n    ctx.save()\n    ctx.beginPath()\n    ctx.roundRect(gx + fp, gy + fp, gw - fp * 2, gh - fp * 2, Math.max(0, gr - fp))\n    ctx.clip()\n\n    ctx.fillStyle = liquidColor || LIQUID_COLOR\n    ctx.globalAlpha = LIQUID_OPACITY\n    ctx.fillRect(gx + fp, fillY, gw - fp * 2, fillH)\n    ctx.globalAlpha = 1\n    ctx.restore()\n  }\n\n  // 눈금 (우측, 20% 단위)\n  ctx.strokeStyle = 'rgba(255,255,255,0.45)'\n  const tickTop = gy + 4\n  const tickAreaH = gh - 8\n  for (let pct = 20; pct <= 80; pct += 20) {\n    const ty = tickTop + tickAreaH * (1 - pct / 100)\n    const tw = pct === 50 ? gw * 0.35 : gw * 0.2\n    ctx.lineWidth = pct === 50 ? 1 : 0.5\n    ctx.beginPath()\n    ctx.moveTo(gx + gw - tw - 1, ty)\n    ctx.lineTo(gx + gw - 1, ty)\n    ctx.stroke()\n  }\n\n  // 게이지 테두리 (라운드)\n  ctx.strokeStyle = 'rgba(255,255,255,0.2)'\n  ctx.lineWidth = 1\n  ctx.beginPath()\n  ctx.roundRect(gx, gy, gw, gh, gr)\n  ctx.stroke()\n\n  // 수치 (게이지 중앙)\n  const pctText = `${Math.round(value)}%`\n  const fontSize = Math.max(7, Math.round(gw * 0.55))\n  ctx.font = `bold ${fontSize}px sans-serif`\n  ctx.textAlign = 'center'\n  ctx.textBaseline = 'middle'\n  ctx.shadowColor = 'rgba(0,0,0,0.7)'\n  ctx.shadowBlur = 2\n  ctx.fillStyle = '#ffffff'\n  ctx.fillText(pctText, gx + gw / 2, gy + gh / 2)\n  ctx.shadowColor = 'transparent'\n  ctx.shadowBlur = 0\n\n  // bounds path 등록\n  ctx.beginPath()\n  ctx.rect(x, y, w, h)\n}\n\n/* ── 3D 렌더 ── */\n\nexport class Tank3D extends RealObjectGroup {\n  private _gaugeCanvas!: HTMLCanvasElement\n  private _gaugeCtx!: CanvasRenderingContext2D\n  private _gaugeTexture!: THREE.CanvasTexture\n  private _gaugeMesh!: THREE.Mesh\n\n  // build 시 저장\n  private _bodyRadius = 0\n  private _bodyDepth = 0\n  private _domeH = 0\n\n  build() {\n    super.build()\n\n    const { width, height } = this.component.bounds\n    const { depth } = this.component.state\n    const d = depth || Math.max(width, height) * 2\n\n    const radius = Math.min(width, height) / 2\n    const domeH = radius * 0.5\n    const bodyH = d - domeH\n\n    this._bodyRadius = radius\n    this._bodyDepth = bodyH\n    this._domeH = domeH\n\n    const gaugeH = bodyH * 0.55\n\n    // ── 솔리드 탱크 본체 ──\n    const tankMat = new THREE.MeshStandardMaterial({\n      color: TANK_COLOR,\n      roughness: 0.35,\n      metalness: 0.5\n    })\n\n    // 원기둥 (닫힌 양 끝)\n    const wallGeo = new THREE.CylinderGeometry(radius, radius, bodyH, 32)\n    const wallMesh = new THREE.Mesh(wallGeo, tankMat)\n    wallMesh.position.y = bodyH / 2\n    wallMesh.castShadow = true\n    this.object3d.add(wallMesh)\n\n    // 상단 반구 돔\n    const domeGeo = new THREE.SphereGeometry(radius, 32, 16, 0, Math.PI * 2, 0, Math.PI / 2)\n    const domeMesh = new THREE.Mesh(domeGeo, tankMat)\n    domeMesh.position.y = bodyH\n    domeMesh.castShadow = true\n    this.object3d.add(domeMesh)\n\n    // ── 게이지 (곡면, 단일 메시 — 캔버스로 전부 그림) ──\n    this._gaugeCanvas = document.createElement('canvas')\n    this._gaugeCanvas.width = GAUGE_TEX_W\n    this._gaugeCanvas.height = GAUGE_TEX_H\n    this._gaugeCtx = this._gaugeCanvas.getContext('2d')!\n\n    this._gaugeTexture = new THREE.CanvasTexture(this._gaugeCanvas)\n    this._gaugeTexture.minFilter = THREE.LinearFilter\n\n    const gaugeR = radius * 1.04\n    const gaugeGeo = new THREE.CylinderGeometry(\n      gaugeR, gaugeR, gaugeH, 24, 1, true,\n      -GAUGE_ARC / 2, GAUGE_ARC\n    )\n    const gaugeMat = new THREE.MeshBasicMaterial({\n      map: this._gaugeTexture,\n      transparent: true,\n      alphaTest: 0.05\n    })\n    this._gaugeMesh = new THREE.Mesh(gaugeGeo, gaugeMat)\n    this._gaugeMesh.position.y = bodyH / 2\n    this.object3d.add(this._gaugeMesh)\n\n    // 게이지 그리기\n    this._drawGauge()\n\n    // 수직 중앙 정렬\n    const totalH = bodyH + domeH\n    this.object3d.children.forEach(child => {\n      child.position.y -= totalH / 2\n    })\n  }\n\n  private _drawGauge() {\n    const ctx = this._gaugeCtx\n    const w = GAUGE_TEX_W\n    const h = GAUGE_TEX_H\n    const comp = this.component as unknown as Tank\n    const value = Math.max(0, Math.min(100, comp.value ?? 0))\n    const level = value / 100\n    const liquidColor = comp.getState('liquidColor') || LIQUID_COLOR\n\n    // 레이아웃 — 캡슐 형태 유리 영역만\n    const gx = 6\n    const gy = 10\n    const gw = w - gx * 2\n    const gh = h - gy * 2\n    const gr = gw / 2           // 캡슐 라운드\n\n    ctx.clearRect(0, 0, w, h)\n\n    // ── 빈 영역 (어두운 배경) ──\n    ctx.fillStyle = 'rgba(15, 20, 25, 0.8)'\n    ctx.beginPath()\n    ctx.roundRect(gx, gy, gw, gh, gr)\n    ctx.fill()\n\n    // ── 액체 채움 ──\n    if (level > 0) {\n      const fillH = Math.round(gh * level)\n      const fillY = gy + gh - fillH\n\n      ctx.save()\n      ctx.beginPath()\n      ctx.roundRect(gx, gy, gw, gh, gr)\n      ctx.clip()\n\n      ctx.fillStyle = liquidColor\n      ctx.globalAlpha = LIQUID_OPACITY\n      ctx.fillRect(gx, fillY, gw, fillH)\n\n      // 수면 하이라이트\n      ctx.globalAlpha = 0.3\n      const surfGrad = ctx.createLinearGradient(0, fillY, 0, fillY + 4)\n      surfGrad.addColorStop(0, '#ffffff')\n      surfGrad.addColorStop(1, 'transparent')\n      ctx.fillStyle = surfGrad\n      ctx.fillRect(gx, fillY, gw, 4)\n\n      ctx.globalAlpha = 1\n      ctx.restore()\n    }\n\n    // ── 눈금 (우측, 20% 단위) ──\n    ctx.strokeStyle = 'rgba(255,255,255,0.4)'\n    for (let pct = 20; pct <= 80; pct += 20) {\n      const ty = gy + gh * (1 - pct / 100)\n      const tw = pct === 50 ? gw * 0.35 : gw * 0.22\n      ctx.lineWidth = pct === 50 ? 1.5 : 1\n      ctx.beginPath()\n      ctx.moveTo(gx + gw - tw, ty)\n      ctx.lineTo(gx + gw, ty)\n      ctx.stroke()\n    }\n\n    // ── 유리 반사 (좌측 하이라이트) ──\n    ctx.save()\n    ctx.beginPath()\n    ctx.roundRect(gx, gy, gw, gh, gr)\n    ctx.clip()\n    const hlGrad = ctx.createLinearGradient(gx, 0, gx + gw, 0)\n    hlGrad.addColorStop(0, 'rgba(255,255,255,0.12)')\n    hlGrad.addColorStop(0.3, 'rgba(255,255,255,0.03)')\n    hlGrad.addColorStop(1, 'rgba(255,255,255,0)')\n    ctx.fillStyle = hlGrad\n    ctx.fillRect(gx, gy, gw, gh)\n    ctx.restore()\n\n    // ── 유리 테두리 ──\n    ctx.strokeStyle = 'rgba(255,255,255,0.15)'\n    ctx.lineWidth = 1\n    ctx.beginPath()\n    ctx.roundRect(gx, gy, gw, gh, gr)\n    ctx.stroke()\n\n    // ── 수치 (게이지 중앙) ──\n    ctx.fillStyle = '#ffffff'\n    ctx.font = 'bold 14px sans-serif'\n    ctx.textAlign = 'center'\n    ctx.textBaseline = 'middle'\n    ctx.shadowColor = 'rgba(0,0,0,0.7)'\n    ctx.shadowBlur = 3\n    ctx.fillText(`${Math.round(value)}%`, w / 2, gy + gh / 2)\n    ctx.shadowColor = 'transparent'\n    ctx.shadowBlur = 0\n\n    this._gaugeTexture.needsUpdate = true\n  }\n\n  updateFillLevel() {\n    this._drawGauge()\n  }\n\n  update() {\n    super.update()\n    this.updateFillLevel()\n  }\n\n  updateDimension() {\n    this.clear()\n    this.build()\n  }\n\n  onchange(after: Record<string, unknown>, before: Record<string, unknown>) {\n    super.onchange(after, before)\n\n    if ('value' in after || 'liquidColor' in after) {\n      this.updateFillLevel()\n    }\n  }\n}\n\n/* ── Component 클래스 ── */\n\nconst MixedShape = ValueHolder(RectPath(Shape))\n\n@sceneComponent('tank')\nexport class Tank extends MixedShape {\n  is3dish() {\n    return true\n  }\n\n  buildRealObject(): RealObject | undefined {\n    return new Tank3D(this as any)\n  }\n\n  get nature() {\n    return NATURE\n  }\n\n  onchange(after: Record<string, unknown>, before: Record<string, unknown>) {\n    super.onchange(after, before)\n\n    if ('value' in after || 'liquidColor' in after) {\n      this.invalidate()\n    }\n  }\n\n  render(ctx: CanvasRenderingContext2D) {\n    const { left, top, width, height } = this.bounds\n\n    renderTank(ctx, left, top, width, height, this.value, this.getState('liquidColor') || LIQUID_COLOR)\n\n    ctx.beginPath()\n    ctx.rect(left, top, width, height)\n  }\n\n}\n"]}

package/dist/templates/carrier.d.ts

@@ -0,0 +1,19 @@
+declare const _default: {
+    type: string;
+    description: string;
+    group: string;
+    icon: string;
+    model: {
+        type: string;
+        left: number;
+        top: number;
+        width: number;
+        height: number;
+        depth: number;
+        fillStyle: string;
+        strokeStyle: string;
+        lineWidth: number;
+        alpha: number;
+    };
+};
+export default _default;

package/dist/templates/carrier.js

@@ -0,0 +1,20 @@
+const icon = new URL('../../icons/carrier.png', import.meta.url).href;
+export default {
+    type: 'carrier',
+    description: 'Carrier (Pallet/Box)',
+    group: 'warehouse' /* line|shape|textAndMedia|chartAndGauge|table|container|dataSource|IoT|3D|warehouse|form|etc */,
+    icon,
+    model: {
+        type: 'carrier',
+        left: 100,
+        top: 100,
+        width: 100,
+        height: 80,
+        depth: 30,
+        fillStyle: '#c4a265',
+        strokeStyle: '#999',
+        lineWidth: 1,
+        alpha: 1
+    }
+};
+//# sourceMappingURL=carrier.js.map

package/dist/templates/carrier.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"carrier.js","sourceRoot":"","sources":["../../src/templates/carrier.ts"],"names":[],"mappings":"AAAA,MAAM,IAAI,GAAG,IAAI,GAAG,CAAC,yBAAyB,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAA;AAErE,eAAe;IACb,IAAI,EAAE,SAAS;IACf,WAAW,EAAE,sBAAsB;IACnC,KAAK,EAAE,WAAW,CAAC,gGAAgG;IACnH,IAAI;IACJ,KAAK,EAAE;QACL,IAAI,EAAE,SAAS;QACf,IAAI,EAAE,GAAG;QACT,GAAG,EAAE,GAAG;QACR,KAAK,EAAE,GAAG;QACV,MAAM,EAAE,EAAE;QACV,KAAK,EAAE,EAAE;QACT,SAAS,EAAE,SAAS;QACpB,WAAW,EAAE,MAAM;QACnB,SAAS,EAAE,CAAC;QACZ,KAAK,EAAE,CAAC;KACT;CACF,CAAA","sourcesContent":["const icon = new URL('../../icons/carrier.png', import.meta.url).href\n\nexport default {\n  type: 'carrier',\n  description: 'Carrier (Pallet/Box)',\n  group: 'warehouse' /* line|shape|textAndMedia|chartAndGauge|table|container|dataSource|IoT|3D|warehouse|form|etc */,\n  icon,\n  model: {\n    type: 'carrier',\n    left: 100,\n    top: 100,\n    width: 100,\n    height: 80,\n    depth: 30,\n    fillStyle: '#c4a265',\n    strokeStyle: '#999',\n    lineWidth: 1,\n    alpha: 1\n  }\n}\n"]}

package/dist/templates/cube.js

@@ -11,7 +11,7 @@ export default {
         width: 100,
         height: 100,
         depth: 100,
-        fillStyle: '#ffffff',
+        fillStyle: '#aaaaaa',
         strokeStyle: '#999',
         lineWidth: 1,
         alpha: 1

package/dist/templates/cube.js.map

@@ -1 +1 @@
-{"version":3,"file":"cube.js","sourceRoot":"","sources":["../../src/templates/cube.ts"],"names":[],"mappings":"AAAA,MAAM,IAAI,GAAG,IAAI,GAAG,CAAC,sBAAsB,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAA;AAElE,eAAe;IACb,IAAI,EAAE,MAAM;IACZ,WAAW,EAAE,SAAS;IACtB,KAAK,EAAE,IAAI,CAAC,gGAAgG;IAC5G,IAAI;IACJ,KAAK,EAAE;QACL,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,GAAG;QACT,GAAG,EAAE,GAAG;QACR,KAAK,EAAE,GAAG;QACV,MAAM,EAAE,GAAG;QACX,KAAK,EAAE,GAAG;QACV,SAAS,EAAE,SAAS;QACpB,WAAW,EAAE,MAAM;QACnB,SAAS,EAAE,CAAC;QACZ,KAAK,EAAE,CAAC;KACT;CACF,CAAA","sourcesContent":["const icon = new URL('../../icons/cube.png', import.meta.url).href\n\nexport default {\n  type: 'cube',\n  description: '3D cube',\n  group: '3D' /* line|shape|textAndMedia|chartAndGauge|table|container|dataSource|IoT|3D|warehouse|form|etc */,\n  icon,\n  model: {\n    type: 'cube',\n    left: 100,\n    top: 100,\n    width: 100,\n    height: 100,\n    depth: 100,\n    fillStyle: '#ffffff',\n    strokeStyle: '#999',\n    lineWidth: 1,\n    alpha: 1\n  }\n}\n"]}
+{"version":3,"file":"cube.js","sourceRoot":"","sources":["../../src/templates/cube.ts"],"names":[],"mappings":"AAAA,MAAM,IAAI,GAAG,IAAI,GAAG,CAAC,sBAAsB,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAA;AAElE,eAAe;IACb,IAAI,EAAE,MAAM;IACZ,WAAW,EAAE,SAAS;IACtB,KAAK,EAAE,IAAI,CAAC,gGAAgG;IAC5G,IAAI;IACJ,KAAK,EAAE;QACL,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,GAAG;QACT,GAAG,EAAE,GAAG;QACR,KAAK,EAAE,GAAG;QACV,MAAM,EAAE,GAAG;QACX,KAAK,EAAE,GAAG;QACV,SAAS,EAAE,SAAS;QACpB,WAAW,EAAE,MAAM;QACnB,SAAS,EAAE,CAAC;QACZ,KAAK,EAAE,CAAC;KACT;CACF,CAAA","sourcesContent":["const icon = new URL('../../icons/cube.png', import.meta.url).href\n\nexport default {\n  type: 'cube',\n  description: '3D cube',\n  group: '3D' /* line|shape|textAndMedia|chartAndGauge|table|container|dataSource|IoT|3D|warehouse|form|etc */,\n  icon,\n  model: {\n    type: 'cube',\n    left: 100,\n    top: 100,\n    width: 100,\n    height: 100,\n    depth: 100,\n    fillStyle: '#aaaaaa',\n    strokeStyle: '#999',\n    lineWidth: 1,\n    alpha: 1\n  }\n}\n"]}

package/dist/templates/cylinder.js

@@ -8,10 +8,10 @@ export default {
         type: 'cylinder',
         cx: 100,
         cy: 100,
-        rx: 100,
-        ry: 100,
+        rx: 50,
+        ry: 50,
         depth: 100,
-        fillStyle: '#ffffff',
+        fillStyle: '#aaaaaa',
         strokeStyle: '#999',
         lineWidth: 1,
         alpha: 1

package/dist/templates/cylinder.js.map

@@ -1 +1 @@
-{"version":3,"file":"cylinder.js","sourceRoot":"","sources":["../../src/templates/cylinder.ts"],"names":[],"mappings":"AAAA,MAAM,IAAI,GAAG,IAAI,GAAG,CAAC,0BAA0B,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAA;AAEtE,eAAe;IACb,IAAI,EAAE,UAAU;IAChB,WAAW,EAAE,aAAa;IAC1B,KAAK,EAAE,IAAI,CAAC,gGAAgG;IAC5G,IAAI;IACJ,KAAK,EAAE;QACL,IAAI,EAAE,UAAU;QAChB,EAAE,EAAE,GAAG;QACP,EAAE,EAAE,GAAG;QACP,EAAE,EAAE,GAAG;QACP,EAAE,EAAE,GAAG;QACP,KAAK,EAAE,GAAG;QACV,SAAS,EAAE,SAAS;QACpB,WAAW,EAAE,MAAM;QACnB,SAAS,EAAE,CAAC;QACZ,KAAK,EAAE,CAAC;KACT;CACF,CAAA","sourcesContent":["const icon = new URL('../../icons/cylinder.png', import.meta.url).href\n\nexport default {\n  type: 'cylinder',\n  description: '3D cylinder',\n  group: '3D' /* line|shape|textAndMedia|chartAndGauge|table|container|dataSource|IoT|3D|warehouse|form|etc */,\n  icon,\n  model: {\n    type: 'cylinder',\n    cx: 100,\n    cy: 100,\n    rx: 100,\n    ry: 100,\n    depth: 100,\n    fillStyle: '#ffffff',\n    strokeStyle: '#999',\n    lineWidth: 1,\n    alpha: 1\n  }\n}\n"]}
+{"version":3,"file":"cylinder.js","sourceRoot":"","sources":["../../src/templates/cylinder.ts"],"names":[],"mappings":"AAAA,MAAM,IAAI,GAAG,IAAI,GAAG,CAAC,0BAA0B,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAA;AAEtE,eAAe;IACb,IAAI,EAAE,UAAU;IAChB,WAAW,EAAE,aAAa;IAC1B,KAAK,EAAE,IAAI,CAAC,gGAAgG;IAC5G,IAAI;IACJ,KAAK,EAAE;QACL,IAAI,EAAE,UAAU;QAChB,EAAE,EAAE,GAAG;QACP,EAAE,EAAE,GAAG;QACP,EAAE,EAAE,EAAE;QACN,EAAE,EAAE,EAAE;QACN,KAAK,EAAE,GAAG;QACV,SAAS,EAAE,SAAS;QACpB,WAAW,EAAE,MAAM;QACnB,SAAS,EAAE,CAAC;QACZ,KAAK,EAAE,CAAC;KACT;CACF,CAAA","sourcesContent":["const icon = new URL('../../icons/cylinder.png', import.meta.url).href\n\nexport default {\n  type: 'cylinder',\n  description: '3D cylinder',\n  group: '3D' /* line|shape|textAndMedia|chartAndGauge|table|container|dataSource|IoT|3D|warehouse|form|etc */,\n  icon,\n  model: {\n    type: 'cylinder',\n    cx: 100,\n    cy: 100,\n    rx: 50,\n    ry: 50,\n    depth: 100,\n    fillStyle: '#aaaaaa',\n    strokeStyle: '#999',\n    lineWidth: 1,\n    alpha: 1\n  }\n}\n"]}

package/dist/templates/index.d.ts

@@ -100,6 +100,7 @@ declare const _default: ({
         rx: number;
         ry: number;
         rz: number;
+        zPos: number;
         fillStyle: string;
         strokeStyle: string;
         lineWidth: number;

package/dist/templates/index.js

@@ -11,6 +11,10 @@ import desk from './desk.js';
 import camera from './camera.js';
 import light from './light.js';
 import GLTFObject from './gltf-object.js';
+import signalTower from './signal-tower.js';
+import tank from './tank.js';
+import vehicle from './vehicle.js';
+import carrier from './carrier.js';
 export default [
     threeContainer,
     visualizer,
@@ -24,6 +28,10 @@ export default [
     banner,
     wall,
     desk,
-    GLTFObject
+    GLTFObject,
+    signalTower,
+    tank,
+    vehicle,
+    carrier
 ];
 //# sourceMappingURL=index.js.map

package/dist/templates/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/templates/index.ts"],"names":[],"mappings":"AAAA,OAAO,cAAc,MAAM,mBAAmB,CAAA;AAC9C,OAAO,UAAU,MAAM,iBAAiB,CAAA;AACxC,OAAO,SAAS,MAAM,iBAAiB,CAAA;AACvC,OAAO,IAAI,MAAM,WAAW,CAAA;AAC5B,OAAO,QAAQ,MAAM,eAAe,CAAA;AACpC,OAAO,MAAM,MAAM,aAAa,CAAA;AAChC,OAAO,MAAM,MAAM,aAAa,CAAA;AAChC,OAAO,MAAM,MAAM,aAAa,CAAA;AAChC,OAAO,IAAI,MAAM,WAAW,CAAA;AAC5B,OAAO,IAAI,MAAM,WAAW,CAAA;AAC5B,OAAO,MAAM,MAAM,aAAa,CAAA;AAChC,OAAO,KAAK,MAAM,YAAY,CAAA;AAC9B,OAAO,UAAU,MAAM,kBAAkB,CAAA;AAEzC,eAAe;IACb,cAAc;IACd,UAAU;IACV,SAAS;IACT,MAAM;IACN,KAAK;IACL,IAAI;IACJ,QAAQ;IACR,MAAM;IACN,MAAM;IACN,MAAM;IACN,IAAI;IACJ,IAAI;IACJ,UAAU;CACX,CAAA","sourcesContent":["import threeContainer from './3d-container.js'\nimport visualizer from './visualizer.js'\nimport rackTable from './rack-table.js'\nimport cube from './cube.js'\nimport cylinder from './cylinder.js'\nimport sphere from './sphere.js'\nimport banner from './banner.js'\nimport sprite from './sprite.js'\nimport wall from './wall.js'\nimport desk from './desk.js'\nimport camera from './camera.js'\nimport light from './light.js'\nimport GLTFObject from './gltf-object.js'\n\nexport default [\n  threeContainer,\n  visualizer,\n  rackTable,\n  camera,\n  light,\n  cube,\n  cylinder,\n  sphere,\n  sprite,\n  banner,\n  wall,\n  desk,\n  GLTFObject\n]\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/templates/index.ts"],"names":[],"mappings":"AAAA,OAAO,cAAc,MAAM,mBAAmB,CAAA;AAC9C,OAAO,UAAU,MAAM,iBAAiB,CAAA;AACxC,OAAO,SAAS,MAAM,iBAAiB,CAAA;AACvC,OAAO,IAAI,MAAM,WAAW,CAAA;AAC5B,OAAO,QAAQ,MAAM,eAAe,CAAA;AACpC,OAAO,MAAM,MAAM,aAAa,CAAA;AAChC,OAAO,MAAM,MAAM,aAAa,CAAA;AAChC,OAAO,MAAM,MAAM,aAAa,CAAA;AAChC,OAAO,IAAI,MAAM,WAAW,CAAA;AAC5B,OAAO,IAAI,MAAM,WAAW,CAAA;AAC5B,OAAO,MAAM,MAAM,aAAa,CAAA;AAChC,OAAO,KAAK,MAAM,YAAY,CAAA;AAC9B,OAAO,UAAU,MAAM,kBAAkB,CAAA;AACzC,OAAO,WAAW,MAAM,mBAAmB,CAAA;AAC3C,OAAO,IAAI,MAAM,WAAW,CAAA;AAC5B,OAAO,OAAO,MAAM,cAAc,CAAA;AAClC,OAAO,OAAO,MAAM,cAAc,CAAA;AAElC,eAAe;IACb,cAAc;IACd,UAAU;IACV,SAAS;IACT,MAAM;IACN,KAAK;IACL,IAAI;IACJ,QAAQ;IACR,MAAM;IACN,MAAM;IACN,MAAM;IACN,IAAI;IACJ,IAAI;IACJ,UAAU;IACV,WAAW;IACX,IAAI;IACJ,OAAO;IACP,OAAO;CACR,CAAA","sourcesContent":["import threeContainer from './3d-container.js'\nimport visualizer from './visualizer.js'\nimport rackTable from './rack-table.js'\nimport cube from './cube.js'\nimport cylinder from './cylinder.js'\nimport sphere from './sphere.js'\nimport banner from './banner.js'\nimport sprite from './sprite.js'\nimport wall from './wall.js'\nimport desk from './desk.js'\nimport camera from './camera.js'\nimport light from './light.js'\nimport GLTFObject from './gltf-object.js'\nimport signalTower from './signal-tower.js'\nimport tank from './tank.js'\nimport vehicle from './vehicle.js'\nimport carrier from './carrier.js'\n\nexport default [\n  threeContainer,\n  visualizer,\n  rackTable,\n  camera,\n  light,\n  cube,\n  cylinder,\n  sphere,\n  sprite,\n  banner,\n  wall,\n  desk,\n  GLTFObject,\n  signalTower,\n  tank,\n  vehicle,\n  carrier\n]\n"]}

package/dist/templates/signal-tower.d.ts

@@ -0,0 +1,21 @@
+declare const _default: {
+    type: string;
+    description: string;
+    group: string;
+    icon: string;
+    model: {
+        type: string;
+        left: number;
+        top: number;
+        width: number;
+        height: number;
+        depth: number;
+        fillStyle: string;
+        strokeStyle: string;
+        lineWidth: number;
+        alpha: number;
+        value: number;
+        blink: boolean;
+    };
+};
+export default _default;

package/dist/templates/signal-tower.js

@@ -0,0 +1,22 @@
+const icon = new URL('../../icons/signal-tower.png', import.meta.url).href;
+export default {
+    type: 'signal-tower',
+    description: 'Signal Tower',
+    group: '3D' /* line|shape|textAndMedia|chartAndGauge|table|container|dataSource|IoT|3D|warehouse|form|etc */,
+    icon,
+    model: {
+        type: 'signal-tower',
+        left: 100,
+        top: 100,
+        width: 10,
+        height: 120,
+        depth: 100,
+        fillStyle: '#333333',
+        strokeStyle: '#999',
+        lineWidth: 1,
+        alpha: 1,
+        value: 0,
+        blink: false
+    }
+};
+//# sourceMappingURL=signal-tower.js.map

package/dist/templates/signal-tower.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"signal-tower.js","sourceRoot":"","sources":["../../src/templates/signal-tower.ts"],"names":[],"mappings":"AAAA,MAAM,IAAI,GAAG,IAAI,GAAG,CAAC,8BAA8B,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAA;AAE1E,eAAe;IACb,IAAI,EAAE,cAAc;IACpB,WAAW,EAAE,cAAc;IAC3B,KAAK,EAAE,IAAI,CAAC,gGAAgG;IAC5G,IAAI;IACJ,KAAK,EAAE;QACL,IAAI,EAAE,cAAc;QACpB,IAAI,EAAE,GAAG;QACT,GAAG,EAAE,GAAG;QACR,KAAK,EAAE,EAAE;QACT,MAAM,EAAE,GAAG;QACX,KAAK,EAAE,GAAG;QACV,SAAS,EAAE,SAAS;QACpB,WAAW,EAAE,MAAM;QACnB,SAAS,EAAE,CAAC;QACZ,KAAK,EAAE,CAAC;QACR,KAAK,EAAE,CAAC;QACR,KAAK,EAAE,KAAK;KACb;CACF,CAAA","sourcesContent":["const icon = new URL('../../icons/signal-tower.png', import.meta.url).href\n\nexport default {\n  type: 'signal-tower',\n  description: 'Signal Tower',\n  group: '3D' /* line|shape|textAndMedia|chartAndGauge|table|container|dataSource|IoT|3D|warehouse|form|etc */,\n  icon,\n  model: {\n    type: 'signal-tower',\n    left: 100,\n    top: 100,\n    width: 10,\n    height: 120,\n    depth: 100,\n    fillStyle: '#333333',\n    strokeStyle: '#999',\n    lineWidth: 1,\n    alpha: 1,\n    value: 0,\n    blink: false\n  }\n}\n"]}

package/dist/templates/sphere.d.ts

@@ -10,6 +10,7 @@ declare const _default: {
         rx: number;
         ry: number;
         rz: number;
+        zPos: number;
         fillStyle: string;
         strokeStyle: string;
         lineWidth: number;

package/dist/templates/sphere.js

@@ -8,10 +8,11 @@ export default {
         type: 'sphere',
         cx: 100,
         cy: 100,
-        rx: 100,
-        ry: 100,
-        rz: 100,
-        fillStyle: '#ffffff',
+        rx: 50,
+        ry: 50,
+        rz: 50,
+        zPos: 50,
+        fillStyle: '#aaaaaa',
         strokeStyle: '#999',
         lineWidth: 1,
         alpha: 1

package/dist/templates/sphere.js.map

@@ -1 +1 @@
-{"version":3,"file":"sphere.js","sourceRoot":"","sources":["../../src/templates/sphere.ts"],"names":[],"mappings":"AAAA,MAAM,IAAI,GAAG,IAAI,GAAG,CAAC,wBAAwB,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAA;AAEpE,eAAe;IACb,IAAI,EAAE,QAAQ;IACd,WAAW,EAAE,WAAW;IACxB,KAAK,EAAE,IAAI,CAAC,gGAAgG;IAC5G,IAAI;IACJ,KAAK,EAAE;QACL,IAAI,EAAE,QAAQ;QACd,EAAE,EAAE,GAAG;QACP,EAAE,EAAE,GAAG;QACP,EAAE,EAAE,GAAG;QACP,EAAE,EAAE,GAAG;QACP,EAAE,EAAE,GAAG;QACP,SAAS,EAAE,SAAS;QACpB,WAAW,EAAE,MAAM;QACnB,SAAS,EAAE,CAAC;QACZ,KAAK,EAAE,CAAC;KACT;CACF,CAAA","sourcesContent":["const icon = new URL('../../icons/sphere.png', import.meta.url).href\n\nexport default {\n  type: 'sphere',\n  description: '3D sphere',\n  group: '3D' /* line|shape|textAndMedia|chartAndGauge|table|container|dataSource|IoT|3D|warehouse|form|etc */,\n  icon,\n  model: {\n    type: 'sphere',\n    cx: 100,\n    cy: 100,\n    rx: 100,\n    ry: 100,\n    rz: 100,\n    fillStyle: '#ffffff',\n    strokeStyle: '#999',\n    lineWidth: 1,\n    alpha: 1\n  }\n}\n"]}
+{"version":3,"file":"sphere.js","sourceRoot":"","sources":["../../src/templates/sphere.ts"],"names":[],"mappings":"AAAA,MAAM,IAAI,GAAG,IAAI,GAAG,CAAC,wBAAwB,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAA;AAEpE,eAAe;IACb,IAAI,EAAE,QAAQ;IACd,WAAW,EAAE,WAAW;IACxB,KAAK,EAAE,IAAI,CAAC,gGAAgG;IAC5G,IAAI;IACJ,KAAK,EAAE;QACL,IAAI,EAAE,QAAQ;QACd,EAAE,EAAE,GAAG;QACP,EAAE,EAAE,GAAG;QACP,EAAE,EAAE,EAAE;QACN,EAAE,EAAE,EAAE;QACN,EAAE,EAAE,EAAE;QACN,IAAI,EAAE,EAAE;QACR,SAAS,EAAE,SAAS;QACpB,WAAW,EAAE,MAAM;QACnB,SAAS,EAAE,CAAC;QACZ,KAAK,EAAE,CAAC;KACT;CACF,CAAA","sourcesContent":["const icon = new URL('../../icons/sphere.png', import.meta.url).href\n\nexport default {\n  type: 'sphere',\n  description: '3D sphere',\n  group: '3D' /* line|shape|textAndMedia|chartAndGauge|table|container|dataSource|IoT|3D|warehouse|form|etc */,\n  icon,\n  model: {\n    type: 'sphere',\n    cx: 100,\n    cy: 100,\n    rx: 50,\n    ry: 50,\n    rz: 50,\n    zPos: 50,\n    fillStyle: '#aaaaaa',\n    strokeStyle: '#999',\n    lineWidth: 1,\n    alpha: 1\n  }\n}\n"]}

package/dist/templates/tank.d.ts

@@ -0,0 +1,21 @@
+declare const _default: {
+    type: string;
+    description: string;
+    group: string;
+    icon: string;
+    model: {
+        type: string;
+        left: number;
+        top: number;
+        width: number;
+        height: number;
+        depth: number;
+        fillStyle: string;
+        strokeStyle: string;
+        lineWidth: number;
+        alpha: number;
+        value: number;
+        liquidColor: string;
+    };
+};
+export default _default;

package/dist/templates/tank.js

@@ -0,0 +1,22 @@
+const icon = new URL('../../icons/tank.png', import.meta.url).href;
+export default {
+    type: 'tank',
+    description: 'Tank',
+    group: '3D' /* line|shape|textAndMedia|chartAndGauge|table|container|dataSource|IoT|3D|warehouse|form|etc */,
+    icon,
+    model: {
+        type: 'tank',
+        left: 100,
+        top: 100,
+        width: 80,
+        height: 120,
+        depth: 100,
+        fillStyle: '#aaaaaa',
+        strokeStyle: '#999',
+        lineWidth: 1,
+        alpha: 1,
+        value: 50,
+        liquidColor: 'red'
+    }
+};
+//# sourceMappingURL=tank.js.map

package/dist/templates/tank.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tank.js","sourceRoot":"","sources":["../../src/templates/tank.ts"],"names":[],"mappings":"AAAA,MAAM,IAAI,GAAG,IAAI,GAAG,CAAC,sBAAsB,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAA;AAElE,eAAe;IACb,IAAI,EAAE,MAAM;IACZ,WAAW,EAAE,MAAM;IACnB,KAAK,EAAE,IAAI,CAAC,gGAAgG;IAC5G,IAAI;IACJ,KAAK,EAAE;QACL,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,GAAG;QACT,GAAG,EAAE,GAAG;QACR,KAAK,EAAE,EAAE;QACT,MAAM,EAAE,GAAG;QACX,KAAK,EAAE,GAAG;QACV,SAAS,EAAE,SAAS;QACpB,WAAW,EAAE,MAAM;QACnB,SAAS,EAAE,CAAC;QACZ,KAAK,EAAE,CAAC;QACR,KAAK,EAAE,EAAE;QACT,WAAW,EAAE,KAAK;KACnB;CACF,CAAA","sourcesContent":["const icon = new URL('../../icons/tank.png', import.meta.url).href\n\nexport default {\n  type: 'tank',\n  description: 'Tank',\n  group: '3D' /* line|shape|textAndMedia|chartAndGauge|table|container|dataSource|IoT|3D|warehouse|form|etc */,\n  icon,\n  model: {\n    type: 'tank',\n    left: 100,\n    top: 100,\n    width: 80,\n    height: 120,\n    depth: 100,\n    fillStyle: '#aaaaaa',\n    strokeStyle: '#999',\n    lineWidth: 1,\n    alpha: 1,\n    value: 50,\n    liquidColor: 'red'\n  }\n}\n"]}

package/dist/templates/vehicle.d.ts

@@ -0,0 +1,19 @@
+declare const _default: {
+    type: string;
+    description: string;
+    group: string;
+    icon: string;
+    model: {
+        type: string;
+        left: number;
+        top: number;
+        width: number;
+        height: number;
+        depth: number;
+        fillStyle: string;
+        strokeStyle: string;
+        lineWidth: number;
+        alpha: number;
+    };
+};
+export default _default;