Userhandle tool methods

[Robert Williamson]

Hi guys

One of my colleagues has a thread with you around using userhandles. I've used the same fix that you supplied her and this has worked perfectly. I'm wondering how easy it would be to make use of the other tools e.g. OrthogonalLineTool. This would be one we would like to make use of in our angular project but we're unsure wether we can or if we would have to make use of a similar function to what you have in the ej.web.all.min.js. 

Any assitance you have will be great

If you need an example project please let me know and i can get one sent to you

Thanks

Robert

[Shyam G]

Hi Robert, 

 

We have created a sample in which we have rendered orthogonalLine tool with user handle. 

 

Sample:http://www.syncfusion.com/downloads/support/directtrac/general/7z/angular2-seeds-master639055372 

 

Regards, 

Shyam G 

[Robert Williamson]

Hi Shyam 

This is brilliant, 

I was able to get this mostly working on my project but i haven't been able to get the continuous drawing to appear on my diagram. 

What could i have missed from your sample which i would have needed to bring over? 

Thanks

Robert

[Shyam G]

Hi Robert, 

 

Please change singleAction as false to draw connector continuously. Please refer to the code example below. 

 

Code example: 

class LinkTool extends ej.datavisualization.Diagram.OrthogonalLineTool { 

constructor(name: string) { 

         . . .  

        this.singleAction = false; 

         . . . .  

    } 

} 

 

Also we have done some changes in the linkTool mouseup event and provided the modified sample below. 

  

Sample:http://www.syncfusion.com/downloads/support/directtrac/general/7z/angular2-seeds-master-60457409 

 

Regards, 

Shyam G 

[Robert Williamson]

Hi Shyam, Thanks again for all your help here. i've been able to get this to work but i've been looking into adding source and target ports to connectors. i've been able to get this working from loading a premade process but not connector tool. How would you add these in using the example project below? ThanksRobert

[Shyam G]

Hi Robert, 

Could you please confirm us whether you need to establish the connection with the ports. If yes, render the ports for the node initially and when you click on the connector tools, the ports will be visible and then you can establish the connection with the ports. Please refer to the sample below for your reference. 

Sample:http://www.syncfusion.com/downloads/support/directtrac/general/7z/angular2-seeds-master-1819446248 

Regards, 

Shyam G 

[Robert Williamson]

Hi Shyam 

Apologises for not replying to your port reply but i've found another issue when we try to do a production build with the userhandles plugged in. when we go to load the diagram we get an error of ej is not defined at run time. After investigating and determined that this is due to the way we are implementint the user handles for the diagram,

Here is a link to a sample project with the diagram and user handles plugged in. please download the zip named SampleWithDiagramUserHandles

https://1drv.ms/u/s!AAxIdbDPqmRThVk

Thanks

Robert

[Shyam G]

Hi Robert, 

 

In the app.module.ts file, you have imported the app.component file before the EJ_DIAGRAM_COMPONENTS file. So only the reported issue occurs. Please import app.component file next to EJ_DIAGRAM_COMPONENTS file to resolve your issue. Please refer to the code example and modified app.module.ts file below. 

 

Code example: 

 

import { EJ_DIAGRAM_COMPONENTS } from 'ej-angular2'; 

import { AppComponent } from './app.component'; 

 

App.module.ts file:http://www.syncfusion.com/downloads/support/directtrac/general/ze/app.module1533184145 

 

Regards, 

Shyam G 

 

[Robert Williamson]

Hi Shaym, 

i've updated my app.module.ts to have the following

import { EJ_DIAGRAM_COMPONENTS } from 'ej-angular2/src/ej/diagram.component';

import { AppComponent } from './app.component';

when we run ng serve --prod which will do the production build test for us and then try to load we still see the same issue. 

Any ideas

Thanks

Robert

[Shyam G]

Hi Robert, 

 

We have checked in your sample by modifying changes in app.module.ts file and it is working fine at our end. We are unable to reproduce the reported issue at our end. Could you please check in the below sample? 

Still if you face any issues, please provide us a sample or modify the below sample. 

 

Sample:http://www.syncfusion.com/downloads/support/directtrac/general/7z/SampleWithDiagramUserHandles-832172903 

 

Regards, 

Shyam G 

[Robert Williamson]

Hi Shyam

please find an altered version of your sample which will reproduce when running ng serve --prod from the terminal

https://1drv.ms/u/s!AAxIdbDPqmRThVo

Please also note the only modification i made was in the app.module.ts changing the following

     "import { EJ_DIAGRAM_COMPONENTS } from 'ej-angular2/';" was changed to the below

     "import { EJ_DIAGRAM_COMPONENTS } from 'ej-angular2/src/ej/diagram.component';"

Before changing this and running an ng serve -- prod from the terminal i get the following error which is why we need to point to the component directly

ERROR in Type DiagramComponent in C:/Users/robert.williamson/Downloads/SampleWithDiagramUserHandles-832172903/SampleWithDiagramUserHandles/nod

e_modules/ej-angular2/src/ej/diagram.component.d.ts is part of the declarations of 2 modules: EJAngular2Module in C:/Users/robert.williamson/D

ownloads/SampleWithDiagramUserHandles-832172903/SampleWithDiagramUserHandles/node_modules/ej-angular2/src/index.d.ts and AppModule in C:/Users

/robert.williamson/Downloads/SampleWithDiagramUserHandles-832172903/SampleWithDiagramUserHandles/src/app/app.module.ts! Please consider moving

 DiagramComponent in C:/Users/robert.williamson/Downloads/SampleWithDiagramUserHandles-832172903/SampleWithDiagramUserHandles/node_modules/ej-

angular2/src/ej/diagram.component.d.ts to a higher module that imports EJAngular2Module in C:/Users/robert.williamson/Downloads/SampleWithDiag

ramUserHandles-832172903/SampleWithDiagramUserHandles/node_modules/ej-angular2/src/index.d.ts and AppModule in C:/Users/robert.williamson/Down

loads/SampleWithDiagramUserHandles-832172903/SampleWithDiagramUserHandles/src/app/app.module.ts. You can also create a new NgModule that expor

ts and includes DiagramComponent in C:/Users/robert.williamson/Downloads/SampleWithDiagramUserHandles-832172903/SampleWithDiagramUserHandles/n

ode_modules/ej-angular2/src/ej/diagram.component.d.ts then import that NgModule in EJAngular2Module in C:/Users/robert.williamson/Downloads/Sa

mpleWithDiagramUserHandles-832172903/SampleWithDiagramUserHandles/node_modules/ej-angular2/src/index.d.ts and AppModule in C:/Users/robert.wil

liamson/Downloads/SampleWithDiagramUserHandles-832172903/SampleWithDiagramUserHandles/src/app/app.module.ts.

Thanks

Robert

[Shyam G]

Hi Robert, 

 

Please use the below code example in .angular.cli  Json file to resolve your reported issue and it works when you run the application with commands npm start and production build ng serve --prod 

  

Code example:  

  

"scripts": [  

        "./../node_modules/syncfusion-javascript/Scripts/ej/web/ej.web.all.min.js"  

      ],  

  

JSON file: Angular-cli.JSON  

 

Regards, 

Shyam G