synnaxlabs · pjdotson · Dec 19, 2024 · Dec 17, 2024 · Dec 17, 2024 · Dec 19, 2024
diff --git a/console/package.json b/console/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@synnaxlabs/console",
   "private": true,
-  "version": "0.36.0",
+  "version": "0.36.1",
   "type": "module",
   "scripts": {
     "dev": "tauri dev",

diff --git a/pluto/package.json b/pluto/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@synnaxlabs/pluto",
-  "version": "0.36.0",
+  "version": "0.36.1",
   "type": "module",
   "scripts": {
     "build": "tsc --noEmit && vite build",

diff --git a/pluto/src/channel/LinePlot.tsx b/pluto/src/channel/LinePlot.tsx
@@ -273,6 +273,7 @@ const XAxis = ({
           onPositionChange={(value) =>
             onRuleChange?.({ key: rule.key, position: value })
           }
+          onUnitsChange={(value) => onRuleChange?.({ key: rule.key, units: value })}
           onSelect={() => onSelectRule?.(rule.key)}
         />
       ))}
@@ -341,6 +342,7 @@ const YAxis = ({
           key={r.key}
           onLabelChange={(value) => onRuleChange?.({ key: r.key, label: value })}
           onPositionChange={(value) => onRuleChange?.({ key: r.key, position: value })}
+          onUnitsChange={(value) => onRuleChange?.({ key: r.key, units: value })}
           onClick={() => onSelectRule?.(r.key)}
         />
       ))}

