@@ -10042,4 +10042,226 @@ describe('Swimlane - Enable Line Routing', () => {
1004210042 done();
1004310043 });
1004410044 });
10045+
10046+ describe('Swim lane zindex update issue and line routing issue ', () => {
10047+ let diagram: Diagram;
10048+ let mouseEvents: MouseEvents = new MouseEvents();
10049+ var node = {};
10050+ var pathData = 'M 120 24.9999 C 120 38.8072 109.642 50 96.8653 50 L 23.135' +
10051+ ' 50 C 10.3578 50 0 38.8072 0 24.9999 L 0 24.9999 C' +
10052+ '0 11.1928 10.3578 0 23.135 0 L 96.8653 0 C 109.642 0 120 11.1928 120 24.9999 Z';
10053+ var darkColor = '#C7D4DF';
10054+ var lightColor = '#f5f5f5';
10055+ let ele: HTMLElement;
10056+ var nodes = [
10057+ {
10058+ id: 'swimlane',
10059+ shape: {
10060+ type: 'SwimLane',
10061+ orientation: 'Horizontal',
10062+ header: {
10063+ annotation: { content: 'ONLINE PURCHASE STATUS' },
10064+ height: 50, style: { fill: darkColor, fontSize: 11 },
10065+ },
10066+ lanes: [
10067+ {
10068+ id: 'stackCanvas1',
10069+ header: {
10070+ annotation: { content: 'CUSTOMER' }, width: 50,
10071+ style: { fontSize: 11 }
10072+ },
10073+ height: 100,
10074+ children: [
10075+ {
10076+ id: 'Order',
10077+ shape: { type: 'Path', data: pathData },
10078+ annotations: [
10079+ {
10080+ content: 'ORDER',
10081+ style: { fontSize: 11 }
10082+ }
10083+ ],
10084+ margin: { left: 60, top: 20 },
10085+ height: 40, width: 100
10086+ }
10087+ ],
10088+ },
10089+ {
10090+ id: 'stackCanvas2',
10091+ header: {
10092+ annotation: { content: 'ONLINE' }, width: 50,
10093+ style: { fontSize: 11 }
10094+ },
10095+ height: 100,
10096+ children: [
10097+ {
10098+ id: 'selectItemaddcart',
10099+ annotations: [{ content: 'Select item\nAdd cart' }],
10100+ margin: { left: 190, top: 20 },
10101+ height: 40, width: 100
10102+ },
10103+ {
10104+ id: 'paymentondebitcreditcard',
10105+ annotations: [{ content: 'Payment on\nDebit/Credit Card' }],
10106+ margin: { left: 350, top: 20 },
10107+ height: 40, width: 100
10108+ }
10109+ ],
10110+ },
10111+ {
10112+ id: 'stackCanvas3',
10113+ header: {
10114+ annotation: { content: 'SHOP' }, width: 50,
10115+ style: { fontSize: 11 }
10116+ },
10117+ height: 100,
10118+ children: [
10119+ {
10120+ id: 'getmaildetailaboutorder',
10121+ annotations: [{ content: 'Get mail detail\nabout order' }],
10122+ margin: { left: 190, top: 20 },
10123+ height: 40, width: 100
10124+ },
10125+ {
10126+ id: 'pakingitem',
10127+ annotations: [{ content: 'Paking item' }],
10128+ margin: { left: 350, top: 20 },
10129+ height: 40, width: 100
10130+ }
10131+ ],
10132+ },
10133+ {
10134+ id: 'stackCanvas4',
10135+ header: {
10136+ annotation: { content: 'DELIVERY' }, width: 50,
10137+ style: { fontSize: 11 }
10138+ },
10139+ height: 100,
10140+ children: [
10141+ {
10142+ id: 'sendcourieraboutaddress',
10143+ annotations: [{ content: 'Send Courier\n about Address' }],
10144+ margin: { left: 190, top: 20 },
10145+ height: 40, width: 100
10146+ },
10147+ {
10148+ id: 'deliveryonthataddress',
10149+ annotations: [{ content: 'Delivery on that\n Address' }],
10150+ margin: { left: 350, top: 20 },
10151+ height: 40, width: 100
10152+ },
10153+ {
10154+ id: 'getitItem',
10155+ shape: { type: 'Path', data: pathData },
10156+ annotations: [{ content: 'GET IT ITEM', style: { fontSize: 11 } }],
10157+ margin: { left: 500, top: 20 },
10158+ height: 40, width: 100
10159+ }
10160+ ],
10161+ },
10162+ ],
10163+ phases: [
10164+ {
10165+ id: 'phase1', offset: 170,
10166+ style: { strokeWidth: 1, strokeDashArray: '3,3', strokeColor: '#606060' },
10167+ header: { annotation: { content: 'Phase' } }
10168+ },
10169+ {
10170+ id: 'phase2', offset: 450,
10171+ style: { strokeWidth: 1, strokeDashArray: '3,3', strokeColor: '#606060' },
10172+ header: { annotation: { content: 'Phase' } }
10173+ },
10174+ ],
10175+ phaseSize: 20,
10176+ },
10177+ offsetX: 720, offsetY: 270,
10178+ height: 100,
10179+ width: 650,
10180+
10181+ },
10182+ ];
10183+ beforeAll((): void => {
10184+ ele = createElement('div', { id: 'diagramSwimlane1' });
10185+ document.body.appendChild(ele);
10186+ var pathData = 'M 120 24.9999 C 120 38.8072 109.642 50 96.8653 50 L 23.135' +
10187+ ' 50 C 10.3578 50 0 38.8072 0 24.9999 L 0 24.9999 C' +
10188+ '0 11.1928 10.3578 0 23.135 0 L 96.8653 0 C 109.642 0 120 11.1928 120 24.9999 Z';
10189+ var darkColor = '#C7D4DF';
10190+ var lightColor = '#f5f5f5';
10191+
10192+
10193+ var node = [
10194+ {
10195+ id: 'node1', width: 100, height: 100, offsetX: 100, offsetY: 600,
10196+ },
10197+ {
10198+ id: 'node2', width: 100, height: 100, offsetX: 400, offsetY: 600,
10199+ },
10200+ ]
10201+ diagram = new Diagram({
10202+ width: '100%', height: 900,
10203+ drop:drop,
10204+ constraints: DiagramConstraints.Default | DiagramConstraints.LineRouting,
10205+ nodes: node,
10206+ connectors: [
10207+ {
10208+ id:'conn1',
10209+ sourceID:"node1",targetID:"node2"
10210+ }
10211+ ]
10212+
10213+ });
10214+ diagram.appendTo('#diagramSwimlane1');
10215+ function drop() {
10216+ if (diagram.connectors.length > 0 && diagram.selectedItems.connectors.length > 0) {
10217+ var selectedConnectors = diagram.selectedItems.connectors
10218+ setTimeout(
10219+ () => {
10220+ diagram.clearSelection()
10221+ for (var i = 0; i < diagram.nodes.length; i++) {
10222+ if (diagram.nodes[i].shape.type === "SwimLane") {
10223+ diagram.select([diagram.nodes[i]]);
10224+ diagram.sendToBack();
10225+ }
10226+ }
10227+
10228+ },
10229+ 0);
10230+
10231+ }
10232+
10233+ }
10234+ });
10235+ afterAll((): void => {
10236+ diagram.destroy();
10237+ ele.remove();
10238+ });
10239+
10240+ it('Swim lane zindex update issue and line routing issue', (done: Function) => {
10241+ debugger
10242+ diagram.add(nodes[0] as any)
10243+ diagram.select([diagram.nodes[0],diagram.nodes[1],diagram.connectors[0]]);
10244+ var mouseEvents = new MouseEvents();
10245+ var diagramCanvas = document.getElementById('diagramSwimlane1'+ 'content');
10246+ let node = diagram.nameTable["node1"];
10247+ let targetNode = diagram.nameTable["swimlane"];
10248+ let sourcePointX = node.wrapper.offsetX + diagram.element.offsetLeft;
10249+ let sourcePointY = node.wrapper.offsetY + diagram.element.offsetTop;
10250+ let targetPointX = targetNode.wrapper.offsetX + diagram.element.offsetLeft;
10251+ let targetPointY = targetNode.wrapper.offsetY + diagram.element.offsetTop;
10252+ mouseEvents.mouseDownEvent(diagramCanvas, sourcePointX, sourcePointY);
10253+ mouseEvents.mouseMoveEvent(diagramCanvas, sourcePointX, sourcePointY + 20);
10254+ mouseEvents.mouseMoveEvent(diagramCanvas, sourcePointX, sourcePointY + 40);
10255+ mouseEvents.mouseMoveEvent(diagramCanvas, targetPointX, targetPointY - 20);
10256+ mouseEvents.mouseMoveEvent(diagramCanvas, targetPointX, targetPointY);
10257+ mouseEvents.mouseUpEvent(diagramCanvas, targetPointX, targetPointY);
10258+ setTimeout(
10259+ () => {
10260+ console.log("Swim lane zindex update issue and line routing issue")
10261+ expect(diagram.nameTable["swimlane"].wrapper.actualSize.width===705&&diagram.nameTable["swimlane"].wrapper.actualSize.height ===510&&diagram.nameTable["swimlane"].zIndex ===0).toBe(true);
10262+ done();
10263+ },
10264+ 1000);
10265+ });
10266+ });
1004510267});
0 commit comments