Fiddle - http://liveweave.com/JS9EBN
This is a starter template for web design applications. (well almost except for the drawing problem)
Elements are drawn to the stage like so.
// Handles Drawable Elements
$("#canvas").on('mousedown touchstart', function(e) {
if(drawable) {
drawing = true;
mS.x = e.pageX;
mS.y = e.pageY;
dBox = $("<" + $('.draw-elements input[type=radio]:checked').val() + " class='box' />")
.html("Certains textes");
$(this).append(dBox);
// Do not select text when drawing
return false;
}
});
$(document).on('mousemove touchmove', function(e) {
if(drawing && drawable){
var mPos = {x:e.pageX, y:e.pageY};
var css = {};
css.position = 'absolute';
css.left = (mPos.x > mS.x) ? mS.x : mPos.x;
css.top = (mPos.y > mS.y) ? mS.y : mPos.y;
css.width = Math.abs(mPos.x - mS.x);
css.height = Math.abs(mPos.y - mS.y);
css.border = '1px dotted rgb(0, 34, 102)';
dBox.css(css);
// Do not select text when drawing
return false;
}
}).on('mouseup touchend', function(e) {
drawing = false;
});
As long as my select tool is not called I can draw elements without a problem, but when it is called and I come back to draw a div I can no longer draw elements to my stage.
After some tinkering I noticed the problem resides with my drag function for each element that's selected.
var HandleSelectedElement = function() {
if ($(".select-tool.activetool").is(":visible")) {
if(elmstyle) {
$('#canvas').children().drag("start",function( ev, dd ){
dd.attrc = $( ev.target ).prop("className");
dd.attrd = $( ev.target ).prop("id");
dd.width = $( this ).width();
dd.height = $( this ).height();
})
.drag(function( ev, dd ){
var props = {};
if ( dd.attrc.indexOf("E") > -1 ){
props.width = Math.max( 32, dd.width + dd.deltaX );
}
if ( dd.attrc.indexOf("S") > -1 ){
props.height = Math.max( 32, dd.height + dd.deltaY );
}
if ( dd.attrc.indexOf("W") > -1 ){
props.width = Math.max( 32, dd.width - dd.deltaX );
props.left = dd.originalX + dd.width - props.width;
}
if ( dd.attrc.indexOf("N") > -1 ){
props.height = Math.max( 32, dd.height - dd.deltaY );
props.top = dd.originalY + dd.height - props.height;
}
if ( dd.attrd.indexOf("stylethis") > -1 ){
props.top = dd.offsetY;
props.left = dd.offsetX;
}
$('#stylethis').css( props );
}, {relative:true});
}
};
I don't understand what's wrong.
I couldn't find out how to solve the initial problem. So I decided to do a work around.
Here's the fiddle: http://liveweave.com/g2aKlD
I decided to refresh the canvas each time a tool is clicked. I take the canvas's html and set that as a textarea's value. I then set the textarea's value as the canvas's html.
$("#code").val($("#canvas").html());
$("#canvas").html($("#code").val());
This way whatever called the initial bug is removed completely. However last time I did this all spaces where turned into a otherwise known as a non-breakable space (I've also seen this also add unnecessary line breaks and paragraphs when not needed)
I still don't understand why my draw function did not work when drag was turned off.
I really hate having to do this (being refreshing the canvas) because the more elements that are in there and the more refreshing is done, the more ram it uses which makes the browser work the cpu that much harder.
I hope someone can come across a better solution.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments