redhotmagma-graphics-editor 1.27.1 → 1.27.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "redhotmagma-graphics-editor",
-  "version": "1.27.1",
+  "version": "1.27.2",
   "license": "UNLICENSED",
   "private": false,
   "main": "./lib/index.js",

package/src/CanvasInterface/Canvas.ts

@@ -204,9 +204,10 @@ export abstract class AbstractCanvas {
   }
 
   getState(): any {
-    const { selectedObject } = this;
+    const { selectedObject, size } = this;
     return {
       selectedObject: selectedObject ? selectedObject.getState() : null,
+      size,
     };
   }
 

package/src/CanvasInterface/Objects/CanvasObject.ts

@@ -35,6 +35,8 @@ export abstract class AbstractCanvasObject {
   protected _locked = false;
   protected _autoFit = false;
   protected _grabbed = false;
+  protected _activeAction = '';
+  protected _userData = {};
   protected _canvas: AbstractCanvas = null;
   protected _observable: Observable = new Observable(this);
 
@@ -173,6 +175,15 @@ export abstract class AbstractCanvasObject {
     return this._autoFit;
   }
 
+  get userData(): Record<string, unknown> {
+    return this._userData;
+  }
+
+  set userData(userDataObject: Record<string, unknown>) {
+    this._userData = userDataObject;
+    this._observable.triggerEvent(CanvasObjectEvents.OnChange);
+  }
+
   set grabbed(grabbed) {
     this._grabbed = grabbed;
     this._observable.triggerEvent(CanvasObjectEvents.OnChange);
@@ -182,6 +193,15 @@ export abstract class AbstractCanvasObject {
     return this._grabbed;
   }
 
+  set activeAction(action: string) {
+    this._activeAction = action;
+    this._observable.triggerEvent(CanvasObjectEvents.OnChange);
+  }
+
+  get activeAction(): string {
+    return this._activeAction;
+  }
+
   set canvas(canvas: AbstractCanvas) {
     this._canvas = canvas;
   }
@@ -269,7 +289,7 @@ export abstract class AbstractCanvasObject {
   }
 
   toObject(includeWrappedObject = false) {
-    const { type, x, y, rotation, scaling, locked, autoFit, uuid } = this;
+    const { type, x, y, rotation, scaling, locked, autoFit, userData, uuid } = this;
     const obj = {
       type,
       x,
@@ -278,6 +298,7 @@ export abstract class AbstractCanvasObject {
       scaling,
       locked,
       autoFit,
+      userData,
       uuid,
     };
     if (includeWrappedObject) {

package/src/Components/Editor/Editor.js

@@ -38,6 +38,7 @@ export class Editor extends React.Component {
     canvas: PropTypes.instanceOf(AbstractCanvas).isRequired,
     classes: PropTypes.object.isRequired,
     containerClassName: PropTypes.string,
+    renderInCanvasContainer: PropTypes.func,
   };
 
   static defaultProps = {
@@ -163,6 +164,7 @@ export class Editor extends React.Component {
       Rulers,
       SelectionToolbox,
       StandardToolbox,
+      renderInCanvasContainer,
     } = props;
     if (typeof children === 'function') {
       return children({
@@ -222,6 +224,7 @@ export class Editor extends React.Component {
                   Rulers,
                 },
               })}
+              {renderInCanvasContainer && renderInCanvasContainer()}
             </CanvasContainer>
           </EditorContainer>
           {this.renderSelectionToolbox({

package/src/Components/InlineToolbox/InlineToolbox.js

@@ -75,6 +75,8 @@ class InlineToolBox extends React.Component {
       return;
     }
 
+    selectedObject.activeAction = 'scale';
+
     const clientPosition = this.getClientPositionFromEvent(evt);
 
     let iDistance = selectedObject.getDistanceToCenter(clientPosition.x, clientPosition.y);
@@ -99,6 +101,7 @@ class InlineToolBox extends React.Component {
       this.updateToolbarTransform();
     };
     const mouseUp = evt => {
+      selectedObject.activeAction = '';
       const clientPosition = this.getClientPositionFromEvent(evt);
       evt.preventDefault();
       document.removeEventListener(clientPosition.isTouchEvent ? 'touchmove' : 'mousemove', mouseMove, {
@@ -118,6 +121,8 @@ class InlineToolBox extends React.Component {
       return;
     }
 
+    selectedObject.activeAction = 'rotate';
+
     const clientPosition = this.getClientPositionFromEvent(evt);
 
     // const { canvasPosition } = this.props;
@@ -140,6 +145,7 @@ class InlineToolBox extends React.Component {
       this.updateToolbarTransform();
     };
     const mouseUp = evt => {
+      selectedObject.activeAction = '';
       const clientPosition = this.getClientPositionFromEvent(evt);
       evt.preventDefault();