@loongbao-web-gis-utils/draw-utils-core 0.1.0

package/dist/DrawTool.d.ts

@@ -0,0 +1,50 @@
+import type { FeatureInfo } from './types';
+import { DrawState } from './types';
+import type { DrawConfig } from './types';
+import type { IGisAdapter, IBizCallbacks } from './adapter';
+export interface DrawToolOptions {
+    adapter: IGisAdapter;
+    bizCallbacks?: IBizCallbacks;
+}
+export declare class DrawTool {
+    private adapter;
+    private renderer;
+    private bizCallbacks;
+    private stateMachine;
+    private config;
+    private featureMap;
+    private currentDrawing;
+    private drawnCount;
+    private roundFeatureIds;
+    private uiApp;
+    private uiMountEl;
+    private editingFeature;
+    private measureLabels;
+    constructor(options: DrawToolOptions);
+    onMouseMove(coord: [number, number]): void;
+    onClick(coord: [number, number]): void;
+    onDblClick(coord: [number, number]): Promise<void>;
+    startDraw(config: DrawConfig): void;
+    stopDraw(): void;
+    destroy(): void;
+    getFeature(id: number): FeatureInfo | undefined;
+    getAllFeatures(): FeatureInfo[];
+    getState(): DrawState;
+    updateFeatureInfo(f: FeatureInfo): void;
+    private canEditFeature;
+    private canDeleteFeature;
+    private makeFeature;
+    private invokeInsert;
+    private editFeature;
+    private requestDeleteFeature;
+    private doDelete;
+    private updateMeasureLabels;
+    private clearMeasureLabels;
+    private log;
+    private showToast;
+    private showDeleteConfirm;
+    private showEditPanel;
+    private mountUi;
+    private dragPanel;
+    private destroyUi;
+}

package/dist/DrawTool.js

