redhotmagma-graphics-editor 1.28.0-beta.2 → 1.28.2

package/.babelrc

@@ -0,0 +1,23 @@
+{
+  "presets": [
+    "@babel/env",
+    "@babel/typescript",
+    "@babel/react"
+  ],
+  "plugins": [
+    "@babel/plugin-transform-async-to-generator",
+    "@babel/plugin-proposal-class-properties",
+    ["module-resolver", {
+      "root": ["./src"]
+    }]
+  ],
+  "env": {
+    "test": {
+      "presets": [
+        "@babel/env",
+        "@babel/typescript",
+        "@babel/react"
+      ]
+    }
+  }
+}

package/README.md

@@ -1,13 +1,6 @@
 # redhotmagma-graphics-editor
 
-## setup for development
-1. follow the "preparation", "install" and "start development" steps in frontend/README.md
-1. open the dev app in the browser: http://localhost:3002
-
-## development
-1. new features:
-    - consider adding a demo to the dev app
-    - write tests (if possible, interacting with the canvas element is not supported yet)
-1. CRs: 
-    - test the affected functionalities in the dev app
-    - write tests and adjust existing ones if needed
+## Setup for Development
+1. Install NodeJs `> 8.x`
+2. `npm install`
+3. `npm start`

package/package.json

@@ -1,13 +1,30 @@
 {
   "name": "redhotmagma-graphics-editor",
-  "version": "1.28.0-beta.2",
+  "version": "1.28.2",
   "license": "UNLICENSED",
   "private": false,
-  "main": "./index.js",
+  "main": "./lib/index.js",
+  "files": [
+    "lib",
+    "src",
+    "scripts",
+    ".babelrc"
+  ],
   "dependencies": {
+    "@babel/cli": "^7.13.14",
+    "@babel/core": "^7.13.14",
+    "@babel/plugin-proposal-class-properties": "^7.13.0",
+    "@babel/plugin-transform-async-to-generator": "^7.13.0",
     "@babel/polyfill": "^7.12.1",
-    "clsx": "^1.1.1",
+    "@babel/preset-env": "^7.13.12",
+    "@babel/preset-react": "^7.13.13",
+    "@babel/preset-typescript": "^7.13.0",
+    "@typescript-eslint/eslint-plugin": "^3.4.0",
+    "@typescript-eslint/parser": "^3.4.0",
+    "babel-loader": "^8.2.2",
+    "babel-plugin-module-resolver": "^4.1.0",
     "console-polyfill": "^0.3.0",
+    "cross-env": "^7.0.3",
     "css-element-queries": "^1.2.3",
     "lodash": "^4.17.21",
     "paper": "^0.12.15",
@@ -16,12 +33,54 @@
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
     "react-hot-loader": "^4.13.0",
+    "rimraf": "^3.0.2",
     "text-to-svg": "^3.1.5",
     "uuid": "^3.4.0"
   },
+  "devDependencies": {
+    "@material-ui/core": "^4.11.3",
+    "@types/jest": "^26.0.22",
+    "@types/lodash": "^4.14.168",
+    "@types/paper": "^0.12.3",
+    "babel-eslint": "^10.1.0",
+    "babel-jest": "^26.6.3",
+    "enzyme": "^3.11.0",
+    "eslint": "^6.3.0",
+    "eslint-config-prettier": "^4.3.0",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-prettier": "^3.3.1",
+    "eslint-plugin-react": "^7.23.1",
+    "eslint-plugin-react-hooks": "^2.5.1",
+    "husky": "^3.1.0",
+    "jest": "^26.6.3",
+    "jest-enzyme": "^7.1.2",
+    "jsdom": "^16.5.2",
+    "lint-staged": "^9.5.0",
+    "prettier": "^1.19.1",
+    "react-test-renderer": "^16.14.0",
+    "sinon": "^10.0.0",
+    "ts-jest": "^26.5.4",
+    "typescript": "^4.2.3",
+    "webpack": "^5.28.0",
+    "webpack-cli": "^4.6.0",
+    "webpack-dev-server": "^3.11.2"
+  },
   "peerDependencies": {
     "@material-ui/core": "*"
   },
+  "scripts": {
+    "start": "webpack serve --port 3002",
+    "package": "npm run package:clean && npm run package:compile && npm run package:after",
+    "package:clean": "rimraf ./lib",
+    "package:compile": "cross-env NODE_ENV=production babel ./src --out-dir ./lib --extensions .ts,.tsx,.js,.jsx",
+    "package:after": "node ./scripts/moveLibToPackageRoot.js",
+    "install": "npm run package",
+    "test": "jest",
+    "lint": "eslint ./ --ext .js,.jsx,.ts",
+    "lint-ci": "eslint ./ --ext .js,.jsx,.ts -c .eslintrc.ci.json --quiet",
+    "lint-fix": "eslint ./ --ext .js,.jsx,.ts --fix"
+  },
   "jest": {
     "roots": [
       "<rootDir>/src"
@@ -40,4 +99,4 @@
       "node"
     ]
   }
-}
+}

