zcy
/
maxGraph
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: correctly manage the markers fill style (#157) 

Previously, when setting startFill/endFill, the display was inverted
comparing to the configuration.
The marker was filled when set to false, not filled when set to true.
When not set, the marker was filled, which is the expected default.

The issue came from a wrong condition to manage the default value and
was reproduced with the Markers Story.

In addition to the code fix, update the Markers.stories.js to fix style
configurations
  - use number instead of string for markers size
  - use boolean instead of number for start/end fill
development
Thomas Bouffard 2023-01-06 16:53:54 +01:00 committed by GitHub
parent a247b38268
commit 3fff754cd6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 7 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/core/src/view/geometry/edge/ConnectorShape.ts
View File

@ -112,7 +112,7 @@ class ConnectorShape extends PolylineShape {
// Allow for stroke width in the end point used and the // Allow for stroke width in the end point used and the
// orthogonal vectors describing the direction of the marker // orthogonal vectors describing the direction of the marker
const filled = !(source ? this.style.startFill : this.style.endFill); const filled = (source ? this.style.startFill : this.style.endFill) ?? true;
result = MarkerShape.createMarker( result = MarkerShape.createMarker(
c, c,

13
packages/html/stories/Markers.stories.js
View File

@ -135,15 +135,14 @@ const Template = ({ label, ...args }) => {
style.fillColor = '#FFFFFF'; style.fillColor = '#FFFFFF';
style.strokeColor = '#000000'; style.strokeColor = '#000000';
style.fontColor = '#000000'; style.fontColor = '#000000';
style.fontStyle = '1'; style.fontStyle = 1;
style = graph.getStylesheet().getDefaultEdgeStyle(); style = graph.getStylesheet().getDefaultEdgeStyle();
style.strokeColor = '#000000'; style.strokeColor = '#000000';
style.fontColor = '#000000'; style.fontColor = '#000000';
style.fontStyle = '0'; style.fontStyle = 0;
style.fontStyle = '0'; style.startSize = 8;
style.startSize = '8'; style.endSize = 8;
style.endSize = '8';
// Populates the graph // Populates the graph
const parent = graph.getDefaultParent(); const parent = graph.getDefaultParent();
@ -156,8 +155,8 @@ const Template = ({ label, ...args }) => {
startArrow: 'oval', startArrow: 'oval',
endArrow: 'block', endArrow: 'block',
sourcePerimeterSpacing: 4, sourcePerimeterSpacing: 4,
startFill: 0, startFill: false,
endFill: 0, endFill: false,
}); });
const e11 = graph.insertVertex(e1, null, 'Label', 0, 0, 20, 14, { const e11 = graph.insertVertex(e1, null, 'Label', 0, 0, 20, 14, {
shape: 'message', shape: 'message',