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

merge layers, transparent layers fix (WIP)

This commit is contained in:
Hugh Bord 2021-08-28 12:03:42 +10:00
parent 3091736d9f
commit 36df6488cc
5 changed files with 197 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
README.md
View File

@ -68,11 +68,12 @@ ASCIIBIRD is mostly usable. There are some bugs however to note at the moment. R
* Importer could be re-written with regex
* Exporter will default transparent bg to black by default, which wont for some asciis
* Having more than a few layers depending on ascii size will slow things down, until the `fillNullBlocks` is refactored.
* The code that hides blocks off screen wont work if you scroll down, however it will work if you drag the canvas upward
* Some work around layers and transparent blocks, skip drawing transparent bg block on top layers. Or get bg from lowest layer if bg is null on higher layers.
* Select cannot select entire ASCII, is off by one at the end
* We could add a special clause for the select tool when mouse leaves canvas to select all blocks
## Focusing on Now
* z indexing for toolbars and stuff is ANNOYING
* Messing with deleting layers, if you somehow have a layer that isn't selected, it'll be buggy\
* If you have three or more layers, transparent blocks wont work from top layer if hidden
## Focusing on Now / Roadmap
* Modals to add
* Asciibird options / Options modal from skgs PR
@ -95,6 +96,8 @@ ASCIIBIRD is mostly usable. There are some bugs however to note at the moment. R
* Toolbars and panels follow when scrolling down
* Experimental code to only render blocks visible on screen
* Rename Layers
* Some work around layers and transparent blocks, skip drawing transparent bg block on top layers. Or get bg from lowest layer if bg is null on higher layers.
* The code that hides blocks off screen wont work if you scroll down, however it will work if you drag the canvas upward
# Keyboard Shortcuts

107
src/ascii.js
View File

File diff suppressed because one or more lines are too long

37
src/components/parts/Layers.vue
View File

