circle brush is good
Этот коммит содержится в:
родитель
9792660a5b
Коммит
020a56e57f
16
README.md
16
README.md
|
|
@ -64,26 +64,28 @@ A most latest production build to use is available at https://asciibird.jewbird.
|
|||
|
||||
ASCIIBIRD is mostly usable. There are some bugs however to note at the moment. Refreshing the page seems to fix most strange things.
|
||||
|
||||
* Redo ctrl Y is COOKED (not working)
|
||||
* Keyboard shortcuts can be pressed at the same time which makes bugs for undo and redo if you aren't careful!
|
||||
* Circle brush (works okay for odd width and height numbers)
|
||||
* Importer could be re-written with regex
|
||||
* Drag ascii canvas then right click and it gets stuck
|
||||
* That inverted black / white bug when exporting, happens if fg or bg is null
|
||||
|
||||
* Having more than a few layers depending on ascii size will slow things down, until the `fillNullBlocks` is refactored.
|
||||
* CHUNKED DIFF ENGINE
|
||||
* Redo ctrl Y is COOKED (not working) - redo the undo and redo with this new system
|
||||
|
||||
* If we add in a toolbar menu this bug maybe fixed,
|
||||
* Keyboard shortcuts can be pressed at the same time which makes bugs for undo and redo if you aren't careful!
|
||||
* https://github.com/motla/vue-file-toolbar-menu
|
||||
|
||||
* Drag ascii canvas then right click and it gets stuck - related to vue draggable
|
||||
## Focusing on Now / Roadmap
|
||||
|
||||
* Improve the char window to have a close button and border/bg
|
||||
|
||||
* Arrow keys and space to use brush, eraser,
|
||||
* More Context Menus (right click menu)
|
||||
* Brushes Canvas right click
|
||||
* ASCII right click
|
||||
* Improve the char window to have a close button and border/bg
|
||||
* Review encodings check on file import - UTF8 vs Latin something
|
||||
* Revise the blocks system to only store what's changed
|
||||
|
||||
* Review encodings check on file import - UTF8 vs Latin something
|
||||
# Keyboard Shortcuts
|
||||
|
||||
## ASCII Editing
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
<div class="mb-4">
|
||||
<label class="ml-1">
|
||||
<span class="text-sm">FPS</span>
|
||||
<vue-slider v-model="options.fps" @dragend="updateOptions" :min="1" :max="200"></vue-slider>
|
||||
<vue-slider class="mt-10" v-model="options.fps" @dragend="updateOptions" :min="1" :max="200"></vue-slider>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
|
|
@ -37,7 +37,7 @@
|
|||
<div class="mb-4">
|
||||
<label class="ml-1">
|
||||
<span class="text-sm">Brush Histroy Limit</span>
|
||||
<vue-slider v-model="options.brushLimit" @dragend="updateOptions" :min="1" :max="maxBrushHistory"></vue-slider>
|
||||
<vue-slider class="mt-10" v-model="options.brushLimit" @dragend="updateOptions" :min="1" :max="maxBrushHistory"></vue-slider>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
|
|
@ -45,7 +45,7 @@
|
|||
<div class="mb-4">
|
||||
<label class="ml-1">
|
||||
<span class="text-sm">Undo/Redo Histroy Limit</span>
|
||||
<vue-slider v-model="options.undoLimit" @dragend="updateOptions" :min="1" :max="maxUndoHistory"></vue-slider>
|
||||
<vue-slider class="mt-10" v-model="options.undoLimit" @dragend="updateOptions" :min="1" :max="maxUndoHistory"></vue-slider>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex w-full">
|
||||
<div class="w-full">
|
||||
<label class="block">
|
||||
<t-radio
|
||||
name="options"
|
||||
|
|
@ -70,6 +70,33 @@
|
|||
/>
|
||||
<span class="text-sm">Cross</span>
|
||||
</label>
|
||||
|
||||
<label class="block">
|
||||
<t-radio
|
||||
name="options"
|
||||
value="grid"
|
||||
v-model="brushSizeTypeInput"
|
||||
/>
|
||||
<span class="text-sm">Grid</span>
|
||||
</label>
|
||||
|
||||
<label class="block">
|
||||
<t-radio
|
||||
name="options"
|
||||
value="inverted-grid"
|
||||
v-model="brushSizeTypeInput"
|
||||
/>
|
||||
<span class="text-sm">Inverted Grid</span>
|
||||
</label>
|
||||
|
||||
<label class="block">
|
||||
<t-radio
|
||||
name="options"
|
||||
value="lines"
|
||||
v-model="brushSizeTypeInput"
|
||||
/>
|
||||
<span class="text-sm">Lines</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div
|
||||
|
|
@ -178,7 +205,13 @@ export default {
|
|||
},
|
||||
updateBrush() {
|
||||
return this.toolbarState.updateBrush;
|
||||
},
|
||||
},
|
||||
middleY() {
|
||||
return Math.floor(this.brushSizeHeight / 2);
|
||||
},
|
||||
middleX() {
|
||||
return Math.floor(this.brushSizeWidth / 2);
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
isInputtingBrushSize(val) {
|
||||
|
|
@ -270,10 +303,6 @@ export default {
|
|||
char: this.currentChar,
|
||||
};
|
||||
|
||||
const middleY = Math.floor(brushHeight / 2);
|
||||
const middleX = Math.floor(brushWidth / 2);
|
||||
let yModifier = 0;
|
||||
|
||||
// Recreate 2d array for preview
|
||||
for (y = 0; y < brushHeight; y++) {
|
||||
this.blocks[y] = [];
|
||||
|
|
@ -286,6 +315,40 @@ export default {
|
|||
continue;
|
||||
}
|
||||
|
||||
this.blocks[y][x] = { ...emptyBlock };
|
||||
|
||||
if (this.blocks[y] && this.blocks[y][x]) {
|
||||
|
||||
if (x % 2 === 0 && y % 2 === 0) {
|
||||
this.blocks[y][x] = { ...block };
|
||||
}
|
||||
|
||||
if (x % 2 === 1 && y % 2 === 1) {
|
||||
this.blocks[y][x] = { ...block };
|
||||
}
|
||||
}
|
||||
|
||||
break;
|
||||
|
||||
case "inverted-grid":
|
||||
if (x === 0 && y === 0) {
|
||||
this.blocks[y][x] = { ...block };
|
||||
continue;
|
||||
}
|
||||
if (y % 2 === 0 || x % 2 === 0) {
|
||||
this.blocks[y][x] = { ...block };
|
||||
} else {
|
||||
this.blocks[y][x] = { ...emptyBlock };
|
||||
}
|
||||
break;
|
||||
|
||||
|
||||
case "grid":
|
||||
if (x === 0 && y === 0) {
|
||||
this.blocks[y][x] = { ...block };
|
||||
continue;
|
||||
}
|
||||
|
||||
if (x === brushWidth) {
|
||||
this.blocks[y][x] = { ...emptyBlock };
|
||||
} else {
|
||||
|
|
@ -296,13 +359,41 @@ export default {
|
|||
|
||||
if (y % 2 === 0) {
|
||||
targetX -= 1;
|
||||
}
|
||||
}
|
||||
|
||||
if (this.blocks[y] && this.blocks[y][targetX]) {
|
||||
if (x % 2 === 0) {
|
||||
this.blocks[y][targetX] = { ...emptyBlock };
|
||||
} else {
|
||||
if (y % 2 === 0 && x % 2 !== 0) {
|
||||
this.blocks[y][targetX] = { ...block };
|
||||
} else {
|
||||
this.blocks[y][targetX] = { ...emptyBlock };
|
||||
}
|
||||
}
|
||||
|
||||
break;
|
||||
|
||||
case "lines":
|
||||
if (x === 0 && y === 0) {
|
||||
this.blocks[y][x] = { ...block };
|
||||
continue;
|
||||
}
|
||||
|
||||
if (x === brushWidth) {
|
||||
this.blocks[y][x] = { ...emptyBlock };
|
||||
} else {
|
||||
this.blocks[y][x] = { ...block };
|
||||
}
|
||||
|
||||
targetX = x;
|
||||
|
||||
if (y % 2 === 0) {
|
||||
targetX -= 1;
|
||||
}
|
||||
|
||||
if (this.blocks[y] && this.blocks[y][targetX]) {
|
||||
if (y % 2 === 0) {
|
||||
if (targetX % 2 === 0) { this.blocks[y][targetX] = { ...block }; }
|
||||
} else {
|
||||
this.blocks[y][targetX] = { ...emptyBlock };
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -314,33 +405,76 @@ export default {
|
|||
break;
|
||||
|
||||
case "circle":
|
||||
if (middleY >= y) {
|
||||
// Top half
|
||||
yModifier = y;
|
||||
|
||||
if (x <= middleX + yModifier && x >= middleX - yModifier) {
|
||||
this.blocks[y][x] = { ...block };
|
||||
} else {
|
||||
this.blocks[y][x] = { ...emptyBlock };
|
||||
}
|
||||
} else {
|
||||
// Bottom half
|
||||
yModifier = middleY - (y - middleY);
|
||||
|
||||
if (x <= middleX + yModifier && x >= middleX - yModifier) {
|
||||
this.blocks[y][x] = { ...block };
|
||||
} else {
|
||||
this.blocks[y][x] = { ...emptyBlock };
|
||||
}
|
||||
}
|
||||
|
||||
this.blocks[y][x] = { ... emptyBlock };
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
switch(this.brushSizeType) {
|
||||
case "circle":
|
||||
|
||||
let x1 = 0;
|
||||
let y1 = 0;
|
||||
|
||||
for (let angle = 0; angle <= 360; angle += 1) {
|
||||
let radian = angle * (Math.PI*2/360);
|
||||
x1 = Math.round( (brushWidth - 1) * ( (Math.cos(radian) + 1.0) / 2.0));
|
||||
y1 = Math.round( (brushHeight - 1) * ((Math.sin(radian) + 1.0) / 2.0));
|
||||
|
||||
if (this.blocks[y1] && this.blocks[y1][x1]) {
|
||||
this.blocks[y1][x1] = { ...block };
|
||||
}
|
||||
}
|
||||
|
||||
this.fill();
|
||||
break;
|
||||
}
|
||||
|
||||
this.$store.commit("brushBlocks", this.blocks);
|
||||
},
|
||||
fill() {
|
||||
const current = {};
|
||||
current.bg = null;
|
||||
|
||||
this.fillTool(
|
||||
this.middleY,
|
||||
this.middleX,
|
||||
);
|
||||
},
|
||||
fillTool(y, x) {
|
||||
if (y >= this.brushSizeHeight) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (x >= this.brushSizeWidth) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.blocks[y] === undefined || this.blocks[y][x] === undefined) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.blocks[y][x].bg === this.currentBg) {
|
||||
return;
|
||||
}
|
||||
|
||||
// We can eraser or fill
|
||||
this.blocks[y][x].bg = this.currentBg;
|
||||
|
||||
// Fill in all four directions
|
||||
// Fill Prev row
|
||||
this.fillTool(y, x - 1);
|
||||
|
||||
// Fill Next row
|
||||
this.fillTool(y, x + 1);
|
||||
|
||||
// Fill Prev col
|
||||
this.fillTool(y - 1, x);
|
||||
|
||||
// Fill next col
|
||||
this.fillTool(y + 1, x);
|
||||
},
|
||||
onResize(x, y, w, h) {
|
||||
this.panel.x = x;
|
||||
this.panel.y = y;
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче