abstract-3d - npm Package Compare versions

Comparing version 1.3.5 to 1.3.6

lib/renderers/react/react-mesh.js

@@ -203,5 +203,5 @@ /* eslint-disable functional/no-class */
     }, [polygon]);
-    return (React.createElement("mesh", { position: [polygon.pos.x, polygon.pos.y, polygon.pos.z] },
-        React.createElement("bufferGeometry", { key: vertices.length },
-            React.createElement("bufferAttribute", { attach: "attributes-position", array: vertices, itemSize: 3, args: fakeArgs })),
+    return (React.createElement("mesh", { rotation: [polygon.rot?.x ?? 0, polygon.rot?.y ?? 0, polygon.rot?.z ?? 0], position: [polygon.pos.x, polygon.pos.y, polygon.pos.z], castShadow: true, receiveShadow: true },
+        React.createElement("bufferGeometry", { key: vertices.length, attach: "geometry", onUpdate: (self) => self.computeVertexNormals() },
+            React.createElement("bufferAttribute", { attach: "attributes-position", needsUpdate: true, args: fakeArgs, array: vertices, count: vertices.length / 3, itemSize: 3 })),
         children));
@@ -208,0 +208,0 @@ }

lib/renderers/svg/svg-encoding.d.ts

@@ -15,3 +15,3 @@ import { Hole, Vec2, Vec3 } from "../../abstract-3d.js";
 };
-export declare const svgImage: (p: Vec2, size: Vec2, rot: number, data: EmbededImage) => string;
+export declare const svgImage: (p: Vec2, size: Vec2, rot: Vec3, data: EmbededImage) => string;
 //# sourceMappingURL=svg-encoding.d.ts.map

lib/renderers/svg/svg-encoding.js

 import { bounds2FromVec2Array, vec2, vec2Add, vec2Scale, vec2Sub, vec3, vec3Rot, vec3Zero } from "../../abstract-3d.js";
