Node Visualization Improvements

src/components/Node.astro

@@ -1,18 +1,25 @@
 ---
-import { categoryColors } from "./categoryColors.js";
-import { socketColors } from "./socketColors.js";
+import type { Node } from "../node-schema";
+import { categoryColors, type Category } from "./categoryColors";
+import { socketColors, type SocketType } from "./socketColors";
 
-const getSocketDot = (type, contextful) => {
+interface Props {
+    data: Node
+}
+
+const getSocketDot = (type: SocketType, contextful : boolean) => {
     const color = socketColors[type] ?? "#999";
-    return `<div style="
-    width: 10px;
-    height: 10px;
-    border-radius: ${contextful ? "10%" : "50%"};
-    ${contextful ? "transform: rotate(45deg);" : ""}
-    background: ${color};
-  "></div>`;
+    return `<div
+    style="background: ${color};"
+    class="w-2.5 h-2.5 ${contextful ? "rounded-xs" : "rounded-full"} rotate-45"></div>`;
 };
 
+const getBooleanDefaultContent = (value: "true" | "false" | boolean | any) => {
+    if ((typeof value === "string" && value.toLowerCase() === "true") || value === true) {
+        return `<span class="pixi-icon small icon-check-tick text-red-700"></span>`
+    }
+}
+
 const checkerboard = `background-image:
   linear-gradient(45deg, #444 25%, transparent 25%),
   linear-gradient(-45deg, #444 25%, transparent 25%),
@@ -24,79 +31,88 @@ background-position: 0 0, 0 8px, 8px -8px, -8px 0px;`;
 const { data } = Astro.props;
 ---
 
-<div
-    style={`
-  width: 256px;
-  border: 1px solid #333;
-  border-radius: 8px;
-  font-family: sans-serif;
-  background-color: #1e1e1e;
-  color: white;
-  overflow: hidden;
-  box-shadow: 0 0 8px rgba(0,0,0,0.5);
-`}
->
-    <div
-        style={`
-    background-color: ${categoryColors[data.category] || "#3a3a3a"};
-    padding: 4px 8px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    font-weight: bold;
-    font-size: 14px;
-  `}
+<div class="bg-[#303030] w-64 border border-[#333] rounded-lg font-sans text-white shadow-[0_0_8px_rgba(0,0,0,0.5)]">
+    <div class="px-1 py-2 rounded-t-lg flex justify-between items-center font-bold text-sm"
+        style={`background-color: ${categoryColors[data.category] || "#3a3a3a"};`}
     >
-        <span
-            ><span
-                class=`pixi-icon small ${data.icon}`
-                style="vertical-align: middle;"></span>
-            {data.name}</span
-        >
+        <span>
+            <span
+                class=`pixi-icon small ${data.icon} !align-middle inline-block w-4`></span>
+            {data.name}
+        </span>
     </div>
 
-    <div style="padding: 0 2px">
-        {
-            data.outputs?.map((output) => (
-                <div style="margin: 0px;" key={output.name}>
-                    <div style="display: flex; justify-content: end; flex-direction: row; align-items: baseline; gap: 4px;">
-                        <span style="font-size: 12px;">{output.name}</span>
-                        <div set:html={output.hideSocket ? "" : getSocketDot(output.type, output.isContextful)} />
+    <div class="my-2 ml-[-5.5px] mr-[-7.5px]">
+        <div>
+            {
+                data.outputs?.map((output) => (
+                    <div class="m-0 min-h-[32px] flex flex-row items-center justify-between">
+                            <div></div>
+                            <div class="flex flex-row items-center mt-0">
+                                <span class="me-2 text-xs">
+                                    {output.name}
+                                </span>
+                                <div
+                                    class="w-3"
+                                    set:html={
+                                        output.hideSocket
+                                            ? ""
+                                            : getSocketDot(
+                                                  output.type,
+                                                  output.isContextful,
+                                              )
+                                    }
+                                />
+                            </div>
                     </div>
-                </div>
-            ))
-        }
-    </div>
+                ))
+            }
+        </div>
 
-    <div style="margin: 0px 0px 0px 0px; padding: 0 2px;">
-        {
-            data.inputs?.map((input) => (
-                <div style="margin: 4px 0; 0 0" key={input.name}>
-                    <div style="display: flex; flex-direction: row; align-items: baseline; gap: 4px;">
-                        <div set:html={input.hideSocket ? "" : getSocketDot(input.type, input.isContextful)} />
-                        <span style="font-size: 12px;">{input.name}</span>
-                        {input.default ? (
-                            <div
-                                style={`
-              background: #2c2c2c;
-              border-radius: 4px;
-              display: inline-block;
-              padding: 2px 6px;
-              font-size: 12px;
-              color: #ccc;
-              margin-top: 2px;
-            `}
-                            >
-                                {input.default}
+        <div class="mt-0">
+            {
+                data.inputs?.map((input) => (
+                    <div class="m-0 min-h-[32px] flex flex-row items-center justify-between">
+                            <div class="flex flex-row items-center">
+                                <div
+                                    class="w-3"
+                                    set:html={
+                                        input.hideSocket
+                                            ? ""
+                                            : getSocketDot(
+                                                  input.type,
+                                                  input.isContextful,
+                                              )
+                                    }
+                                />
+
+                                {input.default && input.type === "Boolean" ? (
+                                    <div class="bg-[#1e1e1e] aspect-square h-[22px] rounded-sm flex items-center justify-center m-0 ms-1 border border-[#3f3f46]">
+                                        <Fragment set:html={getBooleanDefaultContent(input.default)} />
+                                    </div>
+                                ) : null}
+
+                                <span class="ms-1 text-xs">
+                                    {input.name}
+                                </span>
                             </div>
-                        ) : null}
+
+                            {input.default && input.type !== "Boolean" ? (
+                                <div class="bg-[#1e1e1e] text-[#ccc] w-1/2 rounded-sm inline-block px-1.5 py-1 m-0 me-4 text-sm border border-[#3f3f46]">
+                                    {input.default}
+                                </div>
+                            ) : null}
                     </div>
-                </div>
-            ))
-        }
+                ))
+            }
+        </div>
     </div>
 
-    {data.hasPreview ? <div
-        style={`height: 256px; border-radius: 4px; margin-top: 8px; ${checkerboard}`}>
-    </div> : null}
+    {
+        data.hasPreview ? (
+            <div class="aspect-square mt-4 rounded"
+                style={`${checkerboard}`}
+            />
+        ) : null
+    }
 </div>

src/components/NodeDoc.astro

@@ -3,8 +3,21 @@ import { Badge } from "@astrojs/starlight/components";
 import AnchorHeading from "@astrojs/starlight/components/AnchorHeading.astro";
 import { categoryColors } from "./categoryColors.js";
 import Node from "./Node.astro";
+import type { Node as NodeType, SocketBase } from "../node-schema.js";
 
-const data = Astro.props;
+const getPropertyTypeUri = (socket: SocketBase) => {
+    if (socket.typeLink) {
+        return socket.typeLink;
+    }
+
+    if (socket.type === "Default" && socket.displayType) {
+        return null;
+    }
+
+    return `/docs/usage/node-graph/property-sockets/#-${socket.type.toLowerCase().replace(" ", "-")}`;
+}
+
+const data = Astro.props as NodeType;
 ---
 
 <div
@@ -59,16 +72,16 @@ const data = Astro.props;
 <br/>
 {
     data.inputs?.map((input) => (
-        <div key={input.name}>
+        <div>
             <AnchorHeading level="3" id={input.name.toLowerCase()}>
                 <code>{input.name}</code>
             </AnchorHeading>
             <p>
                 <strong>Type:</strong>{" "}
                 <a
-                    href={input.typeLink ?? `/docs/usage/node-graph/property-sockets/#-${input.type.toLowerCase().replace(" ", "-")}`}
+                    href={getPropertyTypeUri(input)}
                 >
-                    {input.type}
+                    {input.displayType ?? input.type}
                 </a>
                 <br />
                 <strong>Default:</strong>{" "}
@@ -94,16 +107,16 @@ const data = Astro.props;
 <br/>
 {
     data.outputs?.map((output) => (
-        <div key={output.name}>
+        <div>
             <AnchorHeading level="3" id={output.name.toLowerCase()}>
                 <code>{output.name}</code>
             </AnchorHeading>
             <p>
                 <strong>Type:</strong>{" "}
                 <a
-                    href={output.typeLink ?? `/docs/usage/node-graph/property-sockets/#-${output.type.toLowerCase()}`}
+                    href={getPropertyTypeUri(output)}
                 >
-                    {output.type}
+                    {output.displayType ?? output.type}
                 </a>
                 <br />
                 <strong>Default:</strong>{" "}

src/components/categoryColors.ts

@@ -0,0 +1,29 @@
+import { z } from "astro/zod";
+
+export const CategorySchema = z.enum([
+  "Image",
+  "Structure",
+  "Filters",
+  "Shape",
+  "Numbers",
+  "Color",
+  "Animation",
+  "Effects",
+  "Matrix",
+  "Workspace"
+] as const);
+
+export type Category = z.infer<typeof CategorySchema>;
+
+export const categoryColors: Record<Category, string> = {
+  Image: "#5B7348",
+  Structure: "#735C39",
+  Filters: "#733535",
+  Shape: "#654266",
+  Numbers: "#666666",
+  Color: "#3B665D",
+  Animation: "#4D4466",
+  Effects: "#e36262",
+  Matrix: "#9169ff",
+  Workspace: "#303030"
+};

src/components/overrides/MarkdownContent.astro

@@ -3,9 +3,10 @@ import ImageZoom from 'starlight-image-zoom/components/ImageZoom.astro'
 import StarlightVideosMarkdownContent from 'starlight-videos/components/MarkdownContent.astro'
 import NodeDoc from '../NodeDoc.astro'
 import Default from '@astrojs/starlight/components/MarkdownContent.astro'
+import type { Node } from '../../node-schema';
 
 const isNodeDoc = Astro.locals.starlightRoute.id.startsWith('usage/node-graph/nodes/');
-const nodeData = Astro.locals.starlightRoute.entry.data.node;
+const nodeData = Astro.locals.starlightRoute.entry.data.node as Node;
 
 ---
 

src/components/socketColors.js → src/components/socketColors.ts

@@ -1,4 +1,30 @@
-export const socketColors = {
+import { z } from "astro/zod";
+
+export const SocketTypeSchema = z.enum([
+  "Texture",
+  "Filter",
+  "Boolean",
+  "Float",
+  "Double",
+  "Color",
+  "Paintable",
+  "Painter",
+  "VecD",
+  "Vec3D",
+  "VecI",
+  "Integer",
+  "String",
+  "Ellipse Data",
+  "Points Data",
+  "Text Data",
+  "Vector Shape",
+  "Matrix3x3",
+  "Default",
+] as const);
+
+export type SocketType = z.infer<typeof SocketTypeSchema>;
+
+export const socketColors: Record<SocketType, string> = {
   Texture: "#99c47a",
   Filter: "#cc5c5c",
   Boolean: "#68abdf",

src/content.config.ts

@@ -1,45 +1,10 @@
 import { defineCollection } from 'astro:content';
 import { docsLoader } from '@astrojs/starlight/loaders';
 import { docsSchema } from '@astrojs/starlight/schema';
-import { z } from 'astro/zod';
-import { videosSchema } from 'starlight-videos/schemas';
+import { ExtendedSchema } from "./node-schema";
 
 export const collections = {
 	docs: defineCollection({ loader: docsLoader(), schema: docsSchema({ 
-		extend: 
-			z.object({
-				node: z.object({
-					name: z.string(),
-					category: z.string(),
-					description: z.string(),
-					isPair: z.boolean().optional().default(false),
-					pairNode: z.string().optional(),
-					hasPreview: z.boolean().optional().default(false),
-					icon: z.string().optional(),
-					inputs: z.array(z.object({
-						name: z.string(),
-						type: z.string(),
-						typeLink: z.string().optional(),
-						min: z.string().optional(),
-						max: z.string().optional(),
-						hideSocket: z.boolean().optional().default(false),
-						isContextful: z.boolean().optional().default(false),
-						description: z.string().optional(),
-						default: z.any().optional(),
-					})).optional().nullable(),
-				outputs: z.array(z.object({
-						name: z.string(),
-						type: z.string(),
-						min: z.string().optional(),
-						max: z.string().optional(),
-						typeLink: z.string().optional(),
-						hideSocket: z.boolean().optional().default(false),
-						default: z.any().optional(),
-						isContextful: z.boolean().optional().default(false),
-						description: z.string().optional(),
-					})).optional().nullable(),
-
-				}).optional(),
-			})
+		extend: ExtendedSchema
 	}) }),
 };

src/content/docs/usage/Animating/procedural.mdx

@@ -69,7 +69,8 @@ Without these, you'll have a hard time animating.
     },
     {
       name: "Easing Type",
-      type: "EasingType (Enum)",
+      type: "Default",
+      displayType: "EasingType (Enum)",
       hideSocket: true,
       typeLink: "/docs/usage/node-graph/nodes/animation/easing#easing-types",
       description: "The type of easing function to apply to the input value. This determines how the value transitions over time.",