schematic-symbols 0.0.1

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "schematic-symbols",
+  "main": "./dist/index.cjs",
+  "version": "0.0.1",
+  "type": "module",
+  "scripts": {
+    "start": "bun run build && bun --hot run dev-server.ts",
+    "build": "rm symbols/index.ts && bunx make-vfs ./symbols --content-format import-default --outfile ./symbols/index.ts && tsup ./index.ts --dts --sourcemap",
+    "generate": "bun run scripts/generate-symbols-from-asset-svgs.ts",
+    "vercel-build": "bun run ./scripts/build.ts"
+  },
+  "devDependencies": {
+    "@types/bun": "latest",
+    "@types/svg-path-parser": "^1.1.6",
+    "make-vfs": "1.0.10",
+    "svg-path-parser": "^1.1.0",
+    "svgson": "^5.3.1",
+    "transformation-matrix": "^2.16.1",
+    "tsup": "^8.2.4"
+  },
+  "peerDependencies": {
+    "typescript": "^5.0.0"
+  },
+  "dependencies": {}
+}

package/scripts/build.ts

@@ -0,0 +1,18 @@
+import { generateWebPage } from "./lib/generate-web-page"
+import fs from "fs"
+import path from "path"
+
+const distDir = path.join(process.cwd(), "public")
+
+// Ensure the dist directory exists
+if (!fs.existsSync(distDir)) {
+  fs.mkdirSync(distDir, { recursive: true })
+}
+
+// Generate the HTML content
+const htmlContent = generateWebPage()
+
+// Write the HTML content to dist/index.html
+fs.writeFileSync(path.join(distDir, "index.html"), htmlContent)
+
+console.log("Static HTML file generated at public/index.html")

package/scripts/convertToObjectWithOrderedPositionIds.ts

@@ -0,0 +1,52 @@
+export const convertToObjectWithOrderedPositionIds = <
+  T extends { x: number; y: number },
+>(
+  points: T[],
+): Record<string, T> => {
+  const result: Record<string, T> = {}
+
+  const sides = {
+    top: [] as T[],
+    bottom: [] as T[],
+    left: [] as T[],
+    right: [] as T[],
+    unknown: [] as T[],
+  }
+
+  for (const point of points) {
+    const dx = point.x
+    const dy = point.y
+
+    const dominantSide = Math.abs(dx) > Math.abs(dy) ? "x" : "y"
+
+    let side: "top" | "bottom" | "left" | "right" | "unknown"
+    if (dominantSide === "x" && dx > 0) {
+      side = "right"
+    } else if (dominantSide === "x" && dx < 0) {
+      side = "left"
+    } else if (dominantSide === "y" && dy > 0) {
+      side = "bottom"
+    } else if (dominantSide === "y" && dy < 0) {
+      side = "top"
+    } else {
+      side = "unknown"
+    }
+
+    sides[side].push(point)
+  }
+
+  // Sort each side according to x or y
+  sides.top.sort((a, b) => a.x - b.x)
+  sides.bottom.sort((a, b) => a.x - b.x)
+  sides.left.sort((a, b) => a.y - b.y)
+  sides.right.sort((a, b) => a.y - b.y)
+
+  // Assign position ids to each point
+  for (const side of Object.keys(sides)) {
+    for (let i = 0; i < sides[side as keyof typeof sides].length; i++) {
+      result[`${side}${i + 1}`] = sides[side as keyof typeof sides][i]
+    }
+  }
+
+  return result
+}

package/scripts/generate-symbols-from-asset-svgs.ts

