redhotmagma-graphics-editor 1.41.0 → 1.42.0

package/_demos/UsingRenderProps/App.js

@@ -1,97 +1,63 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
-var _reactHotLoader = require("react-hot-loader");
-
 var _PaperJs = require("../../CanvasAdapters/PaperJs");
-
 var _Editor = _interopRequireDefault(require("../../Components/Editor/Editor"));
-
 var _CanvasProvider = require("../../CanvasInterface/CanvasProvider");
-
 var _TextEditorStateProvider = require("../../Components/TextEditor/TextEditorStateProvider");
-
 var _excluded = ["components"];
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
-
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
 function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 var canvas = new _PaperJs.Canvas();
-
 var App = /*#__PURE__*/function (_React$Component) {
   _inherits(App, _React$Component);
-
   var _super = _createSuper(App);
-
   function App() {
     var _this;
-
     _classCallCheck(this, App);
-
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-
     _this = _super.call.apply(_super, [this].concat(args));
-
     _defineProperty(_assertThisInitialized(_this), "mockUploadFunction", function (files) {
       return new Promise(function (resolve, reject) {
         var reader = new FileReader();
-
         reader.onload = function () {
           var dataURL = reader.result;
           resolve([{
             src: dataURL
           }]);
         };
-
         reader.onerror = reject;
         reader.readAsDataURL(files[0]);
       });
     });
-
     return _this;
   }
-
   _createClass(App, [{
     key: "render",
     value: function render() {
-      return /*#__PURE__*/_react["default"].createElement(_reactHotLoader.AppContainer, null, /*#__PURE__*/_react["default"].createElement(_CanvasProvider.CanvasProvider, {
+      return /*#__PURE__*/_react["default"].createElement(_CanvasProvider.CanvasProvider, {
         canvas: canvas
       }, /*#__PURE__*/_react["default"].createElement(_TextEditorStateProvider.TextEditorStateProvider, {
         defaultStyle: {
@@ -108,21 +74,16 @@ var App = /*#__PURE__*/function (_React$Component) {
           return /*#__PURE__*/_react["default"].createElement(SelectionToolbox, {
             renderTextTools: function renderTextTools(_ref2) {
               var TextTools = _ref2.components.TextTools,
-                  props = _objectWithoutProperties(_ref2, _excluded);
-
+                props = _objectWithoutProperties(_ref2, _excluded);
               return /*#__PURE__*/_react["default"].createElement(TextTools, _extends({
                 fontSizeList: [3, 9, 27]
               }, props));
             }
           });
         }
-      }))));
+      })));
     }
   }]);
-
   return App;
 }(_react["default"].Component);
-
-var _default = (0, _reactHotLoader.hot)(module)(App);
-
-exports["default"] = _default;
+var _default = exports["default"] = App;

package/index.js

@@ -1,17 +1,13 @@
 "use strict";
 
 var _react = _interopRequireDefault(require("react"));
-
-var _reactDom = _interopRequireDefault(require("react-dom"));
-
+var _client = require("react-dom/client");
 var _App = _interopRequireDefault(require("./App"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 // demos
 //import App from './_demos/UsingRenderProps/App';
 //import App from './_demos/UsingExternalControls/App';
 // basic usage
 (function () {
-  _reactDom["default"].render( /*#__PURE__*/_react["default"].createElement(_App["default"], null), document.getElementById('root'));
+  (0, _client.createRoot)(document.getElementById('root')).render( /*#__PURE__*/_react["default"].createElement(_App["default"], null));
 })();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "redhotmagma-graphics-editor",
-  "version": "1.41.0",
+  "version": "1.42.0",
   "license": "UNLICENSED",
   "private": false,
   "main": "./index.js",
@@ -13,14 +13,13 @@
     "paper": "^0.12.17",
     "path-browserify": "^1.0.1",
     "prop-types": "^15.7.2",
-    "react": "^16.14.0",
-    "react-dom": "^16.14.0",
-    "react-hot-loader": "^4.13.0",
     "text-to-svg": "^3.1.5",
     "uuid": "^3.4.0"
   },
   "peerDependencies": {
-    "@material-ui/core": "*"
+    "@material-ui/core": ">=4.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "jest": {
     "roots": [
@@ -39,6 +38,5 @@
       "json",
       "node"
     ]
-  },
-  "readme": "# redhotmagma-graphics-editor\n\n## setup for development\n1. follow the \"preparation\", \"install\" and \"start development\" steps in frontend/README.md\n1. open the dev app in the browser: http://localhost:3002\n\n## development\n1. new features:\n    - consider adding a demo to the dev app\n    - write tests (if possible, interacting with the canvas element is not supported yet)\n1. CRs: \n    - test the affected functionalities in the dev app\n    - write tests and adjust existing ones if needed\n"
+  }
 }

