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.

ejDiagram - UserHandle typescript event click

Thread ID:

Created:

Updated:

Platform:

Replies:

124019 May 9,2016 10:43 AM Apr 28,2017 07:58 AM JavaScript 3
loading
Tags: ejDiagram
David
Asked On May 9, 2016 10:43 AM

Hi!

i try to work userHandle with typescript. 

Now, i have button rigth bottom, but i can't set event button click.

Code:


//var CloneTool = (function (base) {
        //    ej.datavisualization.Diagram.extend(base);

            
        //    // Initializes the tool
        //    function CloneTool(name) {
        //        base.call(this, name);
        //    }
        //    // Defines the required events
        //    CloneTool.prototype.mouseup = function (evt) {
        //        debugger;
        //        //clones the selected elements when the custom handle is clicked.
        //        this.diagram.copy();
        //        //Pastes the cloned elements.
        //        this.diagram.paste();
        //        base.prototype.mouseup.call(this, evt);
        //    };
        //    return CloneTool;
        //})(ej.datavisualization.Diagram.Tool.SingleSelect);

        
        var userHandle = ej.datavisualization.Diagram.UserHandle({
            name: "settings",
            position: ej.datavisualization.Diagram.UserHandlePositions.BottomRight,
            visible: true,
            size: 20,
           // tool: new CloneTool(userHandle.name), <-- Don't work
            pathData: "M267.92,119.461c-0.425-3.778-4.83-6.617-8.639-6.617    c-12.315,0-23.243-7.231-27.826-18.414c-4.682-11.454-1.663-24.812,7.515-33.231c2.889-2.641,3.24-7.062,0.817-10.133    c-6.303-8.004-13.467-15.234-21.289-21.5c-3.063-2.458-7.557-2.116-10.213,0.825c-8.01,8.871-22.398,12.168-33.516,7.529    c-11.57-4.867-18.866-16.591-18.152-29.176c0.235-3.953-2.654-7.39-6.595-7.849c-10.038-1.161-20.164-1.197-30.232-0.08    c-3.896,0.43-6.785,3.786-6.654,7.689c0.438,12.461-6.946,23.98-18.401,28.672c-10.985,4.487-25.272,1.218-33.266-7.574    c-2.642-2.896-7.063-3.252-10.141-0.853c-8.054,6.319-15.379,13.555-21.74,21.493c-2.481,3.086-2.116,7.559,0.802,10.214    c9.353,8.47,12.373,21.944,7.514,33.53c-4.639,11.046-16.109,18.165-29.24,18.165c-4.261-0.137-7.296,2.723-7.762,6.597    c-1.182,10.096-1.196,20.383-0.058,30.561c0.422,3.794,4.961,6.608,8.812,6.608c11.702-0.299,22.937,6.946,27.65,18.415    c4.698,11.454,1.678,24.804-7.514,33.23c-2.875,2.641-3.24,7.055-0.817,10.126c6.244,7.953,13.409,15.19,21.259,21.508    c3.079,2.481,7.559,2.131,10.228-0.81c8.04-8.893,22.427-12.184,33.501-7.536c11.599,4.852,18.895,16.575,18.181,29.167    c-0.233,3.955,2.67,7.398,6.595,7.85c5.135,0.599,10.301,0.898,15.481,0.898c4.917,0,9.835-0.27,14.752-0.817    c3.897-0.43,6.784-3.786,6.653-7.696c-0.451-12.454,6.946-23.973,18.386-28.657c11.059-4.517,25.286-1.211,33.281,7.572    c2.657,2.89,7.047,3.239,10.142,0.848c8.039-6.304,15.349-13.534,21.74-21.494c2.48-3.079,2.13-7.559-0.803-10.213    c-9.353-8.47-12.388-21.946-7.529-33.524c4.568-10.899,15.612-18.217,27.491-18.217l1.662,0.043    c3.853,0.313,7.398-2.655,7.865-6.588C269.044,139.917,269.058,129.639,267.92,119.461z M134.595,179.491    c-24.718,0-44.824-20.106-44.824-44.824c0-24.717,20.106-44.824,44.824-44.824c24.717,0,44.823,20.107,44.823,44.824    C179.418,159.385,159.312,179.491,134.595,179.491z"
           
        });

        this.diagram = new ej.datavisualization.Diagram(this.containers.diagramContainer, {
            height: "85vh",
            width: "100%",
            drop: this.onDrop,
            sizeChange: this.onSizeChange,
            nodes: this.nodesJson,
            enableContextMenu: false,
            tool: ej.datavisualization.Diagram.Tool.SingleSelect,
            selectedItems: {
                userHandles: [userHandle]
            }

        });



please, can you post me a example? i try it : http://help.syncfusion.com/js/diagram/interaction#user-handles  but ej.datavisualization.Diagram.ToolBase don't exist in typescript...

any idea?

Thanks!!

Shyam G [Syncfusion]
Replied On May 10, 2016 08:21 AM

Hi David, 

We considered this “Typescript support for user handle” as an feature request and a support incident has been created under your account to track the status of this requirement. Please log on to our support website to check for further updates. 
 

Regards, 
Shyam G 


Matthew Meehan
Replied On April 26, 2017 05:54 PM

Hi!

i try to work userHandle with typescript. 

Now, i have button rigth bottom, but i can't set event button click.

Code:


//var CloneTool = (function (base) {
        //    ej.datavisualization.Diagram.extend(base);

            
        //    // Initializes the tool
        //    function CloneTool(name) {
        //        base.call(this, name);
        //    }
        //    // Defines the required events
        //    CloneTool.prototype.mouseup = function (evt) {
        //        debugger;
        //        //clones the selected elements when the custom handle is clicked.
        //        this.diagram.copy();
        //        //Pastes the cloned elements.
        //        this.diagram.paste();
        //        base.prototype.mouseup.call(this, evt);
        //    };
        //    return CloneTool;
        //})(ej.datavisualization.Diagram.Tool.SingleSelect);

        
        var userHandle = ej.datavisualization.Diagram.UserHandle({
            name: "settings",
            position: ej.datavisualization.Diagram.UserHandlePositions.BottomRight,
            visible: true,
            size: 20,
           // tool: new CloneTool(userHandle.name), <-- Don't work
            pathData: "M267.92,119.461c-0.425-3.778-4.83-6.617-8.639-6.617    c-12.315,0-23.243-7.231-27.826-18.414c-4.682-11.454-1.663-24.812,7.515-33.231c2.889-2.641,3.24-7.062,0.817-10.133    c-6.303-8.004-13.467-15.234-21.289-21.5c-3.063-2.458-7.557-2.116-10.213,0.825c-8.01,8.871-22.398,12.168-33.516,7.529    c-11.57-4.867-18.866-16.591-18.152-29.176c0.235-3.953-2.654-7.39-6.595-7.849c-10.038-1.161-20.164-1.197-30.232-0.08    c-3.896,0.43-6.785,3.786-6.654,7.689c0.438,12.461-6.946,23.98-18.401,28.672c-10.985,4.487-25.272,1.218-33.266-7.574    c-2.642-2.896-7.063-3.252-10.141-0.853c-8.054,6.319-15.379,13.555-21.74,21.493c-2.481,3.086-2.116,7.559,0.802,10.214    c9.353,8.47,12.373,21.944,7.514,33.53c-4.639,11.046-16.109,18.165-29.24,18.165c-4.261-0.137-7.296,2.723-7.762,6.597    c-1.182,10.096-1.196,20.383-0.058,30.561c0.422,3.794,4.961,6.608,8.812,6.608c11.702-0.299,22.937,6.946,27.65,18.415    c4.698,11.454,1.678,24.804-7.514,33.23c-2.875,2.641-3.24,7.055-0.817,10.126c6.244,7.953,13.409,15.19,21.259,21.508    c3.079,2.481,7.559,2.131,10.228-0.81c8.04-8.893,22.427-12.184,33.501-7.536c11.599,4.852,18.895,16.575,18.181,29.167    c-0.233,3.955,2.67,7.398,6.595,7.85c5.135,0.599,10.301,0.898,15.481,0.898c4.917,0,9.835-0.27,14.752-0.817    c3.897-0.43,6.784-3.786,6.653-7.696c-0.451-12.454,6.946-23.973,18.386-28.657c11.059-4.517,25.286-1.211,33.281,7.572    c2.657,2.89,7.047,3.239,10.142,0.848c8.039-6.304,15.349-13.534,21.74-21.494c2.48-3.079,2.13-7.559-0.803-10.213    c-9.353-8.47-12.388-21.946-7.529-33.524c4.568-10.899,15.612-18.217,27.491-18.217l1.662,0.043    c3.853,0.313,7.398-2.655,7.865-6.588C269.044,139.917,269.058,129.639,267.92,119.461z M134.595,179.491    c-24.718,0-44.824-20.106-44.824-44.824c0-24.717,20.106-44.824,44.824-44.824c24.717,0,44.823,20.107,44.823,44.824    C179.418,159.385,159.312,179.491,134.595,179.491z"
           
        });

        this.diagram = new ej.datavisualization.Diagram(this.containers.diagramContainer, {
            height: "85vh",
            width: "100%",
            drop: this.onDrop,
            sizeChange: this.onSizeChange,
            nodes: this.nodesJson,
            enableContextMenu: false,
            tool: ej.datavisualization.Diagram.Tool.SingleSelect,
            selectedItems: {
                userHandles: [userHandle]
            }

        });



please, can you post me a example? i try it : http://help.syncfusion.com/js/diagram/interaction#user-handles  but ej.datavisualization.Diagram.ToolBase don't exist in typescript...

any idea?

Thanks!!

this might help if anyone else searches for userHandles and typescript.
ej.datavisualization.Diagram.ToolBase does exist under ej.web.all.min.js, just that the ts @types definition doesn't reveal it, so if you can produce an output it will likely work



Shyam G [Syncfusion]
Replied On April 28, 2017 07:58 AM

Hi Matthew Meehan, 
 
We considered this “Userhandles not working in typescript” as an issue and a support incident has been created under your account to track the status of this requirement. Please log on to our support website to check for further updates. 
 
                                                                                                                                     
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.

;