Make frameRefs work

src/canvas/index.ts

@@ -85,11 +85,11 @@ export default class CanvasModule extends Module<CanvasConfig> {
     return this.canvasView as any;
   }
 
-  //name = 'Canvas';
   canvas: Canvas;
   model: Canvas;
   spots: CanvasSpots;
   events = CanvasEvents;
+  framesById: Record<string, Frame | undefined> = {};
   private canvasView?: CanvasView;
 
   /**

src/canvas/model/Frame.ts

@@ -1,12 +1,12 @@
-import { result, forEach, isEmpty, isString, isNumber } from 'underscore';
-import { ModuleModel } from '../../abstract';
+import { forEach, isEmpty, isNumber, isString, result } from 'underscore';
 import CanvasModule from '..';
+import { ModuleModel } from '../../abstract';
+import { BoxRect } from '../../common';
 import ComponentWrapper from '../../dom_components/model/ComponentWrapper';
-import { isComponent, isObject } from '../../utils/mixins';
+import Page from '../../pages/model/Page';
+import { createId, isComponent, isObject } from '../../utils/mixins';
 import FrameView from '../view/FrameView';
 import Frames from './Frames';
-import Page from '../../pages/model/Page';
-import { BoxRect } from '../../common';
 
 const keyAutoW = '__aw';
 const keyAutoH = '__ah';
@@ -102,6 +102,8 @@ export default class Frame extends ModuleModel<CanvasModule> {
 
     !attr.width && this.set(keyAutoW, 1);
     !attr.height && this.set(keyAutoH, 1);
+
+    !this.id && this.set('id', createId());
   }
 
   get width() {
@@ -125,6 +127,14 @@ export default class Frame extends ModuleModel<CanvasModule> {
     return refFrame?.getComponent() || this.getComponent();
   }
 
+  initRefs() {
+    const { refFrame } = this;
+    if (isString(refFrame)) {
+      const frame = this.module.framesById[refFrame];
+      frame && this.set({ refFrame: frame }, { silent: true });
+    }
+  }
+
   getBoxRect(): BoxRect {
     const { x, y } = this.attributes;
     const { width, height } = this;

src/canvas/model/Frames.ts

@@ -12,8 +12,14 @@ export default class Frames extends ModuleCollection<Frame> {
   constructor(module: CanvasModule, models: Frame[] | Array<Record<string, any>> = []) {
     super(module, models, Frame);
     bindAll(this, 'itemLoaded');
+    this.on('add', this.onAdd);
     this.on('reset', this.onReset);
     this.on('remove', this.onRemove);
+    this.forEach(frame => this.onAdd(frame));
+  }
+
+  onAdd(frame: Frame) {
+    this.module.framesById[frame.id] = frame;
   }
 
   onReset(m: Frame, opts?: { previousModels?: Frame[] }) {
@@ -21,8 +27,13 @@ export default class Frames extends ModuleCollection<Frame> {
     prev.map(p => this.onRemove(p));
   }
 
-  onRemove(removed?: Frame) {
-    removed?.onRemove();
+  onRemove(frame: Frame) {
+    frame.onRemove();
+    delete this.module.framesById[frame.id];
+  }
+
+  initRefs() {
+    this.forEach(frame => frame.initRefs());
   }
 
   itemLoaded() {

src/pages/index.ts

@@ -283,7 +283,9 @@ export default class PageManager extends ItemManagerModule<PageManagerConfig, Pa
   }
 
   load(data: any) {
-    return this.loadProjectData(data, { all: this.pages, reset: true });
+    const result = this.loadProjectData(data, { all: this.pages, reset: true });
+    this.pages.forEach(page => page.getFrames().initRefs());
+    return result;
   }
 
   _createId() {

src/pages/model/Page.ts

@@ -61,9 +61,8 @@ export default class Page extends Model<PagePropertiesDefined> {
     const frames = new Frames(em!.Canvas, frms);
     frames.page = this;
     this.set('frames', frames);
-    !this.getId() && this.set('id', em?.get('PageManager')._createId());
-    const um = em?.get('UndoManager');
-    um?.add(frames);
+    !this.getId() && this.set('id', em?.Pages._createId());
+    em?.UndoManager.add(frames);
   }
 
   onRemove() {