Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[FEAT] Render Collapsed Embedded Sub-Process #378

Merged
merged 7 commits into from
Jul 6, 2020
+47 −5
Merged

[FEAT] Render Collapsed Embedded Sub-Process #378

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
4b1726d
Render Collapsed Embedded sub-process
csouchet Jul 1, 2020
0c767e5
Fix lint-check
csouchet Jul 1, 2020
1137225
Update src/component/mxgraph/shape/IconPainter.ts
csouchet Jul 2, 2020
8ed6050
Merge branch 'master' into 305-Render_Collapsed_Embedded_Sub-Process
csouchet Jul 2, 2020
bcab1e2
Merge branch 'master' into 305-Render_Collapsed_Embedded_Sub-Process
tbouffard Jul 2, 2020
7fcf4e0
With not rounded cross
csouchet Jul 6, 2020
03ce42b
Add constant for Shape margin
csouchet Jul 6, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/component/mxgraph/StyleUtils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ export enum MarkerIdentifier {
export enum StyleDefault {
STROKE_WIDTH_THIN = 2,
STROKE_WIDTH_THICK = 5,
TASK_SHAPE_BOTTOM_MARGIN = 7,
DEFAULT_FILL_COLOR = 'White',
DEFAULT_STROKE_COLOR = 'Black',
DEFAULT_FONT_FAMILY = 'Arial, Helvetica, sans-serif', // define our own to not depend on eventual mxGraph default change
Expand Down
7 changes: 7 additions & 0 deletions src/component/mxgraph/extension/MxScaleFactorCanvas.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
*/
import { mxgraph } from 'ts-mxgraph';
import { ShapeConfiguration, Size } from '../shape/IconPainter';
import { StyleDefault } from '../StyleUtils';

/**
* Scale dimensions passed to the method of the original {@link mxgraph.mxXmlCanvas2D}
Expand Down Expand Up @@ -111,4 +112,10 @@ export class MxCanvasUtil {
const insetH = (shape.h - iconSize.height) / 2;
c.translate(shape.x + insetW, shape.y + insetH);
}

public static translateIconToShapeBottomCenter(canvas: mxgraph.mxXmlCanvas2D, shape: ShapeConfiguration, iconSize: Size): void {
const insetW = (shape.w - iconSize.width) / 2;
const insetH = shape.h - iconSize.height - StyleDefault.TASK_SHAPE_BOTTOM_MARGIN;
canvas.translate(shape.x + insetW, shape.y + insetH);
}
}
25 changes: 25 additions & 0 deletions src/component/mxgraph/shape/IconPainter.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -502,4 +502,29 @@ export default class IconPainter {
canvas.close();
canvas.fillAndStroke();
}

public static paintExpandIcon({ c, ratioFromParent, shape, icon }: PaintParameter): void {
this.updateCanvasStyle(c, icon);

const initialIconSize = { width: 16, height: 16 };
const iconSize = this.calculateIconSize(initialIconSize, icon, shape, ratioFromParent);
MxCanvasUtil.translateIconToShapeBottomCenter(c, shape, iconSize);

const w = iconSize.width;
const h = iconSize.height;

// Rounded rectangle
c.roundrect(0, 0, w, h, 2, 2);
c.stroke();

// Cross
c.begin();
c.moveTo(w / 2, h / 4);
c.lineTo(w / 2, (h * 3) / 4);
c.close();
c.moveTo(w / 4, h / 2);
c.lineTo((w * 3) / 4, h / 2);
c.close();
c.fillAndStroke();
}
}
19 changes: 14 additions & 5 deletions src/component/mxgraph/shape/activity-shapes.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -119,11 +119,8 @@ export class SubProcessShape extends BaseActivityShape {
}

if (StyleUtils.getBpmnIsExpanded(this.style) === 'false') {
c.setStrokeColor('Fuchsia');

if (subProcessKind === ShapeBpmnSubProcessKind.EMBEDDED) {
c.setFillColor('Lavender');
} else if (subProcessKind === ShapeBpmnSubProcessKind.EVENT) {
if (subProcessKind === ShapeBpmnSubProcessKind.EVENT) {
c.setStrokeColor('Fuchsia');
c.setFillColor('LightCyan');
}
}
Expand All @@ -135,4 +132,16 @@ export class SubProcessShape extends BaseActivityShape {
xmlCanvas.setDashed(StyleUtils.isDashed(this.style), StyleUtils.getFixDash(this.style));
xmlCanvas.setDashPattern(StyleUtils.getDashPattern(this.style));
}

public paintForeground(c: mxAbstractCanvas2D, x: number, y: number, w: number, h: number): void {
super.paintForeground(c, x, y, w, h);

if (StyleUtils.getBpmnIsExpanded(this.style) === 'false') {
const subProcessKind = StyleUtils.getBpmnSubProcessKind(this.style);
if (subProcessKind === ShapeBpmnSubProcessKind.EMBEDDED) {
const paintParameter = IconPainter.buildPaintParameter((c as unknown) as mxgraph.mxXmlCanvas2D, x, y, w, h, (this as unknown) as mxgraph.mxShape, 0.17, false, 1.5);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

❓ same question about the 0.17 and 1.5 magic numbers

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, I just test with different values.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

magic numbers for ratios are OK I think - it is more problem of the conversion from SVG -> mxGraph
(however as I remember the ratio params were somewhere in the XML file after generation)
perhaps just adding a comment from where they come can be sufficient

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I calculate myself these numbers, so there is no comment to add.

IconPainter.paintExpandIcon(paintParameter);
}
}
}
}