Skip to content

Commit

Permalink
Update dfd node classes to follow new sprotty class naming convention
Browse files Browse the repository at this point in the history
  • Loading branch information
@hlxid
hlxid committed Aug 25, 2023
1 parent 0754727 commit 39582d1
Show file tree
Hide file tree
Showing 4 changed files with 42 additions and 42 deletions.
12 changes: 6 additions & 6 deletions src/features/dfdElements/di.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,11 @@ import {
} from "sprotty";
import {
DfdPositionalLabelView,
FunctionNode,
FunctionNodeImpl,
FunctionNodeView,
IONode,
IONodeImpl,
IONodeView,
StorageNode,
StorageNodeImpl,
StorageNodeView,
} from "./nodes";
import { ArrowEdgeImpl, ArrowEdgeView } from "./edges";
Expand All @@ -26,9 +26,9 @@ import "./styles.css";
export const dfdElementsModule = new ContainerModule((bind, unbind, isBound, rebind) => {
const context = { bind, unbind, isBound, rebind };
configureModelElement(context, "graph", SGraphImpl, SGraphView);
configureModelElement(context, "node:storage", StorageNode, StorageNodeView);
configureModelElement(context, "node:function", FunctionNode, FunctionNodeView);
configureModelElement(context, "node:input-output", IONode, IONodeView);
configureModelElement(context, "node:storage", StorageNodeImpl, StorageNodeView);
configureModelElement(context, "node:function", FunctionNodeImpl, FunctionNodeView);
configureModelElement(context, "node:input-output", IONodeImpl, IONodeView);
configureModelElement(context, "edge:arrow", ArrowEdgeImpl, ArrowEdgeView, {
enable: [withEditLabelFeature],
});
Expand Down
58 changes: 29 additions & 29 deletions src/features/dfdElements/nodes.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,20 +20,20 @@ import { containsDfdLabelFeature } from "../labels/elementFeature";
import { calculateTextWidth } from "../../utils";
import { DfdNodeLabelRenderer } from "../labels/labelRenderer";

export interface DfdNodeSchema extends SNode {
export interface DfdNode extends SNode {
text: string;
labels: LabelAssignment[];
}

export abstract class DfdNode extends DynamicChildrenNode implements WithEditableLabel {
export abstract class DfdNodeImpl extends DynamicChildrenNode implements WithEditableLabel {
static readonly DEFAULT_FEATURES = [...SNodeImpl.DEFAULT_FEATURES, withEditLabelFeature, containsDfdLabelFeature];
static readonly DEFAULT_WIDTH = 50;
static readonly WIDTH_PADDING = 8;

text: string = "";
labels: LabelAssignment[] = [];

override setChildren(schema: DfdNodeSchema): void {
override setChildren(schema: DfdNode): void {
schema.children = [
{
type: "label:positional",
Expand All @@ -43,7 +43,7 @@ export abstract class DfdNode extends DynamicChildrenNode implements WithEditabl
];
}

override removeChildren(schema: DfdNodeSchema): void {
override removeChildren(schema: DfdNode): void {
const label = schema.children?.find((element) => element.type === "label:positional") as
| SLabel
| undefined;
Expand All @@ -66,8 +66,8 @@ export abstract class DfdNode extends DynamicChildrenNode implements WithEditabl
(labelAssignment) => DfdNodeLabelRenderer.computeLabelContent(labelAssignment)[1],
);

const neededWidth = Math.max(...labelWidths, textWidth, DfdNode.DEFAULT_WIDTH);
return neededWidth + DfdNode.WIDTH_PADDING;
const neededWidth = Math.max(...labelWidths, textWidth, DfdNodeImpl.DEFAULT_WIDTH);
return neededWidth + DfdNodeImpl.WIDTH_PADDING;
}

protected abstract calculateHeight(): number;
Expand All @@ -83,17 +83,17 @@ export abstract class DfdNode extends DynamicChildrenNode implements WithEditabl
}

@injectable()
export class StorageNode extends DfdNode {
export class StorageNodeImpl extends DfdNodeImpl {
protected override calculateHeight(): number {
const hasLabels = this.labels.length > 0;
if (hasLabels) {
return (
StorageNode.LABEL_START_HEIGHT +
StorageNodeImpl.LABEL_START_HEIGHT +
this.labels.length * DfdNodeLabelRenderer.LABEL_SPACING_HEIGHT +
DfdNodeLabelRenderer.LABEL_SPACE_BETWEEN
);
} else {
return StorageNode.TEXT_HEIGHT;
return StorageNodeImpl.TEXT_HEIGHT;
}
}

Expand All @@ -105,7 +105,7 @@ export class StorageNode extends DfdNode {
export class StorageNodeView implements IView {
constructor(@inject(DfdNodeLabelRenderer) private readonly labelRenderer: DfdNodeLabelRenderer) {}

render(node: Readonly<DfdNode>, context: RenderingContext): VNode {
render(node: Readonly<DfdNodeImpl>, context: RenderingContext): VNode {
const width = node.bounds.width;
const height = node.bounds.height;

Expand All @@ -120,29 +120,29 @@ export class StorageNodeView implements IView {
<line x1="0" y1="0" x2={width} y2="0" />
{context.renderChildren(node, {
xPosition: width / 2,
yPosition: StorageNode.TEXT_HEIGHT / 2,
yPosition: StorageNodeImpl.TEXT_HEIGHT / 2,
} as DfdPositionalLabelArgs)}
{this.labelRenderer.renderNodeLabels(node, StorageNode.LABEL_START_HEIGHT)}
{this.labelRenderer.renderNodeLabels(node, StorageNodeImpl.LABEL_START_HEIGHT)}
<line x1="0" y1={height} x2={width} y2={height} />
</g>
);
}
}

export class FunctionNode extends DfdNode {
export class FunctionNodeImpl extends DfdNodeImpl {
protected override calculateHeight(): number {
const hasLabels = this.labels.length > 0;
if (hasLabels) {
return (
// height for text
FunctionNode.LABEL_START_HEIGHT +
FunctionNodeImpl.LABEL_START_HEIGHT +
// height for the labels
this.labels.length * DfdNodeLabelRenderer.LABEL_SPACING_HEIGHT +
// Spacing between last label and the under edge of the node rectangle
DfdNodeLabelRenderer.LABEL_SPACE_BETWEEN
);
} else {
return FunctionNode.LABEL_START_HEIGHT + FunctionNode.SEPARATOR_NO_LABEL_PADDING;
return FunctionNodeImpl.LABEL_START_HEIGHT + FunctionNodeImpl.SEPARATOR_NO_LABEL_PADDING;
}
}

Expand All @@ -157,41 +157,41 @@ export class FunctionNode extends DfdNode {
export class FunctionNodeView implements IView {
constructor(@inject(DfdNodeLabelRenderer) private readonly labelRenderer: DfdNodeLabelRenderer) {}

render(node: Readonly<FunctionNode>, context: RenderingContext): VNode {
render(node: Readonly<FunctionNodeImpl>, context: RenderingContext): VNode {
const width = node.bounds.width;
const height = node.bounds.height;
const r = FunctionNode.BORDER_RADIUS;
const r = FunctionNodeImpl.BORDER_RADIUS;

return (
<g class-sprotty-node={true} class-function={true}>
<rect x="0" y="0" width={width} height={height} rx={r} ry={r} />
{context.renderChildren(node, {
xPosition: width / 2,
yPosition: FunctionNode.TEXT_HEIGHT / 2,
yPosition: FunctionNodeImpl.TEXT_HEIGHT / 2,
} as DfdPositionalLabelArgs)}
<line x1="0" y1={FunctionNode.TEXT_HEIGHT} x2={width} y2={FunctionNode.TEXT_HEIGHT} />
{this.labelRenderer.renderNodeLabels(node, FunctionNode.LABEL_START_HEIGHT)}
<line x1="0" y1={FunctionNodeImpl.TEXT_HEIGHT} x2={width} y2={FunctionNodeImpl.TEXT_HEIGHT} />
{this.labelRenderer.renderNodeLabels(node, FunctionNodeImpl.LABEL_START_HEIGHT)}
</g>
);
}
}

export class IONode extends DfdNode {
export class IONodeImpl extends DfdNodeImpl {
protected override calculateHeight(): number {
const hasLabels = this.labels.length > 0;
if (hasLabels) {
return (
IONode.LABEL_START_HEIGHT +
IONodeImpl.LABEL_START_HEIGHT +
this.labels.length * DfdNodeLabelRenderer.LABEL_SPACING_HEIGHT +
DfdNodeLabelRenderer.LABEL_SPACE_BETWEEN
);
} else {
return IONode.TEXT_HEIGHT;
return IONodeImpl.TEXT_HEIGHT;
}
}

protected override calculateWidth(): number {
return super.calculateWidth() + IONode.LEFT_PADDING;
return super.calculateWidth() + IONodeImpl.LEFT_PADDING;
}

static readonly TEXT_HEIGHT = 32;
Expand All @@ -203,20 +203,20 @@ export class IONode extends DfdNode {
export class IONodeView implements IView {
constructor(@inject(DfdNodeLabelRenderer) private readonly labelRenderer: DfdNodeLabelRenderer) {}

render(node: Readonly<DfdNode>, context: RenderingContext): VNode {
render(node: Readonly<DfdNodeImpl>, context: RenderingContext): VNode {
const width = node.bounds.width;
const height = node.bounds.height;
const leftPadding = IONode.LEFT_PADDING / 2;
const leftPadding = IONodeImpl.LEFT_PADDING / 2;

return (
<g class-sprotty-node={true} class-io={true}>
<rect x="0" y="0" width={width} height={height} />
<line x1={IONode.LEFT_PADDING} y1="0" x2={IONode.LEFT_PADDING} y2={height} />
<line x1={IONodeImpl.LEFT_PADDING} y1="0" x2={IONodeImpl.LEFT_PADDING} y2={height} />
{context.renderChildren(node, {
xPosition: width / 2 + leftPadding,
yPosition: IONode.TEXT_HEIGHT / 2,
yPosition: IONodeImpl.TEXT_HEIGHT / 2,
} as DfdPositionalLabelArgs)}
{this.labelRenderer.renderNodeLabels(node, IONode.LABEL_START_HEIGHT, leftPadding)}
{this.labelRenderer.renderNodeLabels(node, IONodeImpl.LABEL_START_HEIGHT, leftPadding)}
</g>
);
}
Expand Down
8 changes: 4 additions & 4 deletions src/features/serialize/loadDefaultDiagram.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import {
} from "sprotty";
import { Action, SGraph, SEdge } from "sprotty-protocol";
import { generateRandomSprottyId } from "../../utils";
import { DfdNodeSchema } from "../dfdElements/nodes";
import { DfdNode } from "../dfdElements/nodes";
import { LabelType, LabelTypeRegistry } from "../labels/labelTypeRegistry";
import { DynamicChildrenProcessor } from "../dfdElements/dynamicChildren";
import { postLoadActions } from "./load";
Expand All @@ -39,7 +39,7 @@ const defaultDiagramSchema: SGraph = {
},
],
position: { x: 100, y: 100 },
} as DfdNodeSchema,
} as DfdNode,
{
type: "node:function",
id: functionId,
Expand All @@ -51,14 +51,14 @@ const defaultDiagramSchema: SGraph = {
},
],
position: { x: 200, y: 200 },
} as DfdNodeSchema,
} as DfdNode,
{
type: "node:input-output",
id: outputId,
text: "Customer",
position: { x: 325, y: 207 },
labels: [],
} as DfdNodeSchema,
} as DfdNode,
{
type: "edge:arrow",
id: generateRandomSprottyId(),
Expand Down
6 changes: 3 additions & 3 deletions src/features/toolPalette/nodeCreationTool.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import {
Tool,
} from "sprotty";
import { Action, CreateElementAction } from "sprotty-protocol";
import { DfdNode, DfdNodeSchema } from "../dfdElements/nodes";
import { DfdNodeImpl, DfdNode } from "../dfdElements/nodes";
import { DynamicChildrenProcessor } from "../dfdElements/dynamicChildren";

/**
Expand Down Expand Up @@ -57,14 +57,14 @@ export class NodeCreationToolMouseListener extends MouseListener {
width: -1,
height: -1,
},
} as DfdNodeSchema;
} as DfdNode;

// Adjust the position of the node so that it is centered on the cursor.
const adjust = (offset: number, size: number) => {
return offset / target.zoom - size / 2;
};
nodeSchema.position = {
x: target.scroll.x + adjust(event.offsetX, DfdNode.DEFAULT_WIDTH),
x: target.scroll.x + adjust(event.offsetX, DfdNodeImpl.DEFAULT_WIDTH),
y: target.scroll.y + adjust(event.offsetY, 30),
};

Expand Down

0 comments on commit 39582d1

Please sign in to comment.