+import { eulerToSvgMatrix } from "./svg-geometries/shared.js";
 export const svg = (width, height, children) => {
@@ -61,23 +62,9 @@ return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${width.toFixed(0)} ${height.toFixed(0)}" width="${width.toFixed(0)}px" height="${height.toFixed(0)}px">${children} </svg>`;
 export const svgImage = (p, size, rot, data) => {
-    const rad = rot * (Math.PI / 180);
-    const cos = Math.abs(Math.cos(rad));
-    const sin = Math.abs(Math.sin(rad));
-    const newSize = vec2(size.x * cos + size.y * sin, size.x * sin + size.y * cos);
     const half = vec2Scale(size, 0.5);
-    const originalCenter = vec2(size.x / 2, size.y / 2);
-    const rotatedCenter = vec2(newSize.x / 2, newSize.y / 2);
-    const delta = vec2(originalCenter.x - rotatedCenter.x, originalCenter.y - rotatedCenter.y);
-    const [newSizeX, newSizeY] = [newSize.x.toFixed(0), size.y.toFixed(0)];
-    if (newSizeX === "0" || newSizeY === "0") {
-        return "";
-    }
+    const matrix = eulerToSvgMatrix(rot, p, half);
     return data.type === "url"
-        ? `<image width="${newSizeX}" height="${newSizeY}" x="${p.x.toFixed(0)}" y="${p.y.toFixed(0)}" transform="${rotate(rot)}" ${transformOrigin(p, half)} href="${data.url}" />`
-        : `<svg width="${newSize.x.toFixed(0)}" height="${newSize.y.toFixed(0)}" transform="${translate(p)} ${rotateAtPos(rot, half)} ${translate(delta)}">${data.svg}</svg>
+        ? `<image width="${size.x}" height="${size.y}" transform="${matrix}" href="${data.url}" />`
+        : `<svg width="${size.x.toFixed(0)}" height="${size.y.toFixed(0)}" transform="${matrix}">${data.svg}</svg>
   `;
 };
-const transformOrigin = (p, half) => `transform-origin="${(p.x + half.x).toFixed(0)}px ${(p.y + half.y).toFixed(0)}px"`;
-const rotate = (rot) => `rotate(${rot.toFixed(0)})`;
-const rotateAtPos = (rot, p) => `rotate(${rot.toFixed(0)}, ${p.x.toFixed(0)}, ${p.y.toFixed(0)})`;
-const translate = (p) => `translate(${p.x.toFixed(0)}, ${p.y.toFixed(0)})`;
 const counter = (() => {
@@ -84,0 +71,0 @@ let counter = 0;

lib/renderers/svg/svg-geometries/shared.d.ts

@@ -1,2 +0,2 @@
-import { View } from "../../../abstract-3d.js";
+import { Vec2, Vec3, View } from "../../../abstract-3d.js";
 export type zOrderElement = {
@@ -28,2 +28,3 @@ readonly element: string;
 };
+export declare function eulerToSvgMatrix(rot: Vec3, pos: Vec2, origin?: Vec2): string;
 //# sourceMappingURL=shared.d.ts.map

lib/renderers/svg/svg-geometries/shared.js

@@ -0,1 +1,2 @@
+import { vec2, vec3 } from "../../../abstract-3d.js";
 export const zElem = (element, zOrder) => ({ element, zOrder });
@@ -8,2 +9,37 @@ export const stBW = 0.7;
 export const black = "rgb(15, 15, 15)";
+export function eulerToSvgMatrix(rot, pos, origin) {
+    const rx = rot.x;
+    const ry = rot.y;
+    const rz = rot.z;
+    const cx = Math.cos(rx);
+    const cy = Math.cos(ry);
+    const cz = Math.cos(rz);
+    const sx = Math.sin(rx);
+    const sy = Math.sin(ry);
+    const sz = Math.sin(rz);
+    const rotate3D = (v) => {
+        return {
+            x: v.x * (cy * cz) + v.y * (-cy * sz) + v.z * sy,
+            y: v.x * (sx * sy * cz + cx * sz) + v.y * (-sx * sy * sz + cx * cz) + v.z * (-sx * cy),
+            z: v.x * (-cx * sy * cz + sx * sz) + v.y * (cx * sy * sz + sx * cz) + v.z * (cx * cy),
+        };
+    };
+    const ori = origin ?? vec2(0, 0);
+    const originRotated = rotate3D(vec3(ori.x, ori.y, 0));
+    const xRot = rotate3D({ x: 1, y: 0, z: 0 });
+    const yRot = rotate3D({ x: 0, y: -1, z: 0 });
+    const x2D = { x: xRot.x, y: -xRot.y };
+    const y2D = { x: yRot.x, y: -yRot.y };
+    const lenX = Math.hypot(x2D.x, x2D.y);
+    const lenY = Math.hypot(y2D.x, y2D.y);
+    const xN = { x: x2D.x / lenX, y: x2D.y / lenX };
+    const yN = { x: y2D.x / lenY, y: y2D.y / lenY };
+    const a = xN.x * lenX;
+    const b = xN.y * lenX;
+    const c = yN.x * lenY;
+    const d = yN.y * lenY;
+    const e = pos.x - originRotated.x;
+    const f = pos.y - originRotated.y;
+    return `matrix(${a} ${b} ${c} ${d} ${e} ${f})`;
+}
 //# sourceMappingURL=shared.js.map

lib/renderers/svg/svg-geometries/svg-plane.js

@@ -1,2 +0,2 @@
-import { vec2Scale, vec3TransRot, vec3RotCombine, vec3Zero, vec3, isZero, vec2, vec3ZMean, } from "../../../abstract-3d.js";
+import { vec2Scale, vec3TransRot, vec3RotCombine, vec3Zero, vec3, vec2, vec3ZMean, } from "../../../abstract-3d.js";
 import { gray, black, zElem } from "./shared.js";
@@ -20,3 +20,3 @@ import { svgImage, svgPolygon } from "../svg-encoding.js";
             : undefined;
-    if (opts.view === "front" && image) {
+    if (image) {
         const [leftX, rightX] = v4.x > v2.x ? [v2.x, v4.x] : [v4.x, v2.x];
@@ -26,4 +26,4 @@ const [bottomY, topY] = v4.y > v2.y ? [v4.y, v2.y] : [v2.y, v4.y];
         const topRight = point(rightX, topY);
-        const degrees = isZero(rot.z, 0.1) ? 0 : rot.z * (-180 / Math.PI);
-        const img = svgImage(bottomLeft, vec2(topRight.x - bottomLeft.x, topRight.y - bottomLeft.y), degrees, image);
+        const p = point(pos.x, pos.y);
+        const img = svgImage(p, vec2(topRight.x - bottomLeft.x, topRight.y - bottomLeft.y), rot, image);
         return [zElem(img, (v2.z + v4.z) / 2)];
@@ -30,0 +30,0 @@ }

lib/renderers/svg/svg-geometries/svg-text.js

 import { vec3TransRot, vec3RotCombine, vec3Zero } from "../../../abstract-3d.js";
-import { zElem } from "./shared.js";
+import { eulerToSvgMatrix, zElem } from "./shared.js";
 import { svgText } from "../svg-encoding.js";
@@ -19,35 +19,2 @@ // dummy
 }
-function eulerToSvgMatrix(rot, pos) {
-    const rx = rot.x;
-    const ry = rot.y;
-    const rz = rot.z;
-    const cx = Math.cos(rx);
-    const cy = Math.cos(ry);
-    const cz = Math.cos(rz);
-    const sx = Math.sin(rx);
-    const sy = Math.sin(ry);
-    const sz = Math.sin(rz);
-    const rotate3D = (v) => {
-        return {
-            x: v.x * (cy * cz) + v.y * (-cy * sz) + v.z * sy,
-            y: v.x * (sx * sy * cz + cx * sz) + v.y * (-sx * sy * sz + cx * cz) + v.z * (-sx * cy),
-            z: v.x * (-cx * sy * cz + sx * sz) + v.y * (cx * sy * sz + sx * cz) + v.z * (cx * cy),
-        };
-    };
-    const xRot = rotate3D({ x: 1, y: 0, z: 0 });
-    const yRot = rotate3D({ x: 0, y: -1, z: 0 });
-    const x2D = { x: xRot.x, y: -xRot.y };
-    const y2D = { x: yRot.x, y: -yRot.y };
-    const lenX = Math.hypot(x2D.x, x2D.y);
-    const lenY = Math.hypot(y2D.x, y2D.y);
-    let xN = { x: x2D.x / lenX, y: x2D.y / lenX };
-    let yN = { x: y2D.x / lenY, y: y2D.y / lenY };
-    const a = xN.x * lenX;
-    const b = xN.y * lenX;
-    const c = yN.x * lenY;
-    const d = yN.y * lenY;
-    const e = pos.x;
-    const f = pos.y;
-    return `matrix(${a} ${b} ${c} ${d} ${e} ${f})`;
-}
 //# sourceMappingURL=svg-text.js.map

package.json

 {
   "name": "abstract-3d",
-  "version": "1.3.5",
+  "version": "1.3.6",
   "description": "Abstract 3D",
@@ -38,3 +38,3 @@ "author": "Divid AB <[e-mail]>",
   },
-  "gitHead": "a7ff983f0e9625881f99a3d63c77f94f2753ba7b"
+  "gitHead": "ece20c3c200821a7e90eff44f7a545cdca37e110"
 }

src/renderers/react/react-mesh.tsx

@@ -414,5 +414,17 @@ /* eslint-disable functional/no-class */
   return (
-    <mesh position={[polygon.pos.x, polygon.pos.y, polygon.pos.z]}>
-      <bufferGeometry key={vertices.length}>
-        <bufferAttribute attach="attributes-position" array={vertices} itemSize={3} args={fakeArgs} />
+    <mesh
+      rotation={[polygon.rot?.x ?? 0, polygon.rot?.y ?? 0, polygon.rot?.z ?? 0]}
+      position={[polygon.pos.x, polygon.pos.y, polygon.pos.z]}
+      castShadow
+      receiveShadow
+    >
+      <bufferGeometry key={vertices.length} attach="geometry" onUpdate={(self) => self.computeVertexNormals()}>
+        <bufferAttribute
+          attach="attributes-position"
+          needsUpdate={true}
+          args={fakeArgs}
+          array={vertices}
+          count={vertices.length / 3}
+          itemSize={3}
+        />
       </bufferGeometry>
@@ -419,0 +431,0 @@ {children}

src/renderers/svg/svg-encoding.ts

 import { bounds2FromVec2Array, equals, Hole, vec2, Vec2, vec2Add, vec2Scale, vec2Sub, vec3, Vec3, vec3Rot, vec3Zero } from "../../abstract-3d.js";
+import { eulerToSvgMatrix } from "./svg-geometries/shared.js";
 
@@ -82,33 +83,11 @@ export const svg = (width: number, height: number, children: string): string => {
 
-export const svgImage = (p: Vec2, size: Vec2, rot: number, data: EmbededImage): string => {
-  const rad = rot * (Math.PI / 180);
-  const cos = Math.abs(Math.cos(rad));
-  const sin = Math.abs(Math.sin(rad));
-  const newSize = vec2(size.x * cos + size.y * sin, size.x * sin + size.y * cos);
+export const svgImage = (p: Vec2, size: Vec2, rot: Vec3, data: EmbededImage): string => {
   const half = vec2Scale(size, 0.5);
-  const originalCenter = vec2(size.x / 2, size.y / 2);
-  const rotatedCenter = vec2(newSize.x / 2, newSize.y / 2);
-  const delta = vec2(originalCenter.x - rotatedCenter.x, originalCenter.y - rotatedCenter.y);
-  const [newSizeX, newSizeY] = [newSize.x.toFixed(0), size.y.toFixed(0)];
-  if (newSizeX === "0" || newSizeY === "0") {
-    return "";
-  }
-
+  const matrix = eulerToSvgMatrix(rot, p, half);
   return data.type === "url"
-    ? `<image width="${newSizeX}" height="${newSizeY}" x="${p.x.toFixed(0)}" y="${p.y.toFixed(0)}" transform="${rotate(
-      rot
-    )}" ${transformOrigin(p, half)} href="${data.url}" />`
-    : `<svg width="${newSize.x.toFixed(0)}" height="${newSize.y.toFixed(0)}" transform="${translate(p)} ${rotateAtPos(
-      rot,
-      half
-    )} ${translate(delta)}">${data.svg}</svg>
+    ? `<image width="${size.x}" height="${size.y}" transform="${matrix}" href="${data.url}" />`
+    : `<svg width="${size.x.toFixed(0)}" height="${size.y.toFixed(0)}" transform="${matrix}">${data.svg}</svg>
   `;
 };
 
-const transformOrigin = (p: Vec2, half: Vec2): string =>
-  `transform-origin="${(p.x + half.x).toFixed(0)}px ${(p.y + half.y).toFixed(0)}px"`;
-
-const rotate = (rot: number): string => `rotate(${rot.toFixed(0)})`;
-const rotateAtPos = (rot: number, p: Vec2): string => `rotate(${rot.toFixed(0)}, ${p.x.toFixed(0)}, ${p.y.toFixed(0)})`;
-const translate = (p: Vec2): string => `translate(${p.x.toFixed(0)}, ${p.y.toFixed(0)})`;
 const counter = (() => {
@@ -115,0 +94,0 @@ let counter = 0;

src/renderers/svg/svg-geometries/shared.ts

@@ -1,2 +0,2 @@
-import { View } from "../../../abstract-3d.js";
+import { vec2, Vec2, vec3, Vec3, View } from "../../../abstract-3d.js";
 
@@ -30,1 +30,45 @@ export type zOrderElement = { readonly element: string; readonly zOrder: number };
 };
+
+export function eulerToSvgMatrix(rot: Vec3, pos: Vec2, origin?: Vec2): string {
+  const rx = rot.x;
+  const ry = rot.y;
+  const rz = rot.z;
+
+  const cx = Math.cos(rx);
+  const cy = Math.cos(ry);
+  const cz = Math.cos(rz);
+  const sx = Math.sin(rx);
+  const sy = Math.sin(ry);
+  const sz = Math.sin(rz);
+
+  const rotate3D = (v: Vec3): Vec3 => {
+    return {
+      x: v.x * (cy * cz) + v.y * (-cy * sz) + v.z * sy,
+      y: v.x * (sx * sy * cz + cx * sz) + v.y * (-sx * sy * sz + cx * cz) + v.z * (-sx * cy),
+      z: v.x * (-cx * sy * cz + sx * sz) + v.y * (cx * sy * sz + sx * cz) + v.z * (cx * cy),
+    };
+  };
+
+  const ori = origin ?? vec2(0, 0);
+  const originRotated = rotate3D(vec3(ori.x, ori.y, 0));
+
+  const xRot = rotate3D({ x: 1, y: 0, z: 0 });
+  const yRot = rotate3D({ x: 0, y: -1, z: 0 });
+
+  const x2D = { x: xRot.x, y: -xRot.y };
+  const y2D = { x: yRot.x, y: -yRot.y };
+
+  const lenX = Math.hypot(x2D.x, x2D.y);
+  const lenY = Math.hypot(y2D.x, y2D.y);
+  const xN = { x: x2D.x / lenX, y: x2D.y / lenX };
+  const yN = { x: y2D.x / lenY, y: y2D.y / lenY };
+
+  const a = xN.x * lenX;
+  const b = xN.y * lenX;
+  const c = yN.x * lenY;
+  const d = yN.y * lenY;
+  const e = pos.x - originRotated.x;
+  const f = pos.y - originRotated.y;
+
+  return `matrix(${a} ${b} ${c} ${d} ${e} ${f})`;
+}

src/renderers/svg/svg-geometries/svg-plane.ts

@@ -47,3 +47,3 @@ import {
 
-  if (opts.view === "front" && image) {
+  if (image) {
     const [leftX, rightX] = v4.x > v2.x ? [v2.x, v4.x] : [v4.x, v2.x];
@@ -53,4 +53,4 @@ const [bottomY, topY] = v4.y > v2.y ? [v4.y, v2.y] : [v2.y, v4.y];
     const topRight = point(rightX, topY);
-    const degrees = isZero(rot.z, 0.1) ? 0 : rot.z * (-180 / Math.PI);
-    const img = svgImage(bottomLeft, vec2(topRight.x - bottomLeft.x, topRight.y - bottomLeft.y), degrees, image);
+    const p = point(pos.x, pos.y);
+    const img = svgImage(p, vec2(topRight.x - bottomLeft.x, topRight.y - bottomLeft.y), rot, image);
     return [zElem(img, (v2.z + v4.z) / 2)];
@@ -57,0 +57,0 @@ }

src/renderers/svg/svg-geometries/svg-text.ts

 import { Text, Vec2, Vec3, vec3TransRot, vec3RotCombine, vec3Zero } from "../../../abstract-3d.js";
-import { SvgOptions, zElem, zOrderElement } from "./shared.js";
+import { eulerToSvgMatrix, SvgOptions, zElem, zOrderElement } from "./shared.js";
 import { svgText } from "../svg-encoding.js";
@@ -28,43 +28,2 @@
   return texts;
-}
-
-function eulerToSvgMatrix(rot: Vec3, pos: Vec2): string {
-  const rx = rot.x;
-  const ry = rot.y;
-  const rz = rot.z;
-
-  const cx = Math.cos(rx);
-  const cy = Math.cos(ry);
-  const cz = Math.cos(rz);
-  const sx = Math.sin(rx);
-  const sy = Math.sin(ry);
-  const sz = Math.sin(rz);
-
-  const rotate3D = (v: Vec3): Vec3 => {
-    return {
-      x: v.x * (cy * cz) + v.y * (-cy * sz) + v.z * sy,
-      y: v.x * (sx * sy * cz + cx * sz) + v.y * (-sx * sy * sz + cx * cz) + v.z * (-sx * cy),
-      z: v.x * (-cx * sy * cz + sx * sz) + v.y * (cx * sy * sz + sx * cz) + v.z * (cx * cy),
-    };
-  };
-
-  const xRot = rotate3D({ x: 1, y: 0, z: 0 });
-  const yRot = rotate3D({ x: 0, y: -1, z: 0 });
-
-  const x2D = { x: xRot.x, y: -xRot.y };
-  const y2D = { x: yRot.x, y: -yRot.y };
-
-  const lenX = Math.hypot(x2D.x, x2D.y);
-  const lenY = Math.hypot(y2D.x, y2D.y);
-  let xN = { x: x2D.x / lenX, y: x2D.y / lenX };
-  let yN = { x: y2D.x / lenY, y: y2D.y / lenY };
-
-  const a = xN.x * lenX;
-  const b = xN.y * lenX;
-  const c = yN.x * lenY;
-  const d = yN.y * lenY;
-  const e = pos.x;
-  const f = pos.y;
-
-  return `matrix(${a} ${b} ${c} ${d} ${e} ${f})`;
-}
+}

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

897864

-0.24%

Lines of code

44984

-0.03%

No dependency changes