@miragon/modeler-shell 0.0.0-stage → 0.1.0

package/dist/diagram-js.cjs

@@ -0,0 +1,1115 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/diagram-js.ts
+var diagram_js_exports = {};
+__export(diagram_js_exports, {
+  connectDiagramJs: () => connectDiagramJs,
+  createViewport: () => createViewport,
+  shellModule: () => shellModule
+});
+module.exports = __toCommonJS(diagram_js_exports);
+
+// src/core/fit.ts
+var MAX_FIT_ZOOM = 1;
+var FIT_ANIMATION_MS = 250;
+function fitViewbox(bounds, container, insets, maxZoom = MAX_FIT_ZOOM) {
+  if (!(container.width > 0 && container.height > 0)) return void 0;
+  const hasWidth = bounds.width > 0;
+  const hasHeight = bounds.height > 0;
+  if (!hasWidth && !hasHeight) return void 0;
+  const horizontal = freeExtent(container.width, insets.left, insets.right);
+  const vertical = freeExtent(container.height, insets.top, insets.bottom);
+  const contentWidth = hasWidth ? bounds.width : 0;
+  const contentHeight = hasHeight ? bounds.height : 0;
+  const scale = Math.min(
+    maxZoom,
+    hasWidth ? horizontal.extent / contentWidth : Infinity,
+    hasHeight ? vertical.extent / contentHeight : Infinity
+  );
+  const box = {
+    x: bounds.x + contentWidth / 2 - (horizontal.start + horizontal.extent / 2) / scale,
+    y: bounds.y + contentHeight / 2 - (vertical.start + vertical.extent / 2) / scale,
+    width: container.width / scale,
+    height: container.height / scale,
+    scale
+  };
+  return Object.values(box).every(Number.isFinite) && scale > 0 ? box : void 0;
+}
+function freeExtent(total, before, after) {
+  const extent = total - before - after;
+  return extent > 0 ? { start: before, extent } : { start: 0, extent: total };
+}
+function freeRectCenter(container, insets) {
+  if (!(container.width > 0 && container.height > 0)) return void 0;
+  const horizontal = freeExtent(container.width, insets.left, insets.right);
+  const vertical = freeExtent(container.height, insets.top, insets.bottom);
+  return {
+    x: horizontal.start + horizontal.extent / 2,
+    y: vertical.start + vertical.extent / 2
+  };
+}
+var VIEW_TOLERANCE = 1e-3;
+function sameView(a, b, tolerance = VIEW_TOLERANCE) {
+  const close = (first, second) => Math.abs(first - second) <= tolerance * Math.max(1, Math.abs(first), Math.abs(second));
+  return close(a.scale, b.scale) && close(a.x * a.scale, b.x * b.scale) && close(a.y * a.scale, b.y * b.scale);
+}
+function interpolateViewbox(from, to, progress) {
+  if (!(progress > 0)) return { ...from };
+  if (progress >= 1) return { ...to };
+  const linear = (start, end) => start + (end - start) * progress;
+  const scale = from.scale > 0 && to.scale > 0 ? Math.exp(linear(Math.log(from.scale), Math.log(to.scale))) : linear(from.scale, to.scale);
+  const centreX = linear(from.x + from.width / 2, to.x + to.width / 2);
+  const centreY = linear(from.y + from.height / 2, to.y + to.height / 2);
+  const width = linear(from.width * from.scale, to.width * to.scale) / scale;
+  const height = linear(from.height * from.scale, to.height * to.scale) / scale;
+  return { x: centreX - width / 2, y: centreY - height / 2, width, height, scale };
+}
+function easeStandard(progress) {
+  return STANDARD_EASING(progress);
+}
+var STANDARD_EASING = cubicBezier(0.4, 0, 0.2, 1);
+function cubicBezier(x1, y1, x2, y2) {
+  const polynomial = (first, second) => {
+    const c = 3 * first;
+    const b = 3 * (second - first) - c;
+    const a = 1 - c - b;
+    return {
+      at: (t) => ((a * t + b) * t + c) * t,
+      slope: (t) => (3 * a * t + 2 * b) * t + c
+    };
+  };
+  const curveX = polynomial(x1, x2);
+  const curveY = polynomial(y1, y2);
+  const precision = 1e-7;
+  const parameterFor = (x) => {
+    let t = x;
+    for (let iteration = 0; iteration < 8; iteration++) {
+      const error = curveX.at(t) - x;
+      if (Math.abs(error) < precision) return t;
+      const slope = curveX.slope(t);
+      if (Math.abs(slope) < 1e-6) break;
+      t -= error / slope;
+      if (t < 0 || t > 1) break;
+    }
+    let low = 0;
+    let high = 1;
+    t = x;
+    for (let iteration = 0; iteration < 60; iteration++) {
+      const value = curveX.at(t);
+      if (Math.abs(value - x) < precision) break;
+      if (value < x) low = t;
+      else high = t;
+      t = (low + high) / 2;
+    }
+    return t;
+  };
+  return (progress) => {
+    if (!(progress > 0)) return 0;
+    if (progress >= 1) return 1;
+    return curveY.at(parameterFor(progress));
+  };
+}
+
+// src/core/zoom.ts
+var ZOOM_MIN = 0.2;
+var ZOOM_MAX = 4;
+function canZoomOut(zoom) {
+  return zoom > ZOOM_MIN * 1.001;
+}
+function canZoomIn(zoom) {
+  return zoom < ZOOM_MAX * 0.999;
+}
+
+// src/core/keymap.ts
+function matchChromeKey(event) {
+  if (event.altKey) return void 0;
+  if (isCommand(event)) {
+    if (event.key === "+" || event.key === "=" || event.code === "NumpadAdd") return "zoomIn";
+    if (event.key === "-" || event.key === "_" || event.code === "NumpadSubtract") return "zoomOut";
+    if (event.key === "0" || event.code === "Numpad0") return "zoomToActual";
+    return void 0;
+  }
+  return event.shiftKey && event.code === "Digit1" ? "fit" : void 0;
+}
+function isCommand(event) {
+  return event.metaKey || event.ctrlKey;
+}
+function isUndoRedoKey(event) {
+  if (event.altKey || !isCommand(event)) return false;
+  const letter = undoRedoLetter(event);
+  return letter === "z" || letter === "y" && !event.shiftKey;
+}
+function undoRedoLetter(event) {
+  if (event.key.length === 1 && event.key.charCodeAt(0) < 128) return event.key.toLowerCase();
+  if (event.code === "KeyZ") return "z";
+  if (event.code === "KeyY") return "y";
+  return void 0;
+}
+var TEXT_FIELD_SELECTOR = "input, textarea, select, [contenteditable]:not([contenteditable='false'])";
+var MAC_MODIFIER_SYMBOLS = {
+  "\u2318": "Meta",
+  "\u21E7": "Shift",
+  "\u2325": "Alt",
+  "\u2303": "Control"
+};
+var MODIFIER_NAMES = {
+  cmd: "Meta",
+  command: "Meta",
+  meta: "Meta",
+  ctrl: "Control",
+  control: "Control",
+  strg: "Control",
+  shift: "Shift",
+  umschalt: "Shift",
+  alt: "Alt",
+  option: "Alt",
+  opt: "Alt"
+};
+var NAMED_KEYS = {
+  esc: "Escape",
+  escape: "Escape",
+  del: "Delete",
+  delete: "Delete",
+  entf: "Delete",
+  backspace: "Backspace",
+  enter: "Enter",
+  return: "Enter",
+  tab: "Tab",
+  space: "Space",
+  home: "Home",
+  end: "End",
+  pageup: "PageUp",
+  pagedown: "PageDown",
+  arrowup: "ArrowUp",
+  arrowdown: "ArrowDown",
+  arrowleft: "ArrowLeft",
+  arrowright: "ArrowRight",
+  "\u2191": "ArrowUp",
+  "\u2193": "ArrowDown",
+  "\u2190": "ArrowLeft",
+  "\u2192": "ArrowRight",
+  plus: "Plus"
+};
+function ariaKeyName(key) {
+  const named = NAMED_KEYS[key.toLowerCase()];
+  if (named) return named;
+  if (/^f\d{1,2}$/i.test(key)) return key.toUpperCase();
+  if (key.length !== 1 || MAC_MODIFIER_SYMBOLS[key]) return void 0;
+  if (key === "+") return "Plus";
+  if (key === " ") return "Space";
+  return key.toUpperCase();
+}
+function ariaKeyShortcutsFromLabel(label) {
+  let rest = label.trim();
+  const modifiers = [];
+  for (let symbol = MAC_MODIFIER_SYMBOLS[rest.charAt(0)]; symbol && rest.length > 1; ) {
+    modifiers.push(symbol);
+    rest = rest.slice(1).trim();
+    symbol = MAC_MODIFIER_SYMBOLS[rest.charAt(0)];
+  }
+  if (!rest || /\s/.test(rest.replace(/\s*\+\s*/g, "+"))) return void 0;
+  const parts = rest.split("+").map((part) => part.trim());
+  let key = parts.pop() ?? "";
+  if (key === "" && parts.at(-1) === "") {
+    parts.pop();
+    key = "+";
+  }
+  for (const part of parts) {
+    const modifier = MODIFIER_NAMES[part.toLowerCase()];
+    if (!modifier) return void 0;
+    modifiers.push(modifier);
+  }
+  const name = ariaKeyName(key);
+  return name ? [...new Set(modifiers), name].join("+") : void 0;
+}
+
+// src/core/appearance.ts
+var REDUCED_MOTION_CLASS = "cd-shell-reduce-motion";
+
+// src/core/messages.ts
+var defaultMessages = {
+  menu: "Menu",
+  tools: "Tools",
+  canvas: "Diagram",
+  zoom: "Zoom",
+  zoomOut: "Zoom out",
+  zoomIn: "Zoom in",
+  zoomToActual: (percent) => `Zoom to ${percent}`,
+  zoomToActualNow: (percent, now) => `Zoom to ${percent} (now ${now})`,
+  fit: "Fit to view",
+  legend: "Legend",
+  closeLegend: "Close legend",
+  problems: (count, formattedCount) => `${formattedCount} ${count === 1 ? "problem" : "problems"}`,
+  problemsLabel: (count, errors, formattedCount, formattedErrors) => `${formattedCount} ${count === 1 ? "problem" : "problems"}, ${errors === 0 ? "no errors" : `${formattedErrors} ${errors === 1 ? "error" : "errors"}`}`,
+  showProblems: "Show in Problems view",
+  emptyHint: "Pick a tool from the palette to start.",
+  insertExample: "Insert example",
+  invalidFile: (diagram) => `This file isn't a valid ${diagram} right now. The diagram shows the last valid version and is read-only until you fix the text.`,
+  keyNames: { ctrl: "Ctrl", shift: "Shift", plus: "Plus", minus: "Minus" }
+};
+
+// src/diagram-js/palette-skin.ts
+var TOOLS_GROUP = "tools";
+var READ_ONLY_ACTIONS = /* @__PURE__ */ new Set(["lasso-tool", "hand-tool"]);
+var TOOL_ACTION_SUFFIX = "-tool";
+var ENTRIES_SELECTOR = ".djs-palette-entries";
+var ENTRY_SELECTOR = ".entry";
+var PaletteSkin = class {
+  constructor(element, readEntries) {
+    this.element = element;
+    this.readEntries = readEntries;
+    element.setAttribute("data-chrome", "palette");
+    element.addEventListener("keydown", this.onKeydown);
+    element.addEventListener("focusin", this.onFocusIn);
+    element.addEventListener("focusout", this.onFocusOut);
+    this.refresh();
+  }
+  element;
+  readEntries;
+  label = defaultMessages.tools;
+  activeTool = null;
+  /** The veto of a read-only canvas, at once with the invalid import. */
+  locked = false;
+  /** The `aria-disabled` marks of a read-only canvas, once the shell's delay has passed. */
+  readOnlyShown = false;
+  entries = {};
+  rovingAction;
+  focusedEntry;
+  /** The `aria-disabled` an entry had before read-only marked it (`null`: none). */
+  disabledEntries = /* @__PURE__ */ new WeakMap();
+  setLabel(label) {
+    this.label = label;
+    this.apply();
+  }
+  setActiveTool(tool) {
+    this.activeTool = tool;
+    this.apply();
+  }
+  setReadOnly(state) {
+    this.locked = state.locked;
+    this.readOnlyShown = state.locked && state.shown;
+    this.apply();
+  }
+  /**
+   * Whether `palette.trigger` must refuse `entry`: on a locked canvas every entry but Lasso and
+   * Hand, also before their marks show. `palette.trigger` carries the entry definition without its
+   * id, so the entry element is found through the DOM event; without one, only the tools group
+   * passes.
+   */
+  vetoes(entry, event) {
+    if (!this.locked) return false;
+    const element = this.entryOf(
+      event?.delegateTarget ?? event?.target ?? null
+    );
+    if (element) return !staysActive(element);
+    return entry.group !== TOOLS_GROUP;
+  }
+  /** After `palette.changed`: re-read the entries and re-apply every attribute. */
+  refresh() {
+    this.entries = this.readEntries();
+    this.apply();
+  }
+  entryTooltip(entry) {
+    const action = entry.getAttribute("data-action");
+    const definition = action === null ? void 0 : this.entries[action];
+    if (!definition?.title) return null;
+    return definition.shortcut ? { label: definition.title, shortcut: definition.shortcut } : { label: definition.title };
+  }
+  destroy() {
+    this.element.removeEventListener("keydown", this.onKeydown);
+    this.element.removeEventListener("focusin", this.onFocusIn);
+    this.element.removeEventListener("focusout", this.onFocusOut);
+    this.focusedEntry = void 0;
+  }
+  apply() {
+    const container = this.element.querySelector(ENTRIES_SELECTOR);
+    if (container) {
+      container.setAttribute("role", "toolbar");
+      container.setAttribute("aria-label", this.label);
+    }
+    const entries = this.entryElements();
+    for (const entry of entries) {
+      if (!entry.hasAttribute("role")) entry.setAttribute("role", "button");
+      this.applyKeyShortcuts(entry);
+      this.applyPressed(entry);
+      this.applyDisabled(entry);
+    }
+    this.applyTabStops(entries);
+    this.restoreFocus(entries);
+  }
+  // Guide §5.6: a button with a shortcut names it for assistive technology, not only in the chip.
+  applyKeyShortcuts(entry) {
+    const action = actionOf(entry);
+    const definition = action === void 0 ? void 0 : this.entries[action];
+    const keyShortcuts = definition?.ariaKeyShortcuts ?? (definition?.shortcut ? ariaKeyShortcutsFromLabel(definition.shortcut) : void 0);
+    if (keyShortcuts) entry.setAttribute("aria-keyshortcuts", keyShortcuts);
+  }
+  applyPressed(entry) {
+    const action = actionOf(entry);
+    if (groupOf(entry) !== TOOLS_GROUP || !action?.endsWith(TOOL_ACTION_SUFFIX)) return;
+    const tool = action.slice(0, -TOOL_ACTION_SUFFIX.length);
+    entry.setAttribute("aria-pressed", String(tool === this.activeTool));
+  }
+  applyDisabled(entry) {
+    if (this.readOnlyShown && !staysActive(entry)) {
+      if (!this.disabledEntries.has(entry)) {
+        this.disabledEntries.set(entry, entry.getAttribute("aria-disabled"));
+      }
+      entry.setAttribute("aria-disabled", "true");
+      return;
+    }
+    if (!this.disabledEntries.has(entry)) return;
+    const previous = this.disabledEntries.get(entry);
+    this.disabledEntries.delete(entry);
+    if (previous === null || previous === void 0) entry.removeAttribute("aria-disabled");
+    else entry.setAttribute("aria-disabled", previous);
+  }
+  applyTabStops(entries) {
+    const stop = entries.find((entry) => actionOf(entry) === this.rovingAction) ?? entries[0];
+    for (const entry of entries) entry.tabIndex = entry === stop ? 0 : -1;
+  }
+  // A rebuild removes the focused entry; without this the focus would fall back to <body>.
+  restoreFocus(entries) {
+    const lost = this.focusedEntry;
+    if (!lost || lost.isConnected) return;
+    this.focusedEntry = void 0;
+    const replacement = entries.find((entry) => actionOf(entry) === actionOf(lost));
+    const active = this.element.ownerDocument.activeElement;
+    const focusIsNowhere = !active || active === this.element.ownerDocument.body;
+    if (replacement && focusIsNowhere) replacement.focus();
+  }
+  entryElements() {
+    const container = this.element.querySelector(ENTRIES_SELECTOR);
+    return container ? Array.from(container.querySelectorAll(ENTRY_SELECTOR)) : [];
+  }
+  entryOf(target) {
+    if (!(target instanceof Element)) return void 0;
+    const entry = target.closest(ENTRY_SELECTOR);
+    return entry && this.element.contains(entry) ? entry : void 0;
+  }
+  onFocusIn = (event) => {
+    const entry = this.entryOf(event.target);
+    if (!entry) return;
+    this.focusedEntry = entry;
+    this.rovingAction = actionOf(entry);
+    this.applyTabStops(this.entryElements());
+  };
+  onFocusOut = (event) => {
+    const entry = this.entryOf(event.target);
+    if (!entry || entry !== this.focusedEntry || !entry.isConnected) return;
+    const next = event.relatedTarget;
+    if (!(next instanceof Node) || !this.element.contains(next)) this.focusedEntry = void 0;
+  };
+  onKeydown = (event) => {
+    if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) return;
+    const entry = this.entryOf(event.target);
+    if (!entry) return;
+    const entries = this.entryElements();
+    const index = entries.indexOf(entry);
+    const last = entries.length - 1;
+    let next;
+    switch (event.key) {
+      case "ArrowLeft":
+        next = entries[index <= 0 ? last : index - 1];
+        break;
+      case "ArrowRight":
+        next = entries[index >= last ? 0 : index + 1];
+        break;
+      case "Home":
+        next = entries[0];
+        break;
+      case "End":
+        next = entries[last];
+        break;
+      case "Enter":
+      case " ":
+        event.preventDefault();
+        event.stopPropagation();
+        if (!event.repeat) activate(entry);
+        return;
+      default:
+        return;
+    }
+    event.preventDefault();
+    event.stopPropagation();
+    if (!next) return;
+    this.rovingAction = actionOf(next);
+    this.applyTabStops(entries);
+    next.focus();
+  };
+};
+function actionOf(entry) {
+  return entry.getAttribute("data-action") ?? void 0;
+}
+function staysActive(entry) {
+  const action = actionOf(entry);
+  return action !== void 0 && READ_ONLY_ACTIONS.has(action);
+}
+function groupOf(entry) {
+  return entry.closest(".group")?.getAttribute("data-group") ?? void 0;
+}
+function activate(entry) {
+  const bounds = entry.getBoundingClientRect();
+  entry.dispatchEvent(
+    new MouseEvent("click", {
+      bubbles: true,
+      cancelable: true,
+      clientX: bounds.left + bounds.width / 2,
+      clientY: bounds.top + bounds.height / 2
+    })
+  );
+}
+
+// src/diagram-js/service.ts
+var SHELL_SERVICE = "modelerShell";
+var KEYBOARD_PRIORITY = 2e3;
+var TRIGGER_PRIORITY = 2e3;
+var EDITABLE = { locked: false, shown: false };
+var CANVAS_ATTRIBUTES = ["role", "aria-label"];
+function isTextField(target) {
+  if (!target || typeof target.closest !== "function") return false;
+  return target.isContentEditable === true || target.closest(TEXT_FIELD_SELECTOR) !== null;
+}
+var ShellDiagramService = class {
+  constructor(eventBus, injector) {
+    this.eventBus = eventBus;
+    this.injector = injector;
+    this.subscribe("canvas.init", (event) => {
+      this.svg = event.svg;
+      this.nameCanvas();
+    });
+    this.subscribe(
+      "palette.create",
+      (event) => this.onPaletteCreate(event.container)
+    );
+    this.subscribe("palette.changed", () => this.skin?.refresh());
+    this.subscribe("tool-manager.update", (event) => {
+      this.activeTool = event.tool ?? null;
+      this.skin?.setActiveTool(this.activeTool);
+    });
+    this.subscribe("palette.trigger", this.onPaletteTrigger, TRIGGER_PRIORITY);
+    this.subscribe("diagram.destroy", () => this.destroy());
+    const keyboard = injector.get("keyboard", false);
+    if (keyboard) {
+      keyboard.addListener(KEYBOARD_PRIORITY, this.onKeyboardKeydown);
+      this.subscriptions.push(["keyboard.keydown", this.onKeyboardKeydown]);
+    }
+  }
+  eventBus;
+  injector;
+  static $inject = ["eventBus", "injector"];
+  svg;
+  /** The canvas `<svg>`'s own `role` and `aria-label` before the shell named it. */
+  canvasOriginals;
+  skin;
+  activeTool = null;
+  shell;
+  unregisterPalette;
+  subscriptions = [];
+  destroyed = false;
+  /**
+   * Hands the palette (now or once diagram-js creates it) to `shell`; returns the detach
+   * function. A later call replaces the earlier shell.
+   */
+  attachShell(shell) {
+    this.detachShell();
+    if (this.destroyed) return () => void 0;
+    this.shell = shell;
+    this.skin?.setLabel(shell.messages.tools);
+    this.nameCanvas();
+    this.registerPalette();
+    return () => {
+      if (this.shell === shell) this.detachShell();
+    };
+  }
+  registerPalette() {
+    const { shell, skin } = this;
+    if (!shell || !skin) return;
+    this.unregisterPalette?.();
+    this.unregisterPalette = shell.registerPalette({
+      element: skin.element,
+      entryTooltip: (entry) => skin.entryTooltip(entry),
+      setReadOnly: (state) => skin.setReadOnly(state)
+    });
+  }
+  detachShell() {
+    const unregister = this.unregisterPalette;
+    this.unregisterPalette = void 0;
+    this.shell = void 0;
+    unregister?.();
+    this.unnameCanvas();
+    this.skin?.setReadOnly(EDITABLE);
+    this.skin?.setLabel(defaultMessages.tools);
+  }
+  /**
+   * The focusable canvas is an application with a name (WCAG 4.1.2): screen readers switch to focus
+   * mode, so the canvas's single-key commands reach it. A role or name the modeler set stays.
+   */
+  nameCanvas() {
+    const { svg, shell } = this;
+    if (!svg || !shell || this.canvasOriginals) return;
+    this.canvasOriginals = new Map(CANVAS_ATTRIBUTES.map((name) => [name, svg.getAttribute(name)]));
+    if (!svg.hasAttribute("role")) svg.setAttribute("role", "application");
+    if (!svg.hasAttribute("aria-label") && !svg.hasAttribute("aria-labelledby")) {
+      svg.setAttribute("aria-label", shell.messages.canvas);
+    }
+  }
+  unnameCanvas() {
+    const { svg, canvasOriginals } = this;
+    this.canvasOriginals = void 0;
+    if (!svg || !canvasOriginals) return;
+    for (const [name, value] of canvasOriginals) {
+      if (value === null) svg.removeAttribute(name);
+      else svg.setAttribute(name, value);
+    }
+  }
+  onPaletteCreate(container) {
+    this.skin?.destroy();
+    const palette = this.injector.get("palette", false);
+    const skin = new PaletteSkin(container, () => palette?.getEntries() ?? {});
+    this.skin = skin;
+    skin.setActiveTool(this.activeTool);
+    if (this.shell) skin.setLabel(this.shell.messages.tools);
+    this.moveBeforeCanvas(container);
+    this.registerPalette();
+  }
+  // Palette#_init appends the palette after the <svg>; in front of it the palette comes first in
+  // the tab order (guide §5.14).
+  moveBeforeCanvas(container) {
+    const parent = container.parentElement ?? this.canvasContainer();
+    if (!parent) return;
+    const svg = this.svg?.parentNode === parent ? this.svg : Array.from(parent.children).find((child) => child.localName === "svg");
+    if (svg) parent.insertBefore(container, svg);
+  }
+  canvasContainer() {
+    const canvas = this.injector.get("canvas", false);
+    return canvas?.getContainer();
+  }
+  onPaletteTrigger = (event) => {
+    if (!event.entry || !this.skin?.vetoes(event.entry, event.event)) return void 0;
+    event.event?.preventDefault();
+    return false;
+  };
+  /**
+   * `true` stops the diagram-js keyboard (and makes it call `preventDefault`), `false` stops it
+   * without: a chrome key in a text field inside the `<svg>` stays the field's (Shift+1 types "!"),
+   * and in the IDE host undo and redo stay the document's (guide §13.5), so they reach VS Code
+   * instead of the canvas `commandStack`.
+   */
+  onKeyboardKeydown = (context) => {
+    const event = context.keyEvent;
+    if (!event) return void 0;
+    if (matchChromeKey(event)) return !isTextField(event.target);
+    if (this.shell?.host === "ide" && isUndoRedoKey(event)) return false;
+    return void 0;
+  };
+  subscribe(name, listener, priority) {
+    const handler = listener;
+    if (priority === void 0) this.eventBus.on(name, handler);
+    else this.eventBus.on(name, priority, handler);
+    this.subscriptions.push([name, handler]);
+  }
+  destroy() {
+    if (this.destroyed) return;
+    this.destroyed = true;
+    this.detachShell();
+    this.skin?.destroy();
+    this.skin = void 0;
+    this.svg = void 0;
+    for (const [name, listener] of this.subscriptions.splice(0)) this.eventBus.off(name, listener);
+  }
+};
+function shellServiceOf(diagram) {
+  let service;
+  try {
+    service = diagram.get(SHELL_SERVICE);
+  } catch {
+    service = void 0;
+  }
+  if (!isShellService(service)) {
+    throw new Error(
+      "@miragon/modeler-shell: connectDiagramJs needs shellModule in the modeler's modules (additionalModules: [shellModule])"
+    );
+  }
+  return service;
+}
+function isShellService(value) {
+  return typeof value?.attachShell === "function";
+}
+
+// src/diagram-js/module.ts
+var shellModule = {
+  __init__: [SHELL_SERVICE],
+  [SHELL_SERVICE]: ["type", ShellDiagramService],
+  paletteTooltip: ["value", null]
+};
+
+// src/diagram-js/viewport.ts
+function createViewport(diagram, options) {
+  return new DiagramViewport(diagram, options);
+}
+var IMPORT_START_EVENTS = ["import.parse.start", "import.render.start"];
+var IMPORT_DONE_EVENT = "import.done";
+var CONTENT_EVENTS = [
+  "shape.added",
+  "shape.removed",
+  "connection.added",
+  "connection.removed",
+  "diagram.clear"
+];
+var ZOOM_STEP = Math.log10(ZOOM_MAX / ZOOM_MIN) / 10;
+var CAPTURE = { capture: true };
+var DiagramViewport = class {
+  constructor(diagram, options) {
+    this.diagram = diagram;
+    this.options = options;
+    this.canvas = diagram.get("canvas");
+    this.eventBus = diagram.get("eventBus");
+    this.container = this.canvas.getContainer();
+    this.subscribe("canvas.viewbox.changing", this.notify);
+    this.subscribe("canvas.viewbox.changed", this.onViewboxChanged);
+    this.subscribe(IMPORT_START_EVENTS, this.onImportStart);
+    this.subscribe(IMPORT_DONE_EVENT, this.onImportDone);
+    this.subscribe("elements.changed", this.onElementsChanged);
+    this.subscribe(CONTENT_EVENTS, this.onContentChanged);
+    this.subscribe("diagram.destroy", () => this.destroy());
+    this.container.addEventListener("wheel", this.onPointerInput, { capture: true, passive: true });
+    this.container.addEventListener("pointerdown", this.onPointerInput, CAPTURE);
+    this.container.addEventListener("keydown", this.onKeyInput, CAPTURE);
+    if (typeof ResizeObserver === "function") {
+      this.observer = new ResizeObserver(this.onResizeObserved);
+      this.observer.observe(this.container);
+    }
+  }
+  diagram;
+  options;
+  canvas;
+  eventBus;
+  container;
+  listeners = /* @__PURE__ */ new Set();
+  subscriptions = [];
+  observer;
+  zoomScrollService;
+  /** The last view the viewport set as its own (fit target, restore); user moves differ from it. */
+  reference;
+  /** The last view written, animation frames included. */
+  lastWritten;
+  /** The container size the current view was set or last resized for. */
+  lastSize;
+  writing = 0;
+  userMoved = false;
+  importing = false;
+  imported = false;
+  firstFitPending = true;
+  /** Nothing has decided the view yet, so an empty first import shows 100 %. */
+  emptyViewPending = true;
+  /** The 100 % of an empty first import waits for the container to get a size (hidden tab). */
+  emptyViewDue = false;
+  /** `canFit()` of the current content; the zoom panel asks every frame, `contentBounds` may be costly. */
+  fittable;
+  lastZoom = 1;
+  /** An automatic fit is due but the container had no size yet (hidden tab). */
+  autoFitDue = false;
+  /** A restored view waits for the container to get a size. */
+  pendingView;
+  animation;
+  resizeFrame;
+  destroyed = false;
+  zoom() {
+    if (!this.destroyed) this.lastZoom = this.canvas.zoom();
+    return this.lastZoom;
+  }
+  stepZoom(direction) {
+    if (this.destroyed) return;
+    this.beforeUserChange();
+    const zoom = this.canvas.zoom();
+    if (direction < 0 ? !canZoomOut(zoom) : !canZoomIn(zoom)) return;
+    const zoomScroll = this.zoomScroll();
+    if (zoomScroll) zoomScroll.stepZoom(direction);
+    else this.canvas.zoom(stepOnRaster(zoom, direction));
+  }
+  zoomToActual() {
+    if (this.destroyed) return;
+    this.beforeUserChange();
+    this.canvas.zoom(1);
+  }
+  fit(options) {
+    if (this.destroyed) return;
+    this.importing = false;
+    this.fitTo(options?.animate !== false && !this.prefersReducedMotion());
+  }
+  canFit() {
+    if (this.destroyed) return false;
+    this.fittable ??= hasExtent(this.options.contentBounds());
+    return this.fittable;
+  }
+  onChange(listener) {
+    this.listeners.add(listener);
+    return () => {
+      this.listeners.delete(listener);
+    };
+  }
+  afterImport() {
+    if (this.destroyed) return;
+    this.importing = false;
+    this.imported = true;
+    this.fittable = void 0;
+    if (this.firstFitPending && this.canFit()) {
+      this.firstFitPending = false;
+      this.emptyViewPending = false;
+      this.emptyViewDue = false;
+      if (!this.userMoved && !this.fitTo(false)) this.autoFitDue = true;
+    } else if (this.firstFitPending && this.emptyViewPending) {
+      this.emptyViewPending = false;
+      if (!this.userMoved && !this.showActualSize()) this.emptyViewDue = true;
+    }
+    this.notify();
+  }
+  restore(viewbox) {
+    if (this.destroyed) return;
+    this.importing = false;
+    this.imported = true;
+    this.fittable = void 0;
+    this.emptyViewPending = false;
+    this.emptyViewDue = false;
+    this.cancelAnimation();
+    this.show(viewbox);
+    this.notify();
+  }
+  freeRectCenter() {
+    if (this.destroyed) return void 0;
+    const centre = freeRectCenter(this.canvas.getSize(), this.options.insets());
+    const view = this.currentView();
+    if (!centre || !view) return void 0;
+    return { x: view.x + centre.x / view.scale, y: view.y + centre.y / view.scale };
+  }
+  getViewbox() {
+    if (this.destroyed) return void 0;
+    if (this.pendingView) return { ...this.pendingView };
+    const size = this.canvas.getSize();
+    if (!hasSize(size)) return void 0;
+    const { x, y, scale } = this.canvas.viewbox();
+    return { x, y, width: size.width / scale, height: size.height / scale };
+  }
+  isAutomatic() {
+    return !this.userMoved;
+  }
+  getState() {
+    if (!this.imported) return void 0;
+    const viewbox = this.getViewbox();
+    return viewbox ? { viewbox, userMoved: this.userMoved } : void 0;
+  }
+  setState(state) {
+    if (this.destroyed) return;
+    this.importing = false;
+    this.imported = true;
+    this.fittable = void 0;
+    this.cancelAnimation();
+    this.userMoved = state.userMoved;
+    this.autoFitDue = false;
+    this.emptyViewPending = false;
+    this.emptyViewDue = false;
+    if (this.canFit()) this.firstFitPending = false;
+    this.show(state.viewbox);
+    this.notify();
+  }
+  /** `canvas.resized()`; viewbox changes it causes (keep-selection-visible) are not user moves. */
+  resized() {
+    if (this.destroyed) return;
+    this.writing++;
+    try {
+      this.canvas.resized();
+    } finally {
+      this.writing--;
+    }
+  }
+  destroy() {
+    if (this.destroyed) return;
+    this.destroyed = true;
+    this.cancelAnimation();
+    if (this.resizeFrame !== void 0) cancelAnimationFrame(this.resizeFrame);
+    this.resizeFrame = void 0;
+    this.observer?.disconnect();
+    this.container.removeEventListener("wheel", this.onPointerInput, CAPTURE);
+    this.container.removeEventListener("pointerdown", this.onPointerInput, CAPTURE);
+    this.container.removeEventListener("keydown", this.onKeyInput, CAPTURE);
+    for (const [events, listener] of this.subscriptions.splice(0)) this.eventBus.off(events, listener);
+    this.listeners.clear();
+  }
+  /** Fits now (jump) or animated; false when there is nothing to fit or no container size. */
+  fitTo(animate) {
+    this.cancelAnimation();
+    const bounds = this.options.contentBounds();
+    if (!bounds) return false;
+    const target = fitViewbox(bounds, this.canvas.getSize(), this.options.insets());
+    if (!target) return false;
+    this.userMoved = false;
+    this.firstFitPending = false;
+    this.autoFitDue = false;
+    this.emptyViewPending = false;
+    this.emptyViewDue = false;
+    this.pendingView = void 0;
+    const from = this.currentView();
+    if (animate && from && !sameView(from, target) && typeof requestAnimationFrame === "function") {
+      this.animate(from, target);
+    } else {
+      this.write(target);
+    }
+    return true;
+  }
+  animate(from, target) {
+    this.reference = toView(target);
+    const animation = { frame: 0 };
+    const startedAt = performance.now();
+    const step = (timestamp) => {
+      if (this.animation !== animation) return;
+      if (!hasSize(this.canvas.getSize())) {
+        this.cancelAnimation();
+        this.autoFitDue = true;
+        return;
+      }
+      const progress = Math.min(1, Math.max(0, (timestamp - startedAt) / FIT_ANIMATION_MS));
+      if (progress >= 1) {
+        this.animation = void 0;
+        this.write(target);
+        return;
+      }
+      this.write(interpolateViewbox(from, target, easeStandard(progress)), false);
+      animation.frame = requestAnimationFrame(step);
+    };
+    this.animation = animation;
+    animation.frame = requestAnimationFrame(step);
+  }
+  cancelAnimation() {
+    const animation = this.animation;
+    if (!animation) return;
+    this.animation = void 0;
+    cancelAnimationFrame(animation.frame);
+    if (this.lastWritten) this.reference = this.lastWritten;
+  }
+  /**
+   * 100 % around the centre of the free rectangle, written as the viewport's own view; true when
+   * the view is at 100 % afterwards, false while the container has no size.
+   */
+  showActualSize() {
+    const size = this.canvas.getSize();
+    const centre = freeRectCenter(size, this.options.insets());
+    const view = this.currentView();
+    if (!centre || !view) return false;
+    if (Math.abs(view.scale - 1) <= VIEW_TOLERANCE) return true;
+    this.cancelAnimation();
+    this.write({
+      x: view.x + centre.x / view.scale - centre.x,
+      y: view.y + centre.y / view.scale - centre.y,
+      width: size.width,
+      height: size.height
+    });
+    return true;
+  }
+  /** Shows a restored view now, or once the container has a size. */
+  show(viewbox) {
+    if (hasSize(this.canvas.getSize())) {
+      this.pendingView = void 0;
+      this.write(viewbox);
+    } else {
+      this.pendingView = { x: viewbox.x, y: viewbox.y, width: viewbox.width, height: viewbox.height };
+    }
+  }
+  /** Callers make sure the container has a size: diagram-js would set a scale of 0 otherwise. */
+  write(box, asReference = true) {
+    const size = this.canvas.getSize();
+    const view = {
+      x: box.x,
+      y: box.y,
+      scale: Math.min(size.width / box.width, size.height / box.height)
+    };
+    this.writing++;
+    try {
+      this.canvas.viewbox({ x: box.x, y: box.y, width: box.width, height: box.height });
+    } finally {
+      this.writing--;
+    }
+    this.lastWritten = view;
+    if (asReference) this.reference = view;
+    this.lastSize = { width: size.width, height: size.height };
+  }
+  currentView() {
+    const size = this.canvas.getSize();
+    const { x, y, scale } = this.canvas.viewbox();
+    if (!(scale > 0 && Number.isFinite(scale))) return void 0;
+    return { x, y, width: size.width / scale, height: size.height / scale, scale };
+  }
+  beforeUserChange() {
+    this.importing = false;
+    this.cancelAnimation();
+  }
+  zoomScroll() {
+    if (this.zoomScrollService === void 0) {
+      try {
+        this.zoomScrollService = this.diagram.get("zoomScroll") ?? null;
+      } catch {
+        this.zoomScrollService = null;
+      }
+    }
+    return this.zoomScrollService;
+  }
+  prefersReducedMotion() {
+    if (this.options.prefersReducedMotion) return this.options.prefersReducedMotion();
+    if (this.container.ownerDocument.documentElement.classList.contains(REDUCED_MOTION_CLASS)) return true;
+    return typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
+  }
+  isOwnView(current) {
+    if (this.reference && sameView(current, this.reference)) return true;
+    return this.animation !== void 0 && this.lastWritten !== void 0 && sameView(current, this.lastWritten);
+  }
+  // Not a flag around the own writes alone: with `canvas.deferUpdate` the event of an own change
+  // arrives up to 300ms later, so it is recognised by its view.
+  onViewboxChanged = (event) => {
+    if (this.writing === 0 && !this.importing) {
+      const current = event?.viewbox ?? this.canvas.viewbox();
+      if (!this.isOwnView(current)) {
+        this.cancelAnimation();
+        this.userMoved = true;
+        this.autoFitDue = false;
+        this.emptyViewDue = false;
+      }
+    }
+    this.notify();
+  };
+  onImportStart = () => {
+    this.importing = true;
+  };
+  onImportDone = () => {
+    this.importing = false;
+    this.fittable = void 0;
+    this.notify();
+  };
+  onContentChanged = () => {
+    this.fittable = void 0;
+  };
+  // Guide §5.9: an element the user creates on the canvas never fits. Once such content exists,
+  // only imports that keep the view follow, so the first automatic fit is no longer due.
+  onElementsChanged = () => {
+    this.fittable = void 0;
+    if (this.imported && !this.importing && this.firstFitPending && this.canFit()) {
+      this.firstFitPending = false;
+    }
+    this.notify();
+  };
+  // User input also ends an import window a failed import never closed with `import.done`.
+  onPointerInput = () => {
+    this.importing = false;
+    this.cancelAnimation();
+  };
+  onKeyInput = (event) => {
+    this.importing = false;
+    if (matchChromeKey(event)) this.cancelAnimation();
+  };
+  onResizeObserved = () => {
+    if (this.destroyed || this.resizeFrame !== void 0) return;
+    if (typeof requestAnimationFrame !== "function") {
+      this.onResize();
+      return;
+    }
+    this.resizeFrame = requestAnimationFrame(() => {
+      this.resizeFrame = void 0;
+      this.onResize();
+    });
+  };
+  onResize() {
+    if (this.destroyed) return;
+    const size = this.canvas.getSize();
+    if (!hasSize(size)) return;
+    const changed = this.lastSize?.width !== size.width || this.lastSize.height !== size.height;
+    if (!changed && !this.pendingView && !this.autoFitDue && !this.emptyViewDue) return;
+    this.lastSize = { width: size.width, height: size.height };
+    this.resized();
+    const restored = this.pendingView;
+    if (restored) {
+      this.pendingView = void 0;
+      this.write(restored);
+    }
+    if (this.userMoved) return;
+    if (this.emptyViewDue) {
+      this.emptyViewDue = false;
+      this.showActualSize();
+      return;
+    }
+    if (this.autoFitDue || !restored && !this.firstFitPending) this.fitTo(false);
+  }
+  subscribe(events, listener) {
+    this.eventBus.on(events, listener);
+    this.subscriptions.push([events, listener]);
+  }
+  notify = () => {
+    for (const listener of [...this.listeners]) listener();
+  };
+};
+function toView(box) {
+  return { x: box.x, y: box.y, scale: box.scale };
+}
+function hasSize(size) {
+  return size.width > 0 && size.height > 0;
+}
+function hasExtent(bounds) {
+  return bounds !== void 0 && (bounds.width > 0 || bounds.height > 0);
+}
+function stepOnRaster(zoom, direction) {
+  const level = Math.round(Math.log10(zoom) / ZOOM_STEP) * ZOOM_STEP + ZOOM_STEP * direction;
+  return Math.min(ZOOM_MAX, Math.max(ZOOM_MIN, 10 ** level));
+}
+
+// src/diagram-js/connect.ts
+var HINT_SYNC_PRIORITY = 500;
+function connectDiagramJs(shell, diagram, options) {
+  const service = shellServiceOf(diagram);
+  const eventBus = diagram.get("eventBus");
+  const prefersReducedMotion = options.prefersReducedMotion?.bind(options);
+  const viewport = new DiagramViewport(diagram, {
+    contentBounds: () => options.contentBounds(),
+    insets: () => shell.fitInsets(),
+    ...prefersReducedMotion ? { prefersReducedMotion } : {}
+  });
+  shell.setZoomTarget(viewport);
+  const detachPalette = service.attachShell(shell);
+  viewport.resized();
+  const isEmpty = options.isEmpty ? () => options.isEmpty?.() === true : () => !viewport.canFit();
+  const syncHint = () => shell.setEmptyHint(isEmpty());
+  eventBus.on(["import.done", "elements.changed"], HINT_SYNC_PRIORITY, syncHint);
+  let destroyed = false;
+  const destroy = () => {
+    if (destroyed) return;
+    destroyed = true;
+    eventBus.off(["import.done", "elements.changed"], syncHint);
+    eventBus.off("diagram.destroy", destroy);
+    detachPalette();
+    shell.setZoomTarget(null);
+    viewport.destroy();
+  };
+  eventBus.on("diagram.destroy", destroy);
+  return { viewport, destroy };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  connectDiagramJs,
+  createViewport,
+  shellModule
+});
+//# sourceMappingURL=diagram-js.cjs.map