KineticJS - anchors not remaining when resizing an image + issue with image remaining inside the boundary -

please see link:

i trying solve 2 problems here:

1) when click on anchor , try drag or resize - anchors disappear.

i tried doing:

anchor.on("dragend", function(e) {     var node = e.targetnode;             if (node.parent.nodetype = 'kinetic.group') {         var children = node.parent.children;         selectedgroup = node.parent;              (i = 1; < children.length; i++) {                          if (children[i].getname() == 'topleft' ||                 children[i].getname() == 'topright' ||                 children[i].getname() == 'bottomright' ||                 children[i].getname() == 'bottomleft') {                 children[i].show();             }         }     }     

but although can see anchors when console.log, don't appear on canvas. ideally don't want anchors disappear until user single click on image. know when start drag or resize, system assuming have done single click , removing them (instead of click , hold down - ie perform drag or resize).

2) how make sure if user resizes image exceeds black rectangle boundary - not increase size anymore? example, if drag darth vader right edge - , increase size using bottom left anchor, image spills on right edge of black rectangle - wrong.

many on these matters!

instead of using mousedown, use click events. need flag called moving detect whether moved mouse (ie. dragged or resized) before deciding deselect() or not.

at top declare new var moving

then change events handle moving:

layer.on('mousedown', function (e) {     moving = false; });  layer.on('mousemove', function () {     moving = true; });  layer.on('click', function (e) {     var node = e.targetnode;     select(node); }); 

and modify else clause inside select() function:

else {   if(!moving) {     deselect();   } } 

jsfiddle

note: personally, think it's more functional deselect (hide anchors) when click away image, rather click on image again hide anchors. easier implement! it's choice though.

as second question, answered in 1 of previous questions, i'm not going code because think can figure out, if use dragboundfunc on anchor (similar dragboundfunc group), prevent anchors bleeding out of edge.

edit:

you can use dragboundfunc on anchor when declare var anchor in addanchor() function:

var anchor = new kinetic.circle({     x: x,     y: y,     stroke: "#666",     fill: "#ddd",     strokewidth: 2,     radius: 8,     name: name,     draggable: true,     dragboundfunc: function(pos) {       //..code similar group dragboundfunc     } });