switching to composition API
This commit is contained in:
Gator
@ -1,19 +1,5 @@
|
||||
<template>
|
||||
<canvas
|
||||
id="board-canvas"
|
||||
ref="board-canvas"
|
||||
:width="canvasWidth"
|
||||
:height="canvasHeight"
|
||||
/>
|
||||
<canvas
|
||||
id="work-canvas"
|
||||
ref="work-canvas"
|
||||
:width="canvasWidth"
|
||||
:height="canvasHeight"
|
||||
/>
|
||||
</template>
|
||||
<script>
|
||||
import { mapActions, mapState, mapWritableState } from "pinia";
|
||||
<script setup>
|
||||
import { onMounted, watch } from "vue";
|
||||
import { globalStore } from "../stores/index.js";
|
||||
import {
|
||||
create1dState,
|
||||
@ -31,224 +17,214 @@
|
||||
import { getRandomInt } from "../modules/common.js";
|
||||
import { boardToPic, picToBoard } from "../modules/picture.js";
|
||||
|
||||
export default {
|
||||
name: "CanvasBoard",
|
||||
data() {
|
||||
return {
|
||||
board: null,
|
||||
canvas: null,
|
||||
workCanvas: null,
|
||||
workCtx: null,
|
||||
ctx: null,
|
||||
available2dRules: {
|
||||
conway: conwayRules,
|
||||
overpopulation: overpopulationRules,
|
||||
loneliness: lonelinessRules,
|
||||
threeborn: threebornRules,
|
||||
highlife: highLifeRules,
|
||||
serviette: servietteRules,
|
||||
},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState(globalStore, {
|
||||
loop: "loop",
|
||||
cellProperties: "cellProperties",
|
||||
ruleset: "ruleset1d",
|
||||
refreshRate: "refreshRate",
|
||||
initial1dState: "initial1dState",
|
||||
drawingDirection: "drawingDirection",
|
||||
canDraw: "canDraw",
|
||||
getDraw1d: "draw1d",
|
||||
getDraw2d: "draw2d",
|
||||
getDraw2dLast: "draw2dLast",
|
||||
getDraw2dPicture: "draw2dpicture",
|
||||
boardWidth: "boardWidth",
|
||||
boardHeight: "boardHeight",
|
||||
selected2dRules: "selected2dRules",
|
||||
picture: "picture",
|
||||
}),
|
||||
...mapWritableState(globalStore, {
|
||||
lastBoard: "lastBoard",
|
||||
canvasWidth: "canvasWidth",
|
||||
canvasHeight: "canvasHeight",
|
||||
getReset: "reset",
|
||||
}),
|
||||
// used to determine the dimensions of the board
|
||||
max() {
|
||||
return Math.max(this.boardWidth, this.boardHeight);
|
||||
},
|
||||
selectedRules() {
|
||||
return this.available2dRules[this.selected2dRules.id];
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
getDraw1d(value) {
|
||||
if (value == true) this.draw1d();
|
||||
},
|
||||
getDraw2d(value) {
|
||||
if (value == true) this.draw2dNew();
|
||||
},
|
||||
async getDraw2dLast(value) {
|
||||
if (value == true) await this.draw2dLast();
|
||||
},
|
||||
getDraw2dPicture(value) {
|
||||
if (value == true) this.draw2dPicture();
|
||||
},
|
||||
getReset(value) {
|
||||
if (value == true) this.reset();
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.canvas = Object.freeze(document.getElementById("board-canvas"));
|
||||
this.workCanvas = Object.freeze(document.getElementById("work-canvas"));
|
||||
this.ctx = this.canvas.getContext("2d", { willReadFrequently: true });
|
||||
this.workCtx = this.workCanvas.getContext("2d", {
|
||||
willReadFrequently: true,
|
||||
const store = globalStore();
|
||||
|
||||
// TODO: Do we really need to declare a work canvas in this scope?
|
||||
// Do we really need to declare a canvas here at all?
|
||||
let canvas = null;
|
||||
let workCanvas = null;
|
||||
let workCtx = null;
|
||||
let ctx = null;
|
||||
const available2dRules = {
|
||||
conway: conwayRules,
|
||||
overpopulation: overpopulationRules,
|
||||
loneliness: lonelinessRules,
|
||||
threeborn: threebornRules,
|
||||
highlife: highLifeRules,
|
||||
serviette: servietteRules,
|
||||
};
|
||||
|
||||
// used to determine the dimensions of the board
|
||||
const max = () => {
|
||||
return Math.max(store.boardWidth, store.boardHeight);
|
||||
};
|
||||
|
||||
const selectedRules = () => {
|
||||
return available2dRules[store.selected2dRules.id];
|
||||
};
|
||||
|
||||
watch(
|
||||
() => store.draw1d,
|
||||
(value) => {
|
||||
if (value == true) draw1d();
|
||||
}
|
||||
);
|
||||
|
||||
watch(
|
||||
() => store.draw2d,
|
||||
(value) => {
|
||||
if (value == true) draw2dNew();
|
||||
}
|
||||
);
|
||||
|
||||
watch(
|
||||
() => store.draw2dLast,
|
||||
async (value) => {
|
||||
if (value == true) await draw2dLast();
|
||||
}
|
||||
);
|
||||
|
||||
watch(
|
||||
() => store.draw2dpicture,
|
||||
(value) => {
|
||||
if (value == true) draw2dPicture();
|
||||
}
|
||||
);
|
||||
|
||||
watch(
|
||||
() => store.reset,
|
||||
(value) => {
|
||||
if (value == true) reset();
|
||||
}
|
||||
);
|
||||
|
||||
onMounted(() => {
|
||||
canvas = Object.freeze(document.getElementById("board-canvas"));
|
||||
workCanvas = Object.freeze(document.getElementById("work-canvas"));
|
||||
ctx = canvas.getContext("2d", { willReadFrequently: true });
|
||||
workCtx = workCanvas.getContext("2d", {
|
||||
willReadFrequently: true,
|
||||
});
|
||||
store.canvasWidth = canvas.parentElement.clientWidth;
|
||||
store.canvasHeight = canvas.parentElement.clientHeight;
|
||||
store.setBoardWidth();
|
||||
store.setBoardHeight();
|
||||
});
|
||||
|
||||
// draws the board on the canvas
|
||||
const drawCanvas = async (board, width, height) => {
|
||||
const d = store.cellProperties.size;
|
||||
// bool to RGBA colors
|
||||
const img = await boardToPic(board, width, height, store.cellProperties);
|
||||
// rescale and draw
|
||||
ctx.save();
|
||||
ctx.clearRect(0, 0, store.canvasWidth, store.canvasHeight);
|
||||
workCtx.putImageData(img, 0, 0);
|
||||
ctx.imageSmoothingEnabled = false;
|
||||
ctx.scale(d, d);
|
||||
ctx.drawImage(workCanvas, 0, 0, store.canvasWidth, store.canvasHeight);
|
||||
ctx.restore();
|
||||
};
|
||||
|
||||
// create a first state, either a single living cell
|
||||
// at the center or random ones
|
||||
const compute1dInitialState = () => {
|
||||
if (store.initial1dState === "onecell")
|
||||
return create1dStateOneCell(store.boardWidth);
|
||||
return create1dState(store.boardWidth, getRandomInt, [0, 2]);
|
||||
};
|
||||
|
||||
// initialize board with random cells
|
||||
const randomInitialState = () => {
|
||||
return create2dState(
|
||||
store.boardWidth,
|
||||
store.boardHeight,
|
||||
getRandomInt,
|
||||
[0, 2]
|
||||
);
|
||||
};
|
||||
|
||||
// draw elementary automaton on the canvas based on selected ruleset
|
||||
const draw1d = () => {
|
||||
const initialState = compute1dInitialState();
|
||||
const board = createBoard(initialState, store.ruleset1d.rules, max());
|
||||
store.lastBoard = Object.freeze(board);
|
||||
// TODO: the board clearly could be an object
|
||||
drawCanvas(store.lastBoard, store.boardWidth, store.boardHeight);
|
||||
store.toggleStop();
|
||||
};
|
||||
|
||||
// draw 2D automaton on the canvas in a loop
|
||||
const draw2d = (board) => {
|
||||
const newBoard = evolve2d(board, selectedRules());
|
||||
drawCanvas(newBoard, store.boardWidth, store.boardHeight);
|
||||
store.lastBoard = Object.freeze(newBoard);
|
||||
};
|
||||
|
||||
// draw 2d automaton in a loop, starting from passed state
|
||||
const draw2dNext = async (board) => {
|
||||
setTimeout(() => {
|
||||
requestAnimationFrame(() => {
|
||||
if (!store.canDraw) return;
|
||||
draw2d(board);
|
||||
return draw2dNext(store.lastBoard);
|
||||
});
|
||||
this.canvasWidth = this.canvas.parentElement.clientWidth;
|
||||
this.canvasHeight = this.canvas.parentElement.clientHeight;
|
||||
this.setBoardWidth();
|
||||
this.setBoardHeight();
|
||||
},
|
||||
methods: {
|
||||
...mapActions(globalStore, [
|
||||
"toggleStop",
|
||||
"setBoardWidth",
|
||||
"setBoardHeight",
|
||||
]),
|
||||
// draws the board on the canvas
|
||||
async drawCanvas(board, width, height) {
|
||||
const d = this.cellProperties.size;
|
||||
// bool to RGBA colors
|
||||
const img = await boardToPic(board, width, height, this.cellProperties);
|
||||
// rescale and draw
|
||||
this.ctx.save();
|
||||
this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
|
||||
this.workCtx.putImageData(img, 0, 0);
|
||||
this.ctx.imageSmoothingEnabled = false;
|
||||
this.ctx.scale(d, d);
|
||||
this.ctx.drawImage(
|
||||
this.workCanvas,
|
||||
0,
|
||||
0,
|
||||
this.canvasWidth,
|
||||
this.canvasHeight
|
||||
);
|
||||
this.ctx.restore();
|
||||
},
|
||||
// create a first state, either a single living cell
|
||||
// at the center or random ones
|
||||
compute1dInitialState() {
|
||||
if (this.initial1dState === "onecell")
|
||||
return create1dStateOneCell(this.boardWidth);
|
||||
return create1dState(this.boardWidth, getRandomInt, [0, 2]);
|
||||
},
|
||||
// initialize board with random cells
|
||||
randomInitialState() {
|
||||
return create2dState(
|
||||
this.boardWidth,
|
||||
this.boardHeight,
|
||||
getRandomInt,
|
||||
[0, 2]
|
||||
);
|
||||
},
|
||||
// draw elementary automaton on the canvas based on selected ruleset
|
||||
draw1d() {
|
||||
const initialState = this.compute1dInitialState();
|
||||
const board = createBoard(initialState, this.ruleset.rules, this.max);
|
||||
this.lastBoard = Object.freeze(board);
|
||||
this.drawCanvas(this.lastBoard, this.boardWidth, this.boardHeight);
|
||||
this.toggleStop();
|
||||
},
|
||||
// draw 2D automaton on the canvas in a loop
|
||||
draw2d(board) {
|
||||
const newBoard = evolve2d(board, this.selectedRules);
|
||||
this.drawCanvas(newBoard, this.boardWidth, this.boardHeight);
|
||||
this.lastBoard = Object.freeze(newBoard);
|
||||
},
|
||||
// draw 2d automaton in a loop, starting from passed state
|
||||
async draw2dNext(board, time) {
|
||||
setTimeout(() => {
|
||||
requestAnimationFrame(() => {
|
||||
if (!this.canDraw) return;
|
||||
this.draw2d(board);
|
||||
return this.draw2dNext(this.lastBoard);
|
||||
});
|
||||
}, this.refreshRate);
|
||||
},
|
||||
// draw 2d automaton from a new state
|
||||
async draw2dNew() {
|
||||
if (!this.canDraw) return;
|
||||
const initialState = this.randomInitialState();
|
||||
let board = evolve2d(initialState, this.selectedRules);
|
||||
if (this.loop) return this.draw2dNext(board);
|
||||
else this.draw2d(board);
|
||||
this.toggleStop();
|
||||
},
|
||||
// draw 2d automaton from the last known generated board
|
||||
async draw2dLast() {
|
||||
if (!this.canDraw) return;
|
||||
if (this.loop) return this.draw2dNext(this.lastBoard);
|
||||
else this.draw2d(this.lastBoard);
|
||||
this.toggleStop();
|
||||
},
|
||||
// draw 2d automaton from an uploaded picture.
|
||||
// use the picture representation as an initial state
|
||||
draw2dPicture() {
|
||||
// draw image on canvas
|
||||
this.ctx.fillStyle = "black";
|
||||
this.ctx.fillRect(0, 0, this.canvasWidth, this.canvasHeight);
|
||||
this.ctx.drawImage(
|
||||
this.picture,
|
||||
Math.floor((this.canvasWidth - this.picture.width) / 2),
|
||||
Math.floor((this.canvasHeight - this.picture.height) / 2),
|
||||
this.picture.width,
|
||||
this.picture.height
|
||||
);
|
||||
}, store.refreshRate);
|
||||
};
|
||||
|
||||
// get image data from canvas
|
||||
const imgData = this.ctx.getImageData(
|
||||
0,
|
||||
0,
|
||||
this.canvasWidth,
|
||||
this.canvasHeight
|
||||
);
|
||||
// draw 2d automaton from a new state
|
||||
const draw2dNew = async () => {
|
||||
if (!store.canDraw) return;
|
||||
const initialState = randomInitialState();
|
||||
const board = evolve2d(initialState, selectedRules());
|
||||
if (store.loop) return draw2dNext(board);
|
||||
else draw2d(board);
|
||||
store.toggleStop();
|
||||
};
|
||||
|
||||
// draw the image back on the work canvas with the dimensions of the board
|
||||
this.workCtx.drawImage(
|
||||
this.picture,
|
||||
0,
|
||||
0,
|
||||
this.boardWidth,
|
||||
this.boardHeight
|
||||
);
|
||||
// draw 2d automaton from the last known generated board
|
||||
const draw2dLast = async () => {
|
||||
if (!store.canDraw) return;
|
||||
if (store.loop) return store.draw2dNext(store.lastBoard);
|
||||
else draw2d(store.lastBoard);
|
||||
store.toggleStop();
|
||||
};
|
||||
|
||||
// get the resized image data from work canvas
|
||||
const resized = this.workCtx.getImageData(
|
||||
0,
|
||||
0,
|
||||
this.boardWidth,
|
||||
this.boardHeight
|
||||
);
|
||||
// draw 2d automaton from an uploaded picture.
|
||||
// use the picture representation as an initial state
|
||||
const draw2dPicture = () => {
|
||||
// draw image on canvas
|
||||
ctx.fillStyle = "black";
|
||||
ctx.fillRect(0, 0, store.canvasWidth, store.canvasHeight);
|
||||
ctx.drawImage(
|
||||
store.picture,
|
||||
Math.floor((store.canvasWidth - store.picture.width) / 2),
|
||||
Math.floor((store.canvasHeight - store.picture.height) / 2),
|
||||
store.picture.width,
|
||||
store.picture.height
|
||||
);
|
||||
|
||||
// convert the image into a 2D board of boolean based on pixel value
|
||||
this.lastBoard = Object.freeze(
|
||||
picToBoard(resized.data, this.boardWidth, this.boardHeight)
|
||||
);
|
||||
// draw the image back on the work canvas with the dimensions of the board
|
||||
workCtx.drawImage(store.picture, 0, 0, store.boardWidth, store.boardHeight);
|
||||
|
||||
this.toggleStop();
|
||||
},
|
||||
// stop drawing routines and clear the canvas
|
||||
reset() {
|
||||
this.toggleStop();
|
||||
this.lastBoard = {};
|
||||
this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
|
||||
this.getReset = 0;
|
||||
},
|
||||
},
|
||||
// get the resized image data from work canvas
|
||||
const resized = workCtx.getImageData(
|
||||
0,
|
||||
0,
|
||||
store.boardWidth,
|
||||
store.boardHeight
|
||||
);
|
||||
|
||||
// convert the image into a 2D board of boolean based on pixel value
|
||||
store.lastBoard = Object.freeze(
|
||||
picToBoard(resized.data, store.boardWidth, store.boardHeight)
|
||||
);
|
||||
|
||||
store.toggleStop();
|
||||
};
|
||||
|
||||
// stop drawing routines and clear the canvas
|
||||
const reset = () => {
|
||||
store.toggleStop();
|
||||
store.lastBoard = null;
|
||||
ctx.clearRect(0, 0, store.canvasWidth, store.canvasHeight);
|
||||
store.reset = false;
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<canvas
|
||||
id="board-canvas"
|
||||
ref="board-canvas"
|
||||
:width="store.canvasWidth"
|
||||
:height="store.canvasHeight"
|
||||
/>
|
||||
<canvas
|
||||
id="work-canvas"
|
||||
ref="work-canvas"
|
||||
:width="store.canvasWidth"
|
||||
:height="store.canvasHeight"
|
||||
/>
|
||||
</template>
|
||||
<style>
|
||||
#canvas-board {
|
||||
flex: 1;
|
||||
|
||||
Reference in New Issue
Block a user