@@ -0,0 +1,358 @@
+import { DrawState } from './types';
+import { DEFAULT_DRAW_CONFIG, DEFAULT_RECT_DETAILS, DEFAULT_TRIANGLE_DETAILS, DEFAULT_CIRCLE_DETAILS, DEFAULT_LINE_DETAILS, DEFAULT_POLYLINE_DETAILS, DEFAULT_SHAPE_DETAILS } from './types';
+import { StateMachine } from './state-machine';
+import { generateUniqueId, generateFeatureName, toWktPolygon, toWktLineString, geoDistance, geoArea, geoPolygonCenter, formatMeters, formatArea } from './utils';
+import { createApp, h, ref, watch } from 'vue';
+const PRESET_COLORS = ['#ef4444', '#f97316', '#eab308', '#22c55e', '#06b6d4', '#3b82f6', '#8b5cf6', '#ec4899', '#ffffff', '#000000', '#9ca3af', '#6b7280'];
+function rgbaFromHex(h) { const x = h.replace('#', ''); return `rgba(${parseInt(x.substring(0, 2), 16)},${parseInt(x.substring(2, 4), 16)},${parseInt(x.substring(4, 6), 16)},1)`; }
+function rgbaToHex(r) { const m = r.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/); if (!m)
+    return '#000000'; return '#' + [m[1], m[2], m[3]].map(v => parseInt(v).toString(16).padStart(2, '0')).join(''); }
+function buildCircleRing(cx, r, seg) { const ring = []; for (let i = 0; i < seg; i++) {
+    const a = 2 * Math.PI * i / seg;
+    ring.push([cx[0] + r * Math.cos(a), cx[1] + r * Math.sin(a)]);
+} ; ring.push(ring[0]); return ring; }
+function metersPerDeg(lat) { return 111320 * Math.cos(lat * Math.PI / 180); }
+function parseWktLocal(wkt) { const m = wkt.match(/\((.*)\)/); if (!m)
+    return null; let inner = m[1].replace(/^\(/, '').replace(/\)$/, ''); return inner.split(',').map(p => { const [x, y] = p.trim().split(/\s+/).map(Number); return [x, y]; }); }
+export class DrawTool {
+    adapter;
+    renderer;
+    bizCallbacks;
+    stateMachine = new StateMachine();
+    config = null;
+    featureMap = new Map();
+    currentDrawing = null;
+    drawnCount = 0;
+    roundFeatureIds = new Set();
+    uiApp = null;
+    uiMountEl = null;
+    editingFeature = null;
+    measureLabels = [];
+    constructor(options) {
+        this.adapter = options.adapter;
+        this.renderer = this.adapter.getFeatureRenderer();
+        this.bizCallbacks = options.bizCallbacks || {};
+        this.renderer.onHoverAction((action, f) => { if (action === 'edit')
+            this.editFeature(f.id);
+        else if (action === 'delete')
+            this.requestDeleteFeature(f.id); this.renderer.hideHoverActions(); });
+    }
+    onMouseMove(coord) {
+        if (this.stateMachine.isDrawing() && this.currentDrawing) {
+            const { type, points } = this.currentDrawing;
+            if (type === 'circle' && points.length >= 1)
+                this.renderer.updatePreview([points[0], coord], type);
+            else if (type === 'rect' && points.length >= 1)
+                this.renderer.updatePreview([points[0], coord], type);
+            else if (type === 'line' && points.length >= 1)
+                this.renderer.updatePreview([...points, coord], type);
+            else if ((type === 'polyline' || type === 'customShape') && points.length >= 1)
+                this.renderer.updatePreview([...points, coord], type);
+            else if (type === 'triangle' && points.length >= 1) {
+                if (points.length === 1)
+                    this.renderer.updatePreview([points[0], coord, coord], type);
+                else
+                    this.renderer.updatePreview([...points, coord], type);
+            }
+            this.updateMeasureLabels(type, points, coord);
+            return;
+        }
+        if (this.stateMachine.isEditing())
+            return;
+        if (this.stateMachine.isIdle()) {
+            const f = this.renderer.getFeatureAtCoordinate(coord);
+            this.renderer.highlightHoverFeature(f ? f.id : null);
+        }
+    }
+    onClick(coord) {
+        if (this.stateMachine.isDrawing() && this.currentDrawing) {
+            const t = this.currentDrawing.type;
+            if (t === 'triangle' && this.currentDrawing.points.length === 1) {
+                this.currentDrawing.points.push(coord);
+                return;
+            }
+            if (t === 'polyline' || t === 'customShape') {
+                this.currentDrawing.points.push(coord);
+                return;
+            }
+            return;
+        }
+        if (this.stateMachine.isEditing())
+            return;
+        if (this.stateMachine.isIdle()) {
+            const f = this.renderer.getFeatureAtCoordinate(coord);
+            if (f && (this.canEditFeature(f.id) || this.canDeleteFeature(f.id)))
+                this.renderer.showHoverActions(f, coord, { showEdit: this.canEditFeature(f.id), showDelete: this.canDeleteFeature(f.id) });
+            else
+                this.renderer.hideHoverActions();
+            return;
+        }
+    }
+    async onDblClick(coord) {
+        if (this.stateMachine.isIdle()) {
+            if (this.renderer.getFeatureAtCoordinate(coord))
+                return;
+            const lim = this.config?.limit ?? 1;
+            if (!this.config || lim <= 0)
+                return;
+            if (this.drawnCount >= lim) {
+                if (this.config?.enableLimitMsg)
+                    this.showToast('绘制元素数量超出限制');
+                return;
+            }
+            this.stateMachine.transitionTo(DrawState.DRAWING);
+            this.currentDrawing = { type: this.config.type, points: [coord] };
+            this.renderer.startDrawing(this.config.type);
+            this.log('DRAWING start', { type: this.config.type, point: coord, count: this.drawnCount + 1 });
+            return;
+        }
+        if (!this.stateMachine.isDrawing() || !this.currentDrawing)
+            return;
+        const { type, points } = this.currentDrawing;
+        if (type === 'customShape' || type === 'triangle') {
+            const all = [...points, coord];
+            const u = new Set(all.map(p => `${p[0]},${p[1]}`));
+            if (u.size < 3) {
+                this.renderer.cancelDrawing();
+                this.stateMachine.forceTransitionTo(DrawState.IDLE);
+                this.currentDrawing = null;
+                this.clearMeasureLabels();
+                return;
+            }
+        }
+        const feature = this.makeFeature(type, points, coord);
+        if (!feature) {
+            this.stateMachine.forceTransitionTo(DrawState.IDLE);
+            this.currentDrawing = null;
+            this.clearMeasureLabels();
+            return;
+        }
+        if (await this.invokeInsert(feature)) {
+            this.featureMap.set(feature.id, feature);
+            this.roundFeatureIds.add(feature.id);
+            this.renderer.cancelDrawing();
+            this.renderer.renderFeature(feature);
+            this.drawnCount++;
+            this.renderer.refreshAllFeatureLabels(this.getAllFeatures());
+        }
+        this.stateMachine.forceTransitionTo(DrawState.IDLE);
+        this.currentDrawing = null;
+        this.clearMeasureLabels();
+        this.log('finishDrawing', { type, id: feature.id, drawnCount: this.drawnCount });
+    }
+    startDraw(config) {
+        if (!this.stateMachine.isIdle())
+            throw new Error('Cannot start drawing while not in idle state');
+        this.config = { ...DEFAULT_DRAW_CONFIG, ...config, name: config.name || generateFeatureName() };
+        this.drawnCount = 0;
+        this.roundFeatureIds.clear();
+        this.log('startDraw', { type: this.config.type, limit: this.config.limit, enableEdit: this.config.enableEdit, enableDel: this.config.enableDel, oldFeatures: this.config.oldFeatures?.length || 0 });
+        this.renderer.setAllFeatureLabels(this.config.showLenForAll ?? false, this.config.showAreaForAll ?? false);
+        this.config.oldFeatures?.forEach(f => { this.featureMap.set(f.id, f); this.renderer.renderFeature(f); });
+        this.renderer.refreshAllFeatureLabels(this.getAllFeatures());
+    }
+    stopDraw() { this.destroyUi(); this.clearMeasureLabels(); this.stateMachine.forceTransitionTo(DrawState.IDLE); this.config = null; this.currentDrawing = null; this.drawnCount = 0; this.featureMap.clear(); this.roundFeatureIds.clear(); this.renderer.clearAll(); }
+    destroy() { this.destroyUi(); this.stopDraw(); this.clearMeasureLabels(); this.adapter.destroy(); }
+    getFeature(id) { return this.featureMap.get(id); }
+    ;
+    getAllFeatures() { return Array.from(this.featureMap.values()); }
+    ;
+    getState() { return this.stateMachine.state; }
+    updateFeatureInfo(f) { this.featureMap.set(f.id, f); }
+    canEditFeature(id) { return this.config?.enableEdit ?? false; }
+    canDeleteFeature(id) { return this.config?.enableDel ?? false; }
+    makeFeature(type, points, dblCoord) {
+        const name = this.config?.name || generateFeatureName();
+        const id = generateUniqueId();
+        switch (type) {
+            case 'rect': {
+                const [a, b] = points;
+                const c = dblCoord;
+                const ring = [[a[0], a[1]], [c[0], a[1]], [c[0], c[1]], [a[0], c[1]], [a[0], a[1]]];
+                return { id, type, wkt: toWktPolygon(ring), details: { ...DEFAULT_RECT_DETAILS, name } };
+            }
+            case 'triangle': {
+                const pts = points.length === 1 ? [...points, dblCoord, dblCoord] : [...points, dblCoord];
+                const ring = [pts[0], pts[1], pts[2], pts[0]];
+                return { id, type, wkt: toWktPolygon(ring), details: { ...DEFAULT_TRIANGLE_DETAILS, name } };
+            }
+            case 'circle': {
+                const center = points[0];
+                const edge = dblCoord;
+                const rDeg = Math.sqrt((edge[0] - center[0]) ** 2 + (edge[1] - center[1]) ** 2);
+                const rM = rDeg * metersPerDeg(center[1]);
+                const ring = buildCircleRing(center, rDeg, 64);
+                return { id, type, wkt: toWktPolygon(ring), details: { ...DEFAULT_CIRCLE_DETAILS, name, radius: Math.round(rM) } };
+            }
+            case 'line': {
+                const pts = [...points, dblCoord];
+                return { id, type, wkt: toWktLineString(pts), details: { ...DEFAULT_LINE_DETAILS, name } };
+            }
+            case 'polyline': {
+                const pts = [...points, dblCoord];
+                return { id, type, wkt: toWktLineString(pts), details: { ...DEFAULT_POLYLINE_DETAILS, name } };
+            }
+            case 'customShape': {
+                const pts = [...points, dblCoord];
+                const ring = [...pts, pts[0]];
+                return { id, type, wkt: toWktPolygon(ring), details: { ...DEFAULT_SHAPE_DETAILS, name } };
+            }
+            default: return null;
+        }
+    }
+    async invokeInsert(f) { return this.bizCallbacks.onInsert ? await Promise.resolve(this.bizCallbacks.onInsert(f)) : true; }
+    editFeature(id) { if (!this.stateMachine.isIdle())
+        return; const f = this.featureMap.get(id); if (!f)
+        return; this.stateMachine.transitionTo(DrawState.EDITING); this.editingFeature = f; this.renderer.startEditing(f); this.log('EDIT start', { id: f.id, type: f.type, details: f.details }); this.showEditPanel(f); }
+    requestDeleteFeature(id) { if (!this.stateMachine.isIdle())
+        return; const f = this.featureMap.get(id); if (!f)
+        return; this.log('DELETE request', { id: f.id, type: f.type }); this.showDeleteConfirm(f); }
+    async doDelete(id) { const f = this.featureMap.get(id); if (!f || !this.stateMachine.isIdle())
+        return; this.stateMachine.transitionTo(DrawState.DELETING); this.log('DELETE execute', { id: f.id }); const ok = this.bizCallbacks.onDelete ? await Promise.resolve(this.bizCallbacks.onDelete(f)) : true; if (ok) {
+        this.featureMap.delete(id);
+        this.roundFeatureIds.delete(id);
+        this.renderer.removeFeature(id);
+        this.log('DELETE done', { id: f.id });
+    }
+    else
+        this.log('DELETE fail', { id: f.id }); this.stateMachine.forceTransitionTo(DrawState.IDLE); }
+    // ─── Measure labels ────────────────────
+    updateMeasureLabels(type, points, coord) {
+        this.clearMeasureLabels();
+        if (!this.config)
+            return;
+        const sl = this.config.showLenOnInsert, sa = this.config.showAreaOnInsert;
+        if (!sl && !sa)
+            return;
+        const all = [...points, coord];
+        const cls = ['rect', 'triangle', 'circle', 'customShape'].includes(type);
+        const ctr = this.renderer.getContainer();
+        const L = (pos, txt, clr) => { const e = document.createElement('div'); e.style.cssText = `position:absolute;pointer-events:none;z-index:1500;color:${clr};font-size:12px;font-weight:600;white-space:nowrap;text-shadow:0 0 3px white,0 0 3px white;transform:translate(-50%,-50%);`; e.textContent = txt; const px = this.renderer.getPixelFromCoordinate(pos); e.style.left = `${px[0]}px`; e.style.top = `${px[1]}px`; ctr.appendChild(e); this.measureLabels.push(e); };
+        if (type === 'rect' && all.length >= 2) {
+            const [a, b] = all;
+            const w = geoDistance(a, [b[0], a[1]]), h = geoDistance(a, [a[0], b[1]]);
+            if (sl) {
+                L([(a[0] + b[0]) / 2, a[1]], formatMeters(w), '#2563eb');
+                L([a[0], (a[1] + b[1]) / 2], formatMeters(h), '#2563eb');
+            }
+            if (sa)
+                L([(a[0] + b[0]) / 2, (a[1] + b[1]) / 2], formatArea(w * h), '#dc2626');
+        }
+        else if (type === 'circle' && all.length >= 2) {
+            const r = geoDistance(all[0], all[1]);
+            const at = sa ? formatArea(Math.PI * r * r) : '';
+            const tx = at ? `r=${formatMeters(r)}, ${at}` : `r=${formatMeters(r)}`;
+            if (sl || sa)
+                L(all[0], tx, '#2563eb');
+        }
+        else if (cls && all.length >= 3) {
+            const ring = [...all, all[0]];
+            if (sl)
+                for (let i = 0; i < all.length; i++) {
+                    const j = (i + 1) % all.length;
+                    const d = geoDistance(all[i], all[j]);
+                    if (d < 0.01)
+                        continue;
+                    L([(all[i][0] + all[j][0]) / 2, (all[i][1] + all[j][1]) / 2], formatMeters(d), '#2563eb');
+                }
+            if (sa)
+                L(geoPolygonCenter(all), formatArea(geoArea(all)), '#dc2626');
+        }
+        else if ((type === 'line' || type === 'polyline') && sl && all.length >= 2)
+            for (let i = 0; i < all.length - 1; i++) {
+                const d = geoDistance(all[i], all[i + 1]);
+                if (d < 0.01)
+                    continue;
+                L([(all[i][0] + all[i + 1][0]) / 2, (all[i][1] + all[i + 1][1]) / 2], formatMeters(d), '#2563eb');
+            }
+    }
+    clearMeasureLabels() { this.measureLabels.forEach(e => e.remove()); this.measureLabels = []; }
+    log(...args) { if (this.config?.debug)
+        console.log('[DrawTool]', ...args); }
+    showToast(msg) { const el = document.createElement('div'); el.style.cssText = 'position:fixed;top:250px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,0.7);color:#fff;padding:8px 20px;border-radius:6px;font-size:14px;z-index:3000;pointer-events:none;'; el.textContent = msg; document.body.appendChild(el); setTimeout(() => el.remove(), 2000); }
+    // ─── UI panels ──────────────────────
+    showDeleteConfirm(feature) {
+        const self = this;
+        this.mountUi(onClose => () => h('div', { style: { ...panelBaseStyle, width: '360px', padding: '24px' } }, [
+            h('div', { style: { display: 'flex', gap: '12px', marginBottom: '20px' } }, [
+                h('div', { style: { width: '44px', height: '44px', borderRadius: '50%', backgroundColor: '#fef2f2', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 } }, [
+                    h('svg', { viewBox: '0 0 24 24', width: '22', height: '22' }, [h('path', { d: 'M10 4h4v1h5v2H4V5h5V4ZM6 8h12l-.8 11.2a1 1 0 0 1-1 .8H7.8a1 1 0 0 1-1-.8L6 8Zm3 2v7h2v-7H9Zm4 0v7h2v-7h-2Z', fill: '#dc2626' })]),
+                ]),
+                h('div', {}, [h('div', { style: { fontSize: '16px', fontWeight: '600', color: '#1f2937', marginBottom: '4px' } }, '确认删除'), h('div', { style: { fontSize: '13px', color: '#6b7280', lineHeight: '1.5' } }, '删除后将无法恢复，您确定要删除该要素吗？')])
+            ]),
+            h('div', { style: { display: 'flex', gap: '8px', justifyContent: 'flex-end' } }, [
+                h('button', { style: { ...btnBaseStyle, padding: '8px 20px', fontSize: '14px' }, onClick: onClose }, '取消'),
+                h('button', { style: { padding: '8px 20px', borderRadius: '4px', fontSize: '14px', cursor: 'pointer', backgroundColor: '#dc2626', color: '#fff', border: 'none' }, onClick: () => { onClose(); self.doDelete(feature.id); } }, '确认删除')
+            ])
+        ]), false);
+    }
+    showEditPanel(orig) {
+        const self = this;
+        const d = orig.details;
+        const hasFill = ['rect', 'triangle', 'circle', 'customShape'].includes(orig.type);
+        const hasRadius = orig.type === 'circle';
+        this.mountUi(onClose => {
+            const name = ref(d.name || ''), lineType = ref(d.lineType || 'solid'), lineRgba = ref(d.lineRgba || 'rgba(255,0,0,1)'), fillRgba = ref(d.fillRgba || 'rgba(255,0,0,0.5)'), textRgba = ref(d.textRgba || 'rgba(255,255,255,1)'), radius = ref(d.radius || 0), lineWidth = ref(d.lineWidth || 2), lineDash = ref(d.strokeLineDash || '15 15 15 15'), d1 = ref('15'), d2 = ref('15'), d3 = ref('15'), d4 = ref('15'), collapsed = ref(false);
+            const initDash = (lineDash.value || '15 15 15 15').split(/\s+/);
+            d1.value = initDash[0] || '15';
+            d2.value = initDash[1] || '15';
+            d3.value = initDash[2] || '15';
+            d4.value = initDash[3] || '15';
+            const syncDash = () => { lineDash.value = `${d1.value} ${d2.value} ${d3.value} ${d4.value}`; if (lineType.value === 'solid')
+                self.renderer.updateDashVariables(0, 0, 0, 0);
+            else
+                self.renderer.updateDashVariables(Number(d1.value), Number(d2.value), Number(d3.value), Number(d4.value)); };
+            if (lineType.value === 'solid')
+                self.renderer.updateDashVariables(0, 0, 0, 0);
+            else
+                self.renderer.updateDashVariables(Number(d1.value), Number(d2.value), Number(d3.value), Number(d4.value));
+            const deps = [lineRgba];
+            if (hasFill)
+                deps.push(fillRgba);
+            watch(deps, () => { self.renderer.updateFeatureStyle(orig.id, { strokeColor: lineRgba.value, fillColor: hasFill ? fillRgba.value : undefined, lineType: lineType.value }); }, { immediate: true });
+            watch(lineWidth, (v) => { self.renderer.updateFeatureStyle(orig.id, { strokeWidth: lineType.value === 'solid' ? v : v * 2 }); self.renderer.updateFeatureStyle(orig.id, { lineWidth: v }); }, { immediate: true });
+            self.renderer.onGeometryChange(() => { if (hasRadius) {
+                const rm = self.renderer.getEditFeatureRadius();
+                if (rm != null)
+                    radius.value = Math.round(rm);
+            } });
+            const cp = (label, model) => h('div', { style: { marginBottom: '12px' } }, [h('label', { style: labelStyle }, label), h('div', { style: { display: 'flex', flexWrap: 'wrap', gap: '4px', marginBottom: '4px' } }, PRESET_COLORS.map(hex => h('span', { style: { width: '20px', height: '20px', borderRadius: '4px', border: '1px solid #d1d5db', cursor: 'pointer', backgroundColor: hex }, onClick: () => { model.value = rgbaFromHex(hex); } }))), h('div', { style: { display: 'flex', gap: '4px', alignItems: 'center' } }, [h('input', { type: 'color', style: { width: '32px', height: '32px', border: '1px solid #d1d5db', borderRadius: '4px', cursor: 'pointer', padding: '0' }, value: rgbaToHex(model.value), onInput: (e) => { model.value = rgbaFromHex(e.target.value); } }), h('input', { style: { flex: '1', border: '1px solid #d1d5db', borderRadius: '4px', padding: '4px 8px', fontSize: '12px' }, value: model.value, onInput: (e) => { model.value = e.target.value; } })])]);
+            const buildDetails = () => { const b = { name: name.value, lineWidth: lineWidth.value, lineType: lineType.value, strokeLineDash: lineDash.value, lineRgba: lineRgba.value, textRgba: textRgba.value }; if (hasFill)
+                b.fillRgba = fillRgba.value; if (hasRadius)
+                b.radius = radius.value; return b; };
+            return () => h('div', { style: { ...panelBaseStyle, width: '340px' } }, [h('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '8px 16px', borderBottom: collapsed.value ? 'none' : '1px solid #e5e7eb', backgroundColor: '#f9fafb', borderRadius: collapsed.value ? '8px' : '8px 8px 0 0', cursor: 'move', userSelect: 'none' }, onMousedown: (e) => self.dragPanel(e) }, [h('span', { style: { fontSize: '14px', fontWeight: '500', color: '#374151' } }, '要素编辑'), h('div', { style: { display: 'flex', gap: '8px', alignItems: 'center' } }, [h('span', { style: { color: '#6b7280', cursor: 'pointer', fontSize: '18px', lineHeight: '1', userSelect: 'none', padding: '0 4px' }, onClick: () => { collapsed.value = !collapsed.value; } }, collapsed.value ? '+' : '\u2212'), h('span', { style: { color: '#9ca3af', cursor: 'pointer', fontSize: '18px', lineHeight: '1' }, onClick: onClose }, '\u00D7')])]), collapsed.value ? null : h('div', { style: { padding: '16px' } }, [h('div', { style: { marginBottom: '12px' } }, [h('label', { style: labelStyle }, '名称'), h('input', { style: inputStyle, value: name.value, onInput: (e) => { name.value = e.target.value; } })]), h('div', { style: { marginBottom: '12px' } }, [h('label', { style: labelStyle }, '线宽(px)'), h('input', { style: inputStyle, type: 'number', min: '1', max: '20', value: String(lineWidth.value), onInput: (e) => { lineWidth.value = Number(e.target.value); } })]), hasRadius ? h('div', { style: { marginBottom: '12px' } }, [h('label', { style: labelStyle }, '半径 (米)'), h('input', { style: inputStyle, type: 'number', value: String(radius.value), onInput: (e) => { radius.value = Number(e.target.value); } })]) : null, h('div', { style: { marginBottom: '12px' } }, [h('label', { style: labelStyle }, '线条类型'), h('select', { style: inputStyle, value: lineType.value, onChange: (e) => { lineType.value = e.target.value; syncDash(); } }, [h('option', { value: 'solid' }, '实线'), h('option', { value: 'dashed' }, '虚线')])]), lineType.value === 'dashed' ? h('div', { style: { marginBottom: '12px' } }, [h('label', { style: labelStyle }, '虚线间距'), h('div', { style: { display: 'flex', gap: '4px' } }, [h('input', { style: inputStyle, type: 'number', min: '1', value: d1.value, onInput: (e) => { d1.value = e.target.value; syncDash(); } }), h('input', { style: inputStyle, type: 'number', min: '1', value: d2.value, onInput: (e) => { d2.value = e.target.value; syncDash(); } }), h('input', { style: inputStyle, type: 'number', min: '1', value: d3.value, onInput: (e) => { d3.value = e.target.value; syncDash(); } }), h('input', { style: inputStyle, type: 'number', min: '1', value: d4.value, onInput: (e) => { d4.value = e.target.value; syncDash(); } })])]) : null, cp('线条颜色', lineRgba), hasFill ? cp('填充颜色', fillRgba) : null, cp('文本颜色', textRgba), h('div', { style: { display: 'flex', gap: '8px', justifyContent: 'flex-end', marginTop: '16px', paddingTop: '12px', borderTop: '1px solid #e5e7eb' } }, [h('button', { style: btnBaseStyle, onClick: onClose }, '关闭'), h('button', { style: { ...btnBaseStyle, backgroundColor: '#2563eb', color: '#fff', border: 'none' }, onClick: async () => { const updated = { ...orig, details: buildDetails() }; const ok = self.bizCallbacks.onEdit ? await Promise.resolve(self.bizCallbacks.onEdit(updated)) : true; onClose(); self.renderer.cancelEditing(); if (ok) {
+                                self.featureMap.set(updated.id, updated);
+                                self.renderer.updateFeatureStyle(updated.id, { fillColor: hasFill ? fillRgba.value : undefined, strokeColor: lineRgba.value, lineType: lineType.value });
+                                if (orig.type === 'circle') {
+                                    const ci = updated.details;
+                                    const pts2 = parseWktLocal(orig.wkt);
+                                    if (pts2) {
+                                        const n2 = pts2.length - 1;
+                                        const cx = (pts2[0][0] + pts2[Math.floor(n2 / 2)][0]) / 2;
+                                        const cy = (pts2[0][1] + pts2[Math.floor(n2 / 2)][1]) / 2;
+                                        self.renderer.updateFeatureGeometry(updated.id, buildCircleRing([cx, cy], ci.radius / metersPerDeg(cy), 64));
+                                    }
+                                }
+                            } self.editingFeature = null; self.stateMachine.forceTransitionTo(DrawState.IDLE); } }, '保存')])])]);
+        }, true);
+    }
+    mountUi(setupFn, draggable) { this.destroyUi(); const self = this; const mountEl = document.createElement('div'); this.uiMountEl = mountEl; const onClose = () => { self.destroyUi(); if (self.stateMachine.isEditing() && self.editingFeature) {
+        self.renderer.cancelEditing();
+        self.editingFeature = null;
+        self.stateMachine.forceTransitionTo(DrawState.IDLE);
+    } }; const app = createApp({ setup() { const rf = setupFn(onClose); return () => h('div', { style: { pointerEvents: 'auto' }, onMousedown: (e) => e.stopPropagation(), onClick: (e) => e.stopPropagation() }, [rf()]); } }); if (draggable) {
+        mountEl.style.cssText = 'position:absolute;z-index:2000;top:20px;left:20px;';
+        this.renderer.getContainer().appendChild(mountEl);
+    }
+    else {
+        mountEl.style.cssText = 'position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.15);';
+        document.body.appendChild(mountEl);
+    } ; app.mount(mountEl); this.uiApp = app; }
+    dragPanel(ev) { const el = this.uiMountEl; if (!el)
+        return; const sx = ev.clientX, sy = ev.clientY, sl = el.offsetLeft, st = el.offsetTop; const move = (e) => { el.style.left = `${sl + e.clientX - sx}px`; el.style.top = `${st + e.clientY - sy}px`; }; const up = () => { document.removeEventListener('mousemove', move); document.removeEventListener('mouseup', up); }; document.addEventListener('mousemove', move); document.addEventListener('mouseup', up); }
+    destroyUi() { this.uiApp?.unmount(); this.uiMountEl?.remove(); this.uiApp = null; this.uiMountEl = null; }
+}
+const panelBaseStyle = { backgroundColor: '#fff', borderRadius: '8px', boxShadow: '0 4px 16px rgba(0,0,0,0.15)' };
+const labelStyle = { fontSize: '12px', color: '#6b7280', display: 'block', marginBottom: '4px' };
+const inputStyle = { width: '100%', boxSizing: 'border-box', border: '1px solid #d1d5db', borderRadius: '4px', padding: '4px 8px', fontSize: '14px' };
+const btnBaseStyle = { padding: '6px 16px', borderRadius: '4px', fontSize: '14px', cursor: 'pointer', border: '1px solid #d1d5db', backgroundColor: '#fff', color: '#4b5563' };

