[console] - experimentation with additional schematic symbols

client/py/examples/control/tpc/optimization_auto.py

@@ -127,7 +127,7 @@ def run_tpc(auto: Controller):
 
             dual_press_end = sy.TimeStamp.now()
             parent_rng.create_sub_range(
-                name=f"Dual Press Sequence",
+                name=f"Setup",
                 time_range=sy.TimeRange(dual_press_start, dual_press_end),
                 color="#D81E5B",
             )
@@ -158,7 +158,7 @@ def run_tpc(auto: Controller):
 
             press_tank_end = sy.TimeStamp.now()
             parent_rng.create_sub_range(
-                name=f"Press Tank Pressurization",
+                name=f"Pressurization",
                 time_range=sy.TimeRange(press_tank_start, press_tank_end),
                 color="#1E90FF",
             )
@@ -172,7 +172,7 @@ def run_tpc(auto: Controller):
             print("Test complete. Safeing System")
 
             rng = parent_rng.create_sub_range(
-                name=f"Bang Bang Sim",
+                name=f"Test",
                 time_range=sy.TimeRange(start, sy.TimeStamp.now()),
                 color="#bada55",
             )

console/src/main.tsx

@@ -9,8 +9,8 @@
 
 import "@/index.css";
 import "@synnaxlabs/media/dist/style.css";
-import "@synnaxlabs/pluto/dist/style.css";
 
+// import "@synnaxlabs/pluto/dist/style.css";
 import { Provider } from "@synnaxlabs/drift/react";
 import { type Haul, Pluto, type state, type Triggers } from "@synnaxlabs/pluto";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

console/src/schematic/Schematic.tsx

