var padding = 2; var floor; var balcony; var minWidth = 100; var minHeight = 100; var scaleRightTop, scaleLeftTop, scaleRightBottom, scaleLeftBottom; function handlerBalcony(stage, balcony, floor) { var width = balcony.width; var height = balcony.height; balcony.on("pressmove", function (event) { console.log("aaa"); event.currentTarget.x = event.stageX; event.currentTarget.y = event.stageY; }); balcony.on("pressup", function (event) { event.currentTarget.x = Math.round(balcony.x / 100) * 100; event.currentTarget.y = Math.round(balcony.y / 100) * 100; stage.removeChild(scaleRightTop); stage.removeChild(scaleLeftTop); stage.removeChild(scaleRightBottom); stage.removeChild(scaleLeftBottom); drawScaleBalconyShape(stage, balcony, floor); stage.update(); }); drawScaleBalconyShape(stage, balcony, floor); stage.update(); } function createBalcony(x, y, width, height) { var rect = new createjs.Shape(); if (width < minWidth) { width = minWidth; } if (width > floor.width) { width = floor.width; } if (height < minHeight) { height = minHeight; } if (height > floor.height) { height = floor.height; } rect.graphics.beginFill("#FFFF00").drawRect(0, 0, width, height); balcony = new createjs.Container(); balcony.x = x; balcony.y = y; balcony.width = width; balcony.height = height; balcony.addChild(rect); return balcony; } function drawScaleBalcony(balcony, isRight, isTop) { var x, y; if (isRight & isTop) { x = balcony.x + balcony.width - 15; y = balcony.y - 15; } if (!isRight && isTop) { x = balcony.x - 15; y = balcony.y - 15; } if (isRight && !isTop) { x = balcony.x + balcony.width - 15; y = balcony.y + balcony.height - 15; } if (!isRight && !isTop) { x = balcony.x - 15; y = balcony.y + balcony.height - 15; } var g = new createjs.Graphics().beginStroke('#000000').beginFill('#ffffff').drawRect(0, 0, 20, 20).endStroke(); var rect = new createjs.Shape(g); rect.x = x; rect.y = y; return rect; } function drawScaleBalconyShape(stage, balcony, rect) { scaleRightTop = drawScaleBalcony(balcony, true, true); scaleLeftTop = drawScaleBalcony(balcony, false, true); scaleRightBottom = drawScaleBalcony(balcony, true, false); scaleLeftBottom = drawScaleBalcony(balcony, false, false); stage.addChild(scaleRightTop); stage.addChild(scaleLeftTop); stage.addChild(scaleRightBottom); stage.addChild(scaleLeftBottom); var x, y, newWidth, newHeight; x = balcony.x; y = balcony.y; var pos = getPositionToSetBalcony(rect, x, y, balcony.width, balcony.height); scaleRightTop.on('pressmove', function (event) { switch (pos) { case 1: scaleRightTop.visible = false; scaleLeftTop.visible = false; scaleRightBottom.visible = false; scaleLeftBottom.visible = false; stage.removeChild(balcony); if (event.localY > floor.y + floor.height - 100 || event.localY < floor.y) { newHeight = balcony.height; } else if (y > event.localY) { newHeight = Math.round((y - event.localY) / 100) * 100 + balcony.height; y = y - Math.round((y - event.localY) / 100) * 100; } else if (balcony.height > 100) { newHeight = balcony.height - Math.round((event.localY - y) / 100) * 100; y = y + Math.round((event.localY - y) / 100) * 100; } else { newHeight = balcony.height; } handlerBalcony(stage, balcony, floor); break; case 2: scaleRightTop.visible = false; scaleLeftTop.visible = false; scaleRightBottom.visible = false; scaleLeftBottom.visible = false; stage.removeChild(balcony); if (event.localX < floor.x || event.localX > floor.x + floor.width) { newWidth = balcony.width; } else if (x + balcony.width < event.localX) { newWidth = Math.round((event.localX - x - balcony.width) / 100) * 100 + balcony.width; } else if (balcony.width > 100) { newWidth = balcony.width - Math.round((x + balcony.width - event.localX) / 100) * 100; } else { newWidth = balcony.width; } if (event.localY > floor.y - 100 || event.localY < 50) { newHeight = balcony.height; } else if (y > event.localY) { newHeight = Math.round((y - event.localY) / 100) * 100 + balcony.height; y = y - Math.round((y - event.localY) / 100) * 100; } else if (balcony.height > 100) { newHeight = balcony.height - Math.round((event.localY - y) / 100) * 100; y = y + Math.round((event.localY - y) / 100) * 100; } else { newHeight = balcony.height; } handlerBalcony(stage, balcony, floor); break; case 3: scaleRightTop.visible = false; scaleLeftTop.visible = false; scaleRightBottom.visible = false; scaleLeftBottom.visible = false; stage.removeChild(balcony); if (x + balcony.width < event.localX) { newWidth = Math.round((event.localX - x - balcony.width) / 100) * 100 + balcony.width; } else if (balcony.width > 100) { newWidth = balcony.width - Math.round((x + balcony.width - event.localX) / 100) * 100; } else { newWidth = balcony.width; } if (event.localY > floor.y + floor.height || event.localY < floor.y) { newHeight = balcony.height; } else if (y > event.localY) { newHeight = Math.round((y - event.localY) / 100) * 100 + balcony.height; y = y - Math.round((y - event.localY) / 100) * 100; } else if (balcony.height > 100) { newHeight = balcony.height - Math.round((event.localY - y) / 100) * 100; y = y + Math.round((event.localY - y) / 100) * 100; } else { newHeight = balcony.height; } handlerBalcony(stage, balcony, floor); break; case 4: scaleRightTop.visible = false; scaleLeftTop.visible = false; scaleRightBottom.visible = false; scaleLeftBottom.visible = false; stage.removeChild(balcony); if (event.localX < floor.x || event.localX > floor.x + floor.width) { newWidth = balcony.width; } else { newWidth = Math.round((event.localX - x) / 100) * 100; } newHeight = balcony.height; handlerBalcony(stage, balcony, floor); break; } }); scaleRightBottom.on('pressmove', function (event) { switch (pos) { case 1: scaleRightTop.visible = false; scaleLeftTop.visible = false; scaleRightBottom.visible = false; scaleLeftBottom.visible = false; stage.removeChild(balcony); if (event.localY > floor.y + floor.height || event.localY < floor.y) { newHeight = balcony.height; } else if (y + balcony.height < event.localY) { newHeight = Math.round((event.localY - y - balcony.height) / 100) * 100 + balcony.height; } else if (balcony.height > 100) { newHeight = balcony.height - Math.round((y + balcony.height - event.localY ) / 100) * 100; } else { newHeight = balcony.height; } handlerBalcony(stage, x, y, balcony.width, newHeight); break; case 2: scaleRightTop.visible = false; scaleLeftTop.visible = false; scaleRightBottom.visible = false; scaleLeftBottom.visible = false; stage.removeChild(balcony); if (event.localX < floor.x || event.localX > floor.x + floor.width) { newWidth = balcony.width; } else if (x + balcony.width < event.localX) { newWidth = Math.round((event.localX - x - balcony.width) / 100) * 100 + balcony.width; } else if (balcony.width > 100) { newWidth = balcony.width - Math.round((x + balcony.width - event.localX) / 100) * 100; } else { newWidth = balcony.width; } handlerBalcony(stage, x, y, newWidth, balcony.height); break; case 3: scaleRightTop.visible = false; scaleLeftTop.visible = false; scaleRightBottom.visible = false; scaleLeftBottom.visible = false; stage.removeChild(balcony); if (x + balcony.width < event.localX) { newWidth = Math.round((event.localX - x - balcony.width) / 100) * 100 + balcony.width; } else if (balcony.width > 100) { newWidth = balcony.width - Math.round((x + balcony.width - event.localX) / 100) * 100; } else { newWidth = balcony.width; } if (event.localY > floor.y + floor.height || event.localY < floor.y) { newHeight = balcony.height; } else if (y + balcony.height < event.localY) { newHeight = Math.round((event.localY - y - balcony.height) / 100) * 100 + balcony.height; } else if (balcony.height > 100) { newHeight = balcony.height - Math.round((y + balcony.height - event.localY ) / 100) * 100; } else { newHeight = balcony.height; } handlerBalcony(stage, balcony, floor); break; case 4: scaleRightTop.visible = false; scaleLeftTop.visible = false; scaleRightBottom.visible = false; scaleLeftBottom.visible = false; stage.removeChild(balcony); if (event.localX < floor.x || event.localX > floor.x + floor.width) { newWidth = balcony.width; } else if (x + balcony.width < event.localX) { newWidth = Math.round((event.localX - x - balcony.width) / 100) * 100 + balcony.width; } else if (balcony.width > 100) { newWidth = balcony.width - Math.round((x + balcony.width - event.localX) / 100) * 100; } else { newWidth = balcony.width; } if (y + balcony.height < event.localY) { newHeight = Math.round((event.localY - y - balcony.height) / 100) * 100 + balcony.height; } else if (balcony.height > 100) { newHeight = balcony.height - Math.round((y + balcony.height - event.localY ) / 100) * 100; } else { newHeight = balcony.height; } handlerBalcony(stage, balcony, floor); break; } }); scaleLeftBottom.on('pressmove', function (event) { switch (pos) { case 1: scaleRightTop.visible = false; scaleLeftTop.visible = false; scaleRightBottom.visible = false; scaleLeftBottom.visible = false; stage.removeChild(balcony); if (event.localY > floor.y + floor.height || event.localY < floor.y) { newHeight = balcony.height; } else if (y + balcony.height < event.localY) { newHeight = Math.round((event.localY - y - balcony.height) / 100) * 100 + balcony.height; } else if (balcony.height > 100) { newHeight = balcony.height - Math.round((y + balcony.height - event.localY ) / 100) * 100; } else { newHeight = balcony.height; } if (event.localX > floor.x || event.localX < 100) { newWidth = balcony.width; } else if (x > event.localX) { newWidth = Math.round((x - event.localX) / 100) * 100 + balcony.width; x = x - Math.round((x - event.localX) / 100) * 100; } else if (balcony.width > 100) { newWidth = balcony.width - Math.round((event.localX - x) / 100) * 100; x = x + Math.round((event.localX - x) / 100) * 100; } else { newWidth = balcony.width; } handlerBalcony(stage, balcony, floor); break; case 2: scaleRightTop.visible = false; scaleLeftTop.visible = false; scaleRightBottom.visible = false; scaleLeftBottom.visible = false; stage.removeChild(balcony); if (event.localX < floor.x || event.localX > floor.x + floor.width) { newWidth = balcony.width; } else if (x > event.localX) { newWidth = Math.round((x - event.localX) / 100) * 100 + balcony.width; x = x - Math.round((x - event.localX) / 100) * 100; } else if (balcony.width > 100) { newWidth = balcony.width - Math.round((event.localX - x) / 100) * 100; x = x + Math.round((event.localX - x) / 100) * 100; } else { newWidth = balcony.width; } handlerBalcony(stage, x, y, newWidth, balcony.height); break; case 3: scaleRightTop.visible = false; scaleLeftTop.visible = false; scaleRightBottom.visible = false; scaleLeftBottom.visible = false; stage.removeChild(balcony); if (event.localY > floor.y + floor.height || event.localY < floor.y) { newHeight = balcony.height; } else if (y + balcony.height < event.localY) { newHeight = Math.round((event.localY - y - balcony.height) / 100) * 100 + balcony.height; } else if (balcony.height > 100) { newHeight = balcony.height - Math.round((y + balcony.height - event.localY ) / 100) * 100; } else { newHeight = balcony.height; } handlerBalcony(stage, x, y, balcony.width, newHeight); break; case 4: scaleRightTop.visible = false; scaleLeftTop.visible = false; scaleRightBottom.visible = false; scaleLeftBottom.visible = false; stage.removeChild(balcony); if (y + balcony.height < event.localY) { newHeight = Math.round((event.localY - y - balcony.height) / 100) * 100 + balcony.height; } else if (balcony.height > 100) { newHeight = balcony.height - Math.round((y + balcony.height - event.localY ) / 100) * 100; } else { newHeight = balcony.height; } if (event.localX < floor.x || event.localX > floor.x + floor.width) { newWidth = balcony.width; } else if (x > event.localX) { newWidth = Math.round((x - event.localX) / 100) * 100 + balcony.width; x = x - Math.round((x - event.localX) / 100) * 100; } else if (balcony.width > 100) { newWidth = balcony.width - Math.round((event.localX - x) / 100) * 100; x = x + Math.round((event.localX - x) / 100) * 100; } else { newWidth = balcony.width; } handlerBalcony(stage, balcony, floor); break; } }); scaleLeftTop.on('pressmove', function (event) { switch (pos) { case 1: scaleRightTop.visible = false; scaleLeftTop.visible = false; scaleRightBottom.visible = false; scaleLeftBottom.visible = false; stage.removeChild(balcony); if (event.localY > floor.y + floor.height || event.localY < floor.y) { newHeight = balcony.height; } else if (y > event.localY) { newHeight = Math.round((y - event.localY) / 100) * 100 + balcony.height; y = y - Math.round((y - event.localY) / 100) * 100; } else if (balcony.height > 100) { newHeight = balcony.height - Math.round((event.localY - y) / 100) * 100; y = y + Math.round((event.localY - y) / 100) * 100; } else { newHeight = balcony.height; } if (event.localX > floor.x || event.localX < 100) { newWidth = balcony.width; } else if (x > event.localX) { newWidth = Math.round((x - event.localX) / 100) * 100 + balcony.width; x = x - Math.round((x - event.localX) / 100) * 100; } else if (balcony.width > 100) { newWidth = balcony.width - Math.round((event.localX - x) / 100) * 100; x = x + Math.round((event.localX - x) / 100) * 100; } else { newWidth = balcony.width; } handlerBalcony(stage, balcony, floor); break; case 2: scaleRightTop.visible = false; scaleLeftTop.visible = false; scaleRightBottom.visible = false; scaleLeftBottom.visible = false; stage.removeChild(balcony); if (event.localX < floor.x || event.localX > floor.x + floor.width) { newWidth = balcony.width; } else if (x > event.localX) { newWidth = Math.round((x - event.localX) / 100) * 100 + balcony.width; x = x - Math.round((x - event.localX) / 100) * 100; } else if (balcony.width > 100) { newWidth = balcony.width - Math.round((event.localX - x) / 100) * 100; x = x + Math.round((event.localX - x) / 100) * 100; } else { newWidth = balcony.width; } if (event.localY > floor.y || event.localY < 50) { newHeight = balcony.height; } else if (y > event.localY) { newHeight = Math.round((y - event.localY) / 100) * 100 + balcony.height; y = y - Math.round((y - event.localY) / 100) * 100; } else if (balcony.height > 100) { newHeight = balcony.height - Math.round((event.localY - y) / 100) * 100; y = y + Math.round((event.localY - y) / 100) * 100; } else { newHeight = balcony.height; } handlerBalcony(stage, x, y, newWidth, balcony.height); break; case 3: scaleRightTop.visible = false; scaleLeftTop.visible = false; scaleRightBottom.visible = false; scaleLeftBottom.visible = false; stage.removeChild(balcony); if (event.localY > floor.y + floor.height || event.localY < floor.y) { newHeight = balcony.height; } else if (y > event.localY) { newHeight = Math.round((y - event.localY) / 100) * 100 + balcony.height; y = y - Math.round((y - event.localY) / 100) * 100; } else if (balcony.height > 100) { newHeight = balcony.height - Math.round((event.localY - y) / 100) * 100; y = y + Math.round((event.localY - y) / 100) * 100; } else { newHeight = balcony.height; } handlerBalcony(stage, x, y, balcony.width, newHeight); break; case 4: scaleRightTop.visible = false; scaleLeftTop.visible = false; scaleRightBottom.visible = false; scaleLeftBottom.visible = false; stage.removeChild(balcony); if (event.localX < floor.x || event.localX > floor.x + floor.width) { newWidth = balcony.width; } else if (x > event.localX) { newWidth = Math.round((x - event.localX) / 100) * 100 + balcony.width; x = x - Math.round((x - event.localX) / 100) * 100; } else if (balcony.width > 100) { newWidth = balcony.width - Math.round((event.localX - x) / 100) * 100; x = x + Math.round((event.localX - x) / 100) * 100; } else { newWidth = balcony.width; } handlerBalcony(stage, x, y, newWidth, balcony.height); break; } }); } function moveBalconyToBorderLeft(event, floor, width, height) { console.log('ssssss'); if (event.stageY >= floor.y - height && event.stageY <= floor.y + floor.height) { event.currentTarget.y = event.stageY; } else if (event.stageY < floor.y - height) { event.currentTarget.y = floor.y - height; } else { event.currentTarget.y = floor.y + floor.height; } event.currentTarget.x = floor.x - width; stage.removeChild(scaleRightTop); stage.removeChild(scaleLeftTop); stage.removeChild(scaleRightBottom); stage.removeChild(scaleLeftBottom); drawScaleBalconyShape(stage, balcony, floor); stage.update(); } function moveBalconyToBorderTop(event, floor, width, height) { console.log('ssssss'); if (event.stageX >= floor.x - width && event.stageX <= floor.x + floor.width) { event.currentTarget.x = event.stageX; } else if (event.stageX < floor.x - width) { event.currentTarget.x = floor.x - width; } else { event.currentTarget.x = floor.x + floor.width; } event.currentTarget.y = floor.y - height; stage.removeChild(scaleRightTop); stage.removeChild(scaleLeftTop); stage.removeChild(scaleRightBottom); stage.removeChild(scaleLeftBottom); drawScaleBalconyShape(stage, balcony, floor); stage.update(); } function moveBalconyToBorderRight(event, floor, width, height) { console.log('ssssss'); if (event.stageY >= floor.y - height && event.stageY <= floor.y + floor.height) { event.currentTarget.y = event.stageY; } else if (event.stageY < floor.y - height) { event.currentTarget.y = floor.y - height; } else { event.currentTarget.y = floor.y + floor.height; } event.currentTarget.x = floor.x + floor.width; stage.removeChild(scaleRightTop); stage.removeChild(scaleLeftTop); stage.removeChild(scaleRightBottom); stage.removeChild(scaleLeftBottom); drawScaleBalconyShape(stage, balcony, floor); stage.update(); } function moveBalconyToBorderBottom(event, floor, width, height) { console.log('ssssss'); if (event.stageX >= floor.x - width && event.stageX <= floor.x + floor.width) { event.currentTarget.x = event.stageX; } else if (event.stageX < floor.x - width) { event.currentTarget.x = floor.x - width; } else { event.currentTarget.x = floor.x + floor.width; } event.currentTarget.y = floor.y + floor.height; stage.removeChild(scaleRightTop); stage.removeChild(scaleLeftTop); stage.removeChild(scaleRightBottom); stage.removeChild(scaleLeftBottom); drawScaleBalconyShape(stage, balcony, floor); stage.update(); } /** * Get position of mouse movement * Return 1, if move to border left * Return 2, if move to border top * Return 3, if move to border right * Return 4, if move to border bottom */ function getPositionToSetBalcony(floor, currentX, currentY, width, height) { if (currentX == floor.x - width && currentY < floor.y + floor.height && currentY > floor.y - width) { return 1; } else if (currentX < floor.x + floor.width && currentX > floor.x - width && currentY == floor.y - height) { return 2; } else if (currentX == floor.y + floor.width && currentY < floor.y + floor.height && currentY > floor.y - height) { return 3; } else if (currentX < floor.x + floor.width && currentX > floor.x - width && currentY == floor.y + floor.height) { return 4; } else if (currentX == floor.x - width && currentY == floor.y - height) { return 5; } else if (currentX == floor.x - width && currentY == floor.y + floor.height) { return 6; } else if (currentX == floor.x + floor.width && currentY == floor.y + floor.height) { return 7; } else if (currentX == floor.x + floor.width && currentY == floor.y - height) { return 8; } else { return 0; } }