redhotmagma-graphics-editor 1.26.5 → 1.27.2

package/package.json

@@ -1,14 +1,11 @@
 {
   "name": "redhotmagma-graphics-editor",
-  "version": "1.26.5",
+  "version": "1.27.2",
   "license": "UNLICENSED",
   "private": false,
   "main": "./lib/index.js",
   "files": [
-    "CanvasAdapters",
-    "CanvasInterface",
-    "Components",
-    "Utils",
+    "lib",
     "src",
     "scripts",
     ".babelrc"

package/src/CanvasAdapters/PaperJs/Canvas.ts

@@ -88,6 +88,7 @@ export class Canvas extends AbstractCanvas {
     this._view.center = new paper.Point(this._view.size.divide(2));
     this._view.viewSize = size;
     this._maskHandler && this._maskHandler.updateOutline();
+    this.updateObjectConstraints();
   }
 
   saveViewBox() {
@@ -174,7 +175,7 @@ export class Canvas extends AbstractCanvas {
   }
 
   onMouseDrag(event) {
-    if (this.selectedObject) {
+    if (this.selectedObject && !this.selectedObject.locked && !this.selectedObject.autoFit) {
       const { x: dx, y: dy } = event.delta;
       const o = this.selectedObject;
       o.x += dx;

package/src/CanvasAdapters/PaperJs/Objects/Text.ts

@@ -1,4 +1,5 @@
 import debounce from 'lodash/debounce';
+import isInteger from 'lodash/isInteger';
 import { CanvasObject } from './CanvasObject';
 import { TextInterface } from '../../../CanvasInterface/Objects/Text';
 import { Logger } from '../../../Utils/Logger';
@@ -40,7 +41,10 @@ export class Text extends CanvasObject implements TextInterface {
     const scaling = this.scaling;
     if (scaling !== 1) {
       this._scaling = 1;
-      this.fontSize = Math.floor(this._fontSize * scaling);
+      const fontSize = Math.floor(this._fontSize * scaling);
+      if (isInteger(fontSize)) {
+        this.fontSize = fontSize;
+      }
     }
   }, 500);
 
@@ -86,6 +90,9 @@ export class Text extends CanvasObject implements TextInterface {
     if (!fontSize) {
       throw new Error('The given value is not a number!');
     }
+    if (fontSize === this._fontSize) {
+      return;
+    }
     this._fontSize = Math.max(this._fontSizeMin, fontSize);
     this.build();
     this.triggerChangeEvent(prevState);

package/src/CanvasInterface/Canvas.ts

@@ -166,6 +166,12 @@ export abstract class AbstractCanvas {
     return this;
   }
 
+  updateObjectConstraints(): void {
+    for (const o of this.objects) {
+      o.updateConstraints();
+    }
+  }
+
   update() {
     return this;
   }
@@ -198,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

@@ -32,7 +32,11 @@ export abstract class AbstractCanvasObject {
   // technical properties
   protected _wrappedObject: any = null;
   protected _selected = false;
+  protected _locked = false;
+  protected _autoFit = false;
   protected _grabbed = false;
+  protected _activeAction = '';
+  protected _userData = {};
   protected _canvas: AbstractCanvas = null;
   protected _observable: Observable = new Observable(this);
 
@@ -41,6 +45,7 @@ export abstract class AbstractCanvasObject {
 
   constructor(options?: any) {
     this.initOptions(options);
+    this._observable.on(CanvasObjectEvents.OnChange, this.updateConstraints.bind(this));
   }
 
   initOptions(options?: any) {
@@ -75,6 +80,9 @@ export abstract class AbstractCanvasObject {
   }
 
   set x(x: number) {
+    if (x === this._x) {
+      return;
+    }
     this._x = x;
     this.setPosition(this._x, this._y);
     this._observable.triggerEvent(CanvasObjectEvents.OnChange);
@@ -84,7 +92,10 @@ export abstract class AbstractCanvasObject {
     return this._x;
   }
 
-  set y(y: number): AbstractCanvasObject {
+  set y(y: number) {
+    if (y === this._y) {
+      return;
+    }
     this._y = y;
     this.setPosition(this._x, this._y);
     this._observable.triggerEvent(CanvasObjectEvents.OnChange);
@@ -95,7 +106,11 @@ export abstract class AbstractCanvasObject {
   }
 
   set rotation(rotation: number) {
-    this._rotation = (360 + rotation) % 360;
+    const rot = (360 + rotation) % 360;
+    if (rot === this._rotation) {
+      return;
+    }
+    this._rotation = rot;
     this.setRotation(this._rotation);
     this._observable.triggerEvent(CanvasObjectEvents.OnChange);
   }
@@ -105,6 +120,9 @@ export abstract class AbstractCanvasObject {
   }
 
   set scaling(scaling: number) {
+    if (scaling === this._scaling || !Number.isFinite(scaling)) {
+      return;
+    }
     this._scaling = scaling;
     this.setScalingWithFactor(scaling);
     this._observable.triggerEvent(CanvasObjectEvents.OnChange);
@@ -116,7 +134,6 @@ export abstract class AbstractCanvasObject {
 
   set wrappedObject(object: any) {
     this._wrappedObject = object;
-    //this.initOptions(this.getOptionsFromWrappedObject());
     this.setOptionsFromObject(this.toObject());
     this.initObjectEvents();
   }
@@ -140,6 +157,33 @@ export abstract class AbstractCanvasObject {
     return this._selected;
   }
 
+  set locked(locked: boolean) {
+    this._locked = locked;
+    this._observable.triggerEvent(CanvasObjectEvents.OnChange);
+  }
+
+  get locked(): boolean {
+    return this._locked;
+  }
+
+  set autoFit(autoFit: boolean) {
+    this._autoFit = autoFit;
+    this._observable.triggerEvent(CanvasObjectEvents.OnChange);
+  }
+
+  get autoFit(): boolean {
+    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);
@@ -149,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;
   }
@@ -183,6 +236,8 @@ export abstract class AbstractCanvasObject {
 
   abstract setSelected(selected: boolean): void;
 
+  abstract setLocked(locked: boolean): void;
+
   abstract initObjectEvents(): void;
 
   abstract getTransformedRect(): any;
@@ -202,13 +257,15 @@ export abstract class AbstractCanvasObject {
   }
 
   getState() {
-    const { selected, grabbed, isFirst, isLast } = this;
+    const { selected, grabbed, isFirst, isLast, locked, autoFit } = this;
     return {
       ...this.toObject(),
       selected,
       grabbed,
       isFirst,
       isLast,
+      locked,
+      autoFit,
     };
   }
 
@@ -232,13 +289,16 @@ export abstract class AbstractCanvasObject {
   }
 
   toObject(includeWrappedObject = false) {
-    const { type, x, y, rotation, scaling, uuid } = this;
+    const { type, x, y, rotation, scaling, locked, autoFit, userData, uuid } = this;
     const obj = {
       type,
       x,
       y,
       rotation,
       scaling,
+      locked,
+      autoFit,
+      userData,
       uuid,
     };
     if (includeWrappedObject) {
@@ -306,4 +366,8 @@ export abstract class AbstractCanvasObject {
       height: oh * scaling,
     };
   }
+
+  updateConstraints() {
+    this.autoFit && this.fitCanvas(true, true);
+  }
 }

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();
 
@@ -263,26 +269,34 @@ class InlineToolBox extends React.Component {
         },
       });
     }
+    if (!selectedObject) {
+      return null;
+    }
     switch (positionName) {
       case 'topRight':
         return (
-          <InlineToolboxButton
-            style={{
-              background: 'red',
-            }}
-            onTouchStart={onRotationChange}
-            onMouseDown={onRotationChange}
-          />
+          !selectedObject.locked && (
+            <InlineToolboxButton
+              style={{
+                background: 'red',
+              }}
+              onTouchStart={onRotationChange}
+              onMouseDown={onRotationChange}
+            />
+          )
         );
       case 'bottomRight':
         return (
-          <InlineToolboxButton
-            style={{
-              background: 'green',
-            }}
-            onTouchStart={onScalingChange}
-            onMouseDown={onScalingChange}
-          />
+          !selectedObject.locked &&
+          !selectedObject.autoFit && (
+            <InlineToolboxButton
+              style={{
+                background: 'green',
+              }}
+              onTouchStart={onScalingChange}
+              onMouseDown={onScalingChange}
+            />
+          )
         );
       case 'bottomLeft':
         return (

package/src/Components/SelectionToolbox/SelectionToolbox.js

@@ -72,6 +72,22 @@ export class SelectionToolbox extends React.Component {
     }
   };
 
+  onLockChange = evt => {
+    const { canvas } = this.props;
+    const { selectedObject } = canvas;
+    if (selectedObject) {
+      selectedObject.locked = evt.target.checked;
+    }
+  };
+
+  onAutoFitChange = evt => {
+    const { canvas } = this.props;
+    const { selectedObject } = canvas;
+    if (selectedObject) {
+      selectedObject.autoFit = evt.target.checked;
+    }
+  };
+
   renderObjectTools(renderObj) {
     const { renderObjectTools } = this.props;
     if (renderObjectTools) {
@@ -85,6 +101,8 @@ export class SelectionToolbox extends React.Component {
       onScalingChange,
       onMoveUpClick,
       onMoveDownClick,
+      onLockChange,
+      onAutoFitChange,
     } = renderObj;
     return (
       <React.Fragment>
@@ -108,6 +126,28 @@ export class SelectionToolbox extends React.Component {
             Down
           </button>
         </ToolboxRow>
+        <ToolboxRow>
+          <label htmlFor="lock">
+            Lock element
+            <input
+              type="checkbox"
+              id="lock"
+              name="autoFit"
+              checked={selectedObject.locked}
+              onChange={onLockChange}
+            />
+          </label>
+          <label htmlFor="autoFit">
+            Auto fit
+            <input
+              type="checkbox"
+              id="autoFit"
+              name="autoFit"
+              checked={selectedObject.autoFit}
+              onChange={onAutoFitChange}
+            />
+          </label>
+        </ToolboxRow>
       </React.Fragment>
     );
   }
@@ -127,7 +167,16 @@ export class SelectionToolbox extends React.Component {
 
   render() {
     logger.log('render SelectionToolbox');
-    const { props, onRotationChange, onScalingChange, onMoveUpClick, onMoveDownClick, state } = this;
+    const {
+      props,
+      onRotationChange,
+      onScalingChange,
+      onMoveUpClick,
+      onMoveDownClick,
+      onLockChange,
+      onAutoFitChange,
+      state,
+    } = this;
     const { children, selectedObject, canvas, classes } = props;
     if (selectedObject) {
       if (typeof children === 'function') {
@@ -140,6 +189,8 @@ export class SelectionToolbox extends React.Component {
           onScalingChange,
           onMoveUpClick,
           onMoveDownClick,
+          onLockChange,
+          onAutoFitChange,
           components: {
             ToolboxContainer,
             ToolboxRow,
@@ -158,6 +209,8 @@ export class SelectionToolbox extends React.Component {
             onScalingChange,
             onMoveUpClick,
             onMoveDownClick,
+            onLockChange,
+            onAutoFitChange,
             components: {
               ToolboxRow,
             },