@ -1,12 +1,22 @@
<template>
<div>
<t-button
type="button"
class="block w-full border-gray-200 bg-gray-500"
@click="addLayer()"
>
Add Layer
</t-button>
<div class="flex">
<t-button
type="button"
class="block w-1/2 border-gray-200 bg-gray-500"
@click="addLayer()"
>
Add Layer
</t-button>
<t-button
type="button"
class="block w-1/2 border-gray-200 bg-gray-500"
@click="mergeLayers()"
>
Merge Layers
</t-button>
</div>
<hr />
@ -44,7 +54,9 @@
<div class="flex text-right">
<div class="w-full">
<t-card class="w-full">
<span @dblclick="showLayerRename(key, layer.label)">{{ layer.label }}</span>
<span @dblclick="showLayerRename(key, layer.label)">{{
layer.label
}}</span>
</t-card>
</div>
@ -134,7 +146,7 @@ export default {
return "bg-gray-200";
},
showLayerRename(key, label) {
window.stopKeyEvents = true
window.stopKeyEvents = true;
this.$dialog
.prompt({
title: "Rename Layer",
@ -148,7 +160,7 @@ export default {
this.$toasted.show("You must enter a layer name!", {
type: "error",
});
window.stopKeyEvents = false
window.stopKeyEvents = false;
return;
}
@ -156,7 +168,7 @@ export default {
this.updateLayerName(key, result.input);
}
window.stopKeyEvents = false
window.stopKeyEvents = false;
});
},
updateLayerName(key, label) {
@ -168,6 +180,9 @@ export default {
addLayer() {
this.$store.commit("addLayer");
},
mergeLayers() {
this.$store.commit("mergeAllLayers");
},
changeLayer(key) {
this.$store.commit("changeLayer", key);
},

23
src/store/index.js
View File

@ -10,7 +10,8 @@ import {
create2DArray,
emptyBlock,
maxBrushHistory,
maxUndoHistory
maxUndoHistory,
mergeLayers
} from "../ascii";
Vue.use(Vuex);
@ -240,6 +241,26 @@ export default new Vuex.Store({
state.asciibirdMeta[state.tab].blocks = LZString.compressToUTF16(JSON.stringify(
tempLayers));
},
mergeAllLayers(state) {
let tempLayers = JSON.parse(LZString.decompressFromUTF16(state.asciibirdMeta[state.tab]
.blocks))
let width = tempLayers[0].width;
let height = tempLayers[0].height;
let label = tempLayers[0].label;
let mergedLayers = [{
visible: true,
width: width,
height: height,
label: label,
data: mergeLayers()
}];
state.asciibirdMeta[state.tab].selectedLayer = 0;
state.asciibirdMeta[state.tab].blocks = LZString.compressToUTF16(JSON.stringify(
mergedLayers));
},
changeLayer(state, payload) {
state.asciibirdMeta[state.tab].selectedLayer = payload
},

93
src/views/Editor.vue
View File

@ -48,9 +48,9 @@ import {
blockHeight,
maxBrushSize,
fillNullBlocks,
emptyBlock,
getBlocksWidth,
checkVisible,
mergeLayers,
} from "../ascii";
export default {
@ -121,7 +121,7 @@ export default {
return this.$store.getters.currentAsciiLayers;
},
selectedLayerIndex() {
return this.currentAscii.selectedLayer || 0
return this.currentAscii.selectedLayer || 0;
},
currentSelectedLayer() {
return this.currentAsciiLayers[this.selectedLayerIndex];
@ -314,8 +314,8 @@ export default {
this.$emit("selecting", val);
},
yOffset() {
this.delayRedrawCanvas()
}
this.delayRedrawCanvas();
},
},
methods: {
warnInvisibleLayer() {
@ -369,6 +369,9 @@ export default {
);
}
},
mergeLayers() {
return mergeLayers();
},
redrawCanvas() {
if (this.currentAsciiLayers.length) {
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
@ -377,8 +380,6 @@ export default {
let x = 0;
let y = 0;
let i = 0;
// Draws the actual rectangle
let canvasX = 0;
let canvasY = 0;
@ -387,73 +388,48 @@ export default {
// hack font for ascii shout outs 2 beenz
this.ctx.font = "13px Hack";
let mergeLayers = this.mergeLayers();
for (y = 0; y < this.currentAsciiHeight + 1; y++) {
canvasY = blockHeight * y;
// Experimental code to not rows blocks off screen
if (this.top !== false && !this.checkVisible(this.top + canvasY - this.yOffset)) {
if (
this.top !== false &&
!this.checkVisible(this.top + canvasY - this.yOffset)
) {
continue;
}
for (x = 0; x < this.currentAsciiWidth + 1; x++) {
canvasX = blockWidth * x;
curBlock = { ...mergeLayers[y][x] };
if (this.gridView) {
this.ctx.setLineDash([1]);
this.ctx.strokeStyle = "rgba(0, 0, 0, 1)";
this.ctx.strokeRect(canvasX, canvasY, blockWidth, blockHeight);
}
// Loop layers
for (i = this.currentAsciiLayers.length - 1; i >= 0; i--) {
// for (i = 0; i >= this.currentAsciiLayers.length - 1; i++) {
// If this layer is invisble, skip it
if (this.currentAsciiLayers[i].visible === true) {
// If this block on this layer has no data, skip to next row
if (
this.currentAsciiLayers[i] &&
this.currentAsciiLayers[i].data &&
this.currentAsciiLayers[i].data[y] &&
this.currentAsciiLayers[i].data[y][x] &&
i > 0 &&
JSON.stringify(this.currentAsciiLayers[i].data[y][x]) ===
JSON.stringify(emptyBlock)
) {
continue;
} else if (
// Otherwise if we are on the very first layer we need to render it
this.currentAsciiLayers[i] &&
this.currentAsciiLayers[i].data &&
this.currentAsciiLayers[i].data[y] &&
this.currentAsciiLayers[i].data[y][x]
) {
curBlock = { ...this.currentAsciiLayers[i].data[y][x] };
// Background block
if (curBlock.bg !== null) {
this.ctx.fillStyle = this.mircColours[curBlock.bg];
this.ctx.fillRect(canvasX, canvasY, blockWidth, blockHeight);
}
// break;
}
// Background block
if (curBlock.bg !== null) {
this.ctx.fillStyle = this.mircColours[curBlock.bg];
this.ctx.fillRect(canvasX, canvasY, blockWidth, blockHeight);
}
if (curBlock.char) {
if (curBlock.fg !== null) {
this.ctx.fillStyle = this.mircColours[curBlock.fg];
} else {
this.ctx.fillStyle = "#000000";
}
this.ctx.fillText(
curBlock.char,
canvasX,
canvasY + blockHeight - 3
);
}
break;
if (curBlock.char) {
if (curBlock.fg !== null) {
this.ctx.fillStyle = this.mircColours[curBlock.fg];
} else {
this.ctx.fillStyle = "#000000";
}
this.ctx.fillText(
curBlock.char,
canvasX,
canvasY + blockHeight - 3
);
}
}
}
@ -1102,7 +1078,10 @@ export default {
const arrayY = brushY / blockHeight;
const arrayX = brushX / blockWidth;
if (this.currentAsciiLayerBlocks[arrayY] && this.currentAsciiLayerBlocks[arrayY][arrayX]) {
if (
this.currentAsciiLayerBlocks[arrayY] &&
this.currentAsciiLayerBlocks[arrayY][arrayX]
) {
if (!plain) {
if (this.canBg) {
this.drawBrushBlocks(brushX, brushY, brushBlock, "bg");
@ -1258,7 +1237,7 @@ export default {
);
},
fillTool(fillBlocks, y, x, current, eraser) {
if(fillBlocks[y] === undefined || fillBlocks[y][x] === undefined) {
if (fillBlocks[y] === undefined || fillBlocks[y][x] === undefined) {
return;
}