unit testing start, readme update
This commit is contained in:
parent
30498d7087
commit
5047b8faff
|
|
@ -78,13 +78,15 @@ A most latest production build to use is available at https://asciibird.jewbird.
|
|||
|
||||
# Roadmap and Bug To Fixes
|
||||
|
||||
### v1 is released, thanks pals!
|
||||
## v1 is released, thanks pals!
|
||||
|
||||
* Fix up help modal
|
||||
### Working on now
|
||||
|
||||
* Unit testing
|
||||
* char panel has bg,fg when displaying chars, outline chars if same colours
|
||||
|
||||
### v 1.2
|
||||
|
||||
* Unit testing
|
||||
* More tooltips on other parts, at the moment only Toolbar has tooltips, option to disable tooltips
|
||||
* Fix brush tool for seamless lines when drawing fast
|
||||
* Warning on mirc export if ascii exceeds IRCs 512 per chat line limit.
|
||||
|
|
|
|||
|
|
@ -0,0 +1,3 @@
|
|||
module.exports = {
|
||||
preset: '@vue/cli-plugin-unit-jest'
|
||||
}
|
||||
22
package.json
22
package.json
|
|
@ -5,6 +5,7 @@
|
|||
"scripts": {
|
||||
"serve": "vue-cli-service serve",
|
||||
"build": "vue-cli-service build",
|
||||
"test:unit": "vue-cli-service test:unit",
|
||||
"lint": "vue-cli-service lint"
|
||||
},
|
||||
"dependencies": {
|
||||
|
|
@ -12,6 +13,7 @@
|
|||
"@tailwindcss/postcss7-compat": "npm:@tailwindcss/postcss7-compat",
|
||||
"autoprefixer": "^9",
|
||||
"hack-font": "source-foundry/Hack",
|
||||
"jest-canvas-mock": "^2.3.1",
|
||||
"lz-string": "^1.4.4",
|
||||
"postcss": "^7",
|
||||
"postcss-loader": "^6.1.1",
|
||||
|
|
@ -29,8 +31,10 @@
|
|||
"devDependencies": {
|
||||
"@vue/cli-plugin-babel": "~4.5.0",
|
||||
"@vue/cli-plugin-eslint": "~4.5.0",
|
||||
"@vue/cli-plugin-unit-jest": "~4.5.13",
|
||||
"@vue/cli-plugin-vuex": "~4.5.0",
|
||||
"@vue/cli-service": "~4.5.0",
|
||||
"@vue/test-utils": "^1.0.3",
|
||||
"babel-eslint": "^10.1.0",
|
||||
"eslint": "^6.7.2",
|
||||
"eslint-plugin-import": "^2.20.2",
|
||||
|
|
@ -51,7 +55,23 @@
|
|||
],
|
||||
"parserOptions": {
|
||||
"parser": "babel-eslint"
|
||||
}
|
||||
},
|
||||
"overrides": [
|
||||
{
|
||||
"files": [
|
||||
"**/__tests__/*.{j,t}s?(x)",
|
||||
"**/tests/unit/**/*.spec.{j,t}s?(x)"
|
||||
],
|
||||
"env": {
|
||||
"jest": true
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
"jest": {
|
||||
"setupFiles": [
|
||||
"jest-canvas-mock"
|
||||
]
|
||||
},
|
||||
"browserslist": [
|
||||
"> 1%",
|
||||
|
|
|
|||
|
|
@ -1,5 +1,8 @@
|
|||
<template>
|
||||
<div id="app" @contextmenu.prevent>
|
||||
<div
|
||||
id="app"
|
||||
@contextmenu.prevent
|
||||
>
|
||||
<div v-show="menuBarVisible">
|
||||
<vue-file-toolbar-menu
|
||||
:content="myMenu"
|
||||
|
|
@ -12,8 +15,11 @@
|
|||
|
||||
<About v-if="modalState.about" />
|
||||
<Help v-if="modalState.help" />
|
||||
<EditAscii v-if="asciibirdMeta.length && modalState.editAscii" @updateAscii="updateAsciiDetails" />
|
||||
<PasteAscii v-if="modalState.pasteAscii" />
|
||||
<EditAscii
|
||||
v-if="asciibirdMeta.length && modalState.editAscii"
|
||||
@updateAscii="updateAsciiDetails"
|
||||
/>
|
||||
<PasteAscii v-if="modalState.pasteAscii" />
|
||||
<ImageOverlay v-if="asciibirdMeta.length && modalState.overlay" />
|
||||
|
||||
<KeyboardShortcuts
|
||||
|
|
@ -25,7 +31,10 @@
|
|||
:canvas-y="canvasY"
|
||||
/>
|
||||
|
||||
<context-menu ref="menu" class="z-50">
|
||||
<context-menu
|
||||
ref="menu"
|
||||
class="z-50"
|
||||
>
|
||||
<ul>
|
||||
<li
|
||||
@click="$store.commit('openModal', 'new-ascii')"
|
||||
|
|
@ -55,7 +64,10 @@
|
|||
Options
|
||||
</li>
|
||||
|
||||
<li @click="startImport('mirc')" class="ab-context-menu-item">
|
||||
<li
|
||||
@click="startImport('mirc')"
|
||||
class="ab-context-menu-item"
|
||||
>
|
||||
Import mIRC from File
|
||||
</li>
|
||||
<li
|
||||
|
|
@ -92,7 +104,10 @@
|
|||
>
|
||||
Save Asciibird State
|
||||
</li>
|
||||
<li @click="startImport('asb')" class="ab-context-menu-item">
|
||||
<li
|
||||
@click="startImport('asb')"
|
||||
class="ab-context-menu-item"
|
||||
>
|
||||
Load Asciibird State
|
||||
</li>
|
||||
</ul>
|
||||
|
|
@ -108,7 +123,7 @@
|
|||
style="display: none"
|
||||
ref="asciiInput"
|
||||
@change="onImport()"
|
||||
/>
|
||||
>
|
||||
|
||||
<template v-if="asciibirdMeta.length">
|
||||
<div
|
||||
|
|
@ -133,10 +148,10 @@
|
|||
<t-button
|
||||
class="relative bottom-1 z-40 rounded-3xl h-5"
|
||||
@click="closeTab(key)"
|
||||
><span class="material-icons" style="font-size: 16px"
|
||||
>close</span
|
||||
></t-button
|
||||
>
|
||||
><span
|
||||
class="material-icons"
|
||||
style="font-size: 16px"
|
||||
>close</span></t-button>
|
||||
</span>
|
||||
</t-button>
|
||||
</span>
|
||||
|
|
@ -153,7 +168,10 @@
|
|||
:reset-select="resetSelect"
|
||||
/>
|
||||
|
||||
<Toolbar v-show="toolbarState.visible" :y-offset="scrollOffset" />
|
||||
<Toolbar
|
||||
v-show="toolbarState.visible"
|
||||
:y-offset="scrollOffset"
|
||||
/>
|
||||
|
||||
<DebugPanel
|
||||
:canvas-x="canvasX"
|
||||
|
|
|
|||
|
|
@ -43,7 +43,10 @@
|
|||
|
||||
<div class="flex">
|
||||
<div v-if="panel.tab === 0">
|
||||
<div v-for="(brush, key) in brushHistory" :key="key">
|
||||
<div
|
||||
v-for="(brush, key) in brushHistory"
|
||||
:key="key"
|
||||
>
|
||||
<t-card
|
||||
class="hover:border-blue-900 border-gray-300 bg-gray-200 mt-2"
|
||||
>
|
||||
|
|
@ -82,7 +85,10 @@
|
|||
</p>
|
||||
</div>
|
||||
|
||||
<div v-for="(brush, key) in brushLibrary" :key="key">
|
||||
<div
|
||||
v-for="(brush, key) in brushLibrary"
|
||||
:key="key"
|
||||
>
|
||||
<t-card
|
||||
:class="`hover:border-blue-900 border-gray-300 bg-gray-200 mt-2`"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -13,23 +13,48 @@
|
|||
:y="debugPanelState.y"
|
||||
>
|
||||
<t-card class="h-full">
|
||||
<span class="ml-5" v-html="`Tool: ${getToolName}`" /> <br />
|
||||
<span class="ml-5" v-html="`FgColour: ${currentFg}`" /> <br />
|
||||
<span class="ml-5" v-html="`BgColor: ${currentBg}`" /> <br />
|
||||
<span class="ml-5" v-html="`Char: ${currentChar}`" /> <br />
|
||||
<span
|
||||
class="ml-5"
|
||||
v-html="`Tool: ${getToolName}`"
|
||||
/> <br>
|
||||
<span
|
||||
class="ml-5"
|
||||
v-html="`FgColour: ${currentFg}`"
|
||||
/> <br>
|
||||
<span
|
||||
class="ml-5"
|
||||
v-html="`BgColor: ${currentBg}`"
|
||||
/> <br>
|
||||
<span
|
||||
class="ml-5"
|
||||
v-html="`Char: ${currentChar}`"
|
||||
/> <br>
|
||||
|
||||
<span class="ml-5" v-html="`canvasX: ${canvasX}`" /> <br />
|
||||
<span class="ml-5" v-html="`canvasY: ${canvasY}`" /> <br />
|
||||
<span
|
||||
class="ml-5"
|
||||
v-html="`canvasX: ${canvasX}`"
|
||||
/> <br>
|
||||
<span
|
||||
class="ml-5"
|
||||
v-html="`canvasY: ${canvasY}`"
|
||||
/> <br>
|
||||
|
||||
<span class="ml-5" v-html="`mirrorX: ${mirrorX}`" /> <br />
|
||||
<span class="ml-5" v-html="`mirrorY: ${mirrorY}`" />
|
||||
<span
|
||||
class="ml-5"
|
||||
v-html="`mirrorX: ${mirrorX}`"
|
||||
/> <br>
|
||||
<span
|
||||
class="ml-5"
|
||||
v-html="`mirrorY: ${mirrorY}`"
|
||||
/>
|
||||
|
||||
<br />
|
||||
<br>
|
||||
|
||||
<span class="ml-5"
|
||||
>State Internal Size: {{ asciiStats.stateSize }}
|
||||
<span
|
||||
class="ml-5"
|
||||
>State Internal Size: {{ asciiStats.stateSize }}
|
||||
</span>
|
||||
<br />
|
||||
<br>
|
||||
|
||||
<div class="mb-4 border-t-2">
|
||||
<div
|
||||
|
|
|
|||
|
|
@ -28,7 +28,10 @@
|
|||
:disabled="!canBg && !canText"
|
||||
/>
|
||||
<t-dropdown toggle-on-hover>
|
||||
<span class="ab-checkbox-label" slot="trigger">FG</span>
|
||||
<span
|
||||
class="ab-checkbox-label"
|
||||
slot="trigger"
|
||||
>FG</span>
|
||||
<template>
|
||||
<div
|
||||
class="
|
||||
|
|
@ -55,7 +58,10 @@
|
|||
checked
|
||||
/>
|
||||
<t-dropdown toggle-on-hover>
|
||||
<span class="ab-checkbox-label" slot="trigger">BG</span>
|
||||
<span
|
||||
class="ab-checkbox-label"
|
||||
slot="trigger"
|
||||
>BG</span>
|
||||
<template>
|
||||
<div
|
||||
class="
|
||||
|
|
@ -80,8 +86,14 @@
|
|||
v-model="toolbarState.targetingChar"
|
||||
:disabled="!canFg && !canBg"
|
||||
/>
|
||||
<t-dropdown toggle-on-hover class="">
|
||||
<span class="ab-checkbox-label" slot="trigger">Text</span>
|
||||
<t-dropdown
|
||||
toggle-on-hover
|
||||
class=""
|
||||
>
|
||||
<span
|
||||
class="ab-checkbox-label"
|
||||
slot="trigger"
|
||||
>Text</span>
|
||||
<template>
|
||||
<span
|
||||
class="
|
||||
|
|
@ -92,8 +104,7 @@
|
|||
group-hover:animate-tooltip_show
|
||||
ml-2
|
||||
"
|
||||
>Ignore Characters when Editing</span
|
||||
>
|
||||
>Ignore Characters when Editing</span>
|
||||
</template>
|
||||
</t-dropdown>
|
||||
</label>
|
||||
|
|
@ -114,7 +125,10 @@
|
|||
"
|
||||
>
|
||||
<t-dropdown toggle-on-hover>
|
||||
<span class="material-icons" slot="trigger">more_horiz</span>
|
||||
<span
|
||||
class="material-icons"
|
||||
slot="trigger"
|
||||
>more_horiz</span>
|
||||
<template>
|
||||
<div
|
||||
class="
|
||||
|
|
@ -146,7 +160,10 @@
|
|||
"
|
||||
>
|
||||
<t-dropdown toggle-on-hover>
|
||||
<span class="material-icons" slot="trigger">more_vert</span>
|
||||
<span
|
||||
class="material-icons"
|
||||
slot="trigger"
|
||||
>more_vert</span>
|
||||
<template>
|
||||
<div
|
||||
class="
|
||||
|
|
@ -182,7 +199,10 @@
|
|||
"
|
||||
>
|
||||
<t-dropdown toggle-on-hover>
|
||||
<span class="material-icons" slot="trigger">color_lens</span>
|
||||
<span
|
||||
class="material-icons"
|
||||
slot="trigger"
|
||||
>color_lens</span>
|
||||
<template>
|
||||
<div
|
||||
class="
|
||||
|
|
@ -216,7 +236,10 @@
|
|||
"
|
||||
>
|
||||
<t-dropdown toggle-on-hover>
|
||||
<span class="material-icons" slot="trigger">{{
|
||||
<span
|
||||
class="material-icons"
|
||||
slot="trigger"
|
||||
>{{
|
||||
!this.gridView ? "grid_on" : "grid_off"
|
||||
}}</span>
|
||||
|
||||
|
|
|
|||
|
|
@ -7,18 +7,33 @@
|
|||
>
|
||||
<template v-slot:default>
|
||||
<div class="mt-6 lg:mt-0 rounded shadow bg-white text-center ">
|
||||
<BrushCanvas :blocks="aboutAscii" class="w-32 -right-40 relative" />
|
||||
<BrushCanvas
|
||||
:blocks="aboutAscii"
|
||||
class="w-32 -right-40 relative"
|
||||
/>
|
||||
|
||||
<span class="p-2"><small class="text-blue-400 cursor-pointer"><a href="https://github.com/hughbord/asciibird" target="_blank">Github</a></small> also on <small class="text-blue-400 cursor-pointer"><a href="https://git.tcp.direct/jewbird/asciibird" target="_blank">git.tcp.direct</a></small></span>
|
||||
<span class="p-2"><small class="text-blue-400 cursor-pointer"><a
|
||||
href="https://github.com/hughbord/asciibird"
|
||||
target="_blank"
|
||||
>Github</a></small> also on <small class="text-blue-400 cursor-pointer"><a
|
||||
href="https://git.tcp.direct/jewbird/asciibird"
|
||||
target="_blank"
|
||||
>git.tcp.direct</a></small></span>
|
||||
|
||||
<h1 class="p-2 font-extrabold">Big Shout Outs to Patrons</h1>
|
||||
<span>beenz, xartet, OfMonsters&Crime, mouse, funkpower, Charles, PP4L, octopus, addct, hotline, dingopride, skg, eraser, aaa, chz, L0j1k</span>
|
||||
<h1 class="p-2 font-extrabold">
|
||||
Big Shout Outs to Patrons
|
||||
</h1>
|
||||
<span>beenz, xartet, OfMonsters&Crime, mouse, funkpower, Charles, PP4L, octopus, addct, hotline, dingopride, skg, eraser, aaa, chz, L0j1k</span>
|
||||
|
||||
<h5 class="p-2 font-extrabold">Special Thanks to</h5>
|
||||
<span class="text-sm">slime aka botmaster slime aka knivey for the wonderful bot integration with asciibird, sniff</span>
|
||||
<h5 class="p-2 font-extrabold">
|
||||
Special Thanks to
|
||||
</h5>
|
||||
<span class="text-sm">slime aka botmaster slime aka knivey for the wonderful bot integration with asciibird, sniff</span>
|
||||
|
||||
<h5 class="p-2 font-extrabold">Greetz to</h5>
|
||||
<span class="text-xs">darkmage, l0de, bex, blarf, sludg, shart, chode, corn, ralph, jrra, kuntz, moony, sniff, scd, aztec, astro, anji, b-rex, bengt, butth0le, canada420, clamkin, deakin, dumbguy, ElBurro, interdome, syn, darkness, vae, gowce, moneytree, Retarded, spoon, sylar, zen, bj0rn, stovepipe, morthrane, chrono, acidvegas, again, hgc, durendal, knio, mavericks, pyrex, sh, irie, seirdy, sq, stratum, WeEatnKid, dieforirc, tater, buttvomit, luldangs, MichealK, AnalMan, poccri, vap0r, kakama, fregyXin, kayos, stovepipe, higgs, Audasity, PsyMaster, perplexa, alyosha, Darn, efsenable, EchoShun, dumbguy, HorseCrusherKristian, phobos, COMPUTERS</span>
|
||||
<h5 class="p-2 font-extrabold">
|
||||
Greetz to
|
||||
</h5>
|
||||
<span class="text-xs">darkmage, l0de, bex, blarf, sludg, shart, chode, corn, ralph, jrra, kuntz, moony, sniff, scd, aztec, astro, anji, b-rex, bengt, butth0le, canada420, clamkin, deakin, dumbguy, ElBurro, interdome, syn, darkness, vae, gowce, moneytree, Retarded, spoon, sylar, zen, bj0rn, stovepipe, morthrane, chrono, acidvegas, again, hgc, durendal, knio, mavericks, pyrex, sh, irie, seirdy, sq, stratum, WeEatnKid, dieforirc, tater, buttvomit, luldangs, MichealK, AnalMan, poccri, vap0r, kakama, fregyXin, kayos, stovepipe, higgs, Audasity, PsyMaster, perplexa, alyosha, Darn, efsenable, EchoShun, dumbguy, HorseCrusherKristian, phobos, COMPUTERS</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -27,7 +42,12 @@
|
|||
class="flex justify-between"
|
||||
@click="$store.commit('closeModal', 'about')"
|
||||
>
|
||||
<t-button type="button" class="p-2 w-full"> Ok </t-button>
|
||||
<t-button
|
||||
type="button"
|
||||
class="p-2 w-full"
|
||||
>
|
||||
Ok
|
||||
</t-button>
|
||||
</div>
|
||||
</template>
|
||||
</t-modal>
|
||||
|
|
|
|||
|
|
@ -6,65 +6,75 @@
|
|||
:esc-to-close="true"
|
||||
@closed="$store.commit('closeModal', 'edit-ascii')"
|
||||
>
|
||||
|
||||
<!--Card-->
|
||||
<div>
|
||||
<div class="md:flex mb-6">
|
||||
<div class="md:w-1/3">
|
||||
<label class="block text-gray-600 font-bold md:text-left mb-3 md:mb-0 pr-4" for="my-textarea">
|
||||
Title
|
||||
</label>
|
||||
</div>
|
||||
<div class="md:w-2/3">
|
||||
|
||||
<t-input
|
||||
type="text"
|
||||
name="title"
|
||||
class="form-input block w-full focus:bg-white"
|
||||
v-model="layer.title"
|
||||
max="128"
|
||||
/>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="md:flex mb-6">
|
||||
<div class="md:w-1/3">
|
||||
<label class="block text-gray-600 font-bold md:text-left mb-3 md:mb-0 pr-4" for="my-textfield">
|
||||
Width and Height
|
||||
</label>
|
||||
</div>
|
||||
<div class="md:w-1/3">
|
||||
<t-input
|
||||
type="number"
|
||||
name="width"
|
||||
class="form-input block w-full focus:bg-white"
|
||||
v-model="layer.width"
|
||||
min="1"
|
||||
/>
|
||||
</div>
|
||||
<div class="md:w-1/3">
|
||||
<t-input
|
||||
type="number"
|
||||
name="height"
|
||||
class="form-input block w-full focus:bg-white"
|
||||
v-model="layer.height"
|
||||
min="1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!--Card-->
|
||||
<div>
|
||||
<div class="md:flex mb-6">
|
||||
<div class="md:w-1/3">
|
||||
<label
|
||||
class="block text-gray-600 font-bold md:text-left mb-3 md:mb-0 pr-4"
|
||||
for="my-textarea"
|
||||
>
|
||||
Title
|
||||
</label>
|
||||
</div>
|
||||
<div class="md:w-2/3">
|
||||
<t-input
|
||||
type="text"
|
||||
name="title"
|
||||
class="form-input block w-full focus:bg-white"
|
||||
v-model="layer.title"
|
||||
max="128"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<!--/Card-->
|
||||
|
||||
<div class="md:flex mb-6">
|
||||
<div class="md:w-1/3">
|
||||
<label
|
||||
class="block text-gray-600 font-bold md:text-left mb-3 md:mb-0 pr-4"
|
||||
for="my-textfield"
|
||||
>
|
||||
Width and Height
|
||||
</label>
|
||||
</div>
|
||||
<div class="md:w-1/3">
|
||||
<t-input
|
||||
type="number"
|
||||
name="width"
|
||||
class="form-input block w-full focus:bg-white"
|
||||
v-model="layer.width"
|
||||
min="1"
|
||||
/>
|
||||
</div>
|
||||
<div class="md:w-1/3">
|
||||
<t-input
|
||||
type="number"
|
||||
name="height"
|
||||
class="form-input block w-full focus:bg-white"
|
||||
v-model="layer.height"
|
||||
min="1"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/Card-->
|
||||
|
||||
<template v-slot:footer>
|
||||
<div
|
||||
class="flex justify-between"
|
||||
@click="$store.commit('closeModal', 'edit-ascii')"
|
||||
>
|
||||
<t-button type="button" class="ab-button"> <span class="material-icons relative top-2 pb-4">cancel</span> Cancel </t-button>
|
||||
<t-button type="button" @click="updateAscii()" class="ab-button">
|
||||
<t-button
|
||||
type="button"
|
||||
class="ab-button"
|
||||
>
|
||||
<span class="material-icons relative top-2 pb-4">cancel</span> Cancel
|
||||
</t-button>
|
||||
<t-button
|
||||
type="button"
|
||||
@click="updateAscii()"
|
||||
class="ab-button"
|
||||
>
|
||||
<span class="material-icons relative top-2 pb-4">save</span> Update
|
||||
</t-button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -7,15 +7,29 @@
|
|||
>
|
||||
<template v-slot:default>
|
||||
<div class="mt-6 rounded shadow bg-white">
|
||||
<h1 class="help-h1">Current Features</h1>
|
||||
<h1 class="help-h1">
|
||||
Current Features
|
||||
</h1>
|
||||
|
||||
<ul class="help-list">
|
||||
<li class="help-li">Tabbed ASCII editing</li>
|
||||
<li class="help-li">Layers support</li>
|
||||
<li class="help-li-space">- Show and hide layers</li>
|
||||
<li class="help-li-space">- Change layer order</li>
|
||||
<li class="help-li-space">- Double click to rename layer</li>
|
||||
<li class="help-li-space">- Context menu for layers</li>
|
||||
<li class="help-li">
|
||||
Tabbed ASCII editing
|
||||
</li>
|
||||
<li class="help-li">
|
||||
Layers support
|
||||
</li>
|
||||
<li class="help-li-space">
|
||||
- Show and hide layers
|
||||
</li>
|
||||
<li class="help-li-space">
|
||||
- Change layer order
|
||||
</li>
|
||||
<li class="help-li-space">
|
||||
- Double click to rename layer
|
||||
</li>
|
||||
<li class="help-li-space">
|
||||
- Context menu for layers
|
||||
</li>
|
||||
<li class="help-li">
|
||||
Copy and paste ASCII blocks between tabs with the select tool
|
||||
</li>
|
||||
|
|
@ -23,7 +37,9 @@
|
|||
Remembers state on refresh and when the browser loads, can also
|
||||
export the state to a file and load elsewhere.
|
||||
</li>
|
||||
<li class="help-li-space">- So you never lose your ascii art!</li>
|
||||
<li class="help-li-space">
|
||||
- So you never lose your ascii art!
|
||||
</li>
|
||||
<li class="help-li-space">
|
||||
- Saves layers, brushes data also to same file
|
||||
</li>
|
||||
|
|
@ -33,12 +49,18 @@
|
|||
<li class="help-li">
|
||||
Can export mirc ascii to clipboard, file or HTTP POST
|
||||
</li>
|
||||
<li class="help-li">99 Colour support</li>
|
||||
<li class="help-li">
|
||||
99 Colour support
|
||||
</li>
|
||||
<li class="help-li">
|
||||
Swap fg and bg colours with button click or Alt + r
|
||||
</li>
|
||||
<li class="help-li">Mirror X and Y</li>
|
||||
<li class="help-li">Grid mode with Alt + g</li>
|
||||
<li class="help-li">
|
||||
Mirror X and Y
|
||||
</li>
|
||||
<li class="help-li">
|
||||
Grid mode with Alt + g
|
||||
</li>
|
||||
<li class="help-li">
|
||||
Undo and redo with Ctrl + z and Ctrl + y, undos are set to a limit
|
||||
of 200 at the moment.
|
||||
|
|
@ -54,15 +76,27 @@
|
|||
- If you want to remove the background but keep the text, uncheck FG
|
||||
and Char and eraser the bg only.
|
||||
</li>
|
||||
<li class="help-li">Image overlay to trace images</li>
|
||||
<li class="help-li-space">- Accepts URLs only at the moment</li>
|
||||
<li class="help-li-space">- Can adjust the size and properties</li>
|
||||
<li class="help-li">Toolbar containing</li>
|
||||
<li class="help-li">
|
||||
Image overlay to trace images
|
||||
</li>
|
||||
<li class="help-li-space">
|
||||
- Accepts URLs only at the moment
|
||||
</li>
|
||||
<li class="help-li-space">
|
||||
- Can adjust the size and properties
|
||||
</li>
|
||||
<li class="help-li">
|
||||
Toolbar containing
|
||||
</li>
|
||||
<li class="help-li-space">
|
||||
- Select, to copy, paste and save blocks as brushes
|
||||
</li>
|
||||
<li class="help-li-space">- Text mode, with arrow key support</li>
|
||||
<li class="help-li-space">- Fill background blocks</li>
|
||||
<li class="help-li-space">
|
||||
- Text mode, with arrow key support
|
||||
</li>
|
||||
<li class="help-li-space">
|
||||
- Fill background blocks
|
||||
</li>
|
||||
<li class="help-li-space">
|
||||
- Brush mode, can be controlled with keyboard and mouse
|
||||
</li>
|
||||
|
|
@ -75,7 +109,9 @@
|
|||
<li class="help-li-space">
|
||||
- Fill Eraser - Fill remove blocks by bg, fg or char
|
||||
</li>
|
||||
<li class="help-li">Brush Library and History</li>
|
||||
<li class="help-li">
|
||||
Brush Library and History
|
||||
</li>
|
||||
<li class="help-li-space">
|
||||
- Make circle, square, cross and other brushes by sizes
|
||||
</li>
|
||||
|
|
@ -85,9 +121,15 @@
|
|||
<li class="help-li-space">
|
||||
- Library - Save most used brushes to library
|
||||
</li>
|
||||
<li class="help-li-space">- Brush history is set to a limit of 50</li>
|
||||
<li class="help-li">Brush Preview</li>
|
||||
<li class="help-li-space">- Editable brush preview</li>
|
||||
<li class="help-li-space">
|
||||
- Brush history is set to a limit of 50
|
||||
</li>
|
||||
<li class="help-li">
|
||||
Brush Preview
|
||||
</li>
|
||||
<li class="help-li-space">
|
||||
- Editable brush preview
|
||||
</li>
|
||||
<li class="help-li-space">
|
||||
- Can use the brush tool inside the brush preview
|
||||
</li>
|
||||
|
|
@ -106,18 +148,28 @@
|
|||
</li>
|
||||
</ul>
|
||||
|
||||
<h1 class="help-h1">Roadmap and Bug To Fixes</h1>
|
||||
<h1 class="help-h1">
|
||||
Roadmap and Bug To Fixes
|
||||
</h1>
|
||||
|
||||
<h3 class="help-h3">v1 is released, thanks pals!</h3>
|
||||
<h3 class="help-h3">
|
||||
v1 is released, thanks pals!
|
||||
</h3>
|
||||
|
||||
<ul class="help-list">
|
||||
<li class="help-li">Fix up help modal</li>
|
||||
<li class="help-li">
|
||||
Fix up help modal
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h3 class="help-h3">v 1.2</h3>
|
||||
<h3 class="help-h3">
|
||||
v 1.2
|
||||
</h3>
|
||||
|
||||
<ul class="help-list">
|
||||
<li class="help-li">Unit testing</li>
|
||||
<li class="help-li">
|
||||
Unit testing
|
||||
</li>
|
||||
<li class="help-li">
|
||||
More tooltips on other parts, at the moment only Toolbar has
|
||||
tooltips, option to disable tooltips
|
||||
|
|
@ -139,15 +191,21 @@
|
|||
</li>
|
||||
this reason. We can review the fill feature in a future version of
|
||||
ASCII bird.
|
||||
<li class="help-li">More fill tool options?</li>
|
||||
<li class="help-li">
|
||||
More fill tool options?
|
||||
</li>
|
||||
<li class="help-li">
|
||||
Brush blocks larger than 1x1 can leave undoable blocks
|
||||
</li>
|
||||
<li class="help-li">Half block editing mode</li>
|
||||
<li class="help-li">
|
||||
Half block editing mode
|
||||
</li>
|
||||
<li class="help-li">
|
||||
This one time this ascii exported with a 1 more width and height
|
||||
</li>
|
||||
<li class="help-li">Dark / light modes, different themes</li>
|
||||
<li class="help-li">
|
||||
Dark / light modes, different themes
|
||||
</li>
|
||||
<li class="help-li">
|
||||
Context menus inside the panels can be way off sometimes
|
||||
</li>
|
||||
|
|
@ -158,9 +216,13 @@
|
|||
Expand the brush manager, brush categories, download brushes,
|
||||
import/export brushes
|
||||
</li>
|
||||
<li class="help-li">ASCIIBIRD API ?!</li>
|
||||
<li class="help-li">
|
||||
ASCIIBIRD API ?!
|
||||
</li>
|
||||
|
||||
<h2 class="help-h2">Mobile / Touch Screen support</h2>
|
||||
<h2 class="help-h2">
|
||||
Mobile / Touch Screen support
|
||||
</h2>
|
||||
|
||||
<p>
|
||||
Doesn't exist at the moment. While the underlying functions and code
|
||||
|
|
@ -170,15 +232,27 @@
|
|||
brush around.
|
||||
</p>
|
||||
|
||||
<h1 class="help-h1">Keyboard Shortcuts</h1>
|
||||
<h1 class="help-h1">
|
||||
Keyboard Shortcuts
|
||||
</h1>
|
||||
|
||||
<h2 class="help-h2">ASCII Editing</h2>
|
||||
<h2 class="help-h2">
|
||||
ASCII Editing
|
||||
</h2>
|
||||
|
||||
<li class="help-li">Ctrl + Z - Undo</li>
|
||||
<li class="help-li">Ctrl + Y - Redo</li>
|
||||
<li class="help-li">
|
||||
Ctrl + Z - Undo
|
||||
</li>
|
||||
<li class="help-li">
|
||||
Ctrl + Y - Redo
|
||||
</li>
|
||||
|
||||
<li class="help-li">F1 - Toggle Help</li>
|
||||
<li class="help-li">Shift + F1 - About ASCIIBIRD and shout outs</li>
|
||||
<li class="help-li">
|
||||
F1 - Toggle Help
|
||||
</li>
|
||||
<li class="help-li">
|
||||
Shift + F1 - About ASCIIBIRD and shout outs
|
||||
</li>
|
||||
|
||||
<li class="help-li">
|
||||
Escape - Return to default mode, stop using any tool and close fg,
|
||||
|
|
@ -189,7 +263,9 @@
|
|||
Alt 1 to 8 - Will toggle the corresponding toolbar icon
|
||||
</li>
|
||||
|
||||
<li class="help-li">Ctrl 1 to 0 - Change ASCII tab if possible</li>
|
||||
<li class="help-li">
|
||||
Ctrl 1 to 0 - Change ASCII tab if possible
|
||||
</li>
|
||||
|
||||
<li class="help-li">
|
||||
Alt + c - Opens character Panel (You can then press on the keyboard
|
||||
|
|
@ -204,72 +280,156 @@
|
|||
colour)
|
||||
</li>
|
||||
|
||||
<li class="help-li">Alt + g - Toggle grid mode</li>
|
||||
<li class="help-li">
|
||||
Alt + g - Toggle grid mode
|
||||
</li>
|
||||
|
||||
<li class="help-li">Alt + x - Toggle Mirror X</li>
|
||||
<li class="help-li">Alt + y - Toggle Mirror Y</li>
|
||||
<li class="help-li">
|
||||
Alt + x - Toggle Mirror X
|
||||
</li>
|
||||
<li class="help-li">
|
||||
Alt + y - Toggle Mirror Y
|
||||
</li>
|
||||
<li class="help-li">
|
||||
Alt + u - Toggle Update Brush (change brush preview if fg, bg or
|
||||
char changes)
|
||||
</li>
|
||||
<li class="help-li">Alt + r - Flip FG and BG colours</li>
|
||||
<li class="help-li">
|
||||
Alt + r - Flip FG and BG colours
|
||||
</li>
|
||||
|
||||
<li class="help-li">Ctrl + e - Edit ASCII</li>
|
||||
<li class="help-li">Ctrl + r - Close ASCII</li>
|
||||
<li class="help-li">Ctrl + m - New ASCII (can't use ctrl + n)</li>
|
||||
<li class="help-li">Ctrl + o - Toggle Asciibird Options</li>
|
||||
<li class="help-li">
|
||||
Ctrl + e - Edit ASCII
|
||||
</li>
|
||||
<li class="help-li">
|
||||
Ctrl + r - Close ASCII
|
||||
</li>
|
||||
<li class="help-li">
|
||||
Ctrl + m - New ASCII (can't use ctrl + n)
|
||||
</li>
|
||||
<li class="help-li">
|
||||
Ctrl + o - Toggle Asciibird Options
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h3 class="help-h3">Importing</h3>
|
||||
<h3 class="help-h3">
|
||||
Importing
|
||||
</h3>
|
||||
<ul class="help-list">
|
||||
<li class="help-li">
|
||||
Ctrl + Shift + o - Open mIRC TXT File as new Ascii
|
||||
</li>
|
||||
<li class="help-li">Ctrl + Shift + v - Paste New Ascii</li>
|
||||
<li class="help-li">
|
||||
Ctrl + Shift + v - Paste New Ascii
|
||||
</li>
|
||||
</ul>
|
||||
<h3 class="help-h3">Exporting</h3>
|
||||
<h3 class="help-h3">
|
||||
Exporting
|
||||
</h3>
|
||||
<ul class="help-list">
|
||||
<li class="help-li">Ctrl + Shift + C - Copy to clipboard</li>
|
||||
<li class="help-li">Ctrl + Shift + F - Save to TXT file</li>
|
||||
<li class="help-li">Ctrl + Shift + G - Save to PNG file</li>
|
||||
<li class="help-li">Ctrl + Shift + H - Save to HTTP Post</li>
|
||||
<li class="help-li">
|
||||
Ctrl + Shift + C - Copy to clipboard
|
||||
</li>
|
||||
<li class="help-li">
|
||||
Ctrl + Shift + F - Save to TXT file
|
||||
</li>
|
||||
<li class="help-li">
|
||||
Ctrl + Shift + G - Save to PNG file
|
||||
</li>
|
||||
<li class="help-li">
|
||||
Ctrl + Shift + H - Save to HTTP Post
|
||||
</li>
|
||||
</ul>
|
||||
<h2 class="help-h2">Showing / Hiding menus, tabs and panels</h2>
|
||||
<h2 class="help-h2">
|
||||
Showing / Hiding menus, tabs and panels
|
||||
</h2>
|
||||
<ul class="help-list">
|
||||
<li class="help-li">Ctrl + Alt + t - Hide / Show Tabs</li>
|
||||
<li class="help-li">Ctrl + Alt + m - Hide / Show Menu</li>
|
||||
<li class="help-li">Ctrl + Alt + d - Hide / Show Debug Panel</li>
|
||||
<li class="help-li">Ctrl + Alt + b - Hide / Show Brush Library</li>
|
||||
<li class="help-li">Ctrl + Alt + l - Hide / Show Layers</li>
|
||||
<li class="help-li">Ctrl + Alt + n - Hide / Show Toolbar</li>
|
||||
<li class="help-li">Ctrl + Alt + e - Hide / Show Brush Preview</li>
|
||||
<li class="help-li">
|
||||
Ctrl + Alt + t - Hide / Show Tabs
|
||||
</li>
|
||||
<li class="help-li">
|
||||
Ctrl + Alt + m - Hide / Show Menu
|
||||
</li>
|
||||
<li class="help-li">
|
||||
Ctrl + Alt + d - Hide / Show Debug Panel
|
||||
</li>
|
||||
<li class="help-li">
|
||||
Ctrl + Alt + b - Hide / Show Brush Library
|
||||
</li>
|
||||
<li class="help-li">
|
||||
Ctrl + Alt + l - Hide / Show Layers
|
||||
</li>
|
||||
<li class="help-li">
|
||||
Ctrl + Alt + n - Hide / Show Toolbar
|
||||
</li>
|
||||
<li class="help-li">
|
||||
Ctrl + Alt + e - Hide / Show Brush Preview
|
||||
</li>
|
||||
</ul>
|
||||
<h2 class="help-h2">Select Mode</h2>
|
||||
<h2 class="help-h2">
|
||||
Select Mode
|
||||
</h2>
|
||||
<ul class="help-list">
|
||||
<li class="help-li">Ctrl + c - Copy blocks to clipboard</li>
|
||||
<li class="help-li">Ctrl + x - Cut blocks to clipboard</li>
|
||||
<li class="help-li">Ctrl + v - Paste blocks as brush</li>
|
||||
<li class="help-li">Ctrl + b - Save Selection to Library</li>
|
||||
<li class="help-li">Delete - Delete selected blocks</li>
|
||||
<li class="help-li">
|
||||
Ctrl + c - Copy blocks to clipboard
|
||||
</li>
|
||||
<li class="help-li">
|
||||
Ctrl + x - Cut blocks to clipboard
|
||||
</li>
|
||||
<li class="help-li">
|
||||
Ctrl + v - Paste blocks as brush
|
||||
</li>
|
||||
<li class="help-li">
|
||||
Ctrl + b - Save Selection to Library
|
||||
</li>
|
||||
<li class="help-li">
|
||||
Delete - Delete selected blocks
|
||||
</li>
|
||||
</ul>
|
||||
<h2 class="help-h2">Eraser Mode</h2>
|
||||
<h2 class="help-h2">
|
||||
Eraser Mode
|
||||
</h2>
|
||||
<ul class="help-list">
|
||||
<li class="help-li">Four arrow keys control eraser cursor</li>
|
||||
<li class="help-li">Space - apply eraser</li>
|
||||
<li class="help-li">
|
||||
Four arrow keys control eraser cursor
|
||||
</li>
|
||||
<li class="help-li">
|
||||
Space - apply eraser
|
||||
</li>
|
||||
</ul>
|
||||
<h2 class="help-h2">Brush Mode</h2>
|
||||
<h2 class="help-h2">
|
||||
Brush Mode
|
||||
</h2>
|
||||
<ul class="help-list">
|
||||
<li class="help-li">Four arrow keys control text cursor</li>
|
||||
<li class="help-li">Space - apply brush</li>
|
||||
<li class="help-li">Ctrl + ] - Increase both brush sizes by 1</li>
|
||||
<li class="help-li">Ctrl + [ - Decrease both brush sizes by 1</li>
|
||||
<li class="help-li">e - rotate brush</li>
|
||||
<li class="help-li">q - flip brush</li>
|
||||
<li class="help-li">
|
||||
Four arrow keys control text cursor
|
||||
</li>
|
||||
<li class="help-li">
|
||||
Space - apply brush
|
||||
</li>
|
||||
<li class="help-li">
|
||||
Ctrl + ] - Increase both brush sizes by 1
|
||||
</li>
|
||||
<li class="help-li">
|
||||
Ctrl + [ - Decrease both brush sizes by 1
|
||||
</li>
|
||||
<li class="help-li">
|
||||
e - rotate brush
|
||||
</li>
|
||||
<li class="help-li">
|
||||
q - flip brush
|
||||
</li>
|
||||
</ul>
|
||||
<h2 class="help-h2">Text mode</h2>
|
||||
<h2 class="help-h2">
|
||||
Text mode
|
||||
</h2>
|
||||
<ul class="help-list">
|
||||
<li class="help-li">Four arrow keys control text cursor</li>
|
||||
<li class="help-li">Delete - Remove text from highlighted block</li>
|
||||
<li class="help-li">
|
||||
Four arrow keys control text cursor
|
||||
</li>
|
||||
<li class="help-li">
|
||||
Delete - Remove text from highlighted block
|
||||
</li>
|
||||
<li class="help-li">
|
||||
Backspace - Remove current character and move to previous block
|
||||
</li>
|
||||
|
|
@ -277,17 +437,35 @@
|
|||
Enter - Go to next line and reset X position to 0
|
||||
</li>
|
||||
</ul>
|
||||
<h3 class="help-h3">Layers Related</h3>
|
||||
<h3 class="help-h3">
|
||||
Layers Related
|
||||
</h3>
|
||||
<ul class="help-list">
|
||||
<li class="help-li">Ctrl + Shift + t - Show / Hide Layer</li>
|
||||
<li class="help-li">Ctrl + Shift + r - Rename Layer</li>
|
||||
<li class="help-li">Ctrl + Shift + a - Add Layer</li>
|
||||
<li class="help-li">Ctrl + Shift + d - Delete Layer</li>
|
||||
<li class="help-li">Ctrl + Shift + s - Move Layer Down</li>
|
||||
<li class="help-li">Ctrl + Shift + w - Move Layer Up</li>
|
||||
<li class="help-li">Ctrl + Shift + m - Merge All Layers</li>
|
||||
<li class="help-li">
|
||||
Ctrl + Shift + t - Show / Hide Layer
|
||||
</li>
|
||||
<li class="help-li">
|
||||
Ctrl + Shift + r - Rename Layer
|
||||
</li>
|
||||
<li class="help-li">
|
||||
Ctrl + Shift + a - Add Layer
|
||||
</li>
|
||||
<li class="help-li">
|
||||
Ctrl + Shift + d - Delete Layer
|
||||
</li>
|
||||
<li class="help-li">
|
||||
Ctrl + Shift + s - Move Layer Down
|
||||
</li>
|
||||
<li class="help-li">
|
||||
Ctrl + Shift + w - Move Layer Up
|
||||
</li>
|
||||
<li class="help-li">
|
||||
Ctrl + Shift + m - Merge All Layers
|
||||
</li>
|
||||
</ul>
|
||||
<h1 class="help-h1">Context Menus (right click menus)</h1>
|
||||
<h1 class="help-h1">
|
||||
Context Menus (right click menus)
|
||||
</h1>
|
||||
<ul class="help-list">
|
||||
<li class="help-li">
|
||||
Right clicking on any brush preview in the main area or library will
|
||||
|
|
@ -313,7 +491,12 @@
|
|||
class="flex justify-between"
|
||||
@click="$store.commit('closeModal', 'help')"
|
||||
>
|
||||
<t-button type="button" class="p-2 w-full"> Ok </t-button>
|
||||
<t-button
|
||||
type="button"
|
||||
class="p-2 w-full"
|
||||
>
|
||||
Ok
|
||||
</t-button>
|
||||
</div>
|
||||
</template>
|
||||
</t-modal>
|
||||
|
|
|
|||
|
|
@ -7,201 +7,211 @@
|
|||
@closed="$store.commit('closeModal', 'overlay')"
|
||||
>
|
||||
<template v-slot:default>
|
||||
|
||||
<!--Card-->
|
||||
<div>
|
||||
<div class="md:flex mb-6">
|
||||
<div class="md:w-1/3">
|
||||
<label class="block text-gray-600 font-bold md:text-left mb-3 md:mb-0 pr-4" for="my-textarea">
|
||||
URL
|
||||
</label>
|
||||
</div>
|
||||
<div class="md:w-2/3">
|
||||
|
||||
<t-input type="text" name="url" v-model="imageOverlay.url" />
|
||||
<div class="md:flex mb-6">
|
||||
<div class="md:w-1/3">
|
||||
<label
|
||||
class="block text-gray-600 font-bold md:text-left mb-3 md:mb-0 pr-4"
|
||||
for="my-textarea"
|
||||
>
|
||||
URL
|
||||
</label>
|
||||
</div>
|
||||
<div class="md:w-2/3">
|
||||
<t-input
|
||||
type="text"
|
||||
name="url"
|
||||
v-model="imageOverlay.url"
|
||||
/>
|
||||
|
||||
<p class="py-2 text-sm text-gray-600">Note: ASCIIBIRD only supports URL images</p>
|
||||
<p class="py-2 text-sm text-gray-600">
|
||||
Note: ASCIIBIRD only supports URL images
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="md:flex mb-6">
|
||||
<div class="md:w-1/3">
|
||||
<label class="block text-gray-600 font-bold md:text-left mb-3 md:mb-0 pr-4" for="my-textfield">
|
||||
Visibility
|
||||
</label>
|
||||
</div>
|
||||
<div class="md:w-1/3">
|
||||
<label class="ml-1 w-1/3">
|
||||
<t-checkbox
|
||||
class="form-checkbox m-1"
|
||||
name="visible"
|
||||
v-model="imageOverlay.visible"
|
||||
/>
|
||||
<span class="text-sm">Visible</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="md:flex mb-6">
|
||||
<div class="md:w-1/3">
|
||||
<label
|
||||
class="block text-gray-600 font-bold md:text-left mb-3 md:mb-0 pr-4"
|
||||
for="my-textfield"
|
||||
>
|
||||
Visibility
|
||||
</label>
|
||||
</div>
|
||||
<div class="md:w-1/3">
|
||||
<label class="ml-1 w-1/3">
|
||||
<t-checkbox
|
||||
class="form-checkbox m-1"
|
||||
name="visible"
|
||||
v-model="imageOverlay.visible"
|
||||
/>
|
||||
<span class="text-sm">Visible</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="md:flex mb-6">
|
||||
<div class="md:w-1/3">
|
||||
<label class="block text-gray-600 font-bold md:text-left mb-3 md:mb-0 pr-4" for="my-textfield">
|
||||
Overlay Transparency
|
||||
</label>
|
||||
</div>
|
||||
<div class="md:w-1/2">
|
||||
<div class="md:flex mb-6">
|
||||
<div class="md:w-1/3">
|
||||
<label
|
||||
class="block text-gray-600 font-bold md:text-left mb-3 md:mb-0 pr-4"
|
||||
for="my-textfield"
|
||||
>
|
||||
Overlay Transparency
|
||||
</label>
|
||||
</div>
|
||||
<div class="md:w-1/2">
|
||||
<vue-slider
|
||||
class="m-1"
|
||||
v-model="imageOverlay.opacity"
|
||||
:min="1"
|
||||
:max="100"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<vue-slider
|
||||
class="m-1"
|
||||
v-model="imageOverlay.opacity"
|
||||
:min="1"
|
||||
:max="100"
|
||||
></vue-slider>
|
||||
<div class="md:flex mb-6">
|
||||
<div class="md:w-1/3">
|
||||
<label
|
||||
class="block text-gray-600 font-bold md:text-left mb-3 md:mb-0 pr-4"
|
||||
for="my-textfield"
|
||||
>
|
||||
ASCII Transparency
|
||||
</label>
|
||||
</div>
|
||||
<div class="md:w-1/2">
|
||||
<vue-slider
|
||||
class="m-1"
|
||||
v-model="imageOverlay.asciiOpacity"
|
||||
:min="1"
|
||||
:max="100"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="md:flex mb-6">
|
||||
<div class="md:w-1/3">
|
||||
<label class="block text-gray-600 font-bold md:text-left mb-3 md:mb-0 pr-4" for="my-textfield">
|
||||
ASCII Transparency
|
||||
</label>
|
||||
</div>
|
||||
<div class="md:w-1/2">
|
||||
|
||||
<vue-slider
|
||||
class="m-1"
|
||||
v-model="imageOverlay.asciiOpacity"
|
||||
:min="1"
|
||||
:max="100"
|
||||
></vue-slider>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="md:flex mb-6">
|
||||
<div class="md:w-1/3">
|
||||
<label class="block text-gray-600 font-bold md:text-left mb-3 md:mb-0 pr-4" for="my-textfield">
|
||||
Image Scale
|
||||
</label>
|
||||
</div>
|
||||
<div class="md:w-1/2">
|
||||
|
||||
<vue-slider
|
||||
class="m-1"
|
||||
v-model="imageOverlay.size"
|
||||
:min="10"
|
||||
:max="100"
|
||||
></vue-slider>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="md:flex mb-6">
|
||||
<div class="md:w-1/3">
|
||||
<label
|
||||
class="block text-gray-600 font-bold md:text-left mb-3 md:mb-0 pr-4"
|
||||
for="my-textfield"
|
||||
>
|
||||
Image Scale
|
||||
</label>
|
||||
</div>
|
||||
<div class="md:w-1/2">
|
||||
<vue-slider
|
||||
class="m-1"
|
||||
v-model="imageOverlay.size"
|
||||
:min="10"
|
||||
:max="100"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="md:flex mb-6">
|
||||
<div class="md:w-1/3">
|
||||
<label class="block text-gray-600 font-bold md:text-left mb-3 md:mb-0 pr-4" for="my-textfield">
|
||||
Left
|
||||
</label>
|
||||
</div>
|
||||
<div class="md:w-1/2">
|
||||
<div class="md:flex mb-6">
|
||||
<div class="md:w-1/3">
|
||||
<label
|
||||
class="block text-gray-600 font-bold md:text-left mb-3 md:mb-0 pr-4"
|
||||
for="my-textfield"
|
||||
>
|
||||
Left
|
||||
</label>
|
||||
</div>
|
||||
<div class="md:w-1/2">
|
||||
<vue-slider
|
||||
class="m-1"
|
||||
v-model="imageOverlay.left"
|
||||
:min="0"
|
||||
:max="100"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<vue-slider
|
||||
class="m-1"
|
||||
v-model="imageOverlay.left"
|
||||
:min="0"
|
||||
:max="100"
|
||||
></vue-slider>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="md:flex mb-6">
|
||||
<div class="md:w-1/3">
|
||||
<label class="block text-gray-600 font-bold md:text-left mb-3 md:mb-0 pr-4" for="my-textfield">
|
||||
Top
|
||||
</label>
|
||||
</div>
|
||||
<div class="md:w-1/2">
|
||||
|
||||
<vue-slider
|
||||
class="m-1"
|
||||
v-model="imageOverlay.top"
|
||||
:min="0"
|
||||
:max="100"
|
||||
></vue-slider>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="md:flex mb-6">
|
||||
<div class="md:w-1/3">
|
||||
<label
|
||||
class="block text-gray-600 font-bold md:text-left mb-3 md:mb-0 pr-4"
|
||||
for="my-textfield"
|
||||
>
|
||||
Top
|
||||
</label>
|
||||
</div>
|
||||
<div class="md:w-1/2">
|
||||
<vue-slider
|
||||
class="m-1"
|
||||
v-model="imageOverlay.top"
|
||||
:min="0"
|
||||
:max="100"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="md:flex mb-6">
|
||||
<div class="md:w-1/3">
|
||||
<label class="block text-gray-600 font-bold md:text-left mb-3 md:mb-0 pr-4" for="my-textfield">
|
||||
Fit To
|
||||
</label>
|
||||
</div>
|
||||
<div class="md:w-1/2">
|
||||
<label class="items-center">
|
||||
<t-radio
|
||||
name="options"
|
||||
:value="true"
|
||||
v-model="imageOverlay.stretched"
|
||||
/>
|
||||
<span class="ml-2 text-sm">ASCII</span>
|
||||
</label>
|
||||
<label class="items-center ml-2">
|
||||
<t-radio
|
||||
name="options"
|
||||
:value="false"
|
||||
v-model="imageOverlay.stretched"
|
||||
/>
|
||||
<span class="ml-2 text-sm">Image Size</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="md:flex mb-6">
|
||||
<div class="md:w-1/3">
|
||||
<label
|
||||
class="block text-gray-600 font-bold md:text-left mb-3 md:mb-0 pr-4"
|
||||
for="my-textfield"
|
||||
>
|
||||
Fit To
|
||||
</label>
|
||||
</div>
|
||||
<div class="md:w-1/2">
|
||||
<label class="items-center">
|
||||
<t-radio
|
||||
name="options"
|
||||
:value="true"
|
||||
v-model="imageOverlay.stretched"
|
||||
/>
|
||||
<span class="ml-2 text-sm">ASCII</span>
|
||||
</label>
|
||||
<label class="items-center ml-2">
|
||||
<t-radio
|
||||
name="options"
|
||||
:value="false"
|
||||
v-model="imageOverlay.stretched"
|
||||
/>
|
||||
<span class="ml-2 text-sm">Image Size</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="md:flex mb-6">
|
||||
<div class="md:w-1/3">
|
||||
<label class="block text-gray-600 font-bold md:text-left mb-3 md:mb-0 pr-4" for="my-textfield">
|
||||
Repeat
|
||||
</label>
|
||||
</div>
|
||||
<div class="md:w-1/2">
|
||||
<label class="ml-1 w-1/3">
|
||||
<t-checkbox
|
||||
class="form-checkbox m-1"
|
||||
name="repeatx"
|
||||
v-model="imageOverlay.repeatx"
|
||||
/>
|
||||
<span class="text-sm">X</span>
|
||||
</label>
|
||||
|
||||
<label class="ml-1 w-1/3 pl-4">
|
||||
<t-checkbox
|
||||
class="form-checkbox m-1"
|
||||
name="repeatx"
|
||||
v-model="imageOverlay.repeaty"
|
||||
/>
|
||||
<span class="text-sm">Y</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="md:flex mb-6">
|
||||
<div class="md:w-1/3">
|
||||
<label
|
||||
class="block text-gray-600 font-bold md:text-left mb-3 md:mb-0 pr-4"
|
||||
for="my-textfield"
|
||||
>
|
||||
Repeat
|
||||
</label>
|
||||
</div>
|
||||
<div class="md:w-1/2">
|
||||
<label class="ml-1 w-1/3">
|
||||
<t-checkbox
|
||||
class="form-checkbox m-1"
|
||||
name="repeatx"
|
||||
v-model="imageOverlay.repeatx"
|
||||
/>
|
||||
<span class="text-sm">X</span>
|
||||
</label>
|
||||
|
||||
<label class="ml-1 w-1/3 pl-4">
|
||||
<t-checkbox
|
||||
class="form-checkbox m-1"
|
||||
name="repeatx"
|
||||
v-model="imageOverlay.repeaty"
|
||||
/>
|
||||
<span class="text-sm">Y</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/Card-->
|
||||
|
||||
</template>
|
||||
|
||||
<template v-slot:footer>
|
||||
|
|
@ -209,8 +219,18 @@
|
|||
class="flex justify-between"
|
||||
@click="$store.commit('closeModal', 'overlay')"
|
||||
>
|
||||
<t-button type="button" class="ab-button"> <span class="material-icons relative top-2 pb-4">cancel</span> Cancel </t-button>
|
||||
<t-button type="button" class="ab-button"> <span class="material-icons relative top-2 pb-4">save</span> Ok </t-button>
|
||||
<t-button
|
||||
type="button"
|
||||
class="ab-button"
|
||||
>
|
||||
<span class="material-icons relative top-2 pb-4">cancel</span> Cancel
|
||||
</t-button>
|
||||
<t-button
|
||||
type="button"
|
||||
class="ab-button"
|
||||
>
|
||||
<span class="material-icons relative top-2 pb-4">save</span> Ok
|
||||
</t-button>
|
||||
</div>
|
||||
</template>
|
||||
</t-modal>
|
||||
|
|
|
|||
|
|
@ -6,65 +6,75 @@
|
|||
:esc-to-close="true"
|
||||
@closed="$store.commit('closeModal', 'new-ascii')"
|
||||
>
|
||||
|
||||
<!--Card-->
|
||||
<div>
|
||||
<div class="md:flex mb-6">
|
||||
<div class="md:w-1/3">
|
||||
<label class="block text-gray-600 font-bold md:text-left mb-3 md:mb-0 pr-4" for="my-textarea">
|
||||
Title
|
||||
</label>
|
||||
</div>
|
||||
<div class="md:w-2/3">
|
||||
|
||||
<t-input
|
||||
type="text"
|
||||
name="title"
|
||||
class="form-input block w-full focus:bg-white"
|
||||
v-model="forms.createAscii.title"
|
||||
max="128"
|
||||
/>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="md:flex mb-6">
|
||||
<div class="md:w-1/3">
|
||||
<label class="block text-gray-600 font-bold md:text-left mb-3 md:mb-0 pr-4" for="my-textfield">
|
||||
Width and Height
|
||||
</label>
|
||||
</div>
|
||||
<div class="md:w-1/3">
|
||||
<t-input
|
||||
type="number"
|
||||
name="width"
|
||||
class="form-input block w-full focus:bg-white"
|
||||
v-model="forms.createAscii.width"
|
||||
min="1"
|
||||
/>
|
||||
</div>
|
||||
<div class="md:w-1/3">
|
||||
<t-input
|
||||
type="number"
|
||||
name="height"
|
||||
class="form-input block w-full focus:bg-white"
|
||||
v-model="forms.createAscii.height"
|
||||
min="1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!--Card-->
|
||||
<div>
|
||||
<div class="md:flex mb-6">
|
||||
<div class="md:w-1/3">
|
||||
<label
|
||||
class="block text-gray-600 font-bold md:text-left mb-3 md:mb-0 pr-4"
|
||||
for="my-textarea"
|
||||
>
|
||||
Title
|
||||
</label>
|
||||
</div>
|
||||
<div class="md:w-2/3">
|
||||
<t-input
|
||||
type="text"
|
||||
name="title"
|
||||
class="form-input block w-full focus:bg-white"
|
||||
v-model="forms.createAscii.title"
|
||||
max="128"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<!--/Card-->
|
||||
|
||||
<div class="md:flex mb-6">
|
||||
<div class="md:w-1/3">
|
||||
<label
|
||||
class="block text-gray-600 font-bold md:text-left mb-3 md:mb-0 pr-4"
|
||||
for="my-textfield"
|
||||
>
|
||||
Width and Height
|
||||
</label>
|
||||
</div>
|
||||
<div class="md:w-1/3">
|
||||
<t-input
|
||||
type="number"
|
||||
name="width"
|
||||
class="form-input block w-full focus:bg-white"
|
||||
v-model="forms.createAscii.width"
|
||||
min="1"
|
||||
/>
|
||||
</div>
|
||||
<div class="md:w-1/3">
|
||||
<t-input
|
||||
type="number"
|
||||
name="height"
|
||||
class="form-input block w-full focus:bg-white"
|
||||
v-model="forms.createAscii.height"
|
||||
min="1"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/Card-->
|
||||
|
||||
<template v-slot:footer>
|
||||
<div
|
||||
class="flex justify-between"
|
||||
|
||||
>
|
||||
<t-button type="button" class="ab-button" @click="$store.commit('closeModal', 'new-ascii')"> <span class="material-icons relative top-2 pb-4">cancel</span> Cancel </t-button>
|
||||
<t-button type="button" class="ab-button" @click="initiateNewAscii()">
|
||||
<t-button
|
||||
type="button"
|
||||
class="ab-button"
|
||||
@click="$store.commit('closeModal', 'new-ascii')"
|
||||
>
|
||||
<span class="material-icons relative top-2 pb-4">cancel</span> Cancel
|
||||
</t-button>
|
||||
<t-button
|
||||
type="button"
|
||||
class="ab-button"
|
||||
@click="initiateNewAscii()"
|
||||
>
|
||||
<span class="material-icons relative top-2 pb-4">save</span> Create
|
||||
</t-button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -17,21 +17,20 @@
|
|||
@dragend="updateOptions"
|
||||
:min="1"
|
||||
:max="200"
|
||||
></vue-slider>
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<label class="ml-1">
|
||||
<span class="text-lg">Render Offscreen Blocks</span><br />
|
||||
<span class="text-lg">Render Offscreen Blocks</span><br>
|
||||
<t-checkbox
|
||||
class="form-checkbox m-1"
|
||||
name="renderOffScreen"
|
||||
v-model="options.renderOffScreen"
|
||||
@change="updateOptions"
|
||||
/>
|
||||
<small
|
||||
>ASCIIBIRD will avoid rendering blocks off screen to speed things
|
||||
<small>ASCIIBIRD will avoid rendering blocks off screen to speed things
|
||||
up.
|
||||
</small>
|
||||
</label>
|
||||
|
|
@ -46,7 +45,7 @@
|
|||
@dragend="updateOptions"
|
||||
:min="1"
|
||||
:max="maxBrushHistory"
|
||||
></vue-slider>
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
|
|
@ -59,17 +58,15 @@
|
|||
@dragend="updateOptions"
|
||||
:min="1"
|
||||
:max="maxUndoHistory"
|
||||
></vue-slider>
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="mb-4 border-t-2">
|
||||
<label class="ml-1">
|
||||
<span class="text-lg">Reset ASCIIBIRD state</span><br />
|
||||
<small
|
||||
>This will clear all data and start asciibird from a fresh
|
||||
state.</small
|
||||
><br />
|
||||
<span class="text-lg">Reset ASCIIBIRD state</span><br>
|
||||
<small>This will clear all data and start asciibird from a fresh
|
||||
state.</small><br>
|
||||
<div
|
||||
class="mt-1 p-2 bg-red-300 rounded-md cursor-pointer"
|
||||
@click="clearCache()"
|
||||
|
|
@ -86,8 +83,18 @@
|
|||
class="flex justify-between"
|
||||
@click="$store.commit('closeModal', 'options')"
|
||||
>
|
||||
<t-button type="button" class="ab-button"> <span class="material-icons relative top-2 pb-4">cancel</span> Cancel </t-button>
|
||||
<t-button type="button" class="ab-button"> <span class="material-icons relative top-2 pb-4">save</span> Ok </t-button>
|
||||
<t-button
|
||||
type="button"
|
||||
class="ab-button"
|
||||
>
|
||||
<span class="material-icons relative top-2 pb-4">cancel</span> Cancel
|
||||
</t-button>
|
||||
<t-button
|
||||
type="button"
|
||||
class="ab-button"
|
||||
>
|
||||
<span class="material-icons relative top-2 pb-4">save</span> Ok
|
||||
</t-button>
|
||||
</div>
|
||||
</template>
|
||||
</t-modal>
|
||||
|
|
|
|||
|
|
@ -7,9 +7,18 @@
|
|||
@closed="$store.commit('closeModal', 'paste-ascii')"
|
||||
>
|
||||
Title
|
||||
<t-input type="text" name="title" v-model="title" max="128" />
|
||||
<t-input
|
||||
type="text"
|
||||
name="title"
|
||||
v-model="title"
|
||||
max="128"
|
||||
/>
|
||||
|
||||
<t-textarea v-model="pasteContent" name="paste-ascii" rows="10" />
|
||||
<t-textarea
|
||||
v-model="pasteContent"
|
||||
name="paste-ascii"
|
||||
rows="10"
|
||||
/>
|
||||
|
||||
<template v-slot:footer>
|
||||
<div class="flex justify-between">
|
||||
|
|
|
|||
|
|
@ -14,18 +14,33 @@
|
|||
/>
|
||||
</div>
|
||||
|
||||
<context-menu :ref="`block-menu-${hash}`" class="z-50">
|
||||
<context-menu
|
||||
:ref="`block-menu-${hash}`"
|
||||
class="z-50"
|
||||
>
|
||||
<ul>
|
||||
<li @click="canvasToPng()" class="ab-context-menu-item">
|
||||
<li
|
||||
@click="canvasToPng()"
|
||||
class="ab-context-menu-item"
|
||||
>
|
||||
Save as PNG
|
||||
</li>
|
||||
<li @click="startExport('clipboard')" class="ab-context-menu-item">
|
||||
<li
|
||||
@click="startExport('clipboard')"
|
||||
class="ab-context-menu-item"
|
||||
>
|
||||
Export Brush to mIRC Clipboard
|
||||
</li>
|
||||
<li @click="startExport('file')" class="ab-context-menu-item">
|
||||
<li
|
||||
@click="startExport('file')"
|
||||
class="ab-context-menu-item"
|
||||
>
|
||||
Export Brush to mIRC File
|
||||
</li>
|
||||
<li @click="saveToLibrary()" class="ab-context-menu-item">
|
||||
<li
|
||||
@click="saveToLibrary()"
|
||||
class="ab-context-menu-item"
|
||||
>
|
||||
Save to Library
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -43,10 +43,16 @@
|
|||
</div>
|
||||
|
||||
<div class="w-full">
|
||||
<t-select :options="brushOptions" v-model="brushSizeTypeInput" />
|
||||
<t-select
|
||||
:options="brushOptions"
|
||||
v-model="brushSizeTypeInput"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div @mouseenter="canDrag = false" @mouseleave="canDrag = true">
|
||||
<div
|
||||
@mouseenter="canDrag = false"
|
||||
@mouseleave="canDrag = true"
|
||||
>
|
||||
<MainBrushCanvas />
|
||||
</div>
|
||||
</t-card>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,10 @@
|
|||
<template>
|
||||
<vue-draggable-resizable :x="100" :y="100+yOffset" :w="1100" :h="350">
|
||||
<vue-draggable-resizable
|
||||
:x="100"
|
||||
:y="100+yOffset"
|
||||
:w="1100"
|
||||
:h="350"
|
||||
>
|
||||
<t-card class="w-full h-full">
|
||||
<t-button
|
||||
type="button"
|
||||
|
|
|
|||
|
|
@ -1,8 +1,16 @@
|
|||
<template>
|
||||
<vue-draggable-resizable :x="100" :y="100+yOffset" :w="400" :h="278">
|
||||
<vue-draggable-resizable
|
||||
:x="100"
|
||||
:y="100+yOffset"
|
||||
:w="400"
|
||||
:h="278"
|
||||
>
|
||||
<t-card class="w-full h-full">
|
||||
<span v-for="(value, keyColours) in mircColours" :key="keyColours">
|
||||
<hr v-if="keyColours === 16" />
|
||||
<span
|
||||
v-for="(value, keyColours) in mircColours"
|
||||
:key="keyColours"
|
||||
>
|
||||
<hr v-if="keyColours === 16">
|
||||
|
||||
<t-button
|
||||
type="button"
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
</t-button>
|
||||
</div>
|
||||
|
||||
<hr />
|
||||
<hr>
|
||||
|
||||
<div class="w-full bg-white rounded-lg shadow">
|
||||
<ul class="divide-y-2 divide-gray-100 mb-2">
|
||||
|
|
@ -34,7 +34,10 @@
|
|||
!imageOverlay.visible ? "remove_red_eye" : "panorama_fish_eye"
|
||||
}}</span>
|
||||
</t-button>
|
||||
<div class="w-full p-1" @click="showOverlayModal">
|
||||
<div
|
||||
class="w-full p-1"
|
||||
@click="showOverlayModal"
|
||||
>
|
||||
<div class="flex text-right">
|
||||
<div class="w-full">
|
||||
<t-card class="w-full pl-2 hover:bg-gray-300 cursor-pointer">
|
||||
|
|
@ -47,12 +50,18 @@
|
|||
</ul>
|
||||
|
||||
<ul class="mt-1 mb-2">
|
||||
<li></li>
|
||||
<li />
|
||||
</ul>
|
||||
|
||||
<context-menu ref="layers-menu" class="z-50">
|
||||
<context-menu
|
||||
ref="layers-menu"
|
||||
class="z-50"
|
||||
>
|
||||
<ul>
|
||||
<li @click="addLayer()" class="ab-context-menu-item">
|
||||
<li
|
||||
@click="addLayer()"
|
||||
class="ab-context-menu-item"
|
||||
>
|
||||
Add New Layer
|
||||
</li>
|
||||
<li
|
||||
|
|
@ -109,8 +118,14 @@
|
|||
:key="key"
|
||||
@click.right="changeLayer(key)"
|
||||
>
|
||||
<div class="flex" @mouseup.right="openContextMenu">
|
||||
<div class="w-12" @click="changeLayer(key)">
|
||||
<div
|
||||
class="flex"
|
||||
@mouseup.right="openContextMenu"
|
||||
>
|
||||
<div
|
||||
class="w-12"
|
||||
@click="changeLayer(key)"
|
||||
>
|
||||
<t-button
|
||||
type="button"
|
||||
class="ab-rounded-button"
|
||||
|
|
@ -119,8 +134,8 @@
|
|||
>
|
||||
<span class="material-icons">{{
|
||||
layer.visible ? "remove_red_eye" : "panorama_fish_eye"
|
||||
}}</span> </t-button
|
||||
><br />
|
||||
}}</span>
|
||||
</t-button><br>
|
||||
|
||||
<t-button
|
||||
type="button"
|
||||
|
|
@ -134,7 +149,10 @@
|
|||
|
||||
<div class="w-full">
|
||||
<div class="flex text-right">
|
||||
<div class="w-full" @click="changeLayer(key)">
|
||||
<div
|
||||
class="w-full"
|
||||
@click="changeLayer(key)"
|
||||
>
|
||||
<t-card class="w-full hover:bg-gray-300 cursor-pointer">
|
||||
<span @dblclick="showLayerRename(key, layer.label)">{{
|
||||
layer.label
|
||||
|
|
@ -149,8 +167,8 @@
|
|||
@click="downLayer(key)"
|
||||
:disabled="!canToggleLayer"
|
||||
>
|
||||
<span class="material-icons">arrow_upward</span> </t-button
|
||||
><br />
|
||||
<span class="material-icons">arrow_upward</span>
|
||||
</t-button><br>
|
||||
|
||||
<t-button
|
||||
type="button"
|
||||
|
|
|
|||
|
|
@ -21,18 +21,33 @@
|
|||
@mouseleave="enableToolbarMoving"
|
||||
/>
|
||||
|
||||
<context-menu ref="main-brush-menu" class="z-50">
|
||||
<context-menu
|
||||
ref="main-brush-menu"
|
||||
class="z-50"
|
||||
>
|
||||
<ul>
|
||||
<li @click="canvasToPng()" class="ab-context-menu-item">
|
||||
<li
|
||||
@click="canvasToPng()"
|
||||
class="ab-context-menu-item"
|
||||
>
|
||||
Save as PNG
|
||||
</li>
|
||||
<li @click="startExport('clipboard')" class="ab-context-menu-item">
|
||||
<li
|
||||
@click="startExport('clipboard')"
|
||||
class="ab-context-menu-item"
|
||||
>
|
||||
Export Brush to mIRC Clipboard
|
||||
</li>
|
||||
<li @click="startExport('file')" class="ab-context-menu-item">
|
||||
<li
|
||||
@click="startExport('file')"
|
||||
class="ab-context-menu-item"
|
||||
>
|
||||
Export Brush to mIRC File
|
||||
</li>
|
||||
<li @click="saveToLibrary()" class="ab-context-menu-item">
|
||||
<li
|
||||
@click="saveToLibrary()"
|
||||
class="ab-context-menu-item"
|
||||
>
|
||||
Save to Library
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -5,9 +5,15 @@
|
|||
@mouseleave="isMouseOnCanvas = false"
|
||||
@mouseenter="isMouseOnCanvas = true"
|
||||
>
|
||||
<context-menu ref="editor-menu" class="z-50">
|
||||
<context-menu
|
||||
ref="editor-menu"
|
||||
class="z-50"
|
||||
>
|
||||
<ul>
|
||||
<li @click="canvasToPng()" class="ml-1 text-sm hover:bg-gray-400">
|
||||
<li
|
||||
@click="canvasToPng()"
|
||||
class="ml-1 text-sm hover:bg-gray-400"
|
||||
>
|
||||
Save as PNG
|
||||
</li>
|
||||
<li
|
||||
|
|
@ -43,7 +49,7 @@
|
|||
:style="imageOverlayStyle"
|
||||
:width="currentAsciiWidth * blockWidth"
|
||||
:height="currentAsciiHeight * blockHeight"
|
||||
></canvas>
|
||||
/>
|
||||
|
||||
<canvas
|
||||
ref="canvas"
|
||||
|
|
@ -75,6 +81,8 @@
|
|||
|
||||
<script>
|
||||
import ContextMenu from "./../components/parts/ContextMenu.vue";
|
||||
import VueDraggableResizable from 'vue-draggable-resizable';
|
||||
|
||||
import {
|
||||
toolbarIcons,
|
||||
mircColours99,
|
||||
|
|
@ -96,6 +104,7 @@ export default {
|
|||
name: "Editor",
|
||||
components: {
|
||||
ContextMenu,
|
||||
VueDraggableResizable
|
||||
},
|
||||
async mounted() {
|
||||
this.ctx = this.canvasRef.getContext("2d");
|
||||
|
|
|
|||
|
|
@ -0,0 +1,76 @@
|
|||
import {
|
||||
mount,
|
||||
createLocalVue
|
||||
} from '@vue/test-utils'
|
||||
import Vuex from 'vuex'
|
||||
import Editor from '@/views/Editor.vue'
|
||||
import vuexStore from '../../src/store/index'
|
||||
import {
|
||||
createNewAscii
|
||||
} from '../../src/ascii'
|
||||
import 'jest-canvas-mock';
|
||||
import hotkeysImport from 'hotkeys-js';
|
||||
|
||||
const localVue = createLocalVue()
|
||||
localVue.use(Vuex)
|
||||
|
||||
describe('Editor.vue', () => {
|
||||
let actions
|
||||
let state
|
||||
let store
|
||||
|
||||
beforeEach(() => {
|
||||
// state = {
|
||||
// clicks: 2
|
||||
// }
|
||||
|
||||
// actions = {
|
||||
// moduleActionClick: jest.fn()
|
||||
// }
|
||||
|
||||
store = vuexStore
|
||||
hotkeys = hotkeysImport
|
||||
|
||||
// make a new ascii
|
||||
createNewAscii({
|
||||
createAscii: {
|
||||
title: 'New Test ASCII',
|
||||
width: 5,
|
||||
height: 5,
|
||||
}
|
||||
})
|
||||
|
||||
})
|
||||
|
||||
it('create new ascii data is as expected', () => {
|
||||
const wrapper = mount(Editor, {
|
||||
store,
|
||||
localVue,
|
||||
hotkeys
|
||||
})
|
||||
|
||||
|
||||
expect(store.getters.asciibirdMeta[0]).toStrictEqual({
|
||||
"title": "New Test ASCII",
|
||||
"history": [],
|
||||
"historyIndex": 0,
|
||||
"x": 247,
|
||||
"y": 24,
|
||||
"layers": "᭣㰱ࢀ⌥ᡬƑ䁙ᰮ瀡J㠹怫䬡ȣᐦࠩዌT〣㠩㟹䰱晰䁮ż瀸¹∲䙬ਠ䐬峹祲Ɣ痆ᒈ⮺廋⦂仝䵫ࠕྍ⬡䳨゠גv͛㣬Ǭ眩 ",
|
||||
"imageOverlay": {
|
||||
"url": null,
|
||||
"opacity": 95,
|
||||
"asciiOpacity": 100,
|
||||
"left": 0,
|
||||
"top": 0,
|
||||
"position": "centered",
|
||||
"size": 100,
|
||||
"repeatx": true,
|
||||
"repeaty": true,
|
||||
"visible": false,
|
||||
"stretched": false
|
||||
},
|
||||
"selectedLayer": 0
|
||||
});
|
||||
})
|
||||
})
|
||||
Loading…
Reference in New Issue