From 10858314fde110247a3e4b39e8f3d1944023fe09 Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Fri, 24 May 2024 18:03:05 +0400 Subject: [PATCH] Fix possible double entry in Layers. Closes #5820 --- src/dom_components/model/Component.ts | 2 + src/dom_components/model/Components.ts | 8 +++ src/dom_components/view/ComponentsView.ts | 19 ++------ src/navigator/index.ts | 1 - src/navigator/view/ItemsView.ts | 59 +++++++++++++---------- 5 files changed, 46 insertions(+), 43 deletions(-) diff --git a/src/dom_components/model/Component.ts b/src/dom_components/model/Component.ts index c70138539..0634ce65e 100644 --- a/src/dom_components/model/Component.ts +++ b/src/dom_components/model/Component.ts @@ -39,6 +39,7 @@ import Trait from '../../trait_manager/model/Trait'; import { ToolbarButtonProps } from './ToolbarButton'; import { TraitProperties } from '../../trait_manager/types'; import { ActionLabelComponents, ComponentsEvents } from '../types'; +import ItemView from '../../navigator/view/ItemView'; export interface IComponent extends ExtractMethods {} @@ -222,6 +223,7 @@ export default class Component extends StyleableModel { ccid!: string; views!: ComponentView[]; view?: ComponentView; + viewLayer?: ItemView; frame?: Frame; rule?: CssRule; prevColl?: Components; diff --git a/src/dom_components/model/Components.ts b/src/dom_components/model/Components.ts index fcdae405d..71dfcbfe9 100644 --- a/src/dom_components/model/Components.ts +++ b/src/dom_components/model/Components.ts @@ -358,6 +358,14 @@ Component> { } model.__postAdd({ recursive: true }); + + if (em && !opts.temporary) { + const triggerAdd = (model: Component) => { + em.trigger(ComponentsEvents.add, model, opts); + model.components().forEach(comp => triggerAdd(comp)); + }; + triggerAdd(model); + } // this.__onAddEnd(); } diff --git a/src/dom_components/view/ComponentsView.ts b/src/dom_components/view/ComponentsView.ts index 83d4b1091..f70879824 100644 --- a/src/dom_components/view/ComponentsView.ts +++ b/src/dom_components/view/ComponentsView.ts @@ -7,7 +7,6 @@ import Component from '../model/Component'; import ComponentView from './ComponentView'; import FrameView from '../../canvas/view/FrameView'; import Components from '../model/Components'; -import { ComponentsEvents } from '../types'; export default class ComponentsView extends View { opts!: any; @@ -47,18 +46,8 @@ export default class ComponentsView extends View { * @param {Object} opts * @private * */ - addTo(model: Component, coll: any = {}, opts: { temporary?: boolean } = {}) { - const { em } = this; - const i = this.collection.indexOf(model); - this.addToCollection(model, null, i); - - if (em && !opts.temporary) { - const triggerAdd = (model: Component) => { - em.trigger(ComponentsEvents.add, model, opts); - model.components().forEach(comp => triggerAdd(comp)); - }; - triggerAdd(model); - } + addTo(model: Component) { + this.addToCollection(model, null, this.collection.indexOf(model)); } /** @@ -70,10 +59,8 @@ export default class ComponentsView extends View { * @return {Object} Object rendered * @private * */ - addToCollection(model: Component, fragmentEl?: DocumentFragment | null, index?: number) { - // if (!this.compView) this.compView = require('./ComponentView').default; + addToCollection(model: Component, fragment?: DocumentFragment | null, index?: number) { const { config, opts, em } = this; - const fragment = fragmentEl || null; const { frameView } = config; const sameFrameView = frameView?.model && model.getView(frameView.model); const dt = opts.componentTypes || em?.Components.getTypes(); diff --git a/src/navigator/index.ts b/src/navigator/index.ts index 6c45e6649..13d2c428b 100644 --- a/src/navigator/index.ts +++ b/src/navigator/index.ts @@ -324,7 +324,6 @@ export default class LayerManager extends Module { } if (selected && scrollLayers) { - // @ts-ignore const el = selected.viewLayer?.el; el?.scrollIntoView(scrollLayers); } diff --git a/src/navigator/view/ItemsView.ts b/src/navigator/view/ItemsView.ts index a2ca13a41..ed1a28148 100644 --- a/src/navigator/view/ItemsView.ts +++ b/src/navigator/view/ItemsView.ts @@ -1,13 +1,17 @@ +import { isUndefined } from 'underscore'; import { View } from '../../common'; import Component from '../../dom_components/model/Component'; import EditorModel from '../../editor/model/Editor'; import ItemView from './ItemView'; +import Components from '../../dom_components/model/Components'; export default class ItemsView extends View { items: ItemView[]; opt: any; config: any; parentView: ItemView; + /** @ts-ignore */ + collection!: Components; constructor(opt: any = {}) { super(opt); @@ -47,11 +51,9 @@ export default class ItemsView extends View { } removeChildren(removed: Component) { - // @ts-ignore const view = removed.viewLayer; if (!view) return; view.remove(); - // @ts-ignore delete removed.viewLayer; } @@ -62,8 +64,7 @@ export default class ItemsView extends View { * @return Object * */ addTo(model: Component) { - var i = this.collection.indexOf(model); - this.addToCollection(model, null, i); + this.addToCollection(model, null, this.collection.indexOf(model)); } /** @@ -74,41 +75,47 @@ export default class ItemsView extends View { * * @return Object Object created * */ - addToCollection(model: Component, fragmentEl: DocumentFragment | null, index?: number) { - const { parentView, opt, config } = this; + addToCollection(model: Component, fragment: DocumentFragment | null, index?: number) { + const { parentView, opt, config, el } = this; const { ItemView, opened, module, level, sorter } = opt; - const fragment = fragmentEl || null; - const item = new ItemView({ - ItemView, - level, - model, - parentView, - config, - sorter, - opened, - module, - }); + const item: ItemView = + model.viewLayer || + new ItemView({ + ItemView, + level, + model, + parentView, + config, + sorter, + opened, + module, + }); const rendered = item.render().el; if (fragment) { fragment.appendChild(rendered); } else { - if (typeof index !== 'undefined') { - var method = 'before'; + const parent = el; + const children = parent.childNodes; + + if (!isUndefined(index)) { + const lastIndex = children.length == index; + // If the added model is the last of collection // need to change the logic of append - if (this.$el.children().length == index) { + if (lastIndex) { index--; - method = 'after'; } + // In case the added is new in the collection index will be -1 - if (index < 0) { - this.$el.append(rendered); + if (lastIndex || !children.length) { + parent.appendChild(rendered); } else { - // @ts-ignore - this.$el.children().eq(index)[method](rendered); + parent.insertBefore(rendered, children[index]); } - } else this.$el.append(rendered); + } else { + parent.appendChild(rendered); + } } this.items.push(item); return rendered;