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

canvas reference fix

This commit is contained in:
Hugh Bord 2021-04-02 12:07:49 +10:00
parent bdf037d0a2
commit a90eeedbea
6 changed files with 80 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/Dashboard.vue
View File

@ -95,6 +95,8 @@
$store.getters.getToolbarState.isChoosingBg
"
/>
<!-- <AsciiCursor :mousex="dashboardX" :mousey="dashboardY" :z="500" /> -->
</div>
</div>
</template>
@ -106,6 +108,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 pako from 'pako';
export default {
@ -120,7 +123,7 @@ export default {
}
},
components: {
Toolbar, DebugPanel, Editor, CharPicker, ColourPicker,
Toolbar, DebugPanel, Editor, CharPicker, ColourPicker, AsciiCursor
},
name: 'Dashboard',
data: () => ({
@ -134,8 +137,8 @@ export default {
currentTab: 1,
canvasX: null,
canvasY: null,
dashboardX: null,
dashboardY: null,
dashboardX: 0,
dashboardY: 0,
importType: null,
}),
methods: {
@ -581,6 +584,22 @@ export default {
return arr;
},
captureMouse(event) {
// clientX/Y gives the coordinates relative to the viewport in CSS pixels.
// console.log("viewport", event.clientX);
// console.log("viewport", event.clientY);
// // pageX/Y gives the coordinates relative to the <html> element in CSS pixels.
// console.log("element", event.pageX);
// console.log("element", event.pageY);
this.dashboardX = event.pageX
this.dashboardY = event.pageY
// // screenX/Y gives the coordinates relative to the screen in device pixels.
// console.log("screen", event.screenX);
// console.log("screen", event.screenY);
}
},
};
</script>

8
src/components/DebugPanel.vue
View File

