Closed NemanjaRCT closed 7 months ago
Sometimes I see this "glitch" while moving diagram around or zooming it. What could be potential reason of this and how to fix it?
This is my code:
this.chart = new OrgChart() .nodeId((dataItem: any) => dataItem.customId) .parentNodeId((dataItem: any) => dataItem.customParentId) .nodeWidth(() => 220) .nodeHeight(() => 100) .compact(false) .nodeContent((node: any) => { return `<div class="node-container" style="width:${node.width}px;height:${node.height}px"></div>`; }) .linkUpdate(() => { select('#nodeDiagram .links-wrapper').attr('stroke', () => '#000') }) .nodeUpdate((node: HierarchyNode<any>, index: number, nodes: HierarchyNode<unknown>[]) => { const componentRef = this.viewContainerRef.createComponent(DiagramNodeComponent); componentRef.instance.diagramNode = node.data; ... const content = componentRef.location.nativeElement; const nodeHTMLElement = (nodes[index] as unknown as HTMLDivElement); const containerHTMLElement = nodeHTMLElement.querySelector('.diagram-node-container'); containerHTMLElement!.innerHTML = ''; containerHTMLElement!.appendChild(content); select(nodeHTMLElement).select('.diagram-node-container').on('click', _ => { select(nodeHTMLElement).raise() }); }) .data(this.dataTest) .container('#nodeDiagram') .scaleExtent([0.5, 1]) .render() HTML: div class="col-12 border overflow-hidden"> <div #chartContainer style="width:100%; min-width: 500px; height:600px" id="nodeDiagram"></div> </div>
Seems like border was making the problem. When I switched to box-shadow: 0 0 0 1px black, glitch is gone
box-shadow: 0 0 0 1px black
That's a known issue in Safari (happens when node content overflows the defined width and height)
https://github.com/bumbeishvili/org-chart/issues?q=safari
Sometimes I see this "glitch" while moving diagram around or zooming it. What could be potential reason of this and how to fix it?
This is my code: