draggable SVG rect and xui 2.0a

Develop and Deploy Cross-Browser Web Apps .
Post Reply
sedrok
Posts: 26
Joined: Tue Jun 03, 2014 12:50 pm

draggable SVG rect and xui 2.0a

Post by sedrok »

Why this code doesn't work with 2.0 ?
but it works with 1.4

It must set new left and top position of the SVG rectangle
   
// The default code is a module class (inherited from xui.Module)
// Ensure that all the value of "key/value pair" does not refer to external variables
xui.Class('App', 'xui.Module',{
    Instance:{
        // Dependency classes
        Dependencies:[],
        // Required modules
        Required:[],

        // To initialize properties
        properties : {},

        // To initialize instance(e.g. properties)
        initialize : function(){
        },

        // To initialize internal components (mostly UI controls)
        // *** If you're not a skilled, dont modify this function manually ***
        iniComponents : function(){
            // [[Code created by CrossUI RAD Studio
            var host=this, children=[], append=function(child){children.push(child.get(0));};
            
            append(
                xui.create("xui.UI.SVGPaper")
                .setHost(host,"xui_ui_svgpaper4")
                .setDock("fill")
                .setLeft("11.666666666666666em")
                .setTop("14.166666666666666em")
            );
            
            host.xui_ui_svgpaper4.append(
                xui.create("xui.UI.Button")
                .setHost(host,"xui_ui_button11")
                .setDirtyMark(false)
                .setLeft("55.833333333333336em")
                .setTop("5em")
                .setCaption("Button")
                .onClick("_xui_ui_button11_onclick")
                );
            
            host.xui_ui_svgpaper4.append(
                xui.create("xui.svg.pathComb")
                .setHost(host,"xui_svg_pathcomb4")
                .setSvgTag("FlowChart:Data")
                .setAttr({
                    "KEY":{
                        "stroke":"#004A7F",
                        "fill":"90-#5198D3-#A1C8F6",
                        "path":"M,60,270L,82,230L,170,230L,148,270Z"
                    },
                    "TEXT":{
                        "fill":"#fff",
                        "font-size":"12px",
                        "font-weight":"bold",
                        "text":"Data"
                    }
                })
                );
            
            host.xui_ui_svgpaper4.append(
                xui.create("xui.svg.connector")
                .setHost(host,"xui_svg_connector3")
                .setSvgTag("Connectors:Straight")
                .setAttr({
                    "KEY":{
                        "fill":"none",
                        "stroke":"#004A7F",
                        "path":"M,180,110L,115,230",
                        "stroke-width":2,
                        "arrow-start":"oval-midium-midium",
                        "arrow-end":"classic-wide-long"
                    },
                    "BG":{
                        "fill":"none",
                        "stroke":"#fff",
                        "stroke-width":4
                    }
                })
                .setFromObj("xui_svg_rectcomb3")
                .setFromPoint("bottom")
                .setToObj("xui_svg_pathcomb4")
                .setToPoint("top")
                );
            
            host.xui_ui_svgpaper4.append(
                xui.create("xui.svg.rectComb")
                .setHost(host,"xui_svg_rectcomb3")
                .setSvgTag("FlowChart:Process")
                .setAttr({
                    "KEY":{
                        "x":120,
                        "y":70,
                        "width":120,
                        "height":40,
                        "fill":"90-#5198D3-#A1C8F6",
                        "stroke":"#004A7F"
                    },
                    "TEXT":{
                        "text":"Process",
                        "font-size":"12px",
                        "fill":"#fff",
                        "font-weight":"bold"
                    }
                })
                );
            
            return children;
            // ]]Code created by CrossUI RAD Studio
        },

        // Give a chance to determine which UI controls will be appended to parent container
        customAppend : function(parent, subId, left, top){
            // "return false" will cause all the internal UI controls will be added to the parent panel
            return false;
        },
        events:{
            "onRender":"_xui_module1_onrender"
        },
        _xui_module1_onrender:function (module,threadid){
            var ns = this;
            window.$ns = ns;
 
            xui(ns.xui_svg_rectcomb3.getDomId()).draggable(true,{ 
                dragType : 'icon',
                dragIcon : 'http://www.vs.gs/tools/cursors/moveCursor.png'               
            },'ii1').onDragstop(function(p,e,s){
                var n_l = xui.Event.getPos(e).left  - $ns.xui_svg_rectcomb3.getParent().getLeft();
                var n_t = xui.Event.getPos(e).top   - $ns.xui_svg_rectcomb3.getParent().getTop();
                 
                console.log(xui.Event.getPos(e));
                 
                $ns.xui_svg_rectcomb3.setLeft(n_l);
                $ns.xui_svg_rectcomb3.setTop(n_t);
                
            });
        },
        _xui_ui_button11_onclick:function (profile,e,src,value){
            var ns = this, uictrl = profile.boxing();
            $ns.xui_svg_rectcomb3.setLeft(100);
            $ns.xui_svg_rectcomb3.setTop(100);

        }
        /*,
        // To determine how properties affects this module
        propSetAction : function(prop){
        },
        // To set all node's style in this modlue
        customStyle:{}
    },
    //To customize the default properties and event handlers
    Static:{
        $DataModel:{
        },
        $EventHandlers:{
        }
    */
    }
});
// The default code is a module class (inherited from xui.Module)
// Ensure that all the value of "key/value pair" does not refer to external variables
xui.Class('App', 'xui.Module',{
    Instance:{
        // Dependency classes
        Dependencies:[],
        // Required modules
        Required:[],

        // To initialize properties
        properties : {},

        // To initialize instance(e.g. properties)
        initialize : function(){
        },

        // To initialize internal components (mostly UI controls)
        // *** If you're not a skilled, dont modify this function manually ***
        iniComponents : function(){
            // [[Code created by CrossUI RAD Studio
            var host=this, children=[], append=function(child){children.push(child.get(0));};
            
            append(
                xui.create("xui.UI.SVGPaper")
                .setHost(host,"xui_ui_svgpaper4")
                .setDock("fill")
                .setLeft("11.666666666666666em")
                .setTop("14.166666666666666em")
            );
            
            host.xui_ui_svgpaper4.append(
                xui.create("xui.UI.Button")
                .setHost(host,"xui_ui_button11")
                .setDirtyMark(false)
                .setLeft("55.833333333333336em")
                .setTop("5em")
                .setCaption("Button")
                .onClick("_xui_ui_button11_onclick")
                );
            
            host.xui_ui_svgpaper4.append(
                xui.create("xui.svg.pathComb")
                .setHost(host,"xui_svg_pathcomb4")
                .setSvgTag("FlowChart:Data")
                .setAttr({
                    "KEY":{
                        "stroke":"#004A7F",
                        "fill":"90-#5198D3-#A1C8F6",
                        "path":"M,60,270L,82,230L,170,230L,148,270Z"
                    },
                    "TEXT":{
                        "fill":"#fff",
                        "font-size":"12px",
                        "font-weight":"bold",
                        "text":"Data"
                    }
                })
                );
            
            host.xui_ui_svgpaper4.append(
                xui.create("xui.svg.connector")
                .setHost(host,"xui_svg_connector3")
                .setSvgTag("Connectors:Straight")
                .setAttr({
                    "KEY":{
                        "fill":"none",
                        "stroke":"#004A7F",
                        "path":"M,180,110L,115,230",
                        "stroke-width":2,
                        "arrow-start":"oval-midium-midium",
                        "arrow-end":"classic-wide-long"
                    },
                    "BG":{
                        "fill":"none",
                        "stroke":"#fff",
                        "stroke-width":4
                    }
                })
                .setFromObj("xui_svg_rectcomb3")
                .setFromPoint("bottom")
                .setToObj("xui_svg_pathcomb4")
                .setToPoint("top")
                );
            
            host.xui_ui_svgpaper4.append(
                xui.create("xui.svg.rectComb")
                .setHost(host,"xui_svg_rectcomb3")
                .setSvgTag("FlowChart:Process")
                .setAttr({
                    "KEY":{
                        "x":120,
                        "y":70,
                        "width":120,
                        "height":40,
                        "fill":"90-#5198D3-#A1C8F6",
                        "stroke":"#004A7F"
                    },
                    "TEXT":{
                        "text":"Process",
                        "font-size":"12px",
                        "fill":"#fff",
                        "font-weight":"bold"
                    }
                })
                );
            
            return children;
            // ]]Code created by CrossUI RAD Studio
        },

        // Give a chance to determine which UI controls will be appended to parent container
        customAppend : function(parent, subId, left, top){
            // "return false" will cause all the internal UI controls will be added to the parent panel
            return false;
        },
        events:{
            "onRender":"_xui_module1_onrender"
        },
        _xui_module1_onrender:function (module,threadid){
            var ns = this;
            window.$ns = ns;
 
            xui(ns.xui_svg_rectcomb3.getDomId()).draggable(true,{ 
                dragType : 'icon',
                dragIcon : 'http://www.vs.gs/tools/cursors/moveCursor.png'               
            },'ii1').onDragstop(function(p,e,s){
                var n_l = xui.Event.getPos(e).left  - $ns.xui_svg_rectcomb3.getParent().getLeft();
                var n_t = xui.Event.getPos(e).top   - $ns.xui_svg_rectcomb3.getParent().getTop();
                 
                console.log(xui.Event.getPos(e));
                 
                $ns.xui_svg_rectcomb3.setLeft(n_l);
                $ns.xui_svg_rectcomb3.setTop(n_t);
                
            });
        },
        _xui_ui_button11_onclick:function (profile,e,src,value){
            var ns = this, uictrl = profile.boxing();
            $ns.xui_svg_rectcomb3.setLeft(100);
            $ns.xui_svg_rectcomb3.setTop(100);

        }
        /*,
        // To determine how properties affects this module
        propSetAction : function(prop){
        },
        // To set all node's style in this modlue
        customStyle:{}
    },
    //To customize the default properties and event handlers
    Static:{
        $DataModel:{
        },
        $EventHandlers:{
        }
    */
    }
});
   