package/dist/adapter/index.d.ts

@@ -0,0 +1,48 @@
+import type { FeatureInfo, FeatureType } from '../types';
+export interface FeatureStyle {
+    fillColor?: string;
+    strokeColor?: string;
+    strokeWidth?: number;
+}
+export interface IFeatureRenderer {
+    startDrawing(type: FeatureType): void;
+    updatePreview(coordinates: [number, number][], type: FeatureType): void;
+    finishDrawing(): Promise<FeatureInfo>;
+    cancelDrawing(): void;
+    renderFeature(feature: FeatureInfo, isHighlight?: boolean): void;
+    removeFeature(featureId: number): void;
+    clearAll(): void;
+    startEditing(feature: FeatureInfo): void;
+    cancelEditing(): void;
+    showHoverActions(feature: FeatureInfo, position: [number, number], actions: HoverActionConfig): void;
+    hideHoverActions(): void;
+    getFeatureAtCoordinate(coordinate: [number, number]): FeatureInfo | null;
+    updateFeatureStyle(featureId: number, style: FeatureStyle): void;
+    updateFeatureGeometry(featureId: number, ring: [number, number][]): void;
+    getContainer(): HTMLElement;
+    onHoverAction(callback: (action: HoverActionType, feature: FeatureInfo) => void): void;
+    onGeometryChange(callback: () => void): void;
+    getEditFeatureRadius(): number | null;
+    updateDashVariables(d1: number, d2: number, d3: number, d4: number): void;
+    getPixelFromCoordinate(coord: [number, number]): [number, number];
+    setAllFeatureLabels(showLen: boolean, showArea: boolean): void;
+    refreshAllFeatureLabels(features: FeatureInfo[]): void;
+    highlightHoverFeature(featureId: number | null): void;
+}
+export type HoverActionType = 'edit' | 'delete';
+export interface HoverActionConfig {
+    showEdit: boolean;
+    showDelete: boolean;
+}
+export interface IGisAdapter {
+    getFeatureRenderer(): IFeatureRenderer;
+    destroy(): void;
+}
+export interface IBizCallbacks {
+    onInsert?: (info: FeatureInfo) => Promise<boolean> | boolean;
+    onEdit?: (info: FeatureInfo) => Promise<boolean> | boolean;
+    onDelete?: (info: FeatureInfo) => Promise<boolean> | boolean;
+}
+export interface IToastHandler {
+    show(message: string): void;
+}

package/dist/adapter/index.js

@@ -0,0 +1 @@
+export {};

package/dist/index.d.ts

@@ -0,0 +1,9 @@
+export { DrawTool } from './DrawTool';
+export type { DrawToolOptions } from './DrawTool';
+export { StateMachine } from './state-machine';
+export { DrawState } from './types';
+export type { FeatureInfo, FeatureType, RectInfo, TriangleInfo, CircleInfo, LineInfo, PolylineInfo, ShapeInfo } from './types';
+export type { DrawConfig } from './types';
+export { DEFAULT_DRAW_CONFIG, DEFAULT_RECT_DETAILS, DEFAULT_TRIANGLE_DETAILS, DEFAULT_CIRCLE_DETAILS, DEFAULT_LINE_DETAILS, DEFAULT_POLYLINE_DETAILS, DEFAULT_SHAPE_DETAILS, } from './types';
+export { generateUniqueId, generateFeatureName, parseWkt, toWktPolygon, toWktLineString, isPointInPolygon, geoDistance, geoArea, geoPolygonCenter, formatMeters, formatArea } from './utils';
+export type { IGisAdapter, IFeatureRenderer, FeatureStyle, IBizCallbacks, IToastHandler, HoverActionType, HoverActionConfig, } from './adapter';

package/dist/index.js

@@ -0,0 +1,5 @@
+export { DrawTool } from './DrawTool';
+export { StateMachine } from './state-machine';
+export { DrawState } from './types';
+export { DEFAULT_DRAW_CONFIG, DEFAULT_RECT_DETAILS, DEFAULT_TRIANGLE_DETAILS, DEFAULT_CIRCLE_DETAILS, DEFAULT_LINE_DETAILS, DEFAULT_POLYLINE_DETAILS, DEFAULT_SHAPE_DETAILS, } from './types';
+export { generateUniqueId, generateFeatureName, parseWkt, toWktPolygon, toWktLineString, isPointInPolygon, geoDistance, geoArea, geoPolygonCenter, formatMeters, formatArea } from './utils';

package/dist/state-machine/index.d.ts

@@ -0,0 +1,12 @@
+import { DrawState } from '../types';
+export declare class StateMachine {
+    private currentState;
+    get state(): DrawState;
+    canTransitionTo(targetState: DrawState): boolean;
+    transitionTo(targetState: DrawState): void;
+    forceTransitionTo(targetState: DrawState): void;
+    isIdle(): boolean;
+    isDrawing(): boolean;
+    isEditing(): boolean;
+    isDeleting(): boolean;
+}

package/dist/state-machine/index.js

@@ -0,0 +1,42 @@
+import { DrawState } from '../types';
+export class StateMachine {
+    currentState = DrawState.IDLE;
+    get state() {
+        return this.currentState;
+    }
+    canTransitionTo(targetState) {
+        switch (this.currentState) {
+            case DrawState.IDLE:
+                return [DrawState.DRAWING, DrawState.EDITING, DrawState.DELETING].includes(targetState);
+            case DrawState.DRAWING:
+                return targetState === DrawState.IDLE;
+            case DrawState.EDITING:
+                return targetState === DrawState.IDLE;
+            case DrawState.DELETING:
+                return targetState === DrawState.IDLE;
+            default:
+                return false;
+        }
+    }
+    transitionTo(targetState) {
+        if (!this.canTransitionTo(targetState)) {
+            throw new Error(`Invalid state transition from ${this.currentState} to ${targetState}`);
+        }
+        this.currentState = targetState;
+    }
+    forceTransitionTo(targetState) {
+        this.currentState = targetState;
+    }
+    isIdle() {
+        return this.currentState === DrawState.IDLE;
+    }
+    isDrawing() {
+        return this.currentState === DrawState.DRAWING;
+    }
+    isEditing() {
+        return this.currentState === DrawState.EDITING;
+    }
+    isDeleting() {
+        return this.currentState === DrawState.DELETING;
+    }
+}

