draggable SVG rect and xui 2.0a

Develop and Deploy Cross-Browser Web Apps .

draggable SVG rect and xui 2.0a

Postby sedrok » Tue May 16, 2017 3:27 pm

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:{
}
*/
}
});
   
sedrok
 
Posts: 26
Joined: Tue Jun 03, 2014 12:50 pm

Re: draggable SVG rect and xui 2.0a

Postby support » Wed May 17, 2017 4:22 am

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")
support
 
Posts: 331
Joined: Sat Apr 27, 2013 9:22 am

Re: draggable SVG rect and xui 2.0a

Postby sedrok » Wed May 17, 2017 8:04 am

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:{
}
*/
}
});
   
sedrok
 
Posts: 26
Joined: Tue Jun 03, 2014 12:50 pm


Return to CrossUI for Web Apps

Who is online

Users browsing this forum: No registered users and 0 guests

cron