fixed width import, started toolbar

This commit is contained in:
Hugh Bord 2021-03-20 13:45:10 +10:00
父節點 b482e6f1b0
當前提交 eef7788332
共有 8 個檔案被更改,包括 233 行新增119 行删除

查看文件

@ -8,6 +8,10 @@
"lint": "vue-cli-service lint"
},
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^1.2.35",
"@fortawesome/free-regular-svg-icons": "^5.15.3",
"@fortawesome/free-solid-svg-icons": "^5.15.3",
"@fortawesome/vue-fontawesome": "^2.0.2",
"anser": "IonicaBizau/anser",
"autoprefixer": "^9.8.6",
"core-js": "^3.6.5",

查看文件

@ -1,5 +1,8 @@
<template>
<div id="app">
<t-modal
name="create-ascii-modal"
header="Create new ASCII"
@ -73,6 +76,8 @@
<Editor v-if="asciibirdMeta.length" />
</div>
</div>
</div>
</template>
@ -399,6 +404,9 @@ export default {
} // End loop charPos
this.$store.commit("newAsciibirdMeta", this.finalAscii);
},
createClick() {
this.forms.createAscii.title = `New ASCII ${this.asciibirdMeta.length}`;

查看文件

@ -12,8 +12,9 @@
>
<div style="height:100%;min-height:300px;max-height:400px;">
<t-card header="Debug Info" style="height:100%;">
<p v-html="watchColorChange"></p>
<p v-html="debugStringTool"></p>
<p v-html="debugStringFg"></p>
<p v-html="debugStringBg"></p>
</t-card>
</div>
</vue-draggable-resizable>
@ -35,25 +36,30 @@ export default {
},
debugString: '',
debugStringTool: '',
debugStringFg: '',
debugStringBg: '',
}),
computed: {
watchColorChange() {
return this.$store.getters.getColor
},
watchToolChange() {
return this.$store.getters.getTool
return this.$store.getters.getCurrentTool
},
makeColorButtonClass(color) {
return `background-color: ${color} !important;width:25px;height:25px;`;
watchBgColor() {
return this.$store.getters.getBgColor
},
watchFgColor() {
return this.$store.getters.getFgColor
},
},
watch: {
watchColorChange(val,old) {
this.debugString = val
watchToolChange(val) {
this.debugStringTool = val
},
watchBgColor(val) {
this.debugStringBg = val
},
watchFgColor(val) {
this.debugStringFg = val
},
watchToolChange(val,old) {
this.debugStringTool = val
}
},
methods: {
onResize(x, y, width, height) {
@ -66,6 +72,7 @@ export default {
this.floating.x = x;
this.floating.y = y;
},
},
};
</script>

查看文件

@ -11,7 +11,12 @@
: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"
@ -21,11 +26,13 @@
@click="onColorChange(keyColors)"
></t-button>
</t-card>
<hr />
<t-button
type="button"
:style="makeColorButtonClass(toolbarState.currentColorFg)"
:style="makeColorButtonClass(mircColors[toolbarState.currentColorFg])"
class="border-gray-300 m-1"
id="currentColorFg"
@click="startColorChange(0)"
@ -33,7 +40,7 @@
<t-button
type="button"
:style="makeColorButtonClass(toolbarState.currentColorBg)"
:style="makeColorButtonClass(mircColors[toolbarState.currentColorBg])"
class="border-gray-300 m-1"
id="currentColorBg"
@click="startColorChange(1)"
@ -47,14 +54,21 @@
:key="keyToolbar + 50"
:style="makeToolbarButtonClass(value)"
class="border-gray-300 m-1"
v-html="value.icon"
@click="onToolbarChange(value)"
></t-button>
>
<font-awesome-icon :icon="[value.fa, value.icon]" />
</t-button>
</t-card>
</div>
</vue-draggable-resizable>
</div>
</template>
<script>
export default {
created() {
@ -78,11 +92,11 @@ export default {
toolbarState: {
currentColorFg: 0,
currentColorBg: 1,
currentColor: 0,
isChoosingFg: false,
isChoosingBg: false,
isUpdating: false,
currentTool: null,
currentTool: 'default',
},
isUpdatingFg: 0,
}),
methods: {
onResize(x, y, width, height) {
@ -101,35 +115,52 @@ export default {
makeColorButtonClass(color) {
return `background-color: ${ color } !important;width:25px;height:25px;`;
},
makeToolbarButtonClass() {
return `background-color: grey !important;width:25px;height:25px;`;
makeToolbarButtonClass(tool) {
return "background-color: grey !important;width:25px;height:25px;";
},
startColorChange(type){
this.toolbarState.isUpdating = true
this.isUpdatingFg = type
// this.toolbarState.isChoosingColor = true
if (type === 0) {
// // Fg
this.toolbarState.isChoosingFg = true
} else {
// // Bg
this.toolbarState.isChoosingBg = true
}
},
onColorChange(color) {
if (this.toolbarState.isUpdating) {
this.updateColor(this.isUpdatingFg, color)
if (this.toolbarState.isChoosingFg) {
this.updateColor(0, color)
}
if (this.toolbarState.isChoosingBg) {
this.updateColor(1, color)
}
},
updateColor(type, color) {
if (this.toolbarState.isUpdating) {
if (this.toolbarState.isChoosingBg || this.toolbarState.isChoosingFg) {
switch (type) {
// FG
case 0:
this.$store.commit("changeColorFg", color);
this.currentColorFg = color
break;
// BG
case 1:
this.$store.commit("changeColorBg", color);
this.currentColorBg = color
break;
}
this.toolbarState.isChoosingBg = false;
this.toolbarState.isChoosingFg = false;
this.$store.commit("updateToolBarState", this.toolbarState);
this.toolbarState.isUpdating = false;
}
},
},

查看文件

@ -25,11 +25,16 @@ import {
TDialog,
} from 'vue-tailwind/dist/components';
import Dashboard from './Dashboard.vue';
// import Toolbar from './components/Toolbar.vue';
import router from './router';
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 { faSquare } from '@fortawesome/free-regular-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
library.add(faMousePointer, faSquare, faFont, faFillDrip, faPaintBrush)
Vue.config.productionTip = false;
@ -132,6 +137,7 @@ const settings = {
};
Vue.use(VueTailwind, settings);
Vue.component('font-awesome-icon', FontAwesomeIcon)
Vue.component('vue-draggable-resizable', VueDraggableResizable);
new Vue({

查看文件

@ -53,29 +53,41 @@ export default new Vuex.Store({
// asciibirdMeta holds all of the ASCII information for all the tabs
asciibirdMeta: [],
toolbar: [
{
name: 'default',
icon: 'mouse-pointer',
fa: 'fas',
},
{
name: 'select',
icon: '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l4-4 4 4m0 6l-4 4-4-4" /></svg>'
icon: 'square',
fa: 'far',
},
{
name: 'text',
icon: '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" /></svg>'
icon: 'font',
fa: 'fas',
},
{
name: 'fill',
icon: '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" /></svg>'
icon: 'fill-drip',
fa: 'fas',
},
{
name: 'brush',
icon: '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" /></svg>'
icon: 'paint-brush',
fa: 'fas',
},
],
toolbarState: {
currentColorFg: 0,
currentColorBg: 0,
currentColor: 0,
currentColorBg: 1,
isChoosingFg: false,
isChoosingBg: false,
selectedFg: 0,
selectedBg: 1,
isUpdating: false,
currentTool : null,
currentTool: 'default',
},
blockSizeMultiplier: 1,
},
@ -97,9 +109,13 @@ export default new Vuex.Store({
newAsciibirdMeta(state, payload) {
state.asciibirdMeta.push(payload);
},
updateToolBarState(state, payload) {
state.toolbarState = payload
}
},
getters: {
getToolbarState: state => state.toolbarState,
getCurrentTool: state => state.toolbarState.currentTool,
getFgColor: state => state.toolbarState.currentColorFg,
getBgColor: state => state.toolbarState.currentColorBg,
currentTab: state => state.tab,

查看文件

@ -15,26 +15,25 @@
class="gridCanvas"
></canvas>
<vue-draggable-resizable
style="z-index: 5;left:220px;"
:min-width="1000"
:max-width="1000"
:min-height="1000"
:max-height="1000"
>
<canvas
ref="canvas"
id="canvas"
width="1000"
height="1000"
:key="refreshCanvas"
class="canvas"
@mousemove="showCoordinates"
@mousedown="cavnasMouseDown"
@mouseup="cavnasMouseUp"
></canvas>
</vue-draggable-resizable>
<vue-draggable-resizable
style="z-index: 5; left: 220px"
:max-width="1000"
:max-height="1000"
:draggable="currentTool === 'default'"
>
<canvas
ref="canvas"
id="canvas"
width="1000"
height="1000"
:key="refreshCanvas"
class="canvas"
@mousemove="showCoordinates"
@mousedown="cavnasMouseDown"
@mouseup="cavnasMouseUp"
></canvas>
</vue-draggable-resizable>
</div>
</div>
</template>
@ -81,7 +80,7 @@ export default {
this.ctx = this.$refs.canvas.getContext("2d");
this.gridCtx = this.$refs.grid.getContext("2d");
this.redrawCanvas()
this.redrawCanvas();
}
},
created() {},
@ -111,19 +110,20 @@ export default {
x: 0,
y: 0,
refreshCanvas: 0,
currentTool: null,
}),
computed: {
canvasStyle() {
return `width:${this.canvas.width};height:${this.canvas.height};`
return `width:${this.canvas.width};height:${this.canvas.height};`;
},
generateTitle() {
return this.currentAsciibirdMeta.title ?? "";
},
watchColorChange() {
return this.$store.getters.getColor;
},
// watchColorChange() {
// return this.$store.getters.getColor;
// },
watchToolChange() {
return this.$store.getters.getTool;
return this.$store.getters.getCurrentTool;
},
watchAsciiChange() {
return this.$store.getters.currentAscii;
@ -131,15 +131,15 @@ export default {
},
watch: {
watchAsciiChange(val, old) {
this.currentAsciibirdMeta = val;
this.drawGrid();
this.redrawCanvas();
},
watchColorChange(val) {
console.log(JSON.stringify(val));
this.currentAsciibirdMeta = val;
this.drawGrid();
this.redrawCanvas();
},
// watchColorChange(val) {
// console.log(JSON.stringify(val));
// },
watchToolChange(val) {
console.log(JSON.stringify(val));
this.currentTool = val;
},
},
methods: {
@ -148,67 +148,67 @@ export default {
},
redrawCanvas() {
// Clears the whole canvas
this.ctx.clearRect(0, 0, 1000, 1000);
this.ctx.stroke();
this.ctx.clearRect(0, 0, 1000, 1000);
this.ctx.stroke();
if (this.currentAsciibirdMeta.blocks.length) {
const BLOCK_WIDTH = this.currentAsciibirdMeta.blockWidth;
const BLOCK_HEIGHT = this.currentAsciibirdMeta.blockHeight;
this.drawGrid();
// Position of the meta array
let x = 0;
let y = 0;
if (this.currentAsciibirdMeta.blocks.length) {
const BLOCK_WIDTH = this.currentAsciibirdMeta.blockWidth;
const BLOCK_HEIGHT = this.currentAsciibirdMeta.blockHeight;
// Draws the actual rectangle
let canvasX = 0;
let canvasY = 0;
let curBlock = {};
// Position of the meta array
let x = 0;
let y = 0;
this.ctx.font = "12px Deja Vu Sans Mono";
// Draws the actual rectangle
let canvasX = 0;
let canvasY = 0;
let curBlock = {};
for (y = 0; y < this.currentAsciibirdMeta.height + 1; y++) {
canvasY = BLOCK_HEIGHT * y;
this.ctx.font = "12px Deja Vu Sans Mono";
for (x = 0; x < this.currentAsciibirdMeta.width + 1; x++) {
if (this.currentAsciibirdMeta.blocks[y][x]) {
curBlock = JSON.parse(
JSON.stringify(this.currentAsciibirdMeta.blocks[y][x])
);
canvasX = BLOCK_WIDTH * x;
for (y = 0; y < this.currentAsciibirdMeta.height + 1; y++) {
canvasY = BLOCK_HEIGHT * y;
// Background block
if (curBlock.bg !== null) {
this.ctx.fillStyle = this.mircColors[curBlock.bg];
this.ctx.fillRect(
canvasX,
canvasY,
BLOCK_WIDTH,
BLOCK_HEIGHT
);
for (x = 0; x < this.currentAsciibirdMeta.width + 1; x++) {
if (
this.currentAsciibirdMeta.blocks[y] &&
this.currentAsciibirdMeta.blocks[y][x]
) {
curBlock = JSON.parse(
JSON.stringify(this.currentAsciibirdMeta.blocks[y][x])
);
canvasX = BLOCK_WIDTH * x;
// Background block
if (curBlock.bg !== null) {
this.ctx.fillStyle = this.mircColors[curBlock.bg];
this.ctx.fillRect(canvasX, canvasY, BLOCK_WIDTH, BLOCK_HEIGHT);
} else {
this.ctx.fillStyle = "rgba(0, 0, 200, 0)";
}
if (curBlock.char) {
if (curBlock.fg !== null) {
this.ctx.fillStyle = this.mircColors[curBlock.fg];
} else {
this.ctx.fillStyle = "rgba(0, 0, 200, 0)";
this.ctx.fillStyle = "#000000";
}
if (curBlock.char) {
if (curBlock.fg !== null) {
this.ctx.fillStyle = this.mircColors[curBlock.fg];
} else {
this.ctx.fillStyle = "#000000";
}
this.ctx.fillText(
curBlock.char,
canvasX,
canvasY + BLOCK_HEIGHT - 2
);
this.ctx.stroke();
}
this.ctx.fillText(
curBlock.char,
canvasX,
canvasY + BLOCK_HEIGHT - 2
);
this.ctx.stroke();
}
}
}
}
}
this.ctx.stroke();
this.ctx.stroke();
},
processMouseDown(e) {
// this.canvasClass(e)
@ -238,9 +238,20 @@ export default {
this.y = Math.floor(this.y / this.currentAsciibirdMeta.blockHeight);
},
cavnasMouseDown() {
this.currentAsciibirdMeta.blocks[this.y][
this.x
].bg = this.$store.getters.getBgColor;
switch (this.currentTool) {
case "mouse":
break;
case "brush":
if (
this.currentAsciibirdMeta.blocks[this.y] &&
this.currentAsciibirdMeta.blocks[this.y][this.x]
)
this.currentAsciibirdMeta.blocks[this.y][
this.x
].bg = this.$store.getters.getBgColor;
break;
}
},
cavnasMouseUp() {
this.redrawCanvas();

查看文件

@ -846,6 +846,37 @@
lodash "^4.17.19"
to-fast-properties "^2.0.0"
"@fortawesome/fontawesome-common-types@^0.2.35":
version "0.2.35"
resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.35.tgz#01dd3d054da07a00b764d78748df20daf2b317e9"
integrity sha512-IHUfxSEDS9dDGqYwIW7wTN6tn/O8E0n5PcAHz9cAaBoZw6UpG20IG/YM3NNLaGPwPqgjBAFjIURzqoQs3rrtuw==
"@fortawesome/fontawesome-svg-core@^1.2.35":
version "1.2.35"
resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.35.tgz#85aea8c25645fcec88d35f2eb1045c38d3e65cff"
integrity sha512-uLEXifXIL7hnh2sNZQrIJWNol7cTVIzwI+4qcBIq9QWaZqUblm0IDrtSqbNg+3SQf8SMGHkiSigD++rHmCHjBg==
dependencies:
"@fortawesome/fontawesome-common-types" "^0.2.35"
"@fortawesome/free-regular-svg-icons@^5.15.3":
version "5.15.3"
resolved "https://registry.yarnpkg.com/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-5.15.3.tgz#1ec4f2410ff638db549c5c5484fc60b66407dbe6"
integrity sha512-q4/p8Xehy9qiVTdDWHL4Z+o5PCLRChePGZRTXkl+/Z7erDVL8VcZUuqzJjs6gUz6czss4VIPBRdCz6wP37/zMQ==
dependencies:
"@fortawesome/fontawesome-common-types" "^0.2.35"
"@fortawesome/free-solid-svg-icons@^5.15.3":
version "5.15.3"
resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.3.tgz#52eebe354f60dc77e0bde934ffc5c75ffd04f9d8"
integrity sha512-XPeeu1IlGYqz4VWGRAT5ukNMd4VHUEEJ7ysZ7pSSgaEtNvSo+FLurybGJVmiqkQdK50OkSja2bfZXOeyMGRD8Q==
dependencies:
"@fortawesome/fontawesome-common-types" "^0.2.35"
"@fortawesome/vue-fontawesome@^2.0.2":
version "2.0.2"
resolved "https://registry.yarnpkg.com/@fortawesome/vue-fontawesome/-/vue-fontawesome-2.0.2.tgz#5b86cd2fb7b4c17e5dede722c1c2855c97eceaea"
integrity sha512-ecpKSBUWXsxRJVi/dbOds4tkKwEcBQ1JSDZFzE2jTFpF8xIh3OgTX8POIor6bOltjibr3cdEyvnDjecMwUmxhQ==
"@fullhuman/postcss-purgecss@^3.0.0":
version "3.1.3"
resolved "https://registry.yarnpkg.com/@fullhuman/postcss-purgecss/-/postcss-purgecss-3.1.3.tgz#47af7b87c9bfb3de4bc94a38f875b928fffdf339"