fixes to snapping lines when dragging/resizing (lines are created for doc not being dragged, snapping lines are created for documents in groups). cleanup of pres path code.

1 files changed, 30 insertions, 16 deletions

diff --git a/src/client/views/nodes/trails/PresBox.tsx b/src/client/views/nodes/trails/PresBox.tsx
index 54249a975..05810b63a 100644
--- a/src/client/views/nodes/trails/PresBox.tsx
+++ b/src/client/views/nodes/trails/PresBox.tsx
@@ -1384,24 +1384,38 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                 }
             });
         return (
-            <polyline
-                points={pathPoints}
-                style={{
-                    opacity: 1,
-                    stroke: '#69a6db',
-                    strokeWidth: 5,
-                    strokeDasharray: '10 5',
-                    boxShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)',
-                }}
-                fill="none"
-                markerStart="url(#markerArrow)"
-                markerMid="url(#markerSquare)"
-                markerEnd="url(#markerSquareFilled)"
-            />
+            <>
+                <div className="presPathLabels">{PresBox.Instance?.orderedPathLabels(collection)}</div>
+                <svg key="svg" className="presPaths">
+                    <defs>
+                        <marker id="markerSquare" markerWidth="3" markerHeight="3" refX="1.5" refY="1.5" orient="auto" overflow="visible">
+                            <rect x="0" y="0" width="3" height="3" stroke="#69a6db" strokeWidth="1" fill="white" fillOpacity="0.8" />
+                        </marker>
+                        <marker id="markerSquareFilled" markerWidth="3" markerHeight="3" refX="1.5" refY="1.5" orient="auto" overflow="visible">
+                            <rect x="0" y="0" width="3" height="3" stroke="#69a6db" strokeWidth="1" fill="#69a6db" />
+                        </marker>
+                        <marker id="markerArrow" markerWidth="3" markerHeight="3" refX="2" refY="4" orient="auto" overflow="visible">
+                            <path d="M2,2 L2,6 L6,4 L2,2 Z" stroke="#69a6db" strokeLinejoin="round" strokeWidth="1" fill="white" fillOpacity="0.8" />
+                        </marker>
+                    </defs>
+                    <polyline
+                        points={pathPoints}
+                        style={{
+                            opacity: 1,
+                            stroke: '#69a6db',
+                            strokeWidth: 5,
+                            strokeDasharray: '10 5',
+                            boxShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)',
+                        }}
+                        fill="none"
+                        markerStart="url(#markerArrow)"
+                        markerMid="url(#markerSquare)"
+                        markerEnd="url(#markerSquareFilled)"
+                    />
+                </svg>
+            </>
         );
     };
-    getPaths = (collection: Doc) => this.pathLines(collection); // needs to be smarter and figure out the paths to draw for this specific collection.  or better yet, draw everything in an overlay layer instad of within a collection
-
     // Converts seconds to ms and updates presentation_transition
     public static SetTransitionTime = (number: String, setter: (timeInMS: number) => void, change?: number) => {
         let timeInMS = Number(number) * 1000;