redhotmagma-visualization 1.27.3-beta.8 → 1.27.6

package/README.md

@@ -1,13 +1,6 @@
 # redhotmagma-visualization
 
-## 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:3003
-
-## 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/babel.config.js

@@ -0,0 +1,41 @@
+module.exports = function(api) {
+  const presets = [
+    "@babel/preset-env",
+    "@babel/preset-typescript",
+    "@babel/preset-react" // Transpile React components to JavaScript
+  ];
+
+  const plugins = [
+    "@babel/plugin-proposal-class-properties",
+    "@babel/plugin-syntax-dynamic-import",
+
+    [
+      "module-resolver",
+      {
+        root: ["./src"]
+      }
+    ]
+  ];
+
+  const ignore = [];
+
+  if (api.env("development")) {
+    plugins.push("react-hot-loader/babel"); // Enables React code to work with HMR.
+    api.cache(true);
+  } else if (api.env("production")) {
+    ignore.push(
+      "**/__tests__", // ignore the whole test directory
+      "**/*.test.js", // ignore test files only
+      "**/__mocks__"
+    );
+    api.cache(false);
+  } else {
+    api.cache(true);
+  }
+
+  return {
+    presets,
+    plugins,
+    ignore
+  };
+};

package/package.json

@@ -1,26 +1,84 @@
 {
   "name": "redhotmagma-visualization",
-  "version": "1.27.3-beta.8",
+  "version": "1.27.6",
   "license": "UNLICENSED",
   "private": false,
-  "main": "./index.js",
+  "main": "./lib/index.js",
+  "files": [
+    "lib",
+    "src",
+    "babel.config.js",
+    "tsconfig.json",
+    "scripts"
+  ],
   "dependencies": {
+    "@babel/cli": "^7.13.10",
+    "@babel/core": "^7.13.14",
+    "@babel/plugin-proposal-class-properties": "^7.13.0",
+    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+    "@babel/plugin-transform-async-to-generator": "^7.13.0",
     "@babel/polyfill": "^7.12.1",
-    "@configuratorware/scripts": "1.27.3-beta.8",
+    "@babel/preset-env": "^7.13.12",
+    "@babel/preset-react": "^7.13.13",
+    "@babel/preset-typescript": "^7.13.0",
     "@tweenjs/tween.js": "^17.6.0",
+    "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",
     "prop-types": "^15.7.2",
-    "react": "^16.14.0",
-    "react-dom": "^16.14.0",
+    "rimraf": "^3.0.2",
     "three": "^0.127.0",
     "uuid": "^3.4.0"
   },
+  "devDependencies": {
+    "@material-ui/core": "^4.11.*",
+    "@types/jest": "^26.0.22",
+    "@types/lodash": "^4.14.168",
+    "babel-eslint": "^10.0.1",
+    "babel-jest": "^26.6.3",
+    "babel-loader": "^8.2.2",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.6",
+    "eslint": "^5.16.0",
+    "eslint-config-prettier": "^4.3.0",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-prettier": "^3.3.1",
+    "eslint-plugin-react": "^7.23.1",
+    "eslint-plugin-react-hooks": "^2.5.1",
+    "file-loader": "^6.2.0",
+    "jest": "^26.6.3",
+    "jest-enzyme": "^7.1.2",
+    "jsdom": "^16.5.2",
+    "prettier": "1.19.1",
+    "react": "^16.14.0",
+    "react-dom": "^16.14.0",
+    "react-hot-loader": "^4.13.0",
+    "react-test-renderer": "^16.14.0",
+    "sinon": "^10.0.0",
+    "ts-jest": "^26.5.4",
+    "typescript": "^4.2.3",
+    "url-loader": "^4.1.1",
+    "webpack": "^5.28.0",
+    "webpack-cli": "^4.6.0",
+    "webpack-dev-server": "^3.11.2"
+  },
   "peerDependencies": {
-    "lodash": "^4.17.21"
+    "react": "*",
+    "react-dom": "*"
   },
   "scripts": {
-    "copy-public": "node ./scripts/cpPublic.js",
-    "postinstall": "npm run copy-public"
+    "start": "webpack serve --port 3003 --host 0.0.0.0",
+    "package": "npm run package:clean && npm run package:compile && npm run package:copy && 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:copy": "node ./scripts/cpPath.js ./src ./lib \"\\.(scss|eot|svg|ttf|woff|woff2|png|jpg)$\"",
+    "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"
   }
-}
+}

