@ek-aiot/2d-editor

2D 编辑器组件库（Vue 3 + Pinia + Konva）。支持拖拽入画、属性编辑、设备绑定与测点挂载、HTTP 数据源配置、bindingValues 运行时值渲染、JSON 导入导出、PNG 导出，以及 edit / preview / display 三态。

完整文档：../../docs/README.md

安装

@ek-aiot/2d-editor 为 ESM only；并且 vue/pinia/konva 为 peerDependencies（需要由使用方安装）。

pnpm add @ek-aiot/2d-editor
pnpm add vue pinia konva

包职责边界（editor vs core）

• @ek-aiot/2d-editor：Vue 壳层（EditorShell、Pinia store、types/ui、主题/i18n）
• @ek-aiot/2d-editor-core：引擎与协议能力（createStage、types/runtime/schema/interaction、runtime connectors、codec/utils）

本包内部的 stage/types/runtime/utils 已收敛为对 core 的薄封装 re-export，用于保证 Vue 壳层与 core 能力源单一且行为一致。

使用

import { createPinia } from "pinia";
import { createApp } from "vue";
import App from "./App.vue";

createApp(App).use(createPinia()).mount("#app");

<template>
  <div class="h-screen w-screen">
    <EditorShell />
  </div>
</template>

<script setup lang="ts">
import { EditorShell } from "@ek-aiot/2d-editor";
</script>

只读模式

<template>
  <div class="h-screen w-screen">
    <EditorShell mode="preview" />
  </div>
</template>

<script setup lang="ts">
import { EditorShell } from "@ek-aiot/2d-editor";
</script>

HTTP 数据源配置

编辑态顶部工具栏提供“数据源”入口，可配置多个 HTTP dataset 并保存到导出 JSON 的 runtimeDatasets 字段。测试请求时填写的 ${token}、${tenant} 等变量真实值只存在于当前 UI 会话，不会进入 Pinia document state 或导出 JSON。

Vue EditorShell mode="display" 会自动轮询当前 store 文档中的 enabled HTTP datasets。宿主只需通过 runtimeDatasetVariables 注入 ${token}、${tenant} 等真实变量值；这些变量不会进入导出 JSON。

<EditorShell
  mode="display"
  :runtime-dataset-variables="{ tenant: 'acme', token: 'runtime-token' }"
/>

说明：

• mode="preview"：只读预览；保留 pan/zoom/export PNG
• mode="display"：运行态只读；默认 canvas-only；可通过 bindingValues 或 HTTP datasets 显示真实值
• layout="canvas-only"：隐藏左右面板
• hotkeys：仅对 edit 生效

<script setup lang="ts">
import { EditorShell, type BindingValues } from "@ek-aiot/2d-editor";

const bindingValues: BindingValues = {
  "CHILLER_01:temp_in": 12.3,
};
</script>

<template>
  <div class="h-screen w-screen">
    <EditorShell mode="display" :binding-values="bindingValues" />
  </div>
</template>

样式（Tailwind / 非 Tailwind）

编辑器 UI 使用 Tailwind class。

你有两种选择：

1. 你的项目没有 Tailwind（推荐直接引入预构建样式）

在入口引入：

import "@ek-aiot/2d-editor/style.css";

说明：该 CSS 已做 .ek-editor 作用域隔离，尽量避免影响宿主全局样式。

2. 你的项目已使用 Tailwind（继续走扫描生成 CSS）

让 Tailwind 扫描编辑器组件生成样式（从 node_modules 扫描 dist/**/*.js）。

详见：../../docs/integration.md