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

brush and select fixes

This commit is contained in:
Hugh Bord 2021-08-07 12:41:47 +10:00
parent 6c928fe9bc
commit a5ccdbca23
7 changed files with 168 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
README.md
View File

@ -20,25 +20,22 @@
* Redo (ctrl y) is a buggy
* Circle brush (works okay for odd width and height numbers)
* Select only works from dragging top left to bottom right, not the other way around
* Brush cannot brush row 0 in mirror mode
# FOCUSING ON NOW
* Cut / copy then paste with ctrl v
* drawBrush preview flip / rotate
* Type letter when choosing char, leave char panel open after
* color choosing panel, close or cancel
* close tabs
* Edit brush
* Brush library
* edit brush
* SELECT TOOL DEV, JUST FINISH IT
* OPTIONS MODAL (SORRY SKG LOL)
* SELECT TOOL DEV
* Reverse select bug fix needed
* Modals
* Edit current ascii
* Asciibird options
* Tool options
* OPTIONS MODAL (SORRY SKG LOL)
* Encodings - UTF8 vs NOT that

5
src/Dashboard.vue
View File

@ -87,7 +87,7 @@
v-if="toolbarState.isChoosingFg || toolbarState.isChoosingBg"
/>
<BrushLibrary />
<BrushLibrary v-if="brushLibraryState.visible" />
</template>
<template v-else>
<div style="left: 35%; top: 15%; position: absolute; z-index: -2">
@ -190,6 +190,9 @@ export default {
debugPanelState() {
return this.$store.getters.debugPanel;
},
brushLibraryState() {
return this.$store.getters.brushLibraryState;
},
},
methods: {
openContextMenu(e) {

44
src/ascii.js
View File

@ -597,5 +597,49 @@ export const cyrb53 = function (str, seed = 1337) {
return 4294967296 * (2097151 & h2) + (h1 >>> 0);
};
export const fillNullBlocks = function (blocks) {
for (let y = 0; y < blocks.length; y++) {
for (let x = 0; x < blocks[0].length; x++) {
if (blocks[y] && !blocks[y][x]) {
blocks[y][x] = {
...emptyBlock
}
}
}
}
return blocks
}
export const getBlocksWidth = function (blocks) {
for (let y = 0; y < blocks.length; y++) {
if (!blocks[y]) {
continue
}
if (blocks[y]) {
return blocks[y].length
}
}
}
export const filterNullBlocks = function (blocks) {
let newBlocks = [];
let y;
blocks = blocks.filter(function (item) {
return item !== null
});
for (y = 0; y < blocks.length; y++) {
newBlocks[y] = (blocks[y].filter(function (item) {
return item !== null
}))
}
return newBlocks
}
export default createNewAscii;

47
src/components/BrushLibrary.vue
View File

@ -1,15 +1,16 @@
<template>
<div>
<vue-draggable-resizable
@dragstop="onDragStop"
:grid="[currentAscii.blockWidth, currentAscii.blockHeight]"
:min-width="blockWidth * 25"
:max-width="blockWidth * 30"
:max-width="blockWidth * 50"
:min-height="blockHeight * 50"
:max-height="blockHeight * 50"
:w="blockWidth * 50"
:h="blockWidth * 50"
:x="blockWidth * 150"
:y="blockHeight * 3"
:max-height="blockHeight * 100"
:w="brushLibraryState.w"
:h="brushLibraryState.h"
:x="brushLibraryState.x"
:y="brushLibraryState.y"
>
<t-card class="h-full overflow-y-scroll">
<t-button
@ -89,9 +90,21 @@ import LZString from "lz-string";
export default {
name: "BrushLibrary",
mounted() {},
created() {
this.panel.x = this.brushLibraryState.x;
this.panel.y = this.brushLibraryState.y;
this.panel.w = this.brushLibraryState.w;
this.panel.h = this.brushLibraryState.h;
},
data: () => ({
tab: 1,
panel: {
w: 0,
h: 0,
x: 100,
y: 100,
visible: true,
},
}),
components: {
BrushCanvas,
@ -137,7 +150,7 @@ export default {
return this.$store.getters.brushSizeType;
},
brushHistory() {
return this.$store.getters.brushHistory.slice(0, 25);
return this.$store.getters.brushHistory.slice(0, 100);
},
brushLibrary() {
return this.$store.getters.brushLibrary;
@ -151,6 +164,9 @@ export default {
brushBlocks() {
return this.$store.getters.brushBlocks;
},
brushLibraryState() {
return this.$store.getters.brushLibraryState;
},
},
watch: {},
methods: {
@ -158,7 +174,6 @@ export default {
this.tab = tab;
},
decompressBlock(item) {
console.log(JSON.parse(LZString.decompressFromUTF16(item)));
return JSON.parse(LZString.decompressFromUTF16(item));
},
reuseBlocks(value) {
@ -170,6 +185,20 @@ export default {
removeFromLibrary(value) {
this.$store.commit("removeBrushLibrary", value);
},
onResize(x, y, w, h) {
this.panel.x = x;
this.panel.y = y;
this.panel.w = w;
this.panel.h = h;
this.$store.commit('changeBrushLibraryState', this.panel);
},
onDragStop(x, y) {
this.panel.x = x;
this.panel.y = y;
this.$store.commit('changeBrushLibraryState', this.panel);
},
},
};
</script>

15
src/components/parts/BrushCanvas.vue
View File

@ -14,7 +14,7 @@
</template>
<script>
import { mircColours99, blockWidth, blockHeight, cyrb53 } from "../../ascii";
import { mircColours99, blockWidth, blockHeight, cyrb53, getBlocksWidth, filterNullBlocks } from "../../ascii";
export default {
name: "BrushCanvas",
@ -70,9 +70,6 @@ export default {
options() {
return this.$store.getters.options;
},
canvasKey() {
return this.$store.getters.canvasKey + Math.round(Math.random()*1000);
},
canvasName() {
let hash = cyrb53(JSON.stringify(this.getBlocks))
return `${hash}-brush-canvas`;
@ -131,6 +128,12 @@ export default {
},
},
methods: {
getBlocksWidth(blocks) {
return getBlocksWidth(blocks)
},
filterNullBlocks(blocks) {
return filterNullBlocks(blocks)
},
drawPreview() {
this.ctx.clearRect(0, 0, 10000, 10000);
this.ctx.fillStyle = this.mircColours[1];
@ -146,8 +149,10 @@ export default {
// Get middle block
if (this.getBlocks) {
let blocksWidth = this.getBlocksWidth(this.getBlocks)
for (y = 0; y < this.getBlocks.length; y++) {
for (x = 0; x < this.getBlocks[0].length; x++) {
for (x = 0; x < blocksWidth; x++) {
if (this.getBlocks[y] && this.getBlocks[y][x]) {
const curBlock = this.getBlocks[y][x];

15
src/store/index.js
View File

@ -16,7 +16,6 @@ const vuexLocal = new VuexPersistence({
export default new Vuex.Store({
state: {
key: 0,
modalState: {
newAscii: false,
editAscii: false,
@ -70,6 +69,13 @@ export default new Vuex.Store({
brushHistory: [],
selectBlocks: [],
brushLibrary: [],
brushLibraryState: {
x: blockWidth * 130,
y: blockHeight * 2,
h: blockHeight * 50,
w: blockWidth * 25,
visible: true,
},
},
mutations: {
changeState(state, payload) {
@ -84,6 +90,12 @@ export default new Vuex.Store({
toggleDebugPanel(state, payload) {
state.debugPanelState.visible = payload;
},
changeBrushLibraryState(state, payload) {
state.brushLibraryState = payload;
},
toggleBrushLibrary(state, payload) {
state.brushLibraryState.visible = payload;
},
changeToolBarState(state, payload) {
state.toolbarState.x = payload.x;
state.toolbarState.y = payload.y;
@ -263,6 +275,7 @@ export default new Vuex.Store({
blockSizeMultiplier: (state) => state.blockSizeMultiplier,
brushHistory: (state) => state.brushHistory,
brushLibrary: (state) => state.brushLibrary,
brushLibraryState: (state) => state.brushLibraryState,
brushBlocks: (state) => JSON.parse(LZString.decompressFromUTF16(state.brushBlocks)) || [],
selectBlocks: (state) => JSON.parse(LZString.decompressFromUTF16(state.selectBlocks)) || [],
isModalOpen: (state) => {

69
src/views/Editor.vue
View File

@ -63,7 +63,7 @@ body {
</style>
<script>
import { emptyBlock, toolbarIcons, mircColours99, exportMirc, downloadFile } from '../ascii';
import { emptyBlock, toolbarIcons, mircColours99, exportMirc, downloadFile, filterNullBlocks } from '../ascii';
export default {
name: 'Editor',
@ -110,7 +110,7 @@ export default {
// Ctrl C - copy blocks
if (e.key === 'c' && ctrlKey && !shiftKey) {
if (this.selectedBlocks.length) {
this.$store.commit('selectBlocks', this.selectedBlocks);
this.$store.commit('selectBlocks', this.filterNullBlocks(this.selectedBlocks));
this.selectedBlocks = [];
}
}
@ -118,6 +118,7 @@ export default {
// Ctrl V - paste blocks
if (e.key === 'v' && ctrlKey) {
if (this.haveSelectBlocks) {
this.$store.commit("pushBrushHistory", this.brushBlocks)
this.$store.commit('brushBlocks', this.selectBlocks);
this.$store.commit('changeTool', 4);
@ -129,6 +130,11 @@ export default {
this.$store.commit('toggleDebugPanel', !this.debugPanelState.visible);
}
// Show / hide brush library
if (e.key === 'b' && ctrlKey) {
this.$store.commit('toggleBrushLibrary', !this.brushLibraryState.visible);
}
// New ASCII
// Ctrl N doesn't seem to work in chrome? https://github.com/liftoff/GateOne/issues/290
if (e.key === 'm' && ctrlKey) {
@ -303,6 +309,9 @@ export default {
mircColours() {
return mircColours99;
},
brushLibraryState() {
return this.$store.getters.brushLibraryState;
},
},
watch: {
currentAscii(val, old) {
@ -738,6 +747,12 @@ export default {
}, this.options.canvasRedrawSpeed);
}
},
getBlocksWidth(blocks) {
return getBlocksWidth(blocks)
},
filterNullBlocks(blocks) {
return filterNullBlocks(blocks)
},
//
// TOOLS
//
@ -749,11 +764,27 @@ export default {
let curBlock = {};
this.selectedBlocks = [];
if (this.selecting.endY < this.selecting.startY) {
let end = this.selecting.endY;
let start = this.selecting.startY;
this.selecting.startY = end;
this.selecting.endY = start;
}
if (this.selecting.endX < this.selecting.startX) {
let end = this.selecting.endX;
let start = this.selecting.startX;
this.selecting.startX = end;
this.selecting.endX = start;
}
for (y = 0; y < this.currentAscii.height; y++) {
if (
y
>= Math.floor(this.selecting.startY / this.currentAscii.blockHeight)
&& y <= Math.floor(this.selecting.endY / this.currentAscii.blockHeight)
> Math.floor(this.selecting.startY / this.currentAscii.blockHeight)-1
&& y < Math.floor(this.selecting.endY / this.currentAscii.blockHeight)
) {
if (!this.selectedBlocks[y]) {
this.selectedBlocks[y] = [];
@ -762,11 +793,11 @@ export default {
for (x = 0; x < this.currentAscii.width; x++) {
if (
x
>= Math.floor(
> Math.ceil(
this.selecting.startX / this.currentAscii.blockWidth,
)
)-1
&& x
<= Math.floor(this.selecting.endX / this.currentAscii.blockWidth)
<= Math.ceil(this.selecting.endX / this.currentAscii.blockWidth)-1
) {
if (this.currentAsciiBlocks[y] && this.currentAsciiBlocks[y][x]) {
curBlock = { ...this.currentAsciiBlocks[y][x] };
@ -983,15 +1014,17 @@ export default {
if (this.canTool && brushBlock.bg !== null) {
targetBlock.bg = brushBlock.bg;
if (this.mirrorX) {
if (this.mirrorX && this.currentAsciiBlocks[arrayY] && this.currentAsciiBlocks[arrayY][asciiWidth - arrayX]) {
this.currentAsciiBlocks[arrayY][asciiWidth - arrayX].bg = brushBlock.bg;
}
if (this.mirrorY) {
if (this.mirrorY && this.currentAsciiBlocks[asciiHeight - arrayY] && this.currentAsciiBlocks[asciiHeight - arrayY][arrayX]) {
this.currentAsciiBlocks[asciiHeight - arrayY][arrayX].bg = brushBlock.bg;
}
if (this.mirrorY && this.mirrorX) {
if (this.mirrorY && this.mirrorX && this.currentAsciiBlocks[asciiHeight - arrayY] && this.currentAsciiBlocks[asciiHeight - arrayY][
asciiWidth - arrayX
]) {
this.currentAsciiBlocks[asciiHeight - arrayY][
asciiWidth - arrayX
].bg = brushBlock.bg;
@ -1007,15 +1040,17 @@ export default {
if (this.canTool && brushBlock.fg !== null) {
targetBlock.fg = brushBlock.fg;
if (this.mirrorX) {
if (this.mirrorX && this.currentAsciiBlocks[arrayY] && this.currentAsciiBlocks[arrayY][asciiWidth - arrayX]) {
this.currentAsciiBlocks[arrayY][asciiWidth - arrayX].fg = brushBlock.fg;
}
if (this.mirrorY) {
if (this.mirrorY && this.currentAsciiBlocks[asciiHeight - arrayY] && this.currentAsciiBlocks[asciiHeight - arrayY][arrayX]) {
this.currentAsciiBlocks[asciiHeight - arrayY][arrayX].fg = brushBlock.fg;
}
if (this.mirrorY && this.mirrorX) {
if (this.mirrorY && this.mirrorX && this.currentAsciiBlocks[asciiHeight - arrayY] && this.currentAsciiBlocks[asciiHeight - arrayY][
asciiWidth - arrayX
]) {
this.currentAsciiBlocks[asciiHeight - arrayY][
asciiWidth - arrayX
].fg = brushBlock.fg;
@ -1060,15 +1095,17 @@ export default {
? this.currentChar
: brushBlock.char;
if (this.mirrorX) {
if (this.mirrorX && this.currentAsciiBlocks[arrayY] && this.currentAsciiBlocks[arrayY][asciiWidth - arrayX]) {
this.currentAsciiBlocks[arrayY][asciiWidth - arrayX].char = brushBlock.char;
}
if (this.mirrorY) {
if (this.mirrorY && this.currentAsciiBlocks[asciiHeight - arrayY] && this.currentAsciiBlocks[asciiHeight - arrayY][arrayX]) {
this.currentAsciiBlocks[asciiHeight - arrayY][arrayX].char = brushBlock.char;
}
if (this.mirrorY && this.mirrorX) {
if (this.mirrorY && this.mirrorX && this.currentAsciiBlocks[asciiHeight - arrayY] && this.currentAsciiBlocks[asciiHeight - arrayY][
asciiWidth - arrayX
]) {
this.currentAsciiBlocks[asciiHeight - arrayY][
asciiWidth - arrayX
].char = brushBlock.char;