jewbird
/
asciibird
3
3
Fork 0
Code Issues Pull Requests Releases Activity

context menu bug fix

This commit is contained in:
Hugh Bord 2021-06-19 11:34:31 +10:00
parent 45e8babf11
commit 893083a308
5 changed files with 135 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
README.md
View File

@ -16,7 +16,6 @@
```
# BUGS
* Escape chars in asciis
* If you resize an ascii, and then undo and try fill in blocks it will error cuz the blocks don't exist
* Redo (ctrl y) is a buggy
# FOCUSING ON NOW
@ -26,8 +25,6 @@
* SELECT
* CLIPBOARD
* Circle brush
* Modals
* Edit current ascii
* Asciibird options
@ -37,7 +34,6 @@
* Context Menus (right click menu) - we started this
* Keyboard shortcuts
* Context menu / right click / browsers context menu issue
# KILLER ASCIIBIRD FEATURES DONE

8
src/Dashboard.vue
View File

@ -173,6 +173,7 @@ export default {
},
methods: {
openContextMenu(e) {
e.preventDefault();
this.$refs.menu.open(e);
},
updateCoords(value) {
@ -358,7 +359,7 @@ export default {
switch (curChar) {
case "\n":
// Reset the colours here on a new line
curBlock = {
curBlock = {
fg: null,
bg: null,
char: null,
@ -367,13 +368,12 @@ export default {
// the Y value of the ascii
asciiY++;
// We can determine the width at the end of the first line
// If for some reason like in aphex.txt the first line is
// trimmed it will trim the entire ascii!
// Calculate widths mirc asciis vs plain text
if (!finalAscii.width && widthOfColCodes > 0) {
finalAscii.width =
asciiImport.split("\n")[0].length - widthOfColCodes; // minus \n for the proper width
} else if (!finalAscii.width && widthOfColCodes === 0) {
// Plain text
finalAscii.width =
maxWidth; // minus \n for the proper width
}

195
src/components/parts/BrushPreview.vue
View File

@ -77,7 +77,7 @@ export default {
blocks: [],
brushSizeHeight: 1,
brushSizeWidth: 1,
brushSizeType: 'square',
brushSizeType: "square",
}),
computed: {
currentAscii() {
@ -87,57 +87,57 @@ export default {
return this.$store.getters.getToolbarState;
},
getTargetingBg() {
return this.$store.getters.getTargetingBg
return this.$store.getters.getTargetingBg;
},
getTargetingFg() {
return this.$store.getters.getTargetingFg
return this.$store.getters.getTargetingFg;
},
getTargetingChar() {
return this.$store.getters.getTargetingChar
return this.$store.getters.getTargetingChar;
},
getFgColour() {
return this.$store.getters.getFgColour
return this.$store.getters.getFgColour;
},
getBgColour() {
return this.$store.getters.getBgColour
return this.$store.getters.getBgColour;
},
getSelectedChar() {
return this.$store.getters.getSelectedChar
return this.$store.getters.getSelectedChar;
},
brushSizeHeightPreview() {
return this.$store.getters.brushSizeHeight
return this.$store.getters.brushSizeHeight;
},
brushSizeWidthPreview() {
return this.$store.getters.brushSizeWidth
return this.$store.getters.brushSizeWidth;
},
brushSizeTypePreview() {
return this.$store.getters.brushSizeType
return this.$store.getters.brushSizeType;
},
},
watch: {
brushSizeWidth() {
this.delayRedrawCanvas()
this.delayRedrawCanvas();
},
brushSizeHeight() {
this.delayRedrawCanvas()
this.delayRedrawCanvas();
},
getTargetingBg() {
this.delayRedrawCanvas()
this.delayRedrawCanvas();
},
getTargetingFg() {
this.delayRedrawCanvas()
this.delayRedrawCanvas();
},
getTargetingChar() {
this.delayRedrawCanvas()
this.delayRedrawCanvas();
},
getFgColour() {
this.delayRedrawCanvas()
this.delayRedrawCanvas();
},
getBgColour() {
this.delayRedrawCanvas()
this.delayRedrawCanvas();
},
getSelectedChar() {
this.delayRedrawCanvas()
this.delayRedrawCanvas();
},
},
methods: {
@ -150,7 +150,6 @@ export default {
this.ctx.clearRect(0, 0, 1000, 1000);
this.delayRedrawCanvas();
},
drawPreview() {
let brushHeight = this.brushSizeHeightPreview;
@ -184,76 +183,72 @@ export default {
char: null,
};
let middlePoint = Math.round(brushHeight / 2);
let startWidth = Math.round(brushWidth / 2);
// let checkWidth =
// Recreate 2d array for preview
for (y = 0; y < brushHeight; y++) {
this.blocks[y] = [];
for (x = 0; x < brushWidth; x++) {
switch(this.brushSizeTypePreview) {
case 'cross':
this.blocks[y][x] = Object.assign({}, emptyBlock);
switch (this.brushSizeTypePreview) {
case "cross":
this.blocks[y][x] = Object.assign({}, emptyBlock);
targetX = x;
if (y % 2 === 0) {
targetX = targetX - 1
}
targetX = targetX - 1;
}
if (this.blocks[y]) {
if (x % 2 === 0) {
this.blocks[y][targetX] = Object.assign({}, emptyBlock);
this.blocks[y][targetX] = Object.assign({}, emptyBlock);
} else {
this.blocks[y][targetX] = Object.assign({}, block);
}
}
break;
break;
default:
case 'square':
case "square":
this.blocks[y][x] = Object.assign({}, block);
break;
// case "circle":
// // Top half
// if (y < middlePoint) {
// if (x = brushWidth-1) {
// this.blocks[y][x] = Object.assign({}, block);
// } else {
// this.blocks[y][x] = Object.assign({}, emptyBlock);
// }
// } else {
// // Bottom half
// this.blocks[y][x] = Object.assign({}, block);
// }
// break;
}
}
}
}
// Get middle block
for (y = 0; y < this.blocks.length; y++) {
for (x = 0; x < this.blocks[0].length; x++) {
let curBlock = this.blocks[y][x];
if (this.blocks[y] && this.blocks[y][x]) {
let curBlock = this.blocks[y][x];
switch(this.brushSizeTypePreview) {
case 'cross':
if (curBlock.bg && this.getTargetingBg) {
this.ctx.fillStyle = this.$store.getters.mircColours[curBlock.bg];
this.ctx.fillRect(
x * BLOCK_WIDTH,
y * BLOCK_HEIGHT,
BLOCK_WIDTH,
BLOCK_HEIGHT
);
}
if (curBlock.fg && this.getTargetingFg) {
this.ctx.fillStyle = this.$store.getters.mircColours[curBlock.fg];
}
if (curBlock.char && this.getTargetingChar) {
this.ctx.fillStyle = this.$store.getters.mircColours[curBlock.fg];
this.ctx.fillText(
curBlock.char,
x * BLOCK_WIDTH - 1,
y * BLOCK_HEIGHT + BLOCK_HEIGHT - 3
);
}
break;
default:
case 'square':
switch (this.brushSizeTypePreview) {
case "cross":
if (curBlock.bg && this.getTargetingBg) {
this.ctx.fillStyle = this.$store.getters.mircColours[curBlock.bg];
this.ctx.fillStyle =
this.$store.getters.mircColours[curBlock.bg];
this.ctx.fillRect(
x * BLOCK_WIDTH,
@ -264,26 +259,88 @@ export default {
}
if (curBlock.fg && this.getTargetingFg) {
this.ctx.fillStyle = this.$store.getters.mircColours[curBlock.fg];
this.ctx.fillStyle =
this.$store.getters.mircColours[curBlock.fg];
}
if (curBlock.char && this.getTargetingChar) {
this.ctx.fillStyle = this.$store.getters.mircColours[curBlock.fg];
this.ctx.fillStyle =
this.$store.getters.mircColours[curBlock.fg];
this.ctx.fillText(
curBlock.char,
x * BLOCK_WIDTH - 1,
y * BLOCK_HEIGHT + BLOCK_HEIGHT - 3
);
}
break;
}
break;
// case "circle":
// if (curBlock.bg && this.getTargetingBg) {
// this.ctx.fillStyle =
// this.$store.getters.mircColours[curBlock.bg];
// this.ctx.fillRect(
// x * BLOCK_WIDTH,
// y * BLOCK_HEIGHT,
// BLOCK_WIDTH,
// BLOCK_HEIGHT
// );
// }
// if (curBlock.fg && this.getTargetingFg) {
// this.ctx.fillStyle =
// this.$store.getters.mircColours[curBlock.fg];
// }
// if (curBlock.char && this.getTargetingChar) {
// this.ctx.fillStyle =
// this.$store.getters.mircColours[curBlock.fg];
// this.ctx.fillText(
// curBlock.char,
// x * BLOCK_WIDTH - 1,
// y * BLOCK_HEIGHT + BLOCK_HEIGHT - 3
// );
// }
// break;
default:
case "square":
if (curBlock.bg && this.getTargetingBg) {
this.ctx.fillStyle =
this.$store.getters.mircColours[curBlock.bg];
this.ctx.fillRect(
x * BLOCK_WIDTH,
y * BLOCK_HEIGHT,
BLOCK_WIDTH,
BLOCK_HEIGHT
);
}
if (curBlock.fg && this.getTargetingFg) {
this.ctx.fillStyle =
this.$store.getters.mircColours[curBlock.fg];
}
if (curBlock.char && this.getTargetingChar) {
this.ctx.fillStyle =
this.$store.getters.mircColours[curBlock.fg];
this.ctx.fillText(
curBlock.char,
x * BLOCK_WIDTH - 1,
y * BLOCK_HEIGHT + BLOCK_HEIGHT - 3
);
}
break;
}
}
}
this.ctx.stroke();
this.$store.commit("brushBlocks", this.blocks)
this.$store.commit("brushBlocks", this.blocks);
}
},
delayRedrawCanvas() {

4
src/components/parts/ContextMenu.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="context-menu" v-show="show" :style="style" ref="context" tabindex="0" @blur="close">
<template @contextmenu.prevent>
<div class="context-menu" v-show="show" :style="style" ref="context" tabindex="0" @blur="close" @contextmenu.prevent>
<slot></slot>
</div>
</template>

6
src/views/Editor.vue
View File

@ -804,7 +804,7 @@ export default {
BLOCK_HEIGHT
);
if (this.canTool) {
if (this.canTool && brushBlock.bg !== null) {
targetBlock.bg = this.$store.getters.getBgColour;
}
}
@ -818,7 +818,7 @@ export default {
this.toolCtx.fillStyle = "#000000";
}
if (this.canTool) {
if (this.canTool && brushBlock.fg !== null) {
targetBlock.fg = this.$store.getters.getFgColour;
}
}
@ -834,7 +834,7 @@ export default {
brushY + BLOCK_HEIGHT - 3
);
if (this.canTool) {
if (this.canTool && brushBlock.char !== null) {
targetBlock.char = this.$store.getters.getSelectedChar;
}
}