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

package/package.json

@@ -1,8 +1,15 @@
 {
   "name": "@loongbao-web-gis-utils/draw-utils-core",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "license": "MIT",
   "author": "loongbao",
+  "keywords": [
+    "web-gis",
+    "draw",
+    "openlayer",
+    "drawing-tool"
+  ],
+  "description": "Web GIS 通用绘图工具核心层 — 基础图形绘制、Adapter 接口定义",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -10,21 +17,32 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.js"
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
     }
   },
   "files": [
     "dist"
   ],
-  "peerDependencies": {
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
     "vue": "^3.5.0"
   },
   "devDependencies": {
-    "typescript": "^5.5.0",
-    "vue": "^3.5.0"
+    "vite": "^6.0.0",
+    "vite-plugin-dts": "^4.0.0",
+    "vitest": "^3.1.0",
+    "@vitest/coverage-v8": "^3.1.0",
+    "prettier": "^3.0.0",
+    "typescript": "^5.8.0"
   },
   "scripts": {
-    "build": "tsc",
-    "clean": "node -e \"const{rmSync}=require('fs');rmSync('dist',{recursive:true,force:true})\""
+    "build": "vite build",
+    "clean": "rimraf dist",
+    "test": "vitest run --coverage",
+    "test:watch": "vitest",
+    "lint": "prettier --check src/"
   }
 }

package/dist/DrawTool.d.ts

@@ -1,50 +0,0 @@
-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

@@ -1,358 +0,0 @@
-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

@@ -1,48 +0,0 @@
-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

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

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

@@ -1,12 +0,0 @@
-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

@@ -1,42 +0,0 @@
-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

@@ -1,69 +0,0 @@
-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;
-};