try to copy logic from stl renderer

Author: Kinatzo

packages/abstract-3d/src/renderers/svg/svg.ts

@@ -21,6 +21,8 @@ import {
   bounds2ToSize,
   bounds2Merge,
   vec2Zero,
+  vec3Sub,
+  vec3Flip,
 } from "../../abstract-3d.js";
 import { SvgOptions, zOrderElement } from "./svg-geometries/shared.js";
 import { box } from "./svg-geometries/svg-box.js";
@@ -103,21 +105,19 @@ function renderInternal(
   );
   const svgSize = vec2(unitSize.x + 1.5 * opts.stroke_thickness, unitSize.y + 1.5 * opts.stroke_thickness);
   const svgCenter = vec2(-offset.x + opts.stroke_thickness * 0.75, offset.y + opts.stroke_thickness * 0.75);
-
   const point = (x: number, y: number): Vec2 => vec2(svgCenter.x + x, svgCenter.y - y);
+  const unitCenterFlipped = vec3Flip(unitCenter);
 
   const elements = Array<zOrderElement>();
   for (const g of scene.groups) {
-    const pos = vec3Rot(g.pos, unitCenter, unitRot);
-    const rot = vec3RotCombine(unitRot, g.rot ?? vec3Zero);
-    elements.push(...svgGroup(g, pos, rot, point, opts));
+    elements.push(...svgGroup(g, unitCenterFlipped, unitRot, point, opts));
   }
   const dimOpts: SvgOptions = { ...opts, only_stroke: false, gray_scale: false };
   elements.sort((a, b) => a.zOrder - b.zOrder);
   const cameraPos = vec3Rot(vec3(1, 1, 1), vec3Zero, unitRot);
   for (const d of scene.dimensions_deprecated?.dimensions ?? []) {
     if (flipViews(d.views[0], cameraPos) === opts.view) {
-      const pos = vec3Rot(d.pos, unitCenter, unitRot);
+      const pos = vec3TransRot(d.pos, unitCenterFlipped, unitRot);
       const rot = vec3RotCombine(unitRot, d.rot);
       for (const m of d.meshes) {
         elements.push(...svgMesh(m, pos, rot, point, scene.dimensions_deprecated?.material ?? { normal: "" }, dimOpts));
@@ -129,19 +129,19 @@ function renderInternal(
 
 function svgGroup(
   g: Group,
-  pos: Vec3,
-  rot: Vec3,
+  parentPos: Vec3,
+  parentRot: Vec3,
   point: (x: number, y: number) => Vec2,
   opts: SvgOptions
 ): ReadonlyArray<zOrderElement> {
+  const pos = vec3TransRot(g.pos, parentPos, parentRot);
+  const rot = vec3RotCombine(parentRot, g.rot ?? vec3Zero);
   const elements = Array<zOrderElement>();
   for (const m of g.meshes ?? []) {
     elements.push(...svgMesh(m, pos, rot, point, m.material, opts));
   }
   for (const sg of g.groups ?? []) {
-    const sPos = vec3TransRot(sg.pos, pos, rot);
-    const sRot = vec3RotCombine(rot, sg.rot ?? vec3Zero);
-    elements.push(...svgGroup(sg, sPos, sRot, point, opts));
+    elements.push(...svgGroup(sg, pos, rot, point, opts));
   }
   return elements;
 }

packages/abstract-visuals-example/package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "abstract-visuals-example",
-  "version": "15.2.149",
+  "version": "15.2.147",
   "description": "abstract-visuals-example",
   "repository": "https://github.com/dividab/abstract-visuals",
   "main": "lib/index.js",

packages/abstract-visuals-example/src/app/abstract-3d-example.tsx

@@ -7,6 +7,8 @@ import { ai } from "./double-view-ai.js";
 import { createSVG } from "../../../abstract-image/src/exporters/svg-export-image.js";
 import { dxf2dExportImage, DXF_DATA_URL } from "../../../abstract-image/src/exporters/dxf2d-export-image.js";
 import { componentGeometries } from "./double-view-component-geometries.js";
+import { templateScene } from "./template-scene.js";
+import { Scene } from "../../../abstract-3d/src/abstract-3d.js";
 
 export function Abstract3DExample(): React.ReactNode {
   const [selected, setSelected] = React.useState<string | undefined>(undefined);
@@ -20,6 +22,7 @@ export function Abstract3DExample(): React.ReactNode {
   const imageDataByUrlSvg: Record<string, any> = {};
   const imageDataByUrlDxf: Record<string, any> = {};
   const svgs = Array<string>();
+
   for (const geo of Object.values(componentGeometries)) {
     for (const s of geo.scenes as any) {
       svgs.push(`data:image/svg+xml,${encodeURIComponent(Svg.render(s.scene, s.options).image)}`);
@@ -33,8 +36,18 @@ export function Abstract3DExample(): React.ReactNode {
     imageDataByUrlDxf[geo.image.url] = `${DXF_DATA_URL}${Dxf.renderScenes(geo.scenes as any)}`;
   }
 
+  const templateImage = Svg.render(templateScene as Scene, { stroke_thickness: 3, only_stroke: true }).image;
+
   return (
     <div style={{ display: "flex", flexDirection: "column", height: "100%", background: "rgb(230,  230, 230)" }}>
+      <style>
+        {`
+       .wrapper > svg {
+        width: 100%;
+        height: 100%;
+      }
+    `}
+      </style>
       <div style={{ display: "flex", height: "20px", background: "rgb(251,  251, 251)" }}>
         <button
           onClick={() =>
@@ -80,9 +93,14 @@ export function Abstract3DExample(): React.ReactNode {
             Svg.render(systemair, { view: "front", stroke_thickness: 1, rotation: 270 }).image
           )}`}
         />
+        <div
+          className="wrapper"
+          style={{ width: "200px", height: "200px", minWidth: "200px" }}
+          dangerouslySetInnerHTML={{ __html: templateImage }}
+        />
         <div dangerouslySetInnerHTML={{ __html: createSVG(ai, { imageDataByUrl: imageDataByUrlSvg }) }} />
-        {svgs.map((svg) => (
-          <img src={svg} width="200px" style={{ height: "max-content" }} />
+        {svgs.map((svg, i) => (
+          <img key={i} src={svg} width="200px" style={{ height: "max-content" }} />
         ))}
         <div style={{ height: "calc(100% - 20px)", width: "100%", display: "flex" }}>
           <div style={{ height: "100%", width: "50%", display: "flex", flexDirection: "column" }}>