How to use @projectstorm/geometry - 10 common examples

calculatePositions(points: PointModel[], event: MouseEvent, index: number, coordinate: string) {
		// If path is first or last add another point to keep node port on its position
		if (index === 0) {
			let point = new PointModel({
				link: this.props.link,
				position: new Point(points[index].getX(), points[index].getY())
			});
			this.props.link.addPoint(point, index);
			this.dragging_index++;
			return;
		} else if (index === points.length - 2) {
			let point = new PointModel({
				link: this.props.link,
				position: new Point(points[index + 1].getX(), points[index + 1].getY())
			});
			this.props.link.addPoint(point, index + 1);
			return;
		}

		// Merge two points if it is not close to node port and close to each other
		if (index - 2 > 0) {
			let _points = {

if (this.props.link.getLastPathXdirection()) {
						points[i - 1].setPosition(points[i - 1].getX(), points[i].getY());
					} else {
						points[i - 1].setPosition(points[i].getX(), points[i - 1].getY());
					}
				}
			}
		}

		// If there is existing link which has two points add one
		// NOTE: It doesn't matter if check is for dy or dx
		if (points.length === 2 && dy !== 0 && !this.state.canDrag) {
			this.props.link.addPoint(
				new PointModel({
					link: this.props.link,
					position: new Point(pointLeft.getX(), pointRight.getY())
				})
			);
		}

		for (let j = 0; j < points.length - 1; j++) {
			paths.push(
				this.generateLink(
					LinkWidget.generateLinePath(points[j], points[j + 1]),
					{
						'data-linkid': this.props.link.getID(),
						'data-point': j,
						onMouseDown: (event: MouseEvent) => {
							if (event.button === 0) {
								this.setState({ canDrag: true });
								this.dragging_index = j;
								// Register mouse move event to track mouse position

calculatePositions(points: PointModel[], event: MouseEvent, index: number, coordinate: string) {
		// If path is first or last add another point to keep node port on its position
		if (index === 0) {
			let point = new PointModel({
				link: this.props.link,
				position: new Point(points[index].getX(), points[index].getY())
			});
			this.props.link.addPoint(point, index);
			this.dragging_index++;
			return;
		} else if (index === points.length - 2) {
			let point = new PointModel({
				link: this.props.link,
				position: new Point(points[index + 1].getX(), points[index + 1].getY())
			});
			this.props.link.addPoint(point, index + 1);
			return;
		}

		// Merge two points if it is not close to node port and close to each other
		if (index - 2 > 0) {
			let _points = {
				[index - 2]: points[index - 2].getPosition(),
				[index + 1]: points[index + 1].getPosition(),
				[index - 1]: points[index - 1].getPosition()
			};
			if (Math.abs(_points[index - 1][coordinate] - _points[index + 1][coordinate]) < 5) {
				_points[index - 2][coordinate] = this.props.diagramEngine.getRelativeMousePoint(event)[coordinate];
				_points[index + 1][coordinate] = this.props.diagramEngine.getRelativeMousePoint(event)[coordinate];
				points[index - 2].setPosition(_points[index - 2]);

g.edges().forEach(e => {
				const edge = g.edge(e);
				const link = model.getLink(e.name);

				const points = [link.getFirstPoint()];
				for (let i = 1; i < edge.points.length - 2; i++) {
					points.push(new PointModel({ link: link, position: new Point(edge.points[i].x, edge.points[i].y) }));
				}
				link.setPoints(points.concat(link.getLastPoint()));
			});
		}

getRelativePoint(x, y): Point {
		const canvasRect = this.canvas.getBoundingClientRect();
		return new Point(x - canvasRect.left, y - canvasRect.top);
	}

updateCoords(cords: { x: number; y: number; width: number; height: number }) {
		const { x, y, width, height } = cords;
		this.width = width;
		this.height = height;
		this.setPosition(x, y);
		const center = new Point(x + width / 2, y + height / 2);
		_.forEach(this.getLinks(), link => {
			link.getPointForPort(this).setPosition(center.clone());
		});
		this.reportedPosition = true;
		this.fireEvent(
			{
				entity: this
			},
			'reportInitialPosition'
		);
	}

getRelativeMousePoint(event: { clientX: number; clientY: number }): Point {
		const point = this.getRelativePoint(event.clientX, event.clientY);
		return new Point(
			(point.x - this.model.getOffsetX()) / (this.model.getZoomLevel() / 100.0),
			(point.y - this.model.getOffsetY()) / (this.model.getZoomLevel() / 100.0)
		);
	}

this.points = _.map(event.data.points || [], point => {
			var p = new PointModel({
				link: this,
				position: new Point(point.x, point.y)
			});
			p.deserialize({
				...event,
				data: point
			});
			return p;
		});

generatePoint(x: number = 0, y: number = 0): PointModel {
		return new PointModel({
			link: this,
			position: new Point(x, y)
		});
	}
}

getPortCoords(port: PortModel, element?: HTMLDivElement): Rectangle {
		if (!this.canvas) {
			throw new Error('Canvas needs to be set first');
		}
		if (!element) {
			element = this.getNodePortElement(port);
		}
		const sourceRect = element.getBoundingClientRect();
		const point = this.getRelativeMousePoint({
			clientX: sourceRect.left,
			clientY: sourceRect.top
		});
		const zoom = this.model.getZoomLevel() / 100.0;
		return new Rectangle(point.x, point.y, sourceRect.width / zoom, sourceRect.height / zoom);
	}