Skip to content

Commit

Permalink
Minor fixes & latex on axis labels (#69)
Browse files Browse the repository at this point in the history 
* v1.0.736

* v1.0.737

* Minor edits

* Lint & prettier

* Fix typo

* v1.0.74

* Bump [email protected]
  • Loading branch information
@jonasdeluna
jonasdeluna authored Jun 19, 2024
1 parent 547d2dd commit fa38763
Show file tree
Hide file tree
Showing 11 changed files with 1,349 additions and 1,409 deletions.
2 changes: 1 addition & 1 deletion .github/workflows/main.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion .github/workflows/prettier.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
288 changes: 140 additions & 148 deletions LICENSE.md
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion README.md
View file
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
2 changes: 1 addition & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
11 changes: 9 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
@@ -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": {
Expand All @@ -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",
Expand All @@ -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",
Expand Down
54 changes: 54 additions & 0 deletions rollup.config.js
View file
Original file line number Diff line number Diff line change
@@ -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"
),
},
],
}),
],
};
61 changes: 52 additions & 9 deletions src/Components/Grid.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -58,6 +61,9 @@ type GridOptions = {
yLabelText?: string;
xLabelText?: string;
hasAxis?: boolean;
latexLabeltext?: boolean;
xLabelOffset?: InputPosition;
yLabelOffset?: InputPosition;
};

const defaultGridOptions: GridOptions = {
Expand All @@ -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;
Expand All @@ -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();
Expand All @@ -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
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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);
}
Expand Down
15 changes: 11 additions & 4 deletions src/Components/Latex.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -26,6 +30,8 @@ class Latex extends Component implements Collider {
anchorX = "left",
anchorY = "bottom",
draggable = undefined,
offsetX = 0,
offsetY = 0,
}: LatexOptions
) {
super();
Expand All @@ -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";
Expand Down Expand Up @@ -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
);
}
Expand Down
4 changes: 1 addition & 3 deletions webpack.config.ts
View file
Original file line number Diff line number Diff line change
@@ -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",
Expand Down
Loading

0 comments on commit fa38763

Please sign in to comment.