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

Fkn bugs, null block fix finally (fkn mergeLayers(), HALF BLOCK EDITING MODE EXPERIMENTAL FEATURE

This commit is contained in:
Hugh Bord 2022-05-22 14:04:46 +08:00
parent 597e58ba8c
commit 939df96341
7 changed files with 56 additions and 259 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@ -82,6 +82,7 @@ A most latest production build to use is available at https://asciibird.jewbird.
### Working on now
* Half block editing mode
* If you drag a panel, then right click you can't drag it anymore
* Resize canvas undo
* Chzz's corrupt state, maybe running out of internal space?
@ -96,7 +97,6 @@ A most latest production build to use is available at https://asciibird.jewbird.
* Fill tool is limited by the recursion limit on the browser. Each browser has a different limit. Filling an empty 80x196 ascii will throw a recursion error on firefox, but not on Safari for this reason. We can review the fill feature in a future version of ASCII bird.
* More fill tool options?
* Brush blocks larger than 1x1 can leave undoable blocks
* Half block editing mode
* This one time this ascii exported with a 1 more width and height
* Dark / light modes, different themes
* Context menus inside the panels can be way off sometimes

32
src/ascii.js
View File

File diff suppressed because one or more lines are too long

6
src/components/Colours.vue
View File

@ -35,6 +35,7 @@
:style="`background-color: ${mircColours[currentBg]} !important;color: ${mircColours[currentFg]};${outline}`"
class="border-gray-200 w-14 h-14 text-2xl ml-14"
id="currentChar"
:disabled="halfBlockEditing"
@click="
$store.commit('changeIsUpdatingChar', !toolbarState.isChoosingChar)
"
@ -70,7 +71,10 @@ export default {
}
return "";
}
},
halfBlockEditing() {
return this.toolbarState.halfBlockEditing;
},
},
methods: {
swapColours() {

8
src/components/Toolbar.vue
View File

@ -128,7 +128,7 @@
<span
class="material-icons"
slot="trigger"
>more_horiz</span>
>more_vert</span>
<template>
<div
class="
@ -163,7 +163,7 @@
<span
class="material-icons"
slot="trigger"
>more_vert</span>
>more_horiz</span>
<template>
<div
class="
@ -276,6 +276,10 @@
$toasted.show(
`Half Block Editing Mode ${toolbarState.halfBlockEditing ? 'enabled' : 'disabled'}`
);
$toasted.show(
`WARNING THIS FEATURE IS STILL EXPERIMENTAL`
);
"
>
<t-dropdown toggle-on-hover>

3
src/store/index.js
View File

@ -547,8 +547,6 @@ export default new Vuex.Store({
state.asciibirdMeta[state.tab].historyIndex--;
// Automatically select the next best layer to avoid bugs
let selectedLayer = state.asciibirdMeta[state.tab].selectedLayer
@ -575,7 +573,6 @@ export default new Vuex.Store({
if (prev.old) {
for (let change in prev.old) {
let data = prev.old[change];
console.log(data);
if (tempLayers[prev.l] !== undefined) {
tempLayers[prev.l].data[data.y][data.x] = {
...data.b

2
src/style.scss
View File

@ -138,7 +138,7 @@ body {
}
.ab-toolbar-button {
@apply rounded-3xl w-10 h-10 mt-1 ml-1 transition-all group
@apply rounded-3xl w-9 h-9 mt-1 ml-1 transition-all group
}
.ab-context-menu-item {

262
src/views/Editor.vue
View File

@ -396,11 +396,9 @@ export default {
},
watch: {
currentAsciiHeight(val) {
console.log(val);
this.canvas.height = val * blockHeight;
},
currentAsciiWidth(val) {
console.log(val);
this.canvas.width = val * blockWidth;
},
async currentAscii(val, old) {
@ -1204,7 +1202,7 @@ export default {
this.x = Math.floor(this.x / blockWidth);
this.y = Math.floor(this.y / blockHeight);
if (this.x === lastX && this.y === lastY) {
if (this.x === lastX && this.y === lastY && !this.halfBlockEditing) {
return;
}
@ -1701,255 +1699,57 @@ export default {
//
// Functions related to drawBrush function bellow
//
async drawHalfBlocks(brushX, brushY, brushBlock, plain = false) {
async drawHalfBlocks(brushX, brushY, plain = false) {
const arrayY = brushY / blockHeight;
const arrayX = brushX / blockWidth;
const asciiWidth = this.currentAsciiWidth;
const asciiHeight = this.currentAsciiHeight;
let targetBlock = this.currentAsciiLayerBlocks[arrayY][arrayX];
let topChar = "▀";
let bottomChar = "▄";
let fullChar = "█";
let drawOnBg = false;
let drawChar = !this.atTopHalf ? bottomChar : topChar;
if ((this.atTopHalf && targetBlock.char === bottomChar) || (!this.atTopHalf && targetBlock.char === topChar)) {
drawChar = fullChar
if (targetBlock.char === fullChar) {
drawChar = fullChar;
drawOnBg = true;
}
let actualBrushY = this.atTopHalf ? brushY : brushY + (blockHeight / 2);
await this.clearToolCanvas();
if (plain) {
// Used for eraser preview and other non brushes
let indicatorColour = targetBlock.bg === 0 ? 1 : 0;
if (targetBlock.bg === 8) {
indicatorColour = 1;
}
this.toolCtx.fillStyle = this.mircColours[indicatorColour];
this.toolCtx.fillRect(brushX, brushY, blockWidth, blockHeight / 2);
if (this.mirrorX) {
this.toolCtx.fillRect(
(asciiWidth - arrayX) * blockWidth,
actualBrushY,
blockWidth,
blockHeight / 2
);
}
if (this.mirrorY) {
this.toolCtx.fillRect(
brushX,
(asciiHeight - arrayY) * blockHeight / 2,
blockWidth,
blockHeight / 2
);
}
if (this.mirrorY && this.mirrorX) {
this.toolCtx.fillRect(
(asciiWidth - arrayX) * blockWidth,
(asciiHeight - arrayY) * blockHeight / 2,
blockWidth,
blockHeight / 2
);
}
return;
if (
(targetBlock.char === bottomChar && this.atTopHalf) ||
(targetBlock.char === topChar && !this.atTopHalf)
) {
drawChar = fullChar;
}
this.toolCtx.fillStyle =
brushBlock.bg !== undefined
? this.mircColours[brushBlock.bg]
: "rgba(255,255,255,0.4)";
this.toolCtx.fillStyle =
brushBlock.fg !== undefined
? this.mircColours[brushBlock.fg]
: "#FFFFFF";
// If no target is specified we assume we are rendering the text
// console.log(
// this.atTopHalf,
// drawChar,
// drawOnBg,
// JSON.stringify(targetBlock)
// );
this.toolCtx.font = "Hack 13px";
this.toolCtx.fillStyle = this.canFg
? this.mircColours[brushBlock.fg]
: "#FFFFFF";
this.toolCtx.fillText(brushBlock.char, brushX, brushY + blockHeight - 3);
if (this.mirrorX) {
this.toolCtx.fillText(
brushBlock.char,
(asciiWidth - arrayX) * blockWidth,
brushY + blockHeight - 4
);
}
if (this.mirrorY) {
this.toolCtx.fillText(
brushBlock.char,
brushX,
(asciiHeight - arrayY) * blockHeight + 10
);
}
if (this.mirrorY && this.mirrorX) {
this.toolCtx.fillText(
brushBlock.char,
(asciiWidth - arrayX) * blockWidth,
(asciiHeight - arrayY) * blockHeight + 10
);
}
this.toolCtx.fillStyle = this.mircColours[this.currentFg];
this.toolCtx.fillText(
!this.atTopHalf ? bottomChar : topChar,
brushX,
brushY + blockHeight - 3
);
// Apply text to ascii blocks
if (this.canTool) {
targetBlock["char"] = drawChar;
if (
this.mirrorX &&
this.currentAsciiLayerBlocks[arrayY] &&
this.currentAsciiLayerBlocks[arrayY][asciiWidth - arrayX]
) {
this.currentAsciiLayerBlocks[arrayY][asciiWidth - arrayX].char =
brushBlock.char;
}
if (
this.mirrorY &&
this.currentAsciiLayerBlocks[asciiHeight - arrayY] &&
this.currentAsciiLayerBlocks[asciiHeight - arrayY][arrayX]
) {
this.currentAsciiLayerBlocks[asciiHeight - arrayY][arrayX].char =
brushBlock.char;
}
if (
this.mirrorY &&
this.mirrorX &&
this.currentAsciiLayerBlocks[asciiHeight - arrayY] &&
this.currentAsciiLayerBlocks[asciiHeight - arrayY][
asciiWidth - arrayX
]
) {
this.currentAsciiLayerBlocks[asciiHeight - arrayY][
asciiWidth - arrayX
].char = brushBlock.char;
}
return;
}
if (this.canBg) {
await this.clearToolCanvas();
this.toolCtx.setLineDash([1, 2]);
this.toolCtx.strokeRect(brushX, actualBrushY, blockWidth, blockHeight / 2);
this.toolCtx.fillRect(brushX, actualBrushY, blockWidth, blockHeight / 2);
if (this.mirrorX) {
this.toolCtx.fillRect(
(asciiWidth - arrayX) * blockWidth,
brushY,
blockWidth,
blockHeight / 2
);
this.toolCtx.setLineDash([1, 2]);
this.toolCtx.strokeRect(
(asciiWidth - arrayX) * blockWidth,
brushY,
blockWidth,
blockHeight / 2
);
}
if (this.mirrorY) {
this.toolCtx.fillRect(
brushX,
(asciiHeight - arrayY) * blockHeight / 2,
blockWidth,
blockHeight / 2
);
this.toolCtx.setLineDash([1, 2]);
this.toolCtx.strokeRect(
brushX,
(asciiHeight - arrayY) * blockHeight / 2,
blockWidth,
blockHeight / 2
);
}
if (this.mirrorY && this.mirrorX) {
this.toolCtx.fillRect(
(asciiWidth - arrayX) * blockWidth,
(asciiHeight - arrayY) * blockHeight / 2,
blockWidth,
blockHeight / 2
);
this.toolCtx.setLineDash([1, 2]);
this.toolCtx.strokeRect(
(asciiWidth - arrayX) * blockWidth,
(asciiHeight - arrayY) * blockHeight / 2,
blockWidth,
blockHeight / 2
);
}
}
// Apply the actual brush block to the ascii block
if (this.canTool && brushBlock !== undefined) {
targetBlock = brushBlock;
let theX = asciiWidth - arrayX;
let theY = asciiHeight - arrayY;
let oldBlock = {};
if (
this.mirrorX &&
this.currentAsciiLayerBlocks[arrayY] &&
this.currentAsciiLayerBlocks[arrayY][theX] &&
(this.x !== theX || this.y !== arrayY)
) {
oldBlock = { ...this.currentAsciiLayerBlocks[arrayY][theX] };
this.currentAsciiLayerBlocks[arrayY][theX] = brushBlock;
await this.storeDiffBlocks(theX, arrayY, oldBlock, brushBlock);
}
if (
this.mirrorY &&
this.currentAsciiLayerBlocks[theY] &&
this.currentAsciiLayerBlocks[theY][arrayX] &&
(this.x !== arrayX || this.y !== theY)
) {
oldBlock = { ...this.currentAsciiLayerBlocks[theY][arrayX] };
this.currentAsciiLayerBlocks[theY][arrayX] = brushBlock;
await this.storeDiffBlocks(arrayX, theY, oldBlock, brushBlock);
}
if (
this.mirrorY &&
this.mirrorX &&
this.currentAsciiLayerBlocks[theY] &&
this.currentAsciiLayerBlocks[theY][theX] &&
(this.x !== theX || this.y !== theY)
) {
oldBlock = { ...this.currentAsciiLayerBlocks[theY][theX] };
this.currentAsciiLayerBlocks[theY][theX] = brushBlock;
await this.storeDiffBlocks(theX, theY, oldBlock, brushBlock);
if (drawOnBg) {
targetBlock["char"] = this.atTopHalf ? bottomChar : topChar;
targetBlock["bg"] = this.currentFg;
} else {
targetBlock["fg"] = this.currentFg;
targetBlock["char"] = drawChar;
}
}
this.toolCtx.restore();
return;
},
//
@ -2022,7 +1822,7 @@ export default {
if (!plain) {
if (this.toolbarState.halfBlockEditing) {
await this.drawHalfBlocks(brushX, brushY, brushBlock);
await this.drawHalfBlocks(brushX, brushY);
} else {
if (this.canBg) {
await this.drawBrushBlocks(brushX, brushY, brushBlock, "bg");