diff --git a/pluto/src/header/Header.css b/pluto/src/header/Header.css
@@ -16,6 +16,12 @@
     .pluto-header__text,
     .pluto-breadcrumb {
         padding: 1rem;
+        overflow: hidden;
+        .pluto-text {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
     }
     .pluto-header-button-title {
         flex-grow: 1;

diff --git a/pluto/src/vis/rule/Rule.css b/pluto/src/vis/rule/Rule.css
@@ -21,7 +21,7 @@
         width: 100%;
     }
 
-    & > .pluto-rule__label {
+    & > .pluto-rule__tag {
         width: fit-content;
         margin-top: -0.5rem;
         border-top: none;
@@ -38,11 +38,11 @@
             line-height: 1;
             font-weight: 500;
         }
-        & .pluto-text--editable {
+        & .pluto-label {
+            margin-left: 1rem;
             line-height: 1;
-            padding-top: 1rem;
-            padding-bottom: 0.75rem;
-            padding-left: 1rem;
+            margin-top: 1rem;
+            margin-bottom: 0.75rem;
         }
         z-index: 20;
     }

diff --git a/pluto/src/vis/rule/Rule.tsx b/pluto/src/vis/rule/Rule.tsx
@@ -32,6 +32,7 @@ export interface RuleProps
   label?: string;
   onLabelChange?: (label: string) => void;
   units?: string;
+  onUnitsChange?: (label: string) => void;
   onPositionChange?: (position: number) => void;
   onSelect?: () => void;
 }
@@ -44,6 +45,7 @@ export const Rule = Aether.wrap<RuleProps>(
     position: propsPosition,
     onLabelChange,
     onPositionChange,
+    onUnitsChange,
     units = "",
     color,
     lineWidth,
@@ -134,7 +136,7 @@ export const Rule = Aether.wrap<RuleProps>(
         <Align.Space
           direction="x"
           align="center"
-          className={CSS(className, CSS.BE("rule", "label"))}
+          className={CSS(className, CSS.BE("rule", "tag"))}
           bordered
           onClick={onSelect}
           size={1}
@@ -147,6 +149,7 @@ export const Rule = Aether.wrap<RuleProps>(
           {...props}
         >
           <Text.Editable
+            className={CSS.B("label")}
             level="small"
             value={internalLabel}
             onChange={setInternalLabel}
@@ -156,9 +159,24 @@ export const Rule = Aether.wrap<RuleProps>(
             direction="y"
             style={{ borderColor: Color.cssString(color) }}
           />
-          <Text.Text level="small" color={textColor}>
-            {`${propsPosition.toFixed(2)} ${units}`}
-          </Text.Text>
+          <Align.Space size="small" direction="x" align="center">
+            <Text.Editable
+              value={propsPosition.toFixed(2)}
+              onChange={(v) => {
+                const num = Number(v);
+                if (!isFinite(num)) return;
+                onPositionChange?.(num);
+              }}
+              level="small"
+              color={textColor}
+            />
+            <Text.MaybeEditable
+              level="small"
+              color={textColor}
+              value={units}
+              onChange={onUnitsChange}
+            />
+          </Align.Space>
         </Align.Space>
       </div>
     );

diff --git a/pluto/src/vis/rule/aether/aether.ts b/pluto/src/vis/rule/aether/aether.ts
@@ -66,10 +66,7 @@ export class Rule extends aether.Leaf<typeof ruleStateZ, InternalState> {
       if (delta < PIXEL_POS_UPDATE_DIST && !wasDragging)
         return this.state.pixelPosition;
       this.lastUpdateRef = this.state.pixelPosition;
-      const pos = scale.pos(
-        (this.state.pixelPosition - box.top(plot) + box.top(container)) /
-          box.height(plot),
-      );
+      const pos = scale.pos(this.state.pixelPosition / box.height(plot));
       this.setState((p) => ({ ...p, position: pos }));
       return this.state.pixelPosition;
     }
@@ -81,9 +78,7 @@ export class Rule extends aether.Leaf<typeof ruleStateZ, InternalState> {
     }
 
     const pixelPos =
-      scale.reverse().pos(this.state.position as number) * box.height(plot) +
-      box.top(plot) -
-      box.top(container);
+      scale.reverse().pos(this.state.position as number) * box.height(plot);
     if (!isNaN(pixelPos)) {
       if (this.state.pixelPosition != null) {
         const delta = Math.abs(pixelPos - this.state.pixelPosition);
@@ -102,16 +97,18 @@ export class Rule extends aether.Leaf<typeof ruleStateZ, InternalState> {
     const { upper2d: canvas } = renderCtx;
     const draw = this.internal.draw;
 
-    let pixelPos = this.updatePositions(props);
-    pixelPos += box.top(props.container);
+    // The pixel position we calculate for the main thread is relative
+    // to the plot box, so we need to offset it to match the pixel positions
+    // of the canvas.
+    const pos = this.updatePositions(props) + box.top(props.plot);
 
     draw.rule({
       stroke: this.state.color,
       lineWidth: this.state.lineWidth,
       lineDash: this.state.lineDash,
       direction,
       region: plottingRegion,
-      position: pixelPos,
+      position: pos,
     });
 
     canvas.fillStyle = this.state.color.hex;
@@ -122,19 +119,13 @@ export class Rule extends aether.Leaf<typeof ruleStateZ, InternalState> {
     const TRIANGLE_SIZE = 4;
     if (l === "left") {
       const arrowPos = box.left(plottingRegion) - 1;
-      canvas.moveTo(arrowPos, pixelPos);
-      canvas.lineTo(arrowPos - TRIANGLE_SIZE, pixelPos - TRIANGLE_SIZE);
-      canvas.lineTo(arrowPos - TRIANGLE_SIZE, pixelPos + TRIANGLE_SIZE);
+      canvas.moveTo(arrowPos, pos);
+      canvas.lineTo(arrowPos - TRIANGLE_SIZE, pos - TRIANGLE_SIZE);
+      canvas.lineTo(arrowPos - TRIANGLE_SIZE, pos + TRIANGLE_SIZE);
     } else if (l === "right") {
-      canvas.moveTo(box.right(plottingRegion), pixelPos);
-      canvas.lineTo(
-        box.right(plottingRegion) + TRIANGLE_SIZE,
-        pixelPos - TRIANGLE_SIZE,
-      );
-      canvas.lineTo(
-        box.right(plottingRegion) + TRIANGLE_SIZE,
-        pixelPos + TRIANGLE_SIZE,
-      );
+      canvas.moveTo(box.right(plottingRegion), pos);
+      canvas.lineTo(box.right(plottingRegion) + TRIANGLE_SIZE, pos - TRIANGLE_SIZE);
+      canvas.lineTo(box.right(plottingRegion) + TRIANGLE_SIZE, pos + TRIANGLE_SIZE);
     }
     canvas.closePath();
     canvas.stroke();