fixed import transparent blocks, more toolbar menu, redraw just drawn blocks
This commit is contained in:
parent
7a5cd1b870
commit
0b3dcea9be
13
README.md
13
README.md
|
|
@ -70,6 +70,7 @@ A most latest production build to use is available at https://asciibird.jewbird.
|
|||
|
||||
## Features to Add
|
||||
|
||||
* Save to PNG
|
||||
* Layers undo and redo could be implemented, at the moment there isn't any.
|
||||
* Warning on mirc export if ascii exceeds IRCs 512 per chat line limit.
|
||||
* Review encodings check on file import - UTF8 vs Latin something
|
||||
|
|
@ -120,7 +121,8 @@ The toolbar keyboard shorts are used with the ALT key.
|
|||
|
||||
* l - Show / hide brushes library
|
||||
* d - Show and Hide debug bar
|
||||
* e - Edit ASCII
|
||||
* ctrl + e - Edit ASCII
|
||||
* ctrl + c - Close ASCII
|
||||
* p - Paste ASCII from Clipboard
|
||||
* n - New ASCII
|
||||
|
||||
|
|
@ -150,6 +152,15 @@ The toolbar keyboard shorts are used with the ALT key.
|
|||
* Backspace - Remove current character and move to previous block
|
||||
* Enter - Go to next line and reset X position to 0
|
||||
|
||||
### Layers Related
|
||||
|
||||
* Ctrl + Shift + r - Rename Layer
|
||||
* Ctrl + Shift + a - Add Layer
|
||||
* Ctrl + Shift + d - Delete Layer
|
||||
* Ctrl + Shift + s - Move Layer Down
|
||||
* Ctrl + Shift + w - Move Layer Up
|
||||
* Ctrl + Shift + m - Merge All Layers
|
||||
|
||||
# References
|
||||
|
||||
* http://anti.teamidiot.de/static/nei/*/extended_mirc_color_proposal.html - Good for 99 colours info
|
||||
|
|
|
|||
|
|
@ -63,7 +63,9 @@
|
|||
Options
|
||||
</li>
|
||||
|
||||
<li @click="startImport('mirc')" class="ab-context-menu-item">Import mIRC from File</li>
|
||||
<li @click="startImport('mirc')" class="ab-context-menu-item">
|
||||
Import mIRC from File
|
||||
</li>
|
||||
<li
|
||||
@click="startExport('file')"
|
||||
class="ab-context-menu-item border-b"
|
||||
|
|
@ -71,7 +73,10 @@
|
|||
>
|
||||
Export mIRC to File
|
||||
</li>
|
||||
<li class="ab-context-menu-item" @click="$store.commit('openModal', 'paste-ascii')">
|
||||
<li
|
||||
class="ab-context-menu-item"
|
||||
@click="$store.commit('openModal', 'paste-ascii')"
|
||||
>
|
||||
Import mIRC from Clipboard
|
||||
</li>
|
||||
<li
|
||||
|
|
@ -95,7 +100,9 @@
|
|||
>
|
||||
Save Asciibird State
|
||||
</li>
|
||||
<li @click="startImport('asb')" class="ab-context-menu-item">Load Asciibird State</li>
|
||||
<li @click="startImport('asb')" class="ab-context-menu-item">
|
||||
Load Asciibird State
|
||||
</li>
|
||||
</ul>
|
||||
</context-menu>
|
||||
|
||||
|
|
@ -131,7 +138,13 @@
|
|||
<span>
|
||||
<span class="material-icons relative">insert_drive_file</span>
|
||||
<span class="bottom-1 relative pl-1 pr-1">{{ value.title }}</span>
|
||||
<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>
|
||||
<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>
|
||||
</t-button>
|
||||
</span>
|
||||
|
|
@ -156,7 +169,10 @@
|
|||
:y-offset="scrollOffset"
|
||||
/>
|
||||
|
||||
<BrushLibrary v-show="brushLibraryState.visible" :y-offset="scrollOffset" />
|
||||
<BrushLibrary
|
||||
v-show="brushLibraryState.visible"
|
||||
:y-offset="scrollOffset"
|
||||
/>
|
||||
|
||||
<BrushPreview @inputtingbrush="inputtingbrush" :y-offset="scrollOffset" />
|
||||
|
||||
|
|
@ -233,8 +249,6 @@ export default {
|
|||
window.addEventListener("scroll", function (event) {
|
||||
isThis.scrollOffset = this.scrollY;
|
||||
});
|
||||
|
||||
|
||||
},
|
||||
destroyed() {
|
||||
window.removeEventListener("scroll", function (event) {
|
||||
|
|
@ -281,6 +295,9 @@ export default {
|
|||
happy: false,
|
||||
}),
|
||||
computed: {
|
||||
isDefault() {
|
||||
return this.currentTool.name === "default";
|
||||
},
|
||||
splashAscii() {
|
||||
return splashAscii;
|
||||
},
|
||||
|
|
@ -339,7 +356,7 @@ export default {
|
|||
return this.$store.getters.selectedLayer;
|
||||
},
|
||||
canToggleLayer() {
|
||||
return this.currentAsciiLayers.length !== 1;
|
||||
return this.currentAsciiLayers.length > 1;
|
||||
// We want to avoid hiding all the layers, so if there's only one
|
||||
// visible left, we have to disable the buttons
|
||||
},
|
||||
|
|
@ -354,10 +371,14 @@ export default {
|
|||
asciiLayersMenu() {
|
||||
let menu = [];
|
||||
|
||||
for (let i in [ ... this.currentAsciiLayers]) {
|
||||
for (let i in [...this.currentAsciiLayers]) {
|
||||
menu.push({
|
||||
text: this.currentAsciiLayers[i].label,
|
||||
click: () => this.$store.commit("changeLayer", this.currentAsciiLayers.length - i)
|
||||
click: () =>
|
||||
this.$store.commit(
|
||||
"changeLayer",
|
||||
this.currentAsciiLayers.length - i
|
||||
),
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -368,12 +389,15 @@ export default {
|
|||
|
||||
menu.push({
|
||||
text: "File",
|
||||
hotkey: "0",
|
||||
icon: "insert_drive_file",
|
||||
menu: [
|
||||
{
|
||||
text: "New ASCII",
|
||||
click: () => this.$store.commit("openModal", "new-ascii"),
|
||||
icon: "fiber_new"
|
||||
icon: "fiber_new",
|
||||
disabled: !this.isDefault,
|
||||
hotkey: "n",
|
||||
},
|
||||
],
|
||||
});
|
||||
|
|
@ -383,39 +407,105 @@ export default {
|
|||
{
|
||||
text: "Edit ASCII",
|
||||
click: () => this.$store.commit("openModal", "edit-ascii"),
|
||||
icon: "edit"
|
||||
icon: "edit",
|
||||
disabled: !this.isDefault,
|
||||
hotkey: "ctrl+e",
|
||||
},
|
||||
{
|
||||
text: "Close ASCII",
|
||||
click: () => this.closeTab(this.currentTab),
|
||||
icon: "close"
|
||||
icon: "close",
|
||||
disabled: !this.isDefault,
|
||||
hotkey: "ctrl+c",
|
||||
}
|
||||
);
|
||||
|
||||
menu.push({
|
||||
text: "Options",
|
||||
icon: "settings",
|
||||
text: "View",
|
||||
icon: "preview",
|
||||
menu: [
|
||||
{
|
||||
text: "Show Options",
|
||||
click: () => this.$store.commit("openModal", "options"),
|
||||
text: "Windows",
|
||||
icon: "desktop",
|
||||
disabled: !this.isDefault,
|
||||
menu: [
|
||||
{
|
||||
text: "Show Menu Bar",
|
||||
icon: this.check2 ? "check_box" : "check_box_outline_blank",
|
||||
click: (e) => {
|
||||
e.stopPropagation(); // prevent menu close when clicking
|
||||
this.check2 = !this.check2;
|
||||
},
|
||||
},
|
||||
{
|
||||
text: "Show Tabs",
|
||||
icon: "tab",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
text: "Toggle Grid",
|
||||
icon: this.check2 ? "check_box" : "check_box_outline_blank",
|
||||
click: (e) => {},
|
||||
},
|
||||
{
|
||||
text: "Mirror X",
|
||||
icon: this.check2 ? "check_box" : "check_box_outline_blank",
|
||||
click: (e) => {},
|
||||
},
|
||||
{
|
||||
text: "Mirror Y",
|
||||
icon: this.check2 ? "check_box" : "check_box_outline_blank",
|
||||
click: (e) => {},
|
||||
},
|
||||
{
|
||||
text: "Update Brush",
|
||||
icon: this.check2 ? "check_box" : "check_box_outline_blank",
|
||||
click: (e) => {},
|
||||
},
|
||||
{
|
||||
is: "separator",
|
||||
},
|
||||
{
|
||||
text: "Options",
|
||||
icon: "settings",
|
||||
click: () => this.$store.commit("openModal", "options"),
|
||||
disabled: !this.isDefault,
|
||||
hotkey: "ctrl+o",
|
||||
// menu: [
|
||||
// {
|
||||
// text: "Show Options",
|
||||
// click: () => this.$store.commit("openModal", "options"),
|
||||
// icon: "settings",
|
||||
// },
|
||||
// ],
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
menu.push({
|
||||
text: "Import",
|
||||
icon: "upload_file",
|
||||
menu: [
|
||||
{ text: "mIRC File", click: () => this.startImport("mirc"), icon: 'upload_file' },
|
||||
{
|
||||
text: "mIRC File",
|
||||
click: () => this.startImport("mirc"),
|
||||
icon: "upload_file",
|
||||
hotkey: "ctrl+shift+o",
|
||||
},
|
||||
{
|
||||
text: "mIRC Clipboard",
|
||||
click: () => this.$store.commit("openModal", "paste-ascii"),
|
||||
icon: 'copy_all',
|
||||
hotkey: "ctrl+shift+v",
|
||||
icon: "copy_all",
|
||||
},
|
||||
{
|
||||
text: "ASCIIBIRD State",
|
||||
click: () => this.startImport("asb"),
|
||||
icon: "save_alt",
|
||||
},
|
||||
{ text: "ASCIIBIRD State", click: () => this.startImport("asb"), icon: 'save_alt' },
|
||||
],
|
||||
});
|
||||
|
||||
|
|
@ -425,17 +515,28 @@ export default {
|
|||
text: "Export",
|
||||
icon: "save_alt",
|
||||
menu: [
|
||||
{ text: "mIRC File", click: () => this.startExport("file"), icon: 'download_file' },
|
||||
{
|
||||
text: "mIRC File",
|
||||
click: () => this.startExport("file"),
|
||||
icon: "download_file",
|
||||
hotkey: "ctrl+shift+f",
|
||||
},
|
||||
{
|
||||
text: "mIRC Clipboard",
|
||||
hotkey: "ctrl+shift+c",
|
||||
click: () => this.startExport("clipboard"),
|
||||
icon: 'copy_all',
|
||||
icon: "copy_all",
|
||||
},
|
||||
{ text: "PNG Image", click: () => true, icon: "image" },
|
||||
{
|
||||
text: "HTTP POST",
|
||||
click: () => this.startExport("post"),
|
||||
icon: "post_add",
|
||||
},
|
||||
{ text: "HTTP POST", click: () => this.startExport("post"), icon: 'post_add' },
|
||||
{
|
||||
text: "ASCIIBIRD State",
|
||||
click: () => this.exportAsciibirdState(),
|
||||
icon: 'save_alt'
|
||||
icon: "save_alt",
|
||||
},
|
||||
],
|
||||
},
|
||||
|
|
@ -449,16 +550,58 @@ export default {
|
|||
// },
|
||||
{
|
||||
text: "Show/Hide Layer",
|
||||
click: () => this.$store.commit("toggleLayer", this.selectedLayer),
|
||||
icon: 'panorama_fish_eye',
|
||||
click: () =>
|
||||
this.$store.commit("toggleLayer", this.selectedLayer),
|
||||
icon: "panorama_fish_eye",
|
||||
hotkey: "ctrl+shift+v",
|
||||
disabled: !this.canToggleLayer,
|
||||
},
|
||||
{
|
||||
text: "Rename Layer",
|
||||
hotkey: "ctrl+shift+r",
|
||||
click: () =>
|
||||
this.showLayerRename(
|
||||
this.selectedLayer,
|
||||
this.currentAsciiLayers[this.selectedLayer].label
|
||||
),
|
||||
icon: "text_rotation_none",
|
||||
},
|
||||
{
|
||||
text: "Add Layer",
|
||||
hotkey: "ctrl+shift+a",
|
||||
click: () => this.$store.commit("addLayer"),
|
||||
icon: "playlist_add",
|
||||
},
|
||||
{
|
||||
text: "Delete Layer",
|
||||
hotkey: "ctrl+shift+d",
|
||||
click: () =>
|
||||
this.$store.commit("removeLayer", this.selectedLayer),
|
||||
icon: "delete_sweep",
|
||||
disabled: !this.canToggleLayer,
|
||||
},
|
||||
{
|
||||
text: "Move Layer Down",
|
||||
hotkey: "ctrl+shift+s",
|
||||
click: () => this.$store.commit("upLayer", this.selectedLayer),
|
||||
icon: "arrow_downward",
|
||||
disabled: !this.canToggleLayer,
|
||||
},
|
||||
{
|
||||
text: "Move Layer Up",
|
||||
hotkey: "ctrl+shift+w",
|
||||
click: () =>
|
||||
this.$store.commit("downLayer", this.selectedLayer),
|
||||
icon: "arrow_upward",
|
||||
disabled: !this.canToggleLayer,
|
||||
},
|
||||
{
|
||||
text: "Merge All Layers",
|
||||
hotkey: "ctrl+shift+m",
|
||||
click: () => this.$store.commit("mergeAllLayers"),
|
||||
icon: "playlist_play",
|
||||
disabled: !this.canToggleLayer,
|
||||
},
|
||||
{ text: "Rename Layer", click: () => this.showLayerRename(this.selectedLayer, this.currentAsciiLayers[this.selectedLayer].label), icon: 'text_rotation_none' },
|
||||
{ text: "Add Layer", click: () => this.$store.commit("addLayer"), icon: 'playlist_add' },
|
||||
{ text: "Delete Layer", click: () => this.$store.commit("removeLayer", this.selectedLayer), icon: 'delete_sweep' },
|
||||
{ text: "Move Layer Down", click: () => this.$store.commit("upLayer", this.selectedLayer), icon: 'arrow_downward' },
|
||||
{ text: "Move Layer Up", click: () => this.$store.commit("downLayer", this.selectedLayer), icon: 'arrow_upward' },
|
||||
{ text: "Merge All Layers", click: () => this.$store.commit("mergeAllLayers"), icon: 'playlist_add_circle' },
|
||||
|
||||
],
|
||||
}
|
||||
);
|
||||
|
|
|
|||
13
src/ascii.js
13
src/ascii.js
|
|
@ -296,14 +296,19 @@ export const parseMircAscii = async (contents, filename) => {
|
|||
if (colourArray[1] > -1) {
|
||||
curBlock.bg = Number.parseInt(colourArray[1]);
|
||||
}
|
||||
|
||||
} else if (colourArray.length === 1) {
|
||||
if (colourArray[0] > -1) {
|
||||
if (colourArray[0] == "") {
|
||||
delete curBlock['bg'];
|
||||
delete curBlock['fg'];
|
||||
delete curBlock['char'];
|
||||
}
|
||||
|
||||
if (colourArray[0] > 0) {
|
||||
curBlock.fg = Number.parseInt(colourArray[0]);
|
||||
delete curBlock['bg'];
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
colourData.push({
|
||||
code: codeData,
|
||||
b: {
|
||||
|
|
|
|||
|
|
@ -9,8 +9,6 @@ import {
|
|||
filterNullBlocks,
|
||||
getBlocksWidth,
|
||||
emptyBlock,
|
||||
exportMirc,
|
||||
downloadFile,
|
||||
} from "../../ascii";
|
||||
|
||||
export default {
|
||||
|
|
@ -70,27 +68,6 @@ export default {
|
|||
}
|
||||
});
|
||||
|
||||
// New ASCII
|
||||
// Ctrl N doesn't seem to work in chrome? https://github.com/liftoff/GateOne/issues/290
|
||||
hotkeys("n", "editor", function (event, handler) {
|
||||
event.preventDefault();
|
||||
if (_this.isDefault && !_this.isTextEditing) {
|
||||
_this.$store.commit("openModal", "new-ascii");
|
||||
|
||||
return;
|
||||
}
|
||||
});
|
||||
|
||||
// Paste ASCII
|
||||
hotkeys("p", "editor", function (event, handler) {
|
||||
event.preventDefault();
|
||||
if (_this.isDefault && !_this.isTextEditing) {
|
||||
_this.$store.commit("openModal", "paste-ascii");
|
||||
return;
|
||||
}
|
||||
});
|
||||
|
||||
// if (this.haveOpenTabs) {
|
||||
// Show / hide brush library
|
||||
hotkeys("l", "editor", function (event, handler) {
|
||||
event.preventDefault();
|
||||
|
|
@ -130,42 +107,6 @@ export default {
|
|||
}
|
||||
});
|
||||
|
||||
// Edit ASCII
|
||||
hotkeys("e", "editor", function (event, handler) {
|
||||
event.preventDefault();
|
||||
if (_this.isDefault && !_this.isTextEditing && _this.haveOpenTabs) {
|
||||
_this.$store.commit("openModal", "edit-ascii");
|
||||
|
||||
return;
|
||||
}
|
||||
});
|
||||
|
||||
hotkeys("ctrl+shift+c", "editor", function (event, handler) {
|
||||
event.preventDefault();
|
||||
let ascii = exportMirc();
|
||||
_this.$copyText(ascii.output.join("")).then(
|
||||
(e) => {
|
||||
_this.$toasted.show("Copied mIRC to clipboard!", {
|
||||
type: "success",
|
||||
});
|
||||
},
|
||||
(e) => {
|
||||
_this.$toasted.show("Error when copying mIRC to clipboard!", {
|
||||
type: "error",
|
||||
});
|
||||
}
|
||||
);
|
||||
|
||||
return;
|
||||
});
|
||||
|
||||
hotkeys("ctrl+shift+f", "editor", function (event, handler) {
|
||||
event.preventDefault();
|
||||
let ascii = exportMirc();
|
||||
downloadFile(ascii.output.join(""), ascii.filename, "text/plain");
|
||||
return;
|
||||
});
|
||||
|
||||
hotkeys("ctrl+]", "editor", function (event, handler) {
|
||||
event.preventDefault();
|
||||
if (
|
||||
|
|
|
|||
|
|
@ -43,6 +43,10 @@ export default new Vuex.Store({
|
|||
},
|
||||
// Current tab user is viewing
|
||||
tab: 0,
|
||||
desktopState: {
|
||||
menuBarVisible: true,
|
||||
tabsVisible: true,
|
||||
},
|
||||
// asciibirdMeta holds all of the ASCII information for all the tabs
|
||||
asciibirdMeta: [],
|
||||
toolbarState: {
|
||||
|
|
|
|||
|
|
@ -114,6 +114,10 @@ body {
|
|||
@apply bg-gray-800;
|
||||
}
|
||||
|
||||
.bar-menu-items {
|
||||
width: 150%;
|
||||
}
|
||||
|
||||
.ab-checkbox {
|
||||
@apply h-4 w-4 text-blue-600;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,26 +4,17 @@
|
|||
id="canvas-area"
|
||||
@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="true"
|
||||
class="ml-1 text-sm hover:bg-gray-400"
|
||||
>
|
||||
<li @click="true" class="ml-1 text-sm hover:bg-gray-400">
|
||||
Save as PNG
|
||||
</li>
|
||||
<li
|
||||
@click="true"
|
||||
class="ml-1 text-sm hover:bg-gray-400"
|
||||
>
|
||||
<li @click="true" class="ml-1 text-sm hover:bg-gray-400">
|
||||
Export ASCII to mIRC Clipboard
|
||||
</li>
|
||||
<li
|
||||
@click="true"
|
||||
class="ml-1 text-sm hover:bg-gray-400"
|
||||
>
|
||||
<li @click="true" class="ml-1 text-sm hover:bg-gray-400">
|
||||
Export ASCII to mIRC File
|
||||
</li>
|
||||
</ul>
|
||||
|
|
@ -328,7 +319,9 @@ export default {
|
|||
currentAsciiHeight() {
|
||||
// Tested with wtf.txt and the max rows before the canvas
|
||||
// stops working seems to be 2184
|
||||
return (this.currentSelectedLayer.height > 2184 ? 2184 : this.currentSelectedLayer.height);
|
||||
return this.currentSelectedLayer.height > 2184
|
||||
? 2184
|
||||
: this.currentSelectedLayer.height;
|
||||
},
|
||||
imageOverlay() {
|
||||
return this.$store.getters.imageOverlay;
|
||||
|
|
@ -375,11 +368,9 @@ export default {
|
|||
if (val !== old) {
|
||||
this.canvas.width = this.currentAsciiWidth * blockWidth;
|
||||
this.canvas.height = this.currentAsciiHeight * blockHeight;
|
||||
this.delayRedrawCanvas();
|
||||
}
|
||||
},
|
||||
currentAsciiLayerBlocks() {
|
||||
this.delayRedrawCanvas();
|
||||
},
|
||||
currentSelectedLayer(val, old) {
|
||||
if (old && old.visible) {
|
||||
this.warnInvisibleLayer();
|
||||
|
|
@ -437,16 +428,16 @@ export default {
|
|||
textEditing(val, old) {
|
||||
this.$emit("textediting", val);
|
||||
},
|
||||
updateCanvas(val, old) {
|
||||
if (val !== old) {
|
||||
// This comes from KeyboardShortcuts.vue
|
||||
this.clearToolCanvas();
|
||||
this.drawTextIndicator();
|
||||
this.drawIndicator();
|
||||
// updateCanvas(val, old) {
|
||||
// if (val !== old) {
|
||||
// // This comes from KeyboardShortcuts.vue
|
||||
// this.clearToolCanvas();
|
||||
// this.drawTextIndicator();
|
||||
// this.drawIndicator();
|
||||
|
||||
this.delayRedrawCanvas();
|
||||
}
|
||||
},
|
||||
// this.delayRedrawCanvas();
|
||||
// }
|
||||
// },
|
||||
selecting(val) {
|
||||
this.$emit("selecting", val);
|
||||
},
|
||||
|
|
@ -457,17 +448,17 @@ export default {
|
|||
if (val !== old) {
|
||||
this.diffBlocks.l = val;
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
openContextMenu(e) {
|
||||
e.preventDefault();
|
||||
// These are the correct X and Y when inside the floating panel
|
||||
this.$refs['editor-menu'].open(e);
|
||||
this.$refs["editor-menu"].open(e);
|
||||
},
|
||||
canvasKeyDown(char) {
|
||||
// if (this.isTextEditing) {
|
||||
console.log(char);
|
||||
console.log(char);
|
||||
if (
|
||||
this.currentAsciiLayerBlocks[this.textEditing.startY] &&
|
||||
this.currentAsciiLayerBlocks[this.textEditing.startY][
|
||||
|
|
@ -495,12 +486,12 @@ export default {
|
|||
];
|
||||
|
||||
oldBlock = {
|
||||
... targetBlock
|
||||
...targetBlock,
|
||||
};
|
||||
|
||||
delete this.currentAsciiLayerBlocks[this.textEditing.startY][
|
||||
this.textEditing.startX - 1
|
||||
]['char'];
|
||||
]["char"];
|
||||
|
||||
this.storeDiffBlocks(
|
||||
this.textEditing.startX,
|
||||
|
|
@ -531,7 +522,7 @@ export default {
|
|||
|
||||
delete this.currentAsciiLayerBlocks[this.textEditing.startY][
|
||||
this.textEditing.startX
|
||||
]['char'];
|
||||
]["char"];
|
||||
|
||||
this.storeDiffBlocks(
|
||||
this.textEditing.startX,
|
||||
|
|
@ -548,7 +539,7 @@ export default {
|
|||
this.currentAsciiWidth - this.textEditing.startX
|
||||
];
|
||||
oldBlock = { ...targetBlock };
|
||||
delete targetBlock['char'];
|
||||
delete targetBlock["char"];
|
||||
this.storeDiffBlocks(
|
||||
this.textEditing.startX,
|
||||
this.textEditing.startY,
|
||||
|
|
@ -558,19 +549,18 @@ export default {
|
|||
}
|
||||
|
||||
if (this.mirrorY) {
|
||||
|
||||
targetBlock =
|
||||
this.currentAsciiLayerBlocks[
|
||||
this.currentAsciiHeight - this.textEditing.startY
|
||||
][this.textEditing.startX];
|
||||
oldBlock = { ...targetBlock };
|
||||
delete targetBlock['char'];
|
||||
oldBlock = { ...targetBlock };
|
||||
delete targetBlock["char"];
|
||||
this.storeDiffBlocks(
|
||||
this.textEditing.startX,
|
||||
this.textEditing.startY,
|
||||
oldBlock,
|
||||
targetBlock);
|
||||
|
||||
targetBlock
|
||||
);
|
||||
}
|
||||
|
||||
if (this.mirrorY && this.mirrorX) {
|
||||
|
|
@ -579,7 +569,7 @@ export default {
|
|||
this.currentAsciiHeight - this.textEditing.startY
|
||||
][this.currentAsciiWidth - this.textEditing.startX];
|
||||
oldBlock = { ...targetBlock };
|
||||
delete targetBlock['char'];
|
||||
delete targetBlock["char"];
|
||||
this.storeDiffBlocks(
|
||||
this.textEditing.startX,
|
||||
this.textEditing.startY,
|
||||
|
|
@ -817,9 +807,6 @@ export default {
|
|||
redrawCanvas() {
|
||||
if (this.currentAsciiLayers.length) {
|
||||
// https://stackoverflow.com/questions/28390358/high-cpu-usage-with-canvas-and-requestanimationframe
|
||||
this.ctx.save();
|
||||
this.canvasRef.width = this.canvasRef.width;
|
||||
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
|
||||
|
||||
|
||||
// Position of the meta array
|
||||
|
|
@ -832,26 +819,23 @@ export default {
|
|||
let curBlock = {};
|
||||
|
||||
// hack font for ascii shout outs 2 beenz
|
||||
this.ctx.font = "13px Hack";
|
||||
|
||||
|
||||
let mergeLayers = this.mergeLayers();
|
||||
if (this.diffBlocks.new.length && !this.canTool) {
|
||||
|
||||
for (y = 0; y < this.currentAsciiHeight + 1; y++) {
|
||||
canvasY = blockHeight * y;
|
||||
|
||||
console.log("redrawing canvas from cache");
|
||||
// If we have a difference stored, just render the difference only instead
|
||||
// of the entire ascii again
|
||||
|
||||
// Experimental code to not rows blocks off screen
|
||||
if (
|
||||
this.options.renderOffScreen &&
|
||||
this.top !== false &&
|
||||
!this.checkVisible(this.top + canvasY - this.yOffset)
|
||||
) {
|
||||
continue;
|
||||
}
|
||||
for (let i in this.diffBlocks.new) {
|
||||
let entry = this.diffBlocks.new[i];
|
||||
canvasX = blockWidth * entry.x;
|
||||
canvasY = blockHeight * entry.y;
|
||||
|
||||
for (x = 0; x < this.currentAsciiWidth + 1; x++) {
|
||||
canvasX = blockWidth * x;
|
||||
curBlock = { ...entry.b };
|
||||
|
||||
curBlock = { ...mergeLayers[y][x] };
|
||||
// this.ctx.clearRect(canvasX,canvasY,blockWidth, blockHeight);
|
||||
|
||||
if (curBlock.bg !== undefined && curBlock.bg !== null) {
|
||||
this.ctx.fillStyle = this.mircColours[curBlock.bg];
|
||||
|
|
@ -872,6 +856,61 @@ export default {
|
|||
);
|
||||
}
|
||||
}
|
||||
|
||||
this.diffBlocks = {
|
||||
l: this.selectedLayerIndex,
|
||||
new: [],
|
||||
old: [],
|
||||
};
|
||||
|
||||
} else {
|
||||
console.log("redrawing canvas");
|
||||
|
||||
this.ctx.save();
|
||||
this.canvasRef.width = this.canvasRef.width;
|
||||
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
|
||||
|
||||
this.ctx.font = "13px Hack";
|
||||
|
||||
let mergeLayers = this.mergeLayers();
|
||||
|
||||
for (y = 0; y < this.currentAsciiHeight + 1; y++) {
|
||||
canvasY = blockHeight * y;
|
||||
|
||||
// Experimental code to not rows blocks off screen
|
||||
if (
|
||||
this.options.renderOffScreen &&
|
||||
this.top !== false &&
|
||||
!this.checkVisible(this.top + canvasY - this.yOffset)
|
||||
) {
|
||||
continue;
|
||||
}
|
||||
|
||||
for (x = 0; x < this.currentAsciiWidth + 1; x++) {
|
||||
canvasX = blockWidth * x;
|
||||
|
||||
curBlock = { ...mergeLayers[y][x] };
|
||||
|
||||
if (curBlock.bg !== undefined && curBlock.bg !== null) {
|
||||
this.ctx.fillStyle = this.mircColours[curBlock.bg];
|
||||
this.ctx.fillRect(canvasX, canvasY, blockWidth, blockHeight);
|
||||
}
|
||||
|
||||
if (curBlock.char !== undefined && curBlock.char !== null) {
|
||||
if (curBlock.fg !== undefined && curBlock.fg !== null) {
|
||||
this.ctx.fillStyle = this.mircColours[curBlock.fg];
|
||||
} else {
|
||||
this.ctx.fillStyle = "#FFFFFF";
|
||||
}
|
||||
|
||||
this.ctx.fillText(
|
||||
curBlock.char,
|
||||
canvasX,
|
||||
canvasY + blockHeight - 3
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (this.gridView) {
|
||||
|
|
@ -918,11 +957,11 @@ export default {
|
|||
diff: { ...this.diffBlocks },
|
||||
});
|
||||
|
||||
this.diffBlocks = {
|
||||
l: this.selectedLayerIndex,
|
||||
new: [],
|
||||
old: [],
|
||||
};
|
||||
// this.diffBlocks = {
|
||||
// l: this.selectedLayerIndex,
|
||||
// new: [],
|
||||
// old: [],
|
||||
// };
|
||||
},
|
||||
// Mouse Up, Down and Move
|
||||
canvasMouseUp() {
|
||||
|
|
@ -1054,6 +1093,7 @@ export default {
|
|||
if (this.isMouseOnCanvas) {
|
||||
this.clearToolCanvas();
|
||||
this.drawBrush();
|
||||
this.delayRedrawCanvas();
|
||||
}
|
||||
break;
|
||||
|
||||
|
|
@ -1062,8 +1102,10 @@ export default {
|
|||
|
||||
if (this.isMouseOnCanvas) {
|
||||
this.drawBrush(true);
|
||||
this.delayRedrawCanvas();
|
||||
this.eraser();
|
||||
}
|
||||
this.eraser();
|
||||
|
||||
break;
|
||||
|
||||
case "select":
|
||||
|
|
@ -1102,7 +1144,7 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
this.delayRedrawCanvas();
|
||||
// this.delayRedrawCanvas();
|
||||
},
|
||||
clearToolCanvas() {
|
||||
if (this.toolCtx) {
|
||||
|
|
@ -1119,6 +1161,7 @@ export default {
|
|||
requestAnimationFrame(() => {
|
||||
_this.redrawCanvas();
|
||||
_this.redraw = true;
|
||||
|
||||
});
|
||||
}, 1000 / this.options.fps);
|
||||
}
|
||||
|
|
@ -1379,7 +1422,7 @@ export default {
|
|||
|
||||
// Apply text to ascii blocks
|
||||
if (this.canText && this.canTool) {
|
||||
targetBlock['char'] = brushBlock['char'];
|
||||
targetBlock["char"] = brushBlock["char"];
|
||||
|
||||
if (
|
||||
this.mirrorX &&
|
||||
|
|
@ -1487,8 +1530,9 @@ export default {
|
|||
this.currentAsciiLayerBlocks[arrayY] &&
|
||||
this.currentAsciiLayerBlocks[arrayY][theX]
|
||||
) {
|
||||
oldBlock = { ... this.currentAsciiLayerBlocks[arrayY][theX] }
|
||||
this.currentAsciiLayerBlocks[arrayY][theX][target] = brushBlock[target];
|
||||
oldBlock = { ...this.currentAsciiLayerBlocks[arrayY][theX] };
|
||||
this.currentAsciiLayerBlocks[arrayY][theX][target] =
|
||||
brushBlock[target];
|
||||
|
||||
this.storeDiffBlocks(theX, arrayY, oldBlock, brushBlock);
|
||||
}
|
||||
|
|
@ -1498,8 +1542,9 @@ export default {
|
|||
this.currentAsciiLayerBlocks[theY] &&
|
||||
this.currentAsciiLayerBlocks[theY][arrayX]
|
||||
) {
|
||||
oldBlock = { ... this.currentAsciiLayerBlocks[theY][arrayX] }
|
||||
this.currentAsciiLayerBlocks[theY][arrayX][target] = brushBlock[target];
|
||||
oldBlock = { ...this.currentAsciiLayerBlocks[theY][arrayX] };
|
||||
this.currentAsciiLayerBlocks[theY][arrayX][target] =
|
||||
brushBlock[target];
|
||||
|
||||
this.storeDiffBlocks(arrayX, theY, oldBlock, brushBlock);
|
||||
}
|
||||
|
|
@ -1510,7 +1555,7 @@ export default {
|
|||
this.currentAsciiLayerBlocks[theY] &&
|
||||
this.currentAsciiLayerBlocks[theY][theX]
|
||||
) {
|
||||
oldBlock = { ... this.currentAsciiLayerBlocks[theY][theX] }
|
||||
oldBlock = { ...this.currentAsciiLayerBlocks[theY][theX] };
|
||||
this.currentAsciiLayerBlocks[theY][theX][target] = brushBlock[target];
|
||||
|
||||
this.storeDiffBlocks(theX, theY, oldBlock, brushBlock);
|
||||
|
|
@ -1552,7 +1597,6 @@ export default {
|
|||
continue;
|
||||
}
|
||||
|
||||
|
||||
// if (
|
||||
// this.top !== false &&
|
||||
// !this.checkVisible(this.top + (y * blockHeight) - this.yOffset)
|
||||
|
|
@ -1586,9 +1630,7 @@ export default {
|
|||
}
|
||||
|
||||
this.drawBrushBlocks(brushX, brushY, brushBlock, null);
|
||||
|
||||
}
|
||||
else if (this.isErasing) {
|
||||
} else if (this.isErasing) {
|
||||
this.drawBrushBlocks(brushX, brushY, brushBlock, null, true);
|
||||
}
|
||||
|
||||
|
|
@ -1607,9 +1649,9 @@ export default {
|
|||
|
||||
if (!this.diffBlocks.old[y][x]) {
|
||||
this.diffBlocks.old[y][x] = {
|
||||
x: x,
|
||||
y: y,
|
||||
b: { ...oldBlock },
|
||||
x: x,
|
||||
y: y,
|
||||
b: { ...oldBlock },
|
||||
};
|
||||
}
|
||||
|
||||
|
|
@ -1619,9 +1661,9 @@ export default {
|
|||
|
||||
if (!this.diffBlocks.new[y][x]) {
|
||||
this.diffBlocks.new[y][x] = {
|
||||
x: x,
|
||||
y: y,
|
||||
b: { ...newBlock },
|
||||
x: x,
|
||||
y: y,
|
||||
b: { ...newBlock },
|
||||
};
|
||||
}
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue