Mirroring Node

Question

I'm trying to mirror a node as follows:

                    if (flipVal == 'Horizontal') {
                        node.flip = flipVal;
                        thiss.diagramControl.dataBind();
                    }

However, there are two problems.

(1) the ports don't get flipped which makes zero sense. The ports are obviously supposed to flip with the image. What I'm seeing is that if the node gets flipped when a port is already connected it correctly flips the port with the connection. However, wanting to connect a new line the ports show in their old place.

UPDATE

The new port locations seem to be working however it's not displaying. The old "displays" are showing but not the new ones. This might be a bug ?? Note that I'm using Native shapes with custom svg data.

See below for example. The line flipped correctly (right side). However when connecting a new line, the port icon shows where the red circle is. However it refuses to connect there.

(2) the label gets mirrored (as seen above). Why would you mirror the label (annotation) as it's unreadable ? How can I stop this from happening ?

Any idea how I can do a proper horizontal flip including ports and not flip the annotation ?

Sivakumar Sekar · Answer

Hi Franco, 





1) the ports don't get flipped which makes zero sense. The ports are obviously supposed to flip with the image. What I'm seeing is that if the node gets flipped when a port is already connected it correctly flips the port with the connection. However, wanting to connect a new line the ports show in their old place. 



On further analysis, we have checked node with shape type as Native and SVG content and we couldn’t be able to replicate the issue on our end. we have created a sample with a button click to flip horizontal and vertically. Kindly replicate your issue in the attached sample so that we could be able to serve you better. For more information, please refer to the sample link. 

Sample Link: https://stackblitz.com/edit/ijhiva-zqstis?file=index.ts  



2) the label gets mirrored (as seen above). Why would you mirror the label (annotation) as it's unreadable ? How can I stop this from happening ? 


When flipping the nodes with labels the label will also be flipped this is the behavior of the diagram. 


Regards, 
Sivakumar

ceds · Answer

Good day,I changed the code to replicate the issue for you:https://stackblitz.com/edit/ijhiva-mnxoav?file=index.tsWhat you need to do is flip it horizontal (which works), then try to connect the existing line to a new port.  You will see the old ports are still displayed as potential ports to connect to.Regarding the labelling, I understand that it's a feature.  But I don't see it being of any value as I've never seen any use case where you would want to invert text that makes it non-readable.  Inversion of shapes are for the shape itself, not the label describing the shape.

Arunkumar Manoharan · Answer

Hi Franco, 
We can be able to reproduce the reported issue we are validating on your requirements and update you with more details on December 9, 2021.  
 
Regards,  
Arun.

Aravind Ravi · Answer

Hi Franco, 

Please find the response for queries in below table 





Ports are not flipped while flipping Node to Horizontal or Vertically 

    
Reported Issue : Ports are not flipped while flipping Node to Horizontal or Vertically 
      
We can reproduce the issue and confirmed this as a defect. We have logged a defect report for this issue. We will fix this issue and provide the patch on January 4th , 2022 weekly patch release.    
  
https://www.syncfusion.com/feedback/31068/ports-are-not-flipped-while-flipping-node-to-horizontal-or-vertically    
    



Provide support to prevent label flipping while flipping the node horizontally or vertically 


We are still validating your requirements to prevent the annotation flipping and update you with more details on December 14th 2021. 


Regards 
Aravind Ravi

Aravind Ravi · Answer

Hi Franco, 

Reported Issue : Provide support to prevent label flipping while flipping the node horizontally or vertically 
       
We can reproduce the issue and confirmed this as a defect. We have logged a defect report for this issue. We will fix this issue and provide the patch on January 4th , 2022 weekly patch release.     
   
https://www.syncfusion.com/feedback/31069/provide-support-to-prevent-label-flipping-while-flipping-the-node-horizontally-or 

Regards 
Aravind Ravi

Arunkumar Manoharan · Answer

Hi Franco,

we have fixed the reported issue and included it in our patch release (19.4.41) which is rolled out successfully. we have introduced a new API flipMode. By using this flipMode you can restrict flipping the label, port, none, or all, and also we created a sample on how to prevent the label flipping while flipping the node. For more information please refer to the sample link and code snippet.

Code Snippet:

let node: NodeModel[] = [

{

id: 'node2',

width: 100,

height: 100,

offsetX: 300,

offsetY: 100,

annotations: [{ content: 'Label' }],

flipMode: 'Label',

}

]

Sample link: https://stackblitz.com/edit/wocv2q-shqchd?file=index.ts

Please upgrade to the latest version packages to resolve this issue.

https://www.npmjs.com/package/@syncfusion/ej2-diagrams

Regards,

Arun Kumar.

ceds · Answer

Good day,Thank you for the updates.However, it seems like the new code does not work with custom SVG shapes.  Please see modified example here:https://stackblitz.com/edit/ijhiva-xfxfdf?file=index.ts An error is thrown in the library.

Arunkumar Manoharan · Answer

Hi Franco,We are
validating your requirement on custom SVG shapes we will update you with more
details within two business days (01/11/22).Regards, Arun Kumar.

Arunkumar Manoharan · Answer

Hi
Franco,Reported
Issue: Exception occurs when Flipping SVG Nodes Label       We
can reproduce the issue and confirmed this as a defect. We have logged a defect
report for this issue. We will fix this issue and provide the patch on January 28th, 2022 weekly patch release.        https://www.syncfusion.com/feedback/31784/exception-occurs-when-flipping-svg-nodes-labelRegards
Arun
Kumar.

Arunkumar Manoharan · Answer

Hi Franco,Due to some technical issue, we could not able to include your fix
in this weekly patch release. However, we will provide you the custom patch
tomorrow(02/01/2022). The fix will be included in our next weekly patch
release(Feb 9, 2022).RegardsArun Kumar.

Arunkumar Manoharan · Answer

Hi Franco,We have fixed the reported issue and attached the custom package below.
Please replace the below package in node_modules/@syncusion/ej2-diagrams
folder. However, the fix will be included in our next weekly patch release (Feb
9, 2022).RegardsArun Kumar.Attachment: ej2diagrams_49ba4c35.zip

Arunkumar Manoharan · Answer

Hi Franco,

We have fixed the reported issue and attached the custom package below. Please replace the below package in node_modules/@syncusion/ej2-diagrams folder. However, the fix will be included in our next weekly patch release (Feb 9, 2022).

Regards

Arun Kumar.

Attachment: ej2diagrams_49ba4c35.zip