better brush select, toolbar menu
Этот коммит содержится в:
родитель
f4f1511f0b
Коммит
87423080b4
|
|
@ -1,7 +1,6 @@
|
|||
<template>
|
||||
<div id="app">
|
||||
<div> <vue-file-toolbar-menu :content="myMenu" /> </div>
|
||||
|
||||
<div><vue-file-toolbar-menu :content="myMenu" /></div>
|
||||
|
||||
<NewAscii />
|
||||
<Options v-if="asciibirdMeta.length" />
|
||||
|
|
@ -26,9 +25,9 @@
|
|||
title="Enter URL"
|
||||
text="Enter URL for POST command"
|
||||
icon="question"
|
||||
:clickToClose=false
|
||||
:showCloseButton=true
|
||||
:disableBodyScroll=true
|
||||
:clickToClose="false"
|
||||
:showCloseButton="true"
|
||||
:disableBodyScroll="true"
|
||||
@closed="postHttp()"
|
||||
>
|
||||
<t-input v-model="lastPostURL" />
|
||||
|
|
@ -137,7 +136,6 @@
|
|||
</span>
|
||||
</div>
|
||||
|
||||
|
||||
<Editor
|
||||
@coordsupdate="updateCoords"
|
||||
@selectedblocks="selectedblocks"
|
||||
|
|
@ -148,7 +146,6 @@
|
|||
:brush="drawBrush"
|
||||
/>
|
||||
|
||||
|
||||
<Toolbar :y-offset="scrollOffset" />
|
||||
<DebugPanel
|
||||
:canvas-x="canvasX"
|
||||
|
|
@ -157,15 +154,9 @@
|
|||
:y-offset="scrollOffset"
|
||||
/>
|
||||
|
||||
<BrushLibrary
|
||||
v-if="brushLibraryState.visible"
|
||||
:y-offset="scrollOffset"
|
||||
/>
|
||||
<BrushLibrary v-if="brushLibraryState.visible" :y-offset="scrollOffset" />
|
||||
|
||||
<BrushPreview
|
||||
@inputtingbrush="inputtingbrush"
|
||||
:y-offset="scrollOffset"
|
||||
/>
|
||||
<BrushPreview @inputtingbrush="inputtingbrush" :y-offset="scrollOffset" />
|
||||
|
||||
<LayersLibrary :y-offset="scrollOffset" />
|
||||
|
||||
|
|
@ -204,7 +195,7 @@
|
|||
|
||||
<style>
|
||||
.bar {
|
||||
background-color: rgba(107, 114, 128) !important;
|
||||
background-color: rgba(107, 114, 128) !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -239,7 +230,7 @@ import {
|
|||
splashAscii,
|
||||
} from "./ascii";
|
||||
|
||||
import VueFileToolbarMenu from 'vue-file-toolbar-menu'
|
||||
import VueFileToolbarMenu from "vue-file-toolbar-menu";
|
||||
|
||||
export default {
|
||||
async created() {
|
||||
|
|
@ -272,7 +263,7 @@ export default {
|
|||
LayersLibrary,
|
||||
Options,
|
||||
ImageOverlay,
|
||||
VueFileToolbarMenu
|
||||
VueFileToolbarMenu,
|
||||
},
|
||||
name: "Dashboard",
|
||||
data: () => ({
|
||||
|
|
@ -292,7 +283,7 @@ export default {
|
|||
lastPostURL: "",
|
||||
isShowingDialog: false,
|
||||
drawBrush: false,
|
||||
happy: false
|
||||
happy: false,
|
||||
}),
|
||||
computed: {
|
||||
splashAscii() {
|
||||
|
|
@ -347,37 +338,74 @@ export default {
|
|||
return this.$store.getters.currentTab;
|
||||
},
|
||||
|
||||
myMenu () {
|
||||
return [
|
||||
{
|
||||
|
||||
text: "File", menu: [
|
||||
{ text: "New ASCII", click: () => this.$store.commit('openModal', 'new-ascii') },
|
||||
{ text: "Edit ASCII", click: () => this.$store.commit('openModal', 'edit-ascii') },
|
||||
{ text: "Close ASCII", click: () => this.closeTab(this.currentTab) }
|
||||
],
|
||||
myMenu() {
|
||||
let menu = [];
|
||||
|
||||
},{
|
||||
text: "Options", menu: [
|
||||
{ text: "Show Options", click: () => this.$store.commit('openModal', 'options') },
|
||||
],
|
||||
},{
|
||||
text: "Import", menu: [
|
||||
{ text: "mIRC File", click: () => startImport('mirc') },
|
||||
{ text: "mIRC Clipboard", click: () => this.$store.commit('openModal', 'paste-ascii') },
|
||||
{ text: "ASCIIBIRD State", click: () => this.startImport('asb') },
|
||||
],
|
||||
},{
|
||||
text: "Export", menu: [
|
||||
{ text: "mIRC File", click: () => this.startExport('file') },
|
||||
{ text: "mIRC Clipboard", click: () => this.startExport('clipboard') },
|
||||
{ text: "HTTP POST", click: () => this.startExport('post') },
|
||||
{ text: "ASCIIBIRD State", click: () => this.exportAsciibirdState() },
|
||||
menu.push({
|
||||
text: "File",
|
||||
menu: [
|
||||
{
|
||||
text: "New ASCII",
|
||||
click: () => this.$store.commit("openModal", "new-ascii"),
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
}
|
||||
]
|
||||
}
|
||||
if (this.asciibirdMeta.length) {
|
||||
menu[0].menu.push(
|
||||
{
|
||||
text: "Edit ASCII",
|
||||
click: () => this.$store.commit("openModal", "edit-ascii"),
|
||||
},
|
||||
{
|
||||
text: "Close ASCII",
|
||||
click: () => this.closeTab(this.currentTab),
|
||||
}
|
||||
);
|
||||
|
||||
menu.push({
|
||||
text: "Options",
|
||||
menu: [
|
||||
{
|
||||
text: "Show Options",
|
||||
click: () => this.$store.commit("openModal", "options"),
|
||||
},
|
||||
],
|
||||
});
|
||||
}
|
||||
|
||||
menu.push({
|
||||
text: "Import",
|
||||
menu: [
|
||||
{ text: "mIRC File", click: () => this.startImport("mirc") },
|
||||
{
|
||||
text: "mIRC Clipboard",
|
||||
click: () => this.$store.commit("openModal", "paste-ascii"),
|
||||
},
|
||||
{ text: "ASCIIBIRD State", click: () => this.startImport("asb") },
|
||||
],
|
||||
});
|
||||
|
||||
if (this.asciibirdMeta.length) {
|
||||
menu.push({
|
||||
text: "Export",
|
||||
menu: [
|
||||
{ text: "mIRC File", click: () => this.startExport("file") },
|
||||
{
|
||||
text: "mIRC Clipboard",
|
||||
click: () => this.startExport("clipboard"),
|
||||
},
|
||||
{ text: "HTTP POST", click: () => this.startExport("post") },
|
||||
{
|
||||
text: "ASCIIBIRD State",
|
||||
click: () => this.exportAsciibirdState(),
|
||||
},
|
||||
],
|
||||
});
|
||||
}
|
||||
|
||||
return menu;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
// scrollOffset(val) {
|
||||
|
|
@ -387,7 +415,7 @@ export default {
|
|||
},
|
||||
methods: {
|
||||
triggerbrush() {
|
||||
this.drawBrush = ! this.drawBrush
|
||||
this.drawBrush = !this.drawBrush;
|
||||
},
|
||||
inputtingbrush(val) {
|
||||
this.isInputtingBrushSize = val;
|
||||
|
|
@ -505,7 +533,7 @@ export default {
|
|||
break;
|
||||
case "post":
|
||||
this.$store.commit("toggleDisableKeyboard", true);
|
||||
this.$dialog.show('dialog-posthttp');
|
||||
this.$dialog.show("dialog-posthttp");
|
||||
this.isShowingDialog = true;
|
||||
break;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -43,7 +43,10 @@
|
|||
</div>
|
||||
|
||||
<div class="w-full">
|
||||
<label class="block">
|
||||
|
||||
<t-select :options="brushOptions" v-model="brushSizeTypeInput" />
|
||||
|
||||
<!-- <label class="block">
|
||||
<t-radio
|
||||
name="options"
|
||||
value="square"
|
||||
|
|
@ -96,7 +99,7 @@
|
|||
v-model="brushSizeTypeInput"
|
||||
/>
|
||||
<span class="text-sm">Lines</span>
|
||||
</label>
|
||||
</label> -->
|
||||
</div>
|
||||
|
||||
<div
|
||||
|
|
@ -149,6 +152,17 @@ export default {
|
|||
isInputtingBrushSize: false,
|
||||
}),
|
||||
computed: {
|
||||
brushOptions() {
|
||||
return [
|
||||
'Square',
|
||||
'Circle',
|
||||
'Cross',
|
||||
'Grid',
|
||||
'Inverted Grid',
|
||||
'H lines',
|
||||
'V lines',
|
||||
]
|
||||
},
|
||||
blockWidth() {
|
||||
return blockWidth * this.blockSizeMultiplier;
|
||||
},
|
||||
|
|
@ -307,7 +321,7 @@ export default {
|
|||
for (y = 0; y < brushHeight; y++) {
|
||||
this.blocks[y] = [];
|
||||
for (x = 0; x < brushWidth; x++) {
|
||||
switch (this.brushSizeType) {
|
||||
switch (this.brushSizeType.toLowerCase() ) {
|
||||
case "cross":
|
||||
// If we are 1x1 force fill 1 block, to avoid an empty 1x1
|
||||
if (x === 0 && y === 0) {
|
||||
|
|
@ -330,7 +344,7 @@ export default {
|
|||
|
||||
break;
|
||||
|
||||
case "inverted-grid":
|
||||
case "inverted grid":
|
||||
if (x === 0 && y === 0) {
|
||||
this.blocks[y][x] = { ...block };
|
||||
continue;
|
||||
|
|
@ -371,7 +385,7 @@ export default {
|
|||
|
||||
break;
|
||||
|
||||
case "lines":
|
||||
case "h lines":
|
||||
if (x === 0 && y === 0) {
|
||||
this.blocks[y][x] = { ...block };
|
||||
continue;
|
||||
|
|
@ -399,6 +413,34 @@ export default {
|
|||
|
||||
break;
|
||||
|
||||
case "v lines":
|
||||
if (x === 0 && y === 0) {
|
||||
this.blocks[y][x] = { ...block };
|
||||
continue;
|
||||
}
|
||||
|
||||
if (x === brushWidth) {
|
||||
this.blocks[y][x] = { ...emptyBlock };
|
||||
} else {
|
||||
this.blocks[y][x] = { ...block };
|
||||
}
|
||||
|
||||
let targetY = y;
|
||||
|
||||
if (screenY % 2 === 0) {
|
||||
screenY -= 1;
|
||||
}
|
||||
|
||||
if (this.blocks[targetY] && this.blocks[targetY][x]) {
|
||||
if (x % 2 === 0) {
|
||||
if (x % 2 === 0) { this.blocks[targetY][x] = { ...block }; }
|
||||
} else {
|
||||
this.blocks[targetY][x] = { ...emptyBlock };
|
||||
}
|
||||
}
|
||||
|
||||
break;
|
||||
|
||||
// default:
|
||||
case "square":
|
||||
this.blocks[y][x] = { ...block };
|
||||
|
|
@ -411,7 +453,7 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
switch(this.brushSizeType) {
|
||||
switch(this.brushSizeType.toLowerCase()) {
|
||||
case "circle":
|
||||
|
||||
let x1 = 0;
|
||||
|
|
|
|||
|
|
@ -49,7 +49,7 @@ export default {
|
|||
}
|
||||
|
||||
// Escape to leave colour or char picker
|
||||
if (e.key === "Escape" && (this.toolbarState.isChoosingChar || this.toolbarState.isChoosingBg || this.toolbarState.isChoosingFg)) {
|
||||
if (e.key === "Escape" && this.haveOpenTabs && !this.textEditing (this.toolbarState.isChoosingChar || this.toolbarState.isChoosingBg || this.toolbarState.isChoosingFg)) {
|
||||
this.$store.commit('changeIsUpdatingFg', false )
|
||||
this.$store.commit('changeIsUpdatingBg', false )
|
||||
this.$store.commit('changeIsUpdatingChar', false )
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ import Toasted from 'vue-toasted';
|
|||
Vue.config.productionTip = false;
|
||||
|
||||
import {
|
||||
FontAwesomeIcon,
|
||||
FontAwesomeIcon,
|
||||
} from '@fortawesome/vue-fontawesome';
|
||||
import './fontAwesome';
|
||||
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ import TButton from 'vue-tailwind/dist/t-button';
|
|||
import TCard from 'vue-tailwind/dist/t-card';
|
||||
import TModal from 'vue-tailwind/dist/t-modal';
|
||||
import TDialog from 'vue-tailwind/dist/t-dialog';
|
||||
import TSelect from 'vue-tailwind/dist/t-select';
|
||||
|
||||
export const tailwindCss = {
|
||||
't-input': {
|
||||
|
|
@ -134,6 +135,19 @@ export const tailwindCss = {
|
|||
}
|
||||
}
|
||||
},
|
||||
't-select': {
|
||||
component: TSelect,
|
||||
props: {
|
||||
wrapped: true,
|
||||
classes: {
|
||||
wrapper: 'relative',
|
||||
input: 'block w-full py-2 pl-3 pr-10 text-black placeholder-gray-400 transition duration-100 ease-in-out bg-white border border-gray-300 rounded shadow-sm bg-none focus:ring-2 focus:ring-blue-500 focus:outline-none focus:ring-opacity-50 disabled:opacity-50 disabled:cursor-not-allowed focus:border-blue-500',
|
||||
arrowWrapper: 'pointer-events-none absolute inset-y-0 right-0 flex items-center px-2',
|
||||
arrow: 'fill-current h-4 w-4'
|
||||
}
|
||||
},
|
||||
// Variants and fixed classes in the same `object` format ...
|
||||
},
|
||||
't-dialog': {
|
||||
component: TDialog,
|
||||
props: {
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче