Merge pull request #234 from lsst-dm/tickets/DM-52931/breakpoint

DM-52931 : Implement Breakpoint Node

Author: tcjennings

packages/cm-canvas/src/App.svelte

@@ -2,12 +2,13 @@
   import "@xyflow/svelte/dist/style.css";
   import { SvelteFlowProvider, type Node, type Edge } from "@xyflow/svelte";
   import CmCanvas from "./CmCanvas.svelte";
+  import DragDropProvider from "./DragDropProvider.svelte";
 
   type CanvasProps = {
     nodes?: Node[];
     edges?: Edge[];
     [key: string]: any;
-  }
+  };
 
   /* A set of defaultNodes for an otherwise empty canvas. Because a CM campaign
     always has a definite START and END, these are included. Although this canvas
@@ -42,18 +43,21 @@
   if the node is an editable type like "step"
   */
   let nodes = $derived(
-    (!incomingNodes || incomingNodes.length === 0 ? defaultNodes : incomingNodes).map(node => {
+    (!incomingNodes || incomingNodes.length === 0
+      ? defaultNodes
+      : incomingNodes
+    ).map((node) => {
       if (node.type === "step") {
         return {
           ...node,
           data: {
             ...node.data,
-            handleClick: restProps.onClick
-          }
-        }
+            handleClick: restProps.onClick,
+          },
+        };
       }
       return node;
-    })
+    }),
   );
 
   let edges = $derived(
@@ -62,7 +66,9 @@
 </script>
 
 <SvelteFlowProvider>
-  <CmCanvas {nodes} {edges} {...restProps} />
+  <DragDropProvider>
+    <CmCanvas {nodes} {edges} {...restProps} />
+  </DragDropProvider>
 </SvelteFlowProvider>
 
 <style>

packages/cm-canvas/src/BreakpointNode.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+  import { Handle, Position, type NodeProps } from "@xyflow/svelte";
+
+  let { id, data }: NodeProps = $props();
+</script>
+
+<div class="breakpoint-node">
+  <Handle
+    type="target"
+    id="left"
+    position={Position.Left}
+    isConnectableStart={false}
+  />
+  <Handle
+    type="target"
+    id="top"
+    position={Position.Top}
+    isConnectableStart={false}
+  />
+  <Handle type="source" id="bottom" position={Position.Bottom} />
+  <Handle type="source" id="right" position={Position.Right} />
+
+  <div class="breakpoint-node-label">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      height="16px"
+      viewBox="0 -960 960 960"
+      width="16px"
+      fill="#1f1f1f"
+      ><path
+        d="M80-400q-33 0-56.5-23.5T0-480v-240q0-12 5-23t13-19l198-198 30 30q6 6 10 15.5t4 18.5v8l-28 128h208q17 0 28.5 11.5T480-720v50q0 6-1 11.5t-3 10.5l-90 212q-7 17-22.5 26.5T330-400H80Zm238-80 82-194v-6H134l24-108-78 76v232h238ZM744 0l-30-30q-6-6-10-15.5T700-64v-8l28-128H520q-17 0-28.5-11.5T480-240v-50q0-6 1-11.5t3-10.5l90-212q8-17 23-26.5t33-9.5h250q33 0 56.5 23.5T960-480v240q0 12-4.5 22.5T942-198L744 0ZM642-480l-82 194v6h266l-24 108 78-76v-232H642Zm-562 0v-232 232Zm800 0v232-232Z"
+      /></svg
+    >
+  </div>
+</div>
+
+<style>
+  .breakpoint-node {
+    background-color: var(--rubin-color-indigo-dark);
+    border: 1px;
+    border-color: var(--rubin-color-black-dark);
+    border-radius: 20px;
+    padding: 4px 4px 1px 4px;
+  }
+  .breakpoint-node-label {
+    svg {
+      fill: var(--rubin-color-white-light);
+    }
+  }
+</style>

packages/cm-canvas/src/CmCanvas.svelte

@@ -18,6 +18,8 @@
   import StartNode from "./StartNode.svelte";
   import EndNode from "./EndNode.svelte";
   import StepNode from "./StepNode.svelte";
+  import BreakpointNode from "./BreakpointNode.svelte";
+  import { useDragDrop } from "./DragDropProvider.svelte";
   import { MarkerType, Position } from "@xyflow/system";
   import { onMount, tick } from "svelte";
 
@@ -26,7 +28,7 @@
     edges?: Edge[];
     onClick?: (nodeId: string) => void;
     onExport?: any;
-  }
+  };
 
   /* A mapping of custom node names to their implementation. The names used in
      mapping mirror the ManifestKind enum names used in the CM application.
@@ -35,24 +37,52 @@
     start: StartNode,
     end: EndNode,
     step: StepNode,
+    breakpoint: BreakpointNode,
   } as any as NodeTypes;
 
   /* the $props rune defines the inputs to the component, which can be used as
      arguments or attributes when the component is initialized.
   */
-  let {
-    nodes,
-    edges,
-    onClick = null,
-    onExport = null,
-  }: CanvasProps = $props();
+  let { nodes, edges, onClick = null, onExport = null }: CanvasProps = $props();
 
   let id = $derived(nodes.length + 1);
 
   // functions provided by the Svelte-Flow
   const { screenToFlowPosition, fitView } = useSvelteFlow();
 
   const getId = () => `${id++}`;
+  const type = useDragDrop();
+  const onDragStart = (event: DragEvent, nodeType: string) => {
+    if (!event.dataTransfer) {
+      return null;
+    }
+    type.current = nodeType;
+    event.dataTransfer.effectAllowed = "move";
+  };
+  const onDragOver = (event: DragEvent) => {
+    event.preventDefault();
+    if (event.dataTransfer) {
+      event.dataTransfer.dropEffect = "move";
+    }
+  };
+  const onDrop = (event: DragEvent) => {
+    const id = getId();
+    event.preventDefault();
+    if (!type.current) {
+      return;
+    }
+    const position = screenToFlowPosition({
+      x: event.clientX,
+      y: event.clientY,
+    });
+    const newNode = {
+      type: type.current,
+      id,
+      position,
+      data: { name: `${type.current}_${id}`, handleClick: onClick },
+    } satisfies Node;
+    nodes = [...nodes, newNode];
+  };
 
   const handleConnectEnd: OnConnectEnd = (event, connectionState) => {
     if (connectionState.isValid) return;
@@ -162,30 +192,100 @@
   });
 </script>
 
-<SvelteFlow
-  bind:nodes
-  bind:edges
-  {nodeTypes}
-  {onClick}
-  fitView
-  onconnectend={handleConnectEnd}
-  proOptions={{ hideAttribution: true }}
-  nodeOrigin={[0.5, 0.5]}
->
-  <Controls />
-  <Background variant={BackgroundVariant.Dots} />
-  <MiniMap nodeStrokeWidth={3} />
-  <Panel position="top-right">
-    <button class="panel-btn" onclick={() => onLayout("TB")}
-      >Vertical Layout</button
-    >
-    <button class="panel-btn" onclick={() => onLayout("LR")}
-      >Horizontal Layout</button
-    >
-  </Panel>
-</SvelteFlow>
+<div class="cmcanvas">
+  <SvelteFlow
+    bind:nodes
+    bind:edges
+    {nodeTypes}
+    {onClick}
+    fitView
+    onconnectend={handleConnectEnd}
+    ondragover={onDragOver}
+    ondrop={onDrop}
+    proOptions={{ hideAttribution: true }}
+    nodeOrigin={[0.5, 0.5]}
+  >
+    <Controls />
+    <Background variant={BackgroundVariant.Dots} />
+    <MiniMap nodeStrokeWidth={3} />
+    <Panel position="top-left">
+      <!-- svelte-ignore a11y_click_events_have_key_events -->
+      <div class="panel-container">
+        <div
+          class="panel-icon clickable"
+          role="button"
+          tabindex="0"
+          onclick={() => onLayout("TB")}
+          title="Layout graph top-to-bottom"
+        >
+          <svg
+            class="panel-icon"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 -960 960 960"
+            ><path
+              d="m480-220 160-160-56-56-64 64v-216l64 64 56-56-160-160-160 160 56 56 64-64v216l-64-64-56 56 160 160Zm0 140q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q133 0 226.5-93.5T800-480q0-133-93.5-226.5T480-800q-133 0-226.5 93.5T160-480q0 133 93.5 226.5T480-160Zm0-320Z"
+            /></svg
+          >
+        </div>
+        <div
+          class="panel-icon clickable"
+          role="button"
+          tabindex="0"
+          onclick={() => onLayout("LR")}
+          title="Layout graph left-to-right"
+        >
+          <svg
+            class="panel-icon"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 -960 960 960"
+            ><path
+              d="M480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q133 0 226.5-93.5T800-480q0-133-93.5-226.5T480-800q-133 0-226.5 93.5T160-480q0 133 93.5 226.5T480-160Zm0-320ZM380-320l56-56-64-64h216l-64 64 56 56 160-160-160-160-56 56 64 64H372l64-64-56-56-160 160 160 160Z"
+            /></svg
+          >
+        </div>
+      </div>
+    </Panel>
+    <Panel position="top-right">
+      <div class="panel-container">
+        <svg
+          class="panel-icon"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 -960 960 960"
+          ><path
+            d="M440-280h80v-160h160v-80H520v-160h-80v160H280v80h160v160Zm40 200q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"
+          /></svg
+        >
+        <div
+          class="draggable panel-btn"
+          role="button"
+          tabindex="0"
+          draggable={true}
+          ondragstart={(event) => onDragStart(event, "step")}
+          title="Drag to create a Step"
+        >
+          Step
+        </div>
+        <div
+          class="draggable panel-btn"
+          role="button"
+          tabindex="0"
+          draggable={true}
+          ondragstart={(event) => onDragStart(event, "breakpoint")}
+          title="Drag to create a Breakpoint"
+        >
+          Breakpoint
+        </div>
+      </div>
+    </Panel>
+  </SvelteFlow>
+</div>
 
 <style>
