Sticky lines (VC)

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

View File

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

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -6,7 +6,8 @@ import {
notEmptyStringOr,
itemMetaDecoder,
t,
ellipsize
ellipsize,
debounce
} from "./lib";
import Item, {
ItemType,
@ -281,7 +282,7 @@ export default class VisualConsole {
});
// 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);
};
@ -427,128 +428,118 @@ export default class VisualConsole {
let itemAtStart = 0;
let itemAtEnd = 0;
for (let i in this.elementsById) {
if (
this.coordinatesInItem(
l.props.startPosition.x,
l.props.startPosition.y,
this.elementsById[i].props
)
) {
// Start position at element i.
itemAtStart = parseInt(i);
try {
for (let i in this.elementsById) {
if (
this.coordinatesInItem(
l.props.startPosition.x,
l.props.startPosition.y,
this.elementsById[i].props
)
) {
// 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 (
this.coordinatesInItem(
l.props.endPosition.x,
l.props.endPosition.y,
this.elementsById[i].props
)
) {
// Start position at element i.
itemAtEnd = parseInt(i);
if (this.lineLinks == null) {
this.lineLinks = {};
}
}
if (this.lineLinks == null) {
this.lineLinks = {};
}
if (this.lines == null) {
this.lines = {};
}
if (this.lines == null) {
this.lines = {};
}
if (itemAtStart == line) {
itemAtStart = 0;
}
console.log(`${line},${itemAtStart},${itemAtEnd}`);
if (itemAtEnd == line) {
itemAtEnd = 0;
}
if (itemAtStart == line) {
itemAtStart = 0;
}
// Initialize line if not registered.
if (this.lines[line] == null) {
this.lines[line] = {
start: itemAtStart,
end: itemAtEnd
};
}
if (itemAtEnd == line) {
itemAtEnd = 0;
}
// Register 'start' side of the line.
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] = {
start: itemAtStart,
end: itemAtEnd
};
}
console.log("inicio");
// Register 'start' side of the line.
if (itemAtStart > 0) {
// Initialize.
if (this.lineLinks[itemAtStart] == null) {
this.lineLinks[itemAtStart] = {};
}
// Cleanup.
for (let i in this.lineLinks) {
if (this.lineLinks[i][line]) {
if (
this.lineLinks[i][line].start == 0 &&
this.lineLinks[i][line].end == 0
) {
// Object not connected to a line.
delete this.lineLinks[i][line];
// 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) {
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];
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 oldPosition Old location for item.
*/
protected updateLinesConnected(
item: ItemProps,
to: Position,
from: Position
) {
let xDiff = from.x - to.x;
let yDiff = from.y - to.y;
protected updateLinesConnected(item: ItemProps, to: Position) {
if (this.lineLinks[item.id] == null) {
return;
}
console.log(`diff: ${xDiff}, ${yDiff}`);
Object.keys(this.lineLinks[item.id]).forEach(i => {
let lineId = parseInt(i);
let line = this.elementsById[lineId] as Line;
if (line.props) {
console.log(
`antes: (${line.props.startPosition.x},${
line.props.startPosition.y
}) (${line.props.endPosition.x},${line.props.endPosition.y})`
);
let startX = line.props.startPosition.x;
let startY = line.props.startPosition.y;
let endX = line.props.endPosition.x;
let endY = line.props.endPosition.y;
if (line.props.id == this.lineLinks[item.id][lineId]["start"]) {
line.props = {
...line.props,
x: line.props.startPosition.x + xDiff,
y: line.props.startPosition.y + yDiff
};
if (item.id == this.lineLinks[item.id][lineId]["start"]) {
startX = to.x + item.width / 2;
startY = to.y + item.height / 2;
}
if (line.props.id == this.lineLinks[item.id][lineId]["end"]) {
line.props = {
...line.props,
x: line.props.endPosition.x + xDiff,
y: line.props.endPosition.y + yDiff
};
if (item.id == this.lineLinks[item.id][lineId]["end"]) {
endX = to.x + item.width / 2;
endY = to.y + item.height / 2;
}
console.log("eem");
console.log(
`despues: (${line.props.startPosition.x},${
line.props.startPosition.y
}) (${line.props.endPosition.x},${line.props.endPosition.y})`
);
// Update line movement.
this.updateElement({
...line.props,
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,
//);
});
}

View File

@ -109,7 +109,7 @@ export default class Line extends Item<LineProps> {
protected isMoving: boolean = false;
// 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.
protected readonly lineMovedEventDisposables: Disposable[] = [];

View File

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