tyler.durden
/
pandorafms
mirror of https://github.com/pandorafms/pandorafms.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Fixed the vc client line item re-rendering

This commit is contained in:
Alejandro Gallardo Escobar 2019-07-02 12:37:58 +02:00
parent 89b12cf717
commit c6057037dd
1 changed files with 118 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,10 @@
import { AnyObject, Position, Size, ItemMeta } from "../lib/types";
import { parseIntOr, notEmptyStringOr } from "../lib";
import {
parseIntOr,
notEmptyStringOr,
debounce,
addMovementListener
} from "../lib";
import Item, { ItemType, ItemProps, itemBasePropsDecoder } from "../Item";
interface LineProps extends ItemProps {
@ -68,6 +73,64 @@ export function linePropsDecoder(data: AnyObject): LineProps | never {
}
export default class Line extends Item<LineProps> {
// To control if the line movement is enabled.
private moveMode: boolean = false;
// // This function will only run the 2nd arg function after the time
// // of the first arg have passed after its last execution.
// private debouncedMovementSave = debounce(
// 500, // ms.
// (x: Position["x"], y: Position["y"]) => {
// const prevPosition = {
// x: this.props.x,
// y: this.props.y
// };
// const newPosition = {
// x: x,
// y: y
// };
// if (!this.positionChanged(prevPosition, newPosition)) return;
// // Save the new position to the props.
// this.move(x, y);
// // Emit the movement event.
// this.movedEventManager.emit({
// item: this,
// prevPosition: prevPosition,
// newPosition: newPosition
// });
// }
// );
// // This property will store the function
// // to clean the movement listener.
// private removeMovement: Function | null = null;
// /**
// * Start the movement funtionality.
// * @param element Element to move inside its container.
// */
// private initMovementListener(element: HTMLElement): void {
// this.removeMovement = addMovementListener(
// element,
// (x: Position["x"], y: Position["y"]) => {
// // Move the DOM element.
// this.moveElement(x, y);
// // Run the save function.
// this.debouncedMovementSave(x, y);
// }
// );
// }
// /**
// * Stop the movement fun
// */
// private stopMovementListener(): void {
// if (this.removeMovement) {
// this.removeMovement();
// this.removeMovement = null;
// }
// }
/**
* @override
*/
@ -84,17 +147,35 @@ export default class Line extends Item<LineProps> {
{
...meta,
editMode: false
}
},
true
);
this.moveMode = meta.editMode;
this.init();
}
/**
* Classic and protected version of the setter of the `props` property.
* Useful to override it from children classes.
* @param newProps
* @override Item.setProps
*/
public setProps(newProps: LineProps) {
super.setProps({
...newProps,
...Line.extractBoxSizeAndPosition(newProps)
});
}
/**
* Classic and protected version of the setter of the `meta` property.
* Useful to override it from children classes.
* @param newProps
* @param newMetadata
* @override Item.setMeta
*/
public setMeta(newMetadata: ItemMeta) {
this.moveMode = newMetadata.editMode;
super.setMeta({
...newMetadata,
editMode: false
@ -145,28 +226,34 @@ export default class Line extends Item<LineProps> {
svg.append(line);
element.append(svg);
console.log(this.moveMode);
if (this.moveMode) {
const startC = document.createElement("div");
startC.style.width = "16px";
startC.style.height = "16px";
startC.style.borderRadius = "50%";
startC.style.backgroundColor = "white";
startC.style.position = "absolute";
startC.style.left = startIsLeft ? "-8px" : `${width + lineWidth - 8}px`;
startC.style.top = startIsTop ? "-8px" : `${height + lineWidth - 8}px`;
const startCircle = document.createElement("div");
startCircle.style.width = "16px";
startCircle.style.height = "16px";
startCircle.style.borderRadius = "50%";
startCircle.style.backgroundColor = "white";
startCircle.style.position = "absolute";
startCircle.style.left = startIsLeft
? "-8px"
: `${width + lineWidth - 8}px`;
startCircle.style.top = startIsTop
? "-8px"
: `${height + lineWidth - 8}px`;
const endC = document.createElement("div");
endC.style.width = "16px";
endC.style.height = "16px";
endC.style.borderRadius = "50%";
endC.style.backgroundColor = "white";
endC.style.position = "absolute";
endC.style.left = startIsLeft ? `${width + lineWidth - 8}px` : "-8px";
endC.style.top = startIsTop ? `${height + lineWidth - 8}px` : "-8px";
const endCircle = document.createElement("div");
endCircle.style.width = "16px";
endCircle.style.height = "16px";
endCircle.style.borderRadius = "50%";
endCircle.style.backgroundColor = "white";
endCircle.style.position = "absolute";
endCircle.style.left = startIsLeft
? `${width + lineWidth - 8}px`
: "-8px";
endCircle.style.top = startIsTop ? `${height + lineWidth - 8}px` : "-8px";
element.append(startC);
element.append(endC);
element.append(startCircle);
element.append(endCircle);
}
return element;
@ -185,4 +272,13 @@ export default class Line extends Item<LineProps> {
y: Math.min(props.startPosition.y, props.endPosition.y)
};
}
/**
* To remove the event listeners and the elements from the DOM.
* @override Item.remove
*/
public remove(): void {
// TODO: clear the item's event listeners.
super.remove();
}
}