@oml/markdown 0.12.0 → 0.14.0

package/src/renderers/diagram-renderer.ts

@@ -236,6 +236,12 @@ async function renderWithX6(
         container: liveCanvas,
         autoResize: false,
         grid: false,
+        selecting: {
+            enabled: true,
+            multiple: true,
+            // X6 native additive selection modifiers.
+            multipleSelectionModifiers: ['meta', 'ctrl'],
+        },
         panning: true,
         mousewheel: {
             enabled: true,
@@ -315,7 +321,7 @@ async function renderWithX6(
                     bubbles: true,
                     detail: {
                         iri,
-                        previewEnabled: /^Mac/i.test(navigator.platform) ? event.metaKey : event.ctrlKey,
+                        previewEnabled: event.altKey,
                         anchorRect: {
                             left: rect.left,
                             right: rect.right,
@@ -1079,26 +1085,200 @@ async function renderWithX6(
     }
 
     // Compartments are structural containers: do not drag them; select parent instead.
-    const selectCompartmentParent = (node: any): void => {
+    const selectionTargetForNode = (node: any): any => {
         if (!isCompartmentNode(node)) {
-            return;
+            return node;
         }
         const parent = typeof node.getParent === 'function' ? node.getParent() : undefined;
-        if (!parent) {
+        return parent ?? node;
+    };
+    const multiSelectedNodeIds = new Set<string>();
+    let primarySelectedNodeId: string | undefined;
+    const cssEscape = (value: string): string => value.replace(/["\\]/g, '\\$&');
+    const createSvgElement = (name: string): SVGElement =>
+        document.createElementNS('http://www.w3.org/2000/svg', name);
+    const clearSecondaryDecoration = (container: Element): void => {
+        for (const node of Array.from(container.querySelectorAll('g.oml-secondary-selection'))) {
+            node.remove();
+        }
+        for (const node of Array.from(container.querySelectorAll('[data-oml-multi-selected-style="1"]'))) {
+            if (!(node instanceof SVGElement)) {
+                continue;
+            }
+            node.style.removeProperty('stroke');
+            node.style.removeProperty('stroke-width');
+            node.removeAttribute('data-oml-multi-selected-style');
+        }
+    };
+    const renderSecondaryDecoration = (container: Element): void => {
+        clearSecondaryDecoration(container);
+        const graphics = container as unknown as SVGGraphicsElement;
+        if (typeof graphics.getBBox !== 'function') {
+            return;
+        }
+        let bbox: DOMRect | undefined;
+        try {
+            bbox = graphics.getBBox();
+        } catch {
             return;
         }
-        if (typeof graphView.cleanSelection === 'function') {
-            graphView.cleanSelection();
+        if (!bbox || bbox.width <= 0 || bbox.height <= 0) {
+            return;
+        }
+        const widgetMargin = 3;
+        const handleSize = 6;
+        const handleHalf = handleSize / 2;
+        const x = bbox.x - widgetMargin;
+        const y = bbox.y - widgetMargin;
+        const width = bbox.width + (widgetMargin * 2);
+        const height = bbox.height + (widgetMargin * 2);
+
+        const group = createSvgElement('g');
+        group.setAttribute('class', 'oml-secondary-selection');
+        group.setAttribute('pointer-events', 'none');
+
+        const box = createSvgElement('rect');
+        box.setAttribute('x', `${x}`);
+        box.setAttribute('y', `${y}`);
+        box.setAttribute('width', `${width}`);
+        box.setAttribute('height', `${height}`);
+        box.setAttribute('fill', 'none');
+        box.setAttribute('stroke', '#000');
+        box.setAttribute('stroke-width', '1');
+        box.setAttribute('stroke-dasharray', '4 3');
+        group.appendChild(box);
+
+        const points = [
+            [x, y],
+            [x + (width / 2), y],
+            [x + width, y],
+            [x, y + (height / 2)],
+            [x + width, y + (height / 2)],
+            [x, y + height],
+            [x + (width / 2), y + height],
+            [x + width, y + height],
+        ];
+        for (const [cx, cy] of points) {
+            const handle = createSvgElement('rect');
+            handle.setAttribute('x', `${cx - handleHalf}`);
+            handle.setAttribute('y', `${cy - handleHalf}`);
+            handle.setAttribute('width', `${handleSize}`);
+            handle.setAttribute('height', `${handleSize}`);
+            handle.setAttribute('rx', '3');
+            handle.setAttribute('ry', '3');
+            handle.setAttribute('fill', '#000');
+            handle.setAttribute('stroke', '#000');
+            handle.setAttribute('stroke-width', '1');
+            group.appendChild(handle);
+        }
+        container.appendChild(group);
+    };
+    const refreshPrimaryWidget = (): void => {
+        if (typeof nodeTransform?.clearWidgets === 'function') {
+            nodeTransform.clearWidgets();
+        }
+        if (!primarySelectedNodeId || typeof nodeTransform?.createWidget !== 'function') {
+            return;
+        }
+        const cell = typeof graphView.getCellById === 'function' ? graphView.getCellById(primarySelectedNodeId) : undefined;
+        if (!cell) {
+            return;
+        }
+        nodeTransform.createWidget(cell);
+    };
+    let applySelectionScheduled = false;
+    const applyMultiSelectionClassesNow = (): void => {
+        const selectedIds = new Set(multiSelectedNodeIds);
+        const nodeContainers = Array.from(liveCanvas.querySelectorAll('.x6-cell[data-cell-id], .x6-node[data-cell-id]'));
+        for (const element of nodeContainers) {
+            const container = element as Element;
+            const id = String(container.getAttribute('data-cell-id') ?? '');
+            const selected = selectedIds.has(id);
+            container.classList.toggle('oml-diagram-multi-selected', selected);
+            if (selected && id !== primarySelectedNodeId) {
+                renderSecondaryDecoration(container);
+            } else {
+                clearSecondaryDecoration(container);
+            }
+        }
+        for (const id of selectedIds) {
+            const selector = `.x6-cell[data-cell-id="${cssEscape(id)}"], .x6-node[data-cell-id="${cssEscape(id)}"]`;
+            const domMatches = Array.from(liveCanvas.querySelectorAll(selector));
+            for (const element of domMatches) {
+                if (element instanceof Element) {
+                    element.classList.add('oml-diagram-multi-selected');
+                    if (id !== primarySelectedNodeId) {
+                        renderSecondaryDecoration(element);
+                    } else {
+                        clearSecondaryDecoration(element);
+                    }
+                }
+            }
+            const cell = typeof graphView.getCellById === 'function' ? graphView.getCellById(id) : undefined;
+            const view = cell && typeof graphView.findViewByCell === 'function' ? graphView.findViewByCell(cell) : undefined;
+            const container = view?.container as Element | undefined;
+            if (container instanceof Element) {
+                container.classList.add('oml-diagram-multi-selected');
+                if (id !== primarySelectedNodeId) {
+                    renderSecondaryDecoration(container);
+                } else {
+                    clearSecondaryDecoration(container);
+                }
+            }
+        }
+    };
+    const applyMultiSelectionClasses = (): void => {
+        if (applySelectionScheduled) {
+            return;
         }
-        if (typeof graphView.select === 'function') {
-            graphView.select(parent);
+        applySelectionScheduled = true;
+        window.requestAnimationFrame(() => {
+            window.requestAnimationFrame(() => {
+                applySelectionScheduled = false;
+                applyMultiSelectionClassesNow();
+            });
+        });
+    };
+    const replaceMultiSelection = (ids: Iterable<string>): void => {
+        multiSelectedNodeIds.clear();
+        for (const id of ids) {
+            if (!id) {
+                continue;
+            }
+            multiSelectedNodeIds.add(id);
         }
+        applyMultiSelectionClasses();
+    };
+    const clearMultiSelection = (): void => {
+        multiSelectedNodeIds.clear();
+        applyMultiSelectionClasses();
     };
     graphView.on('node:mousedown', ({ node, e }: { node: any; e: MouseEvent }) => {
+        const targetCell = selectionTargetForNode(node);
+        if (!targetCell) {
+            return;
+        }
+        const targetId = String(targetCell?.id ?? '');
+        const additive = !!(e.metaKey || e.ctrlKey || e.shiftKey);
+        if (additive) {
+            if (multiSelectedNodeIds.has(targetId)) {
+                multiSelectedNodeIds.delete(targetId);
+                if (primarySelectedNodeId === targetId) {
+                    primarySelectedNodeId = multiSelectedNodeIds.values().next().value;
+                }
+            } else if (targetId) {
+                multiSelectedNodeIds.add(targetId);
+                primarySelectedNodeId = targetId;
+            }
+        } else if (targetId) {
+            replaceMultiSelection([targetId]);
+            primarySelectedNodeId = targetId;
+        }
+        applyMultiSelectionClasses();
+        refreshPrimaryWidget();
         if (!isCompartmentNode(node)) {
             return;
         }
-        selectCompartmentParent(node);
         e.preventDefault();
         e.stopPropagation();
         if (typeof (e as any).stopImmediatePropagation === 'function') {
@@ -1106,12 +1286,49 @@ async function renderWithX6(
         }
     });
     graphView.on('node:click', ({ node, e }: { node: any; e: MouseEvent }) => {
-        if (!isCompartmentNode(node)) {
+        if (isCompartmentNode(node)) {
+            refreshPrimaryWidget();
+            e.preventDefault();
+            e.stopPropagation();
+            if (typeof (e as any).stopImmediatePropagation === 'function') {
+                (e as any).stopImmediatePropagation();
+            }
+        }
+    });
+    graphView.on('node:contextmenu', ({ node, e }: { node: any; e: MouseEvent }) => {
+        const targetCell = selectionTargetForNode(node);
+        const targetId = String(targetCell?.id ?? '');
+        if (!targetId) {
             return;
         }
-        selectCompartmentParent(node);
+        if (!multiSelectedNodeIds.has(targetId)) {
+            multiSelectedNodeIds.clear();
+            multiSelectedNodeIds.add(targetId);
+            primarySelectedNodeId = targetId;
+            applyMultiSelectionClasses();
+            refreshPrimaryWidget();
+        }
+        const selectedIris = [...multiSelectedNodeIds];
+        liveCanvas.dispatchEvent(new CustomEvent('md-diagram-selection-contextmenu', {
+            bubbles: true,
+            detail: {
+                iri: targetId,
+                name: displayLabelFromIri(targetId),
+                selectedIris,
+                clientX: e.clientX,
+                clientY: e.clientY,
+            },
+        }));
         e.preventDefault();
         e.stopPropagation();
+        if (typeof (e as any).stopImmediatePropagation === 'function') {
+            (e as any).stopImmediatePropagation();
+        }
+    });
+    graphView.on('blank:mousedown', () => {
+        clearMultiSelection();
+        primarySelectedNodeId = undefined;
+        refreshPrimaryWidget();
     });
 
     const sidePriority = (side: PortSide): number => {
@@ -1339,7 +1556,7 @@ function installDiagramNodeInteractions(canvas: HTMLElement, graphView: any): vo
                 bubbles: true,
                 detail: {
                     iri,
-                    previewEnabled: !!e && (/^Mac/i.test(navigator.platform) ? e.metaKey : e.ctrlKey),
+                    previewEnabled: !!e && e.altKey,
                     anchorRect: {
                         left: bbox.left,
                         right: bbox.right,

package/src/renderers/graph-renderer.ts

@@ -697,7 +697,7 @@ function installGraphNodeInteractions(
                     bubbles: true,
                     detail: {
                         iri,
-                        previewEnabled: !!e && (/^Mac/i.test(navigator.platform) ? e.metaKey : e.ctrlKey),
+                        previewEnabled: !!e && e.altKey,
                         anchorRect: {
                             left: bbox.left,
                             right: bbox.right,
@@ -739,7 +739,7 @@ function installGraphNodeInteractions(
                 detail: {
                     blockId,
                     blockSource: source,
-                    contextIri: iri.trim(),
+                    contextMemberIri: iri.trim(),
                 },
             }));
             return;

package/src/renderers/table-renderer.ts

@@ -146,9 +146,11 @@ export class TableMarkdownBlockRenderer extends QueryMarkdownBlockRenderer {
             cells: visibleColumnIndexes.map((columnIndex) => row.cells[columnIndex] ?? ''),
             typedCells: visibleColumnIndexes.map((columnIndex) => row.typedCells?.[columnIndex]),
         }));
+        const dedupeVisibleRows = hiddenColumns.size > 0 && !isTree;
+        const visibleRows = dedupeVisibleRows ? dedupeRowsByDisplayedCells(rowsWithIndex) : rowsWithIndex;
         root.__omlAiContext = {
             columns: visibleColumns.slice(),
-            rows: rowsWithIndex
+            rows: visibleRows
                 .map((row) => ({
                     iri: (row.cells[0] ?? '').trim(),
                     cells: row.cells.slice(),
@@ -156,7 +158,7 @@ export class TableMarkdownBlockRenderer extends QueryMarkdownBlockRenderer {
                 .filter((row) => row.iri.length > 0),
             blockSource,
         };
-        const columnContexts = createColumnContexts(visibleColumns, rowsWithIndex);
+        const columnContexts = createColumnContexts(visibleColumns, visibleRows);
         const treeModel = isTree
             ? this.createTreeModel(columns, allRowsWithIndex, visibleColumnIndexes, options)
             : undefined;
@@ -275,7 +277,7 @@ export class TableMarkdownBlockRenderer extends QueryMarkdownBlockRenderer {
         downloadButton.addEventListener('click', () => {
             const sourceRows = isTree && treeModel
                 ? this.resolveTreeSourceRows(treeModel, visibleColumns, state.expanded, state.search, blockSource, options)
-                : rowsWithIndex;
+                : visibleRows;
             if (isTree && treeModel) {
                 this.requestTreeJsonDownload(visibleColumns, treeModel, sourceRows);
                 return;
@@ -286,7 +288,7 @@ export class TableMarkdownBlockRenderer extends QueryMarkdownBlockRenderer {
         });
         controlsRight.appendChild(downloadButton);
 
-        const uploadButton = this.createUploadCsvButton(visibleColumns, rowsWithIndex, isTree, blockSource);
+        const uploadButton = this.createUploadCsvButton(visibleColumns, visibleRows, isTree, blockSource);
         if (uploadButton) {
             controlsRight.appendChild(uploadButton);
         }
@@ -336,7 +338,7 @@ export class TableMarkdownBlockRenderer extends QueryMarkdownBlockRenderer {
             if (isTree) {
                 return;
             }
-            const filtered = this.applyFiltersAndSorting(visibleColumns, rowsWithIndex, state, blockSource, options);
+            const filtered = this.applyFiltersAndSorting(visibleColumns, visibleRows, state, blockSource, options);
             const totalPages = Math.max(1, Math.ceil(filtered.length / state.pageSize));
             if (state.page < totalPages - 1) {
                 state.page += 1;
@@ -359,7 +361,7 @@ export class TableMarkdownBlockRenderer extends QueryMarkdownBlockRenderer {
         const renderPage = () => {
             const sourceRows = isTree && treeModel
                 ? this.resolveTreeSourceRows(treeModel, visibleColumns, state.expanded, state.search, blockSource, options)
-                : rowsWithIndex;
+                : visibleRows;
             const filtered = isTree
                 ? sourceRows.slice()
                 : this.applyFiltersAndSorting(visibleColumns, sourceRows, state, blockSource, options);
@@ -408,7 +410,7 @@ export class TableMarkdownBlockRenderer extends QueryMarkdownBlockRenderer {
                     state,
                     root,
                     columns: visibleColumns,
-                    rows: fullyExpandedTreeRows ?? rowsWithIndex,
+                    rows: fullyExpandedTreeRows ?? visibleRows,
                     referenceCell: label,
                     rerender: renderPage,
                 });
@@ -463,7 +465,7 @@ export class TableMarkdownBlockRenderer extends QueryMarkdownBlockRenderer {
                     this.onRowDoubleClick({
                         root,
                         columns: visibleColumns,
-                        rows: rowsWithIndex.map((row) => ({ index: row.index, cells: row.cells.slice() })),
+                        rows: visibleRows.map((row) => ({ index: row.index, cells: row.cells.slice() })),
                         row: { index: rowEntry.index, cells: rowEntry.cells.slice() },
                         blockSource,
                         typeOptions: this.extractTypeOptions(blockSource),
@@ -484,7 +486,7 @@ export class TableMarkdownBlockRenderer extends QueryMarkdownBlockRenderer {
         this.appendCustomLeftControls(controlsLeft, {
             root,
             columns: visibleColumns,
-            rows: rowsWithIndex.map((row) => ({ index: row.index, cells: row.cells.slice() })),
+            rows: visibleRows.map((row) => ({ index: row.index, cells: row.cells.slice() })),
             blockSource,
             options,
             typeOptions: this.extractTypeOptions(blockSource),
@@ -494,7 +496,7 @@ export class TableMarkdownBlockRenderer extends QueryMarkdownBlockRenderer {
         this.scheduleInitialAutosize({
             root,
             columns: visibleColumns,
-            rows: fullyExpandedTreeRows ?? rowsWithIndex,
+            rows: fullyExpandedTreeRows ?? visibleRows,
             state,
             rerender: renderPage,
         });
@@ -1209,6 +1211,20 @@ type TableRowData = {
     treeHasChildren?: boolean;
 };
 
+function dedupeRowsByDisplayedCells(rows: ReadonlyArray<TableRowData>): TableRowData[] {
+    const seen = new Set<string>();
+    const deduped: TableRowData[] = [];
+    for (const row of rows) {
+        const key = row.cells.join('\u0000');
+        if (seen.has(key)) {
+            continue;
+        }
+        seen.add(key);
+        deduped.push(row);
+    }
+    return deduped;
+}
+
 type TreeModel = {
     rowsById: Map<string, TableRowData>;
     childrenByParent: Map<string, string[]>;