kateter-platform · jonasdeluna · Jun 19, 2024 · Jan 31, 2024 · Jan 31, 2024 · Jun 19, 2024
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -22,7 +22,7 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v1
         with:
-          node-version: 16.17.0
+          node-version: 18.17.0
 
       # ESLint and Prettier must be in `package.json`
       - name: Install Node.js dependencies

diff --git a/.github/workflows/prettier.yml b/.github/workflows/prettier.yml
@@ -22,7 +22,7 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v1
         with:
-          node-version: 16.17.0
+          node-version: 18.17.0
 
       # ESLint and Prettier must be in `package.json`
       - name: Install Node.js dependencies

diff --git a/LICENSE.md b/LICENSE.md
diff --git a/README.md b/README.md
@@ -32,4 +32,4 @@ yarn lint
 
 ## License
 
-For legal information, please refer to LICENSE.md for information about Attribution-NonCommercial-NoDerivatives 4.0 International which this project is protected by
+For legal information, please refer to LICENSE.md for information about Attribution-NonCommercial-NoDerivatives 4.0 International which this project is protected by
diff --git a/index.html b/index.html
@@ -6,6 +6,6 @@
     <title>Graphica Demo</title>
   </head>
   <body>
-    <script type="module" src="dist/index.js"></script>
+    <script type="module" src="dist/graphica.js"></script>
   </body>
 </html>
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@kateter-platform/graphica",
-  "version": "1.0.735",
+  "version": "1.0.74",
   "source": "./src/index.ts",
   "description": "A tool for advanced graphing and visualization",
   "repository": {
@@ -13,6 +13,11 @@
     "@babel/preset-env": "^7.22.5",
     "@babel/preset-typescript": "^7.22.5",
     "@babel/register": "^7.22.5",
+    "@rollup/plugin-alias": "^5.1.0",
+    "@rollup/plugin-commonjs": "^26.0.1",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-replace": "^5.0.7",
+    "@rollup/plugin-typescript": "^11.1.6",
     "@types/katex": "^0.16.0",
     "@types/node": "^20.3.1",
     "@typescript-eslint/eslint-plugin": "^5.60.1",
@@ -21,9 +26,11 @@
     "eslint": "^8.43.0",
     "eslint-plugin-import": "^2.27.5",
     "expose-loader": "^4.1.0",
-    "parcel": "^2.9.3",
     "prettier": "^2.8.8",
     "process": "^0.11.10",
+    "rollup": "^4.18.0",
+    "rollup-plugin-copy": "^3.5.0",
+    "rollup-plugin-node-builtins": "^2.1.2",
     "stats.js": "^0.17.0",
     "ts-loader": "^9.4.3",
     "typescript": "^5.1.3",

diff --git a/rollup.config.js b/rollup.config.js
@@ -0,0 +1,54 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+
+const path = require("path");
+const alias = require("@rollup/plugin-alias");
+const commonjs = require("@rollup/plugin-commonjs");
+const resolve = require("@rollup/plugin-node-resolve");
+const replace = require("@rollup/plugin-replace");
+const typescript = require("@rollup/plugin-typescript");
+const copy = require("rollup-plugin-copy");
+const nodeBuiltins = require("rollup-plugin-node-builtins");
+
+module.exports = {
+  input: "src/index.ts",
+  output: {
+    file: "dist/graphica.js",
+    format: "umd",
+    name: "Graphica",
+    sourcemap: true,
+    globals: {
+      'typeof self !== "undefined" ? self : this': "this",
+    },
+  },
+  plugins: [
+    typescript(),
+    resolve({
+      preferBuiltins: false,
+    }),
+    commonjs(),
+    replace({
+      "process.env.NODE_ENV": JSON.stringify("production"),
+      preventAssignment: true,
+    }),
+    nodeBuiltins(),
+    copy({
+      targets: [
+        {
+          src: "node_modules/three/examples/jsm/**/*",
+          dest: "dist/jsm",
+        },
+      ],
+    }),
+    alias({
+      entries: [
+        {
+          find: "three/examples/jsm",
+          replacement: path.resolve(
+            __dirname,
+            "node_modules/three/examples/jsm"
+          ),
+        },
+      ],
+    }),
+  ],
+};
diff --git a/src/Components/Grid.ts b/src/Components/Grid.ts
@@ -7,9 +7,12 @@ import {
   OrthographicCamera,
   Mesh,
 } from "three";
+import { toVector2 } from "../utils";
+import Latex from "./Latex";
 import Line from "./Line";
 import Text from "./Text";
 import { Component } from "./interfaces";
+import { InputPosition } from "./types";
 
 const vertexShader = `
   varying vec3 worldPosition;
@@ -58,6 +61,9 @@ type GridOptions = {
   yLabelText?: string;
   xLabelText?: string;
   hasAxis?: boolean;
+  latexLabeltext?: boolean;
+  xLabelOffset?: InputPosition;
+  yLabelOffset?: InputPosition;
 };
 
 const defaultGridOptions: GridOptions = {
@@ -68,6 +74,9 @@ const defaultGridOptions: GridOptions = {
   xLabelText: "x",
   yLabelText: "y",
   hasAxis: true,
+  latexLabeltext: false,
+  xLabelOffset: [0, 0],
+  yLabelOffset: [0, 0],
 };
 
 const LABELS_LENGTH = 81;
@@ -78,14 +87,16 @@ class Grid extends Component {
   private shaderMesh: Mesh;
   private xAxis: Line;
   private yAxis: Line;
-  private xLabel: Text;
-  private yLabel: Text;
+  private xLabel: Text | Latex;
+  private yLabel: Text | Latex;
 
   // Axis labels
   private labelsX: Text[];
   private labelsY: Text[];
 
   private hasLabels: boolean;
+  private xLabelOffset: InputPosition;
+  private yLabelOffset: InputPosition;
 
   constructor(options?: GridOptions) {
     super();
@@ -98,12 +109,17 @@ class Grid extends Component {
       xLabelText,
       yLabelText,
       hasAxis,
+      latexLabeltext,
+      xLabelOffset,
+      yLabelOffset,
     } = {
       ...defaultGridOptions,
       ...options,
     };
     this.cellSize = cellSize ?? 10;
     this.hasLabels = labels;
+    this.xLabelOffset = xLabelOffset ?? [0, 0];
+    this.yLabelOffset = yLabelOffset ?? [0, 0];
     const gridGeometry = new PlaneGeometry(
       window.innerWidth,
       window.innerHeight
@@ -134,9 +150,29 @@ class Grid extends Component {
       new Vector2(0, window.innerHeight - 1000),
       { arrowhead: true, lineWidth: 3 }
     );
-    this.xLabel = new Text(xLabelText, { color: "#000000", fontSize: 22 });
-    this.yLabel = new Text(yLabelText, { color: "#000000", fontSize: 22 });
-
+    if (latexLabeltext && xLabelText && yLabelText) {
+      this.xLabel = new Latex(xLabelText, {
+        color: "#000000",
+        fontSize: 22,
+        anchorX: "right",
+      });
+      this.yLabel = new Latex(yLabelText, {
+        color: "#000000",
+        fontSize: 22,
+        anchorX: "left",
+      });
+    } else {
+      this.xLabel = new Text(xLabelText, {
+        color: "#000000",
+        fontSize: 22,
+        anchorX: "right",
+      });
+      this.yLabel = new Text(yLabelText, {
+        color: "#000000",
+        fontSize: 22,
+        anchorX: "left",
+      });
+    }
     this.add(this.shaderMesh);
 
     if (labels) {
@@ -272,14 +308,21 @@ class Grid extends Component {
       camera.position.y + (window.innerHeight * 0.5 - PADDING) / camera.zoom
     );
     this.xLabel.position.setX(
-      camera.position.x + (window.innerWidth * 0.5 - PADDING - 10) / camera.zoom
+      camera.position.x +
+        (window.innerWidth * 0.5 - PADDING - 10) / camera.zoom +
+        (toVector2(this.xLabelOffset).x * 10) / camera.zoom
+    );
+    this.xLabel.position.setY(
+      10 / camera.zoom + (toVector2(this.xLabelOffset).y * 10) / camera.zoom
     );
-    this.xLabel.position.setY(10 / camera.zoom);
     this.yLabel.position.setY(
       camera.position.y +
-        (window.innerHeight * 0.5 - PADDING - 15) / camera.zoom
+        (window.innerHeight * 0.5 - PADDING - 15) / camera.zoom +
+        (toVector2(this.yLabelOffset).y * 10) / camera.zoom
+    );
+    this.yLabel.position.setX(
+      20 / camera.zoom + (toVector2(this.yLabelOffset).x * 10) / camera.zoom
     );
-    this.yLabel.position.setX(20 / camera.zoom);
 
     this._updateAxisLabels(camera);
   }

diff --git a/src/Components/Latex.ts b/src/Components/Latex.ts
@@ -12,10 +12,14 @@ type LatexOptions = {
   anchorY?: "top" | "middle" | "bottom";
   anchorX?: "left" | "center" | "right";
   draggable?: Draggable;
+  offsetX?: number;
+  offsetY?: number;
 };
 
 class Latex extends Component implements Collider {
   draggable;
+  offsetX;
+  offsetY;
 
   constructor(
     latex: string,
@@ -26,6 +30,8 @@ class Latex extends Component implements Collider {
       anchorX = "left",
       anchorY = "bottom",
       draggable = undefined,
+      offsetX = 0,
+      offsetY = 0,
     }: LatexOptions
   ) {
     super();
@@ -42,8 +48,9 @@ class Latex extends Component implements Collider {
 
     // Create a CSS2DObject and set its properties
     const container = new CSS3DObject(htmlElement);
-
-    this.position.set(pos.x, pos.y, 1);
+    this.offsetX = offsetX;
+    this.offsetY = offsetY;
+    this.position.set(pos.x + offsetX, pos.y + offsetY, 1);
     container.scale.set(fontSize, fontSize, 1);
     container.element.style.color = color;
     container.element.style.fontFamily = "Roboto";
@@ -87,8 +94,8 @@ class Latex extends Component implements Collider {
 
   setPosition(position: InputPosition) {
     this.position.set(
-      toVector2(position).x,
-      toVector2(position).y,
+      toVector2(position).x + this.offsetX,
+      toVector2(position).y + this.offsetY,
       this.position.z
     );
   }

diff --git a/webpack.config.ts b/webpack.config.ts
@@ -1,10 +1,8 @@
-import path from "path";
-
 module.exports = {
   entry: "./src/index.ts",
   mode: "production",
   output: {
-    path: path.resolve(__dirname, "dist"),
+    path: __dirname + "/dist",
     filename: "graphica.js",
     library: "Graphica", // Replace 'YourLibraryName' with your library's global variable name
     libraryTarget: "umd",
Original file line number	Diff line number	Diff line change
Expand Up		@@ -32,4 +32,4 @@ yarn lint

		## License

		For legal information, please refer to LICENSE.md for information about Attribution-NonCommercial-NoDerivatives 4.0 International which this project is protected by
		For legal information, please refer to LICENSE.md for information about Attribution-NonCommercial-NoDerivatives 4.0 International which this project is protected by