wip - works properly

pierpo · Nov 6, 2022 · 91c4368 · 91c4368
1 parent c5fb385
commit 91c4368
Show file tree

Hide file tree

Showing 6 changed files with 97 additions and 12 deletions.
diff --git a/src/ArcherContainer/__tests__/__snapshots__/ArcherContainer.test.tsx.snap b/src/ArcherContainer/__tests__/__snapshots__/ArcherContainer.test.tsx.snap
@@ -66,12 +66,18 @@ exports[`ArcherContainer rendering an svg with the marker element used to draw a
             />
           </marker>
         </defs>
-        <g>
+        <g
+          style="pointer-events: all;"
+        >
           <path
             d="M0,0 C10,0 10,0 20,0"
             marker-end="url(#arrow00001elem-leftelem-right)"
             style="fill: none; stroke: #f00; stroke-width: 2;"
           />
+          <path
+            d="M0,0 C10,0 10,0 20,0"
+            style="fill: none; stroke: rgba(0, 0, 0, 0); stroke-width: 20;"
+          />
         </g>
       </svg>
       <div
@@ -114,13 +120,19 @@ exports[`ArcherContainer rendering an svg with the marker element used to draw a
             />
           </marker>
         </defs>
-        <g>
+        <g
+          style="pointer-events: all;"
+        >
           <path
             d="M-20,0 C0,0 0,0 20,0"
             marker-end="url(#arrow00001elem-leftelem-right)"
             marker-start="url(#arrow00001elem-leftelem-right)"
             style="fill: none; stroke: #f00; stroke-width: 2;"
           />
+          <path
+            d="M-20,0 C0,0 0,0 20,0"
+            style="fill: none; stroke: rgba(0, 0, 0, 0); stroke-width: 20;"
+          />
         </g>
       </svg>
       <div
@@ -163,12 +175,18 @@ exports[`ArcherContainer rendering an svg with the marker element used to draw a
             />
           </marker>
         </defs>
-        <g>
+        <g
+          style="pointer-events: all;"
+        >
           <path
             d="M-20,0 C-10,0 -10,0 0,0"
             marker-start="url(#arrow00001elem-leftelem-right)"
             style="fill: none; stroke: #f00; stroke-width: 2;"
           />
+          <path
+            d="M-20,0 C-10,0 -10,0 0,0"
+            style="fill: none; stroke: rgba(0, 0, 0, 0); stroke-width: 20;"
+          />
         </g>
       </svg>
       <div
@@ -215,12 +233,18 @@ exports[`ArcherContainer rendering an svg with the marker element used to draw a
             />
           </marker>
         </defs>
-        <g>
+        <g
+          style="pointer-events: all;"
+        >
           <path
             d="M0,0 C11,0 11,0 22,0"
             marker-end="url(#arrow00001elem-leftelem-right)"
             style="fill: none; stroke: #f00; stroke-width: 2;"
           />
+          <path
+            d="M0,0 C11,0 11,0 22,0"
+            style="fill: none; stroke: rgba(0, 0, 0, 0); stroke-width: 20;"
+          />
         </g>
       </svg>
       <div
@@ -263,12 +287,18 @@ exports[`ArcherContainer rendering an svg with the marker element used to draw a
             />
           </marker>
         </defs>
-        <g>
+        <g
+          style="pointer-events: all;"
+        >
           <path
             d="M0,0 C-10,0 -10,0 -20,0"
             marker-end="url(#arrow00001elem-rightelem-left)"
             style="fill: none; stroke: #f00; stroke-width: 2;"
           />
+          <path
+            d="M0,0 C-10,0 -10,0 -20,0"
+            style="fill: none; stroke: rgba(0, 0, 0, 0); stroke-width: 20;"
+          />
         </g>
       </svg>
       <div
@@ -311,12 +341,18 @@ exports[`ArcherContainer rendering an svg with the marker element used to draw a
             />
           </marker>
         </defs>
-        <g>
+        <g
+          style="pointer-events: all;"
+        >
           <path
             d="M-20,0 C-10,0 -10,0 0,0"
             marker-start="url(#arrow00001elem-leftelem-right)"
             style="fill: none; stroke: #f00; stroke-width: 2;"
           />
+          <path
+            d="M-20,0 C-10,0 -10,0 0,0"
+            style="fill: none; stroke: rgba(0, 0, 0, 0); stroke-width: 20;"
+          />
           <foreignobject
             height="1"
             style="overflow: visible; pointer-events: none;"

diff --git a/src/ArcherContainer/components/SvgArrows.tsx b/src/ArcherContainer/components/SvgArrows.tsx
@@ -35,6 +35,7 @@ const AdaptedArrow = (
 
   const newEndShape = createShapeObj(style, props.endShape);
 
+  const domAttributes = props.domAttributes;
   const newStrokeColor = style.strokeColor || props.strokeColor;
   const newStrokeWidth = style.strokeWidth || props.strokeWidth;
   const newStrokeDasharray = style.strokeDasharray || props.strokeDasharray;
@@ -85,6 +86,7 @@ const AdaptedArrow = (
       enableStartMarker={!!newStartMarker}
       disableEndMarker={!newEndMarker}
       endShape={newEndShape}
+      domAttributes={domAttributes}
     />
   );
 };
@@ -114,6 +116,7 @@ export const SvgArrows = (
           target={currentRelation.target}
           label={currentRelation.label}
           style={currentRelation.style || {}}
+          domAttributes={currentRelation.domAttributes}
           startMarker={props.startMarker}
           endMarker={props.endMarker}
           endShape={props.endShape}

diff --git a/src/ArcherElement/ArcherElement.helpers.ts b/src/ArcherElement/ArcherElement.helpers.ts
@@ -17,7 +17,15 @@ export const generateSourceToTarget = (
   relations: Array<RelationType>,
 ): Array<SourceToTargetType> => {
   return relations.map(
-    ({ targetId, sourceAnchor, targetAnchor, label, style, order = 0 }: RelationType) => ({
+    ({
+      targetId,
+      sourceAnchor,
+      targetAnchor,
+      label,
+      style,
+      order = 0,
+      domAttributes,
+    }: RelationType) => ({
       source: {
         id: encodeId(id),
         anchor: sourceAnchor,
@@ -29,6 +37,7 @@ export const generateSourceToTarget = (
       label,
       style,
       order,
+      domAttributes,
     }),
   );
 };
diff --git a/src/SvgArrow/SvgArrow.tsx b/src/SvgArrow/SvgArrow.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { DOMAttributes } from 'react';
 import Vector2 from '../geometry/Vector2';
 import { AnchorPositionType, ValidLineStyles } from '../types';
 import { computeArrowDirectionVector } from './SvgArrow.helper';
@@ -18,6 +18,7 @@ type Props = {
   enableStartMarker?: boolean;
   disableEndMarker?: boolean;
   endShape: Record<string, any>;
+  domAttributes?: DOMAttributes<SVGElement>;
 };
 
 export function computeArrowPointAccordingToArrowHead(
@@ -196,6 +197,7 @@ const SvgArrow = ({
   enableStartMarker,
   disableEndMarker,
   endShape,
+  domAttributes,
 }: Props) => {
   const actualArrowLength = endShape.circle
     ? endShape.circle.radius * 2
@@ -266,7 +268,7 @@ const SvgArrow = ({
   const markerUrl = `url(#${arrowMarkerId})`;
 
   return (
-    <g>
+    <g style={{ pointerEvents: 'all' }}>
       <path
         d={pathString}
         style={{
@@ -278,6 +280,19 @@ const SvgArrow = ({
         markerStart={enableStartMarker ? markerUrl : undefined}
         markerEnd={disableEndMarker ? undefined : markerUrl}
       />
+
+      {/* This a thicker fake path to grab DOM events - makes clicking on the arrow more usable */}
+      <path
+        d={pathString}
+        style={{
+          fill: 'none',
+          stroke: 'rgba(0, 0, 0, 0)',
+          // TODO make this configurable
+          strokeWidth: strokeWidth * 10,
+        }}
+        {...domAttributes}
+      />
+
       {arrowLabel && (
         <foreignObject
           x={xLabel}

diff --git a/src/__tests__/__snapshots__/Archer-integration.test.tsx.snap b/src/__tests__/__snapshots__/Archer-integration.test.tsx.snap
@@ -64,19 +64,31 @@ exports[`Archer Integration Uses a functional child API to work with third party
               />
             </marker>
           </defs>
-          <g>
+          <g
+            style="pointer-events: all;"
+          >
             <path
               d="M0,0 C0,-10 0,-10 0,-20"
               marker-end="url(#arrow00001rootelement2)"
               style="fill: none; stroke: red; stroke-width: 2; stroke-dasharray: 5,5;"
             />
+            <path
+              d="M0,0 C0,-10 0,-10 0,-20"
+              style="fill: none; stroke: rgba(0, 0, 0, 0); stroke-width: 20;"
+            />
           </g>
-          <g>
+          <g
+            style="pointer-events: all;"
+          >
             <path
               d="M0,0 C-1.5,0 -1.5,0 -3,0"
               marker-end="url(#arrow00001element2element3)"
               style="fill: none; stroke: blue; stroke-width: 1;"
             />
+            <path
+              d="M0,0 C-1.5,0 -1.5,0 -3,0"
+              style="fill: none; stroke: rgba(0, 0, 0, 0); stroke-width: 10;"
+            />
             <foreignobject
               height="1"
               style="overflow: visible; pointer-events: none;"
@@ -97,12 +109,18 @@ exports[`Archer Integration Uses a functional child API to work with third party
               </div>
             </foreignobject>
           </g>
-          <g>
+          <g
+            style="pointer-events: all;"
+          >
             <path
               d="M0,0 C2,0 2,0 4,0"
               marker-end="url(#arrow00001element4root)"
               style="fill: none; stroke: red; stroke-width: 2;"
             />
+            <path
+              d="M0,0 C2,0 2,0 4,0"
+              style="fill: none; stroke: rgba(0, 0, 0, 0); stroke-width: 20;"
+            />
             <foreignobject
               height="1"
               style="overflow: visible; pointer-events: none;"

diff --git a/src/types.ts b/src/types.ts
@@ -1,3 +1,5 @@
+import { DOMAttributes } from 'react';
+
 export type ValidLineStyles = 'angle' | 'straight' | 'curve';
 
 export type AnchorPositionType = 'top' | 'bottom' | 'left' | 'right' | 'middle';
@@ -9,6 +11,7 @@ export type RelationType = {
   order?: number;
   label?: React.ReactNode | null | undefined;
   style?: LineType;
+  domAttributes?: DOMAttributes<SVGElement>;
 };
 
 export type EntityRelationType = {
@@ -22,6 +25,7 @@ export type SourceToTargetType = {
   order: number;
   label?: React.ReactNode | null | undefined;
   style?: LineType;
+  domAttributes?: DOMAttributes<SVGElement>;
 };
 
 export type ArrowShapeType = {