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

tried cursor shit, fill sorta working but not finished

This commit is contained in:
Hugh Bord 2021-04-02 13:36:00 +10:00
parent a90eeedbea
commit bdc3c522c5
11 changed files with 101 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/Dashboard.vue
View File

@ -1,5 +1,7 @@
<template>
<div id="app">
<t-modal
name="create-ascii-modal"
header="Create new ASCII"
@ -95,12 +97,18 @@
$store.getters.getToolbarState.isChoosingBg
"
/>
<!-- <AsciiCursor :mousex="dashboardX" :mousey="dashboardY" :z="500" /> -->
</div>
</div>
</template>
<style>
html {
cursor: url('assets/mouse-pointer-solid.svg'), auto;
}
</style>
<script>
import Toolbar from './components/Toolbar.vue';
import DebugPanel from './components/DebugPanel.vue';
@ -108,7 +116,7 @@ import Editor from './views/Editor.vue';
// import * as Anser from "anser";
import CharPicker from './components/parts/CharPicker.vue';
import ColourPicker from './components/parts/ColourPicker.vue';
import AsciiCursor from './components/parts/AsciiCursor.vue';
// import AsciiCursor from './components/parts/AsciiCursor.vue';
// import pako from 'pako';
export default {
@ -121,9 +129,12 @@ export default {
this.mircAsciiImport(asciiData, asciiUrl);
window.location.href = '/';
}
// console.log(this.currentTool.svgPath)
// document.getElementsByTagName("body")[0].style.setProperty('cursor', "url('assets/fill-drip-solid.svg'), auto")
},
components: {
Toolbar, DebugPanel, Editor, CharPicker, ColourPicker, AsciiCursor
Toolbar, DebugPanel, Editor, CharPicker, ColourPicker
},
name: 'Dashboard',
data: () => ({
@ -141,6 +152,14 @@ export default {
dashboardY: 0,
importType: null,
}),
computed: {
currentTool() {
return this.$store.getters.getToolbarIcons[this.$store.getters.getCurrentTool] ?? null
},
icon() {
return [this.currentTool.fa ?? 'fas', this.currentTool.icon ?? 'mouse-pointer']
},
},
methods: {
updateCoords(value) {
this.canvasX = value.x;

1
src/assets/eraser-solid.svg Normal file
View File

@ -0,0 +1 @@
<svg width="18" height="18" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="eraser" class="svg-inline--fa fa-eraser fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M497.941 273.941c18.745-18.745 18.745-49.137 0-67.882l-160-160c-18.745-18.745-49.136-18.746-67.883 0l-256 256c-18.745 18.745-18.745 49.137 0 67.882l96 96A48.004 48.004 0 0 0 144 480h356c6.627 0 12-5.373 12-12v-40c0-6.627-5.373-12-12-12H355.883l142.058-142.059zm-302.627-62.627l137.373 137.373L265.373 416H150.628l-80-80 124.686-124.686z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 591 B

1
src/assets/eye-dropper-solid.svg Normal file
View File

@ -0,0 +1 @@
<svg width="18" height="18" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="eye-dropper" class="svg-inline--fa fa-eye-dropper fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M50.75 333.25c-12 12-18.75 28.28-18.75 45.26V424L0 480l32 32 56-32h45.49c16.97 0 33.25-6.74 45.25-18.74l126.64-126.62-128-128L50.75 333.25zM483.88 28.12c-37.47-37.5-98.28-37.5-135.75 0l-77.09 77.09-13.1-13.1c-9.44-9.44-24.65-9.31-33.94 0l-40.97 40.97c-9.37 9.37-9.37 24.57 0 33.94l161.94 161.94c9.44 9.44 24.65 9.31 33.94 0L419.88 288c9.37-9.37 9.37-24.57 0-33.94l-13.1-13.1 77.09-77.09c37.51-37.48 37.51-98.26.01-135.75z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 686 B

1
src/assets/fill-drip-solid.svg Normal file
View File

@ -0,0 +1 @@
<svg width="18" height="18" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="fill-drip" class="svg-inline--fa fa-fill-drip fa-w-18" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M512 320s-64 92.65-64 128c0 35.35 28.66 64 64 64s64-28.65 64-64-64-128-64-128zm-9.37-102.94L294.94 9.37C288.69 3.12 280.5 0 272.31 0s-16.38 3.12-22.62 9.37l-81.58 81.58L81.93 4.76c-6.25-6.25-16.38-6.25-22.62 0L36.69 27.38c-6.24 6.25-6.24 16.38 0 22.62l86.19 86.18-94.76 94.76c-37.49 37.48-37.49 98.26 0 135.75l117.19 117.19c18.74 18.74 43.31 28.12 67.87 28.12 24.57 0 49.13-9.37 67.87-28.12l221.57-221.57c12.5-12.5 12.5-32.75.01-45.25zm-116.22 70.97H65.93c1.36-3.84 3.57-7.98 7.43-11.83l13.15-13.15 81.61-81.61 58.6 58.6c12.49 12.49 32.75 12.49 45.24 0s12.49-32.75 0-45.24l-58.6-58.6 58.95-58.95 162.44 162.44-48.34 48.34z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 883 B

1
src/assets/font-solid.svg Normal file
View File

@ -0,0 +1 @@
<svg width="18" height="18" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="font" class="svg-inline--fa fa-font fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M432 416h-23.41L277.88 53.69A32 32 0 0 0 247.58 32h-47.16a32 32 0 0 0-30.3 21.69L39.41 416H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16h-19.58l23.3-64h152.56l23.3 64H304a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zM176.85 272L224 142.51 271.15 272z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 579 B

1
src/assets/mouse-pointer-solid.svg Normal file
View File

@ -0,0 +1 @@
<svg aria-hidden="true" width="18" height="18" focusable="false" data-prefix="fas" data-icon="mouse-pointer" class="svg-inline--fa fa-mouse-pointer fa-w-10" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M302.189 329.126H196.105l55.831 135.993c3.889 9.428-.555 19.999-9.444 23.999l-49.165 21.427c-9.165 4-19.443-.571-23.332-9.714l-53.053-129.136-86.664 89.138C18.729 472.71 0 463.554 0 447.977V18.299C0 1.899 19.921-6.096 30.277 5.443l284.412 292.542c11.472 11.179 3.007 31.141-12.5 31.141z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 555 B

1
src/assets/paint-brush-solid.svg Normal file
View File

@ -0,0 +1 @@
<svg width="18" height="18" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="paint-brush" class="svg-inline--fa fa-paint-brush fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M167.02 309.34c-40.12 2.58-76.53 17.86-97.19 72.3-2.35 6.21-8 9.98-14.59 9.98-11.11 0-45.46-27.67-55.25-34.35C0 439.62 37.93 512 128 512c75.86 0 128-43.77 128-120.19 0-3.11-.65-6.08-.97-9.13l-88.01-73.34zM457.89 0c-15.16 0-29.37 6.71-40.21 16.45C213.27 199.05 192 203.34 192 257.09c0 13.7 3.25 26.76 8.73 38.7l63.82 53.18c7.21 1.8 14.64 3.03 22.39 3.03 62.11 0 98.11-45.47 211.16-256.46 7.38-14.35 13.9-29.85 13.9-45.99C512 20.64 486 0 457.89 0z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 710 B

1
src/assets/square-regular.svg Normal file
View File

@ -0,0 +1 @@
<svg width="18" height="18" aria-hidden="true" focusable="false" data-prefix="far" data-icon="square" class="svg-inline--fa fa-square fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm-6 400H54c-3.3 0-6-2.7-6-6V86c0-3.3 2.7-6 6-6h340c3.3 0 6 2.7 6 6v340c0 3.3-2.7 6-6 6z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 447 B

27
src/components/parts/AsciiCursor.vue
View File

@ -1,27 +0,0 @@
<template>
<div :style="cssPosition">
<font-awesome-icon v-if="currentTool" :icon="icon" />
</div>
</template>
<script>
export default {
name: "AsciiCursor",
props: ["mousex","mousey"],
async created() {},
computed: {
currentTool() {
return this.$store.getters.getToolbarIcons[this.$store.getters.getCurrentTool] ?? null
},
icon() {
return [this.currentTool.fa ?? 'fas', this.currentTool.icon ?? 'mouse-pointer']
},
cssPosition() {
return `position:absolute;left:${this.mousex}px;top:${this.mousey}px;z-index:1;pointer-events: none;`
}
},
methods: {
},
};
</script>

7
src/store/index.js
View File

@ -65,36 +65,43 @@ export default new Vuex.Store({
name: 'default',
icon: 'mouse-pointer',
fa: 'fas',
svgPath: 'assets/mouse-pointer-solid.svg',
},
{
name: 'select',
icon: 'square',
fa: 'far',
svgPath: 'assets/square-regular.svg',
},
{
name: 'text',
icon: 'font',
fa: 'fas',
svgPath: 'assets/font-solid.svg',
},
{
name: 'fill',
icon: 'fill-drip',
fa: 'fas',
svgPath: 'assets/fill-drip-solid.svg',
},
{
name: 'brush',
icon: 'paint-brush',
fa: 'fas',
svgPath: 'assets/paint-brush-solid.svg',
},
{
name: 'dropper',
icon: 'eye-dropper',
fa: 'fas',
svgPath: 'assets/eye-dropper-solid.svg',
},
{
name: 'eraser',
icon: 'eraser',
fa: 'fas',
svgPath: 'assets/eraser-solid.svg',
},
],
toolbarState: {

124
src/views/Editor.vue
View File

@ -217,7 +217,7 @@ export default {
break;
case 'fill':
// this.fillTool(targetBlock);
this.fillTool();
break;
case 'brush':
@ -266,41 +266,40 @@ export default {
this.$store.getters.currentAscii.blocks[this.y]
&& this.$store.getters.currentAscii.blocks[this.y][this.x]
) {
const targetBlock = this.$store.getters.currentAscii.blocks[this.y][this.x];
switch (this.$store.getters.getToolbarIcons[this.$store.getters.getCurrentTool].name) {
case 'brush':
if (this.canTool) {
if (this.$store.getters.getTargetingFg) {
this.$store.getters.currentAscii.blocks[this.y][this.x].fg = this.$store.getters.getFgColour;
targetBlock.fg = this.$store.getters.getFgColour;
}
if (this.$store.getters.getTargetingBg) {
this.$store.getters.currentAscii.blocks[this.y][this.x].bg = this.$store.getters.getBgColour;
targetBlock.bg = this.$store.getters.getBgColour;
}
if (this.$store.getters.getTargetingChar) {
this.$store.getters.currentAscii.blocks[this.y][this.x].char = this.$store.getters.getSelectedChar;
targetBlock.char = this.$store.getters.getSelectedChar;
}
}
break;
case 'eraser':
if (this.canTool) {
if (this.$store.getters.getTargetingFg) {
this.$store.getters.currentAscii.blocks[this.y][
this.x
].fg = null;
if (this.$store.getters.getTargetingFg)
{
targetBlock.fg = null;
}
if (this.$store.getters.getTargetingBg) {
this.$store.getters.currentAscii.blocks[this.y][
this.x
].bg = null;
if (this.$store.getters.getTargetingBg)
{
targetBlock.bg = null;
}
if (this.$store.getters.getTargetingChar) {
this.$store.getters.currentAscii.blocks[this.y][
this.x
].char = null;
if (this.$store.getters.getTargetingChar)
{
targetBlock.char = null;
}
}
break;
@ -321,71 +320,76 @@ export default {
},
// TOOLS
fillTool( x = this.x, y = this.y, originalBg = blocks[this.y][this.x].bg, blockArray = []) {
fillTool( x = null, y = null, originalBg = null, blockArray = []) {
// Cycle through possible blocks top, left, bellow and right
let blocks = this.$store.getters.currentAscii.blocks
if (!x) {
if (null === x) {
x = this.x
}
if (!y) {
if (null === y) {
y = this.y
}
if (!originalBg) {
originalBg = blocks[this.y][this.x].bg
let curBlock = blocks[y][x]
curBlock.x = x;
curBlock.y = y;
if (null === originalBg) {
originalBg = curBlock.bg
}
let curBlock = this.$store.getters.currentAscii.blocks[y][x]
// Top
if (blocks[y-1] &&
blocks[y-1][x] &&
blocks[y-1][x].bg === originalBg) {
blocks[y-1][x].bg === originalBg &&
!blockArray.includes(curBlock)) {
// console.log("topBlock", topBlock);
blockArray.push(curBlock)
this.fillTool( x, y-1, originalBg, blockArray)
}
if (blocks[y] &&
blocks[y][x+1] &&
blocks[y][x+1].bg === originalBg &&
!blockArray.includes(curBlock)) {
curBlock.bg = this.$store.getters.getBgColour;
blockArray.push(curBlock)
this.fillTool( x+1, y, originalBg, blockArray)
}
if (blocks[y+1] &&
blocks[y+1][x] &&
blocks[y+1][x].bg === originalBg &&
!blockArray.includes(curBlock)) {
this.fillTool( x, y-1, originalBg)
blockArray.push(curBlock)
this.fillTool( x, y+1, originalBg, blockArray)
}
if (blocks[y] &&
blocks[y][x-1] &&
blocks[y][x-1].bg === originalBg &&
!blockArray.includes(curBlock)) {
blockArray.push(curBlock)
this.fillTool( x-1, y, originalBg, blockArray)
}
// Left
if (blocks[y] &&
blocks[y][x+1] &&
blocks[y][x+1].bg === originalBg) {
if (blockArray.length) {
for(let i = 0; i <= blockArray.length-1;i++) {
let targetBlock = this.$store.getters.currentAscii.blocks[blockArray[i].y][blockArray[i].x]
console.log(targetBlock)
targetBlock.bg = this.$store.getters.getBgColour;
}
// console.log("leftBlock", leftBlock);
curBlock.bg = this.$store.getters.getBgColour;
this.fillTool( x+1, y, originalBg)
}
// Bellow
if (blocks[y+1] &&
blocks[y+1][x] &&
blocks[y+1][x].bg === originalBg) {
// console.log("bellowBlock", bellowBlock);
curBlock.bg = this.$store.getters.getBgColour;
this.fillTool( x, y+1, originalBg)
}
// Right
if (blocks[y] &&
blocks[y][x-1] &&
blocks[y][x-1].bg === originalBg) {
this.fillTool( x-1, y, originalBg)
this.delayRedrawCanvas()
}
},
},