Skip to content

Commit fae8d6d

Browse files
ellthompsonellthompson
committed
updates
1 parent a216376 commit fae8d6d

File tree

2 files changed

+45
-26
lines changed

2 files changed

+45
-26
lines changed

‎src/components/Graph/graph-view-node.js‎

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -230,22 +230,18 @@ class GraphViewNode {
230230
const container = new Container({ class: 'graph-node-container' });
231231
const label = new Label({ text: attribute.name, class: 'graph-node-label' });
232232
let input;
233-
let nodeValue;
233+
const nodeValue = nodeData.attributes ? nodeData.attributes[attribute.name] : nodeData[attribute.name];
234234
switch (attribute.type) {
235235
case 'TEXT_INPUT':
236-
nodeValue = nodeData.attributes[attribute.name];
237236
input = new TextInput({ class: 'graph-node-input', value: nodeValue });
238237
break;
239238
case 'BOOLEAN_INPUT':
240-
nodeValue = nodeData.attributes[attribute.name];
241239
input = new BooleanInput({ class: 'graph-node-input', value: nodeValue });
242240
break;
243241
case 'NUMERIC_INPUT':
244-
nodeValue = nodeData.attributes[attribute.name];
245242
input = new NumericInput({ class: 'graph-node-input', hideSlider: true, value: nodeValue && nodeValue.x ? nodeValue.x : nodeValue });
246243
break;
247244
case 'VEC_2_INPUT':
248-
nodeValue = nodeData.attributes[attribute.name];
249245
input = new VectorInput({ dimensions: 2, class: 'graph-node-input', hideSlider: true, value: [
250246
nodeValue.x,
251247
nodeValue.y
@@ -254,7 +250,6 @@ class GraphViewNode {
254250
input.inputs.forEach(i => i._sliderControl.dom.remove());
255251
break;
256252
case 'VEC_3_INPUT':
257-
nodeValue = nodeData.attributes[attribute.name];
258253
input = new VectorInput({ dimensions: 3, class: 'graph-node-input', hideSlider: true, value: [
259254
nodeValue.x,
260255
nodeValue.y,
@@ -264,7 +259,6 @@ class GraphViewNode {
264259
input.inputs.forEach(i => i._sliderControl.dom.remove());
265260
break;
266261
case 'VEC_4_INPUT':
267-
nodeValue = nodeData.attributes[attribute.name];
268262
input = new VectorInput({ dimensions: 4, class: 'graph-node-input', hideSlider: true, value: [
269263
nodeValue.x,
270264
nodeValue.y,
@@ -370,7 +364,8 @@ class GraphViewNode {
370364
switch (event) {
371365
case 'updatePosition': {
372366
nodeView.on('element:pointerup', () => {
373-
callback(this.nodeData.id, this._graphView.getWindowToGraphPosition(nodeView.el.getBoundingClientRect()));
367+
var newPos = this._graphView.getWindowToGraphPosition(nodeView.el.getBoundingClientRect());
368+
callback(this.nodeData.id, newPos);
374369
});
375370
break;
376371
}

‎src/components/Graph/index.js‎

Lines changed: 42 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,9 @@ import { Observer } from '../../pcui-binding-external';
33
import { diff } from 'json-diff';
44
import { deepCopyFunction } from './util';
55
import GraphView from './graph-view';
6+
import { Vec2 } from 'playcanvas';
67
import './style.scss';
7-
import './style-story.scss';
8+
// import './style-story.scss';
89

910

1011
export var GRAPH_ACTIONS = {
@@ -28,10 +29,23 @@ var defaultConfig = {
2829
};
2930

3031
class SelectedItem {
31-
constructor(graph, type, id) {
32+
constructor(graph, type, id, edgeId) {
3233
this._graph = graph;
3334
this._type = type;
3435
this._id = id;
36+
this._edgeId = edgeId;
37+
}
38+
39+
get type() {
40+
return this._type;
41+
}
42+
43+
get id() {
44+
return this._id;
45+
}
46+
47+
get edgeId() {
48+
return this._edgeId;
3549
}
3650

3751
selectItem() {
@@ -166,26 +180,35 @@ class Graph extends Element {
166180
this.view.addCanvasContextMenu(viewContextMenuItems);
167181
}
168182

169-
selectNode(node) {
183+
get selectedItem() {
184+
return this._selectedItem;
185+
}
186+
187+
selectNode(node, suppressEvents) {
188+
const prevItem = this._selectedItem;
170189
this.deselectItem();
171-
this.dom.dispatchEvent(new CustomEvent(GRAPH_ACTIONS.SELECT_NODE, { detail: node }));
190+
if (!suppressEvents) this.dom.dispatchEvent(new CustomEvent(GRAPH_ACTIONS.SELECT_NODE, { detail: { node, prevItem } }));
172191
this._selectedItem = new SelectedItem(this, 'NODE', node.id);
173192
this._selectedItem.selectItem();
174193
}
175194

176-
selectEdge(edge) {
195+
selectEdge(edge, edgeId, suppressEvents) {
196+
const prevItem = this._selectedItem;
177197
this.deselectItem();
178-
this.dom.dispatchEvent(new CustomEvent(GRAPH_ACTIONS.SELECT_EDGE, { detail: { edge } }));
179-
this._selectedItem = new SelectedItem(this, 'EDGE', `${edge.from}-${edge.to}`);
198+
if (!suppressEvents) this.dom.dispatchEvent(new CustomEvent(GRAPH_ACTIONS.SELECT_EDGE, { detail: { edge, edgeId, prevItem } }));
199+
this._selectedItem = new SelectedItem(this, 'EDGE', `${edge.from}-${edge.to}`, edgeId);
180200
this._selectedItem.selectItem();
181201
}
182202

183-
deselectItem() {
203+
deselectItem(suppressEvents) {
184204
if (this._selectedItem) {
185-
this.dom.dispatchEvent(new CustomEvent(GRAPH_ACTIONS.DESELECT_ITEM, { detail: {
186-
type: this._selectedItem._type,
187-
id: this._selectedItem._id
188-
} }));
205+
if (!suppressEvents) {
206+
this.dom.dispatchEvent(new CustomEvent(GRAPH_ACTIONS.DESELECT_ITEM, { detail: {
207+
type: this._selectedItem._type,
208+
id: this._selectedItem._id,
209+
edgeId: this._selectedItem._edgeId
210+
} }));
211+
}
189212
this._selectedItem.deselectItem();
190213
this._selectedItem = null;
191214
}
@@ -199,7 +222,7 @@ class Graph extends Element {
199222
createEdge(edge, edgeId, suppressEvents) {
200223
var edgeSchema = this._graphSchema.edges[edge.edgeType];
201224
this.view.addEdge(edge, edgeSchema, (edge) => {
202-
this.selectEdge(edge);
225+
this.selectEdge(edge, edgeId);
203226
});
204227
var contextMenuItems = deepCopyFunction(edgeSchema.contextMenuItems).map(item => {
205228
if (item.action === GRAPH_ACTIONS.DELETE_EDGE) {
@@ -248,7 +271,7 @@ class Graph extends Element {
248271
}
249272
this.createEdge(edge, edgeId);
250273
this.suppressNodeSelect = true;
251-
this.selectEdge(edge);
274+
this.selectEdge(edge, edgeId);
252275
}
253276

254277
_createUnconnectedEdgeForNode(node, edgeType) {
@@ -276,7 +299,7 @@ class Graph extends Element {
276299
if (this.suppressNodeSelect) {
277300
this.suppressNodeSelect = false;
278301
} else {
279-
this.dom.dispatchEvent(new CustomEvent(GRAPH_ACTIONS.SELECT_NODE, { detail: node }));
302+
this.dom.dispatchEvent(new CustomEvent(GRAPH_ACTIONS.SELECT_NODE, { detail: { node, prevItem: this._selectedItem } }));
280303
if (this._selectedItem) {
281304
this._selectedItem.deselectItem();
282305
}
@@ -289,7 +312,7 @@ class Graph extends Element {
289312
var node = this._graphData.get(`data.nodes.${nodeId}`);
290313
var prevPosX = node.posX;
291314
var prevPosY = node.posY;
292-
if (pos.x !== node.posX || pos.y !== node.posY) {
315+
if (new Vec2(pos.x, pos.y).sub(new Vec2(node.posX, node.posY)).length() > 5) {
293316
node.posX = pos.x;
294317
node.posY = pos.y;
295318
if (!this._config.passiveUIEvents) {
@@ -404,6 +427,7 @@ class Graph extends Element {
404427

405428
deleteNode(nodeId, suppressEvents, passiveUIEvents) {
406429
if (!this._graphData.get(`data.nodes.${nodeId}`)) return;
430+
if (this._selectedItem && this._selectedItem._id === nodeId) this.deselectItem();
407431
if (!passiveUIEvents) this.view.removeNode(nodeId);
408432
const node = this._graphData.get(`data.nodes.${nodeId}`);
409433
if (!passiveUIEvents) this._graphData.unset(`data.nodes.${nodeId}`);
@@ -442,9 +466,9 @@ class Graph extends Element {
442466
var edgeSchema = this._graphSchema.edges[edge.edgeType];
443467
if ([edge.from, edge.to].includes(from) && [edge.from, edge.to].includes(to)) {
444468
this.view.addEdge(edge, edgeSchema, (edge) => {
445-
this.selectEdge(edge);
469+
this.selectEdge(edge, edgeKey);
446470
});
447-
this.selectEdge(edge);
471+
this.selectEdge(edge, edgeKey);
448472
}
449473
});
450474
}

0 commit comments

Comments
 (0)