schematic-symbols 0.0.99 → 0.0.100

package/drawing/arc.ts

@@ -6,6 +6,7 @@ export function approximateArc(
   rx: number,
   ry: number,
   largeArcFlag: number,
+  sweepFlag: number,
   x2: number,
   y2: number,
 ): Point[] {
@@ -22,7 +23,8 @@ export function approximateArc(
       0.03 *
       Math.abs(Math.sin(t * Math.PI)) *
       Math.min(rx, ry) *
-      (largeArcFlag ? 1 : -1)
+      (largeArcFlag ? 1 : -1) *
+      (sweepFlag ? -1 : 1)
     points.push({ x, y: y + curveY })
   }
   return points

package/drawing/getSvg.ts

@@ -1,16 +1,24 @@
+import { makeAnchorYUpPositive, makeYUpPositive } from "./utils/makeYUpPositive"
 import { mapColor } from "./mapColor"
 import { pathToSvgD } from "./pathToSvgD"
 import type { Point, Port, SchSymbol, TextPrimitive } from "./types"
 
-function createDiamondElement(center: Point, size = 0.05): string {
+function createDiamondElement(
+  center: Point,
+  size = 0.05,
+  yUpPositive: boolean = true,
+): string {
   const { x, y } = center
   const halfSize = size / 2
-  return `<path d="M ${x} ${y - halfSize} L ${x + halfSize} ${y} L ${x} ${
-    y + halfSize
-  } L ${x - halfSize} ${y} Z" fill="green" />`
+  return `<path d="M ${x} ${makeYUpPositive(y, yUpPositive) - halfSize} L ${x + halfSize} ${makeYUpPositive(y, yUpPositive)} L ${x} ${
+    makeYUpPositive(y, yUpPositive) + halfSize
+  } L ${x - halfSize} ${makeYUpPositive(y, yUpPositive)} Z" fill="green" />`
 }
 
-function createTextElement(primitive: TextPrimitive): {
+function createTextElement(
+  primitive: TextPrimitive,
+  { yUpPositive }: { yUpPositive?: boolean },
+): {
   text: string
   anchor: string
 } {
@@ -58,16 +66,19 @@ function createTextElement(primitive: TextPrimitive): {
   }
 
   return {
-    text: `<text x="${x}" y="${y}" dx="${dx}" dy="${dy}" text-anchor="${textAnchor}" style="font: ${
+    text: `<text x="${x}" y="${makeYUpPositive(y, yUpPositive)}" dx="${dx}" dy="${dy}" text-anchor="${textAnchor}" style="font: ${
       fontSize ?? 0.1
     }px monospace; fill: ${mapColor("primary")}">${text}</text>`,
     anchor: `<rect x="${x - 0.025 / 2}" y="${
-      y - 0.025 / 2
+      makeYUpPositive(y, yUpPositive) - 0.025 / 2
     }" width="0.025" height="0.025" fill="blue" />`,
   }
 }
 
-function createPortElement(port: Port): string {
+function createPortElement(
+  port: Port,
+  { yUpPositive }: { yUpPositive?: boolean },
+): string {
   const { x, y, labels } = port
   const rectSize = 0.05
   const labelFontSize = 0.08
@@ -75,10 +86,10 @@ function createPortElement(port: Port): string {
 
   return `
     <rect x="${x - rectSize / 2}" y="${
-      y - rectSize / 2
+      makeYUpPositive(y, yUpPositive) - rectSize / 2
     }" width="${rectSize}" height="${rectSize}" fill="red" />
     <text x="${x - labelFontSize / 2}" y="${
-      y + rectSize + labelFontSize / 2
+      makeYUpPositive(y, yUpPositive) + rectSize + labelFontSize / 2
     }" text-anchor="middle" style="font: ${labelFontSize}px monospace; fill: #833;">${label}</text>
   `
 }
@@ -92,19 +103,19 @@ export function getInnerSvg(
   const svgElements = primitives.map((primitive) => {
     switch (primitive.type) {
       case "path":
-        return `<path d="${pathToSvgD(
-          primitive.points,
-          primitive.closed,
-        )}" fill="${
+        return `<path d="${pathToSvgD(primitive.points, {
+          closed: primitive.closed,
+          yUpPositive: true,
+        })}" fill="${
           primitive.fill ? mapColor(primitive.color) : "none"
         }" stroke="${mapColor(
           primitive.color,
         )}" stroke-width="0.02" stroke-linecap="round" stroke-linejoin="round" />`
       case "text":
-        const textElements = createTextElement(primitive)
+        const textElements = createTextElement(primitive, { yUpPositive: true })
         return textElements.text + (debug ? textElements.anchor : "")
       case "circle":
-        return `<circle cx="${primitive.x}" cy="${primitive.y}" r="${
+        return `<circle cx="${primitive.x}" cy="${makeYUpPositive(primitive.y, true)}" r="${
           primitive.radius
         }" fill="${primitive.fill ? mapColor(primitive.color) : "none"}" ${
           !primitive.fill
@@ -112,7 +123,7 @@ export function getInnerSvg(
             : ""
         } />`
       case "box":
-        return `<rect x="${primitive.x}" y="${primitive.y}" width="${
+        return `<rect x="${primitive.x}" y="${makeYUpPositive(primitive.y)}" width="${
           primitive.width
         }" height="${primitive.height}" fill="${mapColor("primary")}" />`
       default:
@@ -120,7 +131,9 @@ export function getInnerSvg(
     }
   })
 
-  const portElements = ports.map(createPortElement).join("\n    ")
+  const portElements = ports
+    .map((p) => createPortElement(p, { yUpPositive: true }))
+    .join("\n    ")
 
   const centerDiamond = createDiamondElement(symbol.center)
 
@@ -140,7 +153,7 @@ export function getSvg(
   const h = size.height * bufferMultiple
   const viewBox = {
     x: symbol.center.x - w / 2,
-    y: symbol.center.y - h / 2,
+    y: makeYUpPositive(symbol.center.y, true) - h / 2,
     width: w,
     height: h,
   }

package/drawing/pathToSvgD.ts

@@ -1,8 +1,21 @@
 import type { Point } from "drawing"
+import { makeYUpPositive } from "./utils/makeYUpPositive"
 
-export function pathToSvgD(points: Point[], closed: boolean = false): string {
+export function pathToSvgD(
+  points: Point[],
+  {
+    closed = false,
+    yUpPositive = true,
+  }: {
+    closed?: boolean
+    yUpPositive?: boolean
+  },
+): string {
   const pathCommands = points
-    .map((point, index) => `${index === 0 ? "M" : "L"}${point.x},${point.y}`)
+    .map(
+      (point, index) =>
+        `${index === 0 ? "M" : "L"}${point.x},${makeYUpPositive(point.y, yUpPositive)}`,
+    )
     .join(" ")
 
   return closed ? `${pathCommands} Z` : pathCommands

package/drawing/rotateSymbol.ts

@@ -8,29 +8,29 @@ import type {
 } from "./types"
 
 // Update rotateAnchor to handle all anchor rotations based on orientation
-const rotateAnchor = (
+const rotateRightFacingAnchor = (
   anchor: NinePointAnchor,
-  orientation: "up" | "down" | "left" | "right" = "right",
+  newOrientation: "up" | "down" | "left" | "right" = "right",
 ): NinePointAnchor => {
-  switch (orientation) {
-    case "up":
+  switch (newOrientation) {
+    case "down":
       switch (anchor) {
         case "middle_top":
-          return "middle_left"
-        case "middle_bottom":
           return "middle_right"
+        case "middle_bottom":
+          return "middle_left"
         case "middle_left":
           return "middle_bottom"
         case "middle_right":
           return "middle_top"
       }
       break
-    case "down":
+    case "up":
       switch (anchor) {
         case "middle_top":
-          return "middle_right"
-        case "middle_bottom":
           return "middle_left"
+        case "middle_bottom":
+          return "middle_right"
         case "middle_left":
           return "middle_top"
         case "middle_right":
@@ -213,21 +213,24 @@ export const flipSymbolOverYAxis = (
   }
 }
 
-export const rotateSymbol = (
+export const rotateRightFacingSymbol = (
   symbol: SchSymbol,
-  orientation?: "up" | "down" | "left" | "right",
-  overrides?: Partial<SchSymbol>,
+  opts: {
+    newOrientation?: "up" | "down" | "left" | "right"
+    overrides?: Partial<SchSymbol>
+  },
 ): SchSymbol => {
+  const { newOrientation, overrides } = opts
   // Assuming the default orientation is "right"
   const angleMap = {
-    up: -Math.PI / 2,
+    up: Math.PI / 2,
     right: 0,
-    down: Math.PI / 2,
+    down: -Math.PI / 2,
     left: -Math.PI,
   }
 
   const transform = rotate(
-    orientation ? angleMap[orientation] : Math.PI / 2,
+    newOrientation ? angleMap[newOrientation] : Math.PI / 2,
     symbol.center.x,
     symbol.center.y,
   )
@@ -250,9 +253,9 @@ export const rotateSymbol = (
           y: primitive.y,
         }) as Point
 
-        primitive.anchor = rotateAnchor(
+        primitive.anchor = rotateRightFacingAnchor(
           primitive.anchor,
-          orientation ?? "right",
+          newOrientation ?? "right",
         )
 
         return {
@@ -298,14 +301,27 @@ export const rotateSymbol = (
     ports: rotatedPorts,
     size: {
       width:
-        orientation === "up" || orientation === "down"
+        newOrientation === "up" || newOrientation === "down"
           ? size.width
           : size.height,
       height:
-        orientation === "up" || orientation === "down"
+        newOrientation === "up" || newOrientation === "down"
           ? size.height
           : size.width,
     },
     ...overrides,
   }
 }
+
+/**
+ * @deprecated use rotateRightFacingSymbol instead
+ */
+export const rotateSymbol = (
+  symbol: SchSymbol,
+  orientation: "up" | "down" | "left" | "right" = "down",
+  overrides: Partial<SchSymbol> = {},
+): SchSymbol =>
+  rotateRightFacingSymbol(symbol, {
+    newOrientation: orientation,
+    overrides,
+  })

package/drawing/svgPathToPoints.ts

@@ -58,6 +58,7 @@ export function svgPathToPoints(pathString: string): Point[] {
           rx,
           ry,
           largeArcFlag,
+          sweepFlag,
           x,
           y,
         )

package/drawing/utils/makeYUpPositive.ts

@@ -0,0 +1,46 @@
+import { NinePointAnchor } from "drawing/types"
+
+/**
+ * In Inkscape and Websites, Y-up is NEGATIVE- meaning e.g. y=10 is BELOW y=0.
+ *
+ * Our symbols are defined with Y-up POSITIVE, meaning e.g. y=10 is ABOVE y=0.
+ *
+ * This function helps flip y positions so that you can convert from schematic
+ * symbol coordinates to SVG coordinates.
+ */
+export const makeYUpPositive = (y: number, yUpPositive: boolean = true) => {
+  return yUpPositive ? -y : y
+}
+
+/**
+ * This function gives an intermediate anchor flip that can be used to determine
+ * how anchors should be interpreted when flipping in the Y-axis.
+ *
+ * It converts top_left -> bottom_left etc.
+ *
+ * y=1            top_left  -------
+ * y=0               |             |
+ * y=-1               -------------
+ *
+ * Y-up Negative
+ *
+ * y=-1               -------------
+ * y=0               |             |
+ * y=1              bottom_left  --
+ */
+export const flipAnchorOverYAxis = (anchor: NinePointAnchor) => {
+  if (anchor === "top_left") return "bottom_left"
+  if (anchor === "top_right") return "bottom_right"
+  if (anchor === "bottom_left") return "top_left"
+  if (anchor === "bottom_right") return "top_right"
+  if (anchor === "middle_top") return "middle_bottom"
+  if (anchor === "middle_bottom") return "middle_top"
+  return anchor
+}
+
+export const makeAnchorYUpPositive = (
+  anchor: NinePointAnchor,
+  yUpPositive: boolean = true,
+) => {
+  return yUpPositive ? flipAnchorOverYAxis(anchor) : anchor
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "schematic-symbols",
   "main": "./dist/index.js",
-  "version": "0.0.99",
+  "version": "0.0.100",
   "type": "module",
   "files": [
     "dist",

package/symbols/ac_voltmeter_horz.ts

@@ -12,14 +12,14 @@ export default defineSymbol({
       text: "{REF}",
       x: 0,
       y: -0.3594553499999995,
-      anchor: "middle_bottom",
+      anchor: "middle_top",
     },
     {
       type: "text",
       text: "{VAL}",
       x: 0,
       y: 0.35,
-      anchor: "middle_top",
+      anchor: "middle_bottom",
     },
   ] as any,
   ports: [

package/symbols/ac_voltmeter_vert.ts

@@ -1,26 +1,8 @@
-import { rotateSymbol } from "drawing/rotateSymbol"
-import dc_voltmeter_horz from "./ac_voltmeter_horz"
-import { Primitive } from "drawing/types"
+import { rotateRightFacingSymbol } from "drawing/rotateSymbol"
+import ac_voltmeter_horz from "./ac_voltmeter_horz"
 
-const {
-  2: letter,
-  3: path1,
-  4: path2,
-  5: path3,
-  6: path4,
-  ...rest
-} = dc_voltmeter_horz.primitives
-
-function isPrimitive(value: any): value is Primitive {
-  return typeof value === "object"
-}
-
-const rotatedSymbol = rotateSymbol({
-  ...dc_voltmeter_horz,
-  primitives: Object.values(rest).filter(isPrimitive),
+const rotatedSymbol = rotateRightFacingSymbol(ac_voltmeter_horz, {
+  newOrientation: "up",
 })
 
-export default {
-  ...rotatedSymbol,
-  primitives: [...rotatedSymbol.primitives, letter, path1, path2, path3, path4],
-}
+export default rotatedSymbol

package/symbols/avalanche_diode_vert.ts

@@ -1,17 +1,10 @@
-import { rotateSymbol } from "drawing/rotateSymbol"
+import { rotateRightFacingSymbol, rotateSymbol } from "drawing/rotateSymbol"
 import avalanche_diode_horz from "./avalanche_diode_horz"
 
 import type { TextPrimitive } from "drawing"
 
-const rotated = rotateSymbol(avalanche_diode_horz)
-const ref = rotated.primitives.find(
-  (p) => p.type === "text" && p.text === "{REF}",
-)! as TextPrimitive
-const val = rotated.primitives.find(
-  (p) => p.type === "text" && p.text === "{VAL}",
-)! as TextPrimitive
-
-ref.anchor = "middle_left"
-val.anchor = "middle_right"
+const rotated = rotateRightFacingSymbol(avalanche_diode_horz, {
+  newOrientation: "down",
+})
 
 export default rotated

package/symbols/battery_vert.ts

@@ -1,4 +1,6 @@
-import { rotateSymbol } from "drawing/rotateSymbol"
+import { rotateRightFacingSymbol } from "drawing/rotateSymbol"
 import battery_horz from "./battery_horz"
 
-export default rotateSymbol(battery_horz)
+export default rotateRightFacingSymbol(battery_horz, {
+  newOrientation: "up",
+})

package/symbols/crystal_horz.ts

@@ -14,14 +14,14 @@ export default defineSymbol({
       text: "{REF}",
       x: -0.012864500000000056,
       y: -0.4150086999999978,
-      anchor: "middle_bottom",
+      anchor: "middle_top",
     },
     {
       type: "text",
       text: "{VAL}",
       x: -0.003850500000000423,
       y: 0.4250087000000011,
-      anchor: "middle_top",
+      anchor: "middle_bottom",
     },
   ] as any,
   ports: [

package/symbols/diode_right.ts

@@ -1,20 +1,10 @@
 import { defineSymbol } from "drawing/defineSymbol"
 import svgJson from "assets/generated/diode.json"
-import { Primitive } from "drawing/types"
+import { modifySymbol } from "scripts/lib/modify-symbol/modify-symbol"
 
-const { paths, texts, bounds, refblocks, circles } = svgJson
-
-export default defineSymbol({
-  primitives: [
-    ...Object.values(paths),
-    ...Object.values(circles),
-    { ...texts.top1, anchor: "middle_bottom" },
-    { ...texts.bottom1, anchor: "middle_top" },
-  ] as Primitive[],
-  ports: [
-    { ...refblocks.left1, labels: ["1"] }, // TODO add more "standard" labels
-    { ...refblocks.right1, labels: ["2"] }, // TODO add more "standard" labels
-  ],
-  size: { width: bounds.width, height: bounds.height },
-  center: { x: bounds.centerX, y: bounds.centerY },
-})
+export default modifySymbol(svgJson)
+  .labelPort("left1", ["1", "pos"])
+  .labelPort("right1", ["2", "neg"])
+  .changeTextAnchor("{REF}", "middle_bottom")
+  .changeTextAnchor("{VAL}", "middle_top")
+  .build()

package/symbols/fuse_horz.ts

@@ -11,7 +11,7 @@ export default defineSymbol({
       type: "text",
       text: "{VAL}",
       x: 0,
-      y: 0.2,
+      y: -0.2,
       anchor: "middle_top",
     },
   ] as any,

package/symbols/ground_horz.ts

@@ -15,20 +15,20 @@ export const horizontalSymbol = defineSymbol({
       type: "text",
       text: "{REF}", // REF label for horizontal
       x: -0.1, // Adjust this for the horizontal positioning of REF
-      y: -0.8, // Adjust this for the vertical positioning of REF
+      y: 0.8, // Adjust this for the vertical positioning of REF
       anchor: "middle_bottom", // Horizontal anchor for REF
     },
     {
       type: "text",
       text: "{VAL}", // VAL label for horizontal
       x: -0.1, // Adjust for horizontal positioning of VAL
-      y: -0.1, // Adjust for vertical positioning of VAL
+      y: 0.1, // Adjust for vertical positioning of VAL
       anchor: "middle_top", // Horizontal anchor for VAL
     },
   ] as Primitive[],
   ports: [{ ...refblocks.top1, labels: ["1"] }],
-  size: { width: bounds.width, height: bounds.height },
-  center: { x: bounds.centerX - 0.09, y: bounds.centerY - 0.45 },
+  size: { width: 1, height: 1 },
+  center: { x: 0, y: 0.4 },
 })
 
 // Vertical orientation symbol

package/symbols/ground_vert.ts

@@ -1,34 +1,7 @@
 import { defineSymbol } from "drawing/defineSymbol"
 import svgJson from "assets/generated/ground.json"
 import { Primitive } from "drawing/types"
-import { rotateSymbol } from "drawing/rotateSymbol"
+import groundHorz from "./ground_horz"
+import { modifySymbol } from "scripts/lib/modify-symbol/modify-symbol"
 
-// Extract paths, bounds, etc.
-const { paths, circles, bounds, refblocks } = svgJson
-
-export const verticalSymbol = defineSymbol({
-  primitives: [
-    ...Object.values(paths),
-    ...Object.values(circles),
-    {
-      type: "text",
-      text: "{REF}", // REF label for vertical
-      x: -0.015, // Adjust this for the horizontal positioning of REF
-      y: -0.75, // Adjust this for the vertical positioning of REF
-      anchor: "middle_bottom", // Vertical anchor for REF
-    },
-    {
-      type: "text",
-      text: "{VAL}", // VAL label for vertical
-      x: -0.015, // Adjust for horizontal positioning of VAL
-      y: -0.12, // Adjust for vertical positioning of VAL
-      anchor: "middle_top", // Vertical anchor for VAL
-    },
-  ] as Primitive[],
-  ports: [{ ...refblocks.top1, labels: ["1"] }],
-  size: { width: bounds.width, height: bounds.height },
-  center: { x: bounds.centerX, y: bounds.centerY - 0.45 },
-})
-
-// Export vertical symbol (rotated 90 degrees from original)
-export default rotateSymbol(verticalSymbol)
+export default modifySymbol(groundHorz).rotateRightFacingSymbol("down").build()

package/symbols/schottky_diode_horz.ts

@@ -1,19 +1,10 @@
 import { defineSymbol } from "drawing/defineSymbol"
 import svgJson from "assets/generated/schottky_diode.json"
+import { modifySymbol } from "scripts/lib/modify-symbol/modify-symbol"
 
-const { paths, texts, bounds, refblocks, circles } = svgJson
-
-export default defineSymbol({
-  primitives: [
-    ...Object.values(paths),
-    ...Object.values(circles),
-    { ...texts.top1, anchor: "middle_bottom" },
-    { ...texts.bottom1, anchor: "middle_top" },
-  ] as any,
-  ports: [
-    { ...refblocks.left1, labels: ["1"] }, // TODO add more "standard" labels
-    { ...refblocks.right1, labels: ["2"] }, // TODO add more "standard" labels
-  ],
-  size: { width: bounds.width, height: bounds.height },
-  center: { x: bounds.centerX, y: bounds.centerY },
-})
+export default modifySymbol(svgJson)
+  .labelPort("left1", ["1", "pos"])
+  .labelPort("right1", ["2", "neg"])
+  .changeTextAnchor("{VAL}", "middle_bottom")
+  .changeTextAnchor("{REF}", "middle_top")
+  .build()