+  .cmcanvas {
+    height: 100%;
+    display: flex;
+    flex-direction: column-reverse;
+  }
   :global(.svelte-flow__handle) {
     opacity: 0;
     transition: opacity 0.2s;
@@ -218,17 +318,52 @@
     border: 2px solid var(--rubin-color-violet-light);
   }
 
+  .panel-container {
+    font-family: "Source Sans Pro", "Roboto", sans-serif;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
   .panel-btn {
     padding: 8px 16px;
     background: var(--rubin-color-white-light);
     border: 1px solid var(--rubin-color-grey-light);
     border-radius: 4px;
-    cursor: pointer;
     font-size: 14px;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    user-select: none;
+    font-weight: 500;
+    font-style: italic;
   }
 
   .panel-btn:hover {
     background: var(--rubin-color-white-dark);
   }
+
+  .panel-icon {
+    display: block;
+    flex-shrink: 0;
+    height: 32px;
+    width: 32px;
+    fill: var(--rubin-color-black-light);
+  }
+
+  .panel-icon:hover {
+    background: var(--rubin-color-white-dark);
+  }
+
+  .draggable {
+    cursor: grab;
+    -webkit-user-drag: element;
+    -webkit-transform: translateZ(0);
+  }
+
+  .draggable:active {
+    cursor: grabbing;
+  }
+
+  .clickable {
+    cursor: pointer;
+  }
 </style>

packages/cm-canvas/src/DragDropProvider.svelte

@@ -0,0 +1,32 @@
+<!-- This context provider allows sharing draggable Nodes between the Sidebar and main Canvas
+using Svelte's Context API. When the drag starts, the node type is stored in context
+and any child component can access this via `useDragDrop`. On drop, the node type
+is retrieved from the context. -->
+
+<script module>
+  import { getContext } from "svelte";
+  export const useDragDrop = () => {
+    return getContext("dragdrop") as { current: string | null };
+  };
+</script>
+
+<script lang="ts">
+  import { onDestroy, setContext, type Snippet } from "svelte";
+  let { children }: { children: Snippet } = $props();
+  let dragDropType = $state(null);
+
+  setContext("dragdrop", {
+    set current(value) {
+      dragDropType = value;
+    },
+    get current() {
+      return dragDropType;
+    },
+  });
+
+  onDestroy(() => {
+    dragDropType.set(null);
+  });
+</script>
+
+{@render children()}