autoformat, fix lint errors
This commit is contained in:
parent
054f9a9218
commit
5734774366
1 changed files with 306 additions and 229 deletions
|
|
@ -1,207 +1,281 @@
|
|||
<template>
|
||||
<div class="collage">
|
||||
<div class="collage">
|
||||
<div class="canvas">
|
||||
<canvas id="canvas" ref="canvas" :width="canvasSize.width" :height="canvasSize.height"></canvas>
|
||||
<div class="canvas-size">
|
||||
<label>
|
||||
Width:
|
||||
<input type="number" step="16" min="128" v-model="canvasSize.width">
|
||||
</label>
|
||||
<label>
|
||||
Height:
|
||||
<input type="number" step="16" min="128" v-model="canvasSize.height">
|
||||
</label>
|
||||
</div>
|
||||
<canvas
|
||||
id="canvas"
|
||||
ref="canvas"
|
||||
:width="canvasSize.width"
|
||||
:height="canvasSize.height"
|
||||
></canvas>
|
||||
<div class="canvas-size">
|
||||
<label>
|
||||
Width:
|
||||
<input type="number" step="16" min="128" v-model="canvasSize.width" />
|
||||
</label>
|
||||
<label>
|
||||
Height:
|
||||
<input
|
||||
type="number"
|
||||
step="16"
|
||||
min="128"
|
||||
v-model="canvasSize.height"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="controls">
|
||||
<div class="modes">
|
||||
<ul class="modes-list">
|
||||
<li v-for="(mode, idx) in modes.modes"
|
||||
:class="['mode', {
|
||||
disabled: images.length < mode.minImages,
|
||||
excluded: excludedModes.includes(idx),
|
||||
selected: idx === currentModeType,
|
||||
lastActive: lastActiveModeTypes.includes(idx)}]">
|
||||
<label class="handle">{{mode.name}}<input type="radio" :value="idx"
|
||||
v-model="currentModeType"></label>
|
||||
<span class="mode-plus"
|
||||
v-if="['recursive', 'shuffle'].includes(currentModeType) && images.length >= minImages">
|
||||
<span class="separator"></span>
|
||||
<label>{{ excludedModes.includes(idx) ? 'o' : 'x'}}<input type="checkbox" :value="idx"
|
||||
v-model="excludedModes"></label>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
<hr>
|
||||
<label :class="{disabled: images.length < minImages,
|
||||
selected: 'shuffle' === currentModeType}">
|
||||
!SHUFFLE ALL!
|
||||
<input type="radio" value="shuffle" v-model="currentModeType">
|
||||
</label>
|
||||
<label :class="{disabled: images.length < minImages,
|
||||
selected: 'recursive' === currentModeType}">
|
||||
#RECURSIVE#
|
||||
<input type="radio" value="recursive" v-model="currentModeType">
|
||||
</label>
|
||||
</div>
|
||||
<button :disabled="images.length < minImages" @click="renderCollage">REPAINT</button>
|
||||
<hr>
|
||||
<div class="config">
|
||||
<template v-if="currentModeType !== 'recursive'">
|
||||
<label class="config-numimages">
|
||||
#N of images:
|
||||
<input type="number" :min="minImages" :max="images.length"
|
||||
placeholder="RND"
|
||||
:disabled="Object.keys(forceConfig).includes('numImages')"
|
||||
v-model="forceConfig.numImages || collageConfig.numImages">
|
||||
</label>
|
||||
</template>
|
||||
<template v-else>
|
||||
<label>
|
||||
Recursion levels:
|
||||
<input type="number" :min="1" :max="10" v-model="recursiveConfig.level">
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" v-model="recursiveConfig.repeat">
|
||||
Repeat images?
|
||||
</label>
|
||||
</template>
|
||||
|
||||
</div>
|
||||
<div class="modes">
|
||||
<ul class="modes-list">
|
||||
<li
|
||||
v-for="(mode, idx) in modes.modes"
|
||||
:class="[
|
||||
'mode',
|
||||
{
|
||||
disabled: images.length < mode.minImages,
|
||||
excluded: excludedModes.includes(idx),
|
||||
selected: idx === currentModeType,
|
||||
lastActive: lastActiveModeTypes.includes(idx),
|
||||
},
|
||||
]"
|
||||
:key="idx"
|
||||
>
|
||||
<label class="handle"
|
||||
>{{ mode.name
|
||||
}}<input type="radio" :value="idx" v-model="currentModeType"
|
||||
/></label>
|
||||
<span
|
||||
class="mode-plus"
|
||||
v-if="
|
||||
['recursive', 'shuffle'].includes(currentModeType) &&
|
||||
images.length >= minImages
|
||||
"
|
||||
>
|
||||
<span class="separator"></span>
|
||||
<label
|
||||
>{{ excludedModes.includes(idx) ? "o" : "x"
|
||||
}}<input type="checkbox" :value="idx" v-model="excludedModes"
|
||||
/></label>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
<hr />
|
||||
<label
|
||||
:class="{
|
||||
disabled: images.length < minImages,
|
||||
selected: 'shuffle' === currentModeType,
|
||||
}"
|
||||
>
|
||||
!SHUFFLE ALL!
|
||||
<input type="radio" value="shuffle" v-model="currentModeType" />
|
||||
</label>
|
||||
<label
|
||||
:class="{
|
||||
disabled: images.length < minImages,
|
||||
selected: 'recursive' === currentModeType,
|
||||
}"
|
||||
>
|
||||
#RECURSIVE#
|
||||
<input type="radio" value="recursive" v-model="currentModeType" />
|
||||
</label>
|
||||
</div>
|
||||
<button :disabled="images.length < minImages" @click="renderCollage">
|
||||
REPAINT
|
||||
</button>
|
||||
<hr />
|
||||
<div class="config">
|
||||
<template v-if="currentModeType !== 'recursive'">
|
||||
<label class="config-numimages">
|
||||
#N of images:
|
||||
<input
|
||||
type="number"
|
||||
:min="minImages"
|
||||
:max="images.length"
|
||||
placeholder="RND"
|
||||
:disabled="Object.keys(forceConfig).includes('numImages')"
|
||||
:value="forceConfig.numImages || collageConfig.numImages"
|
||||
@input="(n) => (collageConfig.numImages = n)"
|
||||
/>
|
||||
</label>
|
||||
</template>
|
||||
<template v-else>
|
||||
<label>
|
||||
Recursion levels:
|
||||
<input
|
||||
type="number"
|
||||
:min="1"
|
||||
:max="10"
|
||||
v-model="recursiveConfig.level"
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" v-model="recursiveConfig.repeat" />
|
||||
Repeat images?
|
||||
</label>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import {Component, Prop, Vue, Watch} from "vue-property-decorator";
|
||||
import {CollageModeType} from "../common/collages";
|
||||
import {CollageConfig, CollageMode, Segment} from "../common/types";
|
||||
import {choice, shuffle} from "../common/utils";
|
||||
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
|
||||
import BrowserCollageModes from "../collages";
|
||||
import { CollageModeType } from "../common/collages";
|
||||
import { CollageConfig, CollageMode, Segment } from "../common/types";
|
||||
import { choice, shuffle } from "../common/utils";
|
||||
|
||||
type DisplayCollageModeType = CollageModeType | & "shuffle" | & "recursive";
|
||||
type DisplayCollageModeType = CollageModeType | "shuffle" | "recursive";
|
||||
|
||||
@Component
|
||||
export default class Collage extends Vue {
|
||||
@Prop({required: true}) private images!: ImageBitmap[];
|
||||
private context!: CanvasRenderingContext2D;
|
||||
private canvasSize = {
|
||||
width: 640,
|
||||
height: 640
|
||||
};
|
||||
private collageConfig: CollageConfig = {
|
||||
numImages: undefined
|
||||
};
|
||||
private recursiveConfig = {
|
||||
level: 2,
|
||||
repeat: true
|
||||
};
|
||||
private currentModeType: DisplayCollageModeType = "shuffle";
|
||||
private lastActiveModeTypes: CollageModeType[] = [];
|
||||
private excludedModes: CollageModeType[] = [];
|
||||
private modes = new BrowserCollageModes();
|
||||
@Prop({ required: true }) private images!: ImageBitmap[];
|
||||
private context!: CanvasRenderingContext2D;
|
||||
private canvasSize = {
|
||||
width: 640,
|
||||
height: 640,
|
||||
};
|
||||
private collageConfig: CollageConfig = {
|
||||
numImages: undefined,
|
||||
};
|
||||
private recursiveConfig = {
|
||||
level: 2,
|
||||
repeat: true,
|
||||
};
|
||||
private currentModeType: DisplayCollageModeType = "shuffle";
|
||||
private lastActiveModeTypes: CollageModeType[] = [];
|
||||
private excludedModes: CollageModeType[] = [];
|
||||
private modes = new BrowserCollageModes();
|
||||
|
||||
private get minImages() {
|
||||
if (this.currentModeType === "shuffle" || this.currentModeType === "recursive") {
|
||||
return Math.min(...Object.values(this.modes.modes).map((mode) => mode.minImages));
|
||||
private get minImages() {
|
||||
if (
|
||||
this.currentModeType === "shuffle" ||
|
||||
this.currentModeType === "recursive"
|
||||
) {
|
||||
return Math.min(
|
||||
...Object.values(this.modes.modes).map((mode) => mode.minImages)
|
||||
);
|
||||
} else {
|
||||
return this.modes.modes[this.currentModeType].minImages;
|
||||
}
|
||||
}
|
||||
|
||||
private get lastMode() {
|
||||
if (this.lastActiveModeTypes.length === 1) {
|
||||
return this.modes.modes[this.lastActiveModeTypes[0]];
|
||||
}
|
||||
}
|
||||
|
||||
private get forceConfig() {
|
||||
return this.lastMode ? this.lastMode.forceConfig || {} : {};
|
||||
}
|
||||
|
||||
private mounted() {
|
||||
const canvas = this.$refs.canvas as HTMLCanvasElement;
|
||||
this.context = canvas.getContext("2d") as CanvasRenderingContext2D;
|
||||
}
|
||||
|
||||
@Watch("images")
|
||||
@Watch("currentModeType")
|
||||
@Watch("collageConfig", { deep: true })
|
||||
@Watch("recursiveConfig", { deep: true })
|
||||
private renderCollage() {
|
||||
if (this.images.length >= this.minImages) {
|
||||
this.reset();
|
||||
|
||||
const permissibleModeKeys = (
|
||||
Object.keys(this.modes.modes) as CollageModeType[]
|
||||
).filter(
|
||||
(k) =>
|
||||
!this.excludedModes.includes(k) &&
|
||||
this.modes.modes[k].minImages <= this.images.length
|
||||
);
|
||||
|
||||
if (this.currentModeType !== "recursive") {
|
||||
let mode: CollageMode<any, any>;
|
||||
if (this.currentModeType === "shuffle") {
|
||||
const randomModeType = choice(permissibleModeKeys);
|
||||
this.lastActiveModeTypes = [randomModeType];
|
||||
mode = this.modes.modes[randomModeType];
|
||||
} else {
|
||||
return this.modes.modes[this.currentModeType].minImages;
|
||||
this.lastActiveModeTypes = [this.currentModeType];
|
||||
mode = this.modes.modes[this.currentModeType];
|
||||
}
|
||||
}
|
||||
|
||||
private get lastMode() {
|
||||
if (this.lastActiveModeTypes.length === 1) {
|
||||
return this.modes.modes[this.lastActiveModeTypes[0]];
|
||||
}
|
||||
}
|
||||
|
||||
private get forceConfig() {
|
||||
return this.lastMode ? this.lastMode.forceConfig || {} : {};
|
||||
}
|
||||
|
||||
private mounted() {
|
||||
const canvas = (this.$refs.canvas as HTMLCanvasElement);
|
||||
this.context = canvas.getContext("2d") as CanvasRenderingContext2D;
|
||||
}
|
||||
|
||||
@Watch("images")
|
||||
@Watch("currentModeType")
|
||||
@Watch("collageConfig", {deep: true})
|
||||
@Watch("recursiveConfig", {deep: true})
|
||||
private renderCollage() {
|
||||
if (this.images.length >= this.minImages) {
|
||||
this.reset();
|
||||
|
||||
const permissibleModeKeys = (Object.keys(this.modes.modes) as CollageModeType[])
|
||||
.filter(k => !this.excludedModes.includes(k) && this.modes.modes[k].minImages <= this.images.length);
|
||||
|
||||
if (this.currentModeType !== "recursive") {
|
||||
let mode: CollageMode<any, any>;
|
||||
if (this.currentModeType === "shuffle") {
|
||||
const randomModeType = choice(permissibleModeKeys);
|
||||
this.lastActiveModeTypes = [randomModeType];
|
||||
mode = this.modes.modes[randomModeType];
|
||||
} else {
|
||||
this.lastActiveModeTypes = [this.currentModeType];
|
||||
mode = this.modes.modes[this.currentModeType];
|
||||
}
|
||||
const shuffledImages = shuffle(this.images);
|
||||
const segments = mode.getSegments(this.context, this.collageConfig, shuffledImages);
|
||||
mode.place(this.context, shuffledImages, segments);
|
||||
const shuffledImages = shuffle(this.images);
|
||||
const segments = mode.getSegments(
|
||||
this.context,
|
||||
this.collageConfig,
|
||||
shuffledImages
|
||||
);
|
||||
mode.place(this.context, shuffledImages, segments);
|
||||
} else {
|
||||
this.lastActiveModeTypes = [];
|
||||
const shuffledImages = shuffle(this.images);
|
||||
const rootSegment: Segment = {
|
||||
x: 0,
|
||||
y: 0,
|
||||
w: this.context.canvas.width,
|
||||
h: this.context.canvas.height,
|
||||
};
|
||||
const processSegment = async (
|
||||
segment: Segment,
|
||||
level: number
|
||||
): Promise<ImageBitmap> => {
|
||||
console.debug(segment, level);
|
||||
if (
|
||||
segment === rootSegment ||
|
||||
level <= this.recursiveConfig.level - 1
|
||||
) {
|
||||
let canvas = document.createElement("canvas");
|
||||
canvas.width = segment.w;
|
||||
canvas.height = segment.h;
|
||||
let modeKey = choice(permissibleModeKeys);
|
||||
console.debug(modeKey);
|
||||
this.lastActiveModeTypes.push(modeKey);
|
||||
let mode = this.modes.modes[modeKey];
|
||||
let ctx = canvas.getContext("2d") as CanvasRenderingContext2D;
|
||||
let segments = mode.getSegments(ctx);
|
||||
console.debug(segments);
|
||||
let bitmaps = await Promise.all(
|
||||
segments.map((segment) => processSegment(segment, level + 1))
|
||||
);
|
||||
mode.place(ctx, bitmaps, segments);
|
||||
return await createImageBitmap(canvas);
|
||||
} else {
|
||||
if (this.recursiveConfig.repeat) {
|
||||
return choice(shuffledImages);
|
||||
} else {
|
||||
this.lastActiveModeTypes = [];
|
||||
const shuffledImages = shuffle(this.images);
|
||||
const rootSegment: Segment = {x: 0, y: 0, w: this.context.canvas.width, h: this.context.canvas.height};
|
||||
const processSegment = async (segment: Segment, level: number): Promise<ImageBitmap> => {
|
||||
console.debug(segment, level);
|
||||
if (segment === rootSegment || level <= this.recursiveConfig.level - 1) {
|
||||
let canvas = document.createElement("canvas");
|
||||
canvas.width = segment.w;
|
||||
canvas.height = segment.h;
|
||||
let modeKey = choice(permissibleModeKeys);
|
||||
console.debug(modeKey);
|
||||
this.lastActiveModeTypes.push(modeKey);
|
||||
let mode = this.modes.modes[modeKey];
|
||||
let ctx = canvas.getContext("2d") as CanvasRenderingContext2D;
|
||||
let segments = mode.getSegments(ctx);
|
||||
console.debug(segments);
|
||||
let bitmaps = await Promise.all(segments.map((segment) => processSegment(segment, level + 1)));
|
||||
mode.place(ctx, bitmaps, segments);
|
||||
return await createImageBitmap(canvas);
|
||||
} else {
|
||||
if (this.recursiveConfig.repeat) {
|
||||
return choice(shuffledImages);
|
||||
} else {
|
||||
if (shuffledImages.length > 0) {
|
||||
return shuffledImages.pop() as ImageBitmap;
|
||||
} else {
|
||||
throw "RAN OUT OF IMAGES";
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
processSegment(rootSegment, 0).then((finalCollage) => {
|
||||
console.debug(finalCollage);
|
||||
this.context.drawImage(finalCollage, 0, 0);
|
||||
}).catch((error) => {
|
||||
alert(error);
|
||||
});
|
||||
if (shuffledImages.length > 0) {
|
||||
return shuffledImages.pop() as ImageBitmap;
|
||||
} else {
|
||||
throw "RAN OUT OF IMAGES";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
processSegment(rootSegment, 0)
|
||||
.then((finalCollage) => {
|
||||
console.debug(finalCollage);
|
||||
this.context.drawImage(finalCollage, 0, 0);
|
||||
})
|
||||
.catch((error) => {
|
||||
alert(error);
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@Watch("canvasSize", {deep: true})
|
||||
private onCanvasSizeChange() {
|
||||
this.$nextTick(() => {
|
||||
this.renderCollage();
|
||||
});
|
||||
}
|
||||
@Watch("canvasSize", { deep: true })
|
||||
private onCanvasSizeChange() {
|
||||
this.$nextTick(() => {
|
||||
this.renderCollage();
|
||||
});
|
||||
}
|
||||
|
||||
private reset() {
|
||||
this.context.globalCompositeOperation = "source-over";
|
||||
const canvas = (this.$refs.canvas as HTMLCanvasElement);
|
||||
this.context.clearRect(0, 0, canvas.width, canvas.height);
|
||||
}
|
||||
private reset() {
|
||||
this.context.globalCompositeOperation = "source-over";
|
||||
const canvas = this.$refs.canvas as HTMLCanvasElement;
|
||||
this.context.clearRect(0, 0, canvas.width, canvas.height);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -209,112 +283,115 @@ export default class Collage extends Vue {
|
|||
<!--suppress CssUnusedSymbol -->
|
||||
<style scoped>
|
||||
.collage {
|
||||
margin: 2rem;
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
margin: 2rem;
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.canvas {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#canvas {
|
||||
border: 1px solid black;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
.canvas-size {
|
||||
margin: 1rem;
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
.controls button {
|
||||
width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.modes {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.modes-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.mode {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
user-select: none;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.separator {
|
||||
border: 1px solid gray;
|
||||
width: 0;
|
||||
margin: 0 .5em;
|
||||
align-self: stretch;
|
||||
border: 1px solid gray;
|
||||
width: 0;
|
||||
margin: 0 0.5em;
|
||||
align-self: stretch;
|
||||
}
|
||||
|
||||
.mode .mode-plus, .mode .mode-plus label {
|
||||
color: gray;
|
||||
font-size: 14px;
|
||||
.mode .mode-plus,
|
||||
.mode .mode-plus label {
|
||||
color: gray;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.mode-plus {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.controls .modes hr {
|
||||
margin-top: .5rem;
|
||||
width: 100%;
|
||||
color: lightgray;
|
||||
margin-top: 0.5rem;
|
||||
width: 100%;
|
||||
color: lightgray;
|
||||
}
|
||||
|
||||
.controls label {
|
||||
font-size: 14pt;
|
||||
cursor: pointer;
|
||||
margin: .25rem;
|
||||
font-size: 14pt;
|
||||
cursor: pointer;
|
||||
margin: 0.25rem;
|
||||
}
|
||||
|
||||
.modes input {
|
||||
display: none;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.controls button, .controls hr, .controls .config {
|
||||
margin-top: 1rem;
|
||||
.controls button,
|
||||
.controls hr,
|
||||
.controls .config {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.controls .config {
|
||||
user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.config label {
|
||||
display: block;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.config-numimages input {
|
||||
width: 4em;
|
||||
width: 4em;
|
||||
}
|
||||
|
||||
.disabled {
|
||||
color: gray;
|
||||
pointer-events: none;
|
||||
color: gray;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.excluded .handle {
|
||||
color: gray;
|
||||
text-decoration: line-through;
|
||||
color: gray;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.selected {
|
||||
font-weight: bold;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.lastActive .handle {
|
||||
text-decoration: underline;
|
||||
text-decoration: underline;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in a new issue