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

better scrolling for larger brushes

This commit is contained in:
Hugh Bord 2021-08-07 16:05:54 +10:00
parent 4439b3b0bb
commit 9cf63688cc
2 changed files with 41 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/components/parts/BrushCanvas.vue
View File

@ -1,17 +1,27 @@
<template>
<div>
<t-card >
<canvas
:ref="canvasName"
:id="canvasName"
:width="blocksWidthHeight.w"
:height="blocksWidthHeight.h"
/>
<t-card class="overflow-x-scroll h-full">
<div :style="`height: ${blocksWidthHeight.h}px;width: ${blocksWidthHeight.w}px;`">
<canvas
:ref="canvasName"
:id="canvasName"
class="previewcanvas"
:width="blocksWidthHeight.w"
:height="blocksWidthHeight.h"
/>
</div>
</t-card>
</div>
</template>
<style>
.previewcanvas {
background: rgba(0, 0, 0, 0.1);
border: lightgrey 1px solid;
z-index: 0;
}
</style>
<script>
import { mircColours99, blockWidth, blockHeight, cyrb53, getBlocksWidth, filterNullBlocks } from "../../ascii";
@ -83,7 +93,7 @@ export default {
},
blocksWidthHeight() {
return {
w: 20 * blockWidth,
w: getBlocksWidth(this.getBlocks) * blockWidth,
h: this.getBlocks.length * blockHeight
}
},
@ -155,7 +165,7 @@ export default {
if (this.getBlocks[y] && this.getBlocks[y][x]) {
const curBlock = this.getBlocks[y][x];
if ((!this.isMainCanvas && curBlock.bg) || (curBlock.bg && this.isMainCanvas && this.isTargettingBg)) {
if (curBlock.bg !== null) {
this.ctx.fillStyle = this.mircColours[curBlock.bg];
this.ctx.fillRect(
@ -166,11 +176,11 @@ export default {
);
}
if ((!this.isMainCanvas && curBlock.fg) || (curBlock.fg && this.isMainCanvas && this.isTargettingFg)) {
if (curBlock.fg !== null) {
this.ctx.fillStyle = this.mircColours[curBlock.fg];
}
if ((!this.isMainCanvas && curBlock.char) || (curBlock.char && this.isMainCanvas && this.isTargettingChar)) {
if (curBlock.char !== null) {
this.ctx.fillStyle = this.mircColours[curBlock.fg];
this.ctx.fillText(
curBlock.char,

47
src/components/parts/MainBrushCanvas.vue
View File

@ -1,40 +1,31 @@
<template>
<div>
<t-card>
<canvas
ref="brushcanvas"
id="brushcanvas"
class="brushcanvas"
@mousemove="canvasMouseMove"
@mouseup="disable"
@mousedown.left="addBlock"
@mousedown.right="eraseBlock"
@contextmenu.prevent
:width="blocksWidthHeight.w"
:height="blocksWidthHeight.h"
@mouseenter="disableToolbarMoving"
@mouseleave="enableToolbarMoving"
/>
<t-card class="overflow-x-scroll h-full" >
<div :style="`height: ${blocksWidthHeight.h}px;width: ${blocksWidthHeight.w}px;`">
<canvas
ref="brushcanvas"
id="brushcanvas"
class="brushcanvas"
@mousemove="canvasMouseMove"
@mouseup="disable"
@mousedown.left="addBlock"
@mousedown.right="eraseBlock"
@contextmenu.prevent
:width="blocksWidthHeight.w"
:height="blocksWidthHeight.h"
@mouseenter="disableToolbarMoving"
@mouseleave="enableToolbarMoving"
/>
</div>
</t-card>
</div>
</template>
<style>
body {
background: #eee;
}
.brushcanvastools {
position: absolute;
z-index: 100;
opacity: 0.5;
cursor: crosshair;
}
.brushcanvas {
position: absolute;
background: rgba(0, 0, 0, 0.8);
background: rgba(0, 0, 0, 0.1);
border: lightgrey 1px solid;
z-index: 0;
}