@mathicsorg/mathics-threejs-backend - npm Package Compare versions

Comparing version 1.1.3 to 1.2.0

CHANGES.md

 CHANGES
 =======
 
-1.1.3
+1.2.0
 -----
@@ -10,2 +10,4 @@
 - Add support to smartphones (#97)
+- Add option to disable `autoRescale` (#100)
+- Replace canvasSize + innerWidthMultiplier by CSS alternative (#73, #101)
 
@@ -15,2 +17,9 @@ Internals:
 
+Improvements:
+- Update three.js to r138 (#96)
+- Add support to smartphones (#97)
+
+Internals:
+- Rename branch master to main
+
 Bug fixes:
@@ -17,0 +26,0 @@ - Position the axes ticks correctly in scenes with width/height different than 400 pixels (#101)

docs/documentation.md

@@ -31,4 +31,5 @@ Welcome to the mathics-threejs-backend documentation!
 The main function of mathics-threejs-backend is `drawGraphics3d`, takes the following arguments:
-- `container` (type: HTMLElement)
+- `container` (type: [container](/mathics-threejs-backend/types/container))
 - `data` (type: object) — object with the following properties:
+  - `autoRescale` (type: bool) — whether the plot should be rescaled after spin. Default: `true`
   - `axes` (type: object) — default: `{}`, object with the following properties:
@@ -49,4 +50,2 @@ - `hasaxes` (type: bool\|bool[3]) — default: `false`
   - `protocol` (type: string) — protocol version (current is `1.2`), if it isn't compatible a warning is shown instead of the graphics. Only availiable in production version
-- `maxSize` (type: number) — default: `400`
-- `innerWidthMultiplier` (type: number) — the multiplier of the window inner width, the effective width is `min(maxSize, innerWidthMultiplier * window.innerWidth)`, default: `0.65`
 
@@ -164,7 +163,1 @@ ## Examples
   </script>
-
-## Notes
-- Currently the axes labels are drawn using HTML elements with
-  `position: absolute` so the graphics container must have
-  `position: relative` if you want to draw the axes labels and the
-  container is not the unique element in the page.

package.json

 {
 	"name": "@mathicsorg/mathics-threejs-backend",
-	"version": "1.1.3",
+	"version": "1.2.0",
 	"threejs_revision": 138,
@@ -5,0 +5,0 @@ "description": "Mathics 3D Graphics backend using three.js",

src/axes.js

@@ -9,3 +9,3 @@ import {
 // This changes the value of position.
-function toCanvasCoords(position, camera, canvasSize, maxSize) {
+function getTickInformation(position, camera, container) {
 	position.applyMatrix4(
@@ -18,6 +18,21 @@ new Matrix4().multiplyMatrices(
 
-	return [
-		(position.x + 1) * 200 * canvasSize / maxSize,
-		(1 - position.y) * 200 * canvasSize / maxSize
+	const { width, height } = getComputedStyle(container);
+
+	const tickPosition = [
+		(position.x + 1) * 0.5
+		// scale by currentWidth
+		* parseInt(width),
+		(1 - position.y) * 0.5
+		// scale by currentHeight
+		* parseInt(height)
 	];
+
+	return {
+		position: tickPosition,
+		insideCanvas:
+			tickPosition[0] < 5
+			|| tickPosition[1] < 5
+			|| tickPosition[0] > width - 5
+			|| tickPosition[1] > height - 5
+	};
 }
@@ -38,16 +53,9 @@
 
-export function positionTickNumbers(
-	hasAxes,
-	tickNumbers,
-	ticks,
-	camera,
-	canvasSize,
-	maxSize
-) {
+export function positionTickNumbers(hasAxes, tickNumbers, ticks, camera, container) {
 	for (let i = 0; i < 3; i++) {
 		if (hasAxes[i]) {
 			for (let j = 0; j < tickNumbers[i].length; j++) {
-				// The code bellow moves the tick numbers so they aren't
-				// over the tick marks.
-				const tickPosition = toCanvasCoords(
+				const tickInformation = getTickInformation(
+					// The code bellow moves the tick numbers so they aren't
+					// over the tick marks.
 					new Vector3(
@@ -65,11 +73,10 @@ ticks[i].geometry.attributes.position.array[j * 6] * 7 - ticks[i].geometry.attributes.position.array[j * 6 + 3] * 6,
 					camera,
-					canvasSize,
-					maxSize
+					container
 				);
 
-				if (tickPosition[0] < 5 || tickPosition[0] > 395 || tickPosition[1] < 5 || tickPosition[1] > 395) {
+				if (tickInformation.insideCanvas) {
 					tickNumbers[i][j].style.display = 'none';
 				} else {
-					tickNumbers[i][j].style.left = `${tickPosition[0]}px`;
-					tickNumbers[i][j].style.top = `${tickPosition[1]}px`;
+					tickNumbers[i][j].style.left = `${tickInformation.position[0]}px`;
+					tickNumbers[i][j].style.top = `${tickInformation.position[1]}px`;
 					tickNumbers[i][j].style.display = '';
@@ -76,0 +83,0 @@ }

src/graphics3d.js

@@ -18,2 +18,22 @@ import {
 
+function setDefaultContainerStyle(container) {
+	const style = getComputedStyle(container);
+
+	if (!style.display) container.style.display = 'block';
+	if (!style.width) container.style.width = '65vw';
+	if (!style.maxWidth) container.style.maxWidth = '400px';
+	if (!style.height) container.style.height = '65vw';
+	if (!style.maxHeight) container.style.maxHeight = '400px';
+	// Avoid overflow when a tick numbers is out of the parent element.
+	if (!style.paddingTop) container.style.paddingTop = '5px';
+	if (!style.paddingBottom) container.style.paddingBottom = '5px';
+	// Currently the axes labels are drawn using HTML elements with
+	// `position: absolute` so the graphics container must have
+	// `position: relative` to draw the axes labels.
+	// We don't overwrite it because the user may want to make the container
+	// have an absolute position.
+	if (!style.position) container.style.position = 'relative';
+	if (!style.cursor) container.style.cursor = 'pointer';
+}
+
 export default function (
@@ -23,2 +43,3 @@ container,
 		axes = {},
+		autoRescale = true,
 		extent,
@@ -28,5 +49,3 @@ elements = [],
 		viewpoint = [1.3, -2.4, 2]
-	},
-	maxSize = 400,
-	innerWidthMultiplier = 0.65
+	}
 ) {
@@ -46,13 +65,8 @@ axes.hasaxes ??= false;
 		onMouseDownPhi,
-		onTouchStartFingersDistance,
-		canvasSize = Math.min(maxSize, window.innerWidth * innerWidthMultiplier),
-		autoRescale = true;
+		onTouchStartFingersDistance;
 
 	const onMouseDownPosition = new Int16Array(2);
 
-	container.style.width = canvasSize + 'px';
-	// to avoid overflow when a tick numbers is out of the parent element
-	container.style.height = canvasSize + 10 + 'px';
+	setDefaultContainerStyle(container);
 
-	container.style.cursor ||= 'pointer';
 	const defaultCursor = container.style.cursor;
@@ -248,3 +262,3 @@
 	elements.forEach(
-		(element) => scene.add(primitiveFunctions[element.type](element, uniforms, extent, canvasSize))
+		(element) => scene.add(primitiveFunctions[element.type](element, uniforms, extent, container))
 	);
@@ -257,4 +271,9 @@
 
-	renderer.setSize(canvasSize, canvasSize);
+	renderer.setSize(
+		parseInt(getComputedStyle(container).width),
+		parseInt(getComputedStyle(container).height)
+	);
 	renderer.setPixelRatio(window.devicePixelRatio);
+	renderer.domElement.style.width = '100%';
+	renderer.domElement.style.height = '100%';
 	container.appendChild(renderer.domElement);
@@ -325,3 +344,3 @@
 
-		positionTickNumbers(hasAxes, tickNumbers, ticks, camera, canvasSize, maxSize);
+		positionTickNumbers(hasAxes, tickNumbers, ticks, camera, container);
 
@@ -348,6 +367,8 @@ if (event.shiftKey) { // pan with mouse
 
-			focus.x = onMouseDownFocus.x + (radius / canvasSize) * (cameraX.x * (onMouseDownPosition[0] - clientX) + cameraY.x * (onMouseDownPosition[1] - clientY));
-			focus.y = onMouseDownFocus.y + (radius / canvasSize) * (cameraX.y * (onMouseDownPosition[0] - clientX) + cameraY.y * (onMouseDownPosition[1] - clientY));
-			focus.z = onMouseDownFocus.z + (radius / canvasSize) * (cameraY.z * (onMouseDownPosition[1] - clientY));
+			const { width } = getComputedStyle(container);
 
+			focus.x = onMouseDownFocus.x + (radius / parseInt(width)) * (cameraX.x * (onMouseDownPosition[0] - clientX) + cameraY.x * (onMouseDownPosition[1] - clientY));
+			focus.y = onMouseDownFocus.y + (radius / parseInt(width)) * (cameraX.y * (onMouseDownPosition[0] - clientX) + cameraY.y * (onMouseDownPosition[1] - clientY));
+			focus.z = onMouseDownFocus.z + (radius / parseInt(width)) * (cameraY.z * (onMouseDownPosition[1] - clientY));
+
 			updateCameraPosition();
@@ -396,5 +417,8 @@ } else if (event.ctrlKey || (touch && event.touches.length === 2)) { // zoom
 
-			phi = onMouseDownPhi + 2 * Math.PI * (onMouseDownPosition[0] - clientX) / canvasSize;
-			theta = onMouseDownTheta + 2 * Math.PI * (onMouseDownPosition[1] - clientY) / canvasSize;
+			const { width, height } = getComputedStyle(container);
 
+			phi = onMouseDownPhi + 2 * Math.PI * (onMouseDownPosition[0] - event.clientX) / parseInt(width);
+
+			theta = onMouseDownTheta + 2 * Math.PI * (onMouseDownPosition[1] - event.clientY) / parseInt(height);
+
 			// This prevents spinning over the poles by keeping the angle
@@ -422,3 +446,3 @@ // in the range [1e-12, Pi - 1e-12].
 			scaleInView();
-			positionTickNumbers(hasAxes, tickNumbers, ticks, camera, canvasSize, maxSize);
+			positionTickNumbers(hasAxes, tickNumbers, ticks, camera, container);
 			render();
@@ -439,10 +463,7 @@ }
 	window.addEventListener('resize', () => {
-		canvasSize = Math.min(maxSize, window.innerWidth * innerWidthMultiplier);
-		container.style.width = canvasSize + 'px';
-		// to avoid overflow when a tick numbers is out of the parent element
-		container.style.height = canvasSize + 10 + 'px';
+		const { width, height } = getComputedStyle(container);
 
-		renderer.setSize(canvasSize, canvasSize);
+		renderer.setSize(parseInt(width), parseInt(height));
 
-		positionTickNumbers(hasAxes, tickNumbers, ticks, camera, canvasSize, maxSize);
+		positionTickNumbers(hasAxes, tickNumbers, ticks, camera, container);
 	});
@@ -453,3 +474,3 @@
 	render();
-	positionTickNumbers(hasAxes, tickNumbers, ticks, camera, canvasSize, maxSize);
+	positionTickNumbers(hasAxes, tickNumbers, ticks, camera, container);
 }

src/index.js

@@ -41,3 +41,8 @@ import drawGraphics3d from './graphics3d.js';
 
-	return drawGraphics3d(container, object, maxSize, innerWidthMultiplier);
+	container.style.maxWidth = maxSize + 'px';
+	container.style.width = (100 * innerWidthMultiplier) + 'vw';
+	container.style.maxHeight = maxSize + 'px';
+	container.style.width = 100 * innerWidthMultiplier + 'vw';
+
+	return drawGraphics3d(container, object);
 }
@@ -44,0 +49,0 @@

src/primitives/line.js

@@ -17,3 +17,3 @@ import {
 // lightning and therefore don't have VertexNormals.
-export default function ({ color = [0, 0, 0], coords, dashed = false, gapSize = 10, opacity = 1 }, uniforms, extent, canvasSize) {
+export default function ({ color = [0, 0, 0], coords, dashed = false, gapSize = 10, opacity = 1 }, uniforms, extent, container) {
 	return new Line(
@@ -56,3 +56,8 @@ new BufferGeometry().setAttribute(
 					void main() {
-						float doubleDistance = length((vertexPosition - startPosition) * vec2(${canvasSize}));
+						float doubleDistance = length(
+							(vertexPosition - startPosition) * vec2(
+								${parseInt(getComputedStyle(container).width)},
+								${parseInt(getComputedStyle(container).height)}
+							)
+						);
 
@@ -59,0 +64,0 @@ float quadrupleGapInverse = ${(1 / (4 * gapSize)).toFixed(4)};

src/primitives/point.js

@@ -16,3 +16,3 @@ import {
 // lightning and therefore don't have VertexNormals.
-export default function ({ color = [0, 0, 0], coords, opacity = 1, pointSize }, uniforms, extent, canvasSize) {
+export default function ({ color = [0, 0, 0], coords, opacity = 1, pointSize }, uniforms, extent, container) {
 	return new Points(
@@ -36,3 +36,3 @@ new BufferGeometry().setAttribute(
 				void main() {
-					gl_PointSize = ${(pointSize * canvasSize).toFixed(4)};
+					gl_PointSize = ${(pointSize * parseInt(getComputedStyle(container).width)).toFixed(4)};
 					gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1);
@@ -39,0 +39,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

70439957

Number of package files

484

increased by0.21%

Lines of code

36715

increased by0.09%

No dependency changes