better canvas, toolbar dev ONLY
Этот коммит содержится в:
родитель
01e9eb7058
Коммит
fb63ae3640
|
|
@ -69,7 +69,6 @@
|
|||
<DebugPanel v-if="asciibirdMeta.length" />
|
||||
|
||||
<div class="border-gray-600">
|
||||
<!-- <router-view /> -->
|
||||
<Editor v-if="asciibirdMeta.length" />
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -417,7 +416,14 @@ export default {
|
|||
// break;
|
||||
} // End loop charPos
|
||||
|
||||
|
||||
this.$store.commit("newAsciibirdMeta", this.finalAscii);
|
||||
this.asciibirdMeta = this.$store.getters.asciibirdMeta;
|
||||
|
||||
let keys = this.asciibirdMeta.map((v,k) => k).filter(i=>i!==undefined)
|
||||
|
||||
this.currentTab = keys.pop();
|
||||
this.$store.commit("changeTab", this.currentTab);
|
||||
},
|
||||
createClick() {
|
||||
this.forms.createAscii.title = `New ASCII ${this.asciibirdMeta.length}`;
|
||||
|
|
@ -439,8 +445,8 @@ export default {
|
|||
key: this.asciibirdMeta.length,
|
||||
width: this.forms.createAscii.width,
|
||||
height: this.forms.createAscii.height,
|
||||
blockWidth: 16,
|
||||
blockHeight: 26,
|
||||
blockWidth: 8,
|
||||
blockHeight: 13,
|
||||
blocks: this.create2DArray(this.forms.createAscii.height),
|
||||
};
|
||||
|
||||
|
|
@ -448,11 +454,9 @@ export default {
|
|||
for (let x = 0; x < payload.width; x++) {
|
||||
for (let y = 0; y < payload.height; y++) {
|
||||
payload.blocks[y].push({
|
||||
bg: Math.floor(Math.random() * this.mircColors.length),
|
||||
fg: Math.floor(Math.random() * this.mircColors.length),
|
||||
char: this.charCodes[
|
||||
Math.floor(Math.random() * this.charCodes.length)
|
||||
],
|
||||
bg: null,
|
||||
fg: null,
|
||||
char: null,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,28 +11,38 @@
|
|||
:y="50"
|
||||
>
|
||||
<div style="height: 100%; min-height: 500px; max-height: 700px">
|
||||
|
||||
<t-card header="Tools and Stuff" style="height: 100%">
|
||||
<t-card
|
||||
v-if="toolbarState.isChoosingFg || toolbarState.isChoosingBg"
|
||||
>
|
||||
|
||||
<t-button
|
||||
type="button"
|
||||
v-for="(value, keyColors) in mircColors"
|
||||
:key="keyColors"
|
||||
:style="makeColorButtonClass(value)"
|
||||
class="border-gray-300 m-1"
|
||||
@click="onColorChange(keyColors)"
|
||||
></t-button>
|
||||
<label class="flex ml-1">
|
||||
<t-checkbox name="targetingFg" v-model="toolbarState.targetingFg" />
|
||||
<span class="text-sm">FG</span>
|
||||
</label>
|
||||
<label class="flex ml-1">
|
||||
<t-checkbox name="targetingBg" v-model="toolbarState.targetingBg" checked />
|
||||
<span class="text-sm">BG</span>
|
||||
</label>
|
||||
<label class="flex ml-1">
|
||||
<t-checkbox name="targetingText" v-model="toolbarState.targetingText" />
|
||||
<span class="text-sm">Text</span>
|
||||
</label>
|
||||
|
||||
<t-card v-if="toolbarState.isChoosingFg || toolbarState.isChoosingBg">
|
||||
<t-button
|
||||
type="button"
|
||||
v-for="(value, keyColors) in mircColors"
|
||||
:key="keyColors"
|
||||
:style="makeColorButtonClass(value)"
|
||||
class="border-gray-300 m-1"
|
||||
@click="onColorChange(keyColors)"
|
||||
></t-button>
|
||||
</t-card>
|
||||
|
||||
<hr />
|
||||
|
||||
<t-button
|
||||
type="button"
|
||||
:style="makeColorButtonClass(mircColors[toolbarState.currentColorFg])"
|
||||
:style="
|
||||
makeColorButtonClass(mircColors[toolbarState.currentColorFg])
|
||||
"
|
||||
class="border-gray-300 m-1"
|
||||
id="currentColorFg"
|
||||
@click="startColorChange(0)"
|
||||
|
|
@ -40,7 +50,9 @@
|
|||
|
||||
<t-button
|
||||
type="button"
|
||||
:style="makeColorButtonClass(mircColors[toolbarState.currentColorBg])"
|
||||
:style="
|
||||
makeColorButtonClass(mircColors[toolbarState.currentColorBg])
|
||||
"
|
||||
class="border-gray-300 m-1"
|
||||
id="currentColorBg"
|
||||
@click="startColorChange(1)"
|
||||
|
|
@ -57,10 +69,7 @@
|
|||
@click="onToolbarChange(value)"
|
||||
>
|
||||
<font-awesome-icon :icon="[value.fa, value.icon]" />
|
||||
|
||||
|
||||
</t-button>
|
||||
|
||||
</t-card>
|
||||
</div>
|
||||
</vue-draggable-resizable>
|
||||
|
|
@ -75,8 +84,8 @@ export default {
|
|||
this.mircColors = this.$store.state.mircColors;
|
||||
this.charCodes = this.$store.state.charCodes;
|
||||
this.toolbar = this.$store.state.toolbar;
|
||||
this.toolbarState = this.$store.getters.getToolbarState;
|
||||
this.onToolbarChange('default')
|
||||
// this.toolbarState = this.$store.getters.getToolbarState;
|
||||
this.onToolbarChange("default");
|
||||
},
|
||||
name: "Toolbar",
|
||||
|
||||
|
|
@ -96,9 +105,49 @@ export default {
|
|||
isChoosingFg: false,
|
||||
isChoosingBg: false,
|
||||
isUpdating: false,
|
||||
currentTool: 'default',
|
||||
currentTool: "default",
|
||||
targetingFg: false,
|
||||
targetingBg: false,
|
||||
targetingText: false,
|
||||
},
|
||||
}),
|
||||
computed: {
|
||||
watchFgChange() {
|
||||
return this.$store.getters.getFgColor;
|
||||
},
|
||||
watchBgChange() {
|
||||
return this.$store.getters.getBgColor;
|
||||
},
|
||||
watchTargetingFg() {
|
||||
return this.toolbarState.targetingFg
|
||||
},
|
||||
watchTargetingBg() {
|
||||
return this.toolbarState.targetingBg
|
||||
},
|
||||
watchTargetingText() {
|
||||
return this.toolbarState.targetingText
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
watchFgChange(val, old) {
|
||||
this.toolbarState.currentColorFg = val;
|
||||
},
|
||||
watchBgChange(val, old) {
|
||||
this.toolbarState.currentColorBg = val;
|
||||
},
|
||||
watchTargetingFg(val, old) {
|
||||
this.$store.commit("changeTargetingFg", val);
|
||||
this.toolbarState.targetingFg = val
|
||||
},
|
||||
watchTargetingBg(val, old) {
|
||||
this.$store.commit("changeTargetingBg", val);
|
||||
this.toolbarState.targetingBg = val
|
||||
},
|
||||
watchTargetingText(val, old) {
|
||||
this.$store.commit("changeTargetingText", val);
|
||||
this.toolbarState.targetingText = val
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
onResize(x, y, width, height) {
|
||||
this.floating.x = x;
|
||||
|
|
@ -114,30 +163,28 @@ export default {
|
|||
this.$store.commit("changeTool", item.name);
|
||||
},
|
||||
makeColorButtonClass(color) {
|
||||
return `background-color: ${ color } !important;width:25px;height:25px;`;
|
||||
return `background-color: ${color} !important;width:25px;height:25px;`;
|
||||
},
|
||||
makeToolbarButtonClass(tool) {
|
||||
return "background-color: grey !important;width:25px;height:25px;";
|
||||
},
|
||||
startColorChange(type){
|
||||
|
||||
startColorChange(type) {
|
||||
// this.toolbarState.isChoosingColor = true
|
||||
if (type === 0) {
|
||||
// // Fg
|
||||
this.toolbarState.isChoosingFg = true
|
||||
// // Fg
|
||||
this.toolbarState.isChoosingFg = true;
|
||||
} else {
|
||||
// // Bg
|
||||
this.toolbarState.isChoosingBg = true
|
||||
// // Bg
|
||||
this.toolbarState.isChoosingBg = true;
|
||||
}
|
||||
|
||||
},
|
||||
onColorChange(color) {
|
||||
if (this.toolbarState.isChoosingFg) {
|
||||
this.updateColor(0, color)
|
||||
this.updateColor(0, color);
|
||||
}
|
||||
|
||||
if (this.toolbarState.isChoosingBg) {
|
||||
this.updateColor(1, color)
|
||||
this.updateColor(1, color);
|
||||
}
|
||||
},
|
||||
updateColor(type, color) {
|
||||
|
|
@ -146,22 +193,20 @@ export default {
|
|||
// FG
|
||||
case 0:
|
||||
this.$store.commit("changeColorFg", color);
|
||||
this.currentColorFg = color
|
||||
this.currentColorFg = color;
|
||||
break;
|
||||
|
||||
// BG
|
||||
case 1:
|
||||
this.$store.commit("changeColorBg", color);
|
||||
this.currentColorBg = color
|
||||
this.currentColorBg = color;
|
||||
break;
|
||||
}
|
||||
|
||||
|
||||
this.toolbarState.isChoosingBg = false;
|
||||
this.toolbarState.isChoosingFg = false;
|
||||
|
||||
this.$store.commit("updateToolBarState", this.toolbarState);
|
||||
|
||||
}
|
||||
},
|
||||
},
|
||||
|
|
|
|||
20
src/main.js
20
src/main.js
|
|
@ -30,11 +30,11 @@ import store from './store';
|
|||
// optionally import default styles
|
||||
import 'vue-draggable-resizable/dist/VueDraggableResizable.css';
|
||||
import { library } from '@fortawesome/fontawesome-svg-core'
|
||||
import { faMousePointer, faFont, faFillDrip, faPaintBrush } from '@fortawesome/free-solid-svg-icons'
|
||||
import { faMousePointer, faFont, faFillDrip, faPaintBrush, faEyeDropper, faEraser } from '@fortawesome/free-solid-svg-icons'
|
||||
import { faSquare } from '@fortawesome/free-regular-svg-icons'
|
||||
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
|
||||
|
||||
library.add(faMousePointer, faSquare, faFont, faFillDrip, faPaintBrush)
|
||||
library.add(faMousePointer, faSquare, faFont, faFillDrip, faPaintBrush, faEyeDropper, faEraser)
|
||||
|
||||
Vue.config.productionTip = false;
|
||||
|
||||
|
|
@ -133,6 +133,22 @@ const settings = {
|
|||
},
|
||||
|
||||
},
|
||||
't-checkbox': {
|
||||
component: TCheckbox,
|
||||
props: {
|
||||
wrapped: true,
|
||||
classes: {
|
||||
label: 'text-sm uppercase mx-2 text-gray-700',
|
||||
input: 'text-blue-500 transition duration-100 ease-in-out border-gray-300 rounded shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 focus:ring-offset-0 disabled:opacity-50 disabled:cursor-not-allowed',
|
||||
inputWrapper: 'inline-flex',
|
||||
wrapper: 'flex items-center',
|
||||
// labelChecked: '',
|
||||
// inputWrapperChecked: '',
|
||||
// wrapperChecked: '',
|
||||
}
|
||||
// Variants and fixed classes in the same `object` format ...
|
||||
}
|
||||
},
|
||||
// ...Rest of the components
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -52,8 +52,7 @@ export default new Vuex.Store({
|
|||
tab: 0,
|
||||
// asciibirdMeta holds all of the ASCII information for all the tabs
|
||||
asciibirdMeta: [],
|
||||
toolbar: [
|
||||
{
|
||||
toolbar: [{
|
||||
name: 'default',
|
||||
icon: 'mouse-pointer',
|
||||
fa: 'fas',
|
||||
|
|
@ -78,6 +77,16 @@ export default new Vuex.Store({
|
|||
icon: 'paint-brush',
|
||||
fa: 'fas',
|
||||
},
|
||||
{
|
||||
name: 'dropper',
|
||||
icon: 'eye-dropper',
|
||||
fa: 'fas',
|
||||
},
|
||||
{
|
||||
name: 'eraser',
|
||||
icon: 'eraser',
|
||||
fa: 'fas',
|
||||
},
|
||||
],
|
||||
toolbarState: {
|
||||
currentColorFg: 0,
|
||||
|
|
@ -88,6 +97,9 @@ export default new Vuex.Store({
|
|||
selectedBg: 1,
|
||||
isUpdating: false,
|
||||
currentTool: 'default',
|
||||
targetingFg: false,
|
||||
targetingBg: false,
|
||||
targetingText: false,
|
||||
},
|
||||
blockSizeMultiplier: 1,
|
||||
},
|
||||
|
|
@ -106,6 +118,15 @@ export default new Vuex.Store({
|
|||
changeTool(state, payload) {
|
||||
state.toolbarState.currentTool = payload;
|
||||
},
|
||||
changeTargetingFg(state, payload) {
|
||||
state.toolbarState.targetingFg = payload;
|
||||
},
|
||||
changeTargetingBg(state, payload) {
|
||||
state.toolbarState.targetingBg = payload;
|
||||
},
|
||||
changeTargetingText(state, payload) {
|
||||
state.toolbarState.targetingText = payload;
|
||||
},
|
||||
newAsciibirdMeta(state, payload) {
|
||||
state.asciibirdMeta.push(payload);
|
||||
},
|
||||
|
|
@ -116,6 +137,9 @@ export default new Vuex.Store({
|
|||
getters: {
|
||||
getToolbarState: state => state.toolbarState,
|
||||
getCurrentTool: state => state.toolbarState.currentTool,
|
||||
getTargetingBg: state => state.toolbarState.targetingBg,
|
||||
getTargetingFg: state => state.toolbarState.targetingFg,
|
||||
getTargetingText: state => state.toolbarState.targetingText,
|
||||
getFgColor: state => state.toolbarState.currentColorFg,
|
||||
getBgColor: state => state.toolbarState.currentColorBg,
|
||||
currentTab: state => state.tab,
|
||||
|
|
@ -130,4 +154,3 @@ export default new Vuex.Store({
|
|||
modules: {},
|
||||
plugins: [vuexLocal.plugin],
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -10,23 +10,22 @@
|
|||
|
||||
<vue-draggable-resizable
|
||||
style="z-index: 5; left: 220px"
|
||||
:grid=[13,8]
|
||||
:grid="[13, 8]"
|
||||
:w="canvas.width"
|
||||
:h="canvas.height"
|
||||
:draggable="currentTool === 'default'"
|
||||
@resizing="onCanvasResize"
|
||||
@dragging="onCanvasDrag"
|
||||
>
|
||||
|
||||
<canvas
|
||||
ref="canvas"
|
||||
id="canvas"
|
||||
class="canvas"
|
||||
:width="canvas.width"
|
||||
:height="canvas.height"
|
||||
@mousemove="showCoordinates"
|
||||
@mousedown="cavnasMouseDown"
|
||||
@mouseup="cavnasMouseUp"
|
||||
@mousemove="canvasMouseMove"
|
||||
@mousedown="canvasMouseDown"
|
||||
@mouseup="canvasMouseUp"
|
||||
></canvas>
|
||||
</vue-draggable-resizable>
|
||||
</div>
|
||||
|
|
@ -45,7 +44,6 @@ body {
|
|||
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<script>
|
||||
|
|
@ -58,14 +56,16 @@ export default {
|
|||
mounted() {
|
||||
this.currentAsciibirdMeta = this.$store.getters.currentAscii;
|
||||
this.mircColors = this.$store.getters.mircColors;
|
||||
this.toolbarState = this.$store.getters.getToolbarState;
|
||||
|
||||
if (this.currentAsciibirdMeta.blocks) {
|
||||
this.ctx = this.$refs.canvas.getContext("2d");
|
||||
|
||||
this.redrawCanvas();
|
||||
this.canvas.width = this.currentAsciibirdMeta.width * this.currentAsciibirdMeta.blockWidth;
|
||||
this.canvas.height = this.currentAsciibirdMeta.height * this.currentAsciibirdMeta.blockHeight;
|
||||
this.redrawCanvas();
|
||||
this.canvas.width =
|
||||
this.currentAsciibirdMeta.width * this.currentAsciibirdMeta.blockWidth;
|
||||
this.canvas.height =
|
||||
this.currentAsciibirdMeta.height *
|
||||
this.currentAsciibirdMeta.blockHeight;
|
||||
this.delayRedrawCanvas();
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
|
|
@ -97,6 +97,14 @@ export default {
|
|||
refreshCanvas: 0,
|
||||
currentTool: null,
|
||||
redraw: true,
|
||||
|
||||
toolbarState: {
|
||||
targetingFg: false,
|
||||
targetingBg: false,
|
||||
targetingText: false,
|
||||
},
|
||||
|
||||
canDrawOnMouseDown: false,
|
||||
}),
|
||||
computed: {
|
||||
canvasStyle() {
|
||||
|
|
@ -111,18 +119,38 @@ export default {
|
|||
watchAsciiChange() {
|
||||
return this.$store.getters.currentAscii;
|
||||
},
|
||||
watchTargetingFg() {
|
||||
return this.$store.getters.getTargetingFg;
|
||||
},
|
||||
watchTargetingBg() {
|
||||
return this.$store.getters.getTargetingBg;
|
||||
},
|
||||
watchTargetingText() {
|
||||
return this.$store.getters.getTargetingText;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
watchAsciiChange(val, old) {
|
||||
this.currentAsciibirdMeta = val;
|
||||
this.redrawCanvas();
|
||||
this.canvas.width = this.currentAsciibirdMeta.width * this.currentAsciibirdMeta.blockWidth;
|
||||
this.canvas.height = this.currentAsciibirdMeta.height * this.currentAsciibirdMeta.blockHeight;
|
||||
this.redrawCanvas();
|
||||
this.canvas.width =
|
||||
this.currentAsciibirdMeta.width * this.currentAsciibirdMeta.blockWidth;
|
||||
this.canvas.height =
|
||||
this.currentAsciibirdMeta.height *
|
||||
this.currentAsciibirdMeta.blockHeight;
|
||||
this.delayRedrawCanvas();
|
||||
},
|
||||
watchToolChange(val) {
|
||||
this.currentTool = val;
|
||||
},
|
||||
watchTargetingFg(val) {
|
||||
this.toolbarState.targetingFg = val;
|
||||
},
|
||||
watchTargetingBg(val) {
|
||||
this.toolbarState.targetingBg = val;
|
||||
},
|
||||
watchTargetingText(val) {
|
||||
this.toolbarState.targetingText = val;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
getMircColor(index) {
|
||||
|
|
@ -147,7 +175,6 @@ export default {
|
|||
|
||||
this.ctx.font = "12.5px Hack";
|
||||
|
||||
|
||||
for (y = 0; y < this.currentAsciibirdMeta.height + 1; y++) {
|
||||
canvasY = BLOCK_HEIGHT * y;
|
||||
|
||||
|
|
@ -156,9 +183,12 @@ export default {
|
|||
this.currentAsciibirdMeta.blocks[y] &&
|
||||
this.currentAsciibirdMeta.blocks[y][x]
|
||||
) {
|
||||
curBlock = JSON.parse(
|
||||
JSON.stringify(this.currentAsciibirdMeta.blocks[y][x])
|
||||
);
|
||||
// curBlock = JSON.parse(
|
||||
// JSON.stringify(this.currentAsciibirdMeta.blocks[y][x])
|
||||
// );
|
||||
|
||||
curBlock = Object.assign(curBlock,this.currentAsciibirdMeta.blocks[y][x])
|
||||
|
||||
canvasX = BLOCK_WIDTH * x;
|
||||
|
||||
// Background block
|
||||
|
|
@ -181,7 +211,6 @@ export default {
|
|||
canvasX - 1,
|
||||
canvasY + BLOCK_HEIGHT - 3
|
||||
);
|
||||
// this.ctx.stroke();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -190,12 +219,8 @@ export default {
|
|||
|
||||
this.ctx.stroke();
|
||||
},
|
||||
processMouseMove(e) {
|
||||
// if (this.selectionMode) {
|
||||
// }
|
||||
},
|
||||
showCoordinates(e) {
|
||||
this.redrawCanvas();
|
||||
canvasMouseMove(e) {
|
||||
|
||||
if (e.offsetX >= 0) {
|
||||
this.x = e.offsetX;
|
||||
}
|
||||
|
|
@ -206,47 +231,161 @@ export default {
|
|||
|
||||
this.x = Math.floor(this.x / this.currentAsciibirdMeta.blockWidth);
|
||||
this.y = Math.floor(this.y / this.currentAsciibirdMeta.blockHeight);
|
||||
},
|
||||
onDelayRedrawCanvas() {
|
||||
|
||||
setTimeout(() => {
|
||||
console.log("delay")
|
||||
this.redraw = true
|
||||
}, 500);
|
||||
},
|
||||
cavnasMouseDown() {
|
||||
|
||||
switch (this.currentTool) {
|
||||
case "mouse":
|
||||
case "brush":
|
||||
if (this.canDrawOnMouseDown) {
|
||||
if (
|
||||
this.currentAsciibirdMeta.blocks[this.y] &&
|
||||
this.currentAsciibirdMeta.blocks[this.y][this.x]
|
||||
) {
|
||||
|
||||
|
||||
if (this.toolbarState.targetingFg) {
|
||||
this.currentAsciibirdMeta.blocks[this.y][
|
||||
this.x
|
||||
].fg = this.$store.getters.getFgColor;
|
||||
}
|
||||
|
||||
if (this.toolbarState.targetingBg) {
|
||||
this.currentAsciibirdMeta.blocks[this.y][
|
||||
this.x
|
||||
].bg = this.$store.getters.getBgColor;
|
||||
}
|
||||
|
||||
// if (this.toolbarState.targetingText) {
|
||||
// this.currentAsciibirdMeta.blocks[this.y][this.x].char = null;
|
||||
// }
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
break;
|
||||
|
||||
case "eraser":
|
||||
if (this.canDrawOnMouseDown) {
|
||||
if (
|
||||
this.currentAsciibirdMeta.blocks[this.y] &&
|
||||
this.currentAsciibirdMeta.blocks[this.y][this.x]
|
||||
) {
|
||||
|
||||
if (this.toolbarState.targetingFg) {
|
||||
this.currentAsciibirdMeta.blocks[this.y][this.x].fg = null;
|
||||
}
|
||||
|
||||
if (this.toolbarState.targetingBg) {
|
||||
this.currentAsciibirdMeta.blocks[this.y][this.x].bg = null;
|
||||
}
|
||||
|
||||
if (this.toolbarState.targetingText) {
|
||||
this.currentAsciibirdMeta.blocks[this.y][this.x].char = null;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
||||
this.delayRedrawCanvas()
|
||||
},
|
||||
delayRedrawCanvas() {
|
||||
if (this.redraw) {
|
||||
this.redraw = false;
|
||||
|
||||
setTimeout(() => {
|
||||
this.redraw = true
|
||||
this.redrawCanvas();
|
||||
}, 25);
|
||||
}
|
||||
},
|
||||
// fillTool(block) {
|
||||
|
||||
// this.fillTool(block);
|
||||
// },
|
||||
canvasMouseDown() {
|
||||
switch (this.currentTool) {
|
||||
case "default":
|
||||
break;
|
||||
|
||||
case "fill":
|
||||
// this.canDrawOnMouseDown = true;
|
||||
if (
|
||||
this.currentAsciibirdMeta.blocks[this.y] &&
|
||||
this.currentAsciibirdMeta.blocks[this.y][this.x]
|
||||
) {
|
||||
|
||||
// First set of colours
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
break;
|
||||
|
||||
case "brush":
|
||||
this.canDrawOnMouseDown = true;
|
||||
break;
|
||||
|
||||
case "eraser":
|
||||
this.canDrawOnMouseDown = true;
|
||||
break;
|
||||
|
||||
case "dropper":
|
||||
if (
|
||||
this.currentAsciibirdMeta.blocks[this.y] &&
|
||||
this.currentAsciibirdMeta.blocks[this.y] &&
|
||||
this.currentAsciibirdMeta.blocks[this.y][this.x]
|
||||
)
|
||||
this.currentAsciibirdMeta.blocks[this.y][
|
||||
this.x
|
||||
].bg = this.$store.getters.getBgColor;
|
||||
) {
|
||||
let curBlock = this.currentAsciibirdMeta.blocks[this.y][this.x];
|
||||
|
||||
if (this.toolbarState.targetingFg) {
|
||||
this.$store.commit("changeColorFg", curBlock.fg);
|
||||
}
|
||||
|
||||
if (this.toolbarState.targetingBg) {
|
||||
this.$store.commit("changeColorBg", curBlock.bg);
|
||||
}
|
||||
|
||||
// if (this.toolbarState.targetingText) {
|
||||
|
||||
// }
|
||||
}
|
||||
|
||||
this.currentTool = "default";
|
||||
this.$store.commit("changeTool", this.currentTool);
|
||||
break;
|
||||
}
|
||||
|
||||
this.redrawCanvas();
|
||||
|
||||
|
||||
|
||||
},
|
||||
onCanvasResize(left, top, width, height) {
|
||||
this.canvas.width = width
|
||||
this.canvas.height = height
|
||||
|
||||
if (this.redraw) {
|
||||
this.redraw = false
|
||||
this.redrawCanvas()
|
||||
this.onDelayRedrawCanvas()
|
||||
}
|
||||
this.canvas.width = width;
|
||||
this.canvas.height = height;
|
||||
this.delayRedrawCanvas();
|
||||
},
|
||||
onCanvasDrag(left, top) {
|
||||
// console.log(left, top)
|
||||
},
|
||||
cavnasMouseUp() {
|
||||
// this.redrawCanvas();
|
||||
canvasMouseUp() {
|
||||
this.delayRedrawCanvas();
|
||||
|
||||
switch (this.currentTool) {
|
||||
case "brush":
|
||||
this.canDrawOnMouseDown = false;
|
||||
break;
|
||||
|
||||
case "eraser":
|
||||
this.canDrawOnMouseDown = false;
|
||||
break;
|
||||
|
||||
case "fill":
|
||||
// this.canDrawOnMouseDown = true;
|
||||
|
||||
break;
|
||||
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче