Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 | 1x 1x 1x 1x 43x 43x 43x 43x 43x 43x 43x 43x 1x 1x 1x 45x 45x 45x 45x 43x 5x 5x 5x 1x 1x 47x 47x 47x 47x 47x 47x 47x 47x 1x 113x 12x 12x 12x 43x 1x 17x 1x 17x 4x 4x 43x 59x 1x 48x 48x 1x 1x | import { isNodeOfType, normalizeRect } from 'roosterjs-content-model-dom'; import { TableEditor } from './editors/TableEditor'; import type { TableEditFeatureName } from './editors/features/TableEditFeatureName'; import type { OnTableEditorCreatedCallback } from './OnTableEditorCreatedCallback'; import type { EditorPlugin, IEditor, PluginEvent, Rect } from 'roosterjs-content-model-types'; const TABLE_RESIZER_LENGTH = 12; /** * TableEdit plugin, provides the ability to resize a table by drag-and-drop */ export class TableEditPlugin implements EditorPlugin { private editor: IEditor | null = null; private onMouseMoveDisposer: (() => void) | null = null; private tableRectMap: { table: HTMLTableElement; rect: Rect }[] | null = null; private tableEditor: TableEditor | null = null; /** * Construct a new instance of TableResize plugin * @param anchorContainerSelector An optional selector string to specify the container to host the plugin. * The container must not be affected by transform: scale(), otherwise the position calculation will be wrong. * If not specified, the plugin will be inserted in document.body * @param onTableEditorCreated An optional callback to customize the Table Editors elements when created. * @param disableFeatures An optional array of TableEditFeatures to disable */ constructor( private anchorContainerSelector?: string, private onTableEditorCreated?: OnTableEditorCreatedCallback, private disableFeatures?: TableEditFeatureName[] ) {} /** * Get a friendly name of this plugin */ getName() { return 'TableEdit'; } /** * Initialize this plugin. This should only be called from Editor * @param editor Editor instance */ initialize(editor: IEditor) { this.editor = editor; this.onMouseMoveDisposer = this.editor.attachDomEvent({ mousemove: { beforeDispatch: this.onMouseMove }, }); const scrollContainer = this.editor.getScrollContainer(); scrollContainer.addEventListener('mouseout', this.onMouseOut); } private onMouseOut = ({ relatedTarget, currentTarget }: MouseEvent) => { const relatedTargetNode = relatedTarget as Node; const currentTargetNode = currentTarget as Node; if ( isNodeOfType(relatedTargetNode, 'ELEMENT_NODE') && isNodeOfType(currentTargetNode, 'ELEMENT_NODE') && this.tableEditor && !this.tableEditor.isOwnedElement(relatedTargetNode) && !currentTargetNode.contains(relatedTargetNode) ) { this.setTableEditor(null); } }; /** * Dispose this plugin */ dispose() { const scrollContainer = this.editor?.getScrollContainer(); scrollContainer?.removeEventListener('mouseout', this.onMouseOut); this.onMouseMoveDisposer?.(); this.invalidateTableRects(); this.disposeTableEditor(); this.editor = null; this.onMouseMoveDisposer = null; this.onTableEditorCreated = undefined; } /** * Handle events triggered from editor * @param event PluginEvent object */ onPluginEvent(e: PluginEvent) { switch (e.eventType) { case 'input': case 'contentChanged': case 'scroll': case 'zoomChanged': this.setTableEditor(null); this.invalidateTableRects(); break; } } private onMouseMove = (event: Event) => { const e = event as MouseEvent; if (e.buttons > 0 || !this.editor) { return; } this.ensureTableRects(); const editorWindow = this.editor.getDocument().defaultView || window; const x = e.pageX - editorWindow.scrollX; const y = e.pageY - editorWindow.scrollY; let currentTable: HTMLTableElement | null = null; //Find table in range of mouse if (this.tableRectMap) { for (let i = this.tableRectMap.length - 1; i >= 0; i--) { const { table, rect } = this.tableRectMap[i]; if ( x >= rect.left - TABLE_RESIZER_LENGTH && x <= rect.right + TABLE_RESIZER_LENGTH && y >= rect.top - TABLE_RESIZER_LENGTH && y <= rect.bottom + TABLE_RESIZER_LENGTH ) { currentTable = table; break; } } } this.setTableEditor(currentTable, e); this.tableEditor?.onMouseMove(x, y); }; /** * @internal Public only for unit test * @param table Table to use when setting the Editors * @param event (Optional) Mouse event */ public setTableEditor(table: HTMLTableElement | null, event?: MouseEvent) { if (this.tableEditor && !this.tableEditor.isEditing() && table != this.tableEditor.table) { this.disposeTableEditor(); } if (!this.tableEditor && table && this.editor && table.rows.length > 0) { // anchorContainerSelector is used to specify the container to host the plugin, which can be outside of the editor's div const container = this.anchorContainerSelector ? this.editor.getDocument().querySelector(this.anchorContainerSelector) : undefined; this.tableEditor = new TableEditor( this.editor, table, this.invalidateTableRects, isNodeOfType(container, 'ELEMENT_NODE') ? container : undefined, event?.currentTarget, this.onTableEditorCreated, this.disableFeatures ); } } private invalidateTableRects = () => { this.tableRectMap = null; }; private disposeTableEditor() { this.tableEditor?.dispose(); this.tableEditor = null; } private ensureTableRects() { if (!this.tableRectMap && this.editor) { this.tableRectMap = []; const tables = this.editor.getDOMHelper().queryElements('table'); tables.forEach(table => { if (table.isContentEditable) { const rect = normalizeRect(table.getBoundingClientRect()); if (rect && this.tableRectMap) { this.tableRectMap.push({ table, rect, }); } } }); } } } |