abstract-3d 4.0.4 → 4.0.7

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

@@ -2,15 +2,23 @@ import type { Vec2, Vec3, View } from "../../../abstract-3d.js";
 import { vec3TransRot, vec3Zero } from "../../../abstract-3d.js";
 
 /**
- * An element and its mean depth, and the points it covers in view space (x right, y up, z toward the viewer), by which it's ordered when given, and
- * whether it hides what's behind it
+ * An element and its mean depth, and the points it covers in view space (x right, y up, z toward the viewer), by which it's ordered when given,
+ * whether it hides what's behind it, and the style of a plain polygon, without holes, by which its pieces are drawn when it's split
  */
-export type zOrderElement = { readonly element: string; readonly zOrder: number; readonly polygon?: ReadonlyArray<Vec3>; readonly opaque?: boolean };
-export const zElem = (element: string, zOrder: number, polygon?: ReadonlyArray<Vec3>, opaque?: boolean): zOrderElement => ({
+export type zOrderElement = {
+  readonly element: string;
+  readonly zOrder: number;
+  readonly polygon?: ReadonlyArray<Vec3>;
+  readonly opaque?: boolean;
+  readonly style?: PolygonStyle;
+};
+export type PolygonStyle = { readonly fill: string; readonly opacity: number; readonly stroke: string; readonly strokeWidth: number };
+export const zElem = (element: string, zOrder: number, polygon?: ReadonlyArray<Vec3>, opaque?: boolean, style?: PolygonStyle): zOrderElement => ({
   element,
   zOrder,
   ...(polygon && { polygon }),
   ...(opaque && { opaque }),
+  ...(style && { style }),
 });
 
 /** Whether a fill hides what's behind it: fully opaque, and not transparent, e.g. a sketch's default background */
@@ -34,7 +42,7 @@ export const black = "rgb(15, 15, 15)";
 
 export type ImageDataUri = `data:image/png;base64,${string}` | `data:image/jpeg;base64,${string}` | `data:image/svg+xml,${string}`;
 
-/** A view, or an isometric one from the front's top left or top right, which shows the front, the top and that side, foreshortened alike */
+/** A view, or a three-quarter one from the front's top left or top right, which shows the front foremost, the top and that side */
 export type SvgView = View | "TopLeft" | "TopRight";
 
 export type SvgOptions = {

package/src/renderers/svg/svg-geometries/svg-box.ts

@@ -34,7 +34,16 @@ export function box(
     }
     // Only the front and back have holes, which show what's behind them
     const holes = i === 0 ? b.holes : undefined;
-    return [zElem(svgPolygon(rot, points, fill, opacity, strokeColor, strokeUse, holes), vec3ZMean(...polygon), polygon, opaque && !holes?.length)];
+    const plain = !holes?.length;
+    return [
+      zElem(
+        svgPolygon(rot, points, fill, opacity, strokeColor, strokeUse, holes),
+        vec3ZMean(...polygon),
+        polygon,
+        opaque && plain,
+        plain ? { fill, opacity, stroke: strokeColor, strokeWidth: strokeUse } : undefined
+      ),
+    ];
   });
 }
 

package/src/renderers/svg/svg-geometries/svg-cone.ts

@@ -42,7 +42,8 @@ export function cone(
           svgPolygon(rot, points, fill, opacity, stroke, stBW),
           vec3ZMean(currBot, prevBot, topPos),
           [currBot, prevBot, topPos],
-          isOpaque(fill, opacity)
+          isOpaque(fill, opacity),
+          { fill, opacity, stroke, strokeWidth: stBW }
         )
       );
     }

package/src/renderers/svg/svg-geometries/svg-cylinder.ts

@@ -25,6 +25,7 @@ export function cylinder(
     ? [opts.gray_scale ? gray : color, opts.background]
     : [transparent, opts.gray_scale ? rgbGrayScale(color) : color];
   const opaque = isOpaque(fill, opacity);
+  const style = { fill, opacity, stroke, strokeWidth: stBW };
   // A closed opaque cylinder's facets turned away are hidden by those toward the viewer and its near end
   const cullBack = opaque && !c.open;
   const zOrderComponents = Array<zOrderElement>();
@@ -49,7 +50,7 @@ export function cylinder(
 
       const points = [point(currBot.x, currBot.y), point(prevBot.x, prevBot.y), point(prevTop.x, prevTop.y), point(currTop.x, currTop.y)];
       const polygon = [currBot, prevBot, prevTop, currTop];
-      zOrderComponents.push(zElem(svgPolygon(rot, points, fill, opacity, stroke, stBW), vec3ZMean(...polygon), polygon, opaque));
+      zOrderComponents.push(zElem(svgPolygon(rot, points, fill, opacity, stroke, stBW), vec3ZMean(...polygon), polygon, opaque, style));
     }
     currentAngle += angleStep;
   }
@@ -73,7 +74,7 @@ export function cylinder(
       const points = ring.map((p) => point(p.x, p.y));
       // Not seen edge on, when it's only a line along the facets' edges
       if (Math.abs(getArea(points)) >= 1e-6) {
-        zOrderComponents.push(zElem(svgPolygon(rot, points, fill, opacity, stroke, stBW), circlePos.z, ring, opaque && !c.holes?.length));
+        zOrderComponents.push(zElem(svgPolygon(rot, points, fill, opacity, stroke, stBW), circlePos.z, ring, opaque && !c.holes?.length, style));
       }
     }
   }

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

@@ -29,12 +29,15 @@ export function plane(
   const [strokeColor, fill, strokeThickness] = opts.only_stroke
     ? [opts.gray_scale ? gray : material.normal, opts.background, opts.stroke_thickness]
     : [black, opts.gray_scale ? rgbGrayScale(material.normal) : material.normal, 0];
+  const opacity = material.opacity ?? 1.0;
+  const plain = !holes?.length;
   return [
     zElem(
-      svgPolygon(rot, points, fill, material.opacity ?? 1.0, strokeColor, strokeThickness, holes),
+      svgPolygon(rot, points, fill, opacity, strokeColor, strokeThickness, holes),
       vec3ZMean(v1, v2, v3, v4),
       [v1, v2, v3, v4],
-      isOpaque(fill, material.opacity ?? 1.0) && !holes?.length
+      isOpaque(fill, opacity) && plain,
+      plain ? { fill, opacity, stroke: strokeColor, strokeWidth: strokeThickness } : undefined
     ),
   ];
 }

package/src/renderers/svg/svg-geometries/svg-polygon.ts

@@ -21,12 +21,13 @@ export function polygon(
   const [strokeColor, fill, strokeThickness] = opts.only_stroke
     ? [opts.gray_scale ? gray : color, opts.background, opts.stroke_thickness]
     : [transparent, opts.gray_scale ? rgbGrayScale(color) : color, 0];
+  const opacity = material.opacity ?? 1.0;
   return [
-    zElem(
-      svgPolygon(rot, points, fill, material.opacity ?? 1.0, strokeColor, strokeThickness),
-      vec3ZMean(...rotatedPoints),
-      rotatedPoints,
-      isOpaque(fill, material.opacity ?? 1.0)
-    ),
+    zElem(svgPolygon(rot, points, fill, opacity, strokeColor, strokeThickness), vec3ZMean(...rotatedPoints), rotatedPoints, isOpaque(fill, opacity), {
+      fill,
+      opacity,
+      stroke: strokeColor,
+      strokeWidth: strokeThickness,
+    }),
   ];
 }

package/src/renderers/svg/svg-geometries/svg-shape.ts

@@ -21,12 +21,14 @@ export function shape(
   const [strokeColor, fill] = opts.only_stroke
     ? [opts.gray_scale ? gray : color, opts.background]
     : [transparent, opts.gray_scale ? rgbGrayScale(color) : color];
+  const opacity = material.opacity ?? 1.0;
   return [
     zElem(
-      svgPolygon(rot, points, fill, material.opacity ?? 1.0, strokeColor, 0),
+      svgPolygon(rot, points, fill, opacity, strokeColor, 0),
       vec3ZMean(...rotatedPoints),
       rotatedPoints,
-      isOpaque(fill, material.opacity ?? 1.0) && !s.holes?.length
+      isOpaque(fill, opacity) && !s.holes?.length,
+      { fill, opacity, stroke: strokeColor, strokeWidth: 0 }
     ),
   ];
 }

package/src/renderers/svg/svg-order.test.ts

@@ -1,14 +1,26 @@
 import { describe, expect, it } from "vitest";
-import type { Vec3 } from "../../abstract-3d.js";
-import { vec3 } from "../../abstract-3d.js";
+import type { Vec2, Vec3 } from "../../abstract-3d.js";
+import { vec2, vec3 } from "../../abstract-3d.js";
+import type { PolygonStyle, zOrderElement } from "./svg-geometries/shared.js";
 import { zElem } from "./svg-geometries/shared.js";
 import { orderElements } from "./svg-order.js";
 
