We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Userhandle tool methods

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

11 Replies

SG Shyam G Syncfusion Team May 31, 2017 04:28 PM UTC

Hi Robert, 
 
We have created a sample in which we have rendered orthogonalLine tool with user handle. 
 
 
Regards, 
Shyam G 



RW Robert Williamson June 1, 2017 02:36 PM UTC

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



SG Shyam G Syncfusion Team June 2, 2017 09:52 AM UTC

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. 
  
 
Regards, 
Shyam G 



RW Robert Williamson July 5, 2017 08:12 AM UTC

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


SG Shyam G Syncfusion Team July 6, 2017 06:18 AM UTC

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. 


Regards, 
Shyam G 



RW Robert Williamson July 18, 2017 01:53 PM UTC

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



SG Shyam G Syncfusion Team July 19, 2017 08:27 AM UTC

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'; 
 
 
Regards, 
Shyam G 
 



RW Robert Williamson July 19, 2017 09:54 AM UTC

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




SG Shyam G Syncfusion Team July 20, 2017 06:14 AM UTC

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. 
 
 
Regards, 
Shyam G 



RW Robert Williamson July 20, 2017 07:41 AM UTC

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



SG Shyam G Syncfusion Team July 27, 2017 12:22 PM UTC

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 


Loader.
Live Chat Icon For mobile
Up arrow icon