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.
Unfortunately, activation email could not send to your email. Please try again.

Userhandle tool methods

Thread ID:

Created:

Updated:

Platform:

Replies:

130700 May 26,2017 11:36 AM Jul 27,2017 08:22 AM Angular 11
loading
Tags: ejDiagram
Robert Williamson
Asked On May 26, 2017 11:36 AM

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 [Syncfusion]
Replied On May 31, 2017 12:28 PM

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


Robert Williamson
Replied On June 1, 2017 10:36 AM

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 [Syncfusion]
Replied On June 2, 2017 05:52 AM

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 


Robert Williamson
Replied On July 5, 2017 04:12 AM

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 [Syncfusion]
Replied On July 6, 2017 02:18 AM

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 


Robert Williamson
Replied On July 18, 2017 09:53 AM

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 [Syncfusion]
Replied On July 19, 2017 04:27 AM

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 
 


Robert Williamson
Replied On July 19, 2017 05:54 AM

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 [Syncfusion]
Replied On July 20, 2017 02:14 AM

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 


Robert Williamson
Replied On July 20, 2017 03:41 AM

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 [Syncfusion]
Replied On July 27, 2017 08:22 AM

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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;