fix: prevent interaction state reset when pausing SelectionState

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);

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);

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();
   }
 

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) {

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}