schematic-symbols 0.0.7 → 0.0.9

package/biome.json

@@ -1,44 +0,0 @@
-{
-  "$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

@@ -1,22 +0,0 @@
-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/scripts/build.ts

@@ -1,18 +0,0 @@
-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

@@ -1,52 +0,0 @@
-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

@@ -1,146 +0,0 @@
-// @ts-ignore
-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

@@ -1,119 +0,0 @@
-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) 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
-  // TODO
-  return null as any
-}

package/scripts/lib/findInnerText.ts

@@ -1,11 +0,0 @@
-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

@@ -1,60 +0,0 @@
-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

@@ -1,33 +0,0 @@
-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

@@ -1,48 +0,0 @@
-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":
-          // @ts-ignore
-          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(" ")
-}