package/src/App.js

@@ -5,7 +5,6 @@
 // It was made only for development and demo purposes!
 
 import React from 'react';
-import { AppContainer, hot } from 'react-hot-loader';
 
 import { TextEditorStateProvider } from './Components/TextEditor/TextEditorStateProvider';
 import Editor from './Components/Editor/Editor';
@@ -220,45 +219,43 @@ class App extends React.Component {
 
   render() {
     return (
-      <AppContainer>
-        <CanvasProvider canvas={this.state.canvasInstance}>
-          <TextEditorStateProvider
-            defaultStyle={{
-              fontSize: '16px',
-              color: {
-                value: 'rgb(247, 52, 41)',
-                identifier: '{"color": "red", "palette": "f73429"}',
-              },
-            }}
-          >
-            <Editor upload={this.mockUploadFunction} EditorContainer={CustomEditorContainer} fillContainer />
-          </TextEditorStateProvider>
-          <div style={styles.demoWrapper}>
-            <span style={styles.demoLabel}>Demo features</span>
-            <div style={styles.demoGroup}>
-              <span style={styles.demoLabel}>Canvas repository</span>
-              <CanvasSelect onChange={this.switchCanvas} />
-            </div>
-            <div style={styles.demoGroup}>
-              <button onClick={this.saveCanvasData}>Save data</button>
-              <button onClick={this.loadCanvasData}>Load data</button>
-              <button onClick={this.clearCanvas}>Clear canvas</button>
-            </div>
-            <div style={styles.demoGroup}>
-              <button onClick={this.setFontSizeMin}>Set fontSizeMin to 20</button>
-            </div>
-            <div style={styles.demoGroup}>
-              <button onClick={this.screenshotToConsole}>Screenshot to console</button>
-              <button onClick={this.screenshotsToConsole}>Screenshots of Elements</button>
-            </div>
-            <div style={styles.demoGroup}>
-              <MaskSelect onChange={this.onMaskSelected} />
-            </div>
+      <CanvasProvider canvas={this.state.canvasInstance}>
+        <TextEditorStateProvider
+          defaultStyle={{
+            fontSize: '16px',
+            color: {
+              value: 'rgb(247, 52, 41)',
+              identifier: '{"color": "red", "palette": "f73429"}',
+            },
+          }}
+        >
+          <Editor upload={this.mockUploadFunction} EditorContainer={CustomEditorContainer} fillContainer />
+        </TextEditorStateProvider>
+        <div style={styles.demoWrapper}>
+          <span style={styles.demoLabel}>Demo features</span>
+          <div style={styles.demoGroup}>
+            <span style={styles.demoLabel}>Canvas repository</span>
+            <CanvasSelect onChange={this.switchCanvas} />
           </div>
-        </CanvasProvider>
-      </AppContainer>
+          <div style={styles.demoGroup}>
+            <button onClick={this.saveCanvasData}>Save data</button>
+            <button onClick={this.loadCanvasData}>Load data</button>
+            <button onClick={this.clearCanvas}>Clear canvas</button>
+          </div>
+          <div style={styles.demoGroup}>
+            <button onClick={this.setFontSizeMin}>Set fontSizeMin to 20</button>
+          </div>
+          <div style={styles.demoGroup}>
+            <button onClick={this.screenshotToConsole}>Screenshot to console</button>
+            <button onClick={this.screenshotsToConsole}>Screenshots of Elements</button>
+          </div>
+          <div style={styles.demoGroup}>
+            <MaskSelect onChange={this.onMaskSelected} />
+          </div>
+        </div>
+      </CanvasProvider>
     );
   }
 }
 