@ -12,7 +12,7 @@
>
<t-card style="height: 100%;">
<p v-html="`Tool: ${$store.getters.getCurrentTool}`"></p>
<p v-html="`Tool: ${getToolName}`"></p>
<p v-html="`FgColour: ${$store.getters.getFgColour}`"></p>
<p v-html="`BgColor: ${$store.getters.getBgColour}`"></p>
<p v-html="`Char: ${$store.getters.getToolbarState.selectedChar}`"></p>
@ -38,7 +38,11 @@ export default {
},
throttle: true,
}),
computed: {},
computed: {
getToolName() {
return this.$store.getters.getToolbarIcons[this.$store.getters.getCurrentTool] ? this.$store.getters.getToolbarIcons[this.$store.getters.getCurrentTool].name : 'none'
}
},
watch: {},
methods: {
onResize(x, y, width, height) {

8
src/components/Toolbar.vue
View File

@ -57,11 +57,15 @@
type="button"
v-for="(value, keyToolbar) in $store.getters.getToolbarIcons"
:key="keyToolbar + 50"
:class="`border-gray-200 max-h-7 max-w-5 w-7 ${($store.getters.getCurrentTool == value ? 'border-gray-900' : 'border-gray-200')}`"
@click="$store.commit('changeTool', value.name)"
:class="`max-h-7 max-w-5 w-7 ${($store.getters.getCurrentTool == keyToolbar ? 'border-gray-900' : 'border-gray-200')}`"
@click="$store.commit('changeTool', keyToolbar)"
>
<font-awesome-icon :icon="[value.fa, value.icon]" />
</t-button>
</t-card>
</vue-draggable-resizable>
</div>

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

@ -0,0 +1,27 @@
<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>

2
src/store/index.js
View File

@ -107,7 +107,7 @@ export default new Vuex.Store({
selectedBg: 1,
selectedChar: 'A',
isUpdating: false,
currentTool: 'default',
currentTool: 0,
targetingFg: true,
targetingBg: true,
targetingChar: true,

48
src/views/Editor.vue
View File

@ -9,13 +9,13 @@
]"
:w="canvas.width + $store.getters.currentAscii.blockWidth"
:h="canvas.height + $store.getters.currentAscii.blockHeight"
:draggable="$store.getters.getCurrentTool === 'default'"
:draggable="$store.getters.getCurrentTool === 0"
@resizing="onCanvasResize"
@dragstop="onCavasDragStop"
:x="$store.getters.currentAscii.x"
:y="$store.getters.currentAscii.y"
>
<canvas
<!-- <canvas
ref="canvastools"
id="canvastools"
class="canvas"
@ -24,7 +24,7 @@
@mousemove="canvasMouseMove"
@mousedown="canvasMouseDown"
@mouseup="canvasMouseUp"
></canvas>
></canvas> -->
<canvas
ref="canvas"
@ -68,7 +68,7 @@ export default {
this.canvas.height = this.$store.getters.currentAscii.height
* this.$store.getters.currentAscii.blockHeight;
this.delayRedrawCanvas();
this.$store.commit('changeTool', 'default');
this.$store.commit('changeTool', 0);
}
},
created() {},
@ -191,7 +191,7 @@ export default {
// Mouse Up, Down and Move
canvasMouseUp() {
switch (this.$store.getters.getCurrentTool) {
switch (this.$store.getters.getToolbarIcons[this.$store.getters.getCurrentTool].name) {
case 'brush':
this.canTool = false;
break;
@ -209,15 +209,15 @@ export default {
this.delayRedrawCanvas();
},
canvasMouseDown() {
if (this.$store.getters.currentAscii.blocks[this.y] && this.$store.getters.currentAscii.blocks[this.y][this.x]) {
if (this.$store.getters.currentAscii.blocks[this.y] && this.$store.getters.currentAscii.blocks[this.y][this.x] && this.$store.getters.getToolbarIcons[this.$store.getters.getCurrentTool]) {
const targetBlock = this.$store.getters.currentAscii.blocks[this.y][this.x];
switch (this.$store.getters.getCurrentTool) {
switch (this.$store.getters.getToolbarIcons[this.$store.getters.getCurrentTool].name) {
case 'default':
break;
case 'fill':
this.fillTool(targetBlock);
// this.fillTool(targetBlock);
break;
case 'brush':
@ -229,21 +229,19 @@ export default {
break;
case 'dropper':
const curBlock = this.$store.getters.currentAscii.blocks[this.y][this.x];
if (this.$store.getters.getTargetingFg) {
this.$store.commit('changeColourFg', curBlock.fg);
this.$store.commit('changeColourFg', targetBlock.fg);
}
if (this.$store.getters.getTargetingBg) {
this.$store.commit('changeColourBg', curBlock.bg);
this.$store.commit('changeColourBg', targetBlock.bg);
}
if (this.$store.getters.getTargetingChar) {
this.$store.commit('changeChar', curBlock.char);
this.$store.commit('changeChar', targetBlock.char);
}
this.$store.commit('changeTool', this.$store.getters.getCurrentTool);
this.$store.commit('changeTool', 0);
break;
}
}
@ -268,7 +266,7 @@ export default {
this.$store.getters.currentAscii.blocks[this.y]
&& this.$store.getters.currentAscii.blocks[this.y][this.x]
) {
switch (this.$store.getters.getCurrentTool) {
switch (this.$store.getters.getToolbarIcons[this.$store.getters.getCurrentTool].name) {
case 'brush':
if (this.canTool) {
if (this.$store.getters.getTargetingFg) {
@ -323,7 +321,7 @@ export default {
},
// TOOLS
fillTool( x = null, y = null, originalBg = null) {
fillTool( x = this.x, y = this.y, originalBg = blocks[this.y][this.x].bg, blockArray = []) {
// Cycle through possible blocks top, left, bellow and right
let blocks = this.$store.getters.currentAscii.blocks
@ -341,16 +339,12 @@ export default {
let curBlock = this.$store.getters.currentAscii.blocks[y][x]
// Top
if (blocks[y-1] &&
blocks[y-1][x] &&
blocks[y-1][x].bg === originalBg) {
// let topBlock = Object.assign({},blocks[y-1][x])
console.log("topBlock", topBlock);
// console.log("topBlock", topBlock);
curBlock.bg = this.$store.getters.getBgColour;
@ -363,8 +357,7 @@ export default {
blocks[y][x+1] &&
blocks[y][x+1].bg === originalBg) {
// let leftBlock = Object.assign({},blocks[y][x+1])
console.log("leftBlock", leftBlock);
// console.log("leftBlock", leftBlock);
curBlock.bg = this.$store.getters.getBgColour;
@ -377,8 +370,7 @@ export default {
blocks[y+1][x] &&
blocks[y+1][x].bg === originalBg) {
// let bellowBlock = Object.assign({},blocks[y+1][x])
console.log("bellowBlock", bellowBlock);
// console.log("bellowBlock", bellowBlock);
curBlock.bg = this.$store.getters.getBgColour;
@ -390,11 +382,7 @@ export default {
if (blocks[y] &&
blocks[y][x-1] &&
blocks[y][x-1].bg === originalBg) {
// let rightBlock = Object.assign({},blocks[y][x-1])
console.log("rightBlock", rightBlock);
curBlock.bg = this.$store.getters.getBgColour;
this.fillTool( x-1, y, originalBg)