ooxml-ui 1.7.0 → 1.8.0

package/dist/visio/viewer-change-shape.d.ts

@@ -1,9 +1,13 @@
 import type { VisioChangeShapeTarget } from 'ooxml-core/visio';
 import type { ViewerController, ViewerState } from './controller.js';
+import { DOCUMENT_MASTER_PREFIX } from './shapes-document.js';
+/** What the gallery asks for: a Basic Shapes outline, or `document:<id>` for a master. */
+export type ChangeShapeChoice = VisioChangeShapeTarget | `${typeof DOCUMENT_MASTER_PREFIX}${string}`;
 /**
- * Home > Change Shape: replaces the outline of the one selected local shape through the core's
- * `change-shape` edit, so undo and redo come from the source-backed history. The gallery is
- * enabled only for a selection the scene admits; locks and formulas are proven by the core.
+ * Home > Change Shape through the core's `change-shape` edit, so undo and redo come from the
+ * source-backed history. A shape drawn here takes another Basic Shapes outline; a stencil shape
+ * becomes an instance of another master of the Document Stencil, as Visio's Change Shape does.
+ * The gallery shows the choices for the selection; locks and formulas are proven by the core.
  */
 export declare class ViewerChangeShape {
     #private;
@@ -11,6 +15,6 @@ export declare class ViewerChangeShape {
     private readonly controller;
     private readonly edit;
     constructor(root: ShadowRoot, controller: ViewerController, edit: (run: () => Promise<void>, message: string) => void);
-    run(shape: VisioChangeShapeTarget): void;
+    run(shape: ChangeShapeChoice): void;
     render(state: ViewerState): void;
 }

package/dist/visio/viewer-chrome.d.ts

@@ -3,12 +3,13 @@ import type { ViewerController, ViewerState } from './controller.js';
  * Static workspace markup (legacy; migrate to builders when next changed). The ribbon, Shapes
  * window, page tabs and status bar are built by their own modules. Visio keeps pages in the
  * bottom tabs and the All pages list, so there is no page pane. The right task pane shows one
- * view (Shape Data), as Visio's window does, and starts closed.
+ * view at a time (Shape Data, or Format Shape, which builds its own view), and starts closed.
  */
 export declare const viewerChromeTemplate = "<div class=\"workspace\">\n  <div class=\"viewport\" tabindex=\"0\" role=\"region\" aria-label=\"Diagram canvas\"></div>\n  <office-ui-task-pane id=\"inspector-pane\" class=\"inspector-pane\" label=\"Shape Data\" hidden>\n    <section class=\"shape-inspector\" data-pane-view=\"selection\"><p class=\"selection-hint\">No Shape Data</p><div></div></section>\n  </office-ui-task-pane>\n</div>";
 /** The titles Visio gives the task pane views. */
 declare const PANE_TITLES: {
     readonly selection: 'Shape Data';
+    readonly format: 'Format Shape';
 };
 export type PaneView = keyof typeof PANE_TITLES;
 export type TaskPane = 'shapes' | 'inspector';
@@ -22,7 +23,7 @@ export declare class ViewerChrome {
     closeCompactTools(): void;
     /** Show or hide a task pane; compact layouts close the Tools menu afterwards. */
     togglePane(pane: TaskPane): void;
-    /** Show a task pane view (Shape Data) and move focus into it. */
+    /** Show a task pane view (Shape Data, Format Shape) and move focus into it. */
     reveal(kind: PaneView): void;
     render(state: ViewerState): void;
 }

package/dist/visio/viewer-color-menus.d.ts

@@ -0,0 +1,34 @@
+import type { VisioPage, VisioShape } from 'ooxml-core/visio';
+import type { ViewerController, ViewerState } from './controller.js';
+import type { VisioFormattingAction } from './ribbon-action.js';
+import { ViewerMoreColors } from './viewer-more-colors.js';
+/** The colours the selection has now, per target; undefined when mixed or nothing is selected. */
+export interface SelectionColors {
+    fill: string | undefined;
+    line: string | undefined;
+    font: string | undefined;
+}
+/** The selected shapes Fill and Line can format, or none when any of them cannot be. */
+export declare function styleSelection(state: ViewerState): {
+    page: VisioPage;
+    shapes: VisioShape[];
+} | undefined;
+export declare function selectionColors(state: ViewerState): SelectionColors;
+/**
+ * The ribbon's Fill, Line and Font Color pickers: each menu holds the shared colour grid with the
+ * page's theme colours. A pick runs the same formatting action the old fixed colours did; More
+ * Colors opens the custom colour dialog, and a custom colour joins Recent Colors for every menu.
+ */
+export declare class ViewerColorMenus {
+    #private;
+    private readonly root;
+    private readonly controller;
+    private readonly run;
+    readonly moreColors: ViewerMoreColors;
+    constructor(root: ShadowRoot, controller: ViewerController, run: (action: VisioFormattingAction) => void);
+    get recent(): readonly string[];
+    /** A custom colour was applied somewhere: show it under Recent Colors everywhere. */
+    remember(color: string): void;
+    wire(): () => void;
+    render(state: ViewerState): void;
+}

package/dist/visio/viewer-commands.d.ts

@@ -1,3 +1,4 @@
+import type { VisioGridSteps } from 'ooxml-core/visio/ui';
 import type { ViewerController, ViewerState } from './controller.js';
 import { type VisioRibbonAction, type CanvasTool } from './ribbon-action.js';
 import type { Rulers } from './viewer-ruler.js';
@@ -11,7 +12,7 @@ interface CommandHost {
     controller: ViewerController;
     fit(mode: 'page' | 'width'): void;
     togglePane(pane: 'shapes' | 'inspector'): void;
-    reveal(panel: 'edit' | 'notes' | 'selection', focusText: boolean): void;
+    reveal(panel: 'edit' | 'notes' | 'selection' | 'format', focusText: boolean): void;
     focusSearch(): void;
     focusReplace?(): void;
     togglePanZoom(): void;
@@ -34,8 +35,8 @@ export declare class ViewerCommands {
     private readonly host;
     readonly layoutCommands: ViewerLayoutCommands;
     constructor(host: CommandHost);
-    /** Page inches between minor grid lines while View > Grid is on (Snap to Grid), else 0. */
-    get gridStep(): number;
+    /** The page's grid lines while View > Grid is on (Snap to Grid), else 0. */
+    get gridStep(): VisioGridSteps | 0;
     get tool(): CanvasTool;
     /** Browser clipboard transport used by the element's public clipboard methods. */
     clipboard(operation: ClipboardOperation): Promise<void>;

package/dist/visio/viewer-connector-tool.d.ts

@@ -1,4 +1,4 @@
-import type { VisioConnectorRoute, VisioPage } from 'ooxml-core/visio';
+import { type VisioConnectorRoute, type VisioPage } from 'ooxml-core/visio';
 import type { ViewerController, ViewerState } from './controller.js';
 /** What an end released at the pointer would glue to. */
 export interface ConnectorGlueHit {
@@ -8,13 +8,15 @@ export interface ConnectorGlueHit {
     x?: number;
     y?: number;
 }
-/** A page shape the core can glue to: a visible, local, top-level 2D shape. */
+/** A page shape the core can glue to: a visible top-level 2D shape, drawn or from a stencil. */
 export declare function connectorGlueTarget(page: VisioPage, element: Element | null): string | undefined;
 /**
  * The glue target under a client point: the nearest connection point within a few pixels of it,
  * else the shape under it. Pointer capture retargets events, so the point itself is hit-tested.
  */
-export declare function connectorGlueAt(viewport: HTMLElement, page: VisioPage, event: Pick<PointerEvent, 'clientX' | 'clientY' | 'target'>, zoom: number): ConnectorGlueHit | undefined;
+export declare function connectorGlueAt(viewport: HTMLElement, page: VisioPage, event: Pick<PointerEvent, 'clientX' | 'clientY' | 'target'>, zoom: number, 
+/** The drawing's GlueSettings (Snap & Glue): Glue off glues nothing, and connection points can be left out. */
+glue?: number): ConnectorGlueHit | undefined;
 /**
  * Home > Tools > Connector (Ctrl+3). A drag draws a dynamic connector in the current route
  * (right-angle by default); ends released on shapes glue to them, ends released on a connection

package/dist/visio/viewer-data-window.d.ts

@@ -2,7 +2,11 @@ import type { VisioDataRecordset } from 'ooxml-core/visio';
 /** Drag payload of External Data rows: `{ recordsetId, rowIds }` as JSON. */
 export declare const DATA_ROW_MIME = "application/x-visio-viewer-data-row";
 export type DataWindowAction = 'link' | 'auto-link' | 'unlink' | 'refresh' | 'remove' | 'close';
-/** Visio's External Data window: a docked grid of the drawing's saved recordsets. */
+/**
+ * Visio's External Data window: a grid of the drawing's saved recordsets, docked under the
+ * drawing in the shared `office-ui-task-pane` (title and close button), with the recordset
+ * picker and the link commands in a bar above the grid.
+ */
 export declare function createExternalDataWindow(doc: Document): HTMLElement;
 export interface DataWindowView {
     recordsets: readonly VisioDataRecordset[];

package/dist/visio/viewer-draw-tool.d.ts

@@ -1,4 +1,4 @@
-import type { VisioPage, VisioOutlineShape } from 'ooxml-core/visio';
+import type { VisioPage } from 'ooxml-core/visio';
 import { type VisioPathTool, type VisioDrawingPoint } from 'ooxml-core/visio/ui';
 import type { ViewerController, ViewerState } from './controller.js';
 export { pagePoint } from './viewer-page-point.js';
@@ -7,16 +7,6 @@ export declare function insertRectangle(controller: ViewerController, page: Visi
     width: number;
     height: number;
 }): Promise<string>;
-/** Add a Basic Shapes master: Ellipse and Circle are native ellipses, the rest core outlines. */
-export declare function insertMaster(controller: ViewerController, page: VisioPage, master: {
-    kind: 'ellipse';
-} | {
-    kind: 'rectangle';
-    shape: VisioOutlineShape;
-}, centre: VisioDrawingPoint, size: {
-    width: number;
-    height: number;
-}): Promise<string>;
 /**
  * Quick Style a dropped master gets: variant colour 1 (Accent 1 in every built-in theme's first
  * variant, and in the theme-less Office colours), theme style 4, so drops follow Design > Variants.

package/dist/visio/viewer-element.d.ts

@@ -1,6 +1,7 @@
 import type { VisioDocument, VisioEdit } from 'ooxml-core/visio';
 import type { VsdxSource, VisioShapeSelection } from 'ooxml-core/visio/ui';
 import { ViewerController } from './controller.js';
+import { type RibbonAddInTab } from '../ribbon/add-in-tabs.js';
 import { type BackstagePage } from './backstage.js';
 import type { CreateVsdxOptions } from 'ooxml-core/visio';
 import { type StatusBarTheme } from './viewer-options.js';
@@ -24,6 +25,13 @@ export declare class VisioViewerElement extends BaseElement {
      */
     get statusBar(): StatusBarTheme;
     set statusBar(value: StatusBarTheme);
+    /**
+     * Tabs a host adds after Help, as an Office add-in does (Visio's ACROBAT tab). Each command
+     * runs its `run` callback and dispatches `office-ribbon-add-in` (`{ tab, command }`) from the
+     * viewer. Assign a new array to change them; a tab cannot take a built-in tab's id.
+     */
+    get ribbonAddIns(): readonly RibbonAddInTab[];
+    set ribbonAddIns(value: readonly RibbonAddInTab[]);
     get showToolbar(): boolean;
     set showToolbar(value: boolean);
     get renderWarnings(): readonly string[];

package/dist/visio/viewer-format-pane.d.ts

@@ -0,0 +1,26 @@
+import type { ViewerController, ViewerState } from './controller.js';
+import { type PaneSection } from './format-pane-view.js';
+import type { VisioFormattingAction } from './ribbon-action.js';
+import { type ViewerColorMenus } from './viewer-color-menus.js';
+/**
+ * Visio's Format Shape task pane (the Shape Styles launcher, the Fill, Line and Effects menus'
+ * options commands and the shape menu's Format Shape): Fill (none or solid, colour, transparency,
+ * pattern and its background), Line (colour, transparency, width, dash, cap, rounding and line
+ * ends) and Effects (shadow, glow, soft edges, reflection). It follows the selection, and every
+ * change is applied at once as one undoable `format-shape` edit per shape, through the same
+ * action the ribbon uses.
+ */
+export declare class ViewerFormatPane {
+    #private;
+    private readonly root;
+    private readonly controller;
+    private readonly colors;
+    private readonly run;
+    private readonly reveal;
+    private readonly announce;
+    constructor(root: ShadowRoot, controller: ViewerController, colors: ViewerColorMenus, run: (action: VisioFormattingAction) => void, reveal: () => void, announce: (message: string) => void);
+    /** Show the pane, at `section` when given; it explains itself when nothing can be formatted. */
+    show(section?: PaneSection): void;
+    wire(): () => void;
+    render(state: ViewerState): void;
+}

package/dist/visio/viewer-guides.d.ts

@@ -1,5 +1,5 @@
-import type { VisioPage } from 'ooxml-core/visio';
-import { type VisioPagePoint } from 'ooxml-core/visio/ui';
+import { type VisioPage } from 'ooxml-core/visio';
+import { type VisioSnapGrid, type VisioPagePoint } from 'ooxml-core/visio/ui';
 import type { ViewerController, ViewerState } from './controller.js';
 /**
  * View > Guides and View > Dynamic Grid. Guides are the page's `Type="Guide"` shapes, drawn as
@@ -23,7 +23,7 @@ export declare class ViewerGuides {
      * Snap a shape drag; draws alignment hints. `grid` is the Snap to Grid step in page inches (0
      * while the grid is hidden). Unchanged when no snapping is active.
      */
-    snap(page: VisioPage, ids: readonly string[], delta: VisioPagePoint, grid?: number): VisioPagePoint;
+    snap(page: VisioPage, ids: readonly string[], delta: VisioPagePoint, grid?: number | VisioSnapGrid): VisioPagePoint;
     clearHints(): void;
     wire(): () => void;
     render(state: ViewerState): void;

package/dist/visio/viewer-layout-commands.d.ts

@@ -1,5 +1,6 @@
 import type { ViewerController, ViewerState } from './controller.js';
 import type { VisioLayoutAction } from './ribbon-action.js';
+import { ViewerAutoConnect } from './viewer-auto-connect.js';
 import { ViewerExplorer } from './viewer-explorer.js';
 import { ViewerGuides } from './viewer-guides.js';
 import { ViewerLayerAssign } from './viewer-layer-assign.js';
@@ -20,11 +21,13 @@ export interface LayoutCommandHost {
     edit(run: () => Promise<void>, message: string): void;
     /** Paste the viewer's own shape clipboard, as Ctrl+V does. */
     pasteShapes(): Promise<void>;
+    /** Whether the Pointer tool is the current tool (AutoConnect arrows belong to it). */
+    pointerTool(): boolean;
 }
 /**
  * Arrangement, layout, layers, selection, view aids and help commands: Auto Align & Space,
  * Re-Layout Page and its Layout dialog, Assign to Layer, Layer Properties, Select by Type, Paste Special, Guides,
- * Dynamic Grid, Drawing Explorer, Help and Show Training.
+ * Dynamic Grid, AutoConnect, Drawing Explorer, Help and Show Training.
  */
 export declare class ViewerLayoutCommands {
     private readonly host;
@@ -35,6 +38,7 @@ export declare class ViewerLayoutCommands {
     readonly paste: ViewerPasteSpecial;
     readonly guides: ViewerGuides;
     readonly explorer: ViewerExplorer;
+    readonly autoConnect: ViewerAutoConnect;
     constructor(host: LayoutCommandHost);
     run(action: VisioLayoutAction): void;
     wire(): () => void;

package/dist/visio/viewer-more-colors.d.ts

@@ -0,0 +1,16 @@
+import type { OfficeUiColorCustom } from '../controls.js';
+import { ViewerDialog } from './viewer-dialog.js';
+/**
+ * Office's More Colors dialog, Custom tab, on the shared `office-ui-color-custom`: the hue and
+ * saturation square, the luminance slider, Hex, RGB and HSL fields and the New and Current
+ * swatches. OK hands the colour (`#rrggbb`) to the caller.
+ */
+export declare class ViewerMoreColors {
+    #private;
+    readonly dialog: ViewerDialog;
+    readonly picker: OfficeUiColorCustom;
+    constructor(root: ShadowRoot);
+    /** Opens on `current` (`#rrggbb`; black when it is not a colour) and reports the choice. */
+    open(current: string | undefined, pick: (color: string) => void): void;
+    close(): void;
+}

package/dist/visio/viewer-page-setup.d.ts

@@ -1,6 +1,8 @@
 import type { ViewerController, ViewerState } from './controller.js';
 import type { VisioPageSetupCommand } from './page-setup-action.js';
 import { ViewerPageSetupDialog } from './viewer-page-setup-dialog.js';
+import { ViewerRulerGrid } from './viewer-ruler-grid.js';
+import { ViewerSnapGlue } from './viewer-snap-glue.js';
 type Edit = (run: () => Promise<void>, message: string) => void;
 /**
  * Design > Page Setup and Backgrounds, File > Page Setup and View > Page Breaks. Every change is
@@ -14,6 +16,10 @@ export declare class ViewerPageSetup {
     private readonly edit;
     private readonly announce;
     readonly dialog: ViewerPageSetupDialog;
+    /** View > Show > Ruler & Grid, and the page's grid and ruler values. */
+    readonly rulerGrid: ViewerRulerGrid;
+    /** View > Visual Aids > Snap & Glue. */
+    readonly snapGlue: ViewerSnapGlue;
     constructor(root: ShadowRoot, controller: ViewerController, edit: Edit, announce: (message: string) => void);
     get pageBreaks(): boolean;
     run(command: VisioPageSetupCommand): void;

package/dist/visio/viewer-ruler-grid.d.ts

@@ -0,0 +1,25 @@
+import { type VisioGridSteps } from 'ooxml-core/visio/ui';
+import type { ViewerController, ViewerState } from './controller.js';
+import { ViewerDialog } from './viewer-dialog.js';
+import type { RulerLook } from './viewer-ruler.js';
+/**
+ * View > Show > Ruler & Grid, as Visio's dialog: ruler subdivisions and zero point, and the grid's
+ * spacing, minimum spacing and origin, each for the horizontal and the vertical axis. OK saves
+ * the changed cells of the page as one `set-page-layout` edit. The canvas grid, Snap to Grid and
+ * the rulers follow the page's values (`steps`, `look`).
+ */
+export declare class ViewerRulerGrid {
+    #private;
+    private readonly root;
+    private readonly controller;
+    private readonly announce;
+    readonly dialog: ViewerDialog;
+    constructor(root: ShadowRoot, controller: ViewerController, announce: (message: string) => void);
+    /** Grid lines of the shown page at the current zoom, for the canvas and Snap to Grid. */
+    steps(state?: ViewerState): VisioGridSteps;
+    /** Where the rulers' zero is and how many subdivisions they show. */
+    look(state?: ViewerState): RulerLook;
+    show(): void;
+    wire(): () => void;
+    render(state: ViewerState): void;
+}

package/dist/visio/viewer-ruler.d.ts

@@ -1,12 +1,20 @@
 /**
  * Visio's rulers: inch scales along the top and left of the drawing window with 0 at the page's
  * left and bottom edges (vertical values grow upward, as in Visio). Drawn by the shared
- * `office-ui-ruler`; this module only lays them out and says where zero is. Viewer-only
- * presentation: nothing is read from or written to the document beyond the rendered page box.
+ * `office-ui-ruler`; this module only lays them out and says where zero is. The page's Ruler &
+ * Grid settings move zero (`RulerLook.originX`/`originY`, page inches from the lower-left corner)
+ * and thin the subdivisions.
  */
+export interface RulerLook {
+    originX: number;
+    originY: number;
+    /** Share of the subdivisions shown, 1 for Fine. */
+    densityX: number;
+    densityY: number;
+}
 export interface Rulers {
     element: HTMLElement;
-    render(visible: boolean, zoom: number): void;
+    render(visible: boolean, zoom: number, look?: RulerLook): void;
     wire(): () => void;
 }
 /** Wraps the viewport in a grid with a corner, a top ruler and a left ruler. */

package/dist/visio/viewer-snap-glue.d.ts

@@ -0,0 +1,23 @@
+import { type VisioSnapGlue } from 'ooxml-core/visio';
+import type { ViewerController, ViewerState } from './controller.js';
+import { ViewerDialog } from './viewer-dialog.js';
+/**
+ * View > Visual Aids > Snap & Glue, as Visio's dialog: whether snapping and gluing are active and
+ * what they snap and glue to. OK saves the drawing's DocumentSettings as one `set-snap-glue`
+ * edit. This editor acts on Snap (grid and guides), Glue and Glue to connection points; the
+ * other choices are saved for Visio and say so in the dialog. View > Dynamic Grid stays a
+ * per-viewer toggle and is not in this dialog.
+ */
+export declare class ViewerSnapGlue {
+    #private;
+    private readonly root;
+    private readonly controller;
+    private readonly announce;
+    readonly dialog: ViewerDialog;
+    constructor(root: ShadowRoot, controller: ViewerController, announce: (message: string) => void);
+    /** The drawing's settings, or Visio's defaults without a drawing. */
+    settings(state?: ViewerState): VisioSnapGlue;
+    show(): void;
+    wire(): () => void;
+    render(state: ViewerState): void;
+}

package/dist/visio/viewer-stencil.d.ts

@@ -1,6 +1,9 @@
 import type { ViewerController } from './controller.js';
 /**
  * Shapes window interaction: drag a master onto the page to drop it there, or activate it to add
- * it at the page centre. Ellipses and circles are native ellipses; the rest are core outlines.
+ * it at the page centre. Either way the page gets an instance of a master, as in Visio: a master
+ * of a built-in stencil is first copied into the drawing's own Document Stencil, and a master
+ * that is already there is instanced directly. The window follows the open drawing: its Document
+ * Stencil and the stencils it docks.
  */
 export declare function wireStencil(pane: HTMLElement, viewport: HTMLElement, controller: ViewerController, announce: (message: string) => void): () => void;