Update getBoxRect

src/canvas/index.ts

@@ -54,16 +54,12 @@ import Canvas from './model/Canvas';
 import CanvasSpot, { CanvasSpotBuiltInTypes, CanvasSpotProps } from './model/CanvasSpot';
 import CanvasSpots from './model/CanvasSpots';
 import Frame from './model/Frame';
-import { CanvasEvents } from './types';
+import { CanvasEvents, ToWorldOption } from './types';
 import CanvasView, { FitViewportOptions } from './view/CanvasView';
 import FrameView from './view/FrameView';
 
 export type CanvasEvent = `${CanvasEvents}`;
 
-export interface ToWorldOption {
-  toWorld?: boolean;
-}
-
 export default class CanvasModule extends Module<CanvasConfig> {
   /**
    * Get configuration object

src/canvas/model/CanvasSpot.ts

@@ -3,6 +3,7 @@ import { ModuleModel } from '../../abstract';
 import { BoxRect, LiteralUnion } from '../../common';
 import Component from '../../dom_components/model/Component';
 import ComponentView from '../../dom_components/view/ComponentView';
+import { GetBoxRectOptions } from '../types';
 import Frame from './Frame';
 
 export enum CanvasSpotBuiltInTypes {
@@ -41,25 +42,6 @@ export default class CanvasSpot<T extends CanvasSpotProps = CanvasSpotProps> ext
     } as T;
   }
 
-  get boxRect() {
-    const { el, em } = this;
-    const cvView = em.Canvas.getCanvasView();
-    const boxRect = this.get('boxRect');
-
-    if (boxRect) {
-      return boxRect;
-    } else if (el && cvView) {
-      return cvView.getElBoxRect(el);
-    }
-
-    return {
-      x: 0,
-      y: 0,
-      width: 0,
-      height: 0,
-    };
-  }
-
   get type() {
     return this.get('type') || '';
   }
@@ -78,8 +60,27 @@ export default class CanvasSpot<T extends CanvasSpotProps = CanvasSpotProps> ext
     return this.componentView?.el;
   }
 
-  getStyle(opts: { boxRect?: BoxRect } = {}): Partial<CSSStyleDeclaration> {
-    const { width, height, x, y } = opts.boxRect || this.boxRect;
+  getBoxRect(opts?: GetBoxRectOptions) {
+    const { el, em } = this;
+    const cvView = em.Canvas.getCanvasView();
+    const boxRect = this.get('boxRect');
+
+    if (boxRect) {
+      return boxRect;
+    } else if (el && cvView) {
+      return cvView.getElBoxRect(el, opts);
+    }
+
+    return {
+      x: 0,
+      y: 0,
+      width: 0,
+      height: 0,
+    };
+  }
+
+  getStyle(opts: { boxRect?: BoxRect } & GetBoxRectOptions = {}): Partial<CSSStyleDeclaration> {
+    const { width, height, x, y } = opts.boxRect || this.getBoxRect(opts);
 
     return {
       width: `${width}px`,

src/canvas/types.ts

@@ -90,3 +90,13 @@ export enum CanvasEvents {
   pointer = 'canvas:pointer',
 }
 /**{END_EVENTS}*/
+
+export interface ToScreenOption {
+  toScreen?: boolean;
+}
+
+export interface ToWorldOption {
+  toWorld?: boolean;
+}
+
+export interface GetBoxRectOptions extends ToScreenOption {}

src/canvas/view/CanvasView.ts

@@ -1,5 +1,4 @@
 import { bindAll, isNumber } from 'underscore';
-import { ToWorldOption } from '..';
 import { ModuleView } from '../../abstract';
 import { BoxRect, Coordinates, CoordinatesTypes, ElementRect } from '../../common';
 import Component from '../../dom_components/model/Component';
@@ -17,6 +16,7 @@ import {
 import { getComponentView, getElement, getUiClass } from '../../utils/mixins';
 import Canvas from '../model/Canvas';
 import Frame from '../model/Frame';
+import { GetBoxRectOptions, ToWorldOption } from '../types';
 import FrameView from './FrameView';
 import FramesView from './FramesView';
 
@@ -352,7 +352,7 @@ export default class CanvasView extends ModuleView<Canvas> {
     };
   }
 
-  getElBoxRect(el: HTMLElement, opts: ToWorldOption = {}): BoxRect {
+  getElBoxRect(el: HTMLElement, opts: GetBoxRectOptions = {}): BoxRect {
     const { module } = this;
     const { width, height, left, top } = getElRect(el);
     const frameView = getComponentView(el)?.frameView;
@@ -365,7 +365,7 @@ export default class CanvasView extends ModuleView<Canvas> {
     const xWithFrame = left + frameX + (canvasEl.scrollLeft + docScroll.x) * zoomMlt;
     const yWithFrame = top + frameY + (canvasEl.scrollTop + docScroll.y) * zoomMlt;
 
-    if (opts.toWorld) {
+    if (opts.toScreen) {
       const zoom = module.getZoomDecimal();
       const vwDelta = this.getViewportDelta();
       const x = xWithFrame * zoom + vwDelta.x || 0;

src/dom_components/model/Component.ts

@@ -174,6 +174,10 @@ export default class Component extends StyleableModel<ComponentProperties> {
     return this.get('content') ?? '';
   }
 
+  get toolbar() {
+    return this.get('toolbar') || [];
+  }
+
   /**
    * Hook method, called once the model is created
    */