var noIndex = 0, typeIndex = 1, dxyIndex = 2, objectIndex = 3; var widthPillar = 91; var padding = 50; var maxLengthOfWall = 1820; // 100pixel ~ 455mm var minLengthOfWall = 455; var wallLengthNextToAngle = 910; // ~ 910mm var markUpPillar; var pillarIndexStage = []; var listWallInStage = []; var b_point = []; var listInitPillar = []; /** * Draw wall from array3dCad */ function handleWallAndPillar(stage, zoom) { var offsetX = (910 - 910 * scale) * 100 / 455; var offsetY = (455 - 455 * scale) * 100 / 455; // create wall arrayPositionCanSetPillar = []; var array3dCadWall = getArray3dCadByType(TYPE_WALL); for (var i = 0; i < array3dCadWall.length; i++) { var xWall = array3dCadWall[i][dxyIndex][0]; var yWall = array3dCadWall[i][dxyIndex][1]; var widthWall = array3dCadWall[i][dxyIndex][2]; var heightWall = array3dCadWall[i][dxyIndex][3]; if (findPillarPosition(getPixelFromMm(xWall - widthPillar/2), getPixelFromMm(yWall - widthPillar/2) ) == null) { addPillarPosition(getPixelFromMm(xWall - widthPillar/2), getPixelFromMm(yWall - widthPillar/2)); } if (widthWall > heightWall) { // create wall that wall is top or bottom var wall = createWall(xWall, yWall - heightWall / 2, widthWall, heightWall, scale); stage.addChild(wall); listWallInStage.push(wall); // add to list position can set pillar var start = xWall + minLengthOfWall; while (start < xWall + widthWall) { var xPillar = getPixelFromMm(start) + offsetX; var yPillar = getPixelFromMm(yWall - heightWall / 2) + offsetY; if (findPillarPosition(xPillar, yPillar) == null) { addPillarPosition(xPillar, yPillar); } start = start + minLengthOfWall; } } else { // create wall that wall is left or right var wall = createWall(xWall - widthWall / 2, yWall, widthWall, heightWall); stage.addChild(wall); listWallInStage.push(wall); // add to list position can set pillar var start = yWall + minLengthOfWall; while (start < yWall + heightWall) { var xPillar = getPixelFromMm(xWall - widthWall / 2) + offsetX; var yPillar = getPixelFromMm(start) + offsetY; if (findPillarPosition(xPillar, yPillar) == null) { addPillarPosition(xPillar, yPillar); } start = start + minLengthOfWall; } } } for (var i = 0; i < wallInBalcony.length; i++) { var xWall = wallInBalcony[i][dxyIndex][0]; var yWall = wallInBalcony[i][dxyIndex][1]; var widthWall = wallInBalcony[i][dxyIndex][2]; var heightWall = wallInBalcony[i][dxyIndex][3]; if (widthWall > heightWall) { // add to list position can set pillar var start = xWall + minLengthOfWall; while (start < xWall + widthWall) { var xPillar = getPixelFromMm(start) + offsetX; var yPillar = getPixelFromMm(yWall - heightWall / 2) + offsetY; if (findPillarPosition(xPillar, yPillar) == null) { addPillarPosition(xPillar, yPillar); } start = start + minLengthOfWall; } } else { // add to list position can set pillar var start = yWall + minLengthOfWall; while (start < yWall + heightWall) { var xPillar = getPixelFromMm(xWall - widthWall / 2) + offsetX; var yPillar = getPixelFromMm(start) + offsetY; if (findPillarPosition(xPillar, yPillar) == null) { addPillarPosition(xPillar, yPillar); } start = start + minLengthOfWall; } } } // create pillar addPillarToValidPosition(stage); // event click to wall stage.on("mousedown", function (event) { clickFloorBorder(event); }); // event mouse over wall stage.addEventListener("mouseover", function (event) { mouseOverWall(event); }); } function addWallPillarEvent() { // event click to wall stage.on("mousedown", function (event) { clickFloorBorder(event); }); // event mouse over wall stage.addEventListener("mouseover", function (event) { mouseOverWall(event); }); } function mouseOverWall(event) { if (transitionState < STATE_TRANSITION_SET_PILLAR) return; if (!isChoose) { var absoluteX = event.localX; var absoluteY = event.localY; // Check object is not overlap to others if(checkOverlapObjectWithPos(absoluteX , absoluteY , converMMtoPXWithScalenZoom( widthPillar ), converMMtoPXWithScalenZoom( widthPillar ) ) == true) return; var pillarPosition = findPillarPosition(absoluteX, absoluteY); if (pillarPosition != null) { var mmPillarX = pillarPosition[0]; // pixcel var mmPillarY = pillarPosition[1]; // pixcel var mmPillarWidth = getPixelFromMm(widthPillar); if (getByTypeAndXY(TYPE_PILLAR, mmPillarX * 455 / 100 / scale, mmPillarY * 455 / 100 / scale) == null) { if (markUpPillar == null) { var g = new createjs.Graphics().setStrokeStyle(2).beginStroke('#EE1122').drawRect(0, 0, mmPillarWidth, mmPillarWidth); markUpPillar = new createjs.Shape(g); } markUpPillar.x = mmPillarX - mmPillarWidth / 2; markUpPillar.y = mmPillarY - mmPillarWidth / 2; stage.addChild(markUpPillar); stage.update(); } } else { if (markUpPillar != null) { stage.removeChild(markUpPillar); stage.update(); markUpPillar = null; } } } } /** * Handler event click to wall to set pillar */ function clickFloorBorder(event) { if (transitionState < STATE_TRANSITION_SET_PILLAR) return; if (!isChoose) { var absoluteX = event.localX; var absoluteY = event.localY; // Check object is not overlap to others if(checkOverlapObjectWithPos(absoluteX , absoluteY , converMMtoPXWithScalenZoom( widthPillar ), converMMtoPXWithScalenZoom( widthPillar ) ) == true) return; var pillarPosition = findPillarPosition(absoluteX, absoluteY); if (pillarPosition != null) { var mmPillarX = pillarPosition[0]; // pixcel var mmPillarY = pillarPosition[1]; // pixcel var mmPillarWidth = getPixelFromMm(widthPillar); if (getByTypeAndXY(TYPE_PILLAR, converPxtoMmWithScalenZoom(mmPillarX - mmPillarWidth / 2), converPxtoMmWithScalenZoom(mmPillarY - mmPillarWidth / 2)) == null) { var currentPillar = createPillarWithPixel(mmPillarX - mmPillarWidth / 2, mmPillarY - mmPillarWidth / 2, mmPillarWidth); stage.addChild(currentPillar); setArray3dCad(null, TYPE_PILLAR, converPxtoMmWithScalenZoom(mmPillarX - mmPillarWidth / 2), converPxtoMmWithScalenZoom(mmPillarY - mmPillarWidth / 2), widthPillar, widthPillar, 0, 0, 0, 0, 0, 0); pillarIndexStage.push(currentPillar); stage.update(); // only valid if state is less than 1 // setTransitionState(STATE_TRANSITION_SET_PILLAR); isZoom = 1; isRoof2D = 0; //var homePage = new lib._3dhouse(); //var incBtn = homePage.instance_1; //console.log(incBtn); //incBtn.removeEventListener('click', incZoom); //var desBtn = homePage.instance; //desBtn.removeEventListener('click', desZoom); //if (!opacityShape) { // opacityShape = new createjs.Shape(); // opacityShape.graphics.setStrokeStyle(padding).beginStroke('#000000').beginFill('#FFFFFF') // .moveTo(0, 0).lineTo(259.6, 0).lineTo(259.6, 102.6).lineTo(0, 102.6).lineTo(0, 0); // opacityShape.x = 1019.45; // opacityShape.y = 727.2; // opacityShape.alpha = 0.5; // stage.addChild(opacityShape); //} //diablog(stage, ' 柱を立ててください'); } } } } /** * Handler event click button [Pillar] in left menu */ function addPillarToValidPosition(stage) { var array3dCadWall = getArray3dCadByType(TYPE_WALL); listInitPillar = []; for (var t = 0; t < wallInBalcony.length; t++) { array3dCadWall.push(wallInBalcony[t]); } for (var i = 0; i < array3dCadWall.length; i++) { var xWall = array3dCadWall[i][dxyIndex][0]; var yWall = array3dCadWall[i][dxyIndex][1]; var widthWall = array3dCadWall[i][dxyIndex][2]; var heightWall = array3dCadWall[i][dxyIndex][3]; var offsetX = 0, offsetY = 0; if (widthWall > heightWall) { offsetX = widthWall; offsetY = 0; } else { offsetX = 0; offsetY = heightWall; } // add pillar to all angle if (getByTypeAndXY(TYPE_PILLAR, xWall - widthPillar / 2, yWall - widthPillar / 2) == null) { addPillarToStage(stage, xWall - widthPillar / 2, yWall - widthPillar / 2, widthPillar); } if (getByTypeAndXY(TYPE_PILLAR, xWall + offsetX - widthPillar / 2, yWall + offsetY - widthPillar / 2) == null) { addPillarToStage(stage, xWall + offsetX - widthPillar / 2, yWall + offsetY - widthPillar / 2, widthPillar); } // set pillar follow by some rule var currentLength = offsetX > 0 ? offsetX : offsetY; var indexX = 0, indexY = 0; if (widthWall > heightWall) { indexX = 1; } else { indexY = 1; } var pixelToSet1820 = currentLength - wallLengthNextToAngle * 2; if (pixelToSet1820 == 0) { // wall length is 1820mm => set a pillar to center of wall var pillarX = xWall + indexX * offsetX / 2 - widthPillar / 2; var pillarY = yWall + indexY * offsetY / 2 - widthPillar / 2; if(checkOverlapObjectWithPos( converMMtoPXWithScalenZoom(pillarX), converMMtoPXWithScalenZoom(pillarY), converMMtoPXWithScalenZoom(widthPillar), converMMtoPXWithScalenZoom(widthPillar) ) == false) { console.log("pillarX: "+ pillarX); console.log("pillarY: "+ pillarY); if (getByTypeAndXY(TYPE_PILLAR, xWall + indexX * offsetX / 2 - widthPillar / 2, yWall + indexY * offsetY / 2 - widthPillar / 2) == null) { addPillarToStage(stage, xWall + indexX * offsetX / 2 - widthPillar / 2, yWall + indexY * offsetY / 2 - widthPillar / 2, widthPillar); } } } else if (pixelToSet1820 > 0) { // wall length is greater than 1820mm var numberOfWall1820 = parseInt(pixelToSet1820 / maxLengthOfWall); var remainPixelAfterSet1820 = pixelToSet1820 - numberOfWall1820 * maxLengthOfWall; var newLength = wallLengthNextToAngle; if (remainPixelAfterSet1820 == minLengthOfWall) { newLength = wallLengthNextToAngle + remainPixelAfterSet1820; pixelToSet1820 = pixelToSet1820 - remainPixelAfterSet1820; } // add pillar next to angle (primary pillar) var pillarX = xWall + indexX * newLength - widthPillar / 2; var pillarY = yWall + indexY * newLength - widthPillar / 2; if(checkOverlapObjectWithPos( converMMtoPXWithScalenZoom(pillarX), converMMtoPXWithScalenZoom(pillarY), converMMtoPXWithScalenZoom(widthPillar), converMMtoPXWithScalenZoom(widthPillar) ) == false) { if (getByTypeAndXY(TYPE_PILLAR, xWall + indexX * newLength - widthPillar / 2, yWall + indexY * newLength - widthPillar / 2) == null) { addPillarToStage(stage, xWall + indexX * newLength - widthPillar / 2, yWall + indexY * newLength - widthPillar / 2, widthPillar); } } pillarX = xWall + indexX * (offsetX - wallLengthNextToAngle) - widthPillar / 2; pillarY = yWall + indexY * (offsetY - wallLengthNextToAngle) - widthPillar / 2; if(checkOverlapObjectWithPos( converMMtoPXWithScalenZoom(pillarX), converMMtoPXWithScalenZoom(pillarY), converMMtoPXWithScalenZoom(widthPillar), converMMtoPXWithScalenZoom(widthPillar) ) == false) { if (getByTypeAndXY(TYPE_PILLAR, xWall + indexX * (offsetX - wallLengthNextToAngle) - widthPillar / 2, yWall + indexY * (offsetY - wallLengthNextToAngle) - widthPillar / 2) == null) { addPillarToStage(stage, xWall + indexX * (offsetX - wallLengthNextToAngle) - widthPillar / 2, yWall + indexY * (offsetY - wallLengthNextToAngle) - widthPillar / 2, widthPillar); } } // draw pillar that distance with primary pillar is 1820mm (secondary pillar) while (pixelToSet1820 > maxLengthOfWall) { // set pillar from start to end of wall pillarX = xWall + indexX * (wallLengthNextToAngle + maxLengthOfWall) - widthPillar / 2; pillarY = yWall + indexY * (wallLengthNextToAngle + maxLengthOfWall) - widthPillar / 2; if(checkOverlapObjectWithPos( converMMtoPXWithScalenZoom(pillarX), converMMtoPXWithScalenZoom(pillarY), converMMtoPXWithScalenZoom(widthPillar), converMMtoPXWithScalenZoom(widthPillar) ) == false) { console.log("pillarX1: "+ pillarX); console.log("pillarY1: "+ pillarY); if (getByTypeAndXY(TYPE_PILLAR, pillarX, pillarY) == null) { addPillarToStage(stage, pillarX, pillarY, widthPillar); } } pixelToSet1820 = pixelToSet1820 - maxLengthOfWall; if (pixelToSet1820 > maxLengthOfWall) { // set pillar from end to start of wall pillarX = xWall + indexX * (offsetX - wallLengthNextToAngle - maxLengthOfWall) - widthPillar / 2; pillarY = yWall + indexY * (offsetY - wallLengthNextToAngle - maxLengthOfWall) - widthPillar / 2; if(checkOverlapObjectWithPos( converMMtoPXWithScalenZoom(pillarX), converMMtoPXWithScalenZoom(pillarY), converMMtoPXWithScalenZoom(widthPillar), converMMtoPXWithScalenZoom(widthPillar) ) == false) { console.log("pillarX2: "+ pillarX); console.log("pillarY2: "+ pillarY); if (getByTypeAndXY(TYPE_PILLAR, pillarX, pillarY) == null) { addPillarToStage(stage, pillarX, pillarY, widthPillar); } pixelToSet1820 = pixelToSet1820 - maxLengthOfWall; } } } } else { // wall length is smaller than 1820mm => Do not set pillar to this wall } } addPillarBesideObjectInWall(); // update stage stage.update(); } function addPillarBesideObjectInWall() { for( var i = 0; i < arrObjectInWall.length; i++) { if(arrObjectInWall[i].width > arrObjectInWall[i].height) { createPillarNextToObjectLeftRight(arrObjectInWall[i]); } else { createPillarNextToObjectTopBottom(arrObjectInWall[i]); } } } /** * Check clicked position is valid position to set pillar or not */ function validateClickedPosition(length) { var number = parseInt(length / getPixelFromMm(minLengthOfWall)); var remainLength = length - number * getPixelFromMm(minLengthOfWall); if (remainLength <= padding * scale) { return true; } return false; } /** * Create wall object */ function createWall(x, y, width, height) { // var offsetX = (910 - 910 * scale) * 100 / 455; // var offsetY = (455 - 455 * scale) * 100 / 455; x = getPixelFromMm(x); y = getPixelFromMm(y); width = getPixelFromMm(width); height = getPixelFromMm(height); var g = new createjs.Graphics().beginStroke('#974E0B').beginFill("#974E0B").drawRect(0, 0, width, height); var wall = new createjs.Shape(g); wall.x = x; wall.y = y; return wall; } /** * Create pillar */ function createPillar(x, y, width) { // var offsetX = (910 - 910 * scale) * 100 / 455; // var offsetY = (455 - 455 * scale) * 100 / 455; x = getPixelFromMm(x); y = getPixelFromMm(y); width = getPixelFromMm(width); var g = new createjs.Graphics().beginFill('#5C9FD4').drawRect(0, 0, width, width); var pillar = new createjs.Shape(g); pillar.x = x; pillar.y = y; return pillar; } function createPillarWithPixel(x, y, width) { var g = new createjs.Graphics().beginFill('#5C9FD4').drawRect(0, 0, width, width); var pillar = new createjs.Shape(g); pillar.x = x; pillar.y = y; pillar.on("mousedown", function (evt) { pillarOnClick(evt, this.x, this.y); }); return pillar; } function addPillarToStage(stage, x, y, width) { var pillar = createPillar(x, y, width); stage.addChild(pillar); setArray3dCad(null, TYPE_PILLAR, x, y, width, width, 0, 0, 0, 0, 0, 0); pillarIndexStage.push(pillar); pillar.on("mousedown", function (evt) { b_point['x'] = evt.stageX; b_point['y'] = evt.stageY; pillarOnClick(evt, this.x, this.y); }); } function getPixelFromMm(mmValue) { return parseInt(mmValue * zoom * scale * 100 / 455); } function pillarOnClick(evt, x, y) { // Remove pillar //var pillar = evt.target; //var x = converPxtoMmWithScalenZoom(pillar.x); //var y = converPxtoMmWithScalenZoom(pillar.y); // //// Delete pillar // //stage.removeChild(pillar); // //// remove pillar from memory //var pillar3d = getByTypeAndXY(TYPE_PILLAR, x, y)); //if (pillar3d != null) { // deleteArray3dCad(pillar3d[0][0]); //} // //var pillarNextToObjIndex = findPillarNextToObject(pillarIndexStage[i]); //if( pillarNextToObjIndex >= pillarNextToObjectList.length) //{ // // pillarNextToObjectList.splice(pillarNextToObjIndex, 1); //} //var floor_info = getArray3dCadByType(TYPE_FLOOR); //floor_info = floor_info[0]; //if ((x) <= getPixelFromMm(floor_info[2][0] + 45) && (x) >= getPixelFromMm(floor_info[2][0] - 45) && y <= getPixelFromMm(floor_info[2][1] + 45) && y >= getPixelFromMm(floor_info[2][1] - 45)) { // return; //} //if (x <= getPixelFromMm(floor_info[2][0] + 45) && x >= getPixelFromMm(floor_info[2][0] - 45) && y >= getPixelFromMm(floor_info[2][1] - 45) && y <= getPixelFromMm(floor_info[2][1] + floor_info[2][3] + 45)) { // console.log('canh trai'); // drawWallInFloor(x, y, floor_info, 'left'); //} //if (x <= getPixelFromMm(floor_info[2][0] + floor_info[2][2] + 45) && x >= getPixelFromMm(floor_info[2][0] + floor_info[2][2] - 45) && y >= getPixelFromMm(floor_info[2][1] - 45) && y <= getPixelFromMm(floor_info[2][1] + floor_info[2][3] + 45)) { // console.log('canh phai'); // drawWallInFloor(x, y, floor_info, 'right'); //} //if (x <= getPixelFromMm(floor_info[2][0] + floor_info[2][2] + 45) && x >= getPixelFromMm(floor_info[2][0] - 45) && y >= getPixelFromMm(floor_info[2][1] - 45) && y <= getPixelFromMm(floor_info[2][1] + 45)) { // console.log('canh tren'); // drawWallInFloor(x, y, floor_info, 'top'); //} //if (x <= getPixelFromMm(floor_info[2][0] + floor_info[2][2] + 45) && x >= getPixelFromMm(floor_info[2][0] - 45) && y >= getPixelFromMm(floor_info[2][1] + floor_info[2][3] - 45) && y <= getPixelFromMm(floor_info[2][1] + floor_info[2][3] + 45)) { // console.log('canh duoi'); // drawWallInFloor(x, y, floor_info, 'bottom'); //} } function drawWallInFloor(x, y, floor_info, position) { var g; var isDraw = true; var width, height; g = new createjs.Shape(); y = y + getPixelFromMm(45); x = x + getPixelFromMm(45); stage.on('stagemousemove', function (evt) { if (isDraw) { if (position == 'left') { // if var diff = evt.stageX - b_point['x']; if (diff <= 0) { diff = 0; } if (diff >= floor_info[2][0] + floor_info[2][2]) { diff = getPixelFromMm(floor_info[2][0] + floor_info[2][2]); } if (g) stage.removeChild(g); width = (diff) * 455 / 100; width = Math.floor(width / 455) * 455; height = 18; g = createWall(x * 455 / 100, y * 455 / 100, width, height); stage.addChild(g); } if (position == 'right') { // if var diff = b_point['x'] - evt.stageX; if (diff <= 0) { diff = 0; } if (diff >= floor_info[2][0] + floor_info[2][2]) { diff = getPixelFromMm(floor_info[2][0] + floor_info[2][2]); } if (g) stage.removeChild(g); width = (diff) * 455 / 100; width = Math.floor(width / 455) * 455; height = 18; g = createWall((x) * 455 / 100 - width, y * 455 / 100, width, height); stage.addChild(g); } if (position == 'top') { // if var diff = evt.stageY - b_point['y']; if (diff <= 0) { diff = 0; } if (diff >= floor_info[2][1] + floor_info[2][3]) { diff = getPixelFromMm(floor_info[2][1] + floor_info[2][3]); } if (g) stage.removeChild(g); height = (diff) * 455 / 100; height = Math.floor(height / 455) * 455; width = 18; g = createWall(x * 455 / 100, y * 455 / 100, width, height); stage.addChild(g); } if (position == 'bottom') { // if var diff = b_point['y'] - evt.stageY; if (diff <= 0) { diff = 0; } if (diff >= floor_info[2][1] + floor_info[2][3]) { diff = getPixelFromMm(floor_info[2][1] + floor_info[2][3]); } if (g) stage.removeChild(g); height = (diff) * 455 / 100; height = Math.floor(height / 455) * 455; width = 18; g = createWall(x * 455 / 100, y * 455 / 100 - height, width, height); stage.addChild(g); } } }); stage.on('stagemouseup', function () { isDraw = false; listWallInStage.push(g); stage.update; createArray3dCad(10, null, 3, g.x * 455 / 100, g.y * 455 / 100, width, height); }); } /** * Get position of clicked * Return 1, if clicked to border top * Return 2, if clicked to border right * Return 3, if clicked to border bottom * Return 4, if clicked to border left * @param x * @param y * @param width width of floor * @param height height of floor * @param clickedX x value of point that user clicked * @param clickedY y value of point that user clicked */ function getPositionToSetPillar(x, y, width, height, clickedX, clickedY) { if (x < clickedX && clickedX < x + width && Math.abs(y - clickedY) <= padding) { return 1; } else if (Math.abs(x + width - clickedX) <= padding && y < clickedY && clickedY < y + height) { return 2; } else if (x < clickedX && clickedX < x + width && Math.abs(y + height - clickedY) <= padding) { return 3; } else if (Math.abs(x - clickedX) <= padding && y < clickedY && clickedY < y + height) { return 4; } else { return 0; } }