@@ -0,0 +1,145 @@
+import symbolsSvg from "../assets/symbols.svg" with { type: "text" }
+import { parse, type INode } from "svgson"
+import fs from "node:fs"
+import { applyGroupTransformsToChildren } from "./lib/applyGroupTransformsToChildren"
+import { getBoundsOfSvgJson } from "drawing/getBoundsOfSvgJson"
+import { compose, translate, toSVG, scale } from "transformation-matrix"
+import { convertToObjectWithOrderedPositionIds } from "./convertToObjectWithOrderedPositionIds"
+import { findInnerText } from "./lib/findInnerText"
+import { svgPathToPoints, type SvgData } from "drawing"
+import { getTsFileContentForSvgGroup } from "./lib/getTsFileContentForSvgGroup"
+
+const SOURCE_IGNORE_LIST = ["testshape"]
+
+async function processSvg() {
+  try {
+    // Parse the entire SVG file once
+    const parsedSvg = await parse(symbolsSvg)
+
+    // Find the root group
+    const rootGroup = parsedSvg.children.find(
+      (child) => child.name === "g" && child.attributes.id === "root",
+    )
+
+    if (!rootGroup) {
+      console.error("Root group not found")
+      return
+    }
+
+    // Process each subgroup under the root
+    rootGroup.children
+      .filter((child) => child.name === "g")
+      .forEach((group, index) => {
+        const groupId = group.attributes.id
+        try {
+          const filePath = `./assets/symbols-svg-json/${groupId}.json`
+          let groupWithTransformApplied = applyGroupTransformsToChildren(group)
+
+          // Recenter the group (makes it easier to read)
+          let bounds = getBoundsOfSvgJson(groupWithTransformApplied as any)
+          groupWithTransformApplied.attributes.transform = toSVG(
+            compose(
+              scale(0.1, 0.1),
+              translate(-bounds.centerX, -bounds.centerY),
+            ),
+          )
+          groupWithTransformApplied = applyGroupTransformsToChildren(
+            groupWithTransformApplied,
+          )
+
+          bounds = getBoundsOfSvgJson(groupWithTransformApplied as any)
+
+          const refblocks = convertToObjectWithOrderedPositionIds(
+            groupWithTransformApplied.children
+              .filter(
+                (child) =>
+                  child.name === "circle" &&
+                  (child.attributes["inkscape:label"]?.includes("refblock") ||
+                    child.attributes.id?.includes("refblock")),
+              )
+              .map((child) => ({
+                x: parseFloat(child.attributes.cx),
+                y: parseFloat(child.attributes.cy),
+              })),
+          )
+
+          const textChildren = groupWithTransformApplied.children.filter(
+            (text) => text.name === "text",
+          )
+          const texts = convertToObjectWithOrderedPositionIds(
+            textChildren.map((text) => ({
+              type: "text",
+              text: findInnerText(text),
+              x: parseFloat(text.attributes.x),
+              y: parseFloat(text.attributes.y),
+            })),
+          )
+
+          const pathChildren = groupWithTransformApplied.children.filter(
+            (path) => path.name === "path",
+          )
+          const paths = Object.fromEntries(
+            pathChildren.map((path) => [
+              path.attributes.id!,
+              {
+                type: "path",
+                points: svgPathToPoints(path.attributes.d!),
+                color: "primary",
+                fill:
+                  path.attributes.fill === "true" &&
+                  !path.attributes.style?.includes("fill:none"),
+              },
+            ]),
+          )
+
+          const svgData = {
+            // only for debugging
+            // svg: groupWithTransformApplied,
+            paths,
+            texts,
+            refblocks,
+            bounds,
+          }
+
+          console.log(`Writing to file: ${filePath}`)
+          fs.writeFileSync(filePath, JSON.stringify(svgData, null, 2))
+
+          if (SOURCE_IGNORE_LIST.includes(groupId)) {
+            return
+          }
+
+          // Check if there's a source file for this symbol
+          const outputPath = `./symbols/${groupId}_horz.ts`
+          const hasSourceFile = fs.existsSync(outputPath)
+          const isReadyForGen =
+            Object.keys(texts).length > 0 &&
+            Object.keys(paths).length > 0 &&
+            Object.keys(refblocks).length > 0
+
+          if (!hasSourceFile && !isReadyForGen) {
+            console.log(
+              `Skipping ${groupId} because it's not ready for generation (missing some elements)`,
+            )
+            console.log(`  - texts: ${Object.keys(texts).length}`)
+            console.log(`  - paths: ${Object.keys(paths).length}`)
+            console.log(`  - refblocks: ${Object.keys(refblocks).length}`)
+          } else if (!hasSourceFile && isReadyForGen) {
+            console.log(`Creating horz source file: ${outputPath}`)
+            const content = getTsFileContentForSvgGroup(groupId, svgData as any)
+            fs.writeFileSync(outputPath, content)
+            // Write the vert file
+            const vertOutputPath = `./symbols/${groupId}_vert.ts`
+            console.log(`Creating vert source file: ${vertOutputPath}`)
+            const contentVert = `import { rotateSymbol } from "drawing/rotateSymbol"\nimport ${groupId}_horz from "./${groupId}_horz"\n\nexport default rotateSymbol(${groupId}_horz)`
+            fs.writeFileSync(vertOutputPath, contentVert)
+          }
+        } catch (err: any) {
+          console.log(`Error processing ${groupId}: ${err.message}`)
+        }
+      })
+  } catch (error) {
+    console.error("Error processing SVG:", error)
+  }
+}
+
+processSvg()

package/scripts/lib/applyGroupTransformsToChildren.ts

@@ -0,0 +1,118 @@
+import {
+  fromDefinition,
+  compose,
+  applyToPoint,
+  toString,
+  type Matrix,
+  fromTransformAttribute,
+  identity,
+} from "transformation-matrix"
+import type { INode } from "svgson"
+import { parseSVG, makeAbsolute, type LineToCommand } from "svg-path-parser"
+import { serializeSvgPathCommands } from "./serializeSvgPathCommands"
+
+export function applyGroupTransformsToChildren(group: INode) {
+  if (!group.attributes.transform) {
+    return group // No transformation to apply
+  }
+
+  const groupTransform = parseTransform(group.attributes.transform)
+
+  group.children = group.children
+    .map((child) => {
+      const transform = compose(
+        groupTransform,
+        parseTransform(child.attributes.transform),
+      )
+      delete child.attributes.transform
+
+      if (child.name === "rect") {
+        // convert to path, it's easier to transform via rotations
+        return null
+        child = convertRectToPath(child)
+      }
+      if (child.name === "path") {
+        child.attributes.d = transformPath(child.attributes.d, transform)
+        const hasFill =
+          child.attributes.fill && child.attributes.fill !== "none"
+        child.attributes.fill = hasFill ? "true" : "false"
+      } else if (child.name === "text") {
+        const { x, y } = applyToPoint(transform, {
+          x: parseFloat(child.attributes.x),
+          y: parseFloat(child.attributes.y),
+        })
+        child.attributes.x = x.toString()
+        child.attributes.y = y.toString()
+      } else if (child.name === "circle") {
+        let { cx, cy, r } = child.attributes as any
+        cx = parseFloat(cx)
+        cy = parseFloat(cy)
+        r = parseFloat(r)
+
+        const { x, y } = applyToPoint(transform, { x: cx, y: cy })
+        r = r * groupTransform.a
+
+        child.attributes.cx = x.toString()
+        child.attributes.cy = y.toString()
+        child.attributes.r = r.toString()
+      } else {
+        return null
+      }
+
+      return child
+    })
+    .filter((c: INode | null): INode => c as INode)
+
+  // Remove the transform from the group since it's now applied to children
+  delete group.attributes.transform
+
+  return group
+}
+
+function parseTransform(transform: string): Matrix {
+  if (!transform) return identity()
+  return compose(fromDefinition(fromTransformAttribute(transform)))
+}
+
+export function transformPath(pathData: string, matrix: Matrix): string {
+  let parsedPath = parseSVG(pathData)
+
+  parsedPath = makeAbsolute(parsedPath)
+
+  // convert V and H commands to L commands so that rotations can be applied
+  parsedPath = parsedPath.map((command) => {
+    const { x0, y0 } = command as any
+    if (command.code === "V") {
+      return { code: "L", x: x0, y: command.y } as LineToCommand
+    } else if (command.code === "H") {
+      return { code: "L", x: command.x, y: y0 } as LineToCommand
+    }
+    return command
+  })
+
+  const transformedPath = parsedPath.map((command) => {
+    if ("x" in command && "y" in command) {
+      const { x, y } = applyToPoint(matrix, { x: command.x, y: command.y })
+      command.x = x
+      command.y = y
+    }
+    if ("x1" in command && "y1" in command) {
+      const { x, y } = applyToPoint(matrix, { x: command.x1, y: command.y1 })
+      command.x1 = x
+      command.y1 = y
+    }
+    if ("x2" in command && "y2" in command) {
+      const { x, y } = applyToPoint(matrix, { x: command.x2, y: command.y2 })
+      command.x2 = x
+      command.y2 = y
+    }
+    return command
+  })
+
+  return serializeSvgPathCommands(transformedPath)
+}
+
+export function convertRectToPath(child: INode): INode {
+  const { x, y, width, height } = child.attributes as any
+  return null
+}

