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

better overlay modal, button style fixes

This commit is contained in:
Hugh Bord 2022-01-08 13:36:58 +10:00
parent 0078653253
commit e40e17c194
11 changed files with 387 additions and 151 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
README.md
View File

@ -78,14 +78,19 @@ A most latest production build to use is available at https://asciibird.jewbird.
# Roadmap and Bug To Fixes
* Warning on mirc export if ascii exceeds IRCs 512 per chat line limit.
* Review encodings check on file import - UTF8 vs Latin something
To fix before properly releasing v1
* Fill tool buggered on big ascii, related to undo system and recursion limit
* Brush blocks larger than 1x1 can leave undoable blocks
* Asciis sometimes open with 1 more block width and height
* The layers and undo sometimes may have bugs, but seems hard to replicate.
* Improve image overlay modal
* The current mIRC importer will fail on `C5,` type blocks by discarding the `,` character when it should preserve it. `art.txt` ascii is a good example of this. 98% of txt ascii imported should be fine.
### V1 Proper Release
* Warning on mirc export if ascii exceeds IRCs 512 per chat line limit.
* Review encodings check on file import - UTF8 vs Latin something
## Mobile / Touch Screen support
Doesn't exist at the moment. While the underlying functions and code is compatible with mobile browsers from *babel*, the touch canvas events and text will need to be reviewed to work better with touch screens. For example while you can brush once, you cannot move the brush around.
@ -194,11 +199,26 @@ Doesn't exist at the moment. While the underlying functions and code is compatib
<ralph> POWERFUL STUF
```
```
<kayos> man asciibird is legit revolutionary shit
<kayos> shouts birds
```
```
<chunky> asciibird is the best get high all the time
```
```
<totally_real_nick> asciibird made me quit my job leave my wife an kids and realize my true calling as a groupie furry lot lizard at vocaloid hologram anime concerts. now i go on tour and my life has never been more full of yiffing. thanks asciibird!
```
# References
* http://anti.teamidiot.de/static/nei/*/extended_mirc_color_proposal.html - Good for 99 colours info
* https://modern.ircdocs.horse/formatting.html#color - Also really good
* https://www.mirc.com/colors.html
* https://www.oocities.org/spunk1111/history.htm - The history of ASCII art by Joan Stark aka jgs
## ASCII Resources
* https://mircart.org/ - IRC ASCII art

65
src/Dashboard.vue
View File

@ -315,6 +315,7 @@ export default {
updateAscii: false,
}),
computed: {
isMacLike: () => /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform),
isDefault() {
return this.currentTool.name === "default";
},
@ -494,7 +495,7 @@ export default {
text: "New ASCII",
click: () => this.$store.commit("openModal", "new-ascii"),
icon: "fiber_new",
hotkey: "ctrl+m",
hotkey: !this.isMacLike ? "ctrl+m" : "command+m",
},
],
});
@ -505,7 +506,7 @@ export default {
text: "Close ASCII",
click: () => this.closeTab(this.currentTab),
icon: "close",
hotkey: "ctrl+r",
hotkey: !this.isMacLike ? "ctrl+r" : "command+r",
},
{
text: "Change ASCII",
@ -522,7 +523,7 @@ export default {
text: "Edit ASCII",
click: () => this.$store.commit("openModal", "edit-ascii"),
icon: "edit",
hotkey: "ctrl+e",
hotkey: !this.isMacLike ? "ctrl+e" : "command+e",
},
{
is: "separator",
@ -531,13 +532,13 @@ export default {
text: "Undo",
click: () => this.$store.commit("undoBlocks"),
icon: "undo",
hotkey: "ctrl+z",
hotkey: !this.isMacLike ? "ctrl+z" : "command+z",
},
{
text: "Redo",
click: () => this.$store.commit("redoBlocks"),
icon: "redo",
hotkey: "ctrl+y",
hotkey: !this.isMacLike ? "ctrl+y" : "command+y",
},
{
is: "separator",
@ -558,7 +559,7 @@ export default {
},
icon: "content_copy",
disabled: !this.isSelecting || !this.selectedBlocks.length,
hotkey: "ctrl+c",
hotkey: !this.isMacLike ? "ctrl+c" : "command+c",
},
{
text: "Cut Selection",
@ -598,7 +599,7 @@ export default {
},
icon: "content_cut",
disabled: !this.isSelecting || !this.selectedBlocks.length,
hotkey: "ctrl+x",
hotkey: !this.isMacLike ? "ctrl+x" : "command+x",
},
{
text: "Paste Select as Brush",
@ -613,7 +614,7 @@ export default {
},
icon: "content_paste",
disabled: !this.selectBlocks.length,
hotkey: "ctrl+v",
hotkey: !this.isMacLike ? "ctrl+v" : "command+v",
},
{
text: "Delete Selected Blocks",
@ -665,7 +666,7 @@ export default {
},
icon: "brush",
disabled: !this.isSelected && !this.selectedBlocks.length,
hotkey: "ctrl+b",
hotkey: !this.isMacLike ? "ctrl+b" : "command+b",
},
],
});
@ -684,7 +685,7 @@ export default {
icon: this.tabsVisible
? "check_box"
: "check_box_outline_blank",
hotkey: "ctrl+alt+t",
hotkey: !this.isMacLike ? "ctrl+alt+t" : "command+alt+t",
click: (e) => {
this.$store.commit("changeTabsVisible", !this.tabsVisible);
},
@ -694,7 +695,7 @@ export default {
icon: this.menuBarVisible
? "check_box"
: "check_box_outline_blank",
hotkey: "ctrl+alt+m",
hotkey: !this.isMacLike ? "ctrl+alt+m" : "command+alt+m",
click: (e) => {
this.$store.commit(
"changeMenuBarVisible",
@ -712,7 +713,7 @@ export default {
icon: this.debugPanelState.visible
? "check_box"
: "check_box_outline_blank",
hotkey: "ctrl+alt+d",
hotkey: !this.isMacLike ? "ctrl+alt+d" : "command+alt+d",
click: (e) => {
this.$store.commit(
"toggleDebugPanel",
@ -727,7 +728,7 @@ export default {
icon: this.brushLibraryState.visible
? "check_box"
: "check_box_outline_blank",
hotkey: "ctrl+alt+b",
hotkey: !this.isMacLike ? "ctrl+alt+b" : "command+alt+b",
click: (e) => {
this.$store.commit(
"toggleBrushLibrary",
@ -742,7 +743,7 @@ export default {
icon: this.layersLibraryState.visible
? "check_box"
: "check_box_outline_blank",
hotkey: "ctrl+alt+l",
hotkey: !this.isMacLike ? "ctrl+alt+l" : "command+alt+l",
click: (e) => {
this.layersLibraryState.visible =
!this.layersLibraryState.visible;
@ -759,7 +760,7 @@ export default {
icon: this.toolbarState.visible
? "check_box"
: "check_box_outline_blank",
hotkey: "ctrl+alt+n",
hotkey: !this.isMacLike ? "ctrl+alt+n" : "command+alt+n",
click: (e) => {
this.toolbarState.visible = !this.toolbarState.visible;
this.$store.commit("changeToolBarState", this.toolbarState);
@ -772,7 +773,7 @@ export default {
icon: this.brushPreviewState.visible
? "check_box"
: "check_box_outline_blank",
hotkey: "ctrl+alt+e",
hotkey: !this.isMacLike ? "ctrl+alt+e" : "command+alt+e",
click: (e) => {
this.brushPreviewState.visible =
!this.brushPreviewState.visible;
@ -865,7 +866,7 @@ export default {
{
text: "Increase Brush Size",
hotkey: "ctrl+]",
hotkey: !this.isMacLike ? "ctrl+]" : "command+]",
disabled: !this.isBrushing && !this.isErasing,
icon: "add",
click: (e) => {
@ -885,7 +886,7 @@ export default {
},
{
text: "Decrease Brush Size",
hotkey: "ctrl+[",
hotkey: !this.isMacLike ? "ctrl+[" : "command+[",
disabled: !this.isBrushing && !this.isErasing,
icon: "remove",
click: (e) => {
@ -959,7 +960,7 @@ export default {
icon: "settings",
click: () => this.$store.commit("openModal", "options"),
disabled: !this.isDefault,
hotkey: "ctrl+o",
hotkey: !this.isMacLike ? "ctrl+o" : "command+o",
// menu: [
// {
// text: "Show Options",
@ -980,12 +981,12 @@ export default {
text: "mIRC File",
click: () => this.startImport("mirc"),
icon: "upload_file",
hotkey: "ctrl+shift+o",
hotkey: !this.isMacLike ? "ctrl+shift+o" : "command+shift+o",
},
{
text: "mIRC Clipboard",
click: () => this.$store.commit("openModal", "paste-ascii"),
hotkey: "ctrl+shift+v",
hotkey: !this.isMacLike ? "ctrl+shift+v" : "command+shift+v",
icon: "copy_all",
},
{
@ -1006,17 +1007,17 @@ export default {
text: "mIRC File",
click: () => this.startExport("file"),
icon: "download_file",
hotkey: "ctrl+shift+f",
hotkey: !this.isMacLike ? "ctrl+shift+f" : "command+shift+f",
},
{
text: "mIRC Clipboard",
hotkey: "ctrl+shift+c",
hotkey: !this.isMacLike ? "ctrl+shift+c" : "command+shift+c",
click: () => this.startExport("clipboard"),
icon: "copy_all",
},
{
text: "PNG Image",
hotkey: "ctrl+shift+g",
hotkey: !this.isMacLike ? "ctrl+shift+g" : "command+shift+g",
click: () => {
canvasToPng(
document.getElementById("canvas"),
@ -1028,7 +1029,7 @@ export default {
{
text: "HTTP POST",
click: () => this.startExport("post"),
hotkey: "ctrl+shift+h",
hotkey: !this.isMacLike ? "ctrl+shift+h" : "command+shift+h",
icon: "post_add",
},
{
@ -1051,12 +1052,12 @@ export default {
click: () =>
this.$store.commit("toggleLayer", this.selectedLayer),
icon: "panorama_fish_eye",
hotkey: "ctrl+shift+t",
hotkey: !this.isMacLike ? "ctrl+shift+t" : "command+shift+t",
disabled: !this.canToggleLayer,
},
{
text: "Rename Layer",
hotkey: "ctrl+shift+r",
hotkey: !this.isMacLike ? "ctrl+shift+r" : "command+shift+r",
click: () =>
this.showLayerRename(
this.selectedLayer,
@ -1066,13 +1067,13 @@ export default {
},
{
text: "Add Layer",
hotkey: "ctrl+shift+a",
hotkey: !this.isMacLike ? "ctrl+shift+a" : "command+shift+a",
click: () => this.$store.commit("addLayer"),
icon: "playlist_add",
},
{
text: "Delete Layer",
hotkey: "ctrl+shift+d",
hotkey: !this.isMacLike ? "ctrl+shift+d" : "command+shift+d",
click: () =>
this.$store.commit("removeLayer", this.selectedLayer),
icon: "delete_sweep",
@ -1080,14 +1081,14 @@ export default {
},
{
text: "Move Layer Down",
hotkey: "ctrl+shift+s",
hotkey: !this.isMacLike ? "ctrl+shift+s" : "command+shift+s",
click: () => this.$store.commit("upLayer", this.selectedLayer),
icon: "arrow_downward",
disabled: !this.canToggleLayer,
},
{
text: "Move Layer Up",
hotkey: "ctrl+shift+w",
hotkey: !this.isMacLike ? "ctrl+shift+w" : "command+shift+w",
click: () =>
this.$store.commit("downLayer", this.selectedLayer),
icon: "arrow_upward",
@ -1095,7 +1096,7 @@ export default {
},
{
text: "Merge All Layers",
hotkey: "ctrl+shift+m",
hotkey: !this.isMacLike ? "ctrl+shift+m" : "command+shift+m",
click: () => this.$store.commit("mergeAllLayers"),
icon: "playlist_play",
disabled: !this.canToggleLayer,

6
src/ascii.js
View File

@ -242,6 +242,9 @@ export const parseMircAscii = async (contents, filename) => {
imageOverlay: {
url: null,
opacity: 95,
asciiOpacity: 100,
left: 0,
top: 0,
position: 'centered',
size: 100,
repeatx: true,
@ -421,6 +424,9 @@ export const createNewAscii = (forms) => {
imageOverlay: {
url: null,
opacity: 95,
asciiOpacity: 100,
left: 0,
top: 0,
position: 'centered',
size: 100,
repeatx: true,

61
src/components/modals/EditAscii.vue
View File

@ -6,25 +6,66 @@
:esc-to-close="true"
@closed="$store.commit('closeModal', 'edit-ascii')"
>
Width
<t-input type="number" name="width" v-model="layer.width" min="1" />
Height
<t-input type="number" name="height" v-model="layer.height" min="1" />
<!--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"
/>
Title
<t-input type="text" name="title" v-model="layer.title" max="128" />
</div>
</div>
<hr class="mt-5 mb-5" />
<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="p-2"> Cancel </t-button>
<t-button type="button" @click="updateAscii()" class="p-2">
Update
<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>
</template>

267
src/components/modals/ImageOverlay.vue
View File

@ -7,77 +7,201 @@
@closed="$store.commit('closeModal', 'overlay')"
>
<template v-slot:default>
<!--Card-->
<div>
<span class="text-sm"
>URL <br /><small
>Note: ASCIIBIRD only supports URL images</small
></span
>
<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>
</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">
<vue-slider
class="m-1"
v-model="imageOverlay.opacity"
: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">
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">
Left
</label>
</div>
<div class="md:w-1/2">
<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">
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>
<t-input type="text" name="url" v-model="imageOverlay.url" />
</div>
<!--/Card-->
<div class="flex">
<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>
<label class="ml-1 w-1/3">
<span class="text-sm">Transparency</span>
<t-input
type="number"
name="width"
v-model="imageOverlay.opacity"
min="1"
max="100"
class="m-1"
/>
</label>
<div class="flex">
<label class="flex items-center">
<t-radio
name="options"
:value="true"
v-model="imageOverlay.stretched"
/>
<span class="ml-2 text-sm">Fit to ASCII</span>
</label>
<label class="flex items-center ml-2">
<t-radio
name="options"
:value="false"
v-model="imageOverlay.stretched"
/>
<span class="ml-2 text-sm">Original Size</span>
</label>
</div>
</div>
<div class="flex">
<label class="ml-1 w-1/3">
<t-checkbox
class="form-checkbox m-1"
name="repeatx"
v-model="imageOverlay.repeatx"
/>
<span class="text-sm">Repeat X</span>
</label>
<label class="ml-1 w-1/3">
<t-checkbox
class="form-checkbox m-1"
name="repeatx"
v-model="imageOverlay.repeaty"
/>
<span class="text-sm">Repeat Y</span>
</label>
</div>
</template>
<template v-slot:footer>
@ -85,16 +209,21 @@
class="flex justify-between"
@click="$store.commit('closeModal', 'overlay')"
>
<t-button type="button" class="p-2"> Cancel </t-button>
<t-button type="button" class="p-2"> 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>
</template>
<script>
import vueSlider from "vue-slider-component";
export default {
name: "Overlay",
components: {
vueSlider,
},
created() {},
mounted() {
if (this.showOverlayModal) {

79
src/components/modals/NewAscii.vue
View File

@ -6,38 +6,66 @@
:esc-to-close="true"
@closed="$store.commit('closeModal', 'new-ascii')"
>
Width
<t-input
type="number"
name="width"
v-model="forms.createAscii.width"
min="1"
/>
Height
<t-input
type="number"
name="height"
v-model="forms.createAscii.height"
min="1"
/>
<!--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"
/>
Title
<t-input
type="text"
name="title"
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>
</div>
<!--/Card-->
<template v-slot:footer>
<div
class="flex justify-between"
@click="$store.commit('closeModal', 'new-ascii')"
>
<t-button type="button" class="p-2"> Cancel </t-button>
<t-button type="button" class="p-2" @click="initiateNewAscii()">
Ok
<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>
</template>
@ -97,6 +125,7 @@ export default {
this.forms.createAscii.title = "New ASCII";
},
initiateNewAscii() {
this.$store.commit('closeModal', 'new-ascii')
this.forms.createAscii.height = Number.parseInt(this.forms.createAscii.height)
this.forms.createAscii.width = Number.parseInt(this.forms.createAscii.width)
createNewASCII(this.forms);

4
src/components/modals/Options.vue
View File

@ -86,8 +86,8 @@
class="flex justify-between"
@click="$store.commit('closeModal', 'options')"
>
<t-button type="button" class="p-2"> Cancel </t-button>
<t-button type="button" class="p-2"> 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
src/components/modals/PasteAscii.vue
View File

@ -15,16 +15,18 @@
<div class="flex justify-between">
<t-button
type="button"
class="ab-button"
@click="$store.commit('closeModal', 'paste-ascii')"
>
Cancel
<span class="material-icons relative top-2 pb-4">cancel</span> Cancel
</t-button>
<t-button
type="button"
class="ab-button"
@click="importPasteAscii()"
:disabled="checkPasteContent"
>
Import Clipboard
<span class="material-icons relative top-2 pb-4">save</span> Import Clipboard
</t-button>
</div>
</template>

4
src/components/parts/Layers.vue
View File

@ -3,7 +3,7 @@
<div class="flex">
<t-button
type="button"
class="block w-1/2 border-gray-200 bg-gray-500 text-sm"
class="ab-button"
@click="addLayer()"
>
<span class="material-icons relative top-2 pb-4">playlist_add</span> Add
@ -12,7 +12,7 @@
<t-button
type="button"
class="block w-1/2 border-gray-200 bg-gray-500 text-sm"
class="ab-button"
@click="mergeLayers()"
>
<span class="material-icons relative top-2 pb-4">playlist_play</span>

4
src/style.scss
View File

@ -144,3 +144,7 @@ body {
.ab-context-menu-item {
@apply ml-1 hover:bg-gray-800 hover:text-white;
}
.ab-button {
@apply block w-full border-gray-200 bg-gray-500 text-sm;
}

16
src/views/Editor.vue
View File

@ -349,6 +349,8 @@ export default {
imageOverlayStyle() {
let repeat = "background-repeat: no-repeat;";
let stretched = "background-size: 100%;";
let left = `left: ${this.imageOverlay.left}%;`
let top = `top: ${this.imageOverlay.top}%;`
if (this.imageOverlay.repeatx && this.imageOverlay.repeaty) {
repeat = "background-repeat: repeat;";
@ -365,19 +367,19 @@ export default {
if (this.imageOverlay.stretched) {
stretched = "background-size: 100%;";
} else {
stretched = "";
stretched = `background-size: ${this.imageOverlay.size}%;`;
}
return this.imageOverlay.visible
? `background-image: url('${
this.imageOverlay.url
}'); ${stretched} ${repeat} opacity: ${
}'); ${stretched} ${repeat} ${left} ${top} opacity: ${
this.imageOverlay.opacity / 100
}; z-index: -1; position: absolute;`
: "position: absolute;";
},
canvasTransparent() {
return this.imageOverlay.visible ? "opacity: 0.6;" : "opacity: 1;";
return this.imageOverlay.visible ? `opacity: ${this.imageOverlay.asciiOpacity / 100};` : "opacity: 1;";
},
},
watch: {
@ -887,7 +889,7 @@ export default {
if (
this.diffBlocks.new.length &&
!this.canTool &&
!this.isTextEditing &&
!this.isTextEditing && !this.isFill &&
// The main point of this was to use with brushing, but there is a redraw bug
// where it draws the cached blocks the wrong way around, for now it's simpler
// to have this.
@ -2023,8 +2025,10 @@ export default {
}
}
this.storeDiffBlocks(x, y, oldBlock, targetBlock);
// if (this.diffBlocks.new[y] === undefined && this.diffBlocks.new[y][x] === undefined) {
this.storeDiffBlocks(x, y, oldBlock, targetBlock);
// }
// Fill in all four directions
// Fill Prev row
this.fillTool(currentLayerBlocks, y, x - 1, current, eraser);