Resolve PR 89 merge conflicts and preserve toolbar step titles

lib/strokeAlphabetText.ts

@@ -45,7 +45,7 @@ export function getAlphabetAdvanceWidth(
   const advanceRatio = getAdvanceRatio(char)
   const letterSpacingRatio = nextChar ? textMetrics.letterSpacingRatio : 0
   const kerningAdjustmentRatio = nextChar
-    ? (kerningRatio[char]?.[nextChar] ?? 0)
+    ? kerningRatio[char]?.[nextChar] ?? 0
     : 0
 
   return fontSize * (advanceRatio + letterSpacingRatio + kerningAdjustmentRatio)

site/components/InteractiveGraphics/InteractiveGraphics.tsx

@@ -59,11 +59,15 @@ export const InteractiveGraphics = ({
   onObjectClicked,
   objectLimit,
   height = 600,
+  stepMetadata,
+  alwaysShowToolbar = false,
 }: {
   graphics: GraphicsObject
   onObjectClicked?: (event: GraphicsObjectClickEvent) => void
   objectLimit?: number
   height?: number
+  stepMetadata?: Array<{ title: string }>
+  alwaysShowToolbar?: boolean
 }) => {
   const [activeLayers, setActiveLayers] = useState<string[] | null>(null)
   const [activeStep, setActiveStep] = useState<number | null>(null)
@@ -359,6 +363,10 @@ export const InteractiveGraphics = ({
   }
 
   const showToolbar = true
+  const stepTitle =
+    maxStep > 0
+      ? stepMetadata?.[showLastStep ? maxStep : activeStep ?? -1]?.title
+      : undefined
 
   // Use custom hooks for visibility checks and filtering
   const isPointOnScreen = useIsPointOnScreen(realToScreen, size)
@@ -576,6 +584,12 @@ export const InteractiveGraphics = ({
             />
             Enable Object Interation
           </label>
+
+          {maxStep > 0 && stepTitle && (
+            <div style={{ marginLeft: "auto", textAlign: "right" }}>
+              {stepTitle}
+            </div>
+          )}
         </div>
       )}
 

site/components/InteractiveGraphics/Point.tsx

@@ -57,7 +57,7 @@ export const Point = ({
                 0.2,
                 color ?? defaultColors[index % defaultColors.length],
               )
-            : (color ?? defaultColors[index % defaultColors.length])
+            : color ?? defaultColors[index % defaultColors.length]
         }`,
         cursor: "pointer",
         transition: "border-color 0.2s",

site/components/InteractiveGraphicsCanvas.tsx

@@ -16,13 +16,18 @@ interface InteractiveGraphicsCanvasProps {
   showGrid?: boolean
   height?: number | string
   width?: number | string
+  stepMetadata?: Array<{ title: string }>
+  alwaysShowToolbar?: boolean
 }
 
 export function InteractiveGraphicsCanvas({
   graphics,
+  showLabelsByDefault = true,
   showGrid = true,
   height = 500,
   width = "100%",
+  stepMetadata,
+  alwaysShowToolbar = false,
 }: InteractiveGraphicsCanvasProps) {
   const canvasRef = useRef<HTMLCanvasElement>(null)
   const containerRef = useRef<HTMLDivElement | null>(null)
@@ -43,6 +48,11 @@ export function InteractiveGraphicsCanvas({
 
   // Calculate the maximum step value from all graphics objects
   const maxStep = getMaxStep(graphics)
+  const showToolbar = alwaysShowToolbar || maxStep > 0 || showLabelsByDefault
+  const stepTitle =
+    maxStep > 0
+      ? stepMetadata?.[showLastStep ? maxStep : activeStep ?? -1]?.title
+      : undefined
 
   // Filter graphics objects based on step
   const filteredGraphics = getGraphicsFilteredByStep(graphics, {
@@ -254,66 +264,80 @@ export function InteractiveGraphicsCanvas({
 
   return (
     <div style={{ display: "flex", flexDirection: "column", gap: "10px" }}>
-      <div style={{ display: "flex", gap: "12px", alignItems: "center" }}>
-        <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
-          <label>
-            <input
-              type="checkbox"
-              style={{ marginRight: 4 }}
-              checked={activeStep !== null}
-              onChange={(e) => {
-                setActiveStep(e.target.checked ? 0 : null)
-              }}
-            />
-            Filter by step
-          </label>
-
-          <input
-            type="number"
-            min={0}
-            max={maxStep}
-            value={activeStep ?? 0}
-            onChange={(e) => {
-              const value = parseInt(e.target.value)
-              setShowLastStep(false)
-              setActiveStep(Number.isNaN(value) ? 0 : Math.min(value, maxStep))
-            }}
-            disabled={activeStep === null}
-            style={{ width: "60px" }}
-          />
+      {showToolbar && (
+        <div style={{ display: "flex", gap: "12px", alignItems: "center" }}>
+          <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
+            {maxStep > 0 && (
+              <>
+                <label>
+                  <input
+                    type="checkbox"
+                    style={{ marginRight: 4 }}
+                    checked={activeStep !== null}
+                    onChange={(e) => {
+                      setActiveStep(e.target.checked ? 0 : null)
+                    }}
+                  />
+                  Filter by step
+                </label>
+
+                <input
+                  type="number"
+                  min={0}
+                  max={maxStep}
+                  value={activeStep ?? 0}
+                  onChange={(e) => {
+                    const value = parseInt(e.target.value)
+                    setShowLastStep(false)
+                    setActiveStep(
+                      Number.isNaN(value) ? 0 : Math.min(value, maxStep),
+                    )
+                  }}
+                  disabled={activeStep === null}
+                  style={{ width: "60px" }}
+                />
+
+                <label>
+                  <input
+                    type="checkbox"
+                    style={{ marginRight: 4 }}
+                    checked={showLastStep}
+                    onChange={(e) => {
+                      setShowLastStep(e.target.checked)
+                      setActiveStep(null)
+                    }}
+                  />
+                  Show last step
+                </label>
+              </>
+            )}
+          </div>
 
-          <label>
-            <input
-              type="checkbox"
-              style={{ marginRight: 4 }}
-              checked={showLastStep}
-              onChange={(e) => {
-                setShowLastStep(e.target.checked)
-                setActiveStep(null)
-              }}
-            />
-            Show last step
-          </label>
-        </div>
+          <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
+            <label>
+              <input
+                type="checkbox"
+                style={{ marginRight: 4 }}
+                checked={enableObjectInteraction}
+                onChange={(event) => {
+                  const isEnabled = event.target.checked
+                  setEnableObjectInteraction(isEnabled)
+                  if (!isEnabled) {
+                    setSelectedObjectLabel(null)
+                  }
+                }}
+              />
+              Enable Object Interation
+            </label>
+          </div>
 
-        <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
-          <label>
-            <input
-              type="checkbox"
-              style={{ marginRight: 4 }}
-              checked={enableObjectInteraction}
-              onChange={(event) => {
-                const isEnabled = event.target.checked
-                setEnableObjectInteraction(isEnabled)
-                if (!isEnabled) {
-                  setSelectedObjectLabel(null)
-                }
-              }}
-            />
-            Enable Object Interation
-          </label>
+          {maxStep > 0 && stepTitle && (
+            <div style={{ marginLeft: "auto", textAlign: "right" }}>
+              {stepTitle}
+            </div>
+          )}
         </div>
-      </div>
+      )}
 
       <div
         ref={(node) => {