UNPKG

@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
// 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 };