@ichigo_san/graphing
Version:
A lightweight UML-style diagram editor built with React Flow and Tailwind CSS
464 lines (456 loc) • 10.3 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.S_PATTERNS = exports.L_PATTERNS = void 0;
exports.getAllPatterns = getAllPatterns;
exports.getLPatterns = getLPatterns;
exports.getSPatterns = getSPatterns;
exports.isLPattern = isLPattern;
exports.isSPattern = isSPattern;
var _edgeTypes = require("./edgeTypes.js");
/**
* @typedef {Object} RoutePattern
* @property {string} name - Pattern name (e.g., 'L', 'S')
* @property {Array<{x: number, y: number}>} segments - Array of relative segment points
* @property {Array<string>} sides - Array of sides for each segment
*/
/**
* L-shape routing patterns for orthogonal edges
* Maps source side to target side to available patterns
*/
const L_PATTERNS = exports.L_PATTERNS = {
[_edgeTypes.SIDES.NORTH]: {
[_edgeTypes.SIDES.SOUTH]: [{
name: 'L-NS',
segments: [{
x: 0,
y: 0.5
},
// Midpoint of source side
{
x: 0.5,
y: 0.5
},
// Center point
{
x: 0.5,
y: 1
} // Midpoint of target side
],
sides: [_edgeTypes.SIDES.NORTH, _edgeTypes.SIDES.EAST, _edgeTypes.SIDES.SOUTH]
}],
[_edgeTypes.SIDES.EAST]: [{
name: 'L-NE',
segments: [{
x: 0,
y: 0.5
},
// Midpoint of source side
{
x: 0.5,
y: 0.5
},
// Center point
{
x: 1,
y: 0.5
} // Midpoint of target side
],
sides: [_edgeTypes.SIDES.NORTH, _edgeTypes.SIDES.EAST, _edgeTypes.SIDES.EAST]
}],
[_edgeTypes.SIDES.WEST]: [{
name: 'L-NW',
segments: [{
x: 0,
y: 0.5
},
// Midpoint of source side
{
x: 0.5,
y: 0.5
},
// Center point
{
x: 0,
y: 0.5
} // Midpoint of target side
],
sides: [_edgeTypes.SIDES.NORTH, _edgeTypes.SIDES.WEST, _edgeTypes.SIDES.WEST]
}]
},
[_edgeTypes.SIDES.SOUTH]: {
[_edgeTypes.SIDES.NORTH]: [{
name: 'L-SN',
segments: [{
x: 0,
y: 0.5
},
// Midpoint of source side
{
x: 0.5,
y: 0.5
},
// Center point
{
x: 0.5,
y: 0
} // Midpoint of target side
],
sides: [_edgeTypes.SIDES.SOUTH, _edgeTypes.SIDES.EAST, _edgeTypes.SIDES.NORTH]
}],
[_edgeTypes.SIDES.EAST]: [{
name: 'L-SE',
segments: [{
x: 0,
y: 0.5
},
// Midpoint of source side
{
x: 0.5,
y: 0.5
},
// Center point
{
x: 1,
y: 0.5
} // Midpoint of target side
],
sides: [_edgeTypes.SIDES.SOUTH, _edgeTypes.SIDES.EAST, _edgeTypes.SIDES.EAST]
}],
[_edgeTypes.SIDES.WEST]: [{
name: 'L-SW',
segments: [{
x: 0,
y: 0.5
},
// Midpoint of source side
{
x: 0.5,
y: 0.5
},
// Center point
{
x: 0,
y: 0.5
} // Midpoint of target side
],
sides: [_edgeTypes.SIDES.SOUTH, _edgeTypes.SIDES.WEST, _edgeTypes.SIDES.WEST]
}]
},
[_edgeTypes.SIDES.EAST]: {
[_edgeTypes.SIDES.WEST]: [{
name: 'L-EW',
segments: [{
x: 0.5,
y: 0
},
// Midpoint of source side
{
x: 0.5,
y: 0.5
},
// Center point
{
x: 0.5,
y: 1
} // Midpoint of target side
],
sides: [_edgeTypes.SIDES.EAST, _edgeTypes.SIDES.SOUTH, _edgeTypes.SIDES.WEST]
}],
[_edgeTypes.SIDES.NORTH]: [{
name: 'L-EN',
segments: [{
x: 0.5,
y: 0
},
// Midpoint of source side
{
x: 0.5,
y: 0.5
},
// Center point
{
x: 0,
y: 0.5
} // Midpoint of target side
],
sides: [_edgeTypes.SIDES.EAST, _edgeTypes.SIDES.NORTH, _edgeTypes.SIDES.NORTH]
}],
[_edgeTypes.SIDES.SOUTH]: [{
name: 'L-ES',
segments: [{
x: 0.5,
y: 0
},
// Midpoint of source side
{
x: 0.5,
y: 0.5
},
// Center point
{
x: 0,
y: 0.5
} // Midpoint of target side
],
sides: [_edgeTypes.SIDES.EAST, _edgeTypes.SIDES.SOUTH, _edgeTypes.SIDES.SOUTH]
}]
},
[_edgeTypes.SIDES.WEST]: {
[_edgeTypes.SIDES.EAST]: [{
name: 'L-WE',
segments: [{
x: 0.5,
y: 0
},
// Midpoint of source side
{
x: 0.5,
y: 0.5
},
// Center point
{
x: 0.5,
y: 1
} // Midpoint of target side
],
sides: [_edgeTypes.SIDES.WEST, _edgeTypes.SIDES.SOUTH, _edgeTypes.SIDES.EAST]
}],
[_edgeTypes.SIDES.NORTH]: [{
name: 'L-WN',
segments: [{
x: 0.5,
y: 0
},
// Midpoint of source side
{
x: 0.5,
y: 0.5
},
// Center point
{
x: 0,
y: 0.5
} // Midpoint of target side
],
sides: [_edgeTypes.SIDES.WEST, _edgeTypes.SIDES.NORTH, _edgeTypes.SIDES.NORTH]
}],
[_edgeTypes.SIDES.SOUTH]: [{
name: 'L-WS',
segments: [{
x: 0.5,
y: 0
},
// Midpoint of source side
{
x: 0.5,
y: 0.5
},
// Center point
{
x: 0,
y: 0.5
} // Midpoint of target side
],
sides: [_edgeTypes.SIDES.WEST, _edgeTypes.SIDES.SOUTH, _edgeTypes.SIDES.SOUTH]
}]
}
};
/**
* S-shape routing patterns for orthogonal edges
* Used when L-shape patterns are not suitable
*/
const S_PATTERNS = exports.S_PATTERNS = {
[_edgeTypes.SIDES.NORTH]: {
[_edgeTypes.SIDES.NORTH]: [{
name: 'S-NN',
segments: [{
x: 0,
y: 0.5
},
// Midpoint of source side
{
x: 0,
y: 0.3
},
// Above source
{
x: 0.5,
y: 0.3
},
// Center above
{
x: 0.5,
y: 0.7
},
// Center below
{
x: 0,
y: 0.7
},
// Below source
{
x: 0,
y: 0.5
} // Midpoint of target side
],
sides: [_edgeTypes.SIDES.NORTH, _edgeTypes.SIDES.NORTH, _edgeTypes.SIDES.EAST, _edgeTypes.SIDES.SOUTH, _edgeTypes.SIDES.NORTH, _edgeTypes.SIDES.NORTH]
}]
},
[_edgeTypes.SIDES.SOUTH]: {
[_edgeTypes.SIDES.SOUTH]: [{
name: 'S-SS',
segments: [{
x: 0,
y: 0.5
},
// Midpoint of source side
{
x: 0,
y: 0.7
},
// Below source
{
x: 0.5,
y: 0.7
},
// Center below
{
x: 0.5,
y: 0.3
},
// Center above
{
x: 0,
y: 0.3
},
// Above source
{
x: 0,
y: 0.5
} // Midpoint of target side
],
sides: [_edgeTypes.SIDES.SOUTH, _edgeTypes.SIDES.SOUTH, _edgeTypes.SIDES.EAST, _edgeTypes.SIDES.NORTH, _edgeTypes.SIDES.SOUTH, _edgeTypes.SIDES.SOUTH]
}]
},
[_edgeTypes.SIDES.EAST]: {
[_edgeTypes.SIDES.EAST]: [{
name: 'S-EE',
segments: [{
x: 0.5,
y: 0
},
// Midpoint of source side
{
x: 0.7,
y: 0
},
// Right of source
{
x: 0.7,
y: 0.5
},
// Center right
{
x: 0.3,
y: 0.5
},
// Center left
{
x: 0.3,
y: 0
},
// Left of source
{
x: 0.5,
y: 0
} // Midpoint of target side
],
sides: [_edgeTypes.SIDES.EAST, _edgeTypes.SIDES.EAST, _edgeTypes.SIDES.SOUTH, _edgeTypes.SIDES.NORTH, _edgeTypes.SIDES.EAST, _edgeTypes.SIDES.EAST]
}]
},
[_edgeTypes.SIDES.WEST]: {
[_edgeTypes.SIDES.WEST]: [{
name: 'S-WW',
segments: [{
x: 0.5,
y: 0
},
// Midpoint of source side
{
x: 0.3,
y: 0
},
// Left of source
{
x: 0.3,
y: 0.5
},
// Center left
{
x: 0.7,
y: 0.5
},
// Center right
{
x: 0.7,
y: 0
},
// Right of source
{
x: 0.5,
y: 0
} // Midpoint of target side
],
sides: [_edgeTypes.SIDES.WEST, _edgeTypes.SIDES.WEST, _edgeTypes.SIDES.SOUTH, _edgeTypes.SIDES.NORTH, _edgeTypes.SIDES.WEST, _edgeTypes.SIDES.WEST]
}]
}
};
/**
* Get available L-shape patterns for a source-target side combination
* @param {string} sourceSide - Source side
* @param {string} targetSide - Target side
* @returns {Array<RoutePattern>} Available patterns
*/
function getLPatterns(sourceSide, targetSide) {
var _L_PATTERNS$sourceSid;
return ((_L_PATTERNS$sourceSid = L_PATTERNS[sourceSide]) === null || _L_PATTERNS$sourceSid === void 0 ? void 0 : _L_PATTERNS$sourceSid[targetSide]) || [];
}
/**
* Get available S-shape patterns for a source-target side combination
* @param {string} sourceSide - Source side
* @param {string} targetSide - Target side
* @returns {Array<RoutePattern>} Available patterns
*/
function getSPatterns(sourceSide, targetSide) {
var _S_PATTERNS$sourceSid;
return ((_S_PATTERNS$sourceSid = S_PATTERNS[sourceSide]) === null || _S_PATTERNS$sourceSid === void 0 ? void 0 : _S_PATTERNS$sourceSid[targetSide]) || [];
}
/**
* Get all available patterns for a source-target side combination
* @param {string} sourceSide - Source side
* @param {string} targetSide - Target side
* @returns {Array<RoutePattern>} All available patterns
*/
function getAllPatterns(sourceSide, targetSide) {
const lPatterns = getLPatterns(sourceSide, targetSide);
const sPatterns = getSPatterns(sourceSide, targetSide);
return [...lPatterns, ...sPatterns];
}
/**
* Check if a pattern is an L-shape pattern
* @param {RoutePattern} pattern - Pattern to check
* @returns {boolean} True if L-shape pattern
*/
function isLPattern(pattern) {
return pattern.name.startsWith('L-');
}
/**
* Check if a pattern is an S-shape pattern
* @param {RoutePattern} pattern - Pattern to check
* @returns {boolean} True if S-shape pattern
*/
function isSPattern(pattern) {
return pattern.name.startsWith('S-');
}