package/scripts/cpPath.js

@@ -0,0 +1,151 @@
+/**
+ * This script is created to copy specific files with their folder structure
+ * usage: node copyWithFolder.js src dst [filterRegExp]
+ * @author boda@redhotmagma.de
+ */
+
+const fs = require("fs");
+
+let src = null;
+let dst = null;
+let reg = null;
+
+process.argv.forEach(function(val, index) {
+  switch (index) {
+    case 2:
+      src = val;
+      break;
+    case 3:
+      dst = val;
+      break;
+    case 4:
+      reg = new RegExp(val);
+  }
+});
+
+if (!src || !fs.existsSync(src)) {
+  throw new Error("src must be an existing directory");
+}
+if (!dst || !fs.existsSync(dst)) {
+  throw new Error("dst must be an existing directory");
+}
+
+function walk(path, cb) {
+  try {
+    const files = fs.readdirSync(path);
+    for (const f of files) {
+      const cf = path + "/" + f;
+      const s = fs.lstatSync(cf);
+      cb(cf);
+      s.isDirectory() && walk(cf, cb);
+    }
+  } catch (e) {
+    return;
+  }
+}
+
+function copyWithParent(src, dst) {
+  if (typeof dst === "function") {
+    dst = dst(src);
+  }
+  createDirDeep(dst.replace(/\/[^/]+$/, ""));
+  console.log(src + " -> " + dst);
+  const fileExt = src.replace(/.+\.([\w]+)$/, "$1");
+  switch (fileExt) {
+    case "scss":
+      fs.readFile(src, "utf8", function read(err, data) {
+        if (err) {
+          throw err;
+        }
+        const modifiedContent = prepareSassFile(src, data);
+        fs.writeFile(dst, modifiedContent, "utf8", function write(err) {
+          if (err) {
+            throw err;
+          }
+        });
+      });
+      break;
+    default:
+      fs.createReadStream(src).pipe(fs.createWriteStream(dst));
+  }
+}
+
+function prepareSassFile(src, content) {
+  if (!content || !content.match) {
+    console.log("Strange file: " + src);
+    return content;
+  }
+  const replaceImports = content.match(/@import ['"][^.~].+/g);
+  let output = content;
+  if (replaceImports) {
+    const pathUp =
+      ".." +
+      src
+        .match(/src\/.+/)[0]
+        .match(/\//g)
+        .splice(1)
+        .join("..");
+    for (let i in replaceImports) {
+      const pathToImport = replaceImports[i].replace(/@import ['"][/]?([^'"]+).*/, "$1");
+      const resolverPath = pathUp + pathToImport;
+
+      const srcPathDir = src.replace(/\/[^/]+$/, "/");
+      const relativeImportPath = srcPathDir + pathToImport;
+      const rootImportPath = srcPathDir + resolverPath;
+
+      let resolveRootImport = false;
+      try {
+        fs.accessSync(relativeImportPath);
+      } catch (err) {
+        try {
+          fs.accessSync(relativeImportPath + ".scss");
+        } catch (err) {
+          try {
+            fs.accessSync(rootImportPath);
+            resolveRootImport = true;
+          } catch (err) {
+            try {
+              fs.accessSync(rootImportPath + ".scss");
+              resolveRootImport = true;
+            } catch (err) {
+              throw "Cannot resolve import path: " + replaceImports[i] + " in " + src;
+            }
+          }
+        }
+      }
+      if (resolveRootImport) {
+        console.log("Resolved root import in " + src + ": " + pathToImport + " -> " + resolverPath);
+        const resolvedImport = replaceImports[i].replace(
+          /(@import ['"])[^'"]+(.*)/,
+          "$1" + resolverPath + "$2"
+        );
+        output = output.replace(replaceImports[i], resolvedImport);
+      }
+    }
+  }
+  return output;
+}
+
+function createDirDeep(path) {
+  const ps = path.split("/");
+  let dir = ps.splice(0, 1);
+  for (const p of ps) {
+    dir = [dir, p].join("/");
+    if (!fs.existsSync(dir)) {
+      fs.mkdirSync(dir);
+    }
+  }
+}
+
+console.log(
+  "\x1b[37m\x1b[42m%s\x1b[0m",
+  "Copying files from " + src + " to " + dst + (reg ? " with filter: " + reg : " without filter")
+);
+
+walk(src, function(f) {
+  if (reg === null || (reg && reg.test(f))) {
+    copyWithParent(f, function(path) {
+      return dst + path.replace(src, "");
+    });
+  }
+});

package/scripts/moveLibToPackageRoot.js

@@ -0,0 +1,44 @@
+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/src/CommonUtils/Observable.js

@@ -8,7 +8,6 @@ export class Observable {
 
   on(eventName, callback) {
     if (this.indexOf(eventName, callback) !== -1) {
-      // eslint-disable-next-line no-console
       console.warn(`The following callback is already added to the event: ${eventName}`, callback);
       return;
     }

package/src/CommonUtils/pointerEvent.js

@@ -126,7 +126,6 @@ export const createPointerEventListener = (element, name, fn) => {
   };
   const mouseHandler = (evt, ...args) => {
     if (evt.timeStamp - timeStamp < tolerance) {
-      // eslint-disable-next-line no-console
       console.log("Skipped double event handling.");
       return;
     }
@@ -244,7 +243,7 @@ export const createPointerMoveEventListener = (element, fn) => {
     });
   });
 
-  const endListener = createPointerEventListener(element, "end", () => {
+  const endListener = createPointerEventListener(element, "end", evt => {
     removeMoveListener();
   });
 

package/src/DevApp.js

@@ -396,7 +396,7 @@ const drawToTexture = (effect, designAreaList) => async (
 
   for (const designArea of designAreas) {
     await drawCanvasToArea({
-      drawToContext: (ctx, x, y, width) => {
+      drawToContext: (ctx, x, y, width, height) => {
         drawImage(ctx, width / designArea.position.width, effect);
       },
       designArea,
@@ -646,7 +646,6 @@ const App = () => {
       let restoreColor;
       let to;
       visualization.observable.on(EventTypes.Intersection, v => {
-        // eslint-disable-next-line no-console
         console.log("Intersection", v);
         const mat = v.data.target.object.material;
         window.clearTimeout(to);

package/src/FallbackVisualization.js

@@ -1,6 +1,10 @@
 import React from "react";
 
-export const FallbackVisualization = ({ imageSrc, className, classNameEmpty }) =>
+export const FallbackVisualization = ({
+  imageSrc,
+  className,
+  classNameEmpty
+}) =>
   imageSrc ? (
     <img className={className} src={imageSrc} />
   ) : (

package/src/PrintingEffects/DomingEffect.js

@@ -51,7 +51,6 @@ const createDropShadow = ({ offsetX, offsetY, blur, color }) =>
 
 function modifyImage(srcCanvas, shadows) {
   if (!shadows || shadows.length === 0) {
-    // eslint-disable-next-line no-console
     console.warn("Could not apply effect, shadows has to be provided!");
     return;
   }

package/src/PrintingEffects/EmbroideryEffect.js

@@ -10,7 +10,7 @@ const SVG_DATA_URL_HDR = "data:image/svg+xml;base64,";
 
 const getScaleValues = node => {
   const transform = node.getAttribute("transform") || "";
-  const matches = transform.match(/scale\(([^)]+)\)/);
+  const matches = transform.match(/scale\(([^\)]+)\)/);
   if (matches) {
     const [x, y] = matches[1].split(",").map(window.parseFloat);
     return [x, y || x];
@@ -20,7 +20,7 @@ const getScaleValues = node => {
 
 const getRotateValue = node => {
   const transform = node.getAttribute("transform") || "";
-  const matches = transform.match(/rotate\(([^)]+)\)/);
+  const matches = transform.match(/rotate\(([^\)]+)\)/);
   if (matches) {
     return window.parseFloat(matches[1]);
   }
@@ -105,7 +105,6 @@ const applyOnEmbeddedSvg = async (imageNode, imageCanvas, ctx, rootSvgElement) =
     ctx.drawImage(tmpCanvas, 0, 0);
     ctx.restore();
   } catch (e) {
-    // eslint-disable-next-line no-console
     console.error("Error during embedded svg image processing!", e);
   }
 };

package/src/React/ReactBase.js

@@ -19,7 +19,7 @@ export class ReactBase extends VisualizationInterface {
     }
   }
 
-  init(container = document.createElement("div")) {
+  init(container = document.createElement("div"), useDefaultSetup = true) {
     this._isInitialized = true;
     this._container = container;
     this.render();

package/src/Three/Controls/OrbitControls.js

@@ -1,5 +1,3 @@
-/* eslint-disable */
-
 // original source: three/examples/js/controls/OrbitControls.js
 
 import * as THREE_imp from "three";