@@ -127,6 +127,7 @@ const SymbolRenderer = ({
 
   return (
     <C.Symbol
+      id={symbolKey}
       aetherKey={symbolKey}
       position={position}
       selected={selected}

pluto/src/vis/diagram/Diagram.css

@@ -22,9 +22,9 @@
     border: var(--pluto-border-width) dashed var(--pluto-primary-z-40) !important;
 }
 
-.react-flow__node.selected {
+.react-flow__node.selected .pluto-symbol-primitive {
     /* make an inset box shadow to simulate a background */
-    box-shadow: 0 0 0 1000px var(--pluto-primary-z-20) inset !important;
+    box-shadow: 0 0 0 1000px var(--pluto-primary-z) inset !important;
 
     & .react-flow__resize-control {
         display: block;

pluto/src/vis/schematic/Forms.tsx

@@ -756,18 +756,12 @@ export const TextBoxForm = (): ReactElement => (
   </FormWrapper>
 );
 
-export const ArrowForm = (): ReactElement => (
+export const OffPageReferenceForm = (): ReactElement => (
   <FormWrapper direction="x" align="stretch">
     <Align.Space direction="y" grow>
-      <Align.Space direction="x" align="stretch">
-        <Form.Field<string> path="text" label="Text" padHelpText={false} grow>
-          {(p) => <Input.Text selectOnFocus {...p} />}
-        </Form.Field>
-        <Form.Field<Text.Level> path="level" label="Text Size" padHelpText={false}>
-          {(p) => <Text.SelectLevel {...p} />}
-        </Form.Field>
-      </Align.Space>
+      <LabelControls path="label" />
       <ColorControl path="color" />
     </Align.Space>
+    <OrientationControl path="" />
   </FormWrapper>
 );

pluto/src/vis/schematic/Symbols.tsx

@@ -1374,20 +1374,35 @@ export const TextBox = (props: SymbolProps<TextBoxProps>): ReactElement => (
 );
 
 export const TextBoxPreview = ({
-  text = "example text",
   level = "p",
   width = 100,
   ...rest
 }: SymbolProps<TextBoxProps>): ReactElement => (
-  <Primitives.TextBox text={text} level={level} width={width} {...rest} />
+  <Primitives.TextBox
+    className={CSS.B("symbol")}
+    level={level}
+    width={width}
+    {...rest}
+  />
 );
 
-export interface ArrowProps extends Primitives.ArrowProps {}
+export interface ArrowProps extends Omit<Primitives.OffPageReferenceProps, "label"> {
+  label: LabelExtensionProps;
+}
 
-export const Arrow = (props: SymbolProps<ArrowProps>): ReactElement => (
-  <Primitives.Arrow {...props} />
+export const OffPageReference = ({
+  label: { label, level },
+  position: _,
+  ...props
+}: SymbolProps<ArrowProps>): ReactElement => (
+  <Primitives.OffPageReference
+    label={label}
+    level={level}
+    {...props}
+    className={CSS.B("symbol")}
+  />
 );
 
-export const ArrowPreview = (props: ArrowProps) => (
-  <Primitives.Arrow text="Arrow" {...props} />
+export const OffPageReferencePreview = ({ label: _, ...props }: ArrowProps) => (
+  <Primitives.OffPageReference label="Off Page" {...props} />
 );

pluto/src/vis/schematic/primitives/Primitives.css

@@ -187,18 +187,19 @@
     }
 }
 
-.pluto-arrow {
+/*
+ .pluto-arrow {
     display: flex;
     align-items: center;
     --padding: 10px;
     border: 2px solid black;
-    border-right: none; /* Remove right border */
+    border-right: none; Remove right border
     border-radius: var(--pluto-border-radius);
     height: calc(var(--text-size) + var(--padding));
     padding: 0 2rem;
     border-color: var(--border-color);
 
-    /* add an after pseudo element that will be the arrow */
+    add an after pseudo element that will be the arrow
     &::before {
         content: "";
         display: block;
@@ -224,4 +225,53 @@
         border-left: calc(var(--internal-bheight) - 1px) solid var(--pluto-gray-l0);
         top: -1px;
     }
+} */
+
+.pluto-arrow {
+    &.pluto--top {
+        transform: rotate(-90deg);
+    }
+    &.pluto--bottom {
+        transform: rotate(90deg);
+    }
+    &.pluto--left {
+        transform: rotate(180deg);
+        .pluto-text {
+            transform: rotate(180deg);
+        }
+    }
+    .wrapper {
+        display: inline-block;
+        filter: url("#goo");
+        .outline {
+            padding: 1px;
+            clip-path: polygon(
+                0 0,
+                calc(100% - 2rem) 0,
+                100% 50%,
+                calc(100% - 2rem) 100%,
+                0 100%
+            );
+
+            .bg {
+                clip-path: polygon(
+                    0 0,
+                    calc(100% - 2rem) 0,
+                    calc(100% - 2px) 50%,
+                    calc(100% - 2rem) 100%,
+                    0 100%
+                );
+                margin-top: 1px;
+                margin-bottom: 1px;
+                margin-left: 1px;
+                padding-right: 2.5rem;
+                padding-top: 0.5rem;
+                padding-bottom: 0.5rem;
+                padding-left: 1rem;
+                background-color: var(--pluto-gray-l0);
+                width: calc(100% - 1px);
+                height: calc(100% - 2px);
+            }
+        }
+    }
 }

pluto/src/vis/schematic/primitives/Primitives.tsx

@@ -96,7 +96,9 @@ const adjustHandle = (
   top: number,
   left: number,
   orientation: location.Outer,
+  prevent: boolean = false,
 ): { left: number; top: number } => {
+  if (prevent) return { left, top };
   if (orientation === "left") return { top, left };
   if (orientation === "right") return { top: 100 - top, left: 100 - left };
   if (orientation === "top") return { top: 100 - left, left: top };
@@ -140,6 +142,8 @@ const HandleBoundary = ({ children, orientation }: SmartHandlesProps): ReactElem
 interface HandleProps extends Omit<RFHandleProps, "type" | "position"> {
   orientation: location.Outer;
   location: location.Outer;
+  position?: RFPosition;
+  preventAutoAdjust?: boolean;
   left: number;
   top: number;
   id: string;
@@ -148,11 +152,12 @@ interface HandleProps extends Omit<RFHandleProps, "type" | "position"> {
 const Handle = ({
   location,
   orientation,
+  preventAutoAdjust,
   left,
   top,
   ...props
 }: HandleProps): ReactElement => {
-  const adjusted = adjustHandle(top, left, orientation);
+  const adjusted = adjustHandle(top, left, orientation, preventAutoAdjust);
   return (
     <RFHandle
       position={smartPosition(location, orientation)}
@@ -1841,36 +1846,83 @@ export const Compressor = ({
   </Toggle>
 );
 
-export interface ArrowProps extends DivProps {
-  text?: string;
+export interface OffPageReferenceProps extends DivProps {
+  label?: string;
   level?: Text.TextProps["level"];
   color?: Color.Crude;
 }
 
-export const Arrow: React.FC<ArrowProps> = ({
+export const OffPageReference: React.FC<OffPageReferenceProps> = ({
+  id,
   className,
-  orientation = "left",
-  text = "text",
+  orientation = "top",
+  label = "text",
   color = "black",
   level = "p",
   ...props
 }) => {
-  const borderColor = Color.cssString(color);
+  const element = document.querySelector(`[data-id="${id}"]`);
+  // add the orientation to the class list
+  if (element) {
+    element.classList.add(orientation);
+  }
+
   return (
     <Div
+      className={CSS(CSS.B("arrow"), CSS.loc(orientation), className)}
+      orientation={orientation}
       style={{
-        // @ts-expect-error CSS variables
-        "--border-color": borderColor,
-        "--text-size": `var(--pluto-${level}-line-height)`,
+        transform: orientation === "top" ? "rotate(-90deg)" : "",
       }}
-      className={CSS(className, CSS.B("arrow"), CSS.BM("arrow", level))}
       {...props}
     >
+      <div className="wrapper">
+        <div className="outline" style={{ backgroundColor: Color.cssString(color) }}>
+          <div className="bg">
+            <Text.Text level={level} className={CSS.BE("symbol", "label")}>
+              {label}
+            </Text.Text>
+          </div>
+        </div>
+      </div>
       <HandleBoundary orientation={orientation}>
-        <Handle location="left" orientation={orientation} left={0} top={50} id="1" />
-        <Handle location="right" orientation={orientation} left={100} top={50} id="2" />
+        <Handle
+          location="left"
+          orientation={orientation}
+          preventAutoAdjust
+          left={0}
+          top={50}
+          id="1"
+        />
+        <Handle
+          location="right"
+          preventAutoAdjust
+          orientation={orientation}
+          left={98}
+          top={50}
+          id="2"
+        />
       </HandleBoundary>
-      <Text.Text level={level}>{text}</Text.Text>
+      <svg
+        style={{ visibility: "hidden", position: "absolute" }}
+        width="0"
+        height="0"
+        xmlns="http://www.w3.org/2000/svg"
+        version="1.1"
+      >
+        <defs>
+          <filter id="goo">
+            <feGaussianBlur in="SourceGraphic" stdDeviation="1.5" result="blur" />
+            <feColorMatrix
+              in="blur"
+              mode="matrix"
+              values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9"
+              result="goo"
+            />
+            <feComposite in="SourceGraphic" in2="goo" operator="atop" />
+          </filter>
+        </defs>
+      </svg>
     </Div>
   );
 };

pluto/src/vis/schematic/registry.ts

@@ -14,11 +14,11 @@ import { telem } from "@/telem/aether";
 import { control } from "@/telem/control/aether";
 import { type Theming } from "@/theming";
 import {
-  ArrowForm,
   ButtonForm,
   CommonStyleForm,
   CommonToggleForm,
   LightForm,
+  OffPageReferenceForm,
   SetpointForm,
   type SymbolFormProps,
   TankForm,
@@ -36,8 +36,6 @@ import {
   AngledValve,
   AngledValvePreview,
   type AngledValveProps,
-  Arrow,
-  ArrowPreview,
   type ArrowProps,
   Box,
   BoxPreview,
@@ -84,6 +82,8 @@ import {
   NeedleValve,
   NeedleValvePreview,
   type NeedleValveProps,
+  OffPageReference,
+  OffPageReferencePreview,
   Orifice,
   OrificePreview,
   type OrificeProps,
@@ -161,7 +161,7 @@ const VARIANTS = [
   "agitator",
   "angledReliefValve",
   "angledValve",
-  "arrow",
+  "offPageReference",
   "box",
   "burstDisc",
   "button",
@@ -824,22 +824,21 @@ const textBox: Spec<TextBoxProps> = {
   zIndex: Z_INDEX_LOWER,
 };
 
-const arrow: Spec<ArrowProps> = {
-  name: "Arrow",
-  key: "arrow",
-  Form: ArrowForm,
-  Symbol: Arrow,
+const offPageReference: Spec<ArrowProps> = {
+  name: "Off Page Reference",
+  key: "offPageReference",
+  Form: OffPageReferenceForm,
+  Symbol: OffPageReference,
   defaultProps: (t) => ({
     color: t.colors.gray.l9.rgba255,
-    text: "Arrow",
-    level: "p",
+    ...zeroLabel("Off Page Reference"),
   }),
-  Preview: ArrowPreview,
+  Preview: OffPageReferencePreview,
   zIndex: Z_INDEX_UPPER,
 };
 
 export const SYMBOLS: Record<Variant, Spec<any>> = {
-  arrow,
+  offPageReference,
   value,
   light,
   switch: switch_,