support
Posts: 356
Joined: Sat Apr 27, 2013 9:22 am

Re: draggable SVG rect and xui 2.0a

Post by support »

We use 'em' in the new version.

$ns.xui_svg_rectcomb3.getParent().getLeft() => "11.666666666666666em"

So, you can do this:
javascript code
xui.CSS.$px($ns.xui_svg_rectcomb3.getParent().getLeft())
or, javascript code
xui.create("xui.UI.SVGPaper")
                .setHost(host,"xui_ui_svgpaper4")
                .setSpaceUnit("px")

sedrok
Posts: 26
Joined: Tue Jun 03, 2014 12:50 pm

Re: draggable SVG rect and xui 2.0a

Post by sedrok »

working version
   
// The default code is a module class (inherited from xui.Module)
// Ensure that all the value of "key/value pair" does not refer to external variables
xui.Class('App', 'xui.Module',{
    Instance:{
        // Dependency classes
        Dependencies:[],
        // Required modules
        Required:[],
        // To initialize properties
        properties : {},
        // To initialize instance(e.g. properties)
        initialize : function(){
        },
        // To initialize internal components (mostly UI controls)
        // *** If you're not a skilled, dont modify this function manually ***
        iniComponents : function(){
            // [[Code created by CrossUI RAD Studio
            var host=this, children=[], append=function(child){children.push(child.get(0));};
            
            append(
                xui.create("xui.UI.SVGPaper")
                .setHost(host,"xui_ui_svgpaper4")
                .setDock("fill")
                .setLeft("0em")
                .setTop("0em")
                .setWidth("100em")
                .setHeight("100em")
            );
            
            host.xui_ui_svgpaper4.append(
                xui.create("xui.UI.Button")
                .setHost(host,"xui_ui_button11")
                .setDirtyMark(false)
                .setLeft("55.833333333333336em")
                .setTop("5em")
                .setCaption("Button")
                .onClick("_xui_ui_button11_onclick")
                );
            
            host.xui_ui_svgpaper4.append(
                xui.create("xui.svg.pathComb")
                .setHost(host,"xui_svg_pathcomb4")
                .setSvgTag("FlowChart:Data")
                .setAttr({
                    "KEY":{
                        "stroke":"#004A7F",
                        "fill":"90-#5198D3-#A1C8F6",
                        "path":"M,60,270L,82,230L,170,230L,148,270Z"
                    },
                    "TEXT":{
                        "fill":"#fff",
                        "font-size":"12px",
                        "font-weight":"bold",
                        "text":"Data"
                    }
                })
                );
            
            host.xui_ui_svgpaper4.append(
                xui.create("xui.svg.connector")
                .setHost(host,"xui_svg_connector3")
                .setSvgTag("Connectors:Straight")
                .setAttr({
                    "KEY":{
                        "path":"M,180,110L,115,230",
                        "fill":"none",
                        "stroke":"#004A7F",
                        "stroke-width":2,
                        "arrow-start":"oval-midium-midium",
                        "arrow-end":"classic-wide-long"
                    },
                    "BG":{
                        "fill":"none",
                        "stroke":"#fff",
                        "stroke-width":4
                    }
                })
                .setFromObj("xui_svg_rectcomb3")
                .setFromPoint("bottom")
                .setToObj("xui_svg_pathcomb4")
                .setToPoint("top")
                );
            
            host.xui_ui_svgpaper4.append(
                xui.create("xui.svg.rectComb")
                .setHost(host,"xui_svg_rectcomb3")
                .setSvgTag("FlowChart:Process")
                .setAttr({
                    "KEY":{
                        "x":120,
                        "y":70,
                        "width":120,
                        "height":40,
                        "fill":"90-#5198D3-#A1C8F6",
                        "stroke":"#004A7F"
                    },
                    "TEXT":{
                        "text":"Process",
                        "font-size":"12px",
                        "fill":"#fff",
                        "font-weight":"bold"
                    }
                })
                );
            
            return children;
            // ]]Code created by CrossUI RAD Studio
        },
        // Give a chance to determine which UI controls will be appended to parent container
        customAppend : function(parent, subId, left, top){
            // "return false" will cause all the internal UI controls will be added to the parent panel
            return false;
        },
        events:{
            "onRender":"_xui_module1_onrender"
        },
        _xui_module1_onrender:function (module,threadid){
            var ns = this;
            window.$ns = ns;
 
            xui(ns.xui_svg_rectcomb3.getDomId()).draggable(true,{ 
                dragType : 'icon',
                dragIcon : 'http://www.vs.gs/tools/cursors/moveCursor.png'               
            },'ii1').onDragstop(function(p,e,s){
                var n_l = xui.Event.getPos(e).left - xui.CSS.$px($ns.xui_svg_rectcomb3.getParent().getLeft());
                var n_t = xui.Event.getPos(e).top - xui.CSS.$px($ns.xui_svg_rectcomb3.getParent().getTop());
               
                 console.log(xui.CSS.$px($ns.xui_svg_rectcomb3.getParent().getLeft()));
                 console.log(xui.CSS.$px($ns.xui_svg_rectcomb3.getParent().getTop()));
                 console.log(n_l);
                 console.log(n_t);
                
                console.log(xui.Event.getPos(e));
                 
                $ns.xui_svg_rectcomb3.setLeft(n_l);
                $ns.xui_svg_rectcomb3.setTop(n_t);
                
            });
        },
        _xui_ui_button11_onclick:function (profile,e,src,value){
            var ns = this, uictrl = profile.boxing();
            $ns.xui_svg_rectcomb3.setLeft(100);
            $ns.xui_svg_rectcomb3.setTop(100);
        }
        /*,
        // To determine how properties affects this module
        propSetAction : function(prop){
        },
        // To set all node's style in this modlue
        customStyle:{}
    },
    //To customize the default properties and event handlers
    Static:{
        $DataModel:{
        },
        $EventHandlers:{
        }
    */
    }
});
// The default code is a module class (inherited from xui.Module)
// Ensure that all the value of "key/value pair" does not refer to external variables
xui.Class('App', 'xui.Module',{
    Instance:{
        // Dependency classes
        Dependencies:[],
        // Required modules
        Required:[],
        // To initialize properties
        properties : {},
        // To initialize instance(e.g. properties)
        initialize : function(){
        },
        // To initialize internal components (mostly UI controls)
        // *** If you're not a skilled, dont modify this function manually ***
        iniComponents : function(){
            // [[Code created by CrossUI RAD Studio
            var host=this, children=[], append=function(child){children.push(child.get(0));};
            
            append(
                xui.create("xui.UI.SVGPaper")
                .setHost(host,"xui_ui_svgpaper4")
                .setDock("fill")
                .setLeft("0em")
                .setTop("0em")
                .setWidth("100em")
                .setHeight("100em")
            );
            
            host.xui_ui_svgpaper4.append(
                xui.create("xui.UI.Button")
                .setHost(host,"xui_ui_button11")
                .setDirtyMark(false)
                .setLeft("55.833333333333336em")
                .setTop("5em")
                .setCaption("Button")
                .onClick("_xui_ui_button11_onclick")
                );
            
            host.xui_ui_svgpaper4.append(
                xui.create("xui.svg.pathComb")
                .setHost(host,"xui_svg_pathcomb4")
                .setSvgTag("FlowChart:Data")
                .setAttr({
                    "KEY":{
                        "stroke":"#004A7F",
                        "fill":"90-#5198D3-#A1C8F6",
                        "path":"M,60,270L,82,230L,170,230L,148,270Z"
                    },
                    "TEXT":{
                        "fill":"#fff",
                        "font-size":"12px",
                        "font-weight":"bold",
                        "text":"Data"
                    }
                })
                );
            
            host.xui_ui_svgpaper4.append(
                xui.create("xui.svg.connector")
                .setHost(host,"xui_svg_connector3")
                .setSvgTag("Connectors:Straight")
                .setAttr({
                    "KEY":{
                        "path":"M,180,110L,115,230",
                        "fill":"none",
                        "stroke":"#004A7F",
                        "stroke-width":2,
                        "arrow-start":"oval-midium-midium",
                        "arrow-end":"classic-wide-long"
                    },
                    "BG":{
                        "fill":"none",
                        "stroke":"#fff",
                        "stroke-width":4
                    }
                })
                .setFromObj("xui_svg_rectcomb3")
                .setFromPoint("bottom")
                .setToObj("xui_svg_pathcomb4")
                .setToPoint("top")
                );
            
            host.xui_ui_svgpaper4.append(
                xui.create("xui.svg.rectComb")
                .setHost(host,"xui_svg_rectcomb3")
                .setSvgTag("FlowChart:Process")
                .setAttr({
                    "KEY":{
                        "x":120,
                        "y":70,
                        "width":120,
                        "height":40,
                        "fill":"90-#5198D3-#A1C8F6",
                        "stroke":"#004A7F"
                    },
                    "TEXT":{
                        "text":"Process",
                        "font-size":"12px",
                        "fill":"#fff",
                        "font-weight":"bold"
                    }
                })
                );
            
            return children;
            // ]]Code created by CrossUI RAD Studio
        },
        // Give a chance to determine which UI controls will be appended to parent container
        customAppend : function(parent, subId, left, top){
            // "return false" will cause all the internal UI controls will be added to the parent panel
            return false;
        },
        events:{
            "onRender":"_xui_module1_onrender"
        },
        _xui_module1_onrender:function (module,threadid){
            var ns = this;
            window.$ns = ns;
 
            xui(ns.xui_svg_rectcomb3.getDomId()).draggable(true,{ 
                dragType : 'icon',
                dragIcon : 'http://www.vs.gs/tools/cursors/moveCursor.png'               
            },'ii1').onDragstop(function(p,e,s){
                var n_l = xui.Event.getPos(e).left - xui.CSS.$px($ns.xui_svg_rectcomb3.getParent().getLeft());
                var n_t = xui.Event.getPos(e).top - xui.CSS.$px($ns.xui_svg_rectcomb3.getParent().getTop());
               
                 console.log(xui.CSS.$px($ns.xui_svg_rectcomb3.getParent().getLeft()));
                 console.log(xui.CSS.$px($ns.xui_svg_rectcomb3.getParent().getTop()));
                 console.log(n_l);
                 console.log(n_t);
                
                console.log(xui.Event.getPos(e));
                 
                $ns.xui_svg_rectcomb3.setLeft(n_l);
                $ns.xui_svg_rectcomb3.setTop(n_t);
                
            });
        },
        _xui_ui_button11_onclick:function (profile,e,src,value){
            var ns = this, uictrl = profile.boxing();
            $ns.xui_svg_rectcomb3.setLeft(100);
            $ns.xui_svg_rectcomb3.setTop(100);
        }
        /*,
        // To determine how properties affects this module
        propSetAction : function(prop){
        },
        // To set all node's style in this modlue
        customStyle:{}
    },
    //To customize the default properties and event handlers
    Static:{
        $DataModel:{
        },
        $EventHandlers:{
        }
    */
    }
});
   

Post Reply