@meeek/indoor-map-editor

@meeek/indoor-map-editor

Vue 3 室内平面图编辑器组件。以可序列化的 FloorPlan JSON 为唯一数据源，提供可视化编辑与只读预览。

Features

• FloorPlan 可视化编辑（建筑 / 空间 / 设施等元素）
• 选择、多选、框选
• 拖拽移动、Resize
• 对齐、分布与拖拽吸附
• Undo / Redo 与操作历史
• 图层面板与属性 Inspector
• Zoom / Pan、适应视图、网格与标尺
• JSON 导入 / 导出
• 内置预览与独立 IndoorMapPreview
• v-model 同步 FloorPlan，@save 交由宿主持久化
• TypeScript 类型支持

Installation

pnpm add @meeek/indoor-map-editor

或：

npm install @meeek/indoor-map-editor

宿主只需提供 Vue 3（^3.5.0，peerDependency）。konva / vue-konva 已由本包依赖并打入 bundle，无需单独安装。

Quick Start

<script setup lang="ts">
import { ref } from 'vue'
import {
  IndoorMapEditor,
  IndoorMapPreview,
} from '@meeek/indoor-map-editor'
import type { FloorPlan } from '@meeek/indoor-map-editor'
import '@meeek/indoor-map-editor/style.css'

const floorPlan = ref<FloorPlan>({
  id: 'floor-1',
  name: '一层平面图',
  code: 'F1',
  width: 1600,
  height: 900,
  version: 1,
  elements: [
    {
      id: 'rectangle-1',
      type: 'rectangle',
      x: 100,
      y: 100,
      width: 240,
      height: 160,
      rotation: 0,
      metadata: {
        name: '阅读区',
        code: 'RECT-001',
        showName: true,
        showCode: false,
      },
    },
  ],
})

const previewVisible = ref(false)

function handleSave(nextFloorPlan: FloorPlan) {
  floorPlan.value = nextFloorPlan
  // 宿主自行持久化（API / 数据库 / 文件系统等）
}
</script>

<template>
  <div style="width: 100%; height: 100vh">
    <IndoorMapEditor
      v-model="floorPlan"
      @save="handleSave"
    />

    <IndoorMapPreview
      v-model:visible="previewVisible"
      :floor-plan="floorPlan"
    />
  </div>
</template>

编辑器会铺满父级容器，请为父级设置明确宽高。

Editor

v-model

<IndoorMapEditor v-model="floorPlan" />

编辑器内部修改后，通过 update:modelValue 将最新 FloorPlan 同步给宿主；宿主替换 floorPlan 时，编辑器也会同步。

@save

<IndoorMapEditor @save="handleSave" />

Header「保存」仅将当前 FloorPlan 通过 save 事件交给宿主。本包不负责后端、云端或自动持久化。

Preview

只读预览，不修改 FloorPlan，不参与选择、拖拽或 Resize。

<IndoorMapPreview
  v-model:visible="visible"
  :floor-plan="floorPlan"
/>

也可使用编辑器 Header 内置的「预览」入口；独立 IndoorMapPreview 适合宿主自行控制显示时机。

Data Model

FloorPlan 是编辑器与预览的 Source of Truth：

FloorPlan JSON
      ↓
Source of Truth
      ↓
IndoorMapEditor / IndoorMapPreview

FloorPlan

interface FloorPlan {
  id: string
  name: string
  code: string
  width: number
  height: number
  version: number
  elements: FloorElement[]
  metadata?: Record<string, unknown>
}

坐标使用 FloorPlan 逻辑坐标系（例如 1600 × 900），不是 CSS 像素。

FloorElement

interface FloorElement {
  id: string
  type: FloorElementType
  x: number
  y: number
  width: number
  height: number
  rotation: number
  zIndex?: number
  visible?: boolean
  locked?: boolean
  metadata: {
    name: string
    code: string
    showName: boolean
    showCode: boolean
    [key: string]: unknown
  }
}

x / y / width / height 描述未旋转时的包围盒（左上角原点）；rotation 为绕中心顺时针角度（度）。

Save & Persistence

编辑器不是数据库；持久化完全由宿主决定。

JSON Data

FloorPlan 是可序列化的纯数据：

const json = JSON.stringify(floorPlan)
const restored = JSON.parse(json) as FloorPlan

编辑器 Header 提供 JSON 导入 / 导出 UI；请通过包根入口使用公开 API，不要依赖包内 src/ 或 dist/ 内部路径。

Styling

唯一推荐的样式入口：

import '@meeek/indoor-map-editor/style.css'

Public API

import {
  IndoorMapEditor,
  IndoorMapPreview,
  version,
} from '@meeek/indoor-map-editor'

import type {
  FloorPlan,
  FloorElement,
} from '@meeek/indoor-map-editor'

Dependencies

License

MIT