Skip to content

Commit

Permalink
Added two basic features
Browse files Browse the repository at this point in the history 
1. Delete shape
2. Click-and-drag drawing
3. Ctrl+Z is even more bugged
  • Loading branch information
@dip000
dip000 committed Feb 11, 2022
1 parent 4cdbad8 commit c7b821b
Show file tree
Hide file tree
Showing 5 changed files with 159 additions and 58 deletions.
7 changes: 7 additions & 0 deletions MapBuilderForWeb/BuilderCalculations.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -163,6 +163,13 @@
return stat;
}

function randomColor(){
return 'rgb('+random(200)+','+(random(155)+100)+','+random(200)+')';
}
function random(number){
return Math.floor(Math.random()*number);;
}

function AverageVolume(coordenates){
let average = {x:0, y:0};
for(let i=0; i<coordenates.x.length; i++){
Expand Down
26 changes: 20 additions & 6 deletions MapBuilderForWeb/BuilderVisuals.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@

var previusCoordenates;
let value = "646970303030";
var isClicking = false;

function AddHoverListenerToElements(elements){
for(let i=0; i<elements.length; i++){
Expand All @@ -15,20 +16,33 @@

positionX.innerHTML = currentItemPlacingInfo.positionX;
positionY.innerHTML = currentItemPlacingInfo.positionY;



printHoverVisuals();
printHoverShapeVisuals();

//If user is clicking, act hovering as clicking constantly
if(isClicking){
if(isShapeEditorActive)
PlaceDotAtPoint(currentItemPlacingInfo.positionX, currentItemPlacingInfo.positionY);
else
PlaceItemAtCurrentItemInfo();

//console.log("isClicking: " + isClicking + "; isShapeEditorActive:" + isShapeEditorActive);
}


}, false);
}
}

function AddClickListenerToElement(element, callback){
element.addEventListener('click', function(e) {
console.log("Clicked at: " + e.target.parentElement.rowIndex + "," + e.target.cellIndex);
element.addEventListener('mousedown', function(e) {
//console.log("Clicked at: " + e.target.parentElement.rowIndex + "," + e.target.cellIndex);
let x = e.target.parentElement.rowIndex;
let y = e.target.cellIndex;
topValue.innerHTML = getStatisticsTopValue(value);

isClicking = true;;

if(x == null || y == null) return;
callback(x, y);
Expand All @@ -45,8 +59,8 @@
rot = -90;
}

console.log("SCROLL EVENT. rotation to: " + rot);
console.log(currentItemPlacingInfo);
//console.log("SCROLL EVENT. rotation to: " + rot);
//console.log(currentItemPlacingInfo);
currentItemPlacingInfo.rotation = (rot+currentItemPlacingInfo.rotation)%360;

rotation.innerHTML = currentItemPlacingInfo.rotation;
Expand Down
30 changes: 15 additions & 15 deletions MapBuilderForWeb/MapBuilder.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
else{
delete shapeCoordenates[x+","+y];
}
console.log(shapeCoordenates);
//console.log(shapeCoordenates);
}


Expand All @@ -19,14 +19,14 @@
try{
for(var i=0; i<coordenates.x.length; i++){
if(occupancyMap[coordenates.x[i]][coordenates.y[i]] == OCCUPIED){
console.log("Coordenates are occupied:");
console.log(coordenates);
//console.log("Coordenates are occupied:");
//console.log(coordenates);
return OCCUPIED;
}
}
} catch {return OCCUPIED;}
console.log("Coordenates are unoccupied:");
console.log(coordenates);
//console.log("Coordenates are unoccupied:");
//console.log(coordenates);
return FREE;
}

Expand All @@ -37,31 +37,31 @@
occupancyMap[coordenates.x[i]][coordenates.y[i]] = OCCUPIED;
}

console.log("UPDATED OCCUPANCY MAP:");
console.log(occupancyMap);
//console.log("UPDATED OCCUPANCY MAP:");
//console.log(occupancyMap);
}

var historyOfPlacements = [];
var historyIndex = 0;
function RegisterHistoryOfPlacements(itemPlacingInfo){
itemPlacingInfo.indexInHistory = historyIndex;
historyOfPlacements[historyIndex++] = new ItemPlacingInfo(itemPlacingInfo);
console.log("Registered in history. History:");
console.log(historyOfPlacements);
//console.log("Registered in history. History:");
//console.log(historyOfPlacements);
}