package/dist/types/config.d.ts

@@ -0,0 +1,69 @@
+import type { FeatureType, FeatureInfo } from './feature';
+export interface DrawConfig {
+    type: FeatureType;
+    name?: string;
+    limit?: number;
+    enableLimitMsg?: boolean;
+    enableEdit?: boolean;
+    enableDel?: boolean;
+    showLenOnInsert?: boolean;
+    showAreaOnInsert?: boolean;
+    showLenForAll?: boolean;
+    showAreaForAll?: boolean;
+    debug?: boolean;
+    oldFeatures?: FeatureInfo[];
+}
+export declare const DEFAULT_DRAW_CONFIG: Omit<DrawConfig, 'type'>;
+export declare const DEFAULT_RECT_DETAILS: {
+    name: string;
+    lineWidth: number;
+    lineType: "solid";
+    strokeLineDash: string;
+    lineRgba: string;
+    fillRgba: string;
+    textRgba: string;
+};
+export declare const DEFAULT_TRIANGLE_DETAILS: {
+    name: string;
+    lineWidth: number;
+    lineType: "solid";
+    strokeLineDash: string;
+    lineRgba: string;
+    fillRgba: string;
+    textRgba: string;
+};
+export declare const DEFAULT_CIRCLE_DETAILS: {
+    name: string;
+    radius: number;
+    lineWidth: number;
+    lineType: "solid";
+    strokeLineDash: string;
+    lineRgba: string;
+    fillRgba: string;
+    textRgba: string;
+};
+export declare const DEFAULT_LINE_DETAILS: {
+    name: string;
+    lineWidth: number;
+    lineType: "solid";
+    strokeLineDash: string;
+    lineRgba: string;
+    textRgba: string;
+};
+export declare const DEFAULT_POLYLINE_DETAILS: {
+    name: string;
+    lineWidth: number;
+    lineType: "solid";
+    strokeLineDash: string;
+    lineRgba: string;
+    textRgba: string;
+};
+export declare const DEFAULT_SHAPE_DETAILS: {
+    name: string;
+    lineWidth: number;
+    lineType: "solid";
+    strokeLineDash: string;
+    lineRgba: string;
+    fillRgba: string;
+    textRgba: string;
+};

