Skip to content

Commit 91c4368

Browse files
pierpopierpo
committed
wip - works properly
1 parent c5fb385 commit 91c4368

File tree

6 files changed

+97
-12
lines changed

6 files changed

+97
-12
lines changed

‎src/ArcherContainer/__tests__/__snapshots__/ArcherContainer.test.tsx.snap

+42-6
Original file line numberDiff line numberDiff line change
@@ -66,12 +66,18 @@ exports[`ArcherContainer rendering an svg with the marker element used to draw a
6666
/>
6767
</marker>
6868
</defs>
69-
<g>
69+
<g
70+
style="pointer-events: all;"
71+
>
7072
<path
7173
d="M0,0 C10,0 10,0 20,0"
7274
marker-end="url(#arrow00001elem-leftelem-right)"
7375
style="fill: none; stroke: #f00; stroke-width: 2;"
7476
/>
77+
<path
78+
d="M0,0 C10,0 10,0 20,0"
79+
style="fill: none; stroke: rgba(0, 0, 0, 0); stroke-width: 20;"
80+
/>
7581
</g>
7682
</svg>
7783
<div
@@ -114,13 +120,19 @@ exports[`ArcherContainer rendering an svg with the marker element used to draw a
114120
/>
115121
</marker>
116122
</defs>
117-
<g>
123+
<g
124+
style="pointer-events: all;"
125+
>
118126
<path
119127
d="M-20,0 C0,0 0,0 20,0"
120128
marker-end="url(#arrow00001elem-leftelem-right)"
121129
marker-start="url(#arrow00001elem-leftelem-right)"
122130
style="fill: none; stroke: #f00; stroke-width: 2;"
123131
/>
132+
<path
133+
d="M-20,0 C0,0 0,0 20,0"
134+
style="fill: none; stroke: rgba(0, 0, 0, 0); stroke-width: 20;"
135+
/>
124136
</g>
125137
</svg>
126138
<div
@@ -163,12 +175,18 @@ exports[`ArcherContainer rendering an svg with the marker element used to draw a
163175
/>
164176
</marker>
165177
</defs>
166-
<g>
178+
<g
179+
style="pointer-events: all;"
180+
>
167181
<path
168182
d="M-20,0 C-10,0 -10,0 0,0"
169183
marker-start="url(#arrow00001elem-leftelem-right)"
170184
style="fill: none; stroke: #f00; stroke-width: 2;"
171185
/>
186+
<path
187+
d="M-20,0 C-10,0 -10,0 0,0"
188+
style="fill: none; stroke: rgba(0, 0, 0, 0); stroke-width: 20;"
189+
/>
172190
</g>
173191
</svg>
174192
<div
@@ -215,12 +233,18 @@ exports[`ArcherContainer rendering an svg with the marker element used to draw a
215233
/>
216234
</marker>
217235
</defs>
218-
<g>
236+
<g
237+
style="pointer-events: all;"
238+
>
219239
<path
220240
d="M0,0 C11,0 11,0 22,0"
221241
marker-end="url(#arrow00001elem-leftelem-right)"
222242
style="fill: none; stroke: #f00; stroke-width: 2;"
223243
/>
244+
<path
245+
d="M0,0 C11,0 11,0 22,0"
246+
style="fill: none; stroke: rgba(0, 0, 0, 0); stroke-width: 20;"
247+
/>
224248
</g>
225249
</svg>
226250
<div
@@ -263,12 +287,18 @@ exports[`ArcherContainer rendering an svg with the marker element used to draw a
263287
/>
264288
</marker>
265289
</defs>
266-
<g>
290+
<g
291+
style="pointer-events: all;"
292+
>
267293
<path
268294
d="M0,0 C-10,0 -10,0 -20,0"
269295
marker-end="url(#arrow00001elem-rightelem-left)"
270296
style="fill: none; stroke: #f00; stroke-width: 2;"
271297
/>
298+
<path
299+
d="M0,0 C-10,0 -10,0 -20,0"
300+
style="fill: none; stroke: rgba(0, 0, 0, 0); stroke-width: 20;"
301+
/>
272302
</g>
273303
</svg>
274304
<div
@@ -311,12 +341,18 @@ exports[`ArcherContainer rendering an svg with the marker element used to draw a
311341
/>
312342
</marker>
313343
</defs>
314-
<g>
344+
<g
345+
style="pointer-events: all;"
346+
>
315347
<path
316348
d="M-20,0 C-10,0 -10,0 0,0"
317349
marker-start="url(#arrow00001elem-leftelem-right)"
318350
style="fill: none; stroke: #f00; stroke-width: 2;"
319351
/>
352+
<path
353+
d="M-20,0 C-10,0 -10,0 0,0"
354+
style="fill: none; stroke: rgba(0, 0, 0, 0); stroke-width: 20;"
355+
/>
320356
<foreignobject
321357
height="1"
322358
style="overflow: visible; pointer-events: none;"

‎src/ArcherContainer/components/SvgArrows.tsx

+3
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ const AdaptedArrow = (
3535

3636
const newEndShape = createShapeObj(style, props.endShape);
3737

38+
const domAttributes = props.domAttributes;
3839
const newStrokeColor = style.strokeColor || props.strokeColor;
3940
const newStrokeWidth = style.strokeWidth || props.strokeWidth;
4041
const newStrokeDasharray = style.strokeDasharray || props.strokeDasharray;
@@ -85,6 +86,7 @@ const AdaptedArrow = (
8586
enableStartMarker={!!newStartMarker}
8687
disableEndMarker={!newEndMarker}
8788
endShape={newEndShape}
89+
domAttributes={domAttributes}
8890
/>
8991
);
9092
};
@@ -114,6 +116,7 @@ export const SvgArrows = (
114116
target={currentRelation.target}
115117
label={currentRelation.label}
116118
style={currentRelation.style || {}}
119+
domAttributes={currentRelation.domAttributes}
117120
startMarker={props.startMarker}
118121
endMarker={props.endMarker}
119122
endShape={props.endShape}

‎src/ArcherElement/ArcherElement.helpers.ts

+10-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,15 @@ export const generateSourceToTarget = (
1717
relations: Array<RelationType>,
1818
): Array<SourceToTargetType> => {
1919
return relations.map(
20-
({ targetId, sourceAnchor, targetAnchor, label, style, order = 0 }: RelationType) => ({
20+
({
21+
targetId,
22+
sourceAnchor,
23+
targetAnchor,
24+
label,
25+
style,
26+
order = 0,
27+
domAttributes,
28+
}: RelationType) => ({
2129
source: {
2230
id: encodeId(id),
2331
anchor: sourceAnchor,
@@ -29,6 +37,7 @@ export const generateSourceToTarget = (
2937
label,
3038
style,
3139
order,
40+
domAttributes,
3241
}),
3342
);
3443
};

‎src/SvgArrow/SvgArrow.tsx

+17-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React from 'react';
1+
import React, { DOMAttributes } from 'react';
22
import Vector2 from '../geometry/Vector2';
33
import { AnchorPositionType, ValidLineStyles } from '../types';
44
import { computeArrowDirectionVector } from './SvgArrow.helper';
@@ -18,6 +18,7 @@ type Props = {
1818
enableStartMarker?: boolean;
1919
disableEndMarker?: boolean;
2020
endShape: Record<string, any>;
21+
domAttributes?: DOMAttributes<SVGElement>;
2122
};
2223

2324
export function computeArrowPointAccordingToArrowHead(
@@ -196,6 +197,7 @@ const SvgArrow = ({
196197
enableStartMarker,
197198
disableEndMarker,
198199
endShape,
200+
domAttributes,
199201
}: Props) => {
200202
const actualArrowLength = endShape.circle
201203
? endShape.circle.radius * 2
@@ -266,7 +268,7 @@ const SvgArrow = ({
266268
const markerUrl = `url(#${arrowMarkerId})`;
267269

268270
return (
269-
<g>
271+
<g style={{ pointerEvents: 'all' }}>
270272
<path
271273
d={pathString}
272274
style={{
@@ -278,6 +280,19 @@ const SvgArrow = ({
278280
markerStart={enableStartMarker ? markerUrl : undefined}
279281
markerEnd={disableEndMarker ? undefined : markerUrl}
280282
/>
283+
284+
{/* This a thicker fake path to grab DOM events - makes clicking on the arrow more usable */}
285+
<path
286+
d={pathString}
287+
style={{
288+
fill: 'none',
289+
stroke: 'rgba(0, 0, 0, 0)',
290+
// TODO make this configurable
291+
strokeWidth: strokeWidth * 10,
292+
}}
293+
{...domAttributes}
294+
/>
295+
281296
{arrowLabel && (
282297
<foreignObject
283298
x={xLabel}

‎src/__tests__/__snapshots__/Archer-integration.test.tsx.snap

+21-3
Original file line numberDiff line numberDiff line change
@@ -64,19 +64,31 @@ exports[`Archer Integration Uses a functional child API to work with third party
6464
/>
6565
</marker>
6666
</defs>
67-
<g>
67+
<g
68+
style="pointer-events: all;"
69+
>
6870
<path
6971
d="M0,0 C0,-10 0,-10 0,-20"
7072
marker-end="url(#arrow00001rootelement2)"
7173
style="fill: none; stroke: red; stroke-width: 2; stroke-dasharray: 5,5;"
7274
/>
75+
<path
76+
d="M0,0 C0,-10 0,-10 0,-20"
77+
style="fill: none; stroke: rgba(0, 0, 0, 0); stroke-width: 20;"
78+
/>
7379
</g>
74-
<g>
80+
<g
81+
style="pointer-events: all;"
82+
>
7583
<path
7684
d="M0,0 C-1.5,0 -1.5,0 -3,0"
7785
marker-end="url(#arrow00001element2element3)"
7886
style="fill: none; stroke: blue; stroke-width: 1;"
7987
/>
88+
<path
89+
d="M0,0 C-1.5,0 -1.5,0 -3,0"
90+
style="fill: none; stroke: rgba(0, 0, 0, 0); stroke-width: 10;"
91+
/>
8092
<foreignobject
8193
height="1"
8294
style="overflow: visible; pointer-events: none;"
@@ -97,12 +109,18 @@ exports[`Archer Integration Uses a functional child API to work with third party
97109
</div>
98110
</foreignobject>
99111
</g>
100-
<g>
112+
<g
113+
style="pointer-events: all;"
114+
>
101115
<path
102116
d="M0,0 C2,0 2,0 4,0"
103117
marker-end="url(#arrow00001element4root)"
104118
style="fill: none; stroke: red; stroke-width: 2;"
105119
/>
120+
<path
121+
d="M0,0 C2,0 2,0 4,0"
122+
style="fill: none; stroke: rgba(0, 0, 0, 0); stroke-width: 20;"
123+
/>
106124
<foreignobject
107125
height="1"
108126
style="overflow: visible; pointer-events: none;"

‎src/types.ts

+4
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import { DOMAttributes } from 'react';
2+
13
export type ValidLineStyles = 'angle' | 'straight' | 'curve';
24

35
export type AnchorPositionType = 'top' | 'bottom' | 'left' | 'right' | 'middle';
@@ -9,6 +11,7 @@ export type RelationType = {
911
order?: number;
1012
label?: React.ReactNode | null | undefined;
1113
style?: LineType;
14+
domAttributes?: DOMAttributes<SVGElement>;
1215
};
1316

1417
export type EntityRelationType = {
@@ -22,6 +25,7 @@ export type SourceToTargetType = {
2225
order: number;
2326
label?: React.ReactNode | null | undefined;
2427
style?: LineType;
28+
domAttributes?: DOMAttributes<SVGElement>;
2529
};
2630

2731
export type ArrowShapeType = {

0 commit comments

Comments
 (0)