level constraints
@@ -656,7 +709,7 @@
x: x + app.componentSize.width / 2,
y: y + app.componentSize.height / 2 + 5,
'text-anchor': 'middle',
- 'font-size': 14,
+ 'font-size': 16,
fill: '#ccc'
});
this.text.textContent = this.props.label;
@@ -677,6 +730,11 @@
} else {
app.clearSelection();
this.select();
+ }
+ });
+ this.group.addEventListener('dblclick', (e) => {
+ e.stopPropagation();
+ if (!app.arrowMode) {
app.showPropsPanel(this);
}
});
@@ -763,26 +821,26 @@
getConnectionPointToward(otherNode) {
const bbox = this.group.getBBox();
- const ctm = this.group.getCTM();
+ const ctm = this.group.getCTM();
- const centerX = ctm.e + bbox.x + bbox.width / 2;
- const centerY = ctm.f + bbox.y + bbox.height / 2;
+ const centerX = ctm.e + bbox.x + bbox.width / 2;
+ const centerY = ctm.f + bbox.y + bbox.height / 2;
- const otherCenter = otherNode.getCenter();
+ const otherCenter = otherNode.getCenter();
- let edgeX = centerX;
- let edgeY = centerY;
+ let edgeX = centerX;
+ let edgeY = centerY;
- const dx = otherCenter.x - centerX;
- const dy = otherCenter.y - centerY;
+ const dx = otherCenter.x - centerX;
+ const dy = otherCenter.y - centerY;
- if (Math.abs(dx) > Math.abs(dy)) {
- edgeX += dx > 0 ? bbox.width / 2 : -bbox.width / 2;
- } else {
- edgeY += dy > 0 ? bbox.height / 2 : -bbox.height / 2;
- }
+ if (Math.abs(dx) > Math.abs(dy)) {
+ edgeX += dx > 0 ? bbox.width / 2 : -bbox.width / 2;
+ } else {
+ edgeY += dy > 0 ? bbox.height / 2 : -bbox.height / 2;
+ }
- return { x: edgeX, y: edgeY };
+ return { x: edgeX, y: edgeY };
}
}
@@ -812,7 +870,7 @@
updatePosition() {
const s = this.start.getConnectionPointToward(this.end);
-const e = this.end.getConnectionPointToward(this.start);
+ const e = this.end.getConnectionPointToward(this.start);
this.line.setAttribute('x1', s.x);
this.line.setAttribute('y1', s.y);
this.line.setAttribute('x2', e.x);
@@ -849,7 +907,7 @@ const e = this.end.getConnectionPointToward(this.start);
this.selectedConnection = null;
this.sidebar = document.getElementById('sidebar');
- this.arrowTool = document.getElementById('arrow-tool');
+ this.arrowToolBtn = document.getElementById('arrow-tool-btn');
this.canvasContainer = document.getElementById('canvas-container');
this.canvas = document.getElementById('canvas');
this.runButton = document.getElementById('run-button');
@@ -860,24 +918,34 @@ const e = this.end.getConnectionPointToward(this.start);
this.cacheGroup = document.getElementById('cache-group');
this.selectedNode = null;
+ this.placeholderText = createSVGElement('text', {
+ x: '50%',
+ y: '50%',
+ 'text-anchor': 'middle',
+ 'dominant-baseline': 'middle',
+ fill: '#444',
+ 'font-size': 18,
+ 'pointer-events': 'none'
+ });
+ this.placeholderText.textContent = 'Drag and drop elements to start building your system. Press backspace or delete to remove elements.';
+ this.canvas.appendChild(this.placeholderText);
this.initEventHandlers();
}
initEventHandlers() {
- this.arrowTool.addEventListener('click', () => {
+ this.arrowToolBtn.addEventListener('click', () => {
this.arrowMode = !this.arrowMode;
if (this.arrowMode) {
- this.arrowTool.classList.add('active');
+ this.arrowToolBtn.classList.add('active');
this.hidePropsPanel();
} else {
- this.arrowTool.classList.remove('active');
+ this.arrowToolBtn.classList.remove('active');
if (this.connectionStart) {
this.connectionStart.group.classList.remove('selected');
this.connectionStart = null;
}
}
- });
-
+ });
this.sidebar.addEventListener('dragstart', (e) => {
if (e.target.classList.contains('component-icon')) {
e.dataTransfer.setData('text/plain', e.target.getAttribute('data-type'));
@@ -901,6 +969,10 @@ const e = this.end.getConnectionPointToward(this.start);
const x = svgP.x - this.componentSize.width / 2;
const y = svgP.y - this.componentSize.height / 2;
new Node(type, x, y, this);
+ if (this.placeholderText) {
+ this.placeholderText.remove();
+ this.placeholderText = null;
+ }
});
this.runButton.addEventListener('click', () => {
@@ -979,7 +1051,6 @@ const e = this.end.getConnectionPointToward(this.start);
}
showPropsPanel(nodeObj) {
- // ... unchanged ...
this.activeNode = nodeObj;
const panel = this.nodePropsPanel;