@web-ppt/editor 0.5.0-beta.1 → 0.5.0-beta.7

package/dist/vertex/types.d.ts

@@ -0,0 +1,21 @@
+import type { CustomGeometry } from '@web-ppt/core';
+import type { ElementId } from '@web-ppt/edit-core';
+import type { EditorSession } from '../session';
+import type { SlideEditor } from '../slide-editor-types';
+export interface VertexEditorOptions {
+    onError?: (error: unknown) => void;
+}
+export interface VertexEditor {
+    readonly elementId: ElementId | null;
+    readonly geometry: CustomGeometry | null;
+    readonly destroyed: boolean;
+    /** 省略 id 时只接受当前单元素选区；预设形状必须先显式 convert。 */
+    start(id?: ElementId): boolean;
+    end(): void;
+    convert(id?: ElementId): boolean;
+    setClosed(pathId: string, closed: boolean): void;
+    setSegmentType(pathId: string, commandId: string, type: 'line' | 'cubic'): void;
+    refresh(): void;
+    destroy(): void;
+}
+export type VertexEditorFactory = (session: EditorSession, view: SlideEditor, options?: VertexEditorOptions) => VertexEditor;

package/dist/vertex/vertex-editor.d.ts

@@ -0,0 +1,4 @@
+import type { EditorSession } from '../session';
+import type { SlideEditor } from '../slide-editor-types';
+import type { VertexEditor, VertexEditorOptions } from './types';
+export declare function createVertexEditor(session: EditorSession, view: SlideEditor, options?: VertexEditorOptions): VertexEditor;

package/dist/vertex.js

@@ -0,0 +1,338 @@
+import { queryElementCustomGeometry as f, slideOfElement as v, setCustomGeometryClosed as E, setCustomGeometrySegmentType as S, elementFrameToSlidePoint as b, screenToSlidePoint as A, slideToElementFramePoint as x, moveCustomGeometryPoint as D } from "@web-ppt/edit-core";
+const I = 3, m = (u) => u.pointerId ?? 0;
+class K {
+  constructor(t) {
+    this.active = null, this.root = t;
+  }
+  get isActive() {
+    return this.active !== null;
+  }
+  begin(t, e) {
+    var i, o;
+    this.cancel();
+    const r = { x: t.clientX, y: t.clientY };
+    this.active = {
+      pointerId: m(t),
+      startScreen: r,
+      snapshot: {
+        screen: r,
+        altKey: t.altKey,
+        ctrlKey: t.ctrlKey,
+        metaKey: t.metaKey,
+        shiftKey: t.shiftKey
+      },
+      gesture: e,
+      started: !1,
+      frame: null,
+      cursor: this.root.style.cursor
+    };
+    try {
+      (o = (i = this.root).setPointerCapture) == null || o.call(i, m(t));
+    } catch {
+    }
+  }
+  move(t) {
+    var r, i;
+    const e = this.active;
+    if (!(!e || m(t) !== e.pointerId)) {
+      this.updateSnapshot(e, t);
+      try {
+        (i = (r = e.gesture).observePointer) == null || i.call(r, e.snapshot);
+      } catch (o) {
+        throw this.clear(e), o;
+      }
+      if (!e.started) {
+        if (Math.hypot(
+          e.snapshot.screen.x - e.startScreen.x,
+          e.snapshot.screen.y - e.startScreen.y
+        ) < I) return;
+        e.started = !0;
+        try {
+          e.gesture.start();
+        } catch (h) {
+          throw this.clear(e), h;
+        }
+        this.root.style.cursor = e.gesture.cursor, this.root.dataset[e.gesture.dataset.name] = e.gesture.dataset.value;
+      }
+      t.preventDefault(), this.scheduleFrame(e);
+    }
+  }
+  finish(t) {
+    var i, o;
+    const e = this.active;
+    if (!e || m(t) !== e.pointerId) return "ignored";
+    this.updateSnapshot(e, t);
+    let r;
+    try {
+      (o = (i = e.gesture).observePointer) == null || o.call(i, e.snapshot), r = e.started ? e.gesture.finish(e.snapshot) : null;
+    } catch (h) {
+      throw this.clear(e), h;
+    }
+    return this.clear(e), r == null || r(), r && t.preventDefault(), e.started ? "gesture" : "click";
+  }
+  /** 键盘确认使用最后一次指针快照；先清理 capture/rAF，再执行提交，避免订阅回调重入活动手势。 */
+  commit() {
+    const t = this.active;
+    if (!t) return !1;
+    let e = null;
+    try {
+      e = t.started ? t.gesture.finish(t.snapshot) : null;
+    } catch (r) {
+      throw this.clear(t), r;
+    }
+    return this.clear(t), e == null || e(), t.started;
+  }
+  modifier(t) {
+    const e = this.active;
+    return !e || !["Shift", "Alt", "Control", "Meta"].includes(t.key) ? !1 : (e.snapshot = {
+      ...e.snapshot,
+      altKey: t.altKey,
+      ctrlKey: t.ctrlKey,
+      metaKey: t.metaKey,
+      shiftKey: t.shiftKey
+    }, e.started && this.scheduleFrame(e), !0);
+  }
+  cancel() {
+    this.active && this.clear(this.active);
+  }
+  cancelPointer(t) {
+    this.active && m(t) === this.active.pointerId && this.clear(this.active);
+  }
+  updateSnapshot(t, e) {
+    t.snapshot = {
+      screen: { x: e.clientX, y: e.clientY },
+      altKey: e.altKey,
+      ctrlKey: e.ctrlKey,
+      metaKey: e.metaKey,
+      shiftKey: e.shiftKey
+    };
+  }
+  scheduleFrame(t) {
+    if (t.frame !== null) return;
+    const e = this.root.ownerDocument.defaultView;
+    if (!(e != null && e.requestAnimationFrame)) {
+      try {
+        t.gesture.frame(t.snapshot);
+      } catch (r) {
+        throw this.clear(t), r;
+      }
+      return;
+    }
+    t.frame = e.requestAnimationFrame(() => {
+      if (t.frame = null, this.active === t)
+        try {
+          t.gesture.frame(t.snapshot);
+        } catch (r) {
+          throw this.clear(t), r;
+        }
+    });
+  }
+  clear(t) {
+    var r, i;
+    this.active = null;
+    const e = this.root.ownerDocument.defaultView;
+    t.frame !== null && (e != null && e.cancelAnimationFrame) && e.cancelAnimationFrame(t.frame);
+    try {
+      t.started && t.gesture.clear();
+    } finally {
+      this.root.style.cursor = t.cursor, delete this.root.dataset[t.gesture.dataset.name];
+      try {
+        (i = (r = this.root).hasPointerCapture) != null && i.call(r, t.pointerId) && this.root.releasePointerCapture(t.pointerId);
+      } catch {
+      }
+    }
+  }
+}
+const P = "http://www.w3.org/2000/svg";
+function g(u, t) {
+  return u.createElementNS(P, t);
+}
+class C {
+  constructor(t, e, r) {
+    var l;
+    if (this.session = t, this.view = e, this.options = r, this.activeId = null, this.preview = null, this.isDestroyed = !1, this.pointerDown = (s) => {
+      const c = s.target instanceof Element ? s.target.closest("[data-ppt-vertex-point]") : null;
+      if (!(!c || s.button !== 0 || s.isPrimary === !1))
+        try {
+          const n = c.dataset.pptVertexPoint;
+          this.lifecycle.begin(s, this.gesture(n, this.requireGeometry())), this.stop(s);
+        } catch (n) {
+          this.report(n);
+        }
+    }, this.pointerMove = (s) => {
+      if (this.lifecycle.isActive)
+        try {
+          this.lifecycle.move(s), this.stop(s);
+        } catch (c) {
+          this.report(c);
+        }
+    }, this.pointerUp = (s) => {
+      if (this.lifecycle.isActive)
+        try {
+          this.lifecycle.finish(s), this.stop(s);
+        } catch (c) {
+          this.report(c);
+        }
+    }, this.pointerCancel = (s) => {
+      this.lifecycle.isActive && (this.lifecycle.cancelPointer(s), this.stop(s));
+    }, this.keyDown = (s) => {
+      s.key !== "Escape" || !this.lifecycle.isActive || (this.lifecycle.cancel(), this.stop(s));
+    }, t.disposed || e.destroyed) throw new Error("不能挂载到已释放的编辑视图");
+    this.root = e.element;
+    const i = this.root.querySelector("[data-ppt-stage]"), o = this.root.querySelector('[data-ppt-layer="interaction"]'), h = this.root.querySelector('[data-ppt-layer="static"]');
+    if (!i || !o || !h) throw new Error("编辑视图缺少三层 DOM");
+    this.stage = i, this.layer = o, this.lifecycle = new K(this.root), this.root.addEventListener("pointerdown", this.pointerDown, !0), this.root.addEventListener("pointermove", this.pointerMove, !0), this.root.addEventListener("pointerup", this.pointerUp, !0), this.root.addEventListener("pointercancel", this.pointerCancel, !0), this.root.addEventListener("keydown", this.keyDown, !0), this.unsubscribe = t.editor.subscribe(() => this.render());
+    const y = ((l = this.root.ownerDocument.defaultView) == null ? void 0 : l.MutationObserver) ?? MutationObserver;
+    this.observer = new y(() => this.render()), this.observer.observe(h, { childList: !0 });
+  }
+  get elementId() {
+    return this.activeId;
+  }
+  get geometry() {
+    return this.activeId ? f(this.session.editor.doc, this.activeId) : null;
+  }
+  get destroyed() {
+    return this.isDestroyed;
+  }
+  start(t) {
+    this.assertAlive();
+    const e = this.session.editor.selection, r = t ?? (e.kind === "elements" && e.ids.length === 1 ? e.ids[0] : null);
+    return !r || this.view.mode !== "edit" || v(this.session.editor.doc, r) !== this.view.slideId || !f(this.session.editor.doc, r) ? !1 : (this.activeId = r, this.preview = null, this.render(), !0);
+  }
+  end() {
+    var t;
+    this.lifecycle.cancel(), this.activeId = null, this.preview = null, (t = this.group()) == null || t.remove();
+  }
+  convert(t) {
+    this.assertAlive();
+    const e = this.session.editor.selection, r = t ?? (e.kind === "elements" && e.ids.length === 1 ? e.ids[0] : null);
+    if (!r || this.view.mode !== "edit") return !1;
+    try {
+      return this.session.editor.exec({ type: "ConvertToCustomGeometry", id: r }), this.start(r);
+    } catch (i) {
+      return this.report(i), !1;
+    }
+  }
+  setClosed(t, e) {
+    const r = this.requireGeometry();
+    this.session.editor.exec({
+      type: "SetGeometry",
+      id: this.activeId,
+      geometry: E(r, t, e)
+    });
+  }
+  setSegmentType(t, e, r) {
+    const i = this.requireGeometry();
+    this.session.editor.exec({
+      type: "SetGeometry",
+      id: this.activeId,
+      geometry: S(i, t, e, r)
+    });
+  }
+  refresh() {
+    this.assertAlive(), this.render();
+  }
+  destroy() {
+    var t;
+    this.isDestroyed || (this.isDestroyed = !0, this.lifecycle.cancel(), this.unsubscribe(), this.observer.disconnect(), this.root.removeEventListener("pointerdown", this.pointerDown, !0), this.root.removeEventListener("pointermove", this.pointerMove, !0), this.root.removeEventListener("pointerup", this.pointerUp, !0), this.root.removeEventListener("pointercancel", this.pointerCancel, !0), this.root.removeEventListener("keydown", this.keyDown, !0), (t = this.group()) == null || t.remove(), this.activeId = null, this.preview = null);
+  }
+  assertAlive() {
+    if (this.isDestroyed || this.session.disposed || this.view.destroyed)
+      throw new Error("顶点编辑扩展已经释放");
+  }
+  requireGeometry() {
+    this.assertAlive();
+    const t = this.geometry;
+    if (!t || !this.activeId) throw new Error("当前没有正在编辑的自由形状");
+    return t;
+  }
+  group() {
+    return this.layer.querySelector("[data-ppt-vertex-editor]");
+  }
+  slidePoint(t, e) {
+    const r = this.activeId, i = this.session.editor.effectiveElement(r);
+    return b(this.session.editor.doc, r, {
+      x: t.x.value / e.width * i.w,
+      y: t.y.value / e.height * i.h
+    });
+  }
+  render() {
+    var i;
+    (i = this.group()) == null || i.remove();
+    const t = this.activeId;
+    if (!t || this.isDestroyed || this.view.destroyed || this.view.mode !== "edit" || !this.session.editor.doc.elements[t] || v(this.session.editor.doc, t) !== this.view.slideId) return;
+    const e = this.preview ?? f(this.session.editor.doc, t);
+    if (!e) return;
+    const r = g(this.layer.ownerDocument, "g");
+    r.dataset.pptVertexEditor = "", r.dataset.pptVertexElement = t;
+    for (const o of e.paths) {
+      let h = null, y = null;
+      const l = (s, c) => {
+        const n = g(this.layer.ownerDocument, "line");
+        n.setAttribute("x1", String(s.x)), n.setAttribute("y1", String(s.y)), n.setAttribute("x2", String(c.x)), n.setAttribute("y2", String(c.y)), n.setAttribute("stroke", "#f59e0b"), n.setAttribute("stroke-width", String(1 / this.view.zoom)), n.style.pointerEvents = "none", r.append(n);
+      };
+      for (const s of o.commands) {
+        if (s.type === "arc") throw new Error("顶点查询未物化圆弧命令");
+        if (s.type === "close") {
+          h = y;
+          continue;
+        }
+        const c = s.points[s.points.length - 1], n = this.slidePoint(c, o), p = s.points.slice(0, -1).map((d) => this.slidePoint(d, o));
+        h && p.length && l(h, p[0]), p.length && l(p[p.length - 1], n), s.type === "move" && (y = n);
+        for (const d of s.points) {
+          const w = this.slidePoint(d, o), a = g(this.layer.ownerDocument, "circle");
+          a.dataset.pptVertexPoint = d.id, a.dataset.pptVertexPath = o.id, a.dataset.pptVertexRole = d.role, a.setAttribute("cx", String(w.x)), a.setAttribute("cy", String(w.y)), a.setAttribute("r", String((d.role === "anchor" ? 5 : 4) / this.view.zoom)), a.setAttribute("fill", d.role === "anchor" ? "#fff" : "#fef3c7"), a.setAttribute("stroke", d.role === "anchor" ? "#2563eb" : "#d97706"), a.setAttribute("stroke-width", String(1.5 / this.view.zoom)), a.style.pointerEvents = "all", a.style.cursor = "crosshair", r.append(a);
+        }
+        h = n;
+      }
+    }
+    this.layer.append(r);
+  }
+  geometryAt(t, e, r) {
+    const i = this.activeId, o = r.paths.find((c) => c.commands.some((n) => n.points.some((p) => p.id === e)));
+    if (!o) throw new Error(`找不到顶点路径：${e}`);
+    const h = this.stage.getBoundingClientRect(), y = A(t.screen, { left: h.left, top: h.top, zoom: this.view.zoom }), l = x(this.session.editor.doc, i, y), s = this.session.editor.effectiveElement(i);
+    return D(r, e, {
+      x: l.x / s.w * o.width,
+      y: l.y / s.h * o.height
+    });
+  }
+  gesture(t, e) {
+    let r = e;
+    const i = (o) => {
+      r = this.geometryAt(o, t, e), this.preview = r, this.render();
+    };
+    return {
+      cursor: "crosshair",
+      dataset: { name: "pptVertexDragging", value: t },
+      start: () => {
+      },
+      frame: i,
+      finish: (o) => {
+        i(o);
+        const h = this.activeId;
+        return () => {
+          this.preview = null, this.session.editor.exec({ type: "SetGeometry", id: h, geometry: r });
+        };
+      },
+      clear: () => {
+        this.preview = null, this.render();
+      }
+    };
+  }
+  stop(t) {
+    t.preventDefault(), t.stopImmediatePropagation();
+  }
+  report(t) {
+    var e, r;
+    this.lifecycle.cancel(), (r = (e = this.options).onError) == null || r.call(e, t), this.options.onError || queueMicrotask(() => {
+      throw t;
+    });
+  }
+}
+function G(u, t, e = {}) {
+  return new C(u, t, e);
+}
+export {
+  G as createVertexEditor
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web-ppt/editor",
-  "version": "0.5.0-beta.1",
+  "version": "0.5.0-beta.7",
   "description": "Framework-agnostic browser editing session and DOM view for Web-PPT.",
   "keywords": [
     "pptx",
@@ -30,7 +30,43 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/editor.js"
     },
-    "./package.json": "./package.json"
+    "./vertex": {
+      "types": "./dist/vertex/index.d.ts",
+      "import": "./dist/vertex.js"
+    },
+    "./adjustments": {
+      "types": "./dist/adjustments/index.d.ts",
+      "import": "./dist/adjustments.js"
+    },
+    "./design": {
+      "types": "./dist/design/index.d.ts",
+      "import": "./dist/design.js"
+    },
+    "./templates": {
+      "types": "./dist/templates/index.d.ts",
+      "import": "./dist/templates.js"
+    },
+    "./chart": {
+      "types": "./dist/chart/index.d.ts",
+      "import": "./dist/chart.js"
+    },
+    "./chart-shared": {
+      "types": "./dist/chart-shared/index.d.ts",
+      "import": "./dist/chart-shared.js"
+    },
+    "./media": {
+      "types": "./dist/media/index.d.ts",
+      "import": "./dist/media.js"
+    },
+    "./package.json": "./package.json",
+    "./accessibility": {
+      "types": "./dist/canvas-accessibility.d.ts",
+      "import": "./dist/accessibility.js"
+    },
+    "./edit-context": {
+      "types": "./dist/edit-context/index.d.ts",
+      "import": "./dist/edit-context.js"
+    }
   },
   "files": [
     "dist",
@@ -39,14 +75,14 @@
     "LICENSE"
   ],
   "scripts": {
-    "build": "vite build && tsc -p tsconfig.build.json",
+    "build": "vite build && node ../../tooling/check-editor-main-size.mjs && vite build --config vite.vertex.config.ts && vite build --config vite.adjustments.config.ts && vite build --config vite.design.config.ts && vite build --config vite.templates.config.ts && vite build --config vite.chart.config.ts && vite build --config vite.media.config.ts && vite build --config vite.browser-features.config.ts && tsc -p tsconfig.build.json",
     "prepublishOnly": "npm run build",
     "prepack": "node ../../tooling/sync-package-docs.mjs"
   },
   "peerDependencies": {
-    "@web-ppt/core": "^0.5.0-beta.1",
-    "@web-ppt/edit-core": "^0.5.0-beta.1",
-    "@web-ppt/viewer-core": "^0.5.0-beta.1"
+    "@web-ppt/core": "^0.5.0-beta.7",
+    "@web-ppt/edit-core": "^0.5.0-beta.7",
+    "@web-ppt/viewer-core": "^0.5.0-beta.7"
   },
   "publishConfig": {
     "access": "public"