Skip to content
Snippets Groups Projects
Commit 78639b94 authored by Matthias Konitzny's avatar Matthias Konitzny :fire:
Browse files

Reimplemented label drawing

parent ddd7904b
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/editor/editor.tsx
+ 2
− 22
View file @ 78639b94
......@@ -174,27 +174,6 @@ export class Editor extends React.PureComponent<any, stateTypes> {
});
}
// /**
// * Makes sure to always offer a valid format of the selected nodes. Is either undefined or contains at least one valid node. An empty array is never returned.
// */
// private get selectedNodes(): Node[] {
// // TODO: Here are a lot of things that should not be possible by design
//
// // Remove undefines
// let selectedNodes = this.state.selectedNodes.filter(
// (n: Node) => n !== undefined
// );
//
// // Remove duplicates
// selectedNodes = [...new Set(selectedNodes)];
//
// if (selectedNodes.length > 0) {
// return selectedNodes;
// }
//
// return undefined;
// }
handleBoxSelect(selectedNodes: Node[]) {
if (selectedNodes !== undefined && selectedNodes.length <= 0) {
return;
......@@ -221,7 +200,7 @@ export class Editor extends React.PureComponent<any, stateTypes> {
}
private handleNodeDataChange(nodeData: NodeDataChangeRequest[]) {
// Make a shallow copy of the graph object to trigger an update over setState
// Create a shallow copy of the graph object to trigger an update over setState
const graph = Object.assign(new DynamicGraph(), this.state.graph);
// Modify node
......@@ -271,6 +250,7 @@ export class Editor extends React.PureComponent<any, stateTypes> {
width={this.state.graphWidth}
onNodeSelectionChanged={this.selectNodes}
selectedNodes={this.state.selectedNodes}
settings={this.state.settings}
/>
</SelectLayer>
</div>
......
src/editor/renderer.tsx
+ 77
− 63
View file @ 78639b94
......@@ -33,7 +33,8 @@ export class GraphRenderer2D extends React.PureComponent<
/**
* Collection of all currently selected nodes. Can also be undefined or empty.
*/
selectedNodes: PropTypes.arrayOf(PropTypes.instanceOf(Node)),
selectedNodes: PropTypes.arrayOf(PropTypes.instanceOf(Node)).isRequired,
settings: PropTypes.object.isRequired,
};
static stateTypes = {};
......@@ -264,80 +265,93 @@ export class GraphRenderer2D extends React.PureComponent<
ctx: CanvasRenderingContext2D,
globalScale: number
) {
// TODO: Refactor
const iconSize = 14;
const isNodeHighlighted = this.props.selectedNodes.includes(node);
this.drawNodeIcon(node, ctx, iconSize);
// add ring just for highlighted nodes
if (this.props.selectedNodes.includes(node)) {
// Outer circle
ctx.beginPath();
ctx.arc(node.x, node.y, 4 * 0.7, 0, 2 * Math.PI, false);
ctx.fillStyle = "white";
ctx.fill();
// Inner circle
ctx.beginPath();
ctx.arc(node.x, node.y, 4 * 0.3, 0, 2 * Math.PI, false);
ctx.fillStyle = node.type.color;
ctx.fill();
if (isNodeHighlighted) {
this.drawNodeHighlight(ctx, node);
}
/**
* Nothing selected? => Draw all labels
* If this nodes is considered highlighted => Draw label
* If this node is a neighbor of a selected node => Draw label
*/
const drawLabel =
this.props.selectedNodes.length == 0 ||
isNodeHighlighted ||
this.props.selectedNodes.some((n: Node) =>
n.neighbors.includes(node)
);
if (this.props.settings && drawLabel) {
const labelHeightOffset = iconSize / 3;
this.drawNodeLabel(node, globalScale, ctx, labelHeightOffset, 11);
}
}
private drawNodeLabel(
node: Node,
globalScale: number,
ctx: CanvasRenderingContext2D,
heightOffset = 6,
fontSize = 11
) {
const label = node.name;
fontSize = fontSize / globalScale;
ctx.font = `${fontSize}px Sans-Serif`;
const textWidth = ctx.measureText(label).width;
const width = textWidth + fontSize * 0.2;
const height = fontSize * 1.2;
ctx.fillStyle = "rgba(0, 0, 0, 0.5)";
ctx.fillRect(
node.x - width / 2,
node.y - height / 2 + height + heightOffset,
width,
height
);
// Draw image
const imageSize = 12;
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillStyle = "white";
ctx.fillText(label, node.x, node.y + height + heightOffset);
}
private drawNodeHighlight(ctx: CanvasRenderingContext2D, node: Node) {
// Outer circle
ctx.beginPath();
ctx.arc(node.x, node.y, 4 * 0.7, 0, 2 * Math.PI, false);
ctx.fillStyle = "white";
ctx.fill();
// Inner circle
ctx.beginPath();
ctx.arc(node.x, node.y, 4 * 0.3, 0, 2 * Math.PI, false);
ctx.fillStyle = node.type.color;
ctx.fill();
}
private drawNodeIcon(
node: Node,
ctx: CanvasRenderingContext2D,
iconSize: number
) {
if (node.icon !== undefined) {
const img = new Image();
img.src = node.icon;
ctx.drawImage(
img,
node.x - imageSize / 2,
node.y - imageSize / 2,
imageSize,
imageSize
node.x - iconSize / 2,
node.y - iconSize / 2,
iconSize,
iconSize
);
}
// Draw label
/**
* Nothing selected? => Draw all labels
* If this nodes is considered highlighted => Draw label
* If this node is a neighbor of a selected node => Draw label
*/
// TODO: Reenable node label rendering
// const isNodeRelatedToSelection: boolean =
// this.state.selectedNodes.length != 0 ||
// this.isHighlighted(node) ||
// this.selectedNodes.some((selectedNode: Node) =>
// selectedNode.neighbors.includes(node)
// );
//
// if (this.state.visibleLabels && isNodeRelatedToSelection) {
// const label = node.name;
// const fontSize = 11 / globalScale;
// ctx.font = `${fontSize}px Sans-Serif`;
// const textWidth = ctx.measureText(label).width;
// const bckgDimensions = [textWidth, fontSize].map(
// (n) => n + fontSize * 0.2
// ); // some padding
//
// const nodeHeightOffset = imageSize / 3 + bckgDimensions[1];
// ctx.fillStyle = "rgba(0, 0, 0, 0.5)";
// ctx.fillRect(
// (node as any).x - bckgDimensions[0] / 2,
// (node as any).y - bckgDimensions[1] / 2 + nodeHeightOffset,
// ...bckgDimensions
// );
//
// ctx.textAlign = "center";
// ctx.textBaseline = "middle";
// ctx.fillStyle = "white";
// ctx.fillText(
// label,
// (node as any).x,
// (node as any).y + nodeHeightOffset
// );
// }
// TODO: Render label as always visible
}
private handleLinkCanvasObject(
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment