From ac68cc7f84be3a558be67b4660360c12c34654f1 Mon Sep 17 00:00:00 2001 From: them7d Date: Thu, 22 Jan 2026 00:58:17 +0300 Subject: [PATCH] fix component sorting by removing visibility filters(displayindex) --- .../src/utils/sorter/BaseComponentNode.ts | 101 +++--------------- .../utils/sorter/CanvasNewComponentNode.ts | 7 +- 2 files changed, 18 insertions(+), 90 deletions(-) diff --git a/packages/core/src/utils/sorter/BaseComponentNode.ts b/packages/core/src/utils/sorter/BaseComponentNode.ts index be26aed0d..fd57b61ba 100644 --- a/packages/core/src/utils/sorter/BaseComponentNode.ts +++ b/packages/core/src/utils/sorter/BaseComponentNode.ts @@ -16,40 +16,7 @@ export abstract class BaseComponentNode extends SortableTreeNode { * BaseComponentNode, or null if there are no children. */ getChildren(): BaseComponentNode[] | null { - return this.getDisplayedChildren(); - } - - /** - * Get the list of displayed children, i.e., components that have a valid HTML element. - * Cached values are used to avoid recalculating the display status unnecessarily. - * @returns {BaseComponentNode[] | null} - The list of displayed children wrapped in - * BaseComponentNode, or null if there are no displayed children. - */ - private getDisplayedChildren(): BaseComponentNode[] | null { - const children = this.model.components(); - const displayedChildren = children.filter((child) => this.isChildDisplayed(child)); - - return displayedChildren.map((comp: Component) => new (this.constructor as any)(comp)); - } - - /** - * Check if a child is displayed, using cached value if available. - * @param {Component} child - The child component to check. - * @returns {boolean} - Whether the child is displayed. - */ - private isChildDisplayed(child: Component): boolean { - // Check if display status is cached - if (this.displayCache.has(child)) { - return this.displayCache.get(child)!; - } - - const element = child.getEl(); - const displayed = isDisplayed(element); - - // Cache the display status - this.displayCache.set(child, displayed); - - return displayed; + return this.model.components().map((comp: Component) => new (this.constructor as any)(comp)); } /** @@ -65,13 +32,13 @@ export abstract class BaseComponentNode extends SortableTreeNode { /** * Add a child component to this node at the specified index. * @param {BaseComponentNode} node - The child node to add. - * @param {number} displayIndex - The visual index at which to insert the child. + * @param {number} index - The index at which to insert the child. * @param {{ action: string }} options - Options for the operation, with the default action being 'add-component'. * @returns {BaseComponentNode} - The newly added child node wrapped in BaseComponentNode. */ addChildAt( node: BaseComponentNode, - displayIndex: number, + index: number, options: { action: string } = { action: 'add-component' }, ): BaseComponentNode { const insertingTextableIntoText = this.model?.isInstanceOf?.('text') && node?.model?.get?.('textable'); @@ -82,7 +49,7 @@ export abstract class BaseComponentNode extends SortableTreeNode { } const newModel = this.model.components().add(node.model, { - at: this.getRealIndex(displayIndex), + at: index, action: options.action, }); @@ -91,11 +58,11 @@ export abstract class BaseComponentNode extends SortableTreeNode { /** * Remove a child component at the specified index. - * @param {number} displayIndex - The visual index of the child to remove. + * @param {number} index - The visual index of the child to remove. * @param {{ temporary: boolean }} options - Whether to temporarily remove the child. */ - removeChildAt(displayIndex: number, options: { temporary: boolean } = { temporary: false }): void { - const child = this.model.components().at(this.getRealIndex(displayIndex)); + removeChildAt(index: number, options: { temporary: boolean } = { temporary: false }): void { + const child = this.model.components().at(index); if (child) { this.model.components().remove(child, options as any); } @@ -107,49 +74,27 @@ export abstract class BaseComponentNode extends SortableTreeNode { * @returns {number} - The index of the child node, or -1 if not found. */ indexOfChild(node: BaseComponentNode): number { - return this.getDisplayIndex(node); + return this.getIndex(node); } /** - * Get the index of the given node within the displayed children. + * Get the index of the given node. * @param {BaseComponentNode} node - The node to find. - * @returns {number} - The display index of the node, or -1 if not found. + * @returns {number} - The index of the node, or -1 if not found. */ - private getDisplayIndex(node: BaseComponentNode): number { - const displayedChildren = this.getDisplayedChildren(); - return displayedChildren ? displayedChildren.findIndex((displayedNode) => displayedNode.model === node.model) : -1; - } - - /** - * Convert a display index to the actual index within the component's children array. - * @param {number} index - The display index to convert. - * @returns {number} - The corresponding real index, or -1 if not found. - */ - getRealIndex(index: number): number { - if (index === -1) return -1; - - let displayedCount = 0; - const children = this.model.components(); - - for (let i = 0; i < children.length; i++) { - const child = children.at(i); - const displayed = this.isChildDisplayed(child); - - if (displayed) displayedCount++; - if (displayedCount === index + 1) return i; - } - - return -1; + private getIndex(node: BaseComponentNode): number { + const Children = this.getChildren(); + return Children ? Children.findIndex((Node) => Node.model === node.model) : -1; } /** * Check if a source node can be moved to a specified index within this component. * @param {BaseComponentNode} source - The source node to move. - * @param {number} index - The display index to move the source to. + * @param {number} index - The index to move the source to. * @returns {boolean} - True if the move is allowed, false otherwise. */ canMove(source: BaseComponentNode, index: number): boolean { - return this.model.em.Components.canMove(this.model, source.model, this.getRealIndex(index)).result; + return this.model.em.Components.canMove(this.model, source.model, index).result; } equals(node?: BaseComponentNode): node is BaseComponentNode { @@ -229,19 +174,3 @@ export abstract class BaseComponentNode extends SortableTreeNode { return this.model.get?.('textable'); } } - -/** - * Function to check if an element is displayed in the DOM. - * @param {HTMLElement | undefined} element - The element to check. - * @returns {boolean} - Whether the element is displayed. - */ -function isDisplayed(element: HTMLElement | undefined): boolean { - if (!element) return false; - return ( - typeof element === 'object' && - element.nodeType === Node.ELEMENT_NODE && - window.getComputedStyle(element).display !== 'none' && - element.offsetWidth > 0 && - element.offsetHeight > 0 - ); -} diff --git a/packages/core/src/utils/sorter/CanvasNewComponentNode.ts b/packages/core/src/utils/sorter/CanvasNewComponentNode.ts index 9ba5bcc1e..5940438fc 100644 --- a/packages/core/src/utils/sorter/CanvasNewComponentNode.ts +++ b/packages/core/src/utils/sorter/CanvasNewComponentNode.ts @@ -8,7 +8,6 @@ type CanMoveSource = Component | ContentType; export default class CanvasNewComponentNode extends CanvasComponentNode { canMove(source: CanvasNewComponentNode, index: number): boolean { - const realIndex = this.getRealIndex(index); const { model: symbolModel, content, dragDef } = source._dragSource; const canMoveSymbol = !symbolModel || !this.isSourceSameSymbol(symbolModel); @@ -16,11 +15,11 @@ export default class CanvasNewComponentNode extends CanvasComponentNode { if (Array.isArray(sourceContent)) { return ( - canMoveSymbol && sourceContent.every((contentItem, i) => this.canMoveSingleContent(contentItem, realIndex + i)) + canMoveSymbol && sourceContent.every((contentItem, i) => this.canMoveSingleContent(contentItem, index + i)) ); } - return canMoveSymbol && this.canMoveSingleContent(sourceContent, realIndex); + return canMoveSymbol && this.canMoveSingleContent(sourceContent, index); } private canMoveSingleContent(contentItem: ContentElement | Component, index: number): boolean { @@ -57,7 +56,7 @@ export default class CanvasNewComponentNode extends CanvasComponentNode { // @ts-ignore model = this.model?.getView?.()?.insertComponent?.(content, { action: 'add-component' }); } else { - model = this.model.components().add(content, { at: this.getRealIndex(index), action: 'add-component' }); + model = this.model.components().add(content, { at: index, action: 'add-component' }); } return new (this.constructor as any)(model); }