package/scripts/moveLibToPackageRoot.js

@@ -0,0 +1,41 @@
+const fs = require('fs');
+const path = require('path');
+const rimraf = require('rimraf');
+const { isDependency } = require('./utils/process');
+
+function walk(dir, cb, cbAfter) {
+  try {
+    const files = fs.readdirSync(dir);
+    for (const f of files) {
+      const cf = path.resolve(dir, f);
+      const s = fs.lstatSync(cf);
+      cb && cb(cf);
+      s.isDirectory() && walk(cf, cb, cbAfter);
+      cbAfter && cbAfter(cf);
+    }
+  } catch (e) {
+    return;
+  }
+}
+
+if (isDependency()) {
+  console.log('\x1b[37m\x1b[42m%s\x1b[0m', 'Moving content of lib into the root package directory');
+
+  const src = path.resolve(__dirname, '../', 'lib');
+  const dst = path.resolve(__dirname, '../');
+  walk(src, function(file) {
+    const relativePath = file.replace(src, '');
+    const tp = path.resolve(dst + relativePath);
+    if (fs.statSync(file).isFile()) {
+      fs.createReadStream(file).pipe(fs.createWriteStream(tp));
+    } else {
+      fs.mkdirSync(tp);
+    }
+  });
+
+  rimraf(src, function(err) {
+    if (err) {
+      console.log('Error occured while clearing the directory: ' + src, err);
+    }
+  });
+}

package/scripts/utils/process.js

@@ -0,0 +1,19 @@
+/**
+ * These utils are made to simplify querying process information for the node scripts.
+ *
+ * @author boda@redhotmagma.de
+ */
+
+/**
+ * Checks if the current installation process is a dependency installation
+ * @return {boolean}
+ */
+function isDependency() {
+  // if the path of the initial directory contains 'node_modules', it's probably installed as a dependency
+  const { INIT_CWD } = process.env;
+  return INIT_CWD.indexOf('node_modules') !== -1;
+}
+
+module.exports = {
+  isDependency,
+};

package/App.js

@@ -1,423 +0,0 @@
-"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 _TextEditorStateProvider = require("./Components/TextEditor/TextEditorStateProvider");
-
-var _Editor = _interopRequireDefault(require("./Components/Editor/Editor"));
-
-var _CanvasProvider = require("./CanvasInterface/CanvasProvider");
-
-var _FontSizeMin = require("./CanvasAdapters/PaperJs/Modifiers/FontSizeMin");
-
-var _CanvasRepository = require("./CanvasAdapters/PaperJs/CanvasRepository");
-
-var _EditorContainer = _interopRequireDefault(require("./Components/Editor/EditorContainer"));
-
-var _excluded = ["children"];
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
-
-function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
-
-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 _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 _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 _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; }
-
-console.warn('Do not use this App component directly! It was made only for development and demo purposes!');
-var canvasRepository = (0, _CanvasRepository.createCanvasRepository)();
-
-canvasRepository.onCreate = function (canvas) {
-  return console.log('Canvas is ready', canvas);
-}; // expose canvasRepository to window
-
-
-window.canvasRepository = canvasRepository;
-var canvases = {
-  c1: {
-    width: 100,
-    height: 80,
-    dpi: 300,
-    isMetric: true
-  },
-  c2: {
-    width: 300,
-    height: 600
-  }
-};
-var maskDataSamples = [{
-  id: 'iphone',
-  src: 'assets/iphone-mask.svg',
-  x: 0.5,
-  y: 0.5,
-  rotation: 0,
-  scaling: 1.5,
-  outlineColor: 'red',
-  relativeScaling: 0.5
-}, {
-  id: 'circle',
-  src: 'assets/circle-mask.svg',
-  x: 0.5,
-  y: 0.5,
-  rotation: 0,
-  scaling: 5,
-  relativeScaling: 1,
-  outlineColor: 'green'
-}, {
-  id: 'clip',
-  src: 'assets/clip-mask.svg',
-  x: 0.5,
-  y: 0.5,
-  rotation: 0,
-  scaling: 1,
-  relativeScaling: 1,
-  outlineColor: 'red'
-}];
-var fontToFileMap = {
-  'sans-serif': {
-    regular: '/fonts/Arcon-Regular.otf'
-  },
-  'Arial, Helvetica, sans-serif': {
-    regular: '/fonts/Arcon-Regular.otf',
-    bold: '/fonts/Arcon-Regular.otf'
-  }
-};
-var styles = {
-  demoWrapper: {
-    position: 'absolute',
-    top: 0,
-    right: 0,
-    background: 'yellow',
-    padding: 10
-  },
-  demoGroup: {
-    marginTop: 5
-  },
-  demoLabel: {
-    padding: '0 5px'
-  },
-  demoExtraContent: {
-    position: 'absolute',
-    top: 100,
-    fontSize: 20
-  }
-};
-
-var CustomEditorContainer = function CustomEditorContainer(_ref) {
-  var children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded);
-
-  return /*#__PURE__*/_react["default"].createElement(_EditorContainer["default"], props, /*#__PURE__*/_react["default"].createElement("div", {
-    style: styles.demoExtraContent
-  }, "This is how to add extra content inside the EditorContainer"), children);
-};
-
-var CanvasSelect = function CanvasSelect(_ref2) {
-  var onChange = _ref2.onChange;
-  return Object.keys(canvases).map(function (id, i) {
-    return /*#__PURE__*/_react["default"].createElement("button", {
-      key: i,
-      onClick: onChange,
-      value: id
-    }, id);
-  });
-};
-
-var MaskSelect = function MaskSelect(_ref3) {
-  var onChange = _ref3.onChange;
-  return /*#__PURE__*/_react["default"].createElement("select", {
-    name: "maskData",
-    onChange: onChange
-  }, /*#__PURE__*/_react["default"].createElement("option", {
-    value: ""
-  }, "Choose mask"), maskDataSamples.map(function (maskData, i) {
-    return /*#__PURE__*/_react["default"].createElement("option", {
-      key: i,
-      value: maskData.name
-    }, maskData.id);
-  }));
-};
-
-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), "state", {
-      canvasInstance: canvasRepository.requestCanvas('c1', canvases.c1)
-    });
-
-    _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]);
-      });
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "saveCanvasData", function () {
-      var canvasData = canvasRepository.getActiveCanvas().toObject(true, {
-        includeObjects: true
-      });
-
-      if (window.localStorage) {
-        localStorage.setItem('savedCanvasData', canvasData);
-        console.log('canvas saved!');
-      }
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "loadCanvasData", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
-      var canvasData;
-      return regeneratorRuntime.wrap(function _callee$(_context) {
-        while (1) {
-          switch (_context.prev = _context.next) {
-            case 0:
-              if (!window.localStorage) {
-                _context.next = 13;
-                break;
-              }
-
-              _context.prev = 1;
-              canvasData = JSON.parse(localStorage.getItem('savedCanvasData'));
-
-              if (!canvasData) {
-                _context.next = 7;
-                break;
-              }
-
-              _context.next = 6;
-              return canvasRepository.getActiveCanvas().fromObject(canvasData);
-
-            case 6:
-              console.log('canvas loaded!');
-
-            case 7:
-              _context.next = 13;
-              break;
-
-            case 9:
-              _context.prev = 9;
-              _context.t0 = _context["catch"](1);
-              console.error(_context.t0);
-              alert('Could not load data!');
-
-            case 13:
-            case "end":
-              return _context.stop();
-          }
-        }
-      }, _callee, null, [[1, 9]]);
-    })));
-
-    _defineProperty(_assertThisInitialized(_this), "setFontSizeMin", function () {
-      return (0, _FontSizeMin.applyFontSizeMin)(canvasRepository.getActiveCanvas(), 20);
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "clearCanvas", function () {
-      return canvasRepository.getActiveCanvas().clear();
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "switchCanvas", function (_ref5) {
-      var value = _ref5.target.value;
-
-      _this.setState({
-        canvasInstance: canvasRepository.requestCanvas(value, canvases[value])
-      });
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "screenshotToConsole", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
-      var screenshot;
-      return regeneratorRuntime.wrap(function _callee2$(_context2) {
-        while (1) {
-          switch (_context2.prev = _context2.next) {
-            case 0:
-              console.time('screenshot');
-              _context2.next = 3;
-              return canvasRepository.getActiveCanvas().getScreenshot(fontToFileMap);
-
-            case 3:
-              screenshot = _context2.sent;
-              console.log('Screenshot:', screenshot);
-              console.timeEnd('screenshot');
-
-            case 6:
-            case "end":
-              return _context2.stop();
-          }
-        }
-      }, _callee2);
-    })));
-
-    _defineProperty(_assertThisInitialized(_this), "screenshotsToConsole", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3() {
-      var elements;
-      return regeneratorRuntime.wrap(function _callee3$(_context3) {
-        while (1) {
-          switch (_context3.prev = _context3.next) {
-            case 0:
-              _context3.next = 2;
-              return canvasRepository.getActiveCanvas().getScreenshotsOfElements(fontToFileMap);
-
-            case 2:
-              elements = _context3.sent;
-              console.log(elements);
-
-            case 4:
-            case "end":
-              return _context3.stop();
-          }
-        }
-      }, _callee3);
-    })));
-
-    _defineProperty(_assertThisInitialized(_this), "onMaskSelected", /*#__PURE__*/function () {
-      var _ref8 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee4(_ref9) {
-        var value, maskHandler, maskData;
-        return regeneratorRuntime.wrap(function _callee4$(_context4) {
-          while (1) {
-            switch (_context4.prev = _context4.next) {
-              case 0:
-                value = _ref9.target.value;
-                maskHandler = canvasRepository.getActiveCanvas().getMaskHandler();
-
-                if (!value) {
-                  _context4.next = 6;
-                  break;
-                }
-
-                maskData = maskDataSamples.filter(function (_ref10) {
-                  var id = _ref10.id;
-                  return id === value;
-                })[0];
-                _context4.next = 6;
-                return canvasRepository.getActiveCanvas().useMask(maskData);
-
-              case 6:
-                maskHandler && maskHandler.dispose();
-
-              case 7:
-              case "end":
-                return _context4.stop();
-            }
-          }
-        }, _callee4);
-      }));
-
-      return function (_x) {
-        return _ref8.apply(this, arguments);
-      };
-    }());
-
-    return _this;
-  }
-
-  _createClass(App, [{
-    key: "render",
-    value: function render() {
-      return /*#__PURE__*/_react["default"].createElement(_reactHotLoader.AppContainer, null, /*#__PURE__*/_react["default"].createElement(_CanvasProvider.CanvasProvider, {
-        canvas: this.state.canvasInstance
-      }, /*#__PURE__*/_react["default"].createElement(_TextEditorStateProvider.TextEditorStateProvider, {
-        defaultStyle: {
-          fontSize: '16px',
-          color: {
-            value: 'rgb(247, 52, 41)',
-            identifier: '{"color": "red", "palette": "f73429"}'
-          }
-        }
-      }, /*#__PURE__*/_react["default"].createElement(_Editor["default"], {
-        upload: this.mockUploadFunction,
-        EditorContainer: CustomEditorContainer,
-        fillContainer: true
-      })), /*#__PURE__*/_react["default"].createElement("div", {
-        style: styles.demoWrapper
-      }, /*#__PURE__*/_react["default"].createElement("span", {
-        style: styles.demoLabel
-      }, "Demo features"), /*#__PURE__*/_react["default"].createElement("div", {
-        style: styles.demoGroup
-      }, /*#__PURE__*/_react["default"].createElement("span", {
-        style: styles.demoLabel
-      }, "Canvas repository"), /*#__PURE__*/_react["default"].createElement(CanvasSelect, {
-        onChange: this.switchCanvas
-      })), /*#__PURE__*/_react["default"].createElement("div", {
-        style: styles.demoGroup
-      }, /*#__PURE__*/_react["default"].createElement("button", {
-        onClick: this.saveCanvasData
-      }, "Save data"), /*#__PURE__*/_react["default"].createElement("button", {
-        onClick: this.loadCanvasData
-      }, "Load data"), /*#__PURE__*/_react["default"].createElement("button", {
-        onClick: this.clearCanvas
-      }, "Clear canvas")), /*#__PURE__*/_react["default"].createElement("div", {
-        style: styles.demoGroup
-      }, /*#__PURE__*/_react["default"].createElement("button", {
-        onClick: this.setFontSizeMin
-      }, "Set fontSizeMin to 20")), /*#__PURE__*/_react["default"].createElement("div", {
-        style: styles.demoGroup
-      }, /*#__PURE__*/_react["default"].createElement("button", {
-        onClick: this.screenshotToConsole
-      }, "Screenshot to console"), /*#__PURE__*/_react["default"].createElement("button", {
-        onClick: this.screenshotsToConsole
-      }, "Screenshots of Elements")), /*#__PURE__*/_react["default"].createElement("div", {
-        style: styles.demoGroup
-      }, /*#__PURE__*/_react["default"].createElement(MaskSelect, {
-        onChange: this.onMaskSelected
-      })))));
-    }
-  }]);
-
-  return App;
-}(_react["default"].Component);
-
-var _default = (0, _reactHotLoader.hot)(module)(App);
-
-exports["default"] = _default;