@yworks/react-yfiles-company-ownership
Version:
yFiles React Company Ownership Component - A powerful and versatile React component based on the yFiles library, allows you to seamlessly incorporate dynamic and interactive company ownership diagrams into your applications.
142 lines (138 loc) • 5.06 kB
JavaScript
// src/core/WebWorkerSupport.ts
import {
ComponentArrangementPolicy,
EdgeLabelPlacement,
FromSketchLayerAssigner,
HierarchicalLayout,
HierarchicalLayoutEdgeDescriptor,
HierarchicalLayoutRoutingStyle,
LayoutAnchoringPolicy,
LayoutAnchoringStage,
LayoutAnchoringStageData,
LayoutExecutorAsyncWorker,
License,
RoutingStyleDescriptor
} from "@yfiles/yfiles";
// src/core/defaults.ts
import { Arrow, ArrowType, Insets, PolylineEdgeStyle, PortAdjustmentPolicy } from "@yfiles/yfiles";
var componentBackgroundColor = "rgb(238,238,238)";
var maximumZoom = 4;
var minimumZoom = 0;
var defaultLayoutOptions = {
direction: "top-to-bottom",
routingStyle: "orthogonal",
minimumLayerDistance: 100,
minimumFirstSegmentLength: 50,
minimumLastSegmentLength: 50
};
var defaultGraphFitInsets = new Insets(100);
var defaultOwnershipEdgeColor = "#1a3442";
var defaultRelationEdgeColor = "#f21919";
var defaultEdgeWidth = "2px";
var defaultOwnershipEdgeSmoothingLength = 5;
var defaultRelationEdgeSmoothingLength = 100;
var defaultOwnershipEdgeStyle = new PolylineEdgeStyle({
targetArrow: new Arrow({
type: ArrowType.TRIANGLE,
stroke: defaultOwnershipEdgeColor,
fill: defaultOwnershipEdgeColor
}),
sourceArrow: new Arrow(ArrowType.NONE),
stroke: `${defaultEdgeWidth} ${defaultOwnershipEdgeColor}`,
smoothingLength: defaultOwnershipEdgeSmoothingLength,
cssClass: "yfiles-react-ownership-connection"
});
var defaultRelationEdgeStyle = new PolylineEdgeStyle({
targetArrow: new Arrow({
type: ArrowType.TRIANGLE,
stroke: defaultRelationEdgeColor,
fill: defaultRelationEdgeColor
}),
sourceArrow: new Arrow(ArrowType.NONE),
stroke: `${defaultEdgeWidth} dashed ${defaultRelationEdgeColor}`,
smoothingLength: defaultRelationEdgeSmoothingLength,
cssClass: "yfiles-react-relation-connection"
});
var defaultExportMargins = { top: 5, right: 5, left: 5, bottom: 5 };
var neighborhoodHighlightColor = "#30cc00";
var defaultPortAdjustmentPolicy = PortAdjustmentPolicy.ALWAYS;
var hoverHighlightColor = "#FF6F00";
var selectionHighlightColor = "#4cc7ff";
// src/core/WebWorkerSupport.ts
function createLayout(incremental, layoutOptions) {
let layout = new HierarchicalLayout({
defaultEdgeDescriptor: new HierarchicalLayoutEdgeDescriptor({
routingStyleDescriptor: new RoutingStyleDescriptor(HierarchicalLayoutRoutingStyle.POLYLINE)
}),
layoutOrientation: layoutOptions.direction ?? defaultLayoutOptions.direction,
edgeLabelPlacement: EdgeLabelPlacement.INTEGRATED
});
layout.fromSketchMode = incremental;
layout.defaultNodeDescriptor.layerAlignment = 0;
layout.defaultEdgeDescriptor.minimumFirstSegmentLength = layoutOptions.minimumFirstSegmentLength ?? defaultLayoutOptions.minimumFirstSegmentLength;
layout.defaultEdgeDescriptor.minimumLastSegmentLength = layoutOptions.minimumLastSegmentLength ?? defaultLayoutOptions.minimumLastSegmentLength;
layout.defaultEdgeDescriptor.routingStyleDescriptor = new RoutingStyleDescriptor({
routingStyle: layoutOptions.routingStyle ?? defaultLayoutOptions.routingStyle
});
layout.coordinateAssigner.groupCompaction = true;
if (incremental) {
layout.core.fixedElementsLayerAssigner = new FromSketchLayerAssigner({
maximumNodeSize: 10
});
}
layout.stopDuration = layoutOptions.maximumDuration ?? defaultLayoutOptions.maximumDuration ?? Number.POSITIVE_INFINITY;
layout.minimumLayerDistance = layoutOptions.minimumLayerDistance ?? defaultLayoutOptions.minimumLayerDistance ?? 0;
layout.componentArrangementPolicy = ComponentArrangementPolicy.COMPACT;
return new LayoutAnchoringStage({
coreLayout: layout
});
}
function createLayoutData() {
return new LayoutAnchoringStageData({ nodeAnchoringPolicies: LayoutAnchoringPolicy.UPPER_LEFT });
}
function applyLayout(graph, incremental, layoutOptions) {
const layout = createLayout(incremental, layoutOptions);
const layoutData = createLayoutData();
graph.applyLayout(layout, layoutData);
}
function initializeWebWorker(self) {
self.addEventListener(
"message",
(e) => {
if (e.data.license) {
License.value = e.data.license;
self.postMessage("licensed");
return;
}
if (e.data === "check-is-ready") {
self.postMessage("ready");
return;
}
const incremental = e.data.incremental;
const layoutOptions = e.data.layoutOptions;
new LayoutExecutorAsyncWorker((graph) => applyLayout(graph, incremental, layoutOptions)).process(e.data).then((data) => {
self.postMessage(data);
}).catch((errorObj) => {
self.postMessage(errorObj);
});
},
false
);
self.postMessage("ready");
}
export {
componentBackgroundColor,
maximumZoom,
minimumZoom,
defaultLayoutOptions,
defaultGraphFitInsets,
defaultOwnershipEdgeStyle,
defaultRelationEdgeStyle,
defaultExportMargins,
neighborhoodHighlightColor,
defaultPortAdjustmentPolicy,
hoverHighlightColor,
selectionHighlightColor,
createLayout,
initializeWebWorker
};