package/dist/types/config.js

@@ -0,0 +1,7 @@
+export const DEFAULT_DRAW_CONFIG = { limit: 1, enableLimitMsg: false, enableEdit: false, enableDel: false, showLenOnInsert: false, showAreaOnInsert: false, showLenForAll: false, showAreaForAll: false, debug: false };
+export const DEFAULT_RECT_DETAILS = { name: '', lineWidth: 2, lineType: 'solid', strokeLineDash: '15 15 15 15', lineRgba: 'rgba(255,0,0,1)', fillRgba: 'rgba(255,0,0,0.5)', textRgba: 'rgba(255,255,255,1)' };
+export const DEFAULT_TRIANGLE_DETAILS = { name: '', lineWidth: 2, lineType: 'solid', strokeLineDash: '15 15 15 15', lineRgba: 'rgba(0,0,255,1)', fillRgba: 'rgba(0,0,255,0.5)', textRgba: 'rgba(255,255,255,1)' };
+export const DEFAULT_CIRCLE_DETAILS = { name: '', radius: 0, lineWidth: 2, lineType: 'solid', strokeLineDash: '15 15 15 15', lineRgba: 'rgba(34,197,94,1)', fillRgba: 'rgba(34,197,94,0.5)', textRgba: 'rgba(255,255,255,1)' };
+export const DEFAULT_LINE_DETAILS = { name: '', lineWidth: 2, lineType: 'solid', strokeLineDash: '15 15 15 15', lineRgba: 'rgba(234,179,8,1)', textRgba: 'rgba(255,255,255,1)' };
+export const DEFAULT_POLYLINE_DETAILS = { name: '', lineWidth: 2, lineType: 'solid', strokeLineDash: '15 15 15 15', lineRgba: 'rgba(234,179,8,1)', textRgba: 'rgba(255,255,255,1)' };
+export const DEFAULT_SHAPE_DETAILS = { name: '', lineWidth: 2, lineType: 'solid', strokeLineDash: '15 15 15 15', lineRgba: 'rgba(139,92,246,1)', fillRgba: 'rgba(139,92,246,0.5)', textRgba: 'rgba(255,255,255,1)' };

package/dist/types/feature.d.ts

@@ -0,0 +1,60 @@
+export interface FeatureInfo {
+    id: number;
+    type: FeatureType;
+    wkt: string;
+    details: RectInfo | TriangleInfo | CircleInfo | LineInfo | PolylineInfo | ShapeInfo;
+}
+export type FeatureType = 'rect' | 'triangle' | 'circle' | 'line' | 'polyline' | 'customShape';
+export interface RectInfo {
+    name: string;
+    lineWidth: number;
+    lineType: 'dashed' | 'solid';
+    strokeLineDash: string;
+    lineRgba: string;
+    fillRgba: string;
+    textRgba: string;
+}
+export interface TriangleInfo {
+    name: string;
+    lineWidth: number;
+    lineType: 'dashed' | 'solid';
+    strokeLineDash: string;
+    lineRgba: string;
+    fillRgba: string;
+    textRgba: string;
+}
+export interface CircleInfo {
+    name: string;
+    radius: number;
+    lineWidth: number;
+    lineType: 'dashed' | 'solid';
+    strokeLineDash: string;
+    lineRgba: string;
+    fillRgba: string;
+    textRgba: string;
+}
+export interface LineInfo {
+    name: string;
+    lineWidth: number;
+    lineType: 'dashed' | 'solid';
+    strokeLineDash: string;
+    lineRgba: string;
+    textRgba: string;
+}
+export interface PolylineInfo {
+    name: string;
+    lineWidth: number;
+    lineType: 'dashed' | 'solid';
+    strokeLineDash: string;
+    lineRgba: string;
+    textRgba: string;
+}
+export interface ShapeInfo {
+    name: string;
+    lineWidth: number;
+    lineType: 'dashed' | 'solid';
+    strokeLineDash: string;
+    lineRgba: string;
+    fillRgba: string;
+    textRgba: string;
+}

package/dist/types/feature.js

@@ -0,0 +1 @@
+export {};

package/dist/types/index.d.ts

@@ -0,0 +1,4 @@
+export type { FeatureInfo, FeatureType, RectInfo, TriangleInfo, CircleInfo, LineInfo, PolylineInfo, ShapeInfo } from './feature';
+export type { DrawConfig } from './config';
+export { DEFAULT_DRAW_CONFIG, DEFAULT_RECT_DETAILS, DEFAULT_TRIANGLE_DETAILS, DEFAULT_CIRCLE_DETAILS, DEFAULT_LINE_DETAILS, DEFAULT_POLYLINE_DETAILS, DEFAULT_SHAPE_DETAILS, } from './config';
+export { DrawState } from './state';

package/dist/types/index.js

@@ -0,0 +1,2 @@
+export { DEFAULT_DRAW_CONFIG, DEFAULT_RECT_DETAILS, DEFAULT_TRIANGLE_DETAILS, DEFAULT_CIRCLE_DETAILS, DEFAULT_LINE_DETAILS, DEFAULT_POLYLINE_DETAILS, DEFAULT_SHAPE_DETAILS, } from './config';
+export { DrawState } from './state';

package/dist/types/state.d.ts

@@ -0,0 +1,6 @@
+export declare enum DrawState {
+    IDLE = "idle",
+    DRAWING = "drawing",
+    EDITING = "editing",
+    DELETING = "deleting"
+}

package/dist/types/state.js

@@ -0,0 +1,7 @@
+export var DrawState;
+(function (DrawState) {
+    DrawState["IDLE"] = "idle";
+    DrawState["DRAWING"] = "drawing";
+    DrawState["EDITING"] = "editing";
+    DrawState["DELETING"] = "deleting";
+})(DrawState || (DrawState = {}));

package/dist/utils/index.d.ts

@@ -0,0 +1,11 @@
+export declare function generateUniqueId(): number;
+export declare function generateFeatureName(length?: number): string;
+export declare function isPointInPolygon(point: [number, number], polygon: [number, number][]): boolean;
+export declare function parseWkt(wkt: string): [number, number][];
+export declare function toWktPolygon(coordinates: [number, number][]): string;
+export declare function toWktLineString(coordinates: [number, number][]): string;
+export declare function geoDistance(a: [number, number], b: [number, number]): number;
+export declare function geoArea(coords: [number, number][]): number;
+export declare function geoPolygonCenter(coords: [number, number][]): [number, number];
+export declare function formatMeters(m: number): string;
+export declare function formatArea(area: number): string;

package/dist/utils/index.js

@@ -0,0 +1,101 @@
+let counter = 0;
+export function generateUniqueId() {
+    counter += 1;
+    return Date.now() * 100 + counter;
+}
+export function generateFeatureName(length = 8) {
+    const chars = 'abcdefghijklmnopqrstuvwxyz0123456789';
+    let result = '';
+    for (let i = 0; i < length; i++) {
+        result += chars.charAt(Math.floor(Math.random() * chars.length));
+    }
+    return result;
+}
+export function isPointInPolygon(point, polygon) {
+    let inside = false;
+    const [px, py] = point;
+    let j = polygon.length - 1;
+    for (let i = 0; i < polygon.length; i++) {
+        const [xi, yi] = polygon[i];
+        const [xj, yj] = polygon[j];
+        if (yi > py !== yj > py && px < ((xj - xi) * (py - yi)) / (yj - yi) + xi) {
+            inside = !inside;
+        }
+        j = i;
+    }
+    return inside;
+}
+export function parseWkt(wkt) {
+    const m = wkt.match(/\((.*)\)/);
+    if (!m)
+        throw new Error(`Invalid WKT: ${wkt}`);
+    let inner = m[1];
+    inner = inner.replace(/^\(/, '').replace(/\)$/, '');
+    return inner.split(',').map((pair) => {
+        const [x, y] = pair.trim().split(/\s+/).map(Number);
+        return [x, y];
+    });
+}
+export function toWktPolygon(coordinates) {
+    const coords = coordinates.map(([x, y]) => `${x} ${y}`).join(', ');
+    return `POLYGON((${coords}))`;
+}
+export function toWktLineString(coordinates) {
+    const coords = coordinates.map(([x, y]) => `${x} ${y}`).join(', ');
+    return `LINESTRING(${coords})`;
+}
+export function geoDistance(a, b) {
+    const R = 6371000;
+    const dLat = (b[1] - a[1]) * Math.PI / 180;
+    const dLon = (b[0] - a[0]) * Math.PI / 180;
+    const lat1 = a[1] * Math.PI / 180;
+    const lat2 = b[1] * Math.PI / 180;
+    const sinDLat = Math.sin(dLat / 2);
+    const sinDLon = Math.sin(dLon / 2);
+    const h = sinDLat * sinDLat + Math.cos(lat1) * Math.cos(lat2) * sinDLon * sinDLon;
+    return 2 * R * Math.atan2(Math.sqrt(h), Math.sqrt(1 - h));
+}
+export function geoArea(coords) {
+    const n = coords.length;
+    if (n < 3)
+        return 0;
+    let area = 0;
+    for (let i = 0; i < n; i++) {
+        const j = (i + 1) % n;
+        area += coords[i][0] * coords[j][1];
+        area -= coords[j][0] * coords[i][1];
+    }
+    area = Math.abs(area) / 2;
+    const centerLat = coords.reduce((s, c) => s + c[1], 0) / n;
+    const latRad = centerLat * Math.PI / 180;
+    const mPerDegLon = 111320 * Math.cos(latRad);
+    const mPerDegLat = 111320;
+    return area * mPerDegLon * mPerDegLat;
+}
+export function geoPolygonCenter(coords) {
+    const n = coords.length;
+    let cx = 0, cy = 0;
+    for (const c of coords) {
+        cx += c[0];
+        cy += c[1];
+    }
+    return [cx / n, cy / n];
+}
+export function formatMeters(m) {
+    if (m < 0.01)
+        return '0.00米';
+    if (m < 1)
+        return m.toFixed(2) + '米';
+    if (m < 1000)
+        return m.toFixed(1) + '米';
+    return (m / 1000).toFixed(2) + '千米';
+}
+export function formatArea(area) {
+    if (area < 0.01)
+        return '0.00㎡';
+    if (area < 1)
+        return area.toFixed(2) + '㎡';
+    if (area < 10000)
+        return area.toFixed(1) + '㎡';
+    return (area / 1000000).toFixed(2) + 'k㎡';
+}

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@loongbao-web-gis-utils/draw-utils-core",
+  "version": "0.1.0",
+  "license": "MIT",
+  "author": "loongbao",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "vue": "^3.5.0"
+  },
+  "devDependencies": {
+    "typescript": "^5.5.0",
+    "vue": "^3.5.0"
+  },
+  "scripts": {
+    "build": "tsc",
+    "clean": "node -e \"const{rmSync}=require('fs');rmSync('dist',{recursive:true,force:true})\""
+  }
+}