draggable/movable SVG Rectangle

Develop and Deploy Cross-Browser Web Apps .

draggable/movable SVG Rectangle

Postby sedrok » Wed Jun 18, 2014 9:33 am

Can be used for dynamic workflow building/editing like in attlassian JIRA.

If you can improve this code please post here or email me.

   
// The default code is a com class (inherited from xui.Com)
Class('App', 'xui.Com',{
// Ensure that all the value of "key/value pair" does not refer to external variables
Instance:{
// To initialize instance(e.g. properties)
initialize : function(){
// To determine whether or not the com will be destroyed, when the first UI control be destroyed
this.autoDestroy = true;
// To initialize properties
this.properties = {};
},
// 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 Tools
var host=this, children=[], append=function(child){children.push(child.get(0));};

append((new xui.UI.SVGPaper())
.setHost(host,"ctl_svgpaper124")
.setLeft(30)
.setTop(40)
.setWidth(730)
.setHeight(460)
);

host.ctl_svgpaper124.append((new xui.svg.rectComb())
.setHost(host,"ctl_rectcomb251")
.setSvgTag("FlowChart:Process")
.setAttr({"KEY":{"stroke":"#004A7F", "fill":"90-#5198D3-#A1C8F6", "width":120, "height":40, "x":130, "y":60}, "TEXT":{"fill":"#fff", "font-size":"12px", "font-weight":"bold", "text":"Process"}})
);

host.ctl_svgpaper124.append((new xui.svg.pathComb())
.setHost(host,"ctl_pathcomb4")
.setSvgTag("FlowChart:Data")
.setAttr({"KEY":{"stroke":"#004A7F", "fill":"90-#5198D3-#A1C8F6", "path":"M,140,240L,162,200L,250,200L,228,240Z"}, "TEXT":{"fill":"#fff", "font-size":"12px", "font-weight":"bold", "text":"Data"}})
);

host.ctl_svgpaper124.append((new xui.svg.connector())
.setHost(host,"ctl_connector127")
.setSvgTag("Connectors:Straight")
.setAttr({"KEY":{"path":"M,190,100L,195,200", "stroke":"#004A7F", "stroke-width":2, "arrow-start":"oval-midium-midium", "arrow-end":"classic-wide-long"}, "BG":{"stroke":"#fff", "stroke-width":4}})
.setFromObj("ctl_rectcomb251")
.setFromPoint("bottom")
.setToObj("ctl_pathcomb4")
.setToPoint("top")
);

return children;
// ]]Code created by CrossUI RAD Tools
},
// Give a chance to load other com
iniExComs : function(com, threadid){
},
// 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;
},
// This instance's events
events : {"onRender":"_com_onrender"},
_com_onrender:function (com,threadid){
var ns = this;
window.$ns = ns;

xui(ns.ctl_rectcomb251.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.ctl_rectcomb251.getParent().getLeft();
var n_t = xui.Event.getPos(e).top - $ns.ctl_rectcomb251.getParent().getTop();

console.log(xui.Event.getPos(e));

$ns.ctl_rectcomb251.setLeft(n_l);
$ns.ctl_rectcomb251.setTop(n_t);
});

}
}
});
   
Attachments
1231efwf.jpg
1231efwf.jpg (8.13 KiB) Viewed 4839 times
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