@maxgraph/core
Version:
maxGraph is a fully client side JavaScript diagramming library that uses SVG and HTML for rendering.
137 lines (133 loc) • 5.99 kB
JavaScript
"use strict";
/*
Copyright 2021-present The maxGraph project Contributors
Copyright (c) 2006-2015, JGraph Ltd
Copyright (c) 2006-2015, Gaudenz Alder
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.EntityRelation = void 0;
const CellState_js_1 = __importDefault(require("../../cell/CellState.js"));
const Point_js_1 = __importDefault(require("../../geometry/Point.js"));
const Constants_js_1 = require("../../../util/Constants.js");
const mathUtils_js_1 = require("../../../util/mathUtils.js");
const config_js_1 = require("../config.js");
/**
* Implements an entity relation style for edges (as used in database schema diagrams).
*
* At the time the function is called, the result array contains a placeholder (`null`) for the first absolute point,
* that is, the point where the edge and source terminal are connected.
*
* The implementation of the style then adds all intermediate waypoints except for the last point,
* that is, the connection point between the edge and the target terminal.
*
* The first and the last point in the result array are then replaced with Point that take into account the terminal's perimeter and next point on the edge.
*
* This EdgeStyle is registered under `entityRelationEdgeStyle` in {@link EdgeStyleRegistry} when using {@link Graph} or calling {@link registerDefaultEdgeStyles}.
*
* **IMPORTANT**: When registering it manually in {@link EdgeStyleRegistry}, the following metadata must be used:
* - handlerKind: 'default' or unset
* - isOrthogonal: true
*
* @param state {@link CellState} that represents the edge to be updated.
* @param source {@link CellState} that represents the source terminal.
* @param target {@link CellState} that represents the target terminal.
* @param _points
* @param result Array of {@link Point} that represent the actual points of the edge.
*/
const EntityRelation = (state, source, target, _points, result) => {
const { view } = state;
const segment = (state.style?.segment ?? config_js_1.EntityRelationConnectorConfig.segment) * view.scale;
const pts = state.absolutePoints;
const p0 = pts[0];
const pe = pts[pts.length - 1];
let isSourceLeft = false;
if (source != null) {
const sourceGeometry = source.cell.getGeometry();
if (sourceGeometry.relative) {
isSourceLeft = sourceGeometry.x <= 0.5;
}
else if (target != null) {
isSourceLeft =
(pe != null ? pe.x : target.x + target.width) < (p0 != null ? p0.x : source.x);
}
}
if (p0 != null) {
source = new CellState_js_1.default();
source.x = p0.x;
source.y = p0.y;
}
else if (source != null) {
const constraint = (0, mathUtils_js_1.getPortConstraints)(source, state, true, Constants_js_1.DIRECTION_MASK.NONE);
if (constraint !== Constants_js_1.DIRECTION_MASK.NONE &&
constraint !== Constants_js_1.DIRECTION_MASK.WEST + Constants_js_1.DIRECTION_MASK.EAST) {
isSourceLeft = constraint === Constants_js_1.DIRECTION_MASK.WEST;
}
}
else {
return;
}
let isTargetLeft = true;
if (target != null) {
const targetGeometry = target.cell.getGeometry();
if (targetGeometry.relative) {
isTargetLeft = targetGeometry.x <= 0.5;
}
else if (source != null) {
isTargetLeft =
(p0 != null ? p0.x : source.x + source.width) < (pe != null ? pe.x : target.x);
}
}
if (pe != null) {
target = new CellState_js_1.default();
target.x = pe.x;
target.y = pe.y;
}
else if (target != null) {
const constraint = (0, mathUtils_js_1.getPortConstraints)(target, state, false, Constants_js_1.DIRECTION_MASK.NONE);
if (constraint !== Constants_js_1.DIRECTION_MASK.NONE &&
constraint != Constants_js_1.DIRECTION_MASK.WEST + Constants_js_1.DIRECTION_MASK.EAST) {
isTargetLeft = constraint === Constants_js_1.DIRECTION_MASK.WEST;
}
}
if (source != null && target != null) {
const x0 = isSourceLeft ? source.x : source.x + source.width;
const y0 = view.getRoutingCenterY(source);
const xe = isTargetLeft ? target.x : target.x + target.width;
const ye = view.getRoutingCenterY(target);
const seg = segment;
let dx = isSourceLeft ? -seg : seg;
const dep = new Point_js_1.default(x0 + dx, y0);
dx = isTargetLeft ? -seg : seg;
const arr = new Point_js_1.default(xe + dx, ye);
// Adds intermediate points if both go out on same side
if (isSourceLeft === isTargetLeft) {
const x = isSourceLeft ? Math.min(x0, xe) - segment : Math.max(x0, xe) + segment;
result.push(new Point_js_1.default(x, y0));
result.push(new Point_js_1.default(x, ye));
}
else if (dep.x < arr.x === isSourceLeft) {
const midY = y0 + (ye - y0) / 2;
result.push(dep);
result.push(new Point_js_1.default(dep.x, midY));
result.push(new Point_js_1.default(arr.x, midY));
result.push(arr);
}
else {
result.push(dep);
result.push(arr);
}
}
};
exports.EntityRelation = EntityRelation;