More tweaks

Author: stevenpetryk

docs/components/guide-examples/display/images/ImageExample.tsx

@@ -1,21 +1,55 @@
 "use client"
 
-import { Coordinates, Image, Mafs } from "mafs"
+import {
+  Coordinates,
+  Debug,
+  Image,
+  Mafs,
+  useMovablePoint,
+} from "mafs"
 
 import mafs from "./mafs.png"
 
-export default function VectorExample() {
+export default function ImageExample() {
+  const origin = useMovablePoint([3, 3])
+  const padding = 0.1
+
   return (
     <Mafs viewBox={{ x: [-1, 7], y: [-1, 5] }}>
       <Coordinates.Cartesian />
       <Image
         src={mafs.src}
-        anchor="cc"
-        x={2}
-        y={2}
+        anchor="tl"
+        x={origin.x + padding}
+        y={origin.y - padding}
+        width={2}
+        height={2}
+      />
+      <Image
+        src={mafs.src}
+        anchor="tr"
+        x={origin.x - padding}
+        y={origin.y - padding}
+        width={2}
+        height={2}
+      />
+      <Image
+        src={mafs.src}
+        anchor="bl"
+        x={origin.x + padding}
+        y={origin.y + padding}
+        width={2}
+        height={2}
+      />
+      <Image
+        src={mafs.src}
+        anchor="br"
+        x={origin.x - padding}
+        y={origin.y + padding}
         width={2}
         height={2}
       />
+      {origin.element}
     </Mafs>
   )
 }

src/display/Image.tsx

@@ -21,27 +21,42 @@ export function Image({
   preserveAspectRatio,
   svgImageProps,
 }: ImageProps) {
-  const [actualX, actualY] = computeAnchor(anchor, x, y, width, height)
+  const [anchorX, anchorY] = computeAnchor(anchor, x, y, width, height)
 
-  const scaleX = width < 0 ? -1 : 1
-  const scaleY = height < 0 ? -1 : 1
+  const transform = [
+    "var(--mafs-view-transform)",
+    "var(--mafs-user-transform)",
+    // Ensure the image is not upside down (since Mafs has the y-axis pointing,
+    // while SVG has it pointing down)
+    "scaleY(-1)",
+  ].join(" ")
 
-  console.log(actualX - (width < 0 ? -width : 0))
+  const debug = false
 
   return (
-    <image
-      href={src}
-      x={actualX - (width < 0 ? -width : 0)}
-      y={actualY - (height < 0 ? -height : 0)}
-      width={Math.abs(width)}
-      height={Math.abs(height)}
-      preserveAspectRatio={preserveAspectRatio}
-      {...svgImageProps}
-      style={{
-        transform: [`var(--mafs-view-transform)`, `var(--mafs-user-transform)`, `scaleY(-1) `].join(
-          " ",
-        ),
-      }}
-    />
+    <>
+      {debug && (
+        <rect
+          x={anchorX}
+          y={-anchorY}
+          width={width}
+          height={height}
+          fill="none"
+          stroke="red"
+          vectorEffect={"non-scaling-stroke"}
+          style={{ transform }}
+        />
+      )}
+      <image
+        href={src}
+        x={anchorX}
+        y={-anchorY}
+        width={width}
+        height={height}
+        preserveAspectRatio={preserveAspectRatio}
+        {...svgImageProps}
+        style={{ transform }}
+      />
+    </>
   )
 }

src/math.ts

@@ -43,39 +43,39 @@ export function computeAnchor(
   switch (anchor) {
     case "tl":
       actualX = x
-      actualY = -y
+      actualY = y
       break
     case "tc":
       actualX = x - width / 2
-      actualY = -y
+      actualY = y
       break
     case "tr":
       actualX = x - width
-      actualY = -y
+      actualY = y
       break
     case "cl":
       actualX = x
-      actualY = -y - height / 2
+      actualY = y + height / 2
       break
     case "cc":
       actualX = x - width / 2
-      actualY = -y - height / 2
+      actualY = y + height / 2
       break
     case "cr":
       actualX = x - width
-      actualY = -y - height / 2
+      actualY = y + height / 2
       break
     case "bl":
       actualX = x
-      actualY = -y - height
+      actualY = y + height
       break
     case "bc":
       actualX = x - width / 2
-      actualY = -y - height
+      actualY = y + height
       break
     case "br":
       actualX = x - width
-      actualY = -y - height
+      actualY = y + height
       break
   }
 

src/view/Mafs.tsx

@@ -174,13 +174,13 @@ function MafsCanvas({
   const ySpan = yMax - yMin
 
   const viewTransform = React.useMemo(() => {
-    const scaleX = round((1 / xSpan) * width, 5)
-    const scaleY = round((-1 / ySpan) * height, 5)
+    const scaleX = (1 / xSpan) * width
+    const scaleY = (-1 / ySpan) * height
     return vec.matrixBuilder().scale(scaleX, scaleY).get()
   }, [height, width, xSpan, ySpan])
 
-  const viewBoxX = round((xMin / (xMax - xMin)) * width, 10)
-  const viewBoxY = round((yMax / (yMin - yMax)) * height, 10)
+  const viewBoxX = (xMin / (xMax - xMin)) * width
+  const viewBoxY = (yMax / (yMin - yMax)) * height
 
   const inverseViewTransform = vec.matrixInvert(viewTransform)