tyler.durden/pandorafms
1
0
Fork 0
mirror of https://github.com/pandorafms/pandorafms.git synced 2025-07-31 01:35:36 +02:00
Code Issues Packages Projects Releases Wiki Activity

Sticky lines (VC)

Browse Source
This commit is contained in:
fbsanchez 2020-11-12 16:57:14 +01:00
parent b8437bec79
commit 14db9c63c6
6 changed files with 156 additions and 157 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
pandora_console/include/javascript/pandora_visual_console.js
View File

@ -322,17 +322,17 @@ function createVisualConsole(
id, id,
data, data,
function(error, data) { function(error, data) {
// if (!error && !data) return; if (!error && !data) return;
if (error || !data) { // if (error || !data) {
console.log( // console.log(
"[ERROR]", // "[ERROR]",
"[VISUAL-CONSOLE-CLIENT]", // "[VISUAL-CONSOLE-CLIENT]",
"[API]", // "[API]",
error ? error.message : "Invalid response" // error ? error.message : "Invalid response"
); // );
//
// TODO: Move the element to its initial position. // // TODO: Move the element to its initial position.
} // }
try { try {
var decoded_data = JSON.parse(data); var decoded_data = JSON.parse(data);

2
pandora_console/include/visual-console-client/vc.main.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
pandora_console/include/visual-console-client/vc.main.min.js.map
View File

File diff suppressed because one or more lines are too long

283
visual_console_client/src/VisualConsole.ts
View File

@ -6,7 +6,8 @@ import {
notEmptyStringOr, notEmptyStringOr,
itemMetaDecoder, itemMetaDecoder,
t, t,
ellipsize ellipsize,
debounce
} from "./lib"; } from "./lib";
import Item, { import Item, {
ItemType, ItemType,
@ -281,7 +282,7 @@ export default class VisualConsole {
}); });
// Move lines conneted with this item. // Move lines conneted with this item.
this.updateLinesConnected(e.item.props, e.newPosition, e.prevPosition); this.updateLinesConnected(e.item.props, e.newPosition);
// console.log(`Moved element #${e.item.props.id}`, e); // console.log(`Moved element #${e.item.props.id}`, e);
}; };
@ -427,128 +428,118 @@ export default class VisualConsole {
let itemAtStart = 0; let itemAtStart = 0;
let itemAtEnd = 0; let itemAtEnd = 0;
for (let i in this.elementsById) { try {
if ( for (let i in this.elementsById) {
this.coordinatesInItem( if (
l.props.startPosition.x, this.coordinatesInItem(
l.props.startPosition.y, l.props.startPosition.x,
this.elementsById[i].props l.props.startPosition.y,
) this.elementsById[i].props
) { )
// Start position at element i. ) {
itemAtStart = parseInt(i); // Start position at element i.
itemAtStart = parseInt(i);
}
if (
this.coordinatesInItem(
l.props.endPosition.x,
l.props.endPosition.y,
this.elementsById[i].props
)
) {
// Start position at element i.
itemAtEnd = parseInt(i);
}
} }
if ( if (this.lineLinks == null) {
this.coordinatesInItem( this.lineLinks = {};
l.props.endPosition.x,
l.props.endPosition.y,
this.elementsById[i].props
)
) {
// Start position at element i.
itemAtEnd = parseInt(i);
} }
}
if (this.lineLinks == null) { if (this.lines == null) {
this.lineLinks = {}; this.lines = {};
} }
if (this.lines == null) { if (itemAtStart == line) {
this.lines = {}; itemAtStart = 0;
} }
console.log(`${line},${itemAtStart},${itemAtEnd}`); if (itemAtEnd == line) {
itemAtEnd = 0;
}
if (itemAtStart == line) { // Initialize line if not registered.
itemAtStart = 0; if (this.lines[line] == null) {
} this.lines[line] = {
start: itemAtStart,
end: itemAtEnd
};
}
if (itemAtEnd == line) { // Register 'start' side of the line.
itemAtEnd = 0; if (itemAtStart > 0) {
} // Initialize.
if (this.lineLinks[itemAtStart] == null) {
this.lineLinks[itemAtStart] = {};
}
// Assign.
this.lineLinks[itemAtStart][line] = {
start: itemAtStart,
end: itemAtEnd
};
// Register line if not exists prviously.
} else {
// Clean previous line relationship.
if (this.lines[line]["start"] > 0) {
this.lineLinks[this.lines[line]["start"]][line]["start"] = 0;
this.lines[line]["start"] = 0;
}
}
if (itemAtEnd > 0) {
if (this.lineLinks[itemAtEnd] == null) {
this.lineLinks[itemAtEnd] = {};
}
this.lineLinks[itemAtEnd][line] = {
start: itemAtStart,
end: itemAtEnd
};
} else {
// Clean previous line relationship.
if (this.lines[line]["end"] > 0) {
this.lineLinks[this.lines[line]["end"]][line]["end"] = 0;
this.lines[line]["end"] = 0;
}
}
console.log(`Agrego linea [${line}] de ${itemAtStart} a ${itemAtEnd}`);
// Initialize line if not registered.
if (this.lines[line] == null) {
this.lines[line] = { this.lines[line] = {
start: itemAtStart, start: itemAtStart,
end: itemAtEnd end: itemAtEnd
}; };
}
console.log("inicio");
// Register 'start' side of the line. // Cleanup.
if (itemAtStart > 0) { for (let i in this.lineLinks) {
// Initialize. if (this.lineLinks[i][line]) {
if (this.lineLinks[itemAtStart] == null) { if (
this.lineLinks[itemAtStart] = {}; this.lineLinks[i][line].start == 0 &&
} this.lineLinks[i][line].end == 0
) {
// Object not connected to a line.
delete this.lineLinks[i][line];
// Assign. if (Object.keys(this.lineLinks[i]).length === 0) {
this.lineLinks[itemAtStart][line] = { delete this.lineLinks[i];
start: itemAtStart, }
end: itemAtEnd }
};
// Register line if not exists prviously.
} else {
// Clean previous line relationship.
if (this.lines[line]["start"] > 0) {
console.log(`desconecto ${line} de ${this.lines[line]["start"]}`);
this.lineLinks[this.lines[line]["start"]][line]["start"] = 0;
this.lines[line]["start"] = 0;
}
}
console.log("final");
if (itemAtEnd > 0) {
if (this.lineLinks[itemAtEnd] == null) {
this.lineLinks[itemAtEnd] = {};
}
this.lineLinks[itemAtEnd][line] = {
start: itemAtStart,
end: itemAtEnd
};
} else {
console.log(this.lines[line]["end"]);
// Clean previous line relationship.
if (this.lines[line]["end"] > 0) {
console.log(`desconecto ${line} de ${this.lines[line]["end"]}`);
this.lineLinks[this.lines[line]["end"]][line]["end"] = 0;
this.lines[line]["end"] = 0;
}
}
console.log("limpiar");
this.lines[line] = {
start: itemAtStart,
end: itemAtEnd
};
// Cleanup.
for (let i in this.lineLinks) {
if (
this.lineLinks[i][line].start == 0 &&
this.lineLinks[i][line].end == 0
) {
// Object not connected to a line.
delete this.lineLinks[i][line];
if (Object.keys(this.lineLinks[i]).length === 0) {
delete this.lineLinks[i];
} }
} }
} catch (error) {
console.error(error);
} }
console.log("Enlaces:");
console.log(this.lineLinks);
console.log("lines:");
console.log(this.lines);
console.log("-------------------------");
} }
/** /**
@ -558,52 +549,62 @@ export default class VisualConsole {
* @param newPosition New location for item. * @param newPosition New location for item.
* @param oldPosition Old location for item. * @param oldPosition Old location for item.
*/ */
protected updateLinesConnected( protected updateLinesConnected(item: ItemProps, to: Position) {
item: ItemProps, if (this.lineLinks[item.id] == null) {
to: Position, return;
from: Position }
) {
let xDiff = from.x - to.x;
let yDiff = from.y - to.y;
console.log(`diff: ${xDiff}, ${yDiff}`);
Object.keys(this.lineLinks[item.id]).forEach(i => { Object.keys(this.lineLinks[item.id]).forEach(i => {
let lineId = parseInt(i); let lineId = parseInt(i);
let line = this.elementsById[lineId] as Line; let line = this.elementsById[lineId] as Line;
if (line.props) { if (line.props) {
console.log( let startX = line.props.startPosition.x;
`antes: (${line.props.startPosition.x},${ let startY = line.props.startPosition.y;
line.props.startPosition.y let endX = line.props.endPosition.x;
}) (${line.props.endPosition.x},${line.props.endPosition.y})` let endY = line.props.endPosition.y;
);
if (line.props.id == this.lineLinks[item.id][lineId]["start"]) { if (item.id == this.lineLinks[item.id][lineId]["start"]) {
line.props = { startX = to.x + item.width / 2;
...line.props, startY = to.y + item.height / 2;
x: line.props.startPosition.x + xDiff,
y: line.props.startPosition.y + yDiff
};
} }
if (line.props.id == this.lineLinks[item.id][lineId]["end"]) {
line.props = { if (item.id == this.lineLinks[item.id][lineId]["end"]) {
...line.props, endX = to.x + item.width / 2;
x: line.props.endPosition.x + xDiff, endY = to.y + item.height / 2;
y: line.props.endPosition.y + yDiff
};
} }
console.log("eem");
console.log( // Update line movement.
`despues: (${line.props.startPosition.x},${ this.updateElement({
line.props.startPosition.y ...line.props,
}) (${line.props.endPosition.x},${line.props.endPosition.y})` startX: startX,
); startY: startY,
endX: endX,
endY: endY
});
line.render(); let debouncedLinePositionSave = debounce(500, (options: AnyObject) => {
this.lineMovedEventManager.emit({
item: options.line,
startPosition: {
x: options.startX,
y: options.startY
},
endPosition: {
x: options.endX,
y: options.endY
}
});
});
// Save line positon.
debouncedLinePositionSave({
line: line,
startX: startX,
startY: startY,
endX: endX,
endY: endY
});
} }
//this.updateElement(
// ...line.props,
//);
}); });
} }

2
visual_console_client/src/items/Line.ts
View File

@ -109,7 +109,7 @@ export default class Line extends Item<LineProps> {
protected isMoving: boolean = false; protected isMoving: boolean = false;
// Event manager for moved events. // Event manager for moved events.
protected readonly lineMovedEventManager = new TypedEvent<LineMovedEvent>(); public readonly lineMovedEventManager = new TypedEvent<LineMovedEvent>();
// List of references to clean the event listeners. // List of references to clean the event listeners.
protected readonly lineMovedEventDisposables: Disposable[] = []; protected readonly lineMovedEventDisposables: Disposable[] = [];

2
visual_console_client/src/items/NetworkLink.ts
View File

@ -124,8 +124,6 @@ export default class NetworkLink extends Line {
labelStartHeight labelStartHeight
} = this.props; } = this.props;
console.log("a pintar");
const svgs = element.getElementsByTagName("svg"); const svgs = element.getElementsByTagName("svg");
let line; let line;
let svg; let svg;