@miragon/modeler-shell 0.0.0-stage → 0.1.0

package/src/diagram-js/palette-skin.ts

@@ -0,0 +1,267 @@
+import { ariaKeyShortcutsFromLabel, defaultMessages } from "../core/index.js";
+import type { PaletteReadOnlyState, TooltipContent } from "../dom/index.js";
+
+/** The diagram-js palette group of the tools (`Palette#updateToolHighlight` looks for it). */
+export const TOOLS_GROUP = "tools";
+
+/**
+ * The entries that stay active on a read-only canvas (guide §13.5: Lasso and Hand). Every other
+ * entry changes the diagram, also tools such as drawing, space or connect.
+ */
+export const READ_ONLY_ACTIONS: ReadonlySet<string> = new Set(["lasso-tool", "hand-tool"]);
+
+const TOOL_ACTION_SUFFIX = "-tool";
+const ENTRIES_SELECTOR = ".djs-palette-entries";
+const ENTRY_SELECTOR = ".entry";
+
+/** One entry of `palette.getEntries()`, as far as the skin reads it. */
+export interface PaletteEntryLike {
+  title?: string | undefined;
+  shortcut?: string | undefined;
+  /** `aria-keyshortcuts` (WAI-ARIA names); default `ariaKeyShortcutsFromLabel(shortcut)`. */
+  ariaKeyShortcuts?: string | undefined;
+  group?: string | undefined;
+}
+
+/**
+ * The shell's additions to the diagram-js palette container (guide §5.5): `data-chrome`, the
+ * toolbar semantics of the entries, the roving tab stop with its keys, `aria-pressed` for the
+ * active tool and `aria-disabled` in read-only. diagram-js clears and rebuilds every entry on each
+ * change, so `refresh()` re-applies all of it after every `palette.changed`.
+ */
+export class PaletteSkin {
+  private label = defaultMessages.tools;
+  private activeTool: string | null = null;
+  /** The veto of a read-only canvas, at once with the invalid import. */
+  private locked = false;
+  /** The `aria-disabled` marks of a read-only canvas, once the shell's delay has passed. */
+  private readOnlyShown = false;
+  private entries: Readonly<Record<string, PaletteEntryLike>> = {};
+  private rovingAction: string | undefined;
+  private focusedEntry: HTMLElement | undefined;
+  /** The `aria-disabled` an entry had before read-only marked it (`null`: none). */
+  private readonly disabledEntries = new WeakMap<Element, string | null>();
+
+  constructor(
+    readonly element: HTMLElement,
+    private readonly readEntries: () => Readonly<Record<string, PaletteEntryLike>>,
+  ) {
+    element.setAttribute("data-chrome", "palette");
+    element.addEventListener("keydown", this.onKeydown);
+    element.addEventListener("focusin", this.onFocusIn);
+    element.addEventListener("focusout", this.onFocusOut);
+    this.refresh();
+  }
+
+  setLabel(label: string): void {
+    this.label = label;
+    this.apply();
+  }
+
+  setActiveTool(tool: string | null): void {
+    this.activeTool = tool;
+    this.apply();
+  }
+
+  setReadOnly(state: PaletteReadOnlyState): void {
+    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: PaletteEntryLike, event: Event | undefined): boolean {
+    if (!this.locked) return false;
+    const element = this.entryOf(
+      (event as { delegateTarget?: EventTarget } | undefined)?.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(): void {
+    this.entries = this.readEntries();
+    this.apply();
+  }
+
+  entryTooltip(entry: HTMLElement): TooltipContent | null {
+    const action = entry.getAttribute("data-action");
+    const definition = action === null ? undefined : this.entries[action];
+    if (!definition?.title) return null;
+    return definition.shortcut
+      ? { label: definition.title, shortcut: definition.shortcut }
+      : { label: definition.title };
+  }
+
+  destroy(): void {
+    this.element.removeEventListener("keydown", this.onKeydown);
+    this.element.removeEventListener("focusin", this.onFocusIn);
+    this.element.removeEventListener("focusout", this.onFocusOut);
+    this.focusedEntry = undefined;
+  }
+
+  private apply(): void {
+    const container = this.element.querySelector<HTMLElement>(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.
+  private applyKeyShortcuts(entry: HTMLElement): void {
+    const action = actionOf(entry);
+    const definition = action === undefined ? undefined : this.entries[action];
+    const keyShortcuts =
+      definition?.ariaKeyShortcuts ??
+      (definition?.shortcut ? ariaKeyShortcutsFromLabel(definition.shortcut) : undefined);
+    if (keyShortcuts) entry.setAttribute("aria-keyshortcuts", keyShortcuts);
+  }
+
+  private applyPressed(entry: HTMLElement): void {
+    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));
+  }
+
+  private applyDisabled(entry: HTMLElement): void {
+    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 === undefined) entry.removeAttribute("aria-disabled");
+    else entry.setAttribute("aria-disabled", previous);
+  }
+
+  private applyTabStops(entries: readonly HTMLElement[]): void {
+    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>.
+  private restoreFocus(entries: readonly HTMLElement[]): void {
+    const lost = this.focusedEntry;
+    if (!lost || lost.isConnected) return;
+    this.focusedEntry = undefined;
+    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();
+  }
+
+  private entryElements(): HTMLElement[] {
+    const container = this.element.querySelector(ENTRIES_SELECTOR);
+    return container ? Array.from(container.querySelectorAll<HTMLElement>(ENTRY_SELECTOR)) : [];
+  }
+
+  private entryOf(target: EventTarget | null): HTMLElement | undefined {
+    if (!(target instanceof Element)) return undefined;
+    const entry = target.closest<HTMLElement>(ENTRY_SELECTOR);
+    return entry && this.element.contains(entry) ? entry : undefined;
+  }
+
+  private readonly onFocusIn = (event: FocusEvent): void => {
+    const entry = this.entryOf(event.target);
+    if (!entry) return;
+    this.focusedEntry = entry;
+    this.rovingAction = actionOf(entry);
+    this.applyTabStops(this.entryElements());
+  };
+
+  private readonly onFocusOut = (event: FocusEvent): void => {
+    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 = undefined;
+  };
+
+  private readonly onKeydown = (event: KeyboardEvent): void => {
+    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: HTMLElement | undefined;
+    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: Element): string | undefined {
+  return entry.getAttribute("data-action") ?? undefined;
+}
+
+function staysActive(entry: Element): boolean {
+  const action = actionOf(entry);
+  return action !== undefined && READ_ONLY_ACTIONS.has(action);
+}
+
+function groupOf(entry: Element): string | undefined {
+  return entry.closest(".group")?.getAttribute("data-group") ?? undefined;
+}
+
+// Enter and Space activate an entry with a synthetic click: `detail` 0, clientX/Y at the entry's
+// centre. A creating entry tells it from a pointer click (`detail` ≥ 1) by that and places its
+// element at `viewport.freeRectCenter()` (guide §5.5). diagram-js handles entry clicks through a
+// delegate on the palette container, so it goes through `palette.trigger` and its read-only veto
+// exactly like a pointer click.
+function activate(entry: HTMLElement): void {
+  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,
+    }),
+  );
+}

package/src/diagram-js/palette.css

@@ -0,0 +1,269 @@
+/*
+ * Horizontal palette skin of @miragon/modeler-shell (owned by src/diagram-js), on
+ * .djs-palette[data-chrome="palette"] (specificity of at least 0,2,0): top-centre glass island,
+ * 32px entries, group separators, active-tool ring, second row, read-only entries.
+ */
+
+.djs-palette[data-chrome="palette"] {
+  --modeler-shell-palette-focus-width: 2px;
+  --modeler-shell-palette-focus-offset: 2px;
+  --modeler-shell-palette-focus-offset-pressed: 2px;
+
+  position: absolute;
+  top: var(--cd-shell-rand);
+  left: 50%;
+  z-index: 110;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  width: auto;
+  height: var(--cd-shell-zeile);
+  padding: 3px;
+  border: 1px solid var(--cd-ui-linie);
+  border-radius: var(--cd-radius-md);
+  background: color-mix(in srgb, var(--cd-ui-flaeche-hoch) var(--cd-ui-chrome-deckkraft), transparent);
+  -webkit-backdrop-filter: blur(8px);
+  backdrop-filter: blur(8px);
+  box-shadow: var(--cd-shadow-1);
+  color: var(--cd-ui-text);
+  transform: translateX(-50%);
+  white-space: nowrap;
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+/* The vertical layout's two columns and its open/close toggle have no place in the horizontal island. */
+.djs-palette[data-chrome="palette"].two-column.open {
+  width: auto;
+}
+
+.djs-palette[data-chrome="palette"] .djs-palette-toggle,
+.djs-palette[data-chrome="palette"] .djs-palette-entries::after {
+  display: none;
+}
+
+.djs-palette[data-chrome="palette"] .djs-palette-entries,
+.djs-palette[data-chrome="palette"]:not(.open) .djs-palette-entries {
+  display: flex;
+  flex: none;
+  align-items: center;
+}
+
+.djs-palette[data-chrome="palette"] .group {
+  position: relative;
+  display: flex;
+  flex: none;
+  align-items: center;
+  gap: 2px;
+}
+
+/* 8px, the 1px line, 8px. */
+.djs-palette[data-chrome="palette"] .group + .group {
+  margin-left: 8px;
+  padding-left: 9px;
+}
+
+.djs-palette[data-chrome="palette"] .group + .group::before {
+  content: "";
+  position: absolute;
+  top: 4px;
+  bottom: 4px;
+  left: 0;
+  width: 1px;
+  background: var(--cd-ui-linie);
+}
+
+.djs-palette[data-chrome="palette"] .separator {
+  flex: none;
+  align-self: stretch;
+  width: 1px;
+  height: auto;
+  margin: 4px 6px;
+  padding: 0;
+  border: 0;
+  background: var(--cd-ui-linie);
+}
+
+.djs-palette[data-chrome="palette"] .entry {
+  position: relative;
+  display: flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  width: var(--cd-shell-ziel);
+  height: var(--cd-shell-ziel);
+  margin: 0;
+  padding: 0;
+  float: none;
+  border: 0;
+  border-radius: var(--cd-radius-sm);
+  background: transparent;
+  color: var(--cd-ui-text);
+  font-size: 24px;
+  line-height: 1;
+  text-align: center;
+  cursor: default;
+  transition:
+    background-color var(--cd-motion-fast) var(--cd-ease),
+    color var(--cd-motion-fast) var(--cd-ease),
+    box-shadow var(--cd-motion-fast) var(--cd-ease);
+}
+
+.djs-palette[data-chrome="palette"] .entry > img,
+.djs-palette[data-chrome="palette"] .entry > svg {
+  display: block;
+  flex: none;
+  max-width: 100%;
+  max-height: 100%;
+}
+
+/*
+ * Tool icons take the entry's colour in every state, also against renderer or diagram-js rules on
+ * the icon itself. Notation previews keep their own colours (guide §5.5), so only tools inherit.
+ */
+.djs-palette[data-chrome="palette"] .group[data-group="tools"] .entry > svg,
+.djs-palette[data-chrome="palette"] .group[data-group="tools"] .entry::before,
+.djs-palette[data-chrome="palette"] .entry[data-action$="-tool"] > svg,
+.djs-palette[data-chrome="palette"] .entry[data-action$="-tool"]::before {
+  color: inherit;
+}
+
+.djs-palette[data-chrome="palette"] .entry:hover {
+  background: var(--cd-ui-hover);
+  color: var(--cd-ui-interaktion);
+}
+
+/*
+ * diagram-js forces the colour of `highlighted-entry` with !important, and the class goes stale after
+ * a rebuild; the active tool is marked through aria-pressed instead.
+ */
+.djs-palette[data-chrome="palette"] .entry.highlighted-entry {
+  color: var(--cd-ui-text) !important;
+}
+
+.djs-palette[data-chrome="palette"] .entry.highlighted-entry:hover {
+  color: var(--cd-ui-interaktion) !important;
+}
+
+.djs-palette[data-chrome="palette"] .entry[aria-pressed="true"] {
+  background: var(--cd-ui-hover);
+  box-shadow: inset 0 0 0 2px var(--cd-ui-interaktion);
+  color: var(--cd-ui-text);
+}
+
+.djs-palette[data-chrome="palette"] .entry[aria-pressed="true"]:hover {
+  color: var(--cd-ui-interaktion);
+}
+
+.djs-palette[data-chrome="palette"] .entry:focus {
+  outline: none;
+}
+
+.djs-palette[data-chrome="palette"] .entry:focus-visible {
+  outline: var(--modeler-shell-palette-focus-width) solid var(--cd-ui-fokus);
+  outline-offset: var(--modeler-shell-palette-focus-offset);
+}
+
+.djs-palette[data-chrome="palette"] .entry[aria-pressed="true"]:focus-visible {
+  outline-offset: var(--modeler-shell-palette-focus-offset-pressed);
+}
+
+/* Read-only canvas (guide §13.5): tool icons muted, notation previews grey, never by opacity. */
+.djs-palette[data-chrome="palette"] .entry[aria-disabled="true"],
+.djs-palette[data-chrome="palette"] .entry[aria-disabled="true"]:hover {
+  background: transparent;
+  color: var(--cd-ui-text-leise);
+  cursor: not-allowed;
+}
+
+.djs-palette[data-chrome="palette"] .entry.highlighted-entry[aria-disabled="true"] {
+  color: var(--cd-ui-text-leise) !important;
+}
+
+.djs-palette[data-chrome="palette"] .entry[aria-disabled="true"] > *,
+.djs-palette[data-chrome="palette"] .entry[aria-disabled="true"]::before {
+  filter: grayscale(1);
+}
+
+[data-cd-kontrast="hoch"] .djs-palette[data-chrome="palette"] {
+  --modeler-shell-palette-focus-width: 3px;
+
+  box-shadow: none;
+}
+
+/*
+ * Second row (guide §5.15): set by the shell's measurement or by the container width. It scrolls, so
+ * the focus ring moves inside the entry; on the active tool 1px inside its 2px ring.
+ */
+.cd-shell[data-palette="second-row"] .djs-palette[data-chrome="palette"] {
+  --modeler-shell-palette-focus-offset: calc(-1 * var(--modeler-shell-palette-focus-width));
+  --modeler-shell-palette-focus-offset-pressed: calc(-3px - var(--modeler-shell-palette-focus-width));
+
+  top: var(--cd-shell-frei);
+  max-width: calc(100cqw - 2 * var(--cd-shell-rand));
+  overflow-x: auto;
+  overflow-y: hidden;
+  overscroll-behavior-x: contain;
+  scrollbar-width: none;
+}
+
+.cd-shell[data-palette="second-row"] .djs-palette[data-chrome="palette"]::-webkit-scrollbar {
+  display: none;
+}
+
+@container cd-shell (max-width: 760px) {
+  .djs-palette[data-chrome="palette"] {
+    --modeler-shell-palette-focus-offset: calc(-1 * var(--modeler-shell-palette-focus-width));
+    --modeler-shell-palette-focus-offset-pressed: calc(-3px - var(--modeler-shell-palette-focus-width));
+
+    top: var(--cd-shell-frei);
+    max-width: calc(100cqw - 2 * var(--cd-shell-rand));
+    overflow-x: auto;
+    overflow-y: hidden;
+    overscroll-behavior-x: contain;
+    scrollbar-width: none;
+  }
+
+  .djs-palette[data-chrome="palette"]::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+@media (forced-colors: active) {
+  .djs-palette[data-chrome="palette"] {
+    border-color: CanvasText;
+  }
+
+  .djs-palette[data-chrome="palette"] .group + .group::before,
+  .djs-palette[data-chrome="palette"] .separator {
+    forced-color-adjust: none;
+    background: CanvasText;
+  }
+
+  .djs-palette[data-chrome="palette"] .entry:focus-visible {
+    outline-color: Highlight;
+  }
+
+  .djs-palette[data-chrome="palette"] .entry[aria-pressed="true"],
+  .djs-palette[data-chrome="palette"] .entry[aria-pressed="true"]:hover {
+    forced-color-adjust: none;
+    background: Canvas;
+    color: CanvasText;
+    box-shadow: inset 0 0 0 2px Highlight;
+  }
+
+  .djs-palette[data-chrome="palette"] .entry[aria-disabled="true"] {
+    color: GrayText;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .djs-palette[data-chrome="palette"] .entry {
+    transition: none;
+  }
+}
+
+html.cd-shell-reduce-motion .djs-palette[data-chrome="palette"] .entry {
+  transition: none;
+}