greatly simplify graphical konva synchronization, by incorporating it into ChangeManager

KevinAst · KevinAst · commit a28c8f47e277 · 2020-11-04T12:08:00.000-06:00
diff --git a/src/core/Collage.js b/src/core/Collage.js
@@ -99,31 +99,21 @@ export default class Collage extends SmartPallet {
         x: konvaObj.x(),
         y: konvaObj.y()
       };
-      const syncSmartObject = (loc) => {
+
+      const applySmartObjectChange = (loc) => {
         const scene = this.scenes.find( (scene) => scene.id === id );
         scene.x = loc.x;
         scene.y = loc.y;
         return scene;
       }
-      const syncKonva = (loc) => {
-        const konvaObj = this.containingKonvaStage.findOne(`#${id}`);
-        konvaObj.x(loc.x);
-        konvaObj.y(loc.y);
-        this.containingKonvaStage.draw();
-      }
 
       // apply our change
-      // ... should be able to OMIT `.getPkgEntry()` node (below) BECAUSE this Collage should always be a PkgEntry
-      this.getPkgEntry().changeManager.applyChange({
-        changeFn(redo) {
-          const scene = syncSmartObject(newLoc);
-          redo && syncKonva(newLoc);
-          return scene;
+      this.changeManager.applyChange({
+        changeFn() {
+          return applySmartObjectChange(newLoc);
         },
         undoFn() {
-          const scene = syncSmartObject(oldLoc);
-          syncKonva(oldLoc);
-          return scene;
+          return applySmartObjectChange(oldLoc);
         }
       });
 
@@ -169,7 +159,7 @@ export default class Collage extends SmartPallet {
       type,
       key:  e.dataTransfer.getData(type),
     };
-    console.log(`?? pasting: `, {copySrc, onto: this});
+    // console.log(`?? pasting: `, {copySrc, onto: this});
 
     // NOTE: we know the supplied copySrc references a Scene pseudo class master (see pastable() method)
 
@@ -180,30 +170,15 @@ export default class Collage extends SmartPallet {
     const [pkgId, className] = copySrc.key.split('/');
     const sceneClassRef      = pkgManager.getClassRef(pkgId, className);
     const sceneId            = `${className}-copy-${Date.now()}`; // ... unique id (for now use current time)
-
-    // ?? have to break this up
-    //    ... ?? test again and see why?
-    //    ... ?? may prefer to fix that problem rather than break this out (too complex)
-    //    ... ?? also consider making this a SmartObject utility method ... say: remount() ... requires to be previously mounted ... would have to be implemented throughout major points in the hierarchy because of specifics
-    const syncKonva = () => {
-      const containingKonvaStage = this.containingKonvaStage;
-      this.unmount();
-      this.mount(containingKonvaStage);
-    }
     
-    // ?? will this work in subsequent undo? ... I think so, because `this` is retained in the closure
+    // retain selfCollage `this` alias
+    // ... NOTE: `this` IS retained in our closure, 
+    //           HOWEVER unless changeFn() is an arrow function, it has a different `this` context
     const selfCollage = this;
 
     // apply our change
-    // ... should be able to OMIT `.getPkgEntry()` node (below) BECAUSE this Collage should always be a PkgEntry
-    this.getPkgEntry().changeManager.applyChange({
-      changeFn(redo) { // ... we do NOT use redo, because we must sync konva 100% of the time
-
-        console.log(`?? redo paste operation`);
-
-        // unmount konvo (Part I of the konva sync process)
-        const containingKonvaStage = selfCollage.containingKonvaStage;
-        selfCollage.unmount();
+    this.changeManager.applyChange({
+      changeFn() {
 
         // ?? once we get this working, modularize it and make it a real utility
         function relativeCoords(event) {
@@ -216,56 +191,23 @@ export default class Collage extends SmartPallet {
 
         const coord = relativeCoords(e);
         console.log(`?? let's set the x/y from event: `, {event: e, coord});
-        // change SmartObj model ... by adding the new scene
+
+        // add a new scene (from the DnD drop) to our collage
         const newScene = sceneClassRef.createSmartObject({
           id: sceneId,
-          x: coord.x, // ?? pull from event
-          y: coord.y,
+          x:  coord.x,
+          y:  coord.y,
         });
-        selfCollage.addScene(newScene); // ?? this is NOT the correct `this`
-
-        // mount konvo (Part II of the konva sync process)
-        selfCollage.mount(containingKonvaStage);
+        selfCollage.addScene(newScene);
 
-        // ??$$ SPECIAL LOGIC
-        // re-establish our pkgEntry DispMode
-        // ... this resets all our event handlers given the re-mount :-)
-        // ... ?? this should be pkgEntry ... no need for this.getPkgEntry()
-        const pkgEntry = selfCollage.getPkgEntry();
-        pkgEntry.changeManager.changeDispMode( pkgEntry.getDispMode() );
-
-        // sync our Konva model ?? TRASH
-        //? syncKonva();
-
-        return newScene;
+        return newScene; // promote the new scene as our change target
       },
 
       undoFn() {
+        // remove the scene from our collage
+        selfCollage.removeScene(sceneId);
 
-        console.log(`?? undo paste operation`);
-        // debugger; ?? 
-
-        // unmount konvo (Part I of the konva sync process)
-        const containingKonvaStage = selfCollage.containingKonvaStage;
-        selfCollage.unmount();
-
-        // change SmartObj model ... by removing the scene
-        selfCollage.removeScene(sceneId)
-
-        // mount konvo (Part II of the konva sync process)
-        selfCollage.mount(containingKonvaStage);
-
-        // ??$$ SPECIAL LOGIC
-        // re-establish our pkgEntry DispMode
-        // ... this resets all our event handlers given the re-mount :-)
-        // ... ?? this should be pkgEntry ... no need for this.getPkgEntry()
-        const pkgEntry = selfCollage.getPkgEntry();
-        pkgEntry.changeManager.changeDispMode( pkgEntry.getDispMode() );
-
-        // sync our Konva model ?? TRASH
-        //? syncKonva();
-
-        return selfCollage; // ?? our collage has changed
+        return selfCollage; // promote our collage as our change target
       }
     });
   }
diff --git a/src/core/Scene.js b/src/core/Scene.js
@@ -179,31 +179,20 @@ export default class Scene extends SmartPallet {
         x: konvaObj.x(),
         y: konvaObj.y()
       };
-      const syncSmartObject = (loc) => {
+      const applySmartObjectChange = (loc) => {
         const comp = this.comps.find( (comp) => comp.id === id );
         comp.x = loc.x;
         comp.y = loc.y;
         return comp;
       }
-      const syncKonva = (loc) => {
-        const konvaObj = this.konvaSceneLayer.findOne(`#${id}`);
-        konvaObj.x(loc.x);
-        konvaObj.y(loc.y);
-        this.konvaSceneLayer.draw();
-      }
 
       // apply our change
-      // ... should be able to OMIT `.getPkgEntry()` node (below) BECAUSE this Scene should always be a PkgEntry
-      this.getPkgEntry().changeManager.applyChange({
-        changeFn(redo) {
-          const comp = syncSmartObject(newLoc);
-          redo && syncKonva(newLoc);
-          return comp;
+      this.changeManager.applyChange({
+        changeFn() {
+          return applySmartObjectChange(newLoc);
         },
         undoFn() {
-          const comp = syncSmartObject(oldLoc);
-          syncKonva(oldLoc);
-          return comp;
+          return applySmartObjectChange(oldLoc);
         }
       });
 
@@ -252,7 +241,6 @@ export default class Scene extends SmartPallet {
         //            ... KJB: I really don't like how Konva does selection in it's Transformer
         //     - KJB: WORK-AROUND: no-op when Konva/SmartObject have the same transformation
 
-
         // locate our component matching the target Konva.Group
         // ... we correlate the id's between Konva/SmartObject
         const konvaObj = e.target;
@@ -287,7 +275,7 @@ export default class Scene extends SmartPallet {
           return;
         }
 
-        const syncSmartObject = (trans) => {
+        const applySmartObjectChange = (trans) => {
           const comp    = this.comps.find( (comp) => comp.id === id );
           comp.x        = trans.x;
           comp.y        = trans.y;
@@ -296,28 +284,14 @@ export default class Scene extends SmartPallet {
           comp.scaleY   = trans.scaleY;
           return comp;
         }
-        const syncKonva = (trans) => {
-          const konvaObj = this.konvaSceneLayer.findOne(`#${id}`);
-          konvaObj.x(trans.x);
-          konvaObj.y(trans.y);
-          konvaObj.rotation(trans.rotation);
-          konvaObj.scaleX(trans.scaleX);
-          konvaObj.scaleY(trans.scaleY);
-          this.konvaSceneLayer.draw();
-        }
 
         // apply our change
-        // ... should be able to OMIT `.getPkgEntry()` node (below) BECAUSE this Scene should always be a PkgEntry
-        this.getPkgEntry().changeManager.applyChange({
-          changeFn(redo) {
-            const comp = syncSmartObject(newTrans);
-            redo && syncKonva(newTrans);
-            return comp;
+        this.changeManager.applyChange({
+          changeFn() {
+            return applySmartObjectChange(newTrans);
           },
           undoFn() {
-            const comp = syncSmartObject(oldTrans);
-            syncKonva(oldTrans);
-            return comp;
+            return applySmartObjectChange(oldTrans);
           }
         });
 
diff --git a/src/core/changeManager/ChangeManager.js b/src/core/changeManager/ChangeManager.js
@@ -15,6 +15,27 @@ import {isEPkg,
  * ChangeManager objects are retained in the corresponding EPkg
  * smartObject, as a convenient cataloging mechanism.
  *
+ * **Auto Synchronization**:
+ *
+ * ChangeManager greatly simplifies the change process by
+ * automatically applying the required synchronization to the:
+ *
+ *  - graphical representation (i.e. the Konva state)
+ *    ... app logic focuses on SmartObject changes,
+ *        and ChangeManager auto syncs the visual graphics
+ *
+ *  - SmartObject parentage
+ *    ... app logic merely changes a "focused" target object
+ *        and ChangeManager auto syncs it's parentage.
+ *        This is accomplished via SmartObject.trickleUpChange(),
+ *        propagating things like crc computations, and dynamic container size.
+ *
+ *  - ChangeMonitor state (see ChangeMonitor Object below)
+ *    ... of course self's reflective ChangeMonitor state is auto synced.
+ *        This is accomplished through the syncMonitoredChange() method,
+ *        invoked at the appropriate places.
+ *
+ *
  * **API**:
  *
  * There are two distinct APIs you should be aware of (as in all
@@ -27,19 +48,23 @@ import {isEPkg,
  *    + changeDispMode(dispMode): void        - change the dispMode of self's PkgEntry (view/edit/animate)
  *
  *    + syncMonitoredChange(): void           - synchronize self's ChangeMonitor (store value), 
- *                                              due to a change that has just been made to self's ePkg.
- *                                              ... as detected in CRC computations:
- *                                                  - SmartObject.resetCrc(): void
- *                                                  - SmartObject.resetBaseCrc(): void
+ *                                              due to a change that has just been made to self's ePkg
+ *                                              impacting items monitored by ChangeManger {dispMode, inSync, undoAvail, redoAvail},
+ *                                              for example:
+ *                                              * CRC computations (impacting: {inSync, undoAvail, redoAvail}):
+ *                                                - SmartObject.resetCrc():     void ... via SmartObject.trickleUpChange() driven by changeManager.applyChange()
+ *                                                - SmartObject.resetBaseCrc(): void ... via SmartPkg-constructor() and pkgPersist-savePkg()
+ *                                              * DispMode changes (impacting: {dispMode}):
+ *                                                - changeManager.changeDispMode(dispMode)
  *
  *    + applyChange({changeFn, undoFn}): void - apply a change to our system, registering the change to our undo/redo stack,
- *                                              auto-syncing the parentage -and- our ChangeMonitor state.
+ *                                              auto-syncing required state (see "Auto Synchronization" above).
  *
  *    + applyUndo(): void                     - apply an "undo" operation to the PkgEntry on whose behalf we are managing,
- *                                              auto-syncing the parentage -and- our ChangeMonitor state.
+ *                                              auto-syncing required state (see "Auto Synchronization" above).
  *
  *    + applyRedo(): void                     - apply an "redo" operation to the PkgEntry on whose behalf we are managing,
- *                                              auto-syncing the parentage -and- our ChangeMonitor state.
+ *                                              auto-syncing required state (see "Auto Synchronization" above).
  *    ```
  *
  * 2. ChangeMonitor Object (the store value, accessible via
@@ -107,7 +132,7 @@ export default class ChangeManager {
       redoAvail: this.undoRedoMgr.isRedoAvail(),
     });
     
-    // demark this object a svelte custom store
+    // demark this object as a svelte custom store
     this.subscribe = this.baseStore.subscribe;
   }
 
@@ -172,8 +197,8 @@ export default class ChangeManager {
 
   /**
    * Apply a change to our system, registering the change to our
-   * undo/redo stack, auto-syncing the parentage -and- our
-   * ChangeMonitor state.
+   * undo/redo stack, auto-syncing required state (see "Auto
+   * Synchronization" above).
    * 
    * - Changes are registered to the PkgEntry on whose behalf we
    *   manage/monitor (i.e. this.ePkg).  This must be consistent with
@@ -184,15 +209,10 @@ export default class ChangeManager {
    *   `changeFn()` / `undoFn()` is as follows:
    *   
    *   ```js
-   *   + changeFn(redoIndicator: <boolean>): targetObj
-   *   + undoFn(): targetObj
+   *   + changeFn(): targetObj
+   *   + undoFn():   targetObj
    *   ```
    * 
-   * - The `redoIndicator` param is an indicator as to whether the invocation
-   *   is a **redo** operation, verses the initial execution.
-   *   Typically a redo requires more work (for example syncing
-   *   **both** the SmartObject and Konva realms).
-   * 
    * - Both functions return the targetObj of the operation.  This is
    *   used to seed the synchronization of other parts of the model
    *   ... via the `SmartModel.trickleUpChange()` method.
@@ -206,11 +226,9 @@ export default class ChangeManager {
    *     active object.
    *
    * - Also, these change functions should only be concerned with the
-   *   modification of a given low-level object.  ChangeManager will
-   *   orchestrate additional detail to insure conformity.  For
-   *   example, the service will issue the `targetObj.trickleUpChange()`
-   *   which syncs the change to it parentage (synchronizing size and
-   *   crc, etc.).
+   *   modification of a given low-level SmartObject.  ChangeManager
+   *   will orchestrate additional detail to insure conformity (see
+   *   "Auto Synchronization" above).
    *
    * **Please Note** this service uses named parameters.
    * 
@@ -239,34 +257,28 @@ export default class ChangeManager {
     this.undoRedoMgr.registerOp(undoFn, changeFn);
 
     // apply the initial change
-    // NOTE: The change process auto-syncs our parentage -and- our ChangeMonitor state
-    //       (via the trickleUpChange() mechanism)
-    applyChange(check, this.ePkg, changeFn, false/*NOT a redo (rather our initial change)*/);
+    applyChange(check, this.ePkg, changeFn);
   }
 
 
   /**
    * Apply an "undo" operation to the PkgEntry on whose behalf we are
-   * managing, auto-syncing the parentage -and- our ChangeMonitor
-   * state.
+   * managing, auto-syncing required state (see "Auto Synchronization"
+   * above).
    */
   applyUndo() {
     // simply propagate request into our undoRedoMgr
-    // NOTE: This process auto-syncs our parentage -and- our ChangeMonitor state
-    //       (via the trickleUpChange() mechanism)
     this.undoRedoMgr.applyUndo();
   }
 
 
   /**
    * Apply an "redo" operation to the PkgEntry on whose behalf we are
-   * managing, auto-syncing the parentage -and- our ChangeMonitor
-   * state.
+   * managing, auto-syncing required state (see "Auto Synchronization"
+   * above).
    */
   applyRedo() {
     // simply propagate request into our undoRedoMgr
-    // NOTE: This process auto-syncs our parentage -and- our ChangeMonitor state
-    //       (via the trickleUpChange() mechanism)
     this.undoRedoMgr.applyRedo();
   }
 
diff --git a/src/core/changeManager/applyChange.js b/src/core/changeManager/applyChange.js