-const quad = (element: string, x0: number, x1: number, z: (x: number) => number): ReturnType<typeof zElem> => {
+const point = (x: number, y: number): Vec2 => vec2(x, -y);
+const quad = (element: string, x0: number, x1: number, z: (x: number) => number, opaque?: boolean, style?: PolygonStyle): zOrderElement => {
   const points: ReadonlyArray<Vec3> = [vec3(x0, -1, z(x0)), vec3(x1, -1, z(x1)), vec3(x1, 1, z(x1)), vec3(x0, 1, z(x0))];
-  return zElem(element, points.reduce((sum, p) => sum + p.z, 0) / points.length, points);
+  return zElem(element, points.reduce((sum, p) => sum + p.z, 0) / points.length, points, opaque, style);
 };
-const order = (...elements: ReadonlyArray<ReturnType<typeof zElem>>): ReadonlyArray<string> => orderElements(elements).map((e) => e.element);
+const style = (fill: string, strokeWidth = 0): PolygonStyle => ({ fill, opacity: 1, stroke: "rgb(0,0,0)", strokeWidth });
+const order = (...elements: ReadonlyArray<zOrderElement>): ReadonlyArray<string> => orderElements(elements, point).map((e) => e.element);
+/** The fill of the last drawn element whose polygon contains the point on screen */
+const topAt = (ordered: ReadonlyArray<zOrderElement>, x: number, y: number): string | undefined =>
+  ordered
+    .filter(({ polygon = [] }) => {
+      const xs = polygon.map((p) => p.x);
+      const ys = polygon.map((p) => p.y);
+      return Math.min(...xs) < x && x < Math.max(...xs) && Math.min(...ys) < y && y < Math.max(...ys);
+    })
+    .at(-1)?.style?.fill;
 
 describe("orderElements", () => {
   it("draws a part in front of a long tilted face after it, though the face's mean depth is nearer", () => {
@@ -28,8 +40,51 @@ describe("orderElements", () => {
     expect(order(zElem("text", 2), zElem("line", -2))).toEqual(["line", "text"]);
   });
 
-  it("draws every element once, also when they overlap in a cycle", () => {
+  it("draws every element once when it can't be split, also when they overlap in a cycle", () => {
     const elements = [quad("a", 0, 2, (x) => x), quad("b", 1, 3, (x) => 2 - x), quad("c", -1, 4, () => 1), zElem("text", 0)];
     expect([...order(...elements)].sort()).toEqual(["a", "b", "c", "text"]);
   });
+
+  it("splits faces that cut through each other, each drawn in front where it's nearer", () => {
+    // Crossing at x 0: a is nearer at x > 0, b at x < 0
+    const ordered = orderElements([quad("a", -1, 1, (x) => x, true, style("a")), quad("b", -1, 1, (x) => -x, true, style("b"))], point);
+    expect([topAt(ordered, 0.5, 0), topAt(ordered, -0.5, 0)]).toEqual(["a", "b"]);
+  });
+
+  it("strokes a split face's pieces along its own edges, not the cut", () => {
+    const ordered = orderElements([quad("a", -1, 1, (x) => x, true, style("a", 2)), quad("b", -1, 1, (x) => -x, true, style("b", 2))], point);
+    const pieces = ordered.filter((e) => e.element.includes("<path"));
+    expect(pieces.length).toBeGreaterThan(0);
+    // A piece of a: its polygon unstroked, its outline three of its four edges, without the cut at x 0 from y -1 to 1
+    pieces.forEach((e) => expect(e.element).toMatch(/^<polygon[^>]*stroke-width="0"[^>]*\/><path[^>]* d="M[^"]*L[^"]*L[^"]*L[^"]*"/));
+    pieces.forEach((e) => expect(e.element).not.toMatch(/0,-1L0,1|0,1L0,-1/));
+  });
+
+  it("draws a face split by a plane whole, when nothing drawn between its pieces overlaps it", () => {
+    // Each is on both sides of the other's plane, so one is split, but b is above a on screen
+    const b = zElem("b", 0, [vec3(-1, 5, 1), vec3(1, 5, -1), vec3(1, 6, -1), vec3(-1, 6, 1)], true, style("b"));
+    expect(
+      [
+        ...order(
+          quad("a", -1, 1, (x) => x, true, style("a")),
+          b
+        ),
+      ].sort()
+    ).toEqual(["a", "b"]);
+  });
+
+  it("leaves out what an opaque face in front covers", () => {
+    expect(
+      order(
+        quad("small", -1, 1, () => 0),
+        quad("big", -2, 2, () => 1, true)
+      )
+    ).toEqual(["big"]);
+    expect(
+      order(
+        quad("small", -1, 1, () => 0),
+        quad("glass", -2, 2, () => 1)
+      )
+    ).toEqual(["small", "glass"]);
+  });
 });