package/scripts/lib/findInnerText.ts

@@ -0,0 +1,11 @@
+import type { INode } from "svgson"
+
+export const findInnerText = (node: INode): string => {
+  if (node.type === "text") {
+    return node.value
+  } else if (node.children) {
+    return node.children.map(findInnerText).join("")
+  }
+
+  return ""
+}

package/scripts/lib/generate-web-page.ts

@@ -0,0 +1,60 @@
+import { getSvg } from "../../drawing/getSvg"
+import symbols from "../../symbols"
+
+export function generateWebPage(): string {
+  const symbolEntries = Object.entries(symbols).sort((a, b) =>
+    a[0].localeCompare(b[0]),
+  )
+
+  const svgGrid = symbolEntries
+    .map(([name, symbol]) => {
+      const svg = getSvg(symbol, { width: 150, height: 150, debug: true })
+      return `
+      <div class="symbol-container" style="padding-bottom:28px;">
+        <div style="font-size: 12px;word-break: break-all; text-align: left;padding-bottom: 16px;">${name}</div>
+        ${svg}
+      </div>
+    `
+    })
+    .join("")
+
+  const html = `
+    <!DOCTYPE html>
+    <html lang="en">
+    <head>
+      <meta charset="UTF-8">
+      <meta name="viewport" content="width=device-width, initial-scale=1.0">
+      <title>Schematic Symbols Grid</title>
+      <style>
+        body {
+          font-family: Arial, sans-serif;
+          margin: 0;
+          padding: 20px;
+        }
+        .grid {
+          display: grid;
+          grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+          gap: 20px;
+        }
+        .symbol-container {
+          border: 1px solid #ccc;
+          padding: 10px;
+          text-align: center;
+        }
+        svg {
+          max-width: 100%;
+          height: auto;
+        }
+      </style>
+    </head>
+    <body>
+      <h1>Schematic Symbols</h1>
+      <div class="grid">
+        ${svgGrid}
+      </div>
+    </body>
+    </html>
+  `
+
+  return html
+}

package/scripts/lib/getTsFileContentForSvgGroup.ts

@@ -0,0 +1,33 @@
+import type { SvgData } from "drawing"
+
+export const getTsFileContentForSvgGroup = (
+  groupId: string,
+  svgData: SvgData,
+) => {
+  return `
+import { defineSymbol } from "drawing/defineSymbol"
+import svgJson from "assets/symbols-svg-json/${groupId}.json"
+
+const { paths, texts, bounds, refblocks } = svgJson
+
+export default defineSymbol({
+  primitives: [
+    ...Object.values(paths),
+    ${Object.entries(svgData.texts)
+      .map(([key, text]) => {
+        return `{ ...texts.${key}, anchor: "middle_left" },`
+      })
+      .join("\n")}
+  ] as any,
+  ports: [
+      ${Object.entries(svgData.refblocks)
+        .map(([key, point], i) => {
+          return `{ ...refblocks.${key}, labels: ["${i + 1}"] }, // TODO add more "standard" labels`
+        })
+        .join("\n")}
+  ],
+  size: { width: bounds.width, height: bounds.height },
+  center: { x: bounds.centerX, y: bounds.centerY },
+})
+`
+}

package/scripts/lib/serializeSvgPathCommands.ts

@@ -0,0 +1,47 @@
+import type { Command } from "svg-path-parser"
+
+export function serializeSvgPathCommands(pathData: Command[]): string {
+  return pathData
+    .map((command: Command) => {
+      let result = command.code
+
+      switch (command.code) {
+        case "M":
+        case "m":
+        case "L":
+        case "l":
+        case "T":
+        case "t":
+          result += `${command.x},${command.y}`
+          break
+        case "H":
+        case "h":
+          result += command.x
+          break
+        case "V":
+        case "v":
+          result += command.y
+          break
+        case "C":
+        case "c":
+          result += `${command.x1},${command.y1} ${command.x2},${command.y2} ${command.x},${command.y}`
+          break
+        case "S":
+        case "s":
+        case "Q":
+        case "q":
+          result += `${command.x1},${command.y1} ${command.x},${command.y}`
+          break
+        case "A":
+        case "a":
+          result += `${command.rx},${command.ry} ${command.xAxisRotation} ${command.largeArc ? "1" : "0"},${command.sweep ? "1" : "0"} ${command.x},${command.y}`
+          break
+        case "Z":
+        case "z":
+          break
+      }
+
+      return result
+    })
+    .join(" ")
+}

package/symbols/boxresistor_horz.ts

@@ -0,0 +1,35 @@
+import { path } from "drawing/path"
+import { text } from "drawing/text"
+import { defineSymbol } from "drawing/defineSymbol"
+
+export default defineSymbol({
+  primitives: [
+    path({
+      points: [
+        { x: 0, y: 0 },
+        { x: 0.2, y: 0 },
+        { x: 0.2, y: -0.12 },
+        { x: 0.8, y: -0.12 },
+        { x: 0.8, y: 0.12 },
+        { x: 0.2, y: 0.12 },
+        { x: 0.2, y: 0 },
+      ],
+      color: "primary",
+    }),
+    path({
+      points: [
+        { x: 0.8, y: 0 },
+        { x: 1, y: 0 },
+      ],
+      color: "primary",
+    }),
+    text("{REF}", { x: 0.5, y: -0.2, anchor: "middle_bottom" }),
+    text("{VAL}", { x: 0.5, y: 0.2, anchor: "middle_top" }),
+  ],
+  ports: [
+    { x: 0, y: 0, labels: ["1", "-"] },
+    { x: 1, y: 0, labels: ["2", "+"] },
+  ],
+  center: { x: 0.5, y: 0 },
+  size: { width: 1, height: 0.55 },
+})

package/symbols/boxresistor_vert.ts

@@ -0,0 +1,4 @@
+import { rotateSymbol } from "drawing/rotateSymbol"
+import boxresistor_horz from "./boxresistor_horz"
+
+export default rotateSymbol(boxresistor_horz)

package/symbols/fuse_horz.ts

@@ -0,0 +1,24 @@
+import { defineSymbol } from "drawing/defineSymbol"
+import svgJson from "assets/symbols-svg-json/fuse.json"
+
+const { paths, texts, bounds, refblocks } = svgJson
+
+export default defineSymbol({
+  primitives: [
+    ...Object.values(paths),
+    { ...texts.top1, anchor: "middle_bottom" },
+    {
+      type: "text",
+      text: "{VAL}",
+      x: 0,
+      y: 0.2,
+      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 },
+})

package/symbols/fuse_vert.ts

@@ -0,0 +1,4 @@
+import { rotateSymbol } from "drawing/rotateSymbol"
+import fuse_horz from "./fuse_horz"
+
+export default rotateSymbol(fuse_horz)

package/symbols/index.ts

@@ -0,0 +1,31 @@
+import _boxresistor_horz from "./boxresistor_horz"
+import _boxresistor_vert from "./boxresistor_vert"
+import _fuse_horz from "./fuse_horz"
+import _fuse_vert from "./fuse_vert"
+import _led_horz from "./led_horz"
+import _led_vert from "./led_vert"
+import _mosfet_depletion_normally_on_horz from "./mosfet_depletion_normally_on_horz"
+import _mosfet_depletion_normally_on_vert from "./mosfet_depletion_normally_on_vert"
+import _potentiometer_horz from "./potentiometer_horz"
+import _potentiometer_vert from "./potentiometer_vert"
+import _potentiometer2_horz from "./potentiometer2_horz"
+import _potentiometer2_vert from "./potentiometer2_vert"
+import _varistor_horz from "./varistor_horz"
+import _varistor_vert from "./varistor_vert"
+
+export default {
+  "boxresistor_horz": _boxresistor_horz,
+  "boxresistor_vert": _boxresistor_vert,
+  "fuse_horz": _fuse_horz,
+  "fuse_vert": _fuse_vert,
+  "led_horz": _led_horz,
+  "led_vert": _led_vert,
+  "mosfet_depletion_normally_on_horz": _mosfet_depletion_normally_on_horz,
+  "mosfet_depletion_normally_on_vert": _mosfet_depletion_normally_on_vert,
+  "potentiometer_horz": _potentiometer_horz,
+  "potentiometer_vert": _potentiometer_vert,
+  "potentiometer2_horz": _potentiometer2_horz,
+  "potentiometer2_vert": _potentiometer2_vert,
+  "varistor_horz": _varistor_horz,
+  "varistor_vert": _varistor_vert
+}

package/symbols/led_horz.ts

@@ -0,0 +1,18 @@
+import { defineSymbol } from "drawing/defineSymbol"
+import svgJson from "assets/symbols-svg-json/led.json"
+
+const { paths, texts, bounds, refblocks } = svgJson
+
+export default defineSymbol({
+  primitives: [
+    ...Object.values(paths),
+    { ...texts.bottom1, anchor: "middle_left" },
+    { ...texts.right1, anchor: "middle_left" },
+  ] 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 + 0.1 },
+})

package/symbols/led_vert.ts

@@ -0,0 +1,4 @@
+import { rotateSymbol } from "drawing/rotateSymbol"
+import led_horz from "./led_horz"
+
+export default rotateSymbol(led_horz)

package/symbols/mosfet_depletion_normally_on_horz.ts

@@ -0,0 +1,19 @@
+import { defineSymbol } from "drawing/defineSymbol"
+import svgJson from "assets/symbols-svg-json/mosfet_depletion_normally_on.json"
+
+const { paths, texts, bounds, refblocks } = svgJson
+
+export default defineSymbol({
+  primitives: [
+    ...Object.values(paths),
+    { ...texts.right1, anchor: "middle_left" },
+    { ...texts.right2, anchor: "middle_left" },
+  ] as any,
+  ports: [
+    { ...refblocks.top1, labels: ["1"] }, // TODO add more "standard" labels
+    { ...refblocks.bottom1, labels: ["2"] }, // TODO add more "standard" labels
+    { ...refblocks.left1, labels: ["3"] }, // TODO add more "standard" labels
+  ],
+  size: { width: bounds.width + 0.4, height: bounds.height },
+  center: { x: bounds.centerX + 0.2, y: bounds.centerY },
+})