tp-elements/tp-flow-nodes
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixes and improvements

Browse Source
This commit is contained in:
trading_peter
2025-02-25 19:07:21 +01:00
parent 6d77ff13c9
commit 083a25f302
6 changed files with 247 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
connections.js
View File

@@ -9,16 +9,18 @@ export const connectionStyles = css`
transition: stroke 0.3s ease, stroke-width 0.3s ease;
pointer-events: all;
cursor: pointer;
stroke: var(--connection-stroke-color, #999);
stroke-width: var(--connection-stroke-width, 3);
}
.connections path:hover {
stroke: #999;
stroke-width: 3;
stroke: var(--connection-stroke-color-hover, #999);
stroke-width: var(--connection-stroke-width-hover, 3);
}
.connections path.selected {
stroke: #3498db;
stroke-width: 3;
stroke: var(--connection-stroke-color-selected, #3498db);
stroke-width: var(--connection-stroke-width-selected, 3);
}
.delete-button-group {
@@ -55,45 +57,56 @@ export const connections = function(superClass) {
this.connections = [];
this.draggingConnection = null;
this.mousePosition = { x: 0, y: 0 };
this._updatePreviewConnection = this._updatePreviewConnection.bind(this)
this._conDocClick = this._conDocClick.bind(this);
}
firstUpdated() {
super.firstUpdated();
this.addEventListener('port-click', this._handlePortClick);
document.addEventListener('mousemove', this._updatePreviewConnection.bind(this));
document.addEventListener('mousemove', this._updatePreviewConnection);
document.addEventListener('click', this._conDocClick);
}
disconnectedCallback() {
super.disconnectedCallback();
document.addEventListener('click', (e) => {
// Check if clicking on an output port
const path = e.composedPath();
const isOutputPort = path.some(el =>
this.removeEventListener('port-click', this._handlePortClick);
document.removeEventListener('mousemove', this._updatePreviewConnection);
document.removeEventListener('click', this._conDocClick);
}
_conDocClick(e) {
// Check if clicking on an output port
const path = e.composedPath();
const isOutputPort = path.some(el =>
el instanceof HTMLElement &&
el.classList &&
el.classList.contains('output-ports')
);
// Only cancel connection if we're dragging AND it's not an output port
if (this.draggingConnection && !isOutputPort) {
// Check if we clicked on an input port
const isInputPort = path.some(el =>
el instanceof HTMLElement &&
el.classList &&
el.classList.contains('output-ports')
el.classList.contains('input-ports')
);
// Only cancel connection if we're dragging AND it's not an output port
if (this.draggingConnection && !isOutputPort) {
// Check if we clicked on an input port
const isInputPort = path.some(el =>
el instanceof HTMLElement &&
el.classList &&
el.classList.contains('input-ports')
);
// If not an input port, cancel the connection
if (!isInputPort) {
this.draggingConnection = null;
this.requestUpdate();
}
}
// Handle existing connection deselection
if (e.target === this.canvas) {
this.selectedConnection = null;
// If not an input port, cancel the connection
if (!isInputPort) {
this.draggingConnection = null;
this.requestUpdate();
}
});
super.firstUpdated();
}
// Handle existing connection deselection
if (e.target === this.canvas) {
this.selectedConnection = null;
this.requestUpdate();
}
}
_updatePreviewConnection(e) {
@@ -117,6 +130,7 @@ export const connections = function(superClass) {
width: ${bounds.width}px;
height: ${bounds.height}px;
pointer-events: none;
z-index: -1;
` : `
position: absolute;
top: 0;
@@ -124,10 +138,11 @@ export const connections = function(superClass) {
width: 100%;
height: 100%;
pointer-events: none;
z-index: -1;
`;
return html`
<svg
<svg
class="connections"
style="${style}"
viewBox="${this.canvas ? `${bounds.minX} ${bounds.minY} ${bounds.width} ${bounds.height}` : '0 0 100 100'}"
@@ -143,7 +158,7 @@ export const connections = function(superClass) {
if (!sourceNode) return '';
const sourcePort = sourceNode.shadowRoot.querySelector(
`.output-ports [data-port-id="${this.draggingConnection.sourcePortId}"]`
`.output-ports [portid="${this.draggingConnection.sourcePortId}"]`
);
if (!sourcePort) return '';
@@ -190,8 +205,8 @@ export const connections = function(superClass) {
if (!sourceNode?.shadowRoot || !targetNode?.shadowRoot) return '';
const sourcePort = sourceNode.shadowRoot.querySelector(`.output-ports [data-port-id="${conn.sourcePortId}"]`);
const targetPort = targetNode.shadowRoot.querySelector(`.input-ports [data-port-id="${conn.targetPortId}"]`);
const sourcePort = sourceNode.shadowRoot.querySelector(`.output-ports [portid="${conn.sourcePortId}"]`);
const targetPort = targetNode.shadowRoot.querySelector(`.input-ports [portid="${conn.targetPortId}"]`);
if (!sourcePort || !targetPort) return '';
@@ -312,18 +327,31 @@ export const connections = function(superClass) {
}
_handlePortClick(e) {
const { nodeId, portType, portId, portName } = e.detail;
const { node, port } = e.detail;
const nodeId = node.id;
const { portType, portId, portName } = port;
if (!this.draggingConnection) {
if (portType === 'output') {
this.draggingConnection = {
sourceNodeId: nodeId,
sourcePortId: portId,
sourcePortType: portType
sourcePortType: portType,
sourceNode: node
};
}
} else {
if (portType === 'input' && nodeId !== this.draggingConnection.sourceNodeId) {
const targetNode = node;
const sourceNode = this.draggingConnection.sourceNode;
// Validate the connection
const isValid = targetNode.validateConnection(sourceNode, this.draggingConnection.sourcePortId, portId);
if (!isValid) {
return;
}
const connectionExists = this.connections.some(conn =>
conn.sourceNodeId === this.draggingConnection.sourceNodeId &&
conn.sourcePortId === this.draggingConnection.sourcePortId &&