@openpresentation/opf-editor 0.12.1 → 0.14.2

package/dist/canvas.js

@@ -2,16 +2,17 @@ import {
   createEditorSession,
   opfPathToJsonPointer,
   applyJsonPatch,
-  validateOpfDocument,
   getValueAtPath,
   splitOpfPath,
 } from "./index.js";
 import {
-  renderSvg,
+  renderSlideSvg,
   resolvePresentation,
 } from "@openpresentation/opf-render/svg";
 import {
   getEditableFields,
+  emptyLike,
+  fieldChoices,
   parseCanvasValue,
   createCanvasDraft,
 } from "./canvas-fields.js";
@@ -21,9 +22,10 @@ import { createRichTextInput } from "./rich-text-input.js";
 import { textInputOffsetAtPoint } from "./text-pointer.js";
 import { createRichTextToolbar } from "./rich-text-toolbar.js";
 import { createImageCropper } from "./image-cropper.js";
-import { FONTS_PENDING, fontsPendingError, whenFontsReady } from "./font-gate.js";
+import { FONTS_PENDING, fontGate, fontsPendingError, previewFonts, whenFontsReady } from "./font-gate.js";
+import { checkFormat, firstErrorMessage } from "./checks.js";
 export { getEditableFields } from "./canvas-fields.js";
-export { createFontGate, whenFontsReady, FONTS_PENDING, FONTS_UNAVAILABLE } from "./font-gate.js";
+export { whenFontsReady, FONTS_PENDING, FONTS_UNAVAILABLE } from "./font-gate.js";
 
 /** Allocated placeholder or internal-part bounds for the selection outline, not glyph ink. */
 export function allocatedSelectionBox(node, item) {
@@ -65,10 +67,12 @@ export function createCanvasEditor(container, options = {}) {
     win = doc.defaultView;
   const editor =
     options.editor ??
-    createEditorSession(options.document, { rejectInvalid: true });
-  // `options.fonts` is a font gate (createFontGate): a document whose faces are not loaded yet is never rendered. The canvas
-  // loads them first and shows "Loading fonts…" meanwhile; without a gate every document renders at once, as before.
-  const fonts = options.fonts;
+    createEditorSession(options.presentation, { rejectInvalid: true });
+  // `options.fonts` is the renderer's fonts handle (`loadFonts()`): it measures the text and draws the faces. A document whose faces
+  // are not loaded yet is never rendered: the canvas has the handle load them first and shows "Loading fonts…" meanwhile. Without a
+  // handle every document renders at once, with core's portable text estimate.
+  const handle = options.fonts, fonts = fontGate(handle);
+  const drawOptions = (extra) => ({ ...renderOptions, fonts: previewFonts(handle), ...extra });
   let slideIndex = options.slideIndex ?? 0,
     // RR-32: the canvas edits the document as authored, so a template's {{tokens}} stay visible and an inline edit never
     // overwrites one with its resolved text. The Fill template panel previews the resolved deck. Pass `variables` to override.
@@ -120,7 +124,7 @@ export function createCanvasEditor(container, options = {}) {
     onTyping: beginEdit,
     onProperties(path) { if (commit()) openProperties(path, editor.get(path)); },
     validateChange(path, value) {
-      validateRender(createCanvasDraft(editor.document, path, value));
+      validateRender(createCanvasDraft(editor.presentation, path, value));
     },
     onChange(path) { clearNotice(); options.onCommit?.({path, editor}); }
   });
@@ -144,7 +148,7 @@ export function createCanvasEditor(container, options = {}) {
   const blockControls = createBlockControls(root, {
     editor, render: renderFor, beforeEdit: () => {if(!commit())return false;richToolbar.hide();return true;}, enabled: () => layoutHandles.enabled,
     isEditing: () => !!active || !!layoutHandles.editingPath, slideIndex: () => slideIndex,
-    validate: document => validateRender(document),
+    validate: presentation => validateRender(presentation),
     clearError: clearNotice, onError: report,
     onMove: path => choose(splitOpfPath(path).join(".")),
     onCommit: value => options.onCommit?.(value),
@@ -175,20 +179,20 @@ export function createCanvasEditor(container, options = {}) {
   const pendingMessage = "Loading fonts for this document…";
   // A synchronous render or validation of a document whose faces are still loading fails with a clear "fonts-pending"
   // error and starts the load, so the next attempt succeeds. It never draws glyphs the registry cannot provide.
-  function requireFonts(document) {
-    const pending = fonts?.pending(document, renderOptions) ?? [];
+  function requireFonts(presentation) {
+    const pending = fonts?.pending(presentation, renderOptions) ?? [];
     if (!pending.length) return;
     notice.hidden = false;
     notice.textContent = pendingMessage;
-    fonts.ensure(document, { renderOptions }).then(
+    fonts.ensure(presentation, { renderOptions }).then(
       () => { if (!disposed && notice.textContent === pendingMessage) clearNotice(); },
       (error) => { if (!disposed) report(error); },
     );
     throw fontsPendingError(pending);
   }
-  function validateRender(document) {
-    requireFonts(document);
-    return renderSvg(document, {...renderOptions, slideIndex});
+  function validateRender(presentation) {
+    requireFonts(presentation);
+    return renderSlideSvg(presentation, slideIndex, drawOptions());
   }
   function fontsState(kind, detail) {
     fontsShown = true;
@@ -218,7 +222,7 @@ export function createCanvasEditor(container, options = {}) {
   function show(target) {
     if (disposed) return;
     const token = ++showToken;
-    return whenFontsReady(fonts, target ?? editor.document, {
+    return whenFontsReady(fonts, target ?? editor.presentation, {
       renderOptions,
       isCurrent: () => !disposed && token === showToken,
       loading: (pending) => fontsState("loading", pending),
@@ -234,27 +238,23 @@ export function createCanvasEditor(container, options = {}) {
     });
   }
   // Renders now when the document's fonts are loaded (errors throw to the caller), otherwise after loading them.
-  function renderFor(document) {
-    if (fonts?.pending(document ?? editor.document, renderOptions).length) show(document);
-    else render(document);
+  function renderFor(presentation) {
+    if (fonts?.pending(presentation ?? editor.presentation, renderOptions).length) show(presentation);
+    else render(presentation);
   }
-  function render(document = editor.document) {
+  function render(presentation = editor.presentation) {
     if (disposed) return;
-    requireFonts(document);
+    requireFonts(presentation);
     showToken++;
-    const slides = document.slides ?? [];
+    const slides = presentation.slides ?? [];
     slideIndex = Math.max(0, Math.min(slideIndex, slides.length - 1));
-    const svgText = renderSvg(document, {
-      ...renderOptions,
-      slideIndex,
-      trace: true,
-    });
+    const svgText = renderSlideSvg(presentation, slideIndex, drawOptions({ trace: true }));
     preview.innerHTML = svgText;
     const svg = preview.querySelector("svg");
     svg.setAttribute("role", "group");
     svg.setAttribute("aria-label", "Editable slide");
     svg.removeAttribute("aria-labelledby");
-    const geometry = resolvePresentation(document, renderOptions).slides[
+    const geometry = resolvePresentation(presentation, drawOptions()).slides[
       slideIndex
     ].geometry;
     const candidates = [...svg.querySelectorAll("[data-opf-path]")];
@@ -262,7 +262,7 @@ export function createCanvasEditor(container, options = {}) {
     for (const node of candidates) {
       const path = node.getAttribute("data-opf-path");
       const item = geometry.items.find((item) => item.path === path);
-      const value = getValueAtPath(document, path);
+      const value = getValueAtPath(presentation, path);
       if (
         seen.has(path) ||
         node.getAttribute('data-opf-generated') === 'true' ||
@@ -340,8 +340,8 @@ export function createCanvasEditor(container, options = {}) {
       });
       if (path === selectedPath) node.setAttribute("data-canvas-selected", "");
     }
-    layoutHandles.update(document, geometry);
-    blockControls.update(document, geometry);
+    layoutHandles.update(presentation, geometry);
+    blockControls.update(presentation, geometry);
     imageCropper?.update();
     if (active?.kind === "text") positionInput();
     if (active?.kind === "rich-text") active.rich?.update();
@@ -350,7 +350,7 @@ export function createCanvasEditor(container, options = {}) {
       options.onFonts?.({ state: "ready" });
     }
     options.onRender?.({
-      document,
+      presentation,
       slideIndex,
       svg,
       geometry,
@@ -392,7 +392,7 @@ export function createCanvasEditor(container, options = {}) {
           clearNotice();
           render(draft);
           options.onDraft?.({
-            document: draft,
+            presentation: draft,
             path: active.path,
             value: undefined,
           });
@@ -403,13 +403,13 @@ export function createCanvasEditor(container, options = {}) {
       }
       try {
         const value = active.kind === "rich-text" ? active.rich.value : parseCanvasValue(active.input.value, active.type, active.originalValue);
-        const draft = createCanvasDraft(editor.document, active.path, value);
+        const draft = createCanvasDraft(editor.presentation, active.path, value);
         if (deferDraft(draft)) return;
         clearNotice();
         active.valid = true;
         active.draft = draft;
         render(draft);
-        options.onDraft?.({ document: draft, path: active.path, value });
+        options.onDraft?.({ presentation: draft, path: active.path, value });
       } catch (error) {
         active.valid = false;
         report(error);
@@ -429,8 +429,8 @@ export function createCanvasEditor(container, options = {}) {
     const font = win.getComputedStyle(text),
       fontSize = parseFloat(font.fontSize),
       geometry = resolvePresentation(
-        active.draft ?? editor.document,
-        renderOptions,
+        active.draft ?? editor.presentation,
+        drawOptions(),
       ).slides[slideIndex].geometry;
     const item = geometry.items.find((item) => item.path === active.path);
     const metricLayout=geometry.items.find(item=>item.metricLayout?.parts.some(part=>part.path===active.path))?.metricLayout;
@@ -600,7 +600,7 @@ export function createCanvasEditor(container, options = {}) {
       // Only offer rich text where the canonical schema accepts TextRun[].
       if (typeof value === "string") {
         try {
-          createCanvasDraft(editor.document, path, [value]);
+          createCanvasDraft(editor.presentation, path, [value]);
           const format = doc.createElement("button");
           format.type = "button";
           format.textContent = "Format text";
@@ -683,11 +683,11 @@ export function createCanvasEditor(container, options = {}) {
     }));
   }
   function propertyDraft(edit) {
-    const draft = applyJsonPatch(editor.document, propertyPatches(edit)),
-      validation = validateOpfDocument(draft);
+    const draft = applyJsonPatch(editor.presentation, propertyPatches(edit)),
+      validation = checkFormat(draft);
     if (!validation.valid)
       throw new Error(
-        validation.errors[0]?.message ?? "This change is not valid OPF.",
+        firstErrorMessage(validation, "This change is not valid OPF."),
       );
     return draft;
   }
@@ -706,10 +706,20 @@ export function createCanvasEditor(container, options = {}) {
       label.style.cssText =
         "display:block;margin-top:10px;color:#756b85;font-size:11px";
       label.textContent = field.label;
+      const choices = field.type === "string" ? fieldChoices(field) : undefined;
       const input = doc.createElement(
-        field.type === "boolean" ? "input" : "textarea",
+        choices ? "select" : field.type === "boolean" ? "input" : "textarea",
       );
-      if (field.type === "boolean") {
+      if (choices) {
+        // A fixed set of values (a timeline event's status) is a menu, not free text.
+        for (const choice of choices) {
+          const option = doc.createElement("option");
+          option.value = choice;
+          option.textContent = choice;
+          input.append(option);
+        }
+        input.value = field.value;
+      } else if (field.type === "boolean") {
         input.type = "checkbox";
         input.checked = field.value;
       } else {
@@ -780,26 +790,9 @@ export function createCanvasEditor(container, options = {}) {
           if (!commit()) return;
           try {
             const values = editor.get(array.path);
-            const empty = (value, key = "") =>
-              Array.isArray(value)
-                ? value.map((child) => empty(child))
-                : value && typeof value === "object"
-                  ? Object.fromEntries(
-                      Object.entries(value).map(([key, child]) => [
-                        key,
-                        empty(child, key),
-                      ]),
-                    )
-                  : typeof value === "number"
-                    ? 0
-                    : typeof value === "boolean"
-                      ? false
-                      : ["type", "mode", "language"].includes(key)
-                        ? value
-                        : "";
             const next = remove
               ? values.slice(0, -1)
-              : [...values, empty(values.at(-1) ?? "")];
+              : [...values, emptyLike(values.at(-1) ?? "")];
             editor.set(array.path, next, {
               source: "canvas-collection",
               rejectInvalid: true,
@@ -876,7 +869,7 @@ export function createCanvasEditor(container, options = {}) {
         value = parseCanvasValue(edit.input.value, edit.type, edit.originalValue);
       else value = propertyDraft(edit);
       if (edit.kind === "text" || edit.kind === "rich-text")
-        validateRender(createCanvasDraft(editor.document, edit.path, value));
+        validateRender(createCanvasDraft(editor.presentation, edit.path, value));
       committing = true;
       if ((edit.kind === "text" || edit.kind === "rich-text") && JSON.stringify(value) !== edit.base)
         editor.set(edit.path, value, { source: "canvas", rejectInvalid: true });
@@ -928,7 +921,7 @@ export function createCanvasEditor(container, options = {}) {
     options.onCancel?.({ path });
   }
   function setSlide(index) {
-    if (!Number.isInteger(index) || !editor.document.slides?.[index])
+    if (!Number.isInteger(index) || !editor.presentation.slides?.[index])
       throw new RangeError("Slide index is out of range.");
     if (index === slideIndex) {
       if (!active) renderFor();

package/dist/chart-data.d.ts

@@ -2,29 +2,29 @@ import type { EditorSession } from "./index.js";
 import type { GridAddress, GridCellEdit, GridChange, GridOptions, GridSortOptions, PreparedGridChange } from "./grid-model.js";
 
 /** Set chart cells from text or typed values: names and categories are text, series cells are numbers read in the number format (blank is a gap, never 0). One patch; every problem is in `error.issues`. */
-export declare function prepareChartCells(document: unknown, chartPath: string, edits: GridCellEdit[], options?: GridOptions): PreparedGridChange;
+export declare function prepareChartCells(presentation: unknown, chartPath: string, edits: GridCellEdit[], options?: GridOptions): PreparedGridChange;
 export declare function setChartCells(editor: EditorSession, chartPath: string, edits: GridCellEdit[], options?: GridOptions): GridChange;
-export declare function prepareChartPaste(document: unknown, chartPath: string, anchor: GridAddress, source: string | string[][], options?: GridOptions): PreparedGridChange;
+export declare function prepareChartPaste(presentation: unknown, chartPath: string, anchor: GridAddress, source: string | string[][], options?: GridOptions): PreparedGridChange;
 export declare function pasteChartText(editor: EditorSession, chartPath: string, anchor: GridAddress, source: string | string[][], options?: GridOptions): GridChange;
 /** Insert `count` empty rows (categories) so the first is row `at`. */
-export declare function prepareChartInsertRows(document: unknown, chartPath: string, at: number, count?: number, options?: GridOptions): PreparedGridChange;
+export declare function prepareChartInsertRows(presentation: unknown, chartPath: string, at: number, count?: number, options?: GridOptions): PreparedGridChange;
 export declare function insertChartRows(editor: EditorSession, chartPath: string, at: number, count?: number, options?: GridOptions): GridChange;
-export declare function prepareChartDeleteRows(document: unknown, chartPath: string, indices: number[], options?: GridOptions): PreparedGridChange;
+export declare function prepareChartDeleteRows(presentation: unknown, chartPath: string, indices: number[], options?: GridOptions): PreparedGridChange;
 export declare function deleteChartRows(editor: EditorSession, chartPath: string, indices: number[], options?: GridOptions): GridChange;
-export declare function prepareChartMoveRows(document: unknown, chartPath: string, from: number, to: number, count?: number, options?: GridOptions): PreparedGridChange;
+export declare function prepareChartMoveRows(presentation: unknown, chartPath: string, from: number, to: number, count?: number, options?: GridOptions): PreparedGridChange;
 export declare function moveChartRows(editor: EditorSession, chartPath: string, from: number, to: number, count?: number, options?: GridOptions): GridChange;
 /** Insert `count` unnamed series so the first is column `at`. */
-export declare function prepareChartInsertColumns(document: unknown, chartPath: string, at: number, count?: number, options?: GridOptions): PreparedGridChange;
+export declare function prepareChartInsertColumns(presentation: unknown, chartPath: string, at: number, count?: number, options?: GridOptions): PreparedGridChange;
 export declare function insertChartColumns(editor: EditorSession, chartPath: string, at: number, count?: number, options?: GridOptions): GridChange;
-export declare function prepareChartDeleteColumns(document: unknown, chartPath: string, indices: number[], options?: GridOptions): PreparedGridChange;
+export declare function prepareChartDeleteColumns(presentation: unknown, chartPath: string, indices: number[], options?: GridOptions): PreparedGridChange;
 export declare function deleteChartColumns(editor: EditorSession, chartPath: string, indices: number[], options?: GridOptions): GridChange;
-export declare function prepareChartMoveColumns(document: unknown, chartPath: string, from: number, to: number, count?: number, options?: GridOptions): PreparedGridChange;
+export declare function prepareChartMoveColumns(presentation: unknown, chartPath: string, from: number, to: number, count?: number, options?: GridOptions): PreparedGridChange;
 export declare function moveChartColumns(editor: EditorSession, chartPath: string, from: number, to: number, count?: number, options?: GridOptions): GridChange;
 /** Sort the rows (categories) by a column, stably and by type. */
-export declare function prepareChartSort(document: unknown, chartPath: string, column: number, options?: GridSortOptions): PreparedGridChange;
+export declare function prepareChartSort(presentation: unknown, chartPath: string, column: number, options?: GridSortOptions): PreparedGridChange;
 export declare function sortChartRows(editor: EditorSession, chartPath: string, column: number, options?: GridSortOptions): GridChange;
 /** Swap categories and series: the first column's values become the series names and each series becomes a row. Numeric categories become text. */
-export declare function prepareChartTranspose(document: unknown, chartPath: string): PreparedGridChange;
+export declare function prepareChartTranspose(presentation: unknown, chartPath: string): PreparedGridChange;
 export declare function transposeChart(editor: EditorSession, chartPath: string, options?: { meta?: Record<string, unknown> }): GridChange;
 /** Rename a series: the label of data column `column` (1 or more). */
 export declare function renameChartSeries(editor: EditorSession, chartPath: string, column: number, name: string, options?: { meta?: Record<string, unknown> }): GridChange;

package/dist/chart-data.js

@@ -3,7 +3,7 @@
 // second). Cells are text for names and categories and numbers for values; a gap is null and stays a gap, never 0. Each operation is
 // one validated, undoable patch (grid-model.js has the implementation; grid-text.js documents number reading).
 //
-// `prepare*` computes `{ document, patches, changed }` without touching a session; the session forms apply it as one undo step.
+// `prepare*` computes `{ presentation, patches, changed }` without touching a session; the session forms apply it as one undo step.
 import {
   prepareGridCells,
   preparePaste,
@@ -26,64 +26,64 @@ import {
   prepareTranspose,
   transposeGridData,
 } from "./grid-model.js";
-export function prepareChartCells(document, chartPath, edits, options = {}) {
-  return prepareGridCells(document, chartPath, edits, { ...options, kind: "chart" });
+export function prepareChartCells(presentation, chartPath, edits, options = {}) {
+  return prepareGridCells(presentation, chartPath, edits, { ...options, kind: "chart" });
 }
 export function setChartCells(editor, chartPath, edits, options = {}) {
   return setGridCells(editor, chartPath, edits, { ...options, kind: "chart" });
 }
-export function prepareChartPaste(document, chartPath, anchor, source, options = {}) {
-  return preparePaste(document, chartPath, anchor, source, { ...options, kind: "chart" });
+export function prepareChartPaste(presentation, chartPath, anchor, source, options = {}) {
+  return preparePaste(presentation, chartPath, anchor, source, { ...options, kind: "chart" });
 }
 export function pasteChartText(editor, chartPath, anchor, source, options = {}) {
   return pasteGridText(editor, chartPath, anchor, source, { ...options, kind: "chart" });
 }
-export function prepareChartInsertRows(document, chartPath, at, count = 1, options = {}) {
-  return prepareInsertRows(document, chartPath, at, count, { ...options, kind: "chart" });
+export function prepareChartInsertRows(presentation, chartPath, at, count = 1, options = {}) {
+  return prepareInsertRows(presentation, chartPath, at, count, { ...options, kind: "chart" });
 }
 export function insertChartRows(editor, chartPath, at, count = 1, options = {}) {
   return insertGridRows(editor, chartPath, at, count, { ...options, kind: "chart" });
 }
-export function prepareChartDeleteRows(document, chartPath, indices, options = {}) {
-  return prepareDeleteRows(document, chartPath, indices, { ...options, kind: "chart" });
+export function prepareChartDeleteRows(presentation, chartPath, indices, options = {}) {
+  return prepareDeleteRows(presentation, chartPath, indices, { ...options, kind: "chart" });
 }
 export function deleteChartRows(editor, chartPath, indices, options = {}) {
   return deleteGridRows(editor, chartPath, indices, { ...options, kind: "chart" });
 }
-export function prepareChartMoveRows(document, chartPath, from, to, count = 1, options = {}) {
-  return prepareMoveRows(document, chartPath, from, to, count, { ...options, kind: "chart" });
+export function prepareChartMoveRows(presentation, chartPath, from, to, count = 1, options = {}) {
+  return prepareMoveRows(presentation, chartPath, from, to, count, { ...options, kind: "chart" });
 }
 export function moveChartRows(editor, chartPath, from, to, count = 1, options = {}) {
   return moveGridRows(editor, chartPath, from, to, count, { ...options, kind: "chart" });
 }
-export function prepareChartInsertColumns(document, chartPath, at, count = 1, options = {}) {
-  return prepareInsertColumns(document, chartPath, at, count, { ...options, kind: "chart" });
+export function prepareChartInsertColumns(presentation, chartPath, at, count = 1, options = {}) {
+  return prepareInsertColumns(presentation, chartPath, at, count, { ...options, kind: "chart" });
 }
 export function insertChartColumns(editor, chartPath, at, count = 1, options = {}) {
   return insertGridColumns(editor, chartPath, at, count, { ...options, kind: "chart" });
 }
-export function prepareChartDeleteColumns(document, chartPath, indices, options = {}) {
-  return prepareDeleteColumns(document, chartPath, indices, { ...options, kind: "chart" });
+export function prepareChartDeleteColumns(presentation, chartPath, indices, options = {}) {
+  return prepareDeleteColumns(presentation, chartPath, indices, { ...options, kind: "chart" });
 }
 export function deleteChartColumns(editor, chartPath, indices, options = {}) {
   return deleteGridColumns(editor, chartPath, indices, { ...options, kind: "chart" });
 }
-export function prepareChartMoveColumns(document, chartPath, from, to, count = 1, options = {}) {
-  return prepareMoveColumns(document, chartPath, from, to, count, { ...options, kind: "chart" });
+export function prepareChartMoveColumns(presentation, chartPath, from, to, count = 1, options = {}) {
+  return prepareMoveColumns(presentation, chartPath, from, to, count, { ...options, kind: "chart" });
 }
 export function moveChartColumns(editor, chartPath, from, to, count = 1, options = {}) {
   return moveGridColumns(editor, chartPath, from, to, count, { ...options, kind: "chart" });
 }
-export function prepareChartSort(document, chartPath, column, options = {}) {
-  return prepareSortRows(document, chartPath, column, { ...options, kind: "chart" });
+export function prepareChartSort(presentation, chartPath, column, options = {}) {
+  return prepareSortRows(presentation, chartPath, column, { ...options, kind: "chart" });
 }
 export function sortChartRows(editor, chartPath, column, options = {}) {
   return sortGridRows(editor, chartPath, column, { ...options, kind: "chart" });
 }
 
 /** Swap categories and series: the first column's values become the series names and each series becomes a row. See {@link prepareTranspose}. */
-export function prepareChartTranspose(document, chartPath) {
-  return prepareTranspose(document, chartPath);
+export function prepareChartTranspose(presentation, chartPath) {
+  return prepareTranspose(presentation, chartPath);
 }
 export function transposeChart(editor, chartPath, options = {}) {
   return transposeGridData(editor, chartPath, options);

package/dist/chart-options-panel.d.ts

@@ -7,8 +7,8 @@ export interface ChartOptionsPanelOptions {
   onStatus?: (message: string) => void;
 }
 export interface ChartOptionsPanel {
-  /** The panel's root element; undefined when the installed core has no chart option fields. */
-  element: HTMLElement | undefined;
+  /** The panel's root element (hidden while no chart is selected). */
+  element: HTMLElement;
   /** Re-read the selection and the chart; the panel also refreshes on every editor change. */
   refresh(): void;
   destroy(): void;

package/dist/chart-options-panel.js

@@ -1,14 +1,18 @@
-// The chart options panel (RR-35): axis titles, legend position and data labels for the selected chart.
+// The chart options panel (RR-35): axis titles, legend position and data labels for the selected chart, plus (FA-09) its alt text and
+// (FA-14) which series and categories to highlight.
 // It mounts into any host element over an editor session; every control commits one undoable change through
 // `setChartOptions` (src/chart-options.js), the canvas redraws, and Undo restores the chart. The panel shows only what
-// the selected chart type can show (core's support table), and hides itself when no chart is selected.
-import { CHART_LABEL_CONTENT, CHART_LEGEND_POSITIONS, chartOptionsAvailable, parseChartPath, readChartOptions, setChartOptions } from "./chart-options.js";
+// the selected chart type can show (core's support table), and hides itself when no chart is selected. On a combo chart
+// (FA-15) a "Series" group sets which series are lines and which lines use the secondary value axis, and a secondary axis
+// title field appears while a line uses that axis.
+import { CHART_LABEL_CONTENT, CHART_LEGEND_POSITIONS, parseChartPath, readChartOptions, setChartOptions } from "./chart-options.js";
 
 const LEGEND_LABELS = { default: "Default", none: "None", top: "Top", bottom: "Bottom", left: "Left", right: "Right" };
 const CONTENT_LABELS = { category: "Category", value: "Value", percent: "Percent" };
 const POSITION_LABELS = { auto: "Automatic", center: "Center", "inside-end": "Inside end", "inside-base": "Inside base", "outside-end": "Outside end", above: "Above", below: "Below", left: "Left", right: "Right" };
 
 let counter = 0;
+const escapeHtml = (value) => String(value).replace(/[&<>"']/g, (char) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[char]);
 
 /**
  * Mount the panel in `host`. `getSelectedPath()` returns the selected OPF path (any path inside a chart selects it);
@@ -16,7 +20,6 @@ let counter = 0;
  * call `refresh()` when the selection changes (the panel also refreshes on every editor change).
  */
 export function createChartOptionsPanel(host, { editor, getSelectedPath, onStatus = () => {} }) {
-  if (!chartOptionsAvailable()) return { refresh() {}, destroy() {}, element: undefined };
   const id = `opf-chart-options-${++counter}`;
   const root = document.createElement("section");
   root.className = "opf-chart-options";
@@ -24,10 +27,16 @@ export function createChartOptionsPanel(host, { editor, getSelectedPath, onStatu
   root.hidden = true;
   root.innerHTML = `
     <h3 class="opf-co-title">Chart options</h3>
+    <div class="opf-co-group" data-group="alt">
+      <label class="opf-co-row"><span>Alt text</span><input type="text" id="${id}-alt" aria-label="Chart alt text" data-opf-chart-option="alt" autocomplete="off" placeholder="What the chart shows"></label>
+      <label class="opf-co-row opf-co-check"><input type="checkbox" id="${id}-decorative" aria-label="Decorative chart" data-opf-chart-option="alt.decorative"><span>Decorative (no alt text)</span></label>
+    </div>
     <div class="opf-co-group" data-group="axisTitles">
       <label class="opf-co-row" data-axis="category"><span>Category axis title</span><input type="text" id="${id}-category" aria-label="Category axis title" data-opf-chart-option="axisTitles.category" autocomplete="off"></label>
       <label class="opf-co-row" data-axis="value"><span>Value axis title</span><input type="text" id="${id}-value" aria-label="Value axis title" data-opf-chart-option="axisTitles.value" autocomplete="off"></label>
+      <label class="opf-co-row" data-axis="secondary"><span>Secondary axis title</span><input type="text" id="${id}-secondary" aria-label="Secondary axis title" data-opf-chart-option="axisTitles.secondary" autocomplete="off"></label>
     </div>
+    <fieldset class="opf-co-group opf-co-series" data-group="combo"><legend>Series</legend><div data-row="combo-series"></div></fieldset>
     <div class="opf-co-group" data-group="legend">
       <label class="opf-co-row"><span>Legend</span><select id="${id}-legend" aria-label="Legend" data-opf-chart-option="legend">${CHART_LEGEND_POSITIONS.map((value) => `<option value="${value}">${LEGEND_LABELS[value]}</option>`).join("")}</select></label>
     </div>
@@ -36,12 +45,18 @@ export function createChartOptionsPanel(host, { editor, getSelectedPath, onStatu
       <fieldset class="opf-co-content"><legend>Label shows</legend>${CHART_LABEL_CONTENT.map((part) => `<label class="opf-co-check"><input type="checkbox" value="${part}" aria-label="Label shows ${CONTENT_LABELS[part].toLowerCase()}" data-opf-chart-option="dataLabels.content.${part}"><span>${CONTENT_LABELS[part]}</span></label>`).join("")}</fieldset>
       <label class="opf-co-row" data-row="position"><span>Label position</span><select id="${id}-position" aria-label="Label position" data-opf-chart-option="dataLabels.position"></select></label>
       <label class="opf-co-row" data-row="separator"><span>Separator</span><input type="text" id="${id}-separator" aria-label="Label separator" data-opf-chart-option="dataLabels.separator" autocomplete="off"></label>
+    </div>
+    <div class="opf-co-group" data-group="highlight">
+      <fieldset class="opf-co-highlight" data-part="series"><legend>Highlight series</legend><div class="opf-co-choices" data-choices="series"></div></fieldset>
+      <fieldset class="opf-co-highlight" data-part="categories"><legend>Highlight categories</legend><div class="opf-co-choices" data-choices="categories"></div></fieldset>
     </div>`;
   host.append(root);
   const $ = (selector) => root.querySelector(selector);
   const fields = {
-    category: $(`#${id}-category`), value: $(`#${id}-value`), legend: $(`#${id}-legend`), labels: $(`#${id}-labels`),
+    alt: $(`#${id}-alt`), decorative: $(`#${id}-decorative`), category: $(`#${id}-category`), value: $(`#${id}-value`), secondary: $(`#${id}-secondary`), legend: $(`#${id}-legend`), labels: $(`#${id}-labels`),
+    series: $("[data-row='combo-series']"),
     position: $(`#${id}-position`), separator: $(`#${id}-separator`), contents: [...root.querySelectorAll("[data-opf-chart-option^='dataLabels.content.']")],
+    highlight: { series: $("[data-choices='series']"), categories: $("[data-choices='categories']") },
   };
   let chartPath;
 
@@ -55,13 +70,34 @@ export function createChartOptionsPanel(host, { editor, getSelectedPath, onStatu
       return;
     }
     chartPath = path;
-    const { fields: support, state } = readChartOptions(chart);
+    const { fields: support, state, choices, combo } = readChartOptions(chart, editor.presentation);
     root.hidden = false;
     const setValue = (input, value) => { if (input !== document.activeElement && input.value !== value) input.value = value; };
-    for (const axis of ["category", "value"]) {
-      $(`[data-axis="${axis}"]`).hidden = !support.axisTitles[axis];
+    setValue(fields.alt, state.alt);
+    fields.decorative.checked = state.decorative;
+    fields.alt.disabled = state.decorative;
+    const secondaryInUse = Boolean(combo?.series.some((entry) => entry.axis === "secondary"));
+    for (const axis of ["category", "value", "secondary"]) {
+      $(`[data-axis="${axis}"]`).hidden = !support.axisTitles[axis] || (axis === "secondary" && !secondaryInUse);
       setValue(fields[axis], state.axisTitles[axis]);
     }
+    // FA-15: one row per plotted series of a combo chart: "Line" and, for a line, "Secondary axis".
+    $("[data-group='combo']").hidden = !combo;
+    const series = combo?.series ?? [];
+    const signature = JSON.stringify(series.map((entry) => entry.name));
+    if (fields.series.dataset.series !== signature) {
+      fields.series.innerHTML = series.map((entry, index) => `<div class="opf-co-row opf-co-series-row" data-series="${index}"><span>${escapeHtml(entry.name)}</span>` +
+        `<label class="opf-co-check"><input type="checkbox" data-opf-chart-option="line" value="${escapeHtml(entry.name)}" aria-label="${escapeHtml(entry.name)} as a line"><span>Line</span></label>` +
+        `<label class="opf-co-check"><input type="checkbox" data-opf-chart-option="secondaryAxis" value="${escapeHtml(entry.name)}" aria-label="${escapeHtml(entry.name)} on the secondary axis"><span>Secondary axis</span></label></div>`).join("");
+      fields.series.dataset.series = signature;
+    }
+    series.forEach((entry, index) => {
+      const row = fields.series.querySelector(`[data-series="${index}"]`);
+      const line = row.querySelector("[data-opf-chart-option='line']"), secondary = row.querySelector("[data-opf-chart-option='secondaryAxis']");
+      line.checked = entry.role === "line";
+      secondary.checked = entry.axis === "secondary";
+      secondary.disabled = entry.role !== "line";
+    });
     $("[data-group='axisTitles']").hidden = !support.axisTitles.category && !support.axisTitles.value;
     $("[data-group='legend']").hidden = !support.legend;
     fields.legend.value = state.legend;
@@ -84,6 +120,31 @@ export function createChartOptionsPanel(host, { editor, getSelectedPath, onStatu
     setValue(fields.separator, state.dataLabels.separator);
     fields.separator.disabled = off || state.dataLabels.content.length < 2;
     $("[data-row='separator']").hidden = support.dataLabels.content.length < 2;
+    // Highlight: one checkbox per plotted series and per category label the chart type can highlight.
+    for (const part of ["series", "categories"]) {
+      const offered = support.highlight[part] && choices[part].length > 0;
+      $(`[data-part='${part}']`).hidden = !offered;
+      const list = fields.highlight[part];
+      if (!offered) continue;
+      if (list.dataset.options !== JSON.stringify(choices[part])) {
+        list.replaceChildren(...choices[part].map((name) => {
+          const label = document.createElement("label");
+          label.className = "opf-co-check";
+          const input = document.createElement("input");
+          input.type = "checkbox";
+          input.value = name;
+          input.setAttribute("aria-label", `Highlight ${part === "series" ? "series" : "category"} ${name}`);
+          input.setAttribute("data-opf-chart-option", `highlight.${part}`);
+          const text = document.createElement("span");
+          text.textContent = name;
+          label.append(input, text);
+          return label;
+        }));
+        list.dataset.options = JSON.stringify(choices[part]);
+      }
+      for (const input of list.querySelectorAll("input")) input.checked = state.highlight[part].includes(input.value);
+    }
+    $("[data-group='highlight']").hidden = $("[data-part='series']").hidden && $("[data-part='categories']").hidden;
   }
 
   function commit(change, message) {
@@ -97,14 +158,27 @@ export function createChartOptionsPanel(host, { editor, getSelectedPath, onStatu
     refresh();
   }
 
+  const checkedNames = (part) => [...fields.highlight[part].querySelectorAll("input:checked")].map((input) => input.value);
   const selectedContent = () => fields.contents.filter((input) => input.checked && !input.closest("label").hidden).map((input) => input.value);
   const listeners = [
+    [fields.alt, "change", () => commit({ alt: fields.alt.value }, "Changed the chart's alt text. Undo restores it.")],
+    [fields.decorative, "change", () => commit({ decorative: fields.decorative.checked }, fields.decorative.checked ? "Marked the chart decorative. Undo restores it." : "The chart is no longer decorative. Undo restores it.")],
     [fields.category, "change", () => commit({ axisTitles: { category: fields.category.value } }, "Changed the category axis title. Undo restores it.")],
     [fields.value, "change", () => commit({ axisTitles: { value: fields.value.value } }, "Changed the value axis title. Undo restores it.")],
+    [fields.secondary, "change", () => commit({ axisTitles: { secondary: fields.secondary.value } }, "Changed the secondary axis title. Undo restores it.")],
+    [fields.series, "change", () => {
+      const checked = (option) => [...fields.series.querySelectorAll(`[data-opf-chart-option='${option}']`)].filter((input) => input.checked).map((input) => input.value);
+      const line = checked("line");
+      commit({ line, secondaryAxis: checked("secondaryAxis").filter((name) => line.includes(name)) }, "Changed which series are lines. Undo restores them.");
+    }],
     [fields.legend, "change", () => commit({ legend: fields.legend.value }, "Changed the legend. Undo restores it.")],
     [fields.labels, "change", () => commit({ dataLabels: fields.labels.checked }, fields.labels.checked ? "Showing data labels. Undo restores the chart." : "Hid the data labels. Undo restores them.")],
     [fields.position, "change", () => commit({ dataLabels: { position: fields.position.value } }, "Moved the data labels. Undo restores them.")],
     [fields.separator, "change", () => commit({ dataLabels: { separator: fields.separator.value } }, "Changed the label separator. Undo restores it.")],
+    ...["series", "categories"].map((part) => [fields.highlight[part], "change", () => {
+      const names = checkedNames(part);
+      commit({ highlight: { [part]: names } }, names.length ? `Highlighted ${names.join(", ")}. Undo restores the colors.` : `Cleared the ${part} highlight. Undo restores it.`);
+    }]),
     ...fields.contents.map((input) => [input, "change", () => {
       const content = selectedContent();
       // A label always shows something: unticking the last part keeps it.