-export default hot(module)(App);
+export default App;

package/src/CanvasAdapters/PaperJs/Canvas.ts

@@ -10,6 +10,7 @@ import { useMask } from './Utils/UseMask';
 import { transformTextToPath } from './Utils/TextToSVGRepository';
 import { removePlaceholders } from './Utils/HTML2Paper';
 import { fixSvgExportResult, prepareSvgStr, wrapWithViewGroup } from './Utils/SVGfix';
+import { useColorLayer } from './Utils/UseColorLayer';
 
 const logger = new Logger('Canvas');
 
@@ -19,6 +20,7 @@ export class Canvas extends AbstractCanvas {
   // prevents dragging out the object (by default lets dragging only up to the 2/3 of the object width)
   protected _boundTolerance: number = 1 / 2 - 2 / 3;
   protected _maskHandler: any | undefined = undefined;
+  protected _colorOverlay: any | undefined = undefined;
 
   setBoundTolerance(value: number) {
     this._boundTolerance = value;
@@ -156,6 +158,15 @@ export class Canvas extends AbstractCanvas {
     return this._maskHandler;
   }
 
+  useColorOverlay(colorLayerData) {
+    this._colorOverlay = useColorLayer(this._project, colorLayerData);
+    return this._colorOverlay;
+  }
+
+  getColorOverlay() {
+    return this._colorOverlay;
+  }
+
   onMouseDown(event) {
     const { point } = event;
     const hitResult = this._project.hitTest(point);

package/src/CanvasAdapters/PaperJs/Utils/UseColorLayer.js

@@ -0,0 +1,56 @@
+import paper from 'paper';
+
+export const useColorLayer = (project, initialColorLayerData) => {
+  const designerLayer = project.layers.designerLayer;
+  let colorLayer;
+
+  if (!designerLayer) {
+    console.error('Missing designerLayer!');
+    return;
+  }
+
+  const init = colorLayerData => {
+    project.layers.colorLayer?.remove();
+    const color = colorLayerData?.color;
+    if (!color) {
+      return;
+    }
+    const path = new paper.Path.Rectangle(project.layers.designerLayer.view.bounds);
+    path.fillColor = color;
+    colorLayer = new paper.Layer({
+      name: 'colorLayer',
+      children: [path],
+      locked: true,
+    });
+    colorLayer.blendMode = 'source-in';
+    project.addLayer(colorLayer);
+  };
+
+  const toggle = on => {
+    if (!colorLayer) {
+      return;
+    }
+    const onOrig = colorLayer.visible;
+    colorLayer.visible = on;
+    project.view.update();
+    return () => {
+      if (onOrig !== on) {
+        colorLayer.visible = onOrig;
+        project.view.update();
+      }
+    };
+  };
+
+  const dispose = () => {
+    colorLayer?.remove();
+    colorLayer = null;
+  };
+
+  init(initialColorLayerData);
+
+  return {
+    init,
+    toggle,
+    dispose,
+  };
+};

package/src/Components/InlineToolbox/InlineToolbox.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { get } from 'lodash';
+import get from 'lodash/get';
 import withStyles from '@material-ui/core/styles/withStyles';
 
 import ManipulableContainer from '../ManipulableContainer';
@@ -29,7 +29,7 @@ class InlineToolBox extends React.Component {
   };
 
   static defaultProps = {
-    ContainerComponent: React.Fragment,
+    ContainerComponent: ({ children }) => <>{children}</>,
   };
 
   state = {

package/src/Components/SelectionToolbox/TextTools.js

@@ -128,7 +128,7 @@ export class TextTools extends React.Component {
       resetDefaultStyle();
     }
     const colorChanged = currentStyle.color.value !== prevProps.textEditorState.currentStyle.color.value;
-    if (colorChanged && editorContent.innerText.trim() === '') {
+    if (colorChanged && editorContent && editorContent.innerText && editorContent.innerText.trim() === '') {
       updateDefaultStyle({
         color: currentStyle.color,
       });

package/src/_demos/UsingExternalControls/App.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import { AppContainer, hot } from 'react-hot-loader';
 
 import { Canvas } from '../../CanvasAdapters/PaperJs';
 import Editor from '../../Components/Editor/Editor';
@@ -24,34 +23,32 @@ class App extends React.Component {
 
   render() {
     return (
-      <AppContainer>
-        <CanvasProvider canvas={canvas}>
-          <TextEditorStateProvider defaultStyle={{ fontSize: '16px' }}>
-            <div style={{ position: 'absolute', top: 100, left: 0, width: 600, height: 200 }}>
-              <Editor
-                canvasSize={{ width: 3000, height: 1000 }}
-                upload={this.mockUploadFunction}
-                renderSelectionToolbox={() => null}
-              />
-            </div>
-            <div
-              style={{
-                position: 'absolute',
-                top: '50%',
-                transform: 'translateY(-50%)',
-                right: 0,
-                width: 500,
-              }}
-            >
-              <CanvasStateProvider canvas={canvas}>
-                <SelectionToolbox />
-              </CanvasStateProvider>
-            </div>
-          </TextEditorStateProvider>
-        </CanvasProvider>
-      </AppContainer>
+      <CanvasProvider canvas={canvas}>
+        <TextEditorStateProvider defaultStyle={{ fontSize: '16px' }}>
+          <div style={{ position: 'absolute', top: 100, left: 0, width: 600, height: 200 }}>
+            <Editor
+              canvasSize={{ width: 3000, height: 1000 }}
+              upload={this.mockUploadFunction}
+              renderSelectionToolbox={() => null}
+            />
+          </div>
+          <div
+            style={{
+              position: 'absolute',
+              top: '50%',
+              transform: 'translateY(-50%)',
+              right: 0,
+              width: 500,
+            }}
+          >
+            <CanvasStateProvider canvas={canvas}>
+              <SelectionToolbox />
+            </CanvasStateProvider>
+          </div>
+        </TextEditorStateProvider>
+      </CanvasProvider>
     );
   }
 }
 
-export default hot(module)(App);
+export default App;

package/src/_demos/UsingRenderProps/App.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import { AppContainer, hot } from 'react-hot-loader';
 
 import { Canvas } from '../../CanvasAdapters/PaperJs';
 import Editor from '../../Components/Editor/Editor';
@@ -23,25 +22,23 @@ class App extends React.Component {
 
   render() {
     return (
-      <AppContainer>
-        <CanvasProvider canvas={canvas}>
-          <TextEditorStateProvider defaultStyle={{ fontSize: '16px' }}>
-            <Editor
-              canvasSize={{ width: 1000, height: 800 }}
-              upload={this.mockUploadFunction}
-              renderSelectionToolbox={({ components: { SelectionToolbox } }) => (
-                <SelectionToolbox
-                  renderTextTools={({ components: { TextTools }, ...props }) => (
-                    <TextTools fontSizeList={[3, 9, 27]} {...props} />
-                  )}
-                />
-              )}
-            />
-          </TextEditorStateProvider>
-        </CanvasProvider>
-      </AppContainer>
+      <CanvasProvider canvas={canvas}>
+        <TextEditorStateProvider defaultStyle={{ fontSize: '16px' }}>
+          <Editor
+            canvasSize={{ width: 1000, height: 800 }}
+            upload={this.mockUploadFunction}
+            renderSelectionToolbox={({ components: { SelectionToolbox } }) => (
+              <SelectionToolbox
+                renderTextTools={({ components: { TextTools }, ...props }) => (
+                  <TextTools fontSizeList={[3, 9, 27]} {...props} />
+                )}
+              />
+            )}
+          />
+        </TextEditorStateProvider>
+      </CanvasProvider>
     );
   }
 }
 
-export default hot(module)(App);
+export default App;

package/src/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 
 // demos
 //import App from './_demos/UsingRenderProps/App';
@@ -9,5 +9,5 @@ import ReactDOM from 'react-dom';
 import App from './App';
 
 (() => {
-  ReactDOM.render(<App />, document.getElementById('root'));
+  createRoot(document.getElementById('root')).render(<App />);
 })();