function DeleteFromHistoryOfPlacements(itemPlacingInfo){
historyOfPlacements[itemPlacingInfo.indexInHistory].undoFromHistory();
console.log("Undone from history. History:");
console.log(historyOfPlacements);
//console.log("Undone from history. History:");
//console.log(historyOfPlacements);
}

function UndoActionFromHistory(itemPlacingInfo){
if(itemPlacingInfo == null) return;

itemPlacingInfo.deleted = ! (itemPlacingInfo.deleted);
console.log("Undone Last action from history. History:");
console.log(historyOfPlacements);
//console.log("Undone Last action from history. History:");
//console.log(historyOfPlacements);

if(itemPlacingInfo.deleted == true){
return ActionTypes.deleted;
Expand Down Expand Up @@ -206,7 +206,7 @@
let test = chainedUndoneIndex + direction + historyIndex;
if(test > historyIndex || test < 0 ) return;
chainedUndoneIndex += direction;
console.log("Undone direction: " + direction + "; undone index: " + chainedUndoneIndex + "; global position: " + (historyIndex + chainedUndoneIndex))
//console.log("Undone direction: " + direction + "; undone index: " + chainedUndoneIndex + "; global position: " + (historyIndex + chainedUndoneIndex))

let itemPlacingInfo = GetInformationFromHistoryIndex(historyIndex + chainedUndoneIndex);
if(itemPlacingInfo == null) return;
Expand Down Expand Up @@ -249,7 +249,7 @@ function Vector2Array(x, y) {
this.y = [];
}
else{
console.error("Constructor of Vector2Array did not found an overload for input");
//console.error("Constructor of Vector2Array did not found an overload for input");
}
}

Expand Down
86 changes: 57 additions & 29 deletions MapBuilderForWeb/MapBuilderForWeb.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,11 @@
"Wall",
"Corner Wall"
];
var listOfShapeColors = [
randomColor(),
randomColor(),
randomColor(),
];

//Keeps track on real time what's happening
var currentItemPlacingInfo = new ItemPlacingInfo();
Expand All @@ -83,7 +88,10 @@
//Initialize Shapes editor
initializeShapesEditorGrid(10, 10);
initializeShapesEditorMenu();


document.addEventListener('dragstart', (e) => {
e.preventDefault()
})

//Starts showing map editor while hidning shapes editor
GoToMapEditor();
Expand Down Expand Up @@ -112,6 +120,7 @@

AddClickListenerToElement(table, OnGridClick );
AddListenerToScrollWheel(table);
document.addEventListener('mouseup', function(e) { isClicking = false; });
}

