jewbird
/
asciibird
3
3
Fork 0
程式碼 問題 合併請求 版本發布 動態

better half block mode

This commit is contained in:
Hugh Bord 2022-07-10 13:57:13 +08:00
父節點 9f596cd0f5
當前提交 786e1470cf
共有 2 個檔案被更改，包括 60 行新增 和 57 行删除
顯示統計資料 下載 Patch 檔 下載差異檔 展開所有檔案 折疊所有檔案

5
README.md
查看文件

@ -82,15 +82,16 @@ A most latest production build to use is available at https://asciibird.jewbird.
### Working on now
* FLOOD FILL
* Half block editing mode
* FLOOD FILL - sometimes not working
* SVG export
* SHADING mode
* 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?
* Bug with hotkey brush switching, if make a new ascii hotkeys are broke - something to do with the hotkey function
* Unit testing
* Editing ascii does not update title
### v 1.2
* More tooltips on other parts, at the moment only Toolbar has tooltips, option to disable tooltips

112
src/views/Editor.vue
查看文件

@ -92,6 +92,7 @@ import {
exportMirc,
downloadFile,
cyrb53,
emptyBlock
} from "../ascii";
export default {
@ -393,6 +394,9 @@ export default {
? `opacity: ${this.imageOverlay.asciiOpacity / 100};`
: "opacity: 1;";
},
emptyBlock() {
return emptyBlock;
}
},
watch: {
currentAsciiHeight(val) {
@ -1706,48 +1710,43 @@ export default {
// Functions related to drawBrush function bellow
//
async drawHalfBlocks(brushX, brushY, plain = false) {
const arrayY = brushY / blockHeight;
const arrayX = brushX / blockWidth;
let targetBlock = this.currentAsciiLayerBlocks[arrayY][arrayX];
// Draw the preview brush
const arrayY = brushY / blockHeight;
const arrayX = brushX / blockWidth;
let targetBlock = this.currentAsciiLayerBlocks[arrayY][arrayX];
let topChar = "▀";
let bottomChar = "▄";
let fullChar = " ";
let drawOnBg = false;
let topChar = "▀";
let bottomChar = "▄";
let fullChar = " ";
let drawChar = this.atTopHalf ? topChar : bottomChar;
this.toolCtx.font = "Hack 13px";
this.toolCtx.fillStyle = this.mircColours[this.currentFg];
this.toolCtx.fillText(
this.atTopHalf ? topChar : bottomChar,
brushX,
brushY + blockHeight - 3
);
// if (targetBlock.char === fullChar) {
// drawOnBg = true;
// } else
if (targetBlock.char === topChar && !this.atTopHalf && targetBlock.fg === this.currentFg) {
drawChar = fullChar;
drawOnBg = true;
} else if (targetBlock.char === bottomChar && this.atTopHalf && targetBlock.fg === this.currentFg) {
drawChar = fullChar;
drawOnBg = true;
}
// Draw the preview brush
this.toolCtx.font = "Hack 13px";
this.toolCtx.fillStyle = this.mircColours[this.currentFg];
this.toolCtx.fillText(
!this.atTopHalf ? bottomChar : topChar,
brushX,
brushY + blockHeight - 3
);
// Apply the half block to the ascii block
if (this.canTool) {
if (drawOnBg) {
targetBlock["char"] = drawChar; // (targetBlock.fg === this.currentFg ? fullChar : drawChar);
targetBlock["bg"] = this.currentFg;
} else {
targetBlock["fg"] = this.currentFg;
targetBlock["char"] = drawChar; // this.atTopHalf ? bottomChar : topChar;
// Apply the half block to the ascii block
if (this.canTool) {
if ((targetBlock.char === topChar && !this.atTopHalf) || (targetBlock.char === bottomChar && this.atTopHalf)) {
// if the current fg is different to the current block fg then only apply fg
if (this.currentFg === targetBlock.fg) {
targetBlock["bg"] = this.currentFg;
targetBlock["char"] = fullChar;
} else {
targetBlock["bg"] = this.currentFg;
targetBlock["fg"] = targetBlock.fg;
targetBlock["char"] = !this.atTopHalf ? topChar : bottomChar;
}
} else {
// Have a block without any existing half blocks
targetBlock["fg"] = this.currentFg;
targetBlock["char"] = this.atTopHalf ? topChar : bottomChar;
}
}
}
this.toolCtx.restore();
},
@ -2038,7 +2037,6 @@ export default {
return;
}
// slime pal yanking my chain
let stack = [];
// do flood fill
@ -2049,10 +2047,11 @@ export default {
// left
if (this.currentAsciiLayerBlocks[pos.y][pos.x - 1] &&
(this.currentAsciiLayerBlocks[pos.y][pos.x-1].bg == (current.bg || undefined) &&
this.currentAsciiLayerBlocks[pos.y][pos.x-1].fg == (current.fg || undefined) &&
this.currentAsciiLayerBlocks[pos.y][pos.x-1].char == (current.char || undefined))
) {
(this.currentAsciiLayerBlocks[pos.y][pos.x-1].bg == (current.bg || undefined)
// this.currentAsciiLayerBlocks[pos.y][pos.x-1].fg == (current.fg || undefined) ||
// this.currentAsciiLayerBlocks[pos.y][pos.x-1].char == (current.char || undefined)
)) {
this.storeDiffBlocks(pos.x - 1, pos.y, this.currentAsciiLayerBlocks[pos.y][pos.x -1], newColor);
this.currentAsciiLayerBlocks[pos.y][pos.x-1] = (eraser ? { ... emptyBlock} : { ... newColor });
stack.push({ x: pos.x - 1, y: pos.y});
@ -2060,10 +2059,11 @@ export default {
//right
if (this.currentAsciiLayerBlocks[pos.y][pos.x + 1] &&
(this.currentAsciiLayerBlocks[pos.y][pos.x+1].bg == (current.bg || undefined) &&
this.currentAsciiLayerBlocks[pos.y][pos.x+1].fg == (current.fg || undefined) &&
this.currentAsciiLayerBlocks[pos.y][pos.x+1].char == (current.char || undefined))
) {
(this.currentAsciiLayerBlocks[pos.y][pos.x+1].bg == (current.bg || undefined)
// this.currentAsciiLayerBlocks[pos.y][pos.x+1].fg == (current.fg || undefined) ||
// this.currentAsciiLayerBlocks[pos.y][pos.x+1].char == (current.char || undefined)
)) {
this.storeDiffBlocks(pos.x + 1, pos.y, this.currentAsciiLayerBlocks[pos.y][pos.x+1], newColor);
this.currentAsciiLayerBlocks[pos.y][pos.x+1] = (eraser ? { ... emptyBlock} : { ... newColor });
stack.push({ x: pos.x + 1, y: pos.y });
@ -2071,10 +2071,11 @@ export default {
// top
if (this.currentAsciiLayerBlocks[pos.y - 1] &&
(this.currentAsciiLayerBlocks[pos.y-1][pos.x].bg == (current.bg || undefined) &&
this.currentAsciiLayerBlocks[pos.y-1][pos.x].fg == (current.fg || undefined) &&
this.currentAsciiLayerBlocks[pos.y-1][pos.x].char == (current.char || undefined))
) {
(this.currentAsciiLayerBlocks[pos.y-1][pos.x].bg == (current.bg || undefined)
// this.currentAsciiLayerBlocks[pos.y-1][pos.x].fg == (current.fg || undefined) ||
// this.currentAsciiLayerBlocks[pos.y-1][pos.x].char == (current.char || undefined)
)) {
this.storeDiffBlocks(pos.x, pos.y - 1, this.currentAsciiLayerBlocks[pos.y-1][pos.x], newColor);
this.currentAsciiLayerBlocks[pos.y -1 ][pos.x] = (eraser ? { ... emptyBlock} : { ... newColor });
stack.push({ x: pos.x, y: pos.y - 1});
@ -2082,10 +2083,11 @@ export default {
// bottom
if (this.currentAsciiLayerBlocks[pos.y + 1] &&
(this.currentAsciiLayerBlocks[pos.y+1][pos.x].bg == (current.bg || undefined) &&
this.currentAsciiLayerBlocks[pos.y+1][pos.x].fg == (current.fg || undefined) &&
this.currentAsciiLayerBlocks[pos.y+1][pos.x].char == (current.char || undefined))
) {
(this.currentAsciiLayerBlocks[pos.y+1][pos.x].bg == (current.bg || undefined)
// this.currentAsciiLayerBlocks[pos.y+1][pos.x].fg == (current.fg || undefined) ||
// this.currentAsciiLayerBlocks[pos.y+1][pos.x].char == (current.char || undefined)
)) {
this.storeDiffBlocks(pos.x, pos.y + 1, this.currentAsciiLayerBlocks[pos.y+1][pos.x], newColor);
this.currentAsciiLayerBlocks[pos.y + 1][pos.x] = (eraser ? { ... emptyBlock} : { ... newColor });
stack.push({ x: pos.x, y: pos.y + 1});