@huanban/rulego-editor-ui 1.0.0

package/dist/index.esm.js

@@ -0,0 +1,742 @@
+class u {
+  constructor(e, t) {
+    this.collapsedGroups = /* @__PURE__ */ new Set(), this.searchKeyword = "", this.rootEl = null, this.unsubscribe = null, this.container = e, this.core = t.core, this.options = {
+      core: t.core,
+      searchable: t.searchable ?? !0,
+      defaultCollapsed: t.defaultCollapsed ?? !1,
+      searchPlaceholder: t.searchPlaceholder || this.core.i18n.t("sidebar.searchPlaceholder") || "搜索组件...",
+      width: t.width ?? "220px"
+    }, this.mount(), this.unsubscribe = this.core.store.select(
+      (n) => n.componentGroups
+    ).subscribe(
+      (n) => {
+        this.renderGroups(n);
+      }
+    );
+  }
+  // ============================================================
+  // 生命周期
+  // ============================================================
+  /**
+   * 挂载侧边栏 DOM 到容器
+   */
+  mount() {
+    if (this.rootEl = document.createElement("div"), this.rootEl.className = "rulego-sidebar", this.rootEl.style.width = this.options.width, this.options.searchable) {
+      const n = document.createElement("div");
+      n.className = "rulego-sidebar__search-wrapper";
+      const o = document.createElement("span");
+      o.className = "rulego-sidebar__search-icon", o.innerHTML = "🔍";
+      const s = document.createElement("input");
+      s.type = "text", s.className = "rulego-sidebar__search", s.placeholder = this.options.searchPlaceholder, s.addEventListener("input", (i) => {
+        this.searchKeyword = i.target.value.toLowerCase();
+        const l = this.core.store.getState().componentGroups;
+        this.renderGroups(l);
+      }), n.appendChild(o), n.appendChild(s), this.rootEl.appendChild(n);
+    }
+    const e = document.createElement("div");
+    e.className = "rulego-sidebar__groups", this.rootEl.appendChild(e), this.container.appendChild(this.rootEl);
+    const t = this.core.store.getState().componentGroups;
+    t && t.length > 0 && this.renderGroups(t);
+  }
+  /**
+   * 销毁侧边栏, 清理所有 DOM 和事件
+   */
+  destroy() {
+    this.unsubscribe && (this.unsubscribe(), this.unsubscribe = null), this.rootEl && this.rootEl.parentNode && this.rootEl.parentNode.removeChild(this.rootEl), this.rootEl = null;
+  }
+  // ============================================================
+  // 渲染
+  // ============================================================
+  /**
+   * 渲染所有组件分组
+   * @param groups - 原始组件分组列表
+   */
+  renderGroups(e) {
+    if (!this.rootEl) return;
+    const t = this.rootEl.querySelector(".rulego-sidebar__groups");
+    if (!t) return;
+    t.innerHTML = "";
+    const n = this.filterGroups(e);
+    if (n.length === 0) {
+      const o = document.createElement("div");
+      o.className = "rulego-sidebar__empty", o.textContent = this.core.i18n.t("sidebar.noResults") || "无匹配组件", t.appendChild(o);
+      return;
+    }
+    for (const o of n) {
+      const s = this.createGroupElement(o);
+      t.appendChild(s);
+    }
+  }
+  /**
+   * 创建单个分组 DOM 元素
+   * @param group - 组件分组定义
+   * @returns 分组 HTMLElement
+   */
+  createGroupElement(e) {
+    const t = document.createElement("div");
+    t.className = "rulego-sidebar__group";
+    const n = document.createElement("div");
+    n.className = "rulego-sidebar__group-header", n.style.borderLeftColor = e.color || "#ccc";
+    const o = this.collapsedGroups.has(e.category), s = document.createElement("span");
+    s.className = `rulego-sidebar__arrow ${o ? "rulego-sidebar__arrow--collapsed" : ""}`, s.textContent = "▼";
+    const i = document.createElement("span");
+    i.className = "rulego-sidebar__group-label", i.textContent = e.label;
+    const l = document.createElement("span");
+    if (l.className = "rulego-sidebar__group-count", l.textContent = `${e.components.length}`, n.appendChild(s), n.appendChild(i), n.appendChild(l), n.addEventListener("click", () => {
+      this.collapsedGroups.has(e.category) ? this.collapsedGroups.delete(e.category) : this.collapsedGroups.add(e.category);
+      const r = this.core.store.getState().componentGroups;
+      this.renderGroups(r);
+    }), t.appendChild(n), !o) {
+      const r = document.createElement("div");
+      r.className = "rulego-sidebar__component-list";
+      for (const c of e.components) {
+        const d = this.createComponentElement(c, e.color);
+        r.appendChild(d);
+      }
+      t.appendChild(r);
+    }
+    return t;
+  }
+  /**
+   * 创建单个组件 DOM 元素 (可拖拽)
+   * @param comp - 组件定义
+   * @param groupColor - 分组颜色
+   * @returns 组件 HTMLElement
+   */
+  createComponentElement(e, t) {
+    const n = document.createElement("div");
+    n.className = "rulego-sidebar__component", n.setAttribute("draggable", "true"), n.title = e.desc || e.label;
+    const o = document.createElement("span");
+    o.className = "rulego-sidebar__component-color", o.style.backgroundColor = e.color || t || "#ccc";
+    const s = document.createElement("span");
+    return s.className = "rulego-sidebar__component-name", s.textContent = e.label, n.appendChild(o), n.appendChild(s), n.addEventListener("dragstart", (i) => {
+      i.dataTransfer && (i.dataTransfer.setData("application/rulego-component", JSON.stringify({
+        type: e.type,
+        category: e.category,
+        label: e.label,
+        color: e.color || t
+      })), i.dataTransfer.effectAllowed = "copy"), n.classList.add("rulego-sidebar__component--dragging");
+    }), n.addEventListener("dragend", () => {
+      n.classList.remove("rulego-sidebar__component--dragging");
+    }), n;
+  }
+  // ============================================================
+  // 搜索过滤
+  // ============================================================
+  /**
+   * 根据搜索关键字过滤组件分组
+   * @param groups - 原始分组列表
+   * @returns 过滤后的分组列表 (空分组会被移除)
+   */
+  filterGroups(e) {
+    return this.searchKeyword ? e.map((t) => ({
+      ...t,
+      components: t.components.filter(
+        (n) => n.label.toLowerCase().includes(this.searchKeyword) || n.type.toLowerCase().includes(this.searchKeyword) || n.desc && n.desc.toLowerCase().includes(this.searchKeyword)
+      )
+    })).filter((t) => t.components.length > 0) : e;
+  }
+  // ============================================================
+  // 公共 API
+  // ============================================================
+  /**
+   * 手动触发刷新
+   */
+  refresh() {
+    const e = this.core.store.getState().componentGroups;
+    this.renderGroups(e);
+  }
+  /**
+   * 展开所有分组
+   */
+  expandAll() {
+    this.collapsedGroups.clear(), this.refresh();
+  }
+  /**
+   * 折叠所有分组
+   */
+  collapseAll() {
+    const e = this.core.store.getState().componentGroups;
+    for (const t of e)
+      this.collapsedGroups.add(t.category);
+    this.refresh();
+  }
+  /**
+   * 获取根 DOM 元素
+   */
+  getElement() {
+    return this.rootEl;
+  }
+}
+class h {
+  constructor(e, t) {
+    this.rootEl = null, this.unsubscribe = null, this.buttonElements = /* @__PURE__ */ new Map(), this.container = e, this.core = t.core, this.options = {
+      core: t.core,
+      extraButtons: t.extraButtons ?? [],
+      showZoom: t.showZoom ?? !0,
+      height: t.height ?? "40px"
+    }, this.mount(), this.unsubscribe = this.core.store.subscribe(() => {
+      this.updateButtonStates();
+    });
+  }
+  // ============================================================
+  // 生命周期
+  // ============================================================
+  /**
+   * 挂载工具栏 DOM
+   */
+  mount() {
+    this.rootEl = document.createElement("div"), this.rootEl.className = "rulego-toolbar", this.rootEl.style.height = this.options.height;
+    const e = this.getBuiltinButtons();
+    this.options.extraButtons.length > 0 && (e.push({
+      id: "__divider_extra",
+      icon: "",
+      title: "",
+      divider: !0,
+      onClick: () => {
+      }
+    }), e.push(...this.options.extraButtons));
+    for (const t of e) {
+      if (t.divider) {
+        const o = document.createElement("span");
+        o.className = "rulego-toolbar__divider", this.rootEl.appendChild(o);
+      }
+      if (!t.icon && t.divider) continue;
+      const n = document.createElement("button");
+      if (n.className = "rulego-toolbar__button", n.title = t.title, n.innerHTML = t.icon, t.label) {
+        const o = document.createElement("span");
+        o.className = "rulego-toolbar__button-label", o.textContent = t.label, n.appendChild(o);
+      }
+      n.addEventListener("click", (o) => {
+        o.preventDefault(), o.stopPropagation(), t.onClick();
+      }), this.buttonElements.set(t.id, n), this.rootEl.appendChild(n);
+    }
+    this.container.appendChild(this.rootEl), this.updateButtonStates();
+  }
+  /**
+   * 销毁工具栏
+   */
+  destroy() {
+    this.unsubscribe && (this.unsubscribe(), this.unsubscribe = null), this.rootEl && this.rootEl.parentNode && this.rootEl.parentNode.removeChild(this.rootEl), this.rootEl = null, this.buttonElements.clear();
+  }
+  // ============================================================
+  // 按钮定义
+  // ============================================================
+  /**
+   * 获取内置按钮列表
+   * @returns 内置按钮定义数组
+   */
+  getBuiltinButtons() {
+    const e = this.core.i18n, t = [
+      {
+        id: "undo",
+        icon: "↩",
+        title: e.t("toolbar.undo") || "撤销",
+        disabled: () => !this.core.store.getState().canUndo,
+        onClick: () => this.core.eventBus.emit("editor:reset")
+      },
+      {
+        id: "redo",
+        icon: "↪",
+        title: e.t("toolbar.redo") || "重做",
+        disabled: () => !this.core.store.getState().canRedo,
+        onClick: () => {
+        }
+      },
+      {
+        id: "delete",
+        icon: "🗑",
+        title: e.t("toolbar.delete") || "删除选中",
+        divider: !0,
+        onClick: () => this.core.eventBus.emit("editor:delete-selected")
+      },
+      {
+        id: "save",
+        icon: "💾",
+        title: e.t("toolbar.save") || "保存",
+        onClick: () => this.core.eventBus.emit("editor:save", {
+          data: {},
+          success: !1
+        })
+      },
+      {
+        id: "fullscreen",
+        icon: "⛶",
+        title: e.t("toolbar.fullscreen") || "全屏",
+        onClick: () => this.core.eventBus.emit("editor:fullscreen")
+      }
+    ];
+    return this.options.showZoom && t.push(
+      {
+        id: "zoom-in",
+        icon: "🔍+",
+        title: e.t("toolbar.zoomIn") || "放大",
+        divider: !0,
+        onClick: () => this.core.eventBus.emit("canvas:zoom", { scale: 1.1 })
+      },
+      {
+        id: "zoom-out",
+        icon: "🔍-",
+        title: e.t("toolbar.zoomOut") || "缩小",
+        onClick: () => this.core.eventBus.emit("canvas:zoom", { scale: 0.9 })
+      },
+      {
+        id: "zoom-fit",
+        icon: "🔲",
+        title: e.t("toolbar.fitView") || "适应画布",
+        onClick: () => this.core.eventBus.emit("canvas:zoom", { scale: 1 })
+      }
+    ), t;
+  }
+  // ============================================================
+  // 状态更新
+  // ============================================================
+  /**
+   * 根据 EditorCore 的状态更新按钮的 disabled 属性
+   */
+  updateButtonStates() {
+    for (const [e, t] of this.buttonElements) {
+      const n = this.getBuiltinButtons().find((o) => o.id === e);
+      n && typeof n.disabled == "function" && (t.disabled = n.disabled(), t.classList.toggle("rulego-toolbar__button--disabled", t.disabled));
+    }
+  }
+  // ============================================================
+  // 公共 API
+  // ============================================================
+  /**
+   * 获取根 DOM 元素
+   */
+  getElement() {
+    return this.rootEl;
+  }
+  /**
+   * 动态添加自定义按钮
+   * @param button - 按钮定义
+   */
+  addButton(e) {
+    if (!this.rootEl) return;
+    const t = document.createElement("button");
+    t.className = "rulego-toolbar__button", t.title = e.title, t.innerHTML = e.icon, t.addEventListener("click", (n) => {
+      n.preventDefault(), e.onClick();
+    }), this.buttonElements.set(e.id, t), this.rootEl.appendChild(t);
+  }
+}
+class p {
+  constructor(e, t) {
+    this.rootEl = null, this.formContainer = null, this.titleEl = null, this.unsubscribe = null, this.eventCleanups = [], this.currentNodeId = null, this.container = e, this.core = t.core, this.options = {
+      core: t.core,
+      title: t.title || this.core.i18n.t("panel.title") || "属性编辑",
+      width: t.width ?? "320px",
+      position: t.position ?? "right"
+    }, this.mount(), this.bindEvents();
+  }
+  // ============================================================
+  // 生命周期
+  // ============================================================
+  /**
+   * 创建面板 DOM
+   */
+  mount() {
+    this.rootEl = document.createElement("div"), this.rootEl.className = `rulego-property-panel rulego-property-panel--${this.options.position}`, this.rootEl.style.width = this.options.width;
+    const e = document.createElement("div");
+    e.className = "rulego-property-panel__header", this.titleEl = document.createElement("h3"), this.titleEl.className = "rulego-property-panel__title", this.titleEl.textContent = this.options.title;
+    const t = document.createElement("button");
+    t.className = "rulego-property-panel__close", t.textContent = "✕", t.addEventListener("click", () => this.clearPanel()), e.appendChild(this.titleEl), e.appendChild(t), this.rootEl.appendChild(e), this.formContainer = document.createElement("div"), this.formContainer.className = "rulego-property-panel__form", this.rootEl.appendChild(this.formContainer), this.rootEl.style.display = "none", this.container.appendChild(this.rootEl);
+  }
+  /**
+   * 绑定事件监听
+   */
+  bindEvents() {
+    this.unsubscribe = this.core.store.subscribe((t) => {
+      const n = t.currentNodeView, o = t.currentNodeModel;
+      n && o && Object.keys(o).length > 0 && this.showPanel(n, o);
+    });
+    const e = this.core.eventBus.on("blank:click", () => {
+      this.clearPanel();
+    });
+    this.eventCleanups.push(e);
+  }
+  /**
+   * 销毁面板
+   */
+  destroy() {
+    this.unsubscribe && (this.unsubscribe(), this.unsubscribe = null);
+    for (const e of this.eventCleanups)
+      e();
+    this.eventCleanups = [], this.rootEl && this.rootEl.parentNode && this.rootEl.parentNode.removeChild(this.rootEl), this.rootEl = null, this.formContainer = null;
+  }
+  // ============================================================
+  // 面板展示 / 清空
+  // ============================================================
+  /**
+   * 显示面板并渲染表单
+   * @param view - 组件定义 (含字段列表)
+   * @param model - 当前节点模型数据
+   */
+  showPanel(e, t) {
+    if (!(!this.rootEl || !this.formContainer || !this.titleEl) && (this.rootEl.style.display = "flex", this.titleEl.textContent = e.label || this.options.title, this.formContainer.innerHTML = "", this.renderBasicInfo(t), e.fields && e.fields.length > 0))
+      for (const n of e.fields) {
+        const o = this.createFieldElement(n, t);
+        this.formContainer.appendChild(o);
+      }
+  }
+  /**
+   * 清空面板并隐藏
+   */
+  clearPanel() {
+    !this.rootEl || !this.formContainer || (this.formContainer.innerHTML = "", this.rootEl.style.display = "none", this.currentNodeId = null);
+  }
+  // ============================================================
+  // 表单渲染
+  // ============================================================
+  /**
+   * 渲染基础信息区 (节点名称等)
+   * @param model - 节点模型
+   */
+  renderBasicInfo(e) {
+    if (!this.formContainer) return;
+    const t = document.createElement("div");
+    t.className = "rulego-property-panel__section";
+    const n = this.createTextField({
+      name: "name",
+      type: "string",
+      defaultValue: "",
+      label: this.core.i18n.t("panel.nodeName") || "节点名称",
+      desc: "",
+      validate: "",
+      fields: null
+    }, e);
+    t.appendChild(n), this.formContainer.appendChild(t);
+  }
+  /**
+   * 创建单个表单字段元素
+   * @param field - 字段定义
+   * @param model - 节点模型数据
+   * @returns 字段 wrapper HTMLElement
+   */
+  createFieldElement(e, t) {
+    const n = document.createElement("div");
+    n.className = "rulego-property-panel__field";
+    const o = document.createElement("label");
+    o.className = "rulego-property-panel__label", o.textContent = e.label || e.name, e.desc && (o.title = e.desc), n.appendChild(o);
+    let s;
+    switch (e.type) {
+      case "bool":
+        s = this.createBoolField(e, t);
+        break;
+      case "select":
+        s = this.createSelectField(e, t);
+        break;
+      case "code":
+      case "json":
+        s = this.createTextareaField(e, t);
+        break;
+      case "int":
+        s = this.createNumberField(e, t);
+        break;
+      default:
+        s = this.createTextField(e, t);
+        break;
+    }
+    if (n.appendChild(s), e.desc) {
+      const i = document.createElement("span");
+      i.className = "rulego-property-panel__desc", i.textContent = e.desc, n.appendChild(i);
+    }
+    return n;
+  }
+  /**
+   * 文本输入框
+   */
+  createTextField(e, t) {
+    const n = document.createElement("input");
+    return n.type = "text", n.className = "rulego-property-panel__input", n.name = e.name, n.value = String(this.getModelValue(e, t) ?? ""), n.placeholder = e.desc || "", n.addEventListener("change", () => {
+      this.handleFieldChange(e.name, n.value);
+    }), n;
+  }
+  /**
+   * 数值输入框
+   */
+  createNumberField(e, t) {
+    const n = document.createElement("input");
+    return n.type = "number", n.className = "rulego-property-panel__input", n.name = e.name, n.value = String(this.getModelValue(e, t) ?? 0), n.addEventListener("change", () => {
+      this.handleFieldChange(e.name, Number(n.value));
+    }), n;
+  }
+  /**
+   * 布尔开关
+   */
+  createBoolField(e, t) {
+    const n = document.createElement("div");
+    n.className = "rulego-property-panel__switch-wrapper";
+    const o = `field-${e.name}-${Date.now()}`, s = document.createElement("input");
+    s.type = "checkbox", s.className = "rulego-property-panel__checkbox", s.id = o, s.checked = !!this.getModelValue(e, t);
+    const i = document.createElement("label");
+    return i.className = "rulego-property-panel__switch", i.htmlFor = o, s.addEventListener("change", () => {
+      this.handleFieldChange(e.name, s.checked);
+    }), n.appendChild(s), n.appendChild(i), n;
+  }
+  /**
+   * 下拉选择
+   */
+  createSelectField(e, t) {
+    const n = document.createElement("select");
+    n.className = "rulego-property-panel__select", n.name = e.name;
+    const o = String(this.getModelValue(e, t) ?? "");
+    if (e.options && e.options.length > 0)
+      for (const s of e.options) {
+        const i = document.createElement("option");
+        i.value = s.value, i.textContent = s.label, s.value === o && (i.selected = !0), n.appendChild(i);
+      }
+    return n.addEventListener("change", () => {
+      this.handleFieldChange(e.name, n.value);
+    }), n;
+  }
+  /**
+   * 多行文本 / 代码编辑器
+   */
+  createTextareaField(e, t) {
+    const n = document.createElement("textarea");
+    return n.className = "rulego-property-panel__textarea", n.name = e.name, n.rows = 6, n.value = String(this.getModelValue(e, t) ?? ""), n.placeholder = e.desc || "", (e.type === "code" || e.type === "json") && (n.spellcheck = !1, n.style.fontFamily = "monospace"), n.addEventListener("change", () => {
+      this.handleFieldChange(e.name, n.value);
+    }), n;
+  }
+  // ============================================================
+  // 数据处理
+  // ============================================================
+  /**
+   * 从模型中获取字段当前值
+   * @param field - 字段定义
+   * @param model - 节点模型
+   * @returns 字段值
+   */
+  getModelValue(e, t) {
+    const n = t.configuration;
+    return n && e.name in n ? n[e.name] : e.name in t ? t[e.name] : e.defaultValue;
+  }
+  /**
+   * 处理字段变更, 通知 EditorCore
+   * @param fieldName - 字段名
+   * @param value - 新值
+   */
+  handleFieldChange(e, t) {
+    this.core.eventBus.emit("node:property-update", {
+      id: this.currentNodeId || "",
+      properties: { [e]: t }
+    }), this.core.store.setState({ isDirty: !0 });
+  }
+  // ============================================================
+  // 公共 API
+  // ============================================================
+  /**
+   * 获取根 DOM 元素
+   */
+  getElement() {
+    return this.rootEl;
+  }
+  /**
+   * 手动设置当前编辑的节点 ID
+   * @param nodeId - LogicFlow 节点 ID
+   */
+  setCurrentNodeId(e) {
+    this.currentNodeId = e;
+  }
+  /**
+   * 手动显示面板
+   * @param view - 组件定义
+   * @param model - 节点模型
+   * @param nodeId - 节点 ID
+   */
+  show(e, t, n) {
+    n && (this.currentNodeId = n), this.showPanel(e, t);
+  }
+  /**
+   * 手动隐藏面板
+   */
+  hide() {
+    this.clearPanel();
+  }
+}
+class m {
+  constructor(e, t) {
+    this.menuEl = null, this.currentContext = null, this.outsideClickHandler = null, this.container = e, this.core = t.core;
+    const n = t.includeBuiltin !== !1 ? this.getBuiltinItems() : [];
+    this.items = [...n, ...t.items ?? []], this.mount(), this.bindEvents();
+  }
+  // ============================================================
+  // 生命周期
+  // ============================================================
+  /**
+   * 创建菜单 DOM (初始隐藏)
+   */
+  mount() {
+    this.menuEl = document.createElement("div"), this.menuEl.className = "rulego-context-menu", this.menuEl.style.display = "none", document.body.appendChild(this.menuEl);
+  }
+  /**
+   * 绑定事件
+   */
+  bindEvents() {
+    this.container.addEventListener("contextmenu", (e) => {
+      e.preventDefault(), this.handleContextMenu(e);
+    }), this.outsideClickHandler = (e) => {
+      this.menuEl && !this.menuEl.contains(e.target) && this.hide();
+    }, document.addEventListener("click", this.outsideClickHandler), document.addEventListener("keydown", (e) => {
+      e.key === "Escape" && this.hide();
+    });
+  }
+  /**
+   * 销毁菜单
+   */
+  destroy() {
+    this.outsideClickHandler && (document.removeEventListener("click", this.outsideClickHandler), this.outsideClickHandler = null), this.menuEl && this.menuEl.parentNode && this.menuEl.parentNode.removeChild(this.menuEl), this.menuEl = null;
+  }
+  // ============================================================
+  // 右键处理
+  // ============================================================
+  /**
+   * 处理右键事件
+   */
+  handleContextMenu(e) {
+    const t = e.target, n = this.resolveContext(t, e);
+    this.currentContext = n;
+    const o = this.items.filter((s) => {
+      const i = Array.isArray(s.target) ? s.target : [s.target];
+      return i.includes(n.type) || i.includes("all");
+    });
+    o.length !== 0 && this.renderMenu(o, e.clientX, e.clientY);
+  }
+  /**
+   * 解析右键目标的上下文
+   */
+  resolveContext(e, t) {
+    const n = e.closest(".lf-node");
+    if (n)
+      return {
+        type: "node",
+        id: n.getAttribute("data-node-id") || void 0,
+        position: { x: t.clientX, y: t.clientY }
+      };
+    const o = e.closest(".lf-edge");
+    return o ? {
+      type: "edge",
+      id: o.getAttribute("data-edge-id") || void 0,
+      position: { x: t.clientX, y: t.clientY }
+    } : {
+      type: "canvas",
+      position: { x: t.clientX, y: t.clientY }
+    };
+  }
+  // ============================================================
+  // 菜单渲染
+  // ============================================================
+  /**
+   * 渲染并显示菜单
+   */
+  renderMenu(e, t, n) {
+    if (this.menuEl) {
+      this.menuEl.innerHTML = "";
+      for (const o of e) {
+        const s = document.createElement("div");
+        s.className = "rulego-context-menu__item";
+        const i = typeof o.disabled == "function" ? o.disabled() : o.disabled;
+        if (i && s.classList.add("rulego-context-menu__item--disabled"), o.icon) {
+          const r = document.createElement("span");
+          r.className = "rulego-context-menu__icon", r.innerHTML = o.icon, s.appendChild(r);
+        }
+        const l = document.createElement("span");
+        if (l.className = "rulego-context-menu__label", l.textContent = o.label, s.appendChild(l), i || s.addEventListener("click", () => {
+          this.currentContext && o.onClick(this.currentContext), this.hide();
+        }), this.menuEl.appendChild(s), o.separator) {
+          const r = document.createElement("div");
+          r.className = "rulego-context-menu__separator", this.menuEl.appendChild(r);
+        }
+      }
+      this.menuEl.style.left = `${t}px`, this.menuEl.style.top = `${n}px`, this.menuEl.style.display = "block", requestAnimationFrame(() => {
+        if (!this.menuEl) return;
+        const o = this.menuEl.getBoundingClientRect();
+        o.right > window.innerWidth && (this.menuEl.style.left = `${t - o.width}px`), o.bottom > window.innerHeight && (this.menuEl.style.top = `${n - o.height}px`);
+      });
+    }
+  }
+  /**
+   * 隐藏菜单
+   */
+  hide() {
+    this.menuEl && (this.menuEl.style.display = "none"), this.currentContext = null;
+  }
+  // ============================================================
+  // 内置菜单项
+  // ============================================================
+  /**
+   * 获取内置菜单项
+   */
+  getBuiltinItems() {
+    const e = this.core.i18n;
+    return [
+      {
+        id: "edit",
+        label: e.t("contextMenu.edit") || "编辑",
+        icon: "✏️",
+        target: "node",
+        onClick: (t) => {
+          t.id && this.core.eventBus.emit("editor:show-edit-panel");
+        }
+      },
+      {
+        id: "delete",
+        label: e.t("contextMenu.delete") || "删除",
+        icon: "🗑️",
+        target: ["node", "edge"],
+        separator: !0,
+        onClick: (t) => {
+          t.id && this.core.eventBus.emit("node:delete", { id: t.id });
+        }
+      },
+      {
+        id: "copy",
+        label: e.t("contextMenu.copy") || "复制",
+        icon: "📋",
+        target: "node",
+        onClick: () => {
+        }
+      },
+      {
+        id: "select-all",
+        label: e.t("contextMenu.selectAll") || "全选",
+        icon: "⬜",
+        target: "canvas",
+        onClick: () => {
+        }
+      }
+    ];
+  }
+  // ============================================================
+  // 公共 API
+  // ============================================================
+  /**
+   * 动态添加菜单项
+   * @param item - 菜单项定义
+   */
+  addItem(e) {
+    this.items.push(e);
+  }
+  /**
+   * 移除菜单项
+   * @param id - 菜单项 ID
+   */
+  removeItem(e) {
+    this.items = this.items.filter((t) => t.id !== e);
+  }
+  /**
+   * 获取菜单 DOM 元素
+   */
+  getElement() {
+    return this.menuEl;
+  }
+}
+export {
+  m as ContextMenu,
+  p as PropertyPanel,
+  u as Sidebar,
+  h as Toolbar
+};
+//# sourceMappingURL=index.esm.js.map