function initializeMapEditorMenu(){
Expand All @@ -133,29 +142,40 @@
function initializeMapEditorShapes(shapeStartIndex=0){
let itemsArea = document.getElementById('itemsArea');

let fixedSizeOfShape = 6;
let cellSize = 1;
const fixedSizeOfShape = 6;
const cellSize = 0.1;

for(let i=0; i<listOfShapes.length; i++){

//Skip nulled shapes
if(listOfShapes[i] == null) continue;

let maxValue = GetMaxValueOfCoordenates(listOfShapes[i]);
let marginValue = maxValue + 3;
let sizeFactor = fixedSizeOfShape / (cellSize*marginValue);
console.log("maxValue:"+maxValue+"; sizeFactor:"+sizeFactor);
//console.log("maxValue:"+maxValue+"; sizeFactor:"+sizeFactor);

let item = generate_table(marginValue, marginValue, 10*sizeFactor);
let item = generate_table(marginValue, marginValue, sizeFactor);
//item.style.transform = "scale("+sizeFactor+")";

let textNode = document.createTextNode(listOfShapeNames[i]);
item.appendChild(textNode);

item.className = "item";

//Delete Icon
let deleteIcon = document.createElement("i");
textNode = document.createTextNode("delete");
deleteIcon.className = "material-icons deleteIcon";
deleteIcon.appendChild(textNode);
item.appendChild(deleteIcon);
deleteIcon.addEventListener('click', function(){ DeleteShape(i); } );

//Add functionality to item shape
itemsArea.appendChild( item );
item.addEventListener('click', function(){ ChangeItem(i); } );

let coordenates = GlobalizeCoordenates( listOfShapes[i] , 1, 1);
printVisualsOfCoordenatesOnTable(coordenates, itemShowcaseColor, item);
printVisualsOfCoordenatesOnTable(coordenates, listOfShapeColors[i], item);

shapeElements[i] = item;
}
Expand Down Expand Up @@ -225,8 +245,8 @@

occupancyMap = Array(mapLengthX).fill(null).map(()=>Array(mapLengthY).fill(false));

console.log("DELETED MAP INFO:");
console.log(formatedCoordenates);
//console.log("DELETED MAP INFO:");
//console.log(formatedCoordenates);
}

function HideMapEditor(){
Expand All @@ -243,20 +263,23 @@
//Creates an object {[x],[y]} where x and y are integrers
var clickedCoordenate = new Vector2Array(x, y);

if ( GetOccupancyOfCoordenates(clickedCoordenate) == OCCUPIED ){
let itemPlacingInfo = FindHistoryInfoAtCoordenates(clickedCoordenate);
console.log("Clicked on an item. Placing info:");
console.log(itemPlacingInfo);
DeleteFromHistoryOfPlacements(itemPlacingInfo);
printVisualsOfCoordenates(itemPlacingInfo.coordenates, clearedGridColor);
UpdateOccupancy(itemPlacingInfo.coordenates, FREE);
if ( GetOccupancyOfCoordenates(clickedCoordenate) == OCCUPIED){
RemoveItemAtCoordenate(clickedCoordenate);
}
else{
console.log("Clicked on empty space");
//console.log("Clicked on empty space");
PlaceItemAtCurrentItemInfo();
}
}

function RemoveItemAtCoordenate(clickedCoordenate){
let itemPlacingInfo = FindHistoryInfoAtCoordenates(clickedCoordenate);
//console.log("Clicked on an item. Placing info:");
//console.log(itemPlacingInfo);
DeleteFromHistoryOfPlacements(itemPlacingInfo);
printVisualsOfCoordenates(itemPlacingInfo.coordenates, clearedGridColor);
UpdateOccupancy(itemPlacingInfo.coordenates, FREE);
}

//Sooo. i know is confusing but here goes:
// 1. Average volume of an object is its center position. Not the bounding box center
Expand All @@ -283,35 +306,40 @@
currentItemPlacingInfo.positionX = minValues.x;
currentItemPlacingInfo.positionY = minValues.y;

console.log(averageVolume);
console.log(roundedAverageVolume);
console.log(volumeIndex);
//console.log(averageVolume);
//console.log(roundedAverageVolume);
//console.log(volumeIndex);

if(GetOccupancyOfCoordenates(coordenates) == FREE){
console.log("CorrectPlacement");
printVisualsOfCoordenates(coordenates, itemPlacedColor);
//console.log("CorrectPlacement");
printVisualsOfCoordenates(coordenates, listOfShapeColors[currentItemPlacingInfo.itemType]);
UpdateOccupancy(coordenates, OCCUPIED);
RegisterHistoryOfPlacements(currentItemPlacingInfo);
}
else{
console.log("Incorrect Placement");
//console.log("Incorrect Placement");
}

console.log("END OF PLACEMENT");
console.log(coordenates);
//console.log("END OF PLACEMENT");
//console.log(coordenates);
}

var lastShapeElement;
function ChangeItem(itemIndex){
console.log(shapeElements);

if(itemIndex > listOfShapes.length-1)
itemIndex = listOfShapes.length-1;

console.log("new itemIndex:" + itemIndex);
//console.log(shapeElements);
currentItemPlacingInfo.itemType = itemIndex;
itemType.innerHTML = currentItemPlacingInfo.itemType;

lastShapeElement.style.backgroundColor = itemDefaultColor;
shapeElements[itemIndex].style.backgroundColor = itemSelectedColor;
lastShapeElement = shapeElements[itemIndex];

console.log("Item changed to type: " + itemIndex);
//console.log("Item changed to type: " + itemIndex);
}


Expand All @@ -320,8 +348,8 @@
let outputData = JSON.stringify( formatCoordenates() );
let ouputShapes = formatShapes();

console.log("DOWNLOADED:");
console.log(outputData);
//console.log("DOWNLOADED:");
//console.log(outputData);
download("WebBuilderMap"+ ".json", outputData + "$" + ouputShapes);
}
/////////////////////////////////////////////////////////////////////////
Expand Down
Loading

0 comments on commit c7b821b

Please sign in to comment.