schematic-symbols 0.0.1

package/biome.json

@@ -0,0 +1,44 @@
+{
+  "$schema": "https://biomejs.dev/schemas/1.7.3/schema.json",
+  "organizeImports": {
+    "enabled": true
+  },
+  "formatter": {
+    "enabled": true,
+    "indentStyle": "space"
+  },
+  "files": {
+    "ignore": ["cosmos-export", "dist", "package.json"]
+  },
+  "javascript": {
+    "formatter": {
+      "jsxQuoteStyle": "double",
+      "quoteProperties": "asNeeded",
+      "trailingCommas": "all",
+      "semicolons": "asNeeded",
+      "arrowParentheses": "always",
+      "bracketSpacing": true,
+      "bracketSameLine": false
+    }
+  },
+  "linter": {
+    "enabled": false,
+    "rules": {
+      "recommended": true,
+      "suspicious": {
+        "noExplicitAny": "off"
+      },
+      "style": {
+        "noNonNullAssertion": "off",
+        "useFilenamingConvention": {
+          "level": "error",
+          "options": {
+            "strictCase": true,
+            "requireAscii": true,
+            "filenameCases": ["kebab-case", "export"]
+          }
+        }
+      }
+    }
+  }
+}

package/dev-server.ts

@@ -0,0 +1,22 @@
+import { generateWebPage } from "./scripts/lib/generate-web-page"
+
+console.log(`Serving on http://localhost:3077`)
+Bun.serve({
+  port: 3077,
+  async fetch(req) {
+    const url = new URL(req.url)
+
+    if (url.pathname === "/") {
+      const html = generateWebPage()
+      return new Response(html, {
+        headers: { "Content-Type": "text/html" },
+      })
+    }
+
+    // Serve static files
+    return new Response("", {
+      status: 404,
+    })
+    // return new Response(await Bun.file(url.pathname))
+  },
+})

package/drawing/arrow.ts

@@ -0,0 +1,41 @@
+import { Point, Primitive } from "drawing"
+import { path } from "./path"
+
+export const arrow = (
+  start: Point,
+  end: Point,
+  color: string = "black",
+  headSize: number = 10,
+): Primitive[] => {
+  // Calculate the angle and length of the arrow
+  const dx = end.x - start.x
+  const dy = end.y - start.y
+  const angle = Math.atan2(dy, dx)
+  const length = Math.sqrt(dx * dx + dy * dy)
+
+  // Calculate the points for the arrow head
+  const headAngle = Math.PI / 6 // 30 degrees
+  const headPoint1 = {
+    x: end.x - headSize * Math.cos(angle - headAngle),
+    y: end.y - headSize * Math.sin(angle - headAngle),
+  }
+  const headPoint2 = {
+    x: end.x - headSize * Math.cos(angle + headAngle),
+    y: end.y - headSize * Math.sin(angle + headAngle),
+  }
+
+  return [
+    // Arrow body
+    path({
+      points: [start, end],
+      color: color,
+      fill: false,
+    }),
+    // Arrow head
+    path({
+      points: [headPoint1, end, headPoint2],
+      color: color,
+      fill: true,
+    }),
+  ]
+}

package/drawing/box.ts

@@ -0,0 +1,5 @@
+import type { BoxPrimitive } from "drawing"
+
+export function box(options: Omit<BoxPrimitive, "type">): BoxPrimitive {
+  return { type: "box", ...options }
+}

package/drawing/circle.ts

@@ -0,0 +1,7 @@
+import type { CirclePrimitive } from "drawing"
+
+export function circle(
+  options: Omit<CirclePrimitive, "type">,
+): CirclePrimitive {
+  return { type: "circle", ...options }
+}

package/drawing/defineSymbol.ts

@@ -0,0 +1,5 @@
+import type { SchSymbol } from "./types"
+
+export function defineSymbol(symbol: SchSymbol): SchSymbol {
+  return symbol
+}

package/drawing/getBoundsOfSvgJson.ts

@@ -0,0 +1,44 @@
+import type { INode } from "svgson"
+import { svgPathToPoints } from "./svgPathToPoints"
+
+export function getBoundsOfSvgJson(svgJson: INode): {
+  minX: number
+  maxX: number
+  minY: number
+  maxY: number
+  width: number
+  height: number
+  centerX: number
+  centerY: number
+} {
+  let minX = Infinity
+  let maxX = -Infinity
+  let minY = Infinity
+  let maxY = -Infinity
+
+  function processNode(node: INode) {
+    if (node.name === "path" && node.attributes.d) {
+      const points = svgPathToPoints(node.attributes.d)
+
+      for (const point of points) {
+        minX = Math.min(minX, point.x)
+        maxX = Math.max(maxX, point.x)
+        minY = Math.min(minY, point.y)
+        maxY = Math.max(maxY, point.y)
+      }
+    }
+
+    if (node.children) {
+      node.children.forEach(processNode)
+    }
+  }
+
+  processNode(svgJson)
+
+  const width = maxX - minX
+  const height = maxY - minY
+  const centerX = (minX + maxX) / 2
+  const centerY = (minY + maxY) / 2
+
+  return { minX, maxX, minY, maxY, width, height, centerX, centerY }
+}

package/drawing/getSvg.ts

@@ -0,0 +1,133 @@
+import { pathToSvgD } from "./pathToSvgD"
+import { mapColor } from "./mapColor"
+import type {
+  NinePointAnchor,
+  TextPrimitive,
+  Port,
+  SchSymbol,
+  Point,
+} from "./types"
+
+function createDiamondElement(center: Point, size: number = 0.05): 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" />`
+}
+
+function createTextElement(primitive: TextPrimitive): {
+  text: string
+  anchor: string
+} {
+  const { x, y, text, fontSize = 0.1, anchor } = primitive
+  let textAnchor: string
+  let dx: number = 0
+  let dy: number = 0
+
+  const capHeight = fontSize * 0.75
+
+  switch (anchor) {
+    case "top_left":
+      textAnchor = "start"
+      dy = fontSize
+      break
+    case "top_right":
+      textAnchor = "end"
+      dy = fontSize
+      break
+    case "bottom_left":
+      textAnchor = "start"
+      break
+    case "bottom_right":
+      textAnchor = "end"
+      break
+    case "center":
+      textAnchor = "middle"
+      dy = fontSize / 2
+      break
+    case "middle_top":
+      textAnchor = "middle"
+      dy = capHeight
+      break
+    case "middle_bottom":
+      textAnchor = "middle"
+      break
+    case "middle_left":
+      textAnchor = "start"
+      dy = capHeight / 2
+      break
+    case "middle_right":
+      textAnchor = "end"
+      dy = capHeight / 2
+      break
+  }
+
+  return {
+    text: `<text x="${x}" y="${y}" 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}" width="0.025" height="0.025" fill="blue" />`,
+  }
+}
+
+function createPortElement(port: Port): string {
+  const { x, y, labels } = port
+  const rectSize = 0.05
+  const labelFontSize = 0.08
+  const label = labels[0] || ""
+
+  return `
+    <rect x="${x - rectSize / 2}" y="${y - rectSize / 2}" width="${rectSize}" height="${rectSize}" fill="red" />
+    <text x="${x - labelFontSize / 2}" y="${y + rectSize + labelFontSize / 2}" text-anchor="middle" style="font: ${labelFontSize}px monospace; fill: #833;">${label}</text>
+  `
+}
+
+export function getSvg(
+  symbol: SchSymbol,
+  options: { width?: number; height?: number; debug?: boolean } = {},
+): string {
+  const { debug = false } = options
+  const { primitives, size, ports } = symbol
+  const svgElements = primitives.map((primitive) => {
+    switch (primitive.type) {
+      case "path":
+        return `<path d="${pathToSvgD(primitive.points, primitive.closed)}" 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)
+        return textElements.text + (debug ? textElements.anchor : "")
+      case "circle":
+        return `<circle cx="${primitive.x}" cy="${primitive.y}" r="${primitive.radius}" fill="${mapColor("primary")}" />`
+      case "box":
+        return `<rect x="${primitive.x}" y="${primitive.y}" width="${primitive.width}" height="${primitive.height}" fill="${mapColor("primary")}" />`
+      default:
+        return ""
+    }
+  })
+
+  // Use the center and the size to calculate the viewBox
+  const bufferMultiple = 1.1
+  const w = size.width * bufferMultiple
+  const h = size.height * bufferMultiple
+  const viewBox = {
+    x: symbol.center.x - w / 2,
+    y: symbol.center.y - h / 2,
+    width: w,
+    height: h,
+  }
+
+  if (options.width && !options.height) {
+    options.height = options.width! * (viewBox.height / viewBox.width)
+  } else if (!options.width && options.height) {
+    options.width = options.height! * (viewBox.width / viewBox.height)
+  } else if (!options.width && !options.height) {
+    options.width = viewBox.width
+    options.height = viewBox.height
+  }
+
+  const portElements = ports.map(createPortElement).join("\n    ")
+
+  const centerDiamond = createDiamondElement(symbol.center)
+
+  return `<svg width="${options.width}" height="${options.height}" viewBox="${viewBox.x} ${viewBox.y} ${viewBox.width} ${viewBox.height}" xmlns="http://www.w3.org/2000/svg">
+    ${svgElements.join("\n    ")}
+    ${portElements}
+    ${centerDiamond}
+  </svg>`
+}

package/drawing/index.ts

@@ -0,0 +1,11 @@
+export * from "./types"
+export * from "./box"
+export * from "./arrow"
+export * from "./getBoundsOfSvgJson"
+export * from "./circle"
+export * from "./getSvg"
+export * from "./mapColor"
+export * from "./resizeSymbol"
+export * from "./svgPathToPoints"
+export * from "./pathToSvgD"
+export * from "./text"

package/drawing/mapColor.ts

@@ -0,0 +1,10 @@
+export const mapColor = (color: string) => {
+  switch (color) {
+    case "primary":
+      return "black"
+    case "secondary":
+      return "gray"
+    default:
+      return color
+  }
+}

package/drawing/ninePointAnchorToSvgAnchor.ts

@@ -0,0 +1,11 @@
+export const ninePointAnchorToSvgAnchor = {
+  top_left: "start",
+  top_right: "end",
+  bottom_left: "start",
+  bottom_right: "end",
+  center: "middle",
+  middle_top: "middle",
+  middle_bottom: "middle",
+  middle_left: "start",
+  middle_right: "end",
+}

package/drawing/path.ts

@@ -0,0 +1,5 @@
+import type { PathPrimitive } from "drawing"
+
+export function path(options: Omit<PathPrimitive, "type">): PathPrimitive {
+  return { type: "path", ...options }
+}

package/drawing/pathToSvgD.ts

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

package/drawing/resizeSymbol.ts

@@ -0,0 +1,66 @@
+import { SchSymbol } from "./types"
+export function resizeSymbol(
+  symbol: SchSymbol,
+  newSize: { width?: number; height?: number },
+): SchSymbol {
+  const { width: oldWidth, height: oldHeight } = symbol.size
+  let scaleX = 1,
+    scaleY = 1
+
+  if (newSize.width && newSize.height) {
+    scaleX = newSize.width / oldWidth
+    scaleY = newSize.height / oldHeight
+  } else if (newSize.width) {
+    scaleX = scaleY = newSize.width / oldWidth
+  } else if (newSize.height) {
+    scaleX = scaleY = newSize.height / oldHeight
+  }
+
+  const resizedPrimitives = symbol.primitives.map((primitive) => {
+    switch (primitive.type) {
+      case "path":
+        return {
+          ...primitive,
+          points: primitive.points.map((p) => ({
+            x: p.x * scaleX,
+            y: p.y * scaleY,
+          })),
+        }
+      case "text":
+      case "circle":
+        return {
+          ...primitive,
+          x: primitive.x * scaleX,
+          y: primitive.y * scaleY,
+        }
+      case "box":
+        return {
+          ...primitive,
+          x: primitive.x * scaleX,
+          y: primitive.y * scaleY,
+          width: primitive.width * scaleX,
+          height: primitive.height * scaleY,
+        }
+      default:
+        return primitive
+    }
+  })
+
+  return {
+    ...symbol,
+    primitives: resizedPrimitives,
+    center: {
+      x: symbol.center.x * scaleX,
+      y: symbol.center.y * scaleY,
+    },
+    ports: symbol.ports.map((port) => ({
+      ...port,
+      x: port.x * scaleX,
+      y: port.y * scaleY,
+    })),
+    size: {
+      width: oldWidth * scaleX,
+      height: oldHeight * scaleY,
+    },
+  }
+}

package/drawing/rotateSymbol.ts

@@ -0,0 +1,94 @@
+import { rotate, applyToPoint } from "transformation-matrix"
+import type {
+  SchSymbol,
+  Primitive,
+  Point,
+  Port,
+  NinePointAnchor,
+} from "./types"
+
+const rotateAnchor = (anchor: NinePointAnchor): NinePointAnchor => {
+  switch (anchor) {
+    case "middle_top":
+      return "middle_right"
+    case "middle_bottom":
+      return "middle_left"
+  }
+  return anchor
+}
+
+export const rotateSymbol = (
+  symbol: SchSymbol,
+  overrides?: Partial<SchSymbol>,
+): SchSymbol => {
+  const transform = rotate(Math.PI / 2, symbol.center.x, symbol.center.y)
+
+  const { primitives, center, size, ports } = symbol
+
+  const rotatedPrimitives = primitives.map((primitive): Primitive => {
+    primitive = { ...primitive }
+    switch (primitive.type) {
+      case "path":
+        return {
+          ...primitive,
+          points: primitive.points.map(
+            (point) => applyToPoint(transform, point) as Point,
+          ),
+        }
+      case "text":
+        const rotatedPoint = applyToPoint(transform, {
+          x: primitive.x,
+          y: primitive.y,
+        }) as Point
+
+        primitive.anchor = rotateAnchor(primitive.anchor)
+
+        return {
+          ...primitive,
+          x: rotatedPoint.x,
+          y: rotatedPoint.y,
+        }
+      case "circle":
+        const rotatedCenter = applyToPoint(transform, {
+          x: primitive.x,
+          y: primitive.y,
+        }) as Point
+        return {
+          ...primitive,
+          x: rotatedCenter.x,
+          y: rotatedCenter.y,
+        }
+      case "box":
+        const rotatedCorner = applyToPoint(transform, {
+          x: primitive.x,
+          y: primitive.y,
+        }) as Point
+        return {
+          ...primitive,
+          x: rotatedCorner.x,
+          y: rotatedCorner.y,
+          width: primitive.height,
+          height: primitive.width,
+        }
+    }
+  })
+
+  const rotatedPorts = ports.map(
+    (port): Port => ({
+      ...port,
+      ...(applyToPoint(transform, port) as Point),
+    }),
+  )
+
+  return {
+    primitives: rotatedPrimitives,
+    center,
+    ports: rotatedPorts,
+    // TODO recompute size using overrides
+    size: {
+      width: size.height,
+      height: size.width,
+    },
+    ...overrides,
+  }
+}

package/drawing/svgPathToPoints.ts

@@ -0,0 +1,50 @@
+import { parseSVG, makeAbsolute } from "svg-path-parser"
+
+export function svgPathToPoints(d: string): Array<{ x: number; y: number }> {
+  const parsedPath = parseSVG(d)
+  const absolutePath = makeAbsolute(parsedPath)
+
+  const points: Array<{ x: number; y: number }> = []
+  let firstPoint: { x: number; y: number } | null = null
+
+  for (const command of absolutePath) {
+    switch (command.code) {
+      case "M":
+        if (!firstPoint) {
+          firstPoint = { x: command.x, y: command.y }
+        }
+        points.push({ x: command.x, y: command.y })
+        break
+      case "L":
+      case "H":
+      case "V":
+        points.push({ x: command.x, y: command.y })
+        break
+      case "C":
+        points.push(
+          { x: command.x1, y: command.y1 },
+          { x: command.x2, y: command.y2 },
+          { x: command.x, y: command.y },
+        )
+        break
+      case "S":
+      case "Q":
+        points.push(
+          { x: command.x0, y: command.y0 },
+          { x: command.x, y: command.y },
+        )
+        break
+      case "T":
+      case "A":
+        points.push({ x: command.x, y: command.y })
+        break
+      case "Z":
+        if (firstPoint) {
+          points.push(firstPoint)
+        }
+        break
+    }
+  }
+
+  return points
+}

package/drawing/text.ts

@@ -0,0 +1,8 @@
+import type { TextPrimitive } from "drawing"
+
+export function text(
+  text: string,
+  options: Omit<TextPrimitive, "type" | "text">,
+): TextPrimitive {
+  return { type: "text", text, ...options }
+}

package/drawing/types.ts

@@ -0,0 +1,90 @@
+export interface Point {
+  x: number
+  y: number
+}
+
+export interface Port {
+  x: number
+  y: number
+  labels: string[]
+}
+
+export interface PathPrimitive {
+  type: "path"
+  fill: boolean
+  points: Point[]
+  color: string
+  closed?: boolean
+}
+
+export interface TextPrimitive {
+  type: "text"
+  text: string
+  fontSize?: number
+  x: number
+  y: number
+  anchor: NinePointAnchor
+}
+
+export interface CirclePrimitive {
+  type: "circle"
+  x: number
+  y: number
+  radius: number
+}
+
+export interface BoxPrimitive {
+  type: "box"
+  x: number
+  y: number
+  width: number
+  height: number
+  anchor: string
+}
+
+export type Primitive =
+  | PathPrimitive
+  | TextPrimitive
+  | CirclePrimitive
+  | BoxPrimitive
+
+export interface SchSymbol {
+  primitives: Primitive[]
+  center: Point
+  ports: Port[]
+  size: {
+    width: number
+    height: number
+  }
+}
+
+export type Bounds = {
+  minX: number
+  maxX: number
+  minY: number
+  maxY: number
+  width: number
+  height: number
+  centerX: number
+  centerY: number
+}
+
+export interface SvgData {
+  paths: Record<string, PathPrimitive>
+  texts: Record<string, TextPrimitive>
+  refblocks: Record<string, Point>
+  bounds: Bounds
+}
+
+export type SvgAnchor = "start" | "middle" | "end"
+
+export type NinePointAnchor =
+  | "top_left"
+  | "top_right"
+  | "bottom_left"
+  | "bottom_right"
+  | "center"
+  | "middle_top"
+  | "middle_bottom"
+  | "middle_left"
+  | "middle_right"

package/index.ts

@@ -0,0 +1 @@
+export { default as symbols } from "./symbols"