2020-12-19 01:27:50 +00:00
|
|
|
<template>
|
2020-12-27 02:42:26 +00:00
|
|
|
<div>
|
2021-05-22 02:49:19 +00:00
|
|
|
<div
|
|
|
|
id="canvas-area"
|
|
|
|
@mouseleave="isMouseOnCanvas = false"
|
|
|
|
@mouseenter="isMouseOnCanvas = true"
|
|
|
|
>
|
2021-12-22 10:36:41 +00:00
|
|
|
<context-menu ref="editor-menu" class="z-50">
|
2021-12-21 09:03:40 +00:00
|
|
|
<ul>
|
2021-12-26 01:41:24 +00:00
|
|
|
<li @click="canvasToPng()" class="ml-1 text-sm hover:bg-gray-400">
|
2021-12-21 09:03:40 +00:00
|
|
|
Save as PNG
|
|
|
|
</li>
|
2021-12-26 01:41:24 +00:00
|
|
|
<li @click="startExport('clipboard')" class="ml-1 text-sm hover:bg-gray-400">
|
2021-12-21 09:03:40 +00:00
|
|
|
Export ASCII to mIRC Clipboard
|
|
|
|
</li>
|
2021-12-26 01:41:24 +00:00
|
|
|
<li @click="startExport('file')" class="ml-1 text-sm hover:bg-gray-400">
|
2021-12-21 09:03:40 +00:00
|
|
|
Export ASCII to mIRC File
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
</context-menu>
|
|
|
|
|
2021-03-20 03:45:10 +00:00
|
|
|
<vue-draggable-resizable
|
2021-08-15 00:57:37 +00:00
|
|
|
ref="canvasdrag"
|
2021-08-14 06:41:42 +00:00
|
|
|
:grid="[blockWidth, blockHeight]"
|
2021-08-15 00:57:37 +00:00
|
|
|
:w="currentAsciiWidth * blockWidth"
|
|
|
|
:h="currentAsciiHeight * blockHeight"
|
2021-08-12 03:19:06 +00:00
|
|
|
:draggable="isDefault"
|
2021-04-03 03:13:03 +00:00
|
|
|
@resizestop="onCanvasResize"
|
2021-04-01 23:01:36 +00:00
|
|
|
@dragstop="onCavasDragStop"
|
2021-04-03 03:13:03 +00:00
|
|
|
:x="currentAscii.x"
|
|
|
|
:y="currentAscii.y"
|
2021-03-20 03:45:10 +00:00
|
|
|
>
|
2021-12-06 06:55:06 +00:00
|
|
|
<canvas
|
|
|
|
id="overlay-image"
|
|
|
|
:style="imageOverlayStyle"
|
|
|
|
:width="currentAsciiWidth * blockWidth"
|
|
|
|
:height="currentAsciiHeight * blockHeight"
|
|
|
|
></canvas>
|
|
|
|
|
2021-04-03 03:13:03 +00:00
|
|
|
<canvas
|
2021-08-14 06:41:42 +00:00
|
|
|
ref="canvas"
|
|
|
|
id="canvas"
|
|
|
|
class="canvas"
|
2021-10-16 05:16:21 +00:00
|
|
|
:style="canvasTransparent"
|
2021-08-15 00:57:37 +00:00
|
|
|
:width="currentAsciiWidth * blockWidth"
|
|
|
|
:height="currentAsciiHeight * blockHeight"
|
2021-08-04 03:21:06 +00:00
|
|
|
/>
|
2021-03-31 23:29:55 +00:00
|
|
|
|
2021-03-20 03:45:10 +00:00
|
|
|
<canvas
|
2021-08-14 06:41:42 +00:00
|
|
|
ref="canvastools"
|
|
|
|
id="canvastools"
|
|
|
|
class="canvastools"
|
2021-08-15 00:57:37 +00:00
|
|
|
:width="currentAsciiWidth * blockWidth"
|
|
|
|
:height="currentAsciiHeight * blockHeight"
|
2021-10-09 00:47:16 +00:00
|
|
|
@mousemove.left="canvasMouseMove"
|
|
|
|
@mousedown.left="canvasMouseDown"
|
|
|
|
@mouseup.left="canvasMouseUp"
|
2021-12-21 09:03:40 +00:00
|
|
|
@mouseup.right="openContextMenu"
|
|
|
|
@contextmenu.prevent
|
2021-09-04 04:41:31 +00:00
|
|
|
@touchmove="canvasMouseMove"
|
|
|
|
@touchend="canvasMouseDown"
|
|
|
|
@touchstart="canvasMouseUp"
|
2021-08-04 03:21:06 +00:00
|
|
|
/>
|
2021-03-20 03:45:10 +00:00
|
|
|
</vue-draggable-resizable>
|
2020-12-27 02:42:26 +00:00
|
|
|
</div>
|
2020-12-19 01:27:50 +00:00
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
2021-12-21 09:03:40 +00:00
|
|
|
import ContextMenu from "./../components/parts/ContextMenu.vue";
|
2021-08-07 05:36:32 +00:00
|
|
|
import {
|
|
|
|
toolbarIcons,
|
|
|
|
mircColours99,
|
|
|
|
filterNullBlocks,
|
|
|
|
blockWidth,
|
|
|
|
blockHeight,
|
2021-08-12 01:52:40 +00:00
|
|
|
maxBrushSize,
|
|
|
|
fillNullBlocks,
|
2021-08-12 03:19:06 +00:00
|
|
|
getBlocksWidth,
|
2021-08-14 06:41:42 +00:00
|
|
|
checkVisible,
|
2021-08-28 02:03:42 +00:00
|
|
|
mergeLayers,
|
2021-12-26 01:41:24 +00:00
|
|
|
canvasToPng,
|
|
|
|
exportMirc,
|
|
|
|
downloadFile
|
2021-08-07 05:36:32 +00:00
|
|
|
} from "../ascii";
|
2020-12-27 02:42:26 +00:00
|
|
|
|
2020-12-19 01:27:50 +00:00
|
|
|
export default {
|
2021-08-07 05:36:32 +00:00
|
|
|
name: "Editor",
|
2021-12-21 09:03:40 +00:00
|
|
|
components: {
|
|
|
|
ContextMenu,
|
|
|
|
},
|
2021-01-02 01:52:44 +00:00
|
|
|
mounted() {
|
2021-08-14 06:41:42 +00:00
|
|
|
this.ctx = this.canvasRef.getContext("2d");
|
2021-12-26 02:20:17 +00:00
|
|
|
this.ctx.font = "13px Hack";
|
2021-08-14 06:41:42 +00:00
|
|
|
this.toolCtx = this.$refs.canvastools.getContext("2d");
|
|
|
|
this.delayRedrawCanvas();
|
|
|
|
},
|
|
|
|
created() {
|
|
|
|
window.addEventListener("load", () => {
|
|
|
|
// Fixes the font on load issue
|
|
|
|
this.delayRedrawCanvas();
|
|
|
|
});
|
2021-04-03 03:13:03 +00:00
|
|
|
|
2021-12-06 06:55:06 +00:00
|
|
|
var _this = this;
|
2021-12-11 01:28:44 +00:00
|
|
|
hotkeys("*", "editor", function (event, handler) {
|
2021-12-17 11:03:10 +00:00
|
|
|
event.preventDefault();
|
|
|
|
|
|
|
|
if (_this.isTextEditing) {
|
|
|
|
_this.canvasKeyDown(event.key);
|
2021-12-17 11:54:57 +00:00
|
|
|
return;
|
2021-12-17 11:03:10 +00:00
|
|
|
}
|
2021-12-17 03:53:07 +00:00
|
|
|
|
2021-12-17 11:03:10 +00:00
|
|
|
if (_this.isBrushing || _this.isErasing) {
|
2021-12-06 06:55:06 +00:00
|
|
|
switch (event.key) {
|
|
|
|
case "ArrowUp":
|
|
|
|
_this.y--;
|
2021-12-06 07:00:11 +00:00
|
|
|
_this.drawBrush(_this.isErasing);
|
2021-12-24 04:06:55 +00:00
|
|
|
// _this.delayRedrawCanvas();
|
2021-12-06 06:55:06 +00:00
|
|
|
break;
|
|
|
|
|
|
|
|
case "ArrowDown":
|
|
|
|
_this.y++;
|
2021-12-06 07:00:11 +00:00
|
|
|
_this.drawBrush(_this.isErasing);
|
2021-12-24 04:06:55 +00:00
|
|
|
// _this.delayRedrawCanvas();
|
2021-12-06 06:55:06 +00:00
|
|
|
break;
|
|
|
|
|
|
|
|
case "ArrowLeft":
|
|
|
|
_this.x--;
|
2021-12-06 07:00:11 +00:00
|
|
|
_this.drawBrush(_this.isErasing);
|
2021-12-24 04:06:55 +00:00
|
|
|
// _this.delayRedrawCanvas();
|
2021-12-06 06:55:06 +00:00
|
|
|
break;
|
|
|
|
|
|
|
|
case "ArrowRight":
|
|
|
|
_this.x++;
|
2021-12-06 07:00:11 +00:00
|
|
|
_this.drawBrush(_this.isErasing);
|
2021-12-24 04:06:55 +00:00
|
|
|
// _this.delayRedrawCanvas();
|
2021-12-06 06:55:06 +00:00
|
|
|
break;
|
|
|
|
|
|
|
|
case " ":
|
2021-12-07 03:54:18 +00:00
|
|
|
_this.canTool = true;
|
2021-12-17 09:18:35 +00:00
|
|
|
_this.isBrushing ? _this.drawBrush(false) : _this.eraser();
|
2021-12-07 03:54:18 +00:00
|
|
|
_this.canTool = false;
|
2021-12-17 09:18:35 +00:00
|
|
|
_this.dispatchBlocks();
|
2021-12-17 08:47:38 +00:00
|
|
|
|
2021-12-24 04:06:55 +00:00
|
|
|
this.diffBlocks = {
|
|
|
|
l: this.selectedLayerIndex,
|
|
|
|
new: [],
|
|
|
|
old: [],
|
|
|
|
};
|
2021-12-06 06:55:06 +00:00
|
|
|
break;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2021-08-14 09:09:36 +00:00
|
|
|
if (this.currentAsciiLayerBlocks) {
|
2021-08-15 00:57:37 +00:00
|
|
|
this.canvas.width = this.currentAsciiWidth * blockWidth;
|
|
|
|
this.canvas.height = this.currentAsciiHeight * blockHeight;
|
2021-04-03 03:13:03 +00:00
|
|
|
|
2021-03-27 02:07:33 +00:00
|
|
|
this.delayRedrawCanvas();
|
2021-08-16 04:10:06 +00:00
|
|
|
this.$emit("textediting", this.textEditing);
|
2021-03-13 05:27:07 +00:00
|
|
|
}
|
2020-12-27 02:42:26 +00:00
|
|
|
},
|
|
|
|
data: () => ({
|
2021-01-02 01:52:44 +00:00
|
|
|
ctx: null,
|
2021-04-03 03:13:03 +00:00
|
|
|
toolCtx: null,
|
2021-01-09 01:57:48 +00:00
|
|
|
canvas: {
|
2021-03-26 11:36:37 +00:00
|
|
|
width: 512,
|
|
|
|
height: 512,
|
2021-01-09 01:57:48 +00:00
|
|
|
},
|
2021-03-29 00:39:42 +00:00
|
|
|
x: 0, // Ascii X and Y
|
|
|
|
y: 0, // Ascii X and Y
|
2021-08-14 06:41:42 +00:00
|
|
|
top: false,
|
2021-03-29 00:39:42 +00:00
|
|
|
redraw: true, // Used to limit canvas redraw
|
2021-03-27 04:16:15 +00:00
|
|
|
canTool: false,
|
2021-04-03 03:13:03 +00:00
|
|
|
textEditing: {
|
|
|
|
startX: null,
|
|
|
|
startY: null,
|
|
|
|
},
|
|
|
|
selecting: {
|
|
|
|
startX: null,
|
|
|
|
startY: null,
|
|
|
|
endX: null,
|
|
|
|
endY: null,
|
|
|
|
canSelect: false,
|
|
|
|
},
|
2021-05-22 02:49:19 +00:00
|
|
|
isMouseOnCanvas: false,
|
2021-08-03 04:59:12 +00:00
|
|
|
selectedBlocks: [],
|
2021-10-02 00:55:39 +00:00
|
|
|
|
2021-12-18 01:35:58 +00:00
|
|
|
// Used to store the difference when editing blocks then commits them
|
2021-12-17 08:47:38 +00:00
|
|
|
diffBlocks: {
|
2021-12-18 01:35:58 +00:00
|
|
|
l: 0,
|
2021-10-02 00:55:39 +00:00
|
|
|
old: [],
|
2021-12-17 03:53:07 +00:00
|
|
|
new: [],
|
2021-10-02 00:55:39 +00:00
|
|
|
},
|
2021-11-06 00:59:17 +00:00
|
|
|
|
|
|
|
isUsingKeyboard: false,
|
2020-12-27 02:42:26 +00:00
|
|
|
}),
|
2021-12-26 06:31:07 +00:00
|
|
|
props: ["updateCanvas", "yOffset", "canvasxy", "brush", "updateascii"],
|
2020-12-27 02:42:26 +00:00
|
|
|
computed: {
|
2021-08-14 06:41:42 +00:00
|
|
|
canvasRef() {
|
|
|
|
return this.$refs.canvas;
|
|
|
|
},
|
|
|
|
blockWidth() {
|
|
|
|
return blockWidth * this.blockSizeMultiplier;
|
|
|
|
},
|
|
|
|
blockHeight() {
|
|
|
|
return blockHeight * this.blockSizeMultiplier;
|
|
|
|
},
|
|
|
|
blockSizeMultiplier() {
|
|
|
|
return this.$store.getters.blockSizeMultiplier;
|
|
|
|
},
|
2021-04-03 03:13:03 +00:00
|
|
|
currentAscii() {
|
2021-03-13 05:27:07 +00:00
|
|
|
return this.$store.getters.currentAscii;
|
2021-02-06 01:57:35 +00:00
|
|
|
},
|
2021-08-14 06:41:42 +00:00
|
|
|
currentAsciiLayers() {
|
|
|
|
return this.$store.getters.currentAsciiLayers;
|
|
|
|
},
|
2021-08-17 00:24:41 +00:00
|
|
|
selectedLayerIndex() {
|
2021-08-28 02:03:42 +00:00
|
|
|
return this.currentAscii.selectedLayer || 0;
|
2021-08-17 00:24:41 +00:00
|
|
|
},
|
2021-08-15 00:57:37 +00:00
|
|
|
currentSelectedLayer() {
|
2021-08-17 00:24:41 +00:00
|
|
|
return this.currentAsciiLayers[this.selectedLayerIndex];
|
2021-08-15 00:57:37 +00:00
|
|
|
},
|
2021-08-14 06:41:42 +00:00
|
|
|
currentAsciiLayerBlocks() {
|
2021-08-15 00:57:37 +00:00
|
|
|
return this.currentSelectedLayer.data;
|
2021-08-14 06:41:42 +00:00
|
|
|
},
|
2021-04-03 03:13:03 +00:00
|
|
|
currentTool() {
|
2021-08-03 07:33:25 +00:00
|
|
|
return toolbarIcons[this.$store.getters.currentTool];
|
2021-04-03 03:13:03 +00:00
|
|
|
},
|
2021-05-08 01:51:30 +00:00
|
|
|
canFg() {
|
2021-08-03 03:00:32 +00:00
|
|
|
return this.$store.getters.isTargettingFg;
|
2021-05-08 01:51:30 +00:00
|
|
|
},
|
|
|
|
canBg() {
|
2021-08-03 03:00:32 +00:00
|
|
|
return this.$store.getters.isTargettingBg;
|
2021-05-08 01:51:30 +00:00
|
|
|
},
|
|
|
|
canText() {
|
2021-08-03 03:00:32 +00:00
|
|
|
return this.$store.getters.isTargettingChar;
|
2021-05-08 01:51:30 +00:00
|
|
|
},
|
2021-07-17 01:44:27 +00:00
|
|
|
currentFg() {
|
2021-08-03 03:00:32 +00:00
|
|
|
return this.$store.getters.currentFg;
|
2021-07-17 01:44:27 +00:00
|
|
|
},
|
|
|
|
currentBg() {
|
2021-08-03 03:00:32 +00:00
|
|
|
return this.$store.getters.currentBg;
|
2021-07-17 01:44:27 +00:00
|
|
|
},
|
|
|
|
currentChar() {
|
2021-08-06 01:51:58 +00:00
|
|
|
return this.$store.getters.currentChar;
|
2021-07-17 01:44:27 +00:00
|
|
|
},
|
2021-08-03 03:00:32 +00:00
|
|
|
isTextEditing() {
|
2021-10-09 00:47:16 +00:00
|
|
|
return this.currentTool.name === "text";
|
2021-04-03 03:13:03 +00:00
|
|
|
},
|
2021-12-24 04:06:55 +00:00
|
|
|
isEraserFill() {
|
|
|
|
return this.currentTool.name === "fill-eraser";
|
|
|
|
},
|
|
|
|
isFill() {
|
|
|
|
return this.currentTool.name === "fill";
|
|
|
|
},
|
2021-08-12 01:52:40 +00:00
|
|
|
isTextEditingValues() {
|
2021-08-12 03:19:06 +00:00
|
|
|
return (
|
|
|
|
this.textEditing.startX !== null && this.textEditing.startY !== null
|
|
|
|
);
|
2021-08-12 01:52:40 +00:00
|
|
|
},
|
2021-04-03 03:13:03 +00:00
|
|
|
isSelecting() {
|
2021-10-09 00:47:16 +00:00
|
|
|
return this.currentTool.name === "select";
|
2021-04-03 03:13:03 +00:00
|
|
|
},
|
2021-08-11 23:47:36 +00:00
|
|
|
isDefault() {
|
2021-10-09 00:47:16 +00:00
|
|
|
return this.currentTool.name === "default";
|
2021-08-11 23:47:36 +00:00
|
|
|
},
|
2021-08-08 03:24:06 +00:00
|
|
|
isBrushing() {
|
2021-10-09 00:47:16 +00:00
|
|
|
return this.currentTool.name === "brush";
|
2021-08-08 03:24:06 +00:00
|
|
|
},
|
2021-11-06 00:59:17 +00:00
|
|
|
isErasing() {
|
|
|
|
return this.currentTool.name === "eraser";
|
|
|
|
},
|
2021-06-05 01:25:23 +00:00
|
|
|
isSelected() {
|
|
|
|
return (
|
2021-08-12 09:36:35 +00:00
|
|
|
this.selecting.startX !== null &&
|
|
|
|
this.selecting.startY !== null &&
|
|
|
|
this.selecting.endX !== null &&
|
|
|
|
this.selecting.endY !== null
|
2021-06-05 01:25:23 +00:00
|
|
|
);
|
|
|
|
},
|
2021-06-29 01:49:39 +00:00
|
|
|
brushBlocks() {
|
|
|
|
return this.$store.getters.brushBlocks;
|
2021-07-10 01:41:17 +00:00
|
|
|
},
|
2021-07-24 01:55:44 +00:00
|
|
|
canvasX() {
|
2021-08-08 00:36:17 +00:00
|
|
|
return this.x * blockWidth;
|
2021-07-24 01:55:44 +00:00
|
|
|
},
|
|
|
|
canvasY() {
|
2021-08-08 00:36:17 +00:00
|
|
|
return this.y * blockHeight;
|
2021-07-24 01:55:44 +00:00
|
|
|
},
|
2021-07-31 02:12:11 +00:00
|
|
|
toolbarState() {
|
2021-08-03 03:00:32 +00:00
|
|
|
return this.$store.getters.toolbarState;
|
2021-07-31 02:12:11 +00:00
|
|
|
},
|
|
|
|
mirrorX() {
|
|
|
|
return this.toolbarState.mirrorX;
|
|
|
|
},
|
|
|
|
mirrorY() {
|
|
|
|
return this.toolbarState.mirrorY;
|
|
|
|
},
|
2021-08-03 03:00:32 +00:00
|
|
|
debugPanelState() {
|
2021-08-03 04:59:12 +00:00
|
|
|
return this.$store.getters.debugPanel;
|
|
|
|
},
|
|
|
|
selectBlocks() {
|
|
|
|
return this.$store.getters.selectBlocks;
|
|
|
|
},
|
|
|
|
options() {
|
|
|
|
return this.$store.getters.options;
|
2021-08-03 03:00:32 +00:00
|
|
|
},
|
2021-08-03 04:59:12 +00:00
|
|
|
haveSelectBlocks() {
|
2021-08-04 03:21:06 +00:00
|
|
|
return !!this.selectBlocks.length;
|
2021-08-03 07:33:25 +00:00
|
|
|
},
|
|
|
|
mircColours() {
|
|
|
|
return mircColours99;
|
2021-08-04 03:21:06 +00:00
|
|
|
},
|
2021-08-07 02:41:47 +00:00
|
|
|
brushLibraryState() {
|
|
|
|
return this.$store.getters.brushLibraryState;
|
2021-08-07 05:36:32 +00:00
|
|
|
},
|
2021-08-08 00:36:17 +00:00
|
|
|
gridView() {
|
2021-08-14 06:41:42 +00:00
|
|
|
return this.toolbarState.gridView;
|
2021-08-08 03:24:06 +00:00
|
|
|
},
|
2021-08-11 23:47:36 +00:00
|
|
|
asciiBlockAtXy() {
|
2021-08-14 09:09:36 +00:00
|
|
|
return this.currentAsciiLayerBlocks[this.y] &&
|
|
|
|
this.currentAsciiLayerBlocks[this.y][this.x]
|
|
|
|
? this.currentAsciiLayerBlocks[this.y][this.x]
|
2021-08-11 23:47:36 +00:00
|
|
|
: false;
|
|
|
|
},
|
2021-08-12 01:52:40 +00:00
|
|
|
maxBrushSize() {
|
|
|
|
return maxBrushSize;
|
|
|
|
},
|
2021-08-15 00:57:37 +00:00
|
|
|
currentAsciiWidth() {
|
2021-08-15 01:20:58 +00:00
|
|
|
return this.currentSelectedLayer.width;
|
2021-08-15 00:57:37 +00:00
|
|
|
},
|
|
|
|
currentAsciiHeight() {
|
2021-12-21 09:03:40 +00:00
|
|
|
// Tested with wtf.txt and the max rows before the canvas
|
|
|
|
// stops working seems to be 2184
|
2021-12-22 10:36:41 +00:00
|
|
|
return this.currentSelectedLayer.height > 2184
|
|
|
|
? 2184
|
|
|
|
: this.currentSelectedLayer.height;
|
2021-08-15 01:20:58 +00:00
|
|
|
},
|
2021-10-16 05:16:21 +00:00
|
|
|
imageOverlay() {
|
|
|
|
return this.$store.getters.imageOverlay;
|
|
|
|
},
|
|
|
|
imageOverlayStyle() {
|
2021-12-06 06:55:06 +00:00
|
|
|
let repeat = "background-repeat: no-repeat;";
|
|
|
|
let stretched = "background-size: 100%;";
|
2021-10-23 00:23:02 +00:00
|
|
|
|
|
|
|
if (this.imageOverlay.repeatx && this.imageOverlay.repeaty) {
|
2021-12-06 06:55:06 +00:00
|
|
|
repeat = "background-repeat: repeat;";
|
2021-10-23 00:23:02 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
if (this.imageOverlay.repeatx && !this.imageOverlay.repeaty) {
|
2021-12-06 06:55:06 +00:00
|
|
|
repeat = "background-repeat: repeat-x;";
|
2021-10-23 00:23:02 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
if (!this.imageOverlay.repeatx && this.imageOverlay.repeaty) {
|
2021-12-06 06:55:06 +00:00
|
|
|
repeat = "background-repeat: repeat-y;";
|
2021-10-23 00:23:02 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
if (this.imageOverlay.stretched) {
|
2021-12-06 06:55:06 +00:00
|
|
|
stretched = "background-size: 100%;";
|
2021-10-23 00:23:02 +00:00
|
|
|
} else {
|
2021-12-06 06:55:06 +00:00
|
|
|
stretched = "";
|
2021-10-23 00:23:02 +00:00
|
|
|
}
|
|
|
|
|
2021-12-06 06:55:06 +00:00
|
|
|
return this.imageOverlay.visible
|
|
|
|
? `background-image: url('${
|
|
|
|
this.imageOverlay.url
|
|
|
|
}'); ${stretched} ${repeat} opacity: ${
|
|
|
|
this.imageOverlay.opacity / 100
|
|
|
|
}; z-index: -1; position: absolute;`
|
|
|
|
: "position: absolute;";
|
2021-10-16 05:16:21 +00:00
|
|
|
},
|
|
|
|
canvasTransparent() {
|
2021-12-06 06:55:06 +00:00
|
|
|
return this.imageOverlay.visible ? "opacity: 0.6;" : "opacity: 1;";
|
|
|
|
},
|
2020-12-27 02:42:26 +00:00
|
|
|
},
|
|
|
|
watch: {
|
2021-04-03 03:13:03 +00:00
|
|
|
currentAscii(val, old) {
|
2021-07-10 01:41:17 +00:00
|
|
|
if (val !== old) {
|
2021-08-15 00:57:37 +00:00
|
|
|
this.canvas.width = this.currentAsciiWidth * blockWidth;
|
|
|
|
this.canvas.height = this.currentAsciiHeight * blockHeight;
|
2021-12-22 10:36:41 +00:00
|
|
|
this.delayRedrawCanvas();
|
2021-07-10 01:41:17 +00:00
|
|
|
}
|
2021-04-03 03:13:03 +00:00
|
|
|
},
|
2021-08-16 04:10:06 +00:00
|
|
|
currentSelectedLayer(val, old) {
|
2021-12-04 03:47:31 +00:00
|
|
|
if (old && old.visible) {
|
2021-08-16 04:10:06 +00:00
|
|
|
this.warnInvisibleLayer();
|
|
|
|
}
|
2021-08-16 02:39:30 +00:00
|
|
|
},
|
2021-12-24 04:06:55 +00:00
|
|
|
currentAsciiLayerBlocks() {
|
|
|
|
this.delayRedrawCanvas();
|
|
|
|
},
|
2021-04-03 03:13:03 +00:00
|
|
|
currentTool() {
|
2021-08-16 02:39:30 +00:00
|
|
|
this.warnInvisibleLayer();
|
|
|
|
|
2021-08-03 04:59:12 +00:00
|
|
|
switch (this.currentTool.name) {
|
2021-08-07 05:36:32 +00:00
|
|
|
case "default":
|
2021-08-03 03:00:32 +00:00
|
|
|
// Reset default values for tools
|
2021-08-03 04:59:12 +00:00
|
|
|
this.textEditing = {
|
2021-04-03 03:13:03 +00:00
|
|
|
startX: null,
|
|
|
|
startY: null,
|
2021-08-03 04:59:12 +00:00
|
|
|
};
|
2021-04-03 03:13:03 +00:00
|
|
|
|
2021-08-12 04:19:01 +00:00
|
|
|
this.resetSelect();
|
2021-04-03 03:13:03 +00:00
|
|
|
break;
|
2021-12-07 03:54:18 +00:00
|
|
|
|
|
|
|
case "text":
|
|
|
|
this.textEditing.startX = this.x;
|
|
|
|
this.textEditing.startY = this.y;
|
|
|
|
break;
|
2021-04-03 03:13:03 +00:00
|
|
|
}
|
2021-03-27 02:07:33 +00:00
|
|
|
},
|
2021-12-26 02:37:16 +00:00
|
|
|
isMouseOnCanvas(val, old) {
|
2021-12-26 06:31:07 +00:00
|
|
|
if (val !== old) {
|
|
|
|
if (!this.isSelecting) {
|
|
|
|
this.clearToolCanvas();
|
|
|
|
this.dispatchBlocks(true);
|
|
|
|
this.canTool = false;
|
|
|
|
this.delayRedrawCanvas();
|
|
|
|
}
|
2021-07-17 01:44:27 +00:00
|
|
|
}
|
2021-05-22 02:49:19 +00:00
|
|
|
},
|
2021-08-08 03:24:06 +00:00
|
|
|
gridView(val, old) {
|
2021-08-08 00:36:17 +00:00
|
|
|
if (val !== old) {
|
2021-08-08 03:24:06 +00:00
|
|
|
this.delayRedrawCanvas();
|
2021-08-08 00:36:17 +00:00
|
|
|
}
|
2021-08-08 03:24:06 +00:00
|
|
|
},
|
|
|
|
brushBlocks() {
|
|
|
|
this.clearToolCanvas();
|
2021-08-11 23:47:36 +00:00
|
|
|
|
|
|
|
// This was supposed to update the brush preview real time
|
|
|
|
if (this.isMouseOnCanvas && this.isBrushing) {
|
2021-08-08 03:24:06 +00:00
|
|
|
this.drawBrush();
|
|
|
|
}
|
|
|
|
},
|
2021-10-02 03:48:39 +00:00
|
|
|
// For when we do zook, ctrl + or ctrl -
|
|
|
|
// blockSizeMultiplier() {
|
|
|
|
// // this.delayRedrawCanvas();
|
|
|
|
// },
|
2021-08-15 01:20:58 +00:00
|
|
|
// Save text to store when finished
|
|
|
|
isTextEditing(val, old) {
|
|
|
|
if (val !== old && val === false) {
|
2021-12-17 11:03:10 +00:00
|
|
|
this.dispatchBlocks();
|
2021-08-15 01:20:58 +00:00
|
|
|
}
|
2021-08-16 02:10:09 +00:00
|
|
|
},
|
2021-08-16 04:10:06 +00:00
|
|
|
textEditing(val, old) {
|
|
|
|
this.$emit("textediting", val);
|
|
|
|
},
|
2021-12-24 04:06:55 +00:00
|
|
|
updateCanvas(val, old) {
|
|
|
|
if (val !== old) {
|
|
|
|
// This comes from KeyboardShortcuts.vue
|
|
|
|
this.clearToolCanvas();
|
|
|
|
this.drawTextIndicator();
|
|
|
|
this.drawIndicator();
|
2021-08-16 04:10:06 +00:00
|
|
|
|
2021-12-24 04:06:55 +00:00
|
|
|
this.delayRedrawCanvas();
|
|
|
|
}
|
|
|
|
},
|
2021-08-17 00:24:41 +00:00
|
|
|
selecting(val) {
|
|
|
|
this.$emit("selecting", val);
|
|
|
|
},
|
2021-08-21 01:28:06 +00:00
|
|
|
yOffset() {
|
2021-10-09 00:47:16 +00:00
|
|
|
this.delayRedrawCanvas();
|
2021-10-02 00:55:39 +00:00
|
|
|
},
|
2021-12-18 01:35:58 +00:00
|
|
|
selectedLayerIndex(val, old) {
|
|
|
|
if (val !== old) {
|
|
|
|
this.diffBlocks.l = val;
|
|
|
|
}
|
2021-12-22 10:36:41 +00:00
|
|
|
},
|
2021-12-26 06:31:07 +00:00
|
|
|
updateascii(val, old) {
|
|
|
|
if ( (val.width !== old.width) || (val.height !== old.height) ) {
|
|
|
|
|
|
|
|
let layers = fillNullBlocks(val.height, val.width);
|
|
|
|
|
|
|
|
this.canvas.width = val.width * blockWidth;
|
|
|
|
this.canvas.height = val.height * blockHeight;
|
|
|
|
|
|
|
|
this.$store.commit("changeAsciiWidthHeight", {
|
|
|
|
width: val.width,
|
|
|
|
height: val.height,
|
|
|
|
layers: [...layers],
|
|
|
|
});
|
|
|
|
|
|
|
|
this.$refs.canvasdrag.width = val.width * blockWidth;
|
|
|
|
this.$refs.canvasdrag.height = val.height * blockHeight;
|
|
|
|
|
|
|
|
this.clearToolCanvas();
|
|
|
|
this.delayRedrawCanvas();
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
2020-12-27 02:42:26 +00:00
|
|
|
},
|
|
|
|
methods: {
|
2021-12-26 01:41:24 +00:00
|
|
|
startExport(type) {
|
|
|
|
let ascii = exportMirc();
|
|
|
|
|
|
|
|
switch (type) {
|
|
|
|
case "clipboard":
|
|
|
|
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",
|
|
|
|
});
|
|
|
|
}
|
|
|
|
);
|
|
|
|
break;
|
|
|
|
|
|
|
|
default:
|
|
|
|
case "file":
|
|
|
|
downloadFile(ascii.output.join(""), ascii.filename, "text/plain");
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
},
|
|
|
|
canvasToPng() {
|
|
|
|
canvasToPng(this.canvasRef, this.currentAscii.title);
|
|
|
|
},
|
2021-12-21 09:03:40 +00:00
|
|
|
openContextMenu(e) {
|
|
|
|
e.preventDefault();
|
|
|
|
// These are the correct X and Y when inside the floating panel
|
2021-12-22 10:36:41 +00:00
|
|
|
this.$refs["editor-menu"].open(e);
|
2021-12-21 09:03:40 +00:00
|
|
|
},
|
2021-12-17 11:03:10 +00:00
|
|
|
canvasKeyDown(char) {
|
|
|
|
if (
|
|
|
|
this.currentAsciiLayerBlocks[this.textEditing.startY] &&
|
|
|
|
this.currentAsciiLayerBlocks[this.textEditing.startY][
|
|
|
|
this.textEditing.startX
|
|
|
|
]
|
|
|
|
) {
|
|
|
|
let targetBlock =
|
|
|
|
this.currentAsciiLayerBlocks[this.textEditing.startY][
|
|
|
|
this.textEditing.startX
|
|
|
|
];
|
|
|
|
|
|
|
|
let oldBlock = {};
|
|
|
|
|
|
|
|
switch (char) {
|
|
|
|
// Remove a character
|
|
|
|
case "Backspace":
|
|
|
|
if (
|
|
|
|
this.currentAsciiLayerBlocks[this.textEditing.startY][
|
|
|
|
this.textEditing.startX - 1
|
|
|
|
]
|
|
|
|
) {
|
|
|
|
targetBlock =
|
|
|
|
this.currentAsciiLayerBlocks[this.textEditing.startY][
|
|
|
|
this.textEditing.startX - 1
|
|
|
|
];
|
|
|
|
|
|
|
|
oldBlock = {
|
2021-12-22 10:36:41 +00:00
|
|
|
...targetBlock,
|
2021-12-17 11:03:10 +00:00
|
|
|
};
|
|
|
|
|
2021-12-17 11:54:57 +00:00
|
|
|
delete this.currentAsciiLayerBlocks[this.textEditing.startY][
|
2021-12-17 11:03:10 +00:00
|
|
|
this.textEditing.startX - 1
|
2021-12-22 10:36:41 +00:00
|
|
|
]["char"];
|
2021-12-17 11:03:10 +00:00
|
|
|
|
|
|
|
this.storeDiffBlocks(
|
|
|
|
this.textEditing.startX,
|
|
|
|
this.textEditing.startY,
|
|
|
|
oldBlock,
|
|
|
|
this.currentAsciiLayerBlocks[this.textEditing.startY][
|
|
|
|
this.textEditing.startX - 1
|
|
|
|
]
|
|
|
|
);
|
|
|
|
|
|
|
|
// Move back one block
|
|
|
|
this.textEditing.startX -= 1;
|
|
|
|
}
|
|
|
|
|
|
|
|
// Remove char as current position, but don't change position after
|
|
|
|
case "Delete":
|
|
|
|
if (
|
|
|
|
this.currentAsciiLayerBlocks[this.textEditing.startY][
|
|
|
|
this.textEditing.startX
|
|
|
|
]
|
|
|
|
) {
|
|
|
|
targetBlock =
|
|
|
|
this.currentAsciiLayerBlocks[this.textEditing.startY][
|
|
|
|
this.textEditing.startX
|
|
|
|
];
|
|
|
|
|
|
|
|
oldBlock = { ...targetBlock };
|
|
|
|
|
2021-12-17 11:54:57 +00:00
|
|
|
delete this.currentAsciiLayerBlocks[this.textEditing.startY][
|
2021-12-17 11:03:10 +00:00
|
|
|
this.textEditing.startX
|
2021-12-22 10:36:41 +00:00
|
|
|
]["char"];
|
2021-12-17 11:03:10 +00:00
|
|
|
|
|
|
|
this.storeDiffBlocks(
|
|
|
|
this.textEditing.startX,
|
|
|
|
this.textEditing.startY,
|
|
|
|
oldBlock,
|
|
|
|
targetBlock
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
// Also remove in mirror mode the other chars
|
|
|
|
if (this.mirrorX) {
|
|
|
|
targetBlock =
|
|
|
|
this.currentAsciiLayerBlocks[this.textEditing.startY][
|
|
|
|
this.currentAsciiWidth - this.textEditing.startX
|
|
|
|
];
|
|
|
|
oldBlock = { ...targetBlock };
|
2021-12-22 10:36:41 +00:00
|
|
|
delete targetBlock["char"];
|
2021-12-17 11:03:10 +00:00
|
|
|
this.storeDiffBlocks(
|
|
|
|
this.textEditing.startX,
|
|
|
|
this.textEditing.startY,
|
|
|
|
oldBlock,
|
|
|
|
targetBlock
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
if (this.mirrorY) {
|
|
|
|
targetBlock =
|
|
|
|
this.currentAsciiLayerBlocks[
|
|
|
|
this.currentAsciiHeight - this.textEditing.startY
|
|
|
|
][this.textEditing.startX];
|
2021-12-22 10:36:41 +00:00
|
|
|
oldBlock = { ...targetBlock };
|
|
|
|
delete targetBlock["char"];
|
2021-12-17 11:54:57 +00:00
|
|
|
this.storeDiffBlocks(
|
|
|
|
this.textEditing.startX,
|
|
|
|
this.textEditing.startY,
|
|
|
|
oldBlock,
|
2021-12-22 10:36:41 +00:00
|
|
|
targetBlock
|
|
|
|
);
|
2021-12-17 11:03:10 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
if (this.mirrorY && this.mirrorX) {
|
|
|
|
targetBlock =
|
|
|
|
this.currentAsciiLayerBlocks[
|
|
|
|
this.currentAsciiHeight - this.textEditing.startY
|
|
|
|
][this.currentAsciiWidth - this.textEditing.startX];
|
|
|
|
oldBlock = { ...targetBlock };
|
2021-12-22 10:36:41 +00:00
|
|
|
delete targetBlock["char"];
|
2021-12-17 11:03:10 +00:00
|
|
|
this.storeDiffBlocks(
|
|
|
|
this.textEditing.startX,
|
|
|
|
this.textEditing.startY,
|
|
|
|
oldBlock,
|
|
|
|
targetBlock
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
break;
|
|
|
|
|
|
|
|
// Jump to next line at the 0 X position
|
|
|
|
case "Enter":
|
|
|
|
if (this.currentAsciiLayerBlocks[this.textEditing.startY + 1][0]) {
|
|
|
|
this.textEditing.startX = 0;
|
|
|
|
this.textEditing.startY += 1;
|
|
|
|
}
|
|
|
|
break;
|
|
|
|
|
|
|
|
// Move the text indicator around with the arrow keys
|
|
|
|
case "ArrowUp":
|
|
|
|
if (
|
|
|
|
this.currentAsciiLayerBlocks[this.textEditing.startY - 1][
|
|
|
|
this.textEditing.startX
|
|
|
|
]
|
|
|
|
) {
|
|
|
|
this.textEditing.startY -= 1;
|
|
|
|
}
|
|
|
|
break;
|
|
|
|
|
|
|
|
case "ArrowDown":
|
|
|
|
if (
|
|
|
|
this.currentAsciiLayerBlocks[this.textEditing.startY + 1][
|
|
|
|
this.textEditing.startX
|
|
|
|
]
|
|
|
|
) {
|
|
|
|
this.textEditing.startY += 1;
|
|
|
|
}
|
|
|
|
break;
|
|
|
|
|
|
|
|
case "ArrowLeft":
|
|
|
|
if (
|
|
|
|
this.currentAsciiLayerBlocks[this.textEditing.startY][
|
|
|
|
this.textEditing.startX - 1
|
|
|
|
]
|
|
|
|
) {
|
|
|
|
this.textEditing.startX -= 1;
|
|
|
|
}
|
|
|
|
break;
|
|
|
|
|
|
|
|
case "ArrowRight":
|
|
|
|
if (
|
|
|
|
this.currentAsciiLayerBlocks[this.textEditing.startY][
|
|
|
|
this.textEditing.startX + 1
|
|
|
|
]
|
|
|
|
) {
|
|
|
|
this.textEditing.startX += 1;
|
|
|
|
}
|
|
|
|
break;
|
|
|
|
|
|
|
|
// Normal typing
|
|
|
|
default:
|
|
|
|
if (char.length === 1) {
|
|
|
|
if (this.canFg) {
|
|
|
|
targetBlock.fg = this.currentFg;
|
|
|
|
}
|
|
|
|
|
|
|
|
oldBlock = { ...targetBlock };
|
|
|
|
targetBlock.char = char;
|
|
|
|
|
|
|
|
this.storeDiffBlocks(
|
|
|
|
this.textEditing.startX,
|
|
|
|
this.textEditing.startY,
|
|
|
|
oldBlock,
|
|
|
|
targetBlock
|
|
|
|
);
|
|
|
|
|
|
|
|
let theX = this.currentAsciiWidth - this.textEditing.startX;
|
|
|
|
if (this.mirrorX) {
|
|
|
|
targetBlock =
|
|
|
|
this.currentAsciiLayerBlocks[this.textEditing.startY][theX];
|
|
|
|
|
|
|
|
oldBlock = { ...targetBlock };
|
|
|
|
|
|
|
|
if (this.canFg) {
|
|
|
|
targetBlock.fg = this.currentFg;
|
|
|
|
}
|
|
|
|
|
|
|
|
targetBlock.char = char;
|
|
|
|
|
|
|
|
this.storeDiffBlocks(
|
|
|
|
theX,
|
|
|
|
this.textEditing.startY,
|
|
|
|
oldBlock,
|
|
|
|
targetBlock
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
let theY = this.currentAsciiHeight - this.textEditing.startY;
|
|
|
|
if (this.mirrorY) {
|
|
|
|
targetBlock =
|
|
|
|
this.currentAsciiLayerBlocks[theY][this.textEditing.startX];
|
|
|
|
|
|
|
|
oldBlock = { ...targetBlock };
|
|
|
|
|
|
|
|
if (this.canFg) {
|
|
|
|
targetBlock.fg = this.currentFg;
|
|
|
|
}
|
|
|
|
|
|
|
|
targetBlock.char = char;
|
|
|
|
|
|
|
|
this.storeDiffBlocks(
|
|
|
|
this.textEditing.startX,
|
|
|
|
theY,
|
|
|
|
oldBlock,
|
|
|
|
targetBlock
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
if (this.mirrorY && this.mirrorX) {
|
|
|
|
targetBlock = this.currentAsciiLayerBlocks[theY][theX];
|
|
|
|
|
|
|
|
oldBlock = { ...targetBlock };
|
|
|
|
|
|
|
|
if (this.canFg) {
|
|
|
|
targetBlock.fg = this.currentFg;
|
|
|
|
}
|
|
|
|
|
|
|
|
targetBlock.char = char;
|
|
|
|
|
|
|
|
this.storeDiffBlocks(theX, theY, oldBlock, targetBlock);
|
|
|
|
}
|
|
|
|
|
|
|
|
if (
|
|
|
|
this.currentAsciiLayerBlocks[this.textEditing.startY][
|
|
|
|
this.textEditing.startX + 1
|
|
|
|
]
|
|
|
|
) {
|
|
|
|
this.textEditing.startX++;
|
|
|
|
} else {
|
|
|
|
this.textEditing.startX = 0;
|
|
|
|
|
|
|
|
if (this.textEditing.startY < this.currentAsciiHeight) {
|
|
|
|
this.textEditing.startY++;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
this.clearToolCanvas();
|
|
|
|
this.drawTextIndicator();
|
|
|
|
this.drawIndicator();
|
|
|
|
|
|
|
|
this.delayRedrawCanvas();
|
|
|
|
},
|
2021-08-16 02:39:30 +00:00
|
|
|
warnInvisibleLayer() {
|
2021-12-04 03:47:31 +00:00
|
|
|
if (!this.currentSelectedLayer && this.currentSelectedLayer.visible) {
|
2021-08-16 02:39:30 +00:00
|
|
|
this.$toasted.show("You are trying to edit an invisible layer!!", {
|
|
|
|
type: "error",
|
|
|
|
icon: "fa-check-cross",
|
|
|
|
singleton: true,
|
|
|
|
});
|
|
|
|
}
|
|
|
|
},
|
2021-08-14 06:41:42 +00:00
|
|
|
checkVisible(top) {
|
|
|
|
return checkVisible(top, top - this.blockHeight);
|
|
|
|
},
|
2021-05-15 01:52:20 +00:00
|
|
|
undo() {
|
2021-08-07 05:36:32 +00:00
|
|
|
this.$store.commit("undoBlocks");
|
2021-05-22 02:49:19 +00:00
|
|
|
},
|
|
|
|
redo() {
|
2021-08-07 05:36:32 +00:00
|
|
|
this.$store.commit("redoBlocks");
|
2021-05-15 01:52:20 +00:00
|
|
|
},
|
2021-08-12 03:19:06 +00:00
|
|
|
resetSelect() {
|
|
|
|
this.selecting = {
|
|
|
|
startX: null,
|
|
|
|
startY: null,
|
|
|
|
endX: null,
|
|
|
|
endY: null,
|
|
|
|
canSelect: false,
|
|
|
|
};
|
2021-08-17 00:24:41 +00:00
|
|
|
this.$emit("selecting", this.selecting);
|
2021-08-12 03:19:06 +00:00
|
|
|
},
|
2021-06-05 01:25:23 +00:00
|
|
|
redrawSelect() {
|
2021-08-14 09:09:36 +00:00
|
|
|
if (this.currentAsciiLayerBlocks.length) {
|
2021-04-03 03:13:03 +00:00
|
|
|
this.clearToolCanvas();
|
2021-08-03 03:00:32 +00:00
|
|
|
this.toolCtx.fillStyle = this.mircColours[0];
|
2021-04-03 03:13:03 +00:00
|
|
|
|
2021-05-01 02:17:49 +00:00
|
|
|
this.toolCtx.fillRect(
|
2021-07-24 01:55:44 +00:00
|
|
|
this.selecting.startX,
|
|
|
|
this.selecting.startY,
|
|
|
|
this.selecting.endX - this.selecting.startX,
|
2021-08-07 05:36:32 +00:00
|
|
|
this.selecting.endY - this.selecting.startY
|
2021-04-17 00:12:02 +00:00
|
|
|
);
|
2021-08-08 00:36:17 +00:00
|
|
|
|
|
|
|
this.toolCtx.setLineDash([6]);
|
|
|
|
this.toolCtx.strokeRect(
|
|
|
|
this.selecting.startX,
|
|
|
|
this.selecting.startY,
|
|
|
|
this.selecting.endX - this.selecting.startX,
|
|
|
|
this.selecting.endY - this.selecting.startY
|
|
|
|
);
|
2021-04-03 03:13:03 +00:00
|
|
|
}
|
|
|
|
},
|
2021-08-28 02:03:42 +00:00
|
|
|
mergeLayers() {
|
|
|
|
return mergeLayers();
|
|
|
|
},
|
2021-10-02 03:48:39 +00:00
|
|
|
drawGrid() {
|
|
|
|
let w = this.canvas.width;
|
|
|
|
let h = this.canvas.height;
|
|
|
|
|
2021-12-21 09:03:40 +00:00
|
|
|
this.ctx.beginPath();
|
2021-10-02 03:48:39 +00:00
|
|
|
|
|
|
|
for (var x = 0; x <= w; x += blockWidth) {
|
2021-12-21 09:03:40 +00:00
|
|
|
this.ctx.moveTo(x, 0);
|
|
|
|
this.ctx.lineTo(x, h);
|
2021-10-02 03:48:39 +00:00
|
|
|
}
|
2021-12-06 06:55:06 +00:00
|
|
|
|
2021-12-21 09:03:40 +00:00
|
|
|
this.ctx.strokeStyle = "rgba(0, 0, 0, 1)";
|
|
|
|
this.ctx.lineWidth = 1;
|
|
|
|
this.ctx.setLineDash([1]);
|
2021-12-06 06:55:06 +00:00
|
|
|
|
2021-12-21 09:03:40 +00:00
|
|
|
this.ctx.stroke();
|
2021-12-06 06:55:06 +00:00
|
|
|
|
2021-12-21 09:03:40 +00:00
|
|
|
this.ctx.beginPath();
|
2021-10-02 03:48:39 +00:00
|
|
|
for (var y = 0; y <= h; y += blockHeight) {
|
2021-12-21 09:03:40 +00:00
|
|
|
this.ctx.moveTo(0, y);
|
|
|
|
this.ctx.lineTo(w, y);
|
2021-10-02 03:48:39 +00:00
|
|
|
}
|
2021-12-06 06:55:06 +00:00
|
|
|
|
2021-12-21 09:03:40 +00:00
|
|
|
this.ctx.stroke();
|
2021-10-02 03:48:39 +00:00
|
|
|
},
|
2021-01-09 01:57:48 +00:00
|
|
|
redrawCanvas() {
|
2021-08-14 06:41:42 +00:00
|
|
|
if (this.currentAsciiLayers.length) {
|
2021-12-21 09:03:40 +00:00
|
|
|
// https://stackoverflow.com/questions/28390358/high-cpu-usage-with-canvas-and-requestanimationframe
|
2021-08-08 00:36:17 +00:00
|
|
|
|
2021-03-20 03:45:10 +00:00
|
|
|
// Position of the meta array
|
|
|
|
let x = 0;
|
|
|
|
let y = 0;
|
2021-01-23 02:50:32 +00:00
|
|
|
|
2021-03-20 03:45:10 +00:00
|
|
|
// Draws the actual rectangle
|
|
|
|
let canvasX = 0;
|
|
|
|
let canvasY = 0;
|
|
|
|
let curBlock = {};
|
2021-03-06 02:03:22 +00:00
|
|
|
|
2021-03-29 00:39:42 +00:00
|
|
|
// hack font for ascii shout outs 2 beenz
|
2021-08-28 02:03:42 +00:00
|
|
|
|
2021-12-24 04:06:55 +00:00
|
|
|
if (
|
|
|
|
this.diffBlocks.new.length &&
|
|
|
|
!this.canTool &&
|
|
|
|
!this.isTextEditing &&
|
|
|
|
!this.isErasing &&
|
|
|
|
!this.isEraserFill &&
|
|
|
|
!this.isFill
|
|
|
|
// Ignore redrawing from diffBlocks the above until they are refactored to work better
|
|
|
|
) {
|
|
|
|
// console.log("redrawing canvas from cache");
|
2021-12-22 10:36:41 +00:00
|
|
|
// If we have a difference stored, just render the difference only instead
|
|
|
|
// of the entire ascii again
|
2021-01-09 01:57:48 +00:00
|
|
|
|
2021-12-22 10:36:41 +00:00
|
|
|
for (let i in this.diffBlocks.new) {
|
|
|
|
let entry = this.diffBlocks.new[i];
|
|
|
|
canvasX = blockWidth * entry.x;
|
|
|
|
canvasY = blockHeight * entry.y;
|
2021-08-14 06:41:42 +00:00
|
|
|
|
2021-12-22 10:36:41 +00:00
|
|
|
curBlock = { ...entry.b };
|
2021-08-17 00:24:41 +00:00
|
|
|
|
2021-12-22 10:36:41 +00:00
|
|
|
// this.ctx.clearRect(canvasX,canvasY,blockWidth, blockHeight);
|
2021-08-28 02:03:42 +00:00
|
|
|
|
2021-12-18 01:35:58 +00:00
|
|
|
if (curBlock.bg !== undefined && curBlock.bg !== null) {
|
2021-08-28 02:03:42 +00:00
|
|
|
this.ctx.fillStyle = this.mircColours[curBlock.bg];
|
|
|
|
this.ctx.fillRect(canvasX, canvasY, blockWidth, blockHeight);
|
|
|
|
}
|
2021-03-20 03:45:10 +00:00
|
|
|
|
2021-12-18 01:35:58 +00:00
|
|
|
if (curBlock.char !== undefined && curBlock.char !== null) {
|
|
|
|
if (curBlock.fg !== undefined && curBlock.fg !== null) {
|
2021-08-28 02:03:42 +00:00
|
|
|
this.ctx.fillStyle = this.mircColours[curBlock.fg];
|
|
|
|
} else {
|
2021-12-18 01:35:58 +00:00
|
|
|
this.ctx.fillStyle = "#FFFFFF";
|
2021-03-06 02:03:22 +00:00
|
|
|
}
|
2021-08-28 02:03:42 +00:00
|
|
|
|
|
|
|
this.ctx.fillText(
|
|
|
|
curBlock.char,
|
|
|
|
canvasX,
|
|
|
|
canvasY + blockHeight - 3
|
|
|
|
);
|
2021-01-23 02:50:32 +00:00
|
|
|
}
|
2021-01-30 02:33:11 +00:00
|
|
|
}
|
2021-12-22 10:36:41 +00:00
|
|
|
|
|
|
|
this.diffBlocks = {
|
|
|
|
l: this.selectedLayerIndex,
|
|
|
|
new: [],
|
|
|
|
old: [],
|
|
|
|
};
|
|
|
|
} else {
|
2021-12-24 04:06:55 +00:00
|
|
|
// console.log("redrawing canvas");
|
2021-12-22 10:36:41 +00:00
|
|
|
|
|
|
|
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
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2021-01-09 01:57:48 +00:00
|
|
|
}
|
2021-10-02 03:48:39 +00:00
|
|
|
|
|
|
|
if (this.gridView) {
|
|
|
|
this.drawGrid();
|
|
|
|
}
|
2021-12-21 09:03:40 +00:00
|
|
|
|
|
|
|
this.ctx.restore();
|
2021-03-20 03:45:10 +00:00
|
|
|
}
|
2021-03-27 04:16:15 +00:00
|
|
|
},
|
|
|
|
onCanvasResize(left, top, width, height) {
|
2021-08-08 03:24:06 +00:00
|
|
|
const canvasBlockHeight = Math.floor(height / blockHeight);
|
2021-08-08 00:36:17 +00:00
|
|
|
const canvasBlockWidth = Math.floor(width / blockWidth);
|
2021-08-15 01:20:58 +00:00
|
|
|
let layers = fillNullBlocks(canvasBlockHeight, canvasBlockWidth);
|
2021-04-03 03:13:03 +00:00
|
|
|
|
2021-08-14 06:41:42 +00:00
|
|
|
this.top = top;
|
2021-03-27 04:16:15 +00:00
|
|
|
this.canvas.width = width;
|
|
|
|
this.canvas.height = height;
|
2021-04-01 23:01:36 +00:00
|
|
|
|
2021-08-07 05:36:32 +00:00
|
|
|
this.$store.commit("changeAsciiWidthHeight", {
|
2021-04-03 03:13:03 +00:00
|
|
|
width: canvasBlockWidth,
|
|
|
|
height: canvasBlockHeight,
|
2021-08-15 01:20:58 +00:00
|
|
|
layers: [...layers],
|
2021-04-03 03:13:03 +00:00
|
|
|
});
|
2021-04-01 23:01:36 +00:00
|
|
|
|
2021-08-15 01:20:58 +00:00
|
|
|
this.$refs.canvasdrag.width = width;
|
2021-08-19 00:23:12 +00:00
|
|
|
this.$refs.canvasdrag.height = height;
|
2021-03-27 04:16:15 +00:00
|
|
|
},
|
2021-04-01 23:01:36 +00:00
|
|
|
onCavasDragStop(x, y) {
|
2021-03-27 04:16:15 +00:00
|
|
|
// Update left and top in panel
|
2021-08-14 06:41:42 +00:00
|
|
|
this.top = y;
|
2021-08-07 05:36:32 +00:00
|
|
|
this.$store.commit("changeAsciiCanvasState", { x, y });
|
2021-10-09 00:47:16 +00:00
|
|
|
|
2021-12-06 06:55:06 +00:00
|
|
|
this.delayRedrawCanvas();
|
2021-08-14 06:41:42 +00:00
|
|
|
},
|
|
|
|
onCanvasDrag(x, y) {
|
|
|
|
this.top = y;
|
2021-03-27 04:16:15 +00:00
|
|
|
},
|
2021-12-24 04:06:55 +00:00
|
|
|
dispatchBlocks(clearDiff = false) {
|
2021-12-17 09:18:35 +00:00
|
|
|
this.diffBlocks.old = this.diffBlocks.old.flat();
|
|
|
|
this.diffBlocks.new = this.diffBlocks.new.flat();
|
|
|
|
|
|
|
|
this.$store.dispatch("updateAsciiBlocksAsync", {
|
|
|
|
blocks: this.currentAsciiLayerBlocks,
|
|
|
|
diff: { ...this.diffBlocks },
|
|
|
|
});
|
|
|
|
|
2021-12-24 04:06:55 +00:00
|
|
|
if (clearDiff) {
|
|
|
|
this.diffBlocks = {
|
|
|
|
l: this.selectedLayerIndex,
|
|
|
|
new: [],
|
|
|
|
old: [],
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
2021-12-17 09:18:35 +00:00
|
|
|
},
|
2021-03-27 04:16:15 +00:00
|
|
|
// Mouse Up, Down and Move
|
|
|
|
canvasMouseUp() {
|
2021-08-11 23:47:36 +00:00
|
|
|
if (this.isDefault) return;
|
2021-08-03 06:33:06 +00:00
|
|
|
|
2021-04-17 00:12:02 +00:00
|
|
|
switch (this.currentTool.name) {
|
2021-08-07 05:36:32 +00:00
|
|
|
case "brush":
|
2021-03-27 04:16:15 +00:00
|
|
|
this.canTool = false;
|
2021-05-15 01:52:20 +00:00
|
|
|
|
2021-12-17 09:18:35 +00:00
|
|
|
this.dispatchBlocks();
|
2021-05-22 02:49:19 +00:00
|
|
|
|
2021-03-27 04:16:15 +00:00
|
|
|
break;
|
|
|
|
|
2021-08-07 05:36:32 +00:00
|
|
|
case "eraser":
|
2021-03-27 04:16:15 +00:00
|
|
|
this.canTool = false;
|
2021-12-17 08:47:38 +00:00
|
|
|
|
2021-12-26 06:31:07 +00:00
|
|
|
this.dispatchBlocks(true);
|
2021-12-17 08:47:38 +00:00
|
|
|
|
2021-03-27 04:16:15 +00:00
|
|
|
break;
|
|
|
|
|
2021-08-11 23:47:36 +00:00
|
|
|
case "fill-eraser":
|
2021-08-07 05:36:32 +00:00
|
|
|
case "fill":
|
2021-08-08 00:36:17 +00:00
|
|
|
this.canTool = false;
|
2021-03-27 04:16:15 +00:00
|
|
|
break;
|
2021-04-03 03:13:03 +00:00
|
|
|
|
2021-08-07 05:36:32 +00:00
|
|
|
case "select":
|
2021-04-03 03:13:03 +00:00
|
|
|
this.selecting.canSelect = false;
|
2021-08-03 03:00:32 +00:00
|
|
|
this.processSelect();
|
2021-04-03 03:13:03 +00:00
|
|
|
break;
|
|
|
|
|
2021-08-07 05:36:32 +00:00
|
|
|
case "text":
|
2021-05-22 02:49:19 +00:00
|
|
|
this.textEditing.startX = this.x;
|
|
|
|
this.textEditing.startY = this.y;
|
2021-04-03 03:13:03 +00:00
|
|
|
break;
|
2021-03-27 04:16:15 +00:00
|
|
|
}
|
|
|
|
},
|
|
|
|
canvasMouseDown() {
|
2021-08-11 23:47:36 +00:00
|
|
|
if (this.isDefault) return;
|
2021-08-03 06:33:06 +00:00
|
|
|
|
2021-08-11 23:47:36 +00:00
|
|
|
if (this.asciiBlockAtXy && this.currentTool) {
|
|
|
|
const targetBlock = this.asciiBlockAtXy;
|
2021-04-02 04:43:11 +00:00
|
|
|
|
2021-04-17 00:12:02 +00:00
|
|
|
switch (this.currentTool.name) {
|
2021-08-07 05:36:32 +00:00
|
|
|
case "select":
|
2021-07-31 02:12:11 +00:00
|
|
|
this.selecting.startX = this.canvasX;
|
|
|
|
this.selecting.startY = this.canvasY;
|
|
|
|
this.selecting.canSelect = true;
|
2021-08-07 22:36:00 +00:00
|
|
|
this.clearToolCanvas();
|
2021-04-03 03:13:03 +00:00
|
|
|
break;
|
|
|
|
|
2021-08-07 05:36:32 +00:00
|
|
|
case "fill":
|
2021-04-02 04:43:11 +00:00
|
|
|
this.fill();
|
2021-12-17 08:47:38 +00:00
|
|
|
this.canTool = false;
|
2021-12-24 04:06:55 +00:00
|
|
|
this.dispatchBlocks(true);
|
2021-03-29 00:39:42 +00:00
|
|
|
break;
|
|
|
|
|
2021-08-11 23:47:36 +00:00
|
|
|
case "fill-eraser":
|
|
|
|
this.fill(true);
|
2021-12-24 04:06:55 +00:00
|
|
|
this.dispatchBlocks(true);
|
2021-08-11 23:47:36 +00:00
|
|
|
break;
|
|
|
|
|
2021-08-07 05:36:32 +00:00
|
|
|
case "brush":
|
2021-03-29 00:39:42 +00:00
|
|
|
this.canTool = true;
|
2021-05-22 02:49:19 +00:00
|
|
|
this.drawBrush();
|
2021-03-29 00:39:42 +00:00
|
|
|
break;
|
|
|
|
|
2021-08-07 05:36:32 +00:00
|
|
|
case "eraser":
|
2021-03-29 00:39:42 +00:00
|
|
|
this.canTool = true;
|
2021-05-22 02:49:19 +00:00
|
|
|
this.eraser();
|
2021-03-29 00:39:42 +00:00
|
|
|
break;
|
|
|
|
|
2021-08-07 05:36:32 +00:00
|
|
|
case "dropper":
|
2021-07-24 04:34:49 +00:00
|
|
|
if (this.canFg) {
|
2021-10-02 03:48:39 +00:00
|
|
|
this.$store.commit(
|
|
|
|
"changeColourFg",
|
2021-12-17 08:47:38 +00:00
|
|
|
targetBlock.fg === undefined ? this.currentFg : targetBlock.fg
|
2021-10-02 03:48:39 +00:00
|
|
|
);
|
2021-03-29 00:39:42 +00:00
|
|
|
}
|
2021-03-27 04:16:15 +00:00
|
|
|
|
2021-07-24 04:34:49 +00:00
|
|
|
if (this.canBg) {
|
2021-10-02 03:48:39 +00:00
|
|
|
this.$store.commit(
|
|
|
|
"changeColourBg",
|
2021-12-17 08:47:38 +00:00
|
|
|
targetBlock.bg === undefined ? this.currentBg : targetBlock.bg
|
2021-10-02 03:48:39 +00:00
|
|
|
);
|
2021-03-29 00:39:42 +00:00
|
|
|
}
|
2021-03-27 04:16:15 +00:00
|
|
|
|
2021-07-24 04:34:49 +00:00
|
|
|
if (this.canText) {
|
2021-10-02 03:48:39 +00:00
|
|
|
this.$store.commit(
|
|
|
|
"changeChar",
|
2021-12-17 08:47:38 +00:00
|
|
|
targetBlock.char === undefined
|
|
|
|
? this.currentChar
|
|
|
|
: targetBlock.char
|
2021-10-02 03:48:39 +00:00
|
|
|
);
|
2021-03-29 08:21:23 +00:00
|
|
|
}
|
|
|
|
|
2021-08-07 05:36:32 +00:00
|
|
|
this.$store.commit("changeTool", 0);
|
2021-03-29 00:39:42 +00:00
|
|
|
break;
|
|
|
|
}
|
2021-03-27 04:16:15 +00:00
|
|
|
}
|
2021-01-09 01:57:48 +00:00
|
|
|
},
|
2021-03-27 02:07:33 +00:00
|
|
|
canvasMouseMove(e) {
|
2021-08-11 23:47:36 +00:00
|
|
|
if (this.isDefault) return;
|
2021-08-03 06:33:06 +00:00
|
|
|
|
2021-08-07 22:36:00 +00:00
|
|
|
let lastX = this.x;
|
|
|
|
let lastY = this.y;
|
|
|
|
|
2021-03-13 03:30:58 +00:00
|
|
|
if (e.offsetX >= 0) {
|
|
|
|
this.x = e.offsetX;
|
|
|
|
}
|
2021-03-13 05:27:07 +00:00
|
|
|
|
2021-03-13 03:30:58 +00:00
|
|
|
if (e.offsetY >= 0) {
|
|
|
|
this.y = e.offsetY;
|
|
|
|
}
|
|
|
|
|
2021-08-08 00:36:17 +00:00
|
|
|
this.x = Math.floor(this.x / blockWidth);
|
|
|
|
this.y = Math.floor(this.y / blockHeight);
|
2021-03-29 00:39:42 +00:00
|
|
|
|
2021-08-08 00:36:17 +00:00
|
|
|
if (this.x === lastX && this.y === lastY) {
|
2021-08-07 22:36:00 +00:00
|
|
|
return;
|
|
|
|
}
|
2021-12-17 11:03:10 +00:00
|
|
|
|
2021-08-07 05:36:32 +00:00
|
|
|
this.$emit("coordsupdate", { x: this.x, y: this.y });
|
2021-03-29 05:10:31 +00:00
|
|
|
|
2021-08-11 23:47:36 +00:00
|
|
|
if (this.asciiBlockAtXy) {
|
2021-08-03 04:59:12 +00:00
|
|
|
switch (this.currentTool.name) {
|
2021-08-07 05:36:32 +00:00
|
|
|
case "brush":
|
2021-05-22 02:49:19 +00:00
|
|
|
if (this.isMouseOnCanvas) {
|
2021-08-12 01:52:40 +00:00
|
|
|
this.clearToolCanvas();
|
2021-05-22 02:49:19 +00:00
|
|
|
this.drawBrush();
|
2021-12-22 10:36:41 +00:00
|
|
|
this.delayRedrawCanvas();
|
2021-05-22 02:49:19 +00:00
|
|
|
}
|
2021-03-29 00:39:42 +00:00
|
|
|
break;
|
2021-03-27 02:07:33 +00:00
|
|
|
|
2021-08-07 05:36:32 +00:00
|
|
|
case "eraser":
|
2021-08-12 01:52:40 +00:00
|
|
|
this.clearToolCanvas();
|
|
|
|
|
2021-05-22 02:49:19 +00:00
|
|
|
if (this.isMouseOnCanvas) {
|
|
|
|
this.drawBrush(true);
|
2021-12-22 10:36:41 +00:00
|
|
|
this.delayRedrawCanvas();
|
|
|
|
this.eraser();
|
2021-03-27 02:07:33 +00:00
|
|
|
}
|
2021-12-24 04:06:55 +00:00
|
|
|
|
2021-03-29 00:39:42 +00:00
|
|
|
break;
|
2021-04-03 03:13:03 +00:00
|
|
|
|
2021-08-07 05:36:32 +00:00
|
|
|
case "select":
|
2021-04-03 03:13:03 +00:00
|
|
|
if (this.selecting.canSelect) {
|
2021-10-02 03:48:39 +00:00
|
|
|
this.selecting.endX = this.canvasX + blockWidth;
|
|
|
|
this.selecting.endY = this.canvasY + blockHeight;
|
2021-06-05 01:25:23 +00:00
|
|
|
|
|
|
|
this.redrawSelect();
|
2021-07-10 01:41:17 +00:00
|
|
|
}
|
2021-06-05 01:25:23 +00:00
|
|
|
|
|
|
|
if (!this.isSelected) {
|
|
|
|
this.redrawSelect();
|
2021-07-10 01:41:17 +00:00
|
|
|
}
|
2021-04-03 03:13:03 +00:00
|
|
|
|
|
|
|
break;
|
2021-05-22 02:49:19 +00:00
|
|
|
|
2021-08-07 05:36:32 +00:00
|
|
|
case "text":
|
2021-08-12 01:52:40 +00:00
|
|
|
this.clearToolCanvas();
|
2021-05-22 02:49:19 +00:00
|
|
|
this.drawIndicator();
|
2021-08-12 01:52:40 +00:00
|
|
|
|
|
|
|
if (this.isTextEditingValues) {
|
|
|
|
this.drawTextIndicator();
|
|
|
|
}
|
2021-05-22 02:49:19 +00:00
|
|
|
break;
|
|
|
|
|
2021-08-07 05:36:32 +00:00
|
|
|
case "dropper":
|
2021-08-12 01:52:40 +00:00
|
|
|
this.clearToolCanvas();
|
2021-05-22 02:49:19 +00:00
|
|
|
this.drawIndicator();
|
|
|
|
break;
|
|
|
|
|
2021-08-07 05:36:32 +00:00
|
|
|
case "fill":
|
2021-08-11 23:47:36 +00:00
|
|
|
case "fill-eraser":
|
2021-08-12 01:52:40 +00:00
|
|
|
this.clearToolCanvas();
|
2021-05-22 02:49:19 +00:00
|
|
|
this.drawIndicator();
|
|
|
|
break;
|
2021-03-29 00:39:42 +00:00
|
|
|
}
|
2021-03-27 02:07:33 +00:00
|
|
|
}
|
|
|
|
|
2021-12-22 10:36:41 +00:00
|
|
|
// this.delayRedrawCanvas();
|
2021-03-13 03:30:58 +00:00
|
|
|
},
|
2021-04-03 03:13:03 +00:00
|
|
|
clearToolCanvas() {
|
2021-05-01 02:17:49 +00:00
|
|
|
if (this.toolCtx) {
|
2021-08-07 22:36:00 +00:00
|
|
|
this.toolCtx.clearRect(0, 0, this.canvas.width, this.canvas.height);
|
2021-12-24 04:06:55 +00:00
|
|
|
// this.toolCtx.save();
|
|
|
|
this.toolCtx.width = this.toolCtx.width;
|
2021-04-03 03:13:03 +00:00
|
|
|
}
|
|
|
|
},
|
2021-03-27 02:07:33 +00:00
|
|
|
delayRedrawCanvas() {
|
|
|
|
if (this.redraw) {
|
|
|
|
this.redraw = false;
|
2021-10-02 03:48:39 +00:00
|
|
|
var _this = this;
|
2021-12-06 06:55:06 +00:00
|
|
|
setTimeout(function () {
|
2021-10-02 03:48:39 +00:00
|
|
|
requestAnimationFrame(() => {
|
|
|
|
_this.redrawCanvas();
|
|
|
|
_this.redraw = true;
|
|
|
|
});
|
2021-12-06 06:55:06 +00:00
|
|
|
}, 1000 / this.options.fps);
|
2021-03-27 02:07:33 +00:00
|
|
|
}
|
2021-03-26 11:36:37 +00:00
|
|
|
},
|
2021-08-07 02:41:47 +00:00
|
|
|
getBlocksWidth(blocks) {
|
2021-08-07 05:36:32 +00:00
|
|
|
return getBlocksWidth(blocks);
|
2021-08-07 02:41:47 +00:00
|
|
|
},
|
|
|
|
filterNullBlocks(blocks) {
|
2021-08-07 05:36:32 +00:00
|
|
|
return filterNullBlocks(blocks);
|
2021-08-07 02:41:47 +00:00
|
|
|
},
|
2021-04-03 03:13:03 +00:00
|
|
|
//
|
|
|
|
// TOOLS
|
|
|
|
//
|
2021-08-03 03:00:32 +00:00
|
|
|
processSelect() {
|
2021-08-03 04:59:12 +00:00
|
|
|
//
|
|
|
|
let x = 0;
|
|
|
|
let y = 0;
|
2021-08-03 03:00:32 +00:00
|
|
|
|
2021-08-03 04:59:12 +00:00
|
|
|
let curBlock = {};
|
|
|
|
this.selectedBlocks = [];
|
2021-08-03 03:00:32 +00:00
|
|
|
|
2021-08-07 05:36:32 +00:00
|
|
|
// If we select from the bottom right towards top left
|
|
|
|
// we need to swap the values
|
2021-08-07 02:41:47 +00:00
|
|
|
if (this.selecting.endY < this.selecting.startY) {
|
|
|
|
let end = this.selecting.endY;
|
|
|
|
let start = this.selecting.startY;
|
|
|
|
|
|
|
|
this.selecting.startY = end;
|
|
|
|
this.selecting.endY = start;
|
|
|
|
}
|
|
|
|
|
|
|
|
if (this.selecting.endX < this.selecting.startX) {
|
|
|
|
let end = this.selecting.endX;
|
|
|
|
let start = this.selecting.startX;
|
|
|
|
|
|
|
|
this.selecting.startX = end;
|
|
|
|
this.selecting.endX = start;
|
|
|
|
}
|
|
|
|
|
2021-08-15 00:57:37 +00:00
|
|
|
for (y = 0; y < this.currentAsciiHeight; y++) {
|
2021-08-03 04:59:12 +00:00
|
|
|
if (
|
2021-08-08 03:24:06 +00:00
|
|
|
y > Math.floor(this.selecting.startY / blockHeight) - 1 &&
|
2021-08-08 00:36:17 +00:00
|
|
|
y < Math.floor(this.selecting.endY / blockHeight)
|
2021-08-03 04:59:12 +00:00
|
|
|
) {
|
|
|
|
if (!this.selectedBlocks[y]) {
|
|
|
|
this.selectedBlocks[y] = [];
|
|
|
|
}
|
|
|
|
|
2021-08-15 00:57:37 +00:00
|
|
|
for (x = 0; x < this.currentAsciiWidth; x++) {
|
2021-08-03 03:00:32 +00:00
|
|
|
if (
|
2021-08-08 03:24:06 +00:00
|
|
|
x > Math.ceil(this.selecting.startX / blockWidth) - 1 &&
|
|
|
|
x <= Math.ceil(this.selecting.endX / blockWidth) - 1
|
2021-08-03 03:00:32 +00:00
|
|
|
) {
|
2021-08-14 09:09:36 +00:00
|
|
|
if (
|
|
|
|
this.currentAsciiLayerBlocks[y] &&
|
|
|
|
this.currentAsciiLayerBlocks[y][x]
|
|
|
|
) {
|
|
|
|
curBlock = { ...this.currentAsciiLayerBlocks[y][x] };
|
2021-08-03 03:00:32 +00:00
|
|
|
|
2021-08-03 04:59:12 +00:00
|
|
|
if (!this.selectedBlocks[y][x]) {
|
|
|
|
this.selectedBlocks[y][x] = { ...curBlock };
|
2021-08-03 03:00:32 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2021-08-03 04:59:12 +00:00
|
|
|
}
|
|
|
|
}
|
2021-08-16 04:10:06 +00:00
|
|
|
|
|
|
|
this.$emit("selectedblocks", this.selectedBlocks);
|
2021-08-17 00:24:41 +00:00
|
|
|
this.$emit("selecting", this.selecting);
|
2021-08-03 03:00:32 +00:00
|
|
|
},
|
2021-08-12 01:52:40 +00:00
|
|
|
drawRectangleBlock(x, y) {
|
|
|
|
let indicatorColour = this.asciiBlockAtXy.bg === 0 ? 1 : 0;
|
2021-05-29 00:45:16 +00:00
|
|
|
|
2021-08-12 01:52:40 +00:00
|
|
|
if (this.asciiBlockAtXy.bg === 8) {
|
2021-05-29 00:45:16 +00:00
|
|
|
indicatorColour = 1;
|
|
|
|
}
|
|
|
|
|
2021-08-03 03:00:32 +00:00
|
|
|
this.toolCtx.fillStyle = this.mircColours[indicatorColour];
|
2021-06-05 01:25:23 +00:00
|
|
|
|
2021-05-22 02:49:19 +00:00
|
|
|
this.toolCtx.fillRect(
|
2021-08-12 01:52:40 +00:00
|
|
|
x * blockWidth,
|
|
|
|
y * blockHeight,
|
|
|
|
blockWidth,
|
|
|
|
blockHeight
|
2021-05-22 02:49:19 +00:00
|
|
|
);
|
|
|
|
|
2021-08-12 01:52:40 +00:00
|
|
|
this.toolCtx.setLineDash([1, 2]);
|
|
|
|
this.toolCtx.strokeRect(
|
|
|
|
x * blockWidth,
|
|
|
|
y * blockHeight,
|
|
|
|
blockWidth,
|
|
|
|
blockHeight
|
|
|
|
);
|
|
|
|
},
|
|
|
|
drawIndicator() {
|
|
|
|
this.drawRectangleBlock(this.x, this.y);
|
|
|
|
|
2021-08-15 01:20:58 +00:00
|
|
|
// We can draw icons on the tool canvas with the font awesome CSS
|
|
|
|
// it needs more work though to not conflict with the brush preview chars
|
|
|
|
// if (this.isTextEditing) {
|
|
|
|
// this.toolCtx.font = '600 22px "Font Awesome 5 Free"';
|
|
|
|
// this.toolCtx.fillText(
|
|
|
|
// "\uf031",
|
|
|
|
// this.x * blockWidth,
|
|
|
|
// this.y * blockHeight + blockHeight * 2
|
|
|
|
// );
|
|
|
|
// // this.toolCtx.font = "13px Hack";
|
|
|
|
// }
|
2021-08-11 23:47:36 +00:00
|
|
|
|
2021-07-31 02:12:11 +00:00
|
|
|
if (this.isTextEditing) {
|
|
|
|
if (this.mirrorX) {
|
2021-08-15 00:57:37 +00:00
|
|
|
this.drawRectangleBlock(this.currentAsciiWidth - this.x, this.y);
|
2021-07-31 02:12:11 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
if (this.mirrorY) {
|
2021-08-15 00:57:37 +00:00
|
|
|
this.drawRectangleBlock(this.x, this.currentAsciiHeight - this.y);
|
2021-07-31 02:12:11 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
if (this.mirrorY && this.mirrorX) {
|
2021-08-12 01:52:40 +00:00
|
|
|
this.drawRectangleBlock(
|
2021-08-15 00:57:37 +00:00
|
|
|
this.currentAsciiWidth - this.x,
|
|
|
|
this.currentAsciiHeight - this.y
|
2021-07-31 02:12:11 +00:00
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
2021-05-22 02:49:19 +00:00
|
|
|
},
|
|
|
|
drawTextIndicator() {
|
2021-08-12 01:52:40 +00:00
|
|
|
this.drawRectangleBlock(this.textEditing.startX, this.textEditing.startY);
|
2021-05-22 02:49:19 +00:00
|
|
|
|
2021-07-31 02:12:11 +00:00
|
|
|
if (this.mirrorX) {
|
2021-08-12 01:52:40 +00:00
|
|
|
this.drawRectangleBlock(
|
2021-08-15 00:57:37 +00:00
|
|
|
this.currentAsciiWidth - this.textEditing.startX,
|
2021-08-12 01:52:40 +00:00
|
|
|
this.textEditing.startY
|
2021-07-31 02:12:11 +00:00
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
if (this.mirrorY) {
|
2021-08-12 01:52:40 +00:00
|
|
|
this.drawRectangleBlock(
|
|
|
|
this.textEditing.startX,
|
2021-08-15 00:57:37 +00:00
|
|
|
this.currentAsciiHeight - this.textEditing.startY
|
2021-07-31 02:12:11 +00:00
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
if (this.mirrorY && this.mirrorX) {
|
2021-08-12 01:52:40 +00:00
|
|
|
this.drawRectangleBlock(
|
2021-08-15 00:57:37 +00:00
|
|
|
this.currentAsciiWidth - this.textEditing.startX,
|
|
|
|
this.currentAsciiHeight - this.textEditing.startY
|
2021-07-31 02:12:11 +00:00
|
|
|
);
|
|
|
|
}
|
2021-05-22 02:49:19 +00:00
|
|
|
},
|
2021-07-31 02:12:11 +00:00
|
|
|
//
|
2021-08-16 02:10:09 +00:00
|
|
|
// Functions related to drawBrush function bellow
|
|
|
|
//
|
2021-08-16 02:39:30 +00:00
|
|
|
drawBrushBlocks(brushX, brushY, brushBlock, target = null, plain = false) {
|
2021-08-16 02:10:09 +00:00
|
|
|
const arrayY = brushY / blockHeight;
|
|
|
|
const arrayX = brushX / blockWidth;
|
|
|
|
const asciiWidth = this.currentAsciiWidth;
|
|
|
|
const asciiHeight = this.currentAsciiHeight;
|
|
|
|
let targetBlock = this.currentAsciiLayerBlocks[arrayY][arrayX];
|
|
|
|
|
|
|
|
if (plain) {
|
|
|
|
// Used for eraser preview and other non brushs
|
|
|
|
let indicatorColour = targetBlock.bg === 0 ? 1 : 0;
|
|
|
|
|
|
|
|
if (targetBlock.bg === 8) {
|
|
|
|
indicatorColour = 1;
|
|
|
|
}
|
|
|
|
|
|
|
|
this.toolCtx.fillStyle = this.mircColours[indicatorColour];
|
|
|
|
|
|
|
|
this.toolCtx.fillRect(brushX, brushY, blockWidth, blockHeight);
|
|
|
|
|
|
|
|
if (this.mirrorX) {
|
|
|
|
this.toolCtx.fillRect(
|
|
|
|
(asciiWidth - arrayX) * blockWidth,
|
|
|
|
brushY,
|
|
|
|
blockWidth,
|
|
|
|
blockHeight
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
if (this.mirrorY) {
|
|
|
|
this.toolCtx.fillRect(
|
|
|
|
brushX,
|
|
|
|
(asciiHeight - arrayY) * blockHeight,
|
|
|
|
blockWidth,
|
|
|
|
blockHeight
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
if (this.mirrorY && this.mirrorX) {
|
|
|
|
this.toolCtx.fillRect(
|
|
|
|
(asciiWidth - arrayX) * blockWidth,
|
|
|
|
(asciiHeight - arrayY) * blockHeight,
|
|
|
|
blockWidth,
|
|
|
|
blockHeight
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
switch (target) {
|
|
|
|
case "bg":
|
|
|
|
this.toolCtx.fillStyle =
|
2021-12-17 08:47:38 +00:00
|
|
|
brushBlock.bg !== undefined
|
2021-08-16 02:10:09 +00:00
|
|
|
? this.mircColours[brushBlock.bg]
|
|
|
|
: "rgba(255,255,255,0.4)";
|
|
|
|
|
|
|
|
break;
|
|
|
|
case "fg":
|
|
|
|
this.toolCtx.fillStyle =
|
2021-12-17 08:47:38 +00:00
|
|
|
brushBlock.fg !== undefined
|
2021-08-16 02:10:09 +00:00
|
|
|
? this.mircColours[brushBlock.fg]
|
|
|
|
: "#000000";
|
|
|
|
|
|
|
|
break;
|
|
|
|
|
|
|
|
// If no target is specified we assume we are rendering the text
|
|
|
|
default:
|
2021-12-17 08:47:38 +00:00
|
|
|
if (this.canText && brushBlock.char !== undefined) {
|
2021-08-16 02:10:09 +00:00
|
|
|
this.toolCtx.font = "Hack 13px";
|
|
|
|
|
|
|
|
this.toolCtx.fillStyle = this.canFg
|
|
|
|
? this.mircColours[brushBlock.fg]
|
|
|
|
: "#000000";
|
|
|
|
|
|
|
|
this.toolCtx.fillText(
|
|
|
|
brushBlock.char,
|
|
|
|
brushX,
|
|
|
|
brushY + blockHeight - 3
|
|
|
|
);
|
|
|
|
|
|
|
|
if (this.mirrorX) {
|
|
|
|
this.toolCtx.fillText(
|
|
|
|
brushBlock.char,
|
|
|
|
(asciiWidth - arrayX) * blockWidth,
|
|
|
|
brushY + blockHeight - 4
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
if (this.mirrorY) {
|
|
|
|
this.toolCtx.fillText(
|
|
|
|
brushBlock.char,
|
|
|
|
brushX,
|
|
|
|
(asciiHeight - arrayY) * blockHeight + 10
|
|
|
|
);
|
|
|
|
}
|
|
|
|
if (this.mirrorY && this.mirrorX) {
|
|
|
|
this.toolCtx.fillText(
|
|
|
|
brushBlock.char,
|
|
|
|
(asciiWidth - arrayX) * blockWidth,
|
|
|
|
(asciiHeight - arrayY) * blockHeight + 10
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// Apply text to ascii blocks
|
2021-12-21 09:03:40 +00:00
|
|
|
if (this.canText && this.canTool) {
|
2021-12-22 10:36:41 +00:00
|
|
|
targetBlock["char"] = brushBlock["char"];
|
2021-08-16 02:10:09 +00:00
|
|
|
|
|
|
|
if (
|
|
|
|
this.mirrorX &&
|
|
|
|
this.currentAsciiLayerBlocks[arrayY] &&
|
|
|
|
this.currentAsciiLayerBlocks[arrayY][asciiWidth - arrayX]
|
|
|
|
) {
|
|
|
|
this.currentAsciiLayerBlocks[arrayY][asciiWidth - arrayX].char =
|
|
|
|
brushBlock.char;
|
|
|
|
}
|
|
|
|
|
|
|
|
if (
|
|
|
|
this.mirrorY &&
|
|
|
|
this.currentAsciiLayerBlocks[asciiHeight - arrayY] &&
|
|
|
|
this.currentAsciiLayerBlocks[asciiHeight - arrayY][arrayX]
|
|
|
|
) {
|
|
|
|
this.currentAsciiLayerBlocks[asciiHeight - arrayY][arrayX].char =
|
|
|
|
brushBlock.char;
|
|
|
|
}
|
|
|
|
|
|
|
|
if (
|
|
|
|
this.mirrorY &&
|
|
|
|
this.mirrorX &&
|
|
|
|
this.currentAsciiLayerBlocks[asciiHeight - arrayY] &&
|
|
|
|
this.currentAsciiLayerBlocks[asciiHeight - arrayY][
|
|
|
|
asciiWidth - arrayX
|
|
|
|
]
|
|
|
|
) {
|
|
|
|
this.currentAsciiLayerBlocks[asciiHeight - arrayY][
|
|
|
|
asciiWidth - arrayX
|
|
|
|
].char = brushBlock.char;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
if (this.canBg && target == "bg") {
|
|
|
|
this.toolCtx.setLineDash([1, 2]);
|
|
|
|
this.toolCtx.strokeRect(brushX, brushY, blockWidth, blockHeight);
|
|
|
|
this.toolCtx.fillRect(brushX, brushY, blockWidth, blockHeight);
|
|
|
|
|
|
|
|
if (this.mirrorX) {
|
|
|
|
this.toolCtx.fillRect(
|
|
|
|
(asciiWidth - arrayX) * blockWidth,
|
|
|
|
brushY,
|
|
|
|
blockWidth,
|
|
|
|
blockHeight
|
|
|
|
);
|
|
|
|
|
|
|
|
this.toolCtx.setLineDash([1, 2]);
|
|
|
|
this.toolCtx.strokeRect(
|
|
|
|
(asciiWidth - arrayX) * blockWidth,
|
|
|
|
brushY,
|
|
|
|
blockWidth,
|
|
|
|
blockHeight
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
if (this.mirrorY) {
|
|
|
|
this.toolCtx.fillRect(
|
|
|
|
brushX,
|
|
|
|
(asciiHeight - arrayY) * blockHeight,
|
|
|
|
blockWidth,
|
|
|
|
blockHeight
|
|
|
|
);
|
|
|
|
|
|
|
|
this.toolCtx.setLineDash([1, 2]);
|
|
|
|
this.toolCtx.strokeRect(
|
|
|
|
brushX,
|
|
|
|
(asciiHeight - arrayY) * blockHeight,
|
|
|
|
blockWidth,
|
|
|
|
blockHeight
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
if (this.mirrorY && this.mirrorX) {
|
|
|
|
this.toolCtx.fillRect(
|
|
|
|
(asciiWidth - arrayX) * blockWidth,
|
|
|
|
(asciiHeight - arrayY) * blockHeight,
|
|
|
|
blockWidth,
|
|
|
|
blockHeight
|
|
|
|
);
|
|
|
|
|
|
|
|
this.toolCtx.setLineDash([1, 2]);
|
|
|
|
this.toolCtx.strokeRect(
|
|
|
|
(asciiWidth - arrayX) * blockWidth,
|
|
|
|
(asciiHeight - arrayY) * blockHeight,
|
|
|
|
blockWidth,
|
|
|
|
blockHeight
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// Apply the actual brush block to the ascii block
|
2021-12-17 08:47:38 +00:00
|
|
|
if (this.canTool && brushBlock[target] !== undefined) {
|
2021-08-16 02:10:09 +00:00
|
|
|
targetBlock[target] = brushBlock[target];
|
2021-12-21 09:03:40 +00:00
|
|
|
// targetBlock['char'] = brushBlock['char'];
|
2021-08-16 02:10:09 +00:00
|
|
|
|
2021-12-17 11:03:10 +00:00
|
|
|
let theX = asciiWidth - arrayX;
|
|
|
|
let theY = asciiHeight - arrayY;
|
|
|
|
let oldBlock = {};
|
|
|
|
|
2021-08-16 02:10:09 +00:00
|
|
|
if (
|
|
|
|
this.mirrorX &&
|
|
|
|
this.currentAsciiLayerBlocks[arrayY] &&
|
2021-12-17 11:03:10 +00:00
|
|
|
this.currentAsciiLayerBlocks[arrayY][theX]
|
2021-08-16 02:10:09 +00:00
|
|
|
) {
|
2021-12-22 10:36:41 +00:00
|
|
|
oldBlock = { ...this.currentAsciiLayerBlocks[arrayY][theX] };
|
|
|
|
this.currentAsciiLayerBlocks[arrayY][theX][target] =
|
|
|
|
brushBlock[target];
|
2021-12-17 11:03:10 +00:00
|
|
|
|
|
|
|
this.storeDiffBlocks(theX, arrayY, oldBlock, brushBlock);
|
2021-08-16 02:10:09 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
if (
|
|
|
|
this.mirrorY &&
|
2021-12-17 11:03:10 +00:00
|
|
|
this.currentAsciiLayerBlocks[theY] &&
|
|
|
|
this.currentAsciiLayerBlocks[theY][arrayX]
|
2021-08-16 02:10:09 +00:00
|
|
|
) {
|
2021-12-22 10:36:41 +00:00
|
|
|
oldBlock = { ...this.currentAsciiLayerBlocks[theY][arrayX] };
|
|
|
|
this.currentAsciiLayerBlocks[theY][arrayX][target] =
|
|
|
|
brushBlock[target];
|
2021-12-17 11:03:10 +00:00
|
|
|
|
|
|
|
this.storeDiffBlocks(arrayX, theY, oldBlock, brushBlock);
|
2021-08-16 02:10:09 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
if (
|
|
|
|
this.mirrorY &&
|
|
|
|
this.mirrorX &&
|
2021-12-17 11:03:10 +00:00
|
|
|
this.currentAsciiLayerBlocks[theY] &&
|
|
|
|
this.currentAsciiLayerBlocks[theY][theX]
|
2021-08-16 02:10:09 +00:00
|
|
|
) {
|
2021-12-22 10:36:41 +00:00
|
|
|
oldBlock = { ...this.currentAsciiLayerBlocks[theY][theX] };
|
2021-12-17 11:03:10 +00:00
|
|
|
this.currentAsciiLayerBlocks[theY][theX][target] = brushBlock[target];
|
|
|
|
|
|
|
|
this.storeDiffBlocks(theX, theY, oldBlock, brushBlock);
|
2021-08-16 02:10:09 +00:00
|
|
|
}
|
|
|
|
}
|
2021-12-17 03:53:07 +00:00
|
|
|
|
2021-12-21 09:03:40 +00:00
|
|
|
this.toolCtx.restore();
|
2021-12-17 08:47:38 +00:00
|
|
|
return;
|
2021-08-16 02:10:09 +00:00
|
|
|
},
|
|
|
|
//
|
2021-07-31 02:12:11 +00:00
|
|
|
// drawBrush
|
|
|
|
// - draws brush
|
|
|
|
// - draws preview for all toolbar things that need it
|
|
|
|
// - also works with the copy / paste
|
2021-05-22 02:49:19 +00:00
|
|
|
drawBrush(plain = false) {
|
|
|
|
this.clearToolCanvas();
|
2021-07-24 04:34:49 +00:00
|
|
|
let brushDiffX = 0;
|
2021-12-21 09:03:40 +00:00
|
|
|
let xLength = false;
|
2021-07-24 04:34:49 +00:00
|
|
|
|
|
|
|
// If the first row isn't selected then we cannot get the width
|
|
|
|
// with the 0 index
|
|
|
|
for (let i = 0; i <= this.brushBlocks.length; i++) {
|
2021-12-21 09:03:40 +00:00
|
|
|
if (this.brushBlocks[i] && xLength === false) {
|
2021-08-12 01:52:40 +00:00
|
|
|
brushDiffX = Math.floor(this.brushBlocks[i].length / 2) * blockWidth;
|
2021-07-24 04:34:49 +00:00
|
|
|
xLength = this.brushBlocks[i].length;
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
}
|
2021-05-08 01:51:30 +00:00
|
|
|
|
2021-08-12 01:52:40 +00:00
|
|
|
const brushDiffY = Math.floor(this.brushBlocks.length / 2) * blockHeight;
|
2021-05-29 00:28:30 +00:00
|
|
|
|
2021-06-29 01:49:39 +00:00
|
|
|
for (let y = 0; y < this.brushBlocks.length; y++) {
|
2021-07-24 01:55:44 +00:00
|
|
|
if (!this.brushBlocks[y]) {
|
|
|
|
continue;
|
|
|
|
}
|
|
|
|
|
2021-07-24 04:34:49 +00:00
|
|
|
for (let x = 0; x < xLength; x++) {
|
2021-12-26 06:38:39 +00:00
|
|
|
if (!this.brushBlocks[y][x] || JSON.stringify(this.brushBlocks[y][x]) === '{}') {
|
2021-07-24 01:55:44 +00:00
|
|
|
continue;
|
|
|
|
}
|
|
|
|
|
2021-09-18 00:37:55 +00:00
|
|
|
// if (
|
|
|
|
// this.top !== false &&
|
|
|
|
// !this.checkVisible(this.top + (y * blockHeight) - this.yOffset)
|
|
|
|
// ) {
|
|
|
|
// continue;
|
|
|
|
// }
|
|
|
|
|
2021-08-04 03:21:06 +00:00
|
|
|
const brushBlock = this.brushBlocks[y][x];
|
2021-05-08 01:51:30 +00:00
|
|
|
|
2021-08-12 01:52:40 +00:00
|
|
|
const brushX = this.x * blockWidth + x * blockWidth - brushDiffX;
|
|
|
|
const brushY = this.y * blockHeight + y * blockHeight - brushDiffY;
|
2021-05-22 02:49:19 +00:00
|
|
|
|
2021-08-12 01:52:40 +00:00
|
|
|
const arrayY = brushY / blockHeight;
|
|
|
|
const arrayX = brushX / blockWidth;
|
2021-05-29 01:09:09 +00:00
|
|
|
|
2021-08-28 02:03:42 +00:00
|
|
|
if (
|
|
|
|
this.currentAsciiLayerBlocks[arrayY] &&
|
|
|
|
this.currentAsciiLayerBlocks[arrayY][arrayX]
|
|
|
|
) {
|
2021-12-17 11:03:10 +00:00
|
|
|
let oldBlock = {
|
|
|
|
...this.currentAsciiLayerBlocks[arrayY][arrayX],
|
|
|
|
};
|
2021-05-22 02:49:19 +00:00
|
|
|
|
2021-12-17 11:03:10 +00:00
|
|
|
if (!plain) {
|
|
|
|
if (this.canBg) {
|
|
|
|
this.drawBrushBlocks(brushX, brushY, brushBlock, "bg");
|
|
|
|
}
|
2021-12-17 03:53:07 +00:00
|
|
|
|
2021-12-17 11:03:10 +00:00
|
|
|
if (this.canFg) {
|
|
|
|
this.drawBrushBlocks(brushX, brushY, brushBlock, "fg");
|
2021-12-17 03:53:07 +00:00
|
|
|
}
|
|
|
|
|
2021-12-17 11:03:10 +00:00
|
|
|
this.drawBrushBlocks(brushX, brushY, brushBlock, null);
|
2021-12-22 10:36:41 +00:00
|
|
|
} else if (this.isErasing) {
|
2021-12-17 11:03:10 +00:00
|
|
|
this.drawBrushBlocks(brushX, brushY, brushBlock, null, true);
|
|
|
|
}
|
|
|
|
|
|
|
|
if (this.canTool) {
|
|
|
|
this.storeDiffBlocks(arrayX, arrayY, oldBlock, brushBlock);
|
2021-12-17 03:53:07 +00:00
|
|
|
}
|
2021-05-22 02:49:19 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
2021-12-24 04:06:55 +00:00
|
|
|
storeDiffBlocks(x, y, oldBlock, newBlock) {
|
2021-12-17 08:47:38 +00:00
|
|
|
// For undo
|
|
|
|
if (!this.diffBlocks.old[y]) {
|
|
|
|
this.diffBlocks.old[y] = [];
|
|
|
|
}
|
|
|
|
|
|
|
|
if (!this.diffBlocks.old[y][x]) {
|
|
|
|
this.diffBlocks.old[y][x] = {
|
2021-12-22 10:36:41 +00:00
|
|
|
x: x,
|
|
|
|
y: y,
|
|
|
|
b: { ...oldBlock },
|
2021-12-17 08:47:38 +00:00
|
|
|
};
|
|
|
|
}
|
|
|
|
|
|
|
|
if (!this.diffBlocks.new[y]) {
|
|
|
|
this.diffBlocks.new[y] = [];
|
|
|
|
}
|
|
|
|
|
2021-12-17 09:18:35 +00:00
|
|
|
if (!this.diffBlocks.new[y][x]) {
|
2021-12-17 08:47:38 +00:00
|
|
|
this.diffBlocks.new[y][x] = {
|
2021-12-22 10:36:41 +00:00
|
|
|
x: x,
|
|
|
|
y: y,
|
|
|
|
b: { ...newBlock },
|
2021-12-17 08:47:38 +00:00
|
|
|
};
|
|
|
|
}
|
|
|
|
},
|
2021-05-22 02:49:19 +00:00
|
|
|
eraser() {
|
|
|
|
if (this.canTool) {
|
2021-08-07 05:36:32 +00:00
|
|
|
const brushDiffX =
|
2021-08-12 01:52:40 +00:00
|
|
|
Math.floor(this.brushBlocks[0].length / 2) * blockWidth;
|
2021-08-07 05:36:32 +00:00
|
|
|
const brushDiffY =
|
2021-08-12 01:52:40 +00:00
|
|
|
Math.floor(this.brushBlocks.length / 2) * blockHeight;
|
2021-05-29 01:09:09 +00:00
|
|
|
|
2021-08-03 04:59:12 +00:00
|
|
|
for (let y = 0; y < this.brushBlocks.length; y++) {
|
|
|
|
for (let x = 0; x < this.brushBlocks[0].length; x++) {
|
2021-08-12 01:52:40 +00:00
|
|
|
const brushX = this.x * blockWidth + x * blockWidth - brushDiffX;
|
2021-08-12 03:19:06 +00:00
|
|
|
const brushY = this.y * blockHeight + y * blockHeight - brushDiffY;
|
2021-05-22 02:49:19 +00:00
|
|
|
|
2021-08-12 01:52:40 +00:00
|
|
|
const arrayY = brushY / blockHeight;
|
|
|
|
const arrayX = brushX / blockWidth;
|
2021-07-31 02:12:11 +00:00
|
|
|
|
2021-12-26 06:31:07 +00:00
|
|
|
if (this.currentAsciiLayerBlocks[arrayY] === undefined) {
|
|
|
|
continue;
|
|
|
|
}
|
|
|
|
|
|
|
|
if (this.currentAsciiLayerBlocks[arrayY][arrayX] === undefined) {
|
|
|
|
continue;
|
|
|
|
}
|
|
|
|
|
2021-12-17 08:47:38 +00:00
|
|
|
let targetBlock = this.currentAsciiLayerBlocks[arrayY][arrayX];
|
|
|
|
let oldBlock = { ...this.currentAsciiLayerBlocks[arrayY][arrayX] };
|
2021-05-22 02:49:19 +00:00
|
|
|
|
2021-12-17 08:47:38 +00:00
|
|
|
if (this.canFg && targetBlock.fg !== undefined) {
|
|
|
|
delete targetBlock["fg"];
|
|
|
|
}
|
2021-05-08 01:51:30 +00:00
|
|
|
|
2021-12-17 08:47:38 +00:00
|
|
|
if (this.canBg && targetBlock.bg !== undefined) {
|
|
|
|
delete targetBlock["bg"];
|
|
|
|
}
|
2021-05-22 02:49:19 +00:00
|
|
|
|
2021-12-17 08:47:38 +00:00
|
|
|
if (this.canText && targetBlock.char !== undefined) {
|
|
|
|
delete targetBlock["char"];
|
2021-06-05 01:25:23 +00:00
|
|
|
}
|
2021-07-31 02:12:11 +00:00
|
|
|
|
2021-12-17 08:47:38 +00:00
|
|
|
this.storeDiffBlocks(arrayX, arrayY, oldBlock, targetBlock);
|
|
|
|
|
|
|
|
let theX = this.currentAsciiWidth - arrayX;
|
2021-07-31 02:12:11 +00:00
|
|
|
if (this.mirrorX) {
|
|
|
|
if (
|
2021-08-14 09:09:36 +00:00
|
|
|
this.currentAsciiLayerBlocks[arrayY] &&
|
2021-12-17 08:47:38 +00:00
|
|
|
this.currentAsciiLayerBlocks[arrayY][theX]
|
2021-07-31 02:12:11 +00:00
|
|
|
) {
|
2021-12-17 08:47:38 +00:00
|
|
|
targetBlock = this.currentAsciiLayerBlocks[arrayY][theX];
|
|
|
|
oldBlock = { ...this.currentAsciiLayerBlocks[arrayY][theX] };
|
2021-07-31 02:12:11 +00:00
|
|
|
|
2021-12-17 08:47:38 +00:00
|
|
|
if (this.canFg && targetBlock.fg !== undefined) {
|
|
|
|
delete targetBlock["fg"];
|
2021-07-31 02:12:11 +00:00
|
|
|
}
|
|
|
|
|
2021-12-17 08:47:38 +00:00
|
|
|
if (this.canBg && targetBlock.bg !== undefined) {
|
|
|
|
delete targetBlock["bg"];
|
2021-07-31 02:12:11 +00:00
|
|
|
}
|
|
|
|
|
2021-12-17 08:47:38 +00:00
|
|
|
if (this.canText && targetBlock.char !== undefined) {
|
|
|
|
delete targetBlock["char"];
|
2021-07-31 02:12:11 +00:00
|
|
|
}
|
2021-12-17 08:47:38 +00:00
|
|
|
|
|
|
|
this.storeDiffBlocks(theX, arrayY, oldBlock, targetBlock);
|
2021-07-31 02:12:11 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2021-12-17 08:47:38 +00:00
|
|
|
let theY = this.currentAsciiHeight - arrayY;
|
2021-07-31 02:12:11 +00:00
|
|
|
if (this.mirrorY) {
|
|
|
|
if (
|
2021-12-17 08:47:38 +00:00
|
|
|
this.currentAsciiLayerBlocks[theY] &&
|
|
|
|
this.currentAsciiLayerBlocks[theY][arrayX]
|
2021-07-31 02:12:11 +00:00
|
|
|
) {
|
2021-12-17 08:47:38 +00:00
|
|
|
targetBlock = this.currentAsciiLayerBlocks[theY][arrayX];
|
|
|
|
oldBlock = { ...this.currentAsciiLayerBlocks[theY][arrayX] };
|
2021-07-31 02:12:11 +00:00
|
|
|
|
2021-12-17 08:47:38 +00:00
|
|
|
if (this.canFg && targetBlock.fg !== undefined) {
|
|
|
|
delete targetBlock["fg"];
|
2021-07-31 02:12:11 +00:00
|
|
|
}
|
|
|
|
|
2021-12-17 08:47:38 +00:00
|
|
|
if (this.canBg && targetBlock.bg !== undefined) {
|
|
|
|
delete targetBlock["bg"];
|
2021-07-31 02:12:11 +00:00
|
|
|
}
|
|
|
|
|
2021-12-17 08:47:38 +00:00
|
|
|
if (this.canText && targetBlock.char !== undefined) {
|
|
|
|
delete targetBlock["char"];
|
2021-07-31 02:12:11 +00:00
|
|
|
}
|
2021-12-17 08:47:38 +00:00
|
|
|
|
|
|
|
this.storeDiffBlocks(arrayX, theY, oldBlock, targetBlock);
|
2021-07-31 02:12:11 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
if (this.mirrorY && this.mirrorX) {
|
|
|
|
if (
|
2021-12-17 08:47:38 +00:00
|
|
|
this.currentAsciiLayerBlocks[theY] &&
|
|
|
|
this.currentAsciiLayerBlocks[theY][theX]
|
2021-07-31 02:12:11 +00:00
|
|
|
) {
|
2021-12-17 08:47:38 +00:00
|
|
|
targetBlock = this.currentAsciiLayerBlocks[theY][theX];
|
|
|
|
oldBlock = { ...this.currentAsciiLayerBlocks[theY][theX] };
|
2021-07-31 02:12:11 +00:00
|
|
|
|
2021-12-17 08:47:38 +00:00
|
|
|
if (this.canFg && targetBlock.fg !== undefined) {
|
|
|
|
delete targetBlock["fg"];
|
2021-07-31 02:12:11 +00:00
|
|
|
}
|
|
|
|
|
2021-12-17 08:47:38 +00:00
|
|
|
if (this.canBg && targetBlock.bg !== undefined) {
|
|
|
|
delete targetBlock["bg"];
|
2021-07-31 02:12:11 +00:00
|
|
|
}
|
|
|
|
|
2021-12-17 08:47:38 +00:00
|
|
|
if (this.canText && targetBlock.char !== undefined) {
|
|
|
|
delete targetBlock["char"];
|
2021-07-31 02:12:11 +00:00
|
|
|
}
|
2021-12-17 08:47:38 +00:00
|
|
|
|
|
|
|
this.storeDiffBlocks(theX, theY, oldBlock, targetBlock);
|
2021-07-31 02:12:11 +00:00
|
|
|
}
|
|
|
|
}
|
2021-05-22 02:49:19 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2021-05-08 01:51:30 +00:00
|
|
|
},
|
2021-05-22 02:49:19 +00:00
|
|
|
// Fill tool
|
2021-08-11 23:47:36 +00:00
|
|
|
fill(eraser = false) {
|
2021-12-26 06:31:07 +00:00
|
|
|
const newColor = {
|
|
|
|
fg: this.currentFg,
|
|
|
|
bg: this.currentBg,
|
|
|
|
char: this.currentChar
|
|
|
|
};
|
2021-09-04 00:21:53 +00:00
|
|
|
|
2021-12-26 06:31:07 +00:00
|
|
|
const current = { ... this.asciiBlockAtXy };
|
2021-12-24 04:06:55 +00:00
|
|
|
|
2021-12-26 06:31:07 +00:00
|
|
|
if (!this.canBg) {
|
|
|
|
delete newColor['bg'];
|
2021-12-06 08:08:57 +00:00
|
|
|
}
|
2021-12-24 04:06:55 +00:00
|
|
|
|
2021-04-03 03:13:03 +00:00
|
|
|
// If the newColor is same as the existing
|
|
|
|
// Then return the original image.
|
2021-09-04 04:41:31 +00:00
|
|
|
if (JSON.stringify(current) === JSON.stringify(newColor) && !eraser) {
|
2021-08-14 06:41:42 +00:00
|
|
|
return;
|
2021-04-02 04:43:11 +00:00
|
|
|
}
|
2021-03-27 04:24:05 +00:00
|
|
|
|
2021-08-14 09:09:36 +00:00
|
|
|
this.fillTool(
|
|
|
|
this.currentAsciiLayerBlocks,
|
|
|
|
this.y,
|
|
|
|
this.x,
|
|
|
|
current,
|
|
|
|
eraser
|
|
|
|
);
|
2021-04-02 04:43:11 +00:00
|
|
|
},
|
2021-12-24 04:06:55 +00:00
|
|
|
fillTool(currentLayerBlocks, y, x, current, eraser) {
|
2021-11-06 00:59:17 +00:00
|
|
|
if (y >= Math.floor(this.canvas.height / blockHeight)) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
if (x >= Math.floor(this.canvas.width / blockWidth)) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2021-12-24 04:06:55 +00:00
|
|
|
if (currentLayerBlocks[y] === undefined || currentLayerBlocks[y][x] === undefined) {
|
2021-04-02 04:43:11 +00:00
|
|
|
return;
|
|
|
|
}
|
2021-04-02 00:19:33 +00:00
|
|
|
|
2021-12-24 04:06:55 +00:00
|
|
|
let targetBlock = currentLayerBlocks[y][x];
|
2021-09-04 04:41:31 +00:00
|
|
|
|
2021-12-24 04:06:55 +00:00
|
|
|
if (this.canBg && targetBlock.bg !== current.bg) {
|
2021-09-04 04:49:24 +00:00
|
|
|
return;
|
|
|
|
}
|
2021-09-04 04:41:31 +00:00
|
|
|
|
2021-08-11 23:47:36 +00:00
|
|
|
// We can eraser or fill
|
2021-12-26 06:31:07 +00:00
|
|
|
let oldBlock = { ... targetBlock };
|
2021-12-24 04:06:55 +00:00
|
|
|
if (!eraser) {
|
|
|
|
if (this.canBg) {
|
|
|
|
targetBlock.bg = this.currentBg;
|
|
|
|
}
|
2021-07-17 01:44:27 +00:00
|
|
|
|
2021-12-24 04:06:55 +00:00
|
|
|
if (this.canFg) {
|
|
|
|
targetBlock.fg = this.currentFg;
|
|
|
|
}
|
|
|
|
|
|
|
|
if (this.canText) {
|
|
|
|
targetBlock.char = this.currentChar;
|
|
|
|
}
|
|
|
|
} else {
|
2021-12-26 06:31:07 +00:00
|
|
|
// If we are fill erasing
|
2021-12-24 04:06:55 +00:00
|
|
|
if (this.canBg) {
|
|
|
|
delete targetBlock["bg"];
|
|
|
|
}
|
2021-07-17 01:44:27 +00:00
|
|
|
|
2021-12-24 04:06:55 +00:00
|
|
|
if (this.canFg) {
|
|
|
|
delete targetBlock["fg"];
|
|
|
|
}
|
|
|
|
|
|
|
|
if (this.canText) {
|
|
|
|
delete targetBlock["char"];
|
|
|
|
}
|
2021-12-26 06:31:07 +00:00
|
|
|
};
|
2021-04-02 03:44:08 +00:00
|
|
|
|
2021-12-26 06:31:07 +00:00
|
|
|
this.storeDiffBlocks(x, y, oldBlock, targetBlock);
|
2021-12-17 08:47:38 +00:00
|
|
|
|
2021-04-03 03:13:03 +00:00
|
|
|
// Fill in all four directions
|
|
|
|
// Fill Prev row
|
2021-12-24 04:06:55 +00:00
|
|
|
this.fillTool(currentLayerBlocks, y, x - 1, current, eraser);
|
2021-04-02 03:44:08 +00:00
|
|
|
|
2021-04-03 03:13:03 +00:00
|
|
|
// Fill Next row
|
2021-12-24 04:06:55 +00:00
|
|
|
this.fillTool(currentLayerBlocks, y, x + 1, current, eraser);
|
2021-04-02 03:44:08 +00:00
|
|
|
|
2021-04-03 03:13:03 +00:00
|
|
|
// Fill Prev col
|
2021-12-24 04:06:55 +00:00
|
|
|
this.fillTool(currentLayerBlocks, y - 1, x, current, eraser);
|
2021-04-02 03:36:00 +00:00
|
|
|
|
2021-04-03 03:13:03 +00:00
|
|
|
// Fill next col
|
2021-12-24 04:06:55 +00:00
|
|
|
this.fillTool(currentLayerBlocks, y + 1, x, current, eraser);
|
2021-01-10 03:06:46 +00:00
|
|
|
},
|
2020-12-27 02:42:26 +00:00
|
|
|
},
|
2020-12-19 01:27:50 +00:00
|
|
|
};
|
|
|
|
</script>
|