diff --git a/src/display/mixins/Childrenable.js b/src/display/mixins/Childrenable.js index 520af6ea..c9234769 100644 --- a/src/display/mixins/Childrenable.js +++ b/src/display/mixins/Childrenable.js @@ -26,6 +26,9 @@ export const Childrenable = (superClass) => { if (idx !== -1) { element = elements[idx]; elements.splice(idx, 1); + if (options.mergeStrategy === 'replace') { + this.addChild(element); + } } else { element = newElement(childChange.type, this.context); this.addChild(element); diff --git a/src/display/mixins/Componentsable.js b/src/display/mixins/Componentsable.js index 178ec34a..ccf8a917 100644 --- a/src/display/mixins/Componentsable.js +++ b/src/display/mixins/Componentsable.js @@ -26,6 +26,9 @@ export const Componentsable = (superClass) => { if (idx !== -1) { component = components[idx]; components.splice(idx, 1); + if (options.mergeStrategy === 'replace') { + this.addChild(component); + } } else { component = newComponent(componentChange.type, this.context); this.addChild(component); diff --git a/src/events/states/SelectionState.js b/src/events/states/SelectionState.js index e3956caf..f09838b2 100644 --- a/src/events/states/SelectionState.js +++ b/src/events/states/SelectionState.js @@ -105,7 +105,7 @@ export default class SelectionState extends State { } pause() { - this.#clear(); + this.#clearSelectionBox(); } destroy() { @@ -163,6 +163,7 @@ export default class SelectionState extends State { this.config.onDragEnd(selected, e); this.viewport.plugin.stop('mouse-edges'); } + this.#clearSelectionBox(); this.#clearInteractionState(); } @@ -216,17 +217,23 @@ export default class SelectionState extends State { } /** - * Clears the current interaction state and resets to IDLE. - * If the selection box exists and is not destroyed, clears its graphics. + * Clears the selection box if it exists and is not destroyed. * @private */ - #clearInteractionState() { - this.interactionState = InteractionState.IDLE; + #clearSelectionBox() { if (!this._selectionBox.destroyed) { this._selectionBox.clear(); } } + /** + * Clears the current interaction state and resets to IDLE. + * @private + */ + #clearInteractionState() { + this.interactionState = InteractionState.IDLE; + } + /** * Resets gesture-related properties, clearing drag start point and moved viewport state. * @private @@ -243,6 +250,7 @@ export default class SelectionState extends State { */ #clear() { this.#clearInteractionState(); + this.#clearSelectionBox(); this.#clearGesture(); } diff --git a/src/transformer/Transformer.js b/src/transformer/Transformer.js index 7942c140..01c25105 100644 --- a/src/transformer/Transformer.js +++ b/src/transformer/Transformer.js @@ -98,7 +98,7 @@ export default class Transformer extends Container { if (isValidationError(options)) throw options; this._selection = new SelectionModel(); - this.#wireframe = this.addChild(new Wireframe({ label: 'wireframe' })); + this.#wireframe = this.addChild(new Wireframe({ type: 'wireframe' })); this.wireframeStyle = DEFAULT_WIREFRAME_STYLE; this.onRender = this.#refresh.bind(this); for (const key in options) { diff --git a/src/transformer/Wireframe.js b/src/transformer/Wireframe.js index 742af3a2..511d56ee 100644 --- a/src/transformer/Wireframe.js +++ b/src/transformer/Wireframe.js @@ -1,11 +1,15 @@ import { Graphics } from 'pixi.js'; +import { Type } from '../display/mixins/Type'; +import { mixins } from '../display/mixins/utils'; + +const ComposedWireframe = mixins(Graphics, Type); /** * A specialized Graphics class for drawing the wireframe outlines of transformed objects. * It extends PIXI.Graphics to provide a dedicated method for rendering bounds. * @extends PIXI.Graphics */ -export class Wireframe extends Graphics { +export class Wireframe extends ComposedWireframe { /** * A static flag to indicate that this object can be targeted by selection logic. * @type {boolean}