Skip to content

Commit 497de00

Browse files
ellthompsonellthompson
committed
updates
1 parent fae8d6d commit 497de00

File tree

5 files changed

+66
-27
lines changed

5 files changed

+66
-27
lines changed

‎package.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,9 @@
2929
"build": "cd node_modules/@playcanvas/pcui; npm install; EXTRACT_CSS=true npm run build;cp dist/pcui-binding.js ../../../src/pcui-binding-external.js; cp dist/pcui.js ../../../src/pcui-external.js; cd ../../../; webpack --config webpack.config.js",
3030
"lint": "eslint --ext .js src",
3131
"storybook": "jsdoc -r -X src/components > ./.storybook/utils/jsdoc-ast.json && start-storybook -p 9010 -s public",
32-
"build:analyze": "ENVIRONMENT=production ANALYZE_BUNDLE=true webpack --config webpack.config.js"
32+
"build:analyze": "ENVIRONMENT=production ANALYZE_BUNDLE=true webpack --config webpack.config.js",
33+
"watch": "ENVIRONMENT=development webpack --config webpack.config.js --watch",
34+
"build:prod": "webpack --config webpack.config.js"
3335
},
3436
"browserslist": {
3537
"production": [

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

Lines changed: 16 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -13,11 +13,6 @@ class GraphViewNode {
1313
this.nodeSchema = nodeSchema;
1414
this.state = GraphViewNode.STATES.DEFAULT;
1515

16-
if (domEvent) {
17-
var pos = this._graphView.getWindowToGraphPosition(new Vec2(domEvent.clientX, domEvent.clientY));
18-
nodeData.posX = pos.x;
19-
nodeData.posY = pos.y;
20-
}
2116
var rectHeight = 28;
2217
var portHeight = 0;
2318
var attributeHeight = 0;
@@ -230,7 +225,22 @@ class GraphViewNode {
230225
const container = new Container({ class: 'graph-node-container' });
231226
const label = new Label({ text: attribute.name, class: 'graph-node-label' });
232227
let input;
233-
const nodeValue = nodeData.attributes ? nodeData.attributes[attribute.name] : nodeData[attribute.name];
228+
let nodeValue;
229+
if (nodeData.attributes) {
230+
if (nodeData.attributes[attribute.name]) {
231+
nodeValue = nodeData.attributes[attribute.name];
232+
} else {
233+
Object.keys(nodeData.attributes).forEach(k => {
234+
const a = nodeData.attributes[k];
235+
if (a.name === attribute.name) {
236+
nodeValue = a.defaultValue;
237+
}
238+
});
239+
}
240+
}
241+
if (!nodeValue) {
242+
nodeValue = nodeData[attribute.name];
243+
}
234244
switch (attribute.type) {
235245
case 'TEXT_INPUT':
236246
input = new TextInput({ class: 'graph-node-input', value: nodeValue });

‎src/components/Graph/index.js‎

Lines changed: 45 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,8 @@ 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';
76
import './style.scss';
8-
// import './style-story.scss';
7+
import './style-story.scss';
98

109

1110
export var GRAPH_ACTIONS = {
@@ -25,7 +24,8 @@ export var GRAPH_ACTIONS = {
2524
var defaultConfig = {
2625
edgeHoverEffect: true,
2726
passiveUIEvents: false,
28-
readOnly: false
27+
readOnly: false,
28+
restrictTranslate: false
2929
};
3030

3131
class SelectedItem {
@@ -157,10 +157,21 @@ class Graph extends Element {
157157
}
158158
});
159159
}
160+
let element = e.target;
161+
while (!element.classList.contains('pcui-contextmenu')) {
162+
element = element.parentElement;
163+
}
164+
var pos = {
165+
x: Number(element.style.left.replace('px', '')),
166+
y: Number(element.style.top.replace('px', ''))
167+
};
168+
pos = this.getWindowToGraphPosition(pos);
169+
node.posX = pos.x;
170+
node.posY = pos.y;
160171
if (this._config.passiveUIEvents) {
161172
this.dom.dispatchEvent(new CustomEvent(GRAPH_ACTIONS.ADD_NODE, { detail: node }));
162173
} else {
163-
this.createNode(node, e);
174+
this.createNode(node);
164175
this._graphData.set(`data.nodes.${node.id}`, node);
165176
this.selectNode(node);
166177
}
@@ -312,7 +323,7 @@ class Graph extends Element {
312323
var node = this._graphData.get(`data.nodes.${nodeId}`);
313324
var prevPosX = node.posX;
314325
var prevPosY = node.posY;
315-
if (new Vec2(pos.x, pos.y).sub(new Vec2(node.posX, node.posY)).length() > 5) {
326+
if (pos.x !== node.posX || pos.y !== node.posY) {
316327
node.posX = pos.x;
317328
node.posY = pos.y;
318329
if (!this._config.passiveUIEvents) {
@@ -324,35 +335,43 @@ class Graph extends Element {
324335
}
325336
}
326337

327-
onNodeAttributeUpdated(nodeId, attribute, value) {
338+
_onNodeAttributeUpdated(nodeId, attribute, value) {
328339
var node = this._graphData.get(`data.nodes.${nodeId}`);
329-
if (value === node.attributes[attribute.name]) return;
330340
var prevAttributeValue;
331-
if (Number.isFinite(node.attributes[attribute.name].x)) {
332-
prevAttributeValue = { ...node.attributes[attribute.name] };
341+
let attributeKey = node.attributes[attribute.name] ? attribute.name : undefined;
342+
if (!attributeKey) {
343+
Object.keys(node.attributes).forEach(k => {
344+
const item = node.attributes[k];
345+
if (item.name === attribute.name) attributeKey = k;
346+
});
347+
}
348+
if (Number.isFinite(node.attributes[attributeKey].x)) {
349+
prevAttributeValue = { ...node.attributes[attributeKey] };
333350
} else {
334-
prevAttributeValue = node.attributes[attribute.name];
351+
prevAttributeValue = node.attributes[attributeKey];
335352
}
336353
if (Array.isArray(value)) {
337354
var keyMap = ['x', 'y', 'z', 'w'];
338355
value.forEach((v, i) => {
339-
node.attributes[attribute.name][keyMap[i]] = v;
356+
node.attributes[attributeKey][keyMap[i]] = v;
340357
});
341358
} else {
342-
node.attributes[attribute.name] = value;
359+
node.attributes[attributeKey] = value;
343360
}
344-
if (!this._config.passiveUIEvents) {
345-
this._graphData.set(`data.nodes.${nodeId}`, node);
346-
} else {
361+
if (JSON.stringify(node.attributes[attributeKey]) === JSON.stringify(prevAttributeValue)) return;
362+
if (this._config.passiveUIEvents) {
347363
this.updateNodeAttribute(nodeId, attribute.name, prevAttributeValue);
364+
} else {
365+
this._graphData.set(`data.nodes.${nodeId}`, node);
348366
}
349367
this.dom.dispatchEvent(
350368
new CustomEvent(
351369
GRAPH_ACTIONS.UPDATE_NODE_ATTRIBUTE,
352370
{
353371
detail: {
354372
node: node,
355-
attribute: attribute.name
373+
attribute: attribute.name,
374+
attributeKey: attributeKey
356375
}
357376
}
358377
)
@@ -396,7 +415,7 @@ class Graph extends Element {
396415
this.view.addNodeEvent(
397416
node.id,
398417
`updateAttribute`,
399-
this.onNodeAttributeUpdated.bind(this),
418+
this._onNodeAttributeUpdated.bind(this),
400419
attribute
401420
);
402421
});
@@ -414,7 +433,7 @@ class Graph extends Element {
414433

415434
updateNodeAttribute(nodeId, attribute, value) {
416435
if (!this._graphData.get(`data.nodes.${nodeId}`)) return;
417-
this._graphData.set(`data.nodes.${nodeId}.${attribute}`, value);
436+
this._graphData.set(`data.nodes.${nodeId}.attributes.${attribute}`, value);
418437
this.view.updateNodeAttribute(nodeId, attribute, value);
419438
}
420439

@@ -492,6 +511,14 @@ class Graph extends Element {
492511
return this.view.getGraphScale();
493512
}
494513

514+
getWindowToGraphPosition(pos) {
515+
return this.view.getWindowToGraphPosition(pos);
516+
}
517+
518+
getGraphPosition(pos) {
519+
return this.view.getGraphPosition(pos);
520+
}
521+
495522
on(eventName, callback) {
496523
if (this._config.readOnly && (!eventName.includes('EVENT_SELECT_') && !eventName.includes('EVENT_DESELECT'))) return;
497524
this.dom.addEventListener(eventName, (e) => {

‎src/components/Graph/joint-graph.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ class JointGraph {
2121
cellViewNamespace: joint.shapes,
2222
height: dom.offsetHeight,
2323
clickThreshold: 1,
24-
restrictTranslate: true,
24+
restrictTranslate: this._config.restrictTranslate,
2525
background: {
2626
color: '#20292B'
2727
},

‎webpack.config.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ const path = require('path');
33
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
44

55
var config = {
6-
mode: 'development',
6+
mode: process.env.ENVIRONMENT === 'development' ? 'development' : 'production',
77
entry: {
88
'pcuiGraph': './src/index.js',
99
'pcuiGraph-react': './src/components/index.js'

0 commit comments

Comments
 (0)