thm/kollagen
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

autoformat, fix lint errors

Browse source
This commit is contained in:
Tomáš Mládek 2021-09-15 19:13:26 +02:00
parent 054f9a9218
commit 5734774366
1 changed files with 306 additions and 229 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

175
src/components/Collage.vue
View file

@ -1,72 +1,117 @@
<template>
<div class="collage">
<div class="canvas">
<canvas id="canvas" ref="canvas" :width="canvasSize.width" :height="canvasSize.height"></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">
<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">
<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', {
<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">
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>
<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}">
<hr />
<label
:class="{
disabled: images.length < minImages,
selected: 'shuffle' === currentModeType,
}"
>
!SHUFFLE ALL!
<input type="radio" value="shuffle" v-model="currentModeType">
<input type="radio" value="shuffle" v-model="currentModeType" />
</label>
<label :class="{disabled: images.length < minImages,
selected: 'recursive' === currentModeType}">
<label
:class="{
disabled: images.length < minImages,
selected: 'recursive' === currentModeType,
}"
>
#RECURSIVE#
<input type="radio" value="recursive" v-model="currentModeType">
<input type="radio" value="recursive" v-model="currentModeType" />
</label>
</div>
<button :disabled="images.length < minImages" @click="renderCollage">REPAINT</button>
<hr>
<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"
<input
type="number"
:min="minImages"
:max="images.length"
placeholder="RND"
:disabled="Object.keys(forceConfig).includes('numImages')"
v-model="forceConfig.numImages || collageConfig.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">
<input
type="number"
:min="1"
:max="10"
v-model="recursiveConfig.level"
/>
</label>
<label>
<input type="checkbox" v-model="recursiveConfig.repeat">
<input type="checkbox" v-model="recursiveConfig.repeat" />
Repeat images?
</label>
</template>
</div>
</div>
</div>
@ -74,12 +119,12 @@
<script lang="ts">
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";
import BrowserCollageModes from "../collages";
type DisplayCollageModeType = CollageModeType | & "shuffle" | & "recursive";
type DisplayCollageModeType = CollageModeType | "shuffle" | "recursive";
@Component
export default class Collage extends Vue {
@ -87,14 +132,14 @@ export default class Collage extends Vue {
private context!: CanvasRenderingContext2D;
private canvasSize = {
width: 640,
height: 640
height: 640,
};
private collageConfig: CollageConfig = {
numImages: undefined
numImages: undefined,
};
private recursiveConfig = {
level: 2,
repeat: true
repeat: true,
};
private currentModeType: DisplayCollageModeType = "shuffle";
private lastActiveModeTypes: CollageModeType[] = [];
@ -102,8 +147,13 @@ export default class Collage extends Vue {
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));
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;
}
@ -120,7 +170,7 @@ export default class Collage extends Vue {
}
private mounted() {
const canvas = (this.$refs.canvas as HTMLCanvasElement);
const canvas = this.$refs.canvas as HTMLCanvasElement;
this.context = canvas.getContext("2d") as CanvasRenderingContext2D;
}
@ -132,8 +182,13 @@ export default class Collage extends Vue {
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);
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>;
@ -146,15 +201,30 @@ export default class Collage extends Vue {
mode = this.modes.modes[this.currentModeType];
}
const shuffledImages = shuffle(this.images);
const segments = mode.getSegments(this.context, this.collageConfig, shuffledImages);
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> => {
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) {
if (
segment === rootSegment ||
level <= this.recursiveConfig.level - 1
) {
let canvas = document.createElement("canvas");
canvas.width = segment.w;
canvas.height = segment.h;
@ -165,7 +235,9 @@ export default class Collage extends Vue {
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)));
let bitmaps = await Promise.all(
segments.map((segment) => processSegment(segment, level + 1))
);
mode.place(ctx, bitmaps, segments);
return await createImageBitmap(canvas);
} else {
@ -180,10 +252,12 @@ export default class Collage extends Vue {
}
}
};
processSegment(rootSegment, 0).then((finalCollage) => {
processSegment(rootSegment, 0)
.then((finalCollage) => {
console.debug(finalCollage);
this.context.drawImage(finalCollage, 0, 0);
}).catch((error) => {
})
.catch((error) => {
alert(error);
});
}
@ -199,7 +273,7 @@ export default class Collage extends Vue {
private reset() {
this.context.globalCompositeOperation = "source-over";
const canvas = (this.$refs.canvas as HTMLCanvasElement);
const canvas = this.$refs.canvas as HTMLCanvasElement;
this.context.clearRect(0, 0, canvas.width, canvas.height);
}
}
@ -254,11 +328,12 @@ export default class Collage extends Vue {
.separator {
border: 1px solid gray;
width: 0;
margin: 0 .5em;
margin: 0 0.5em;
align-self: stretch;
}
.mode .mode-plus, .mode .mode-plus label {
.mode .mode-plus,
.mode .mode-plus label {
color: gray;
font-size: 14px;
}
@ -269,7 +344,7 @@ export default class Collage extends Vue {
}
.controls .modes hr {
margin-top: .5rem;
margin-top: 0.5rem;
width: 100%;
color: lightgray;
}
@ -277,14 +352,16 @@ export default class Collage extends Vue {
.controls label {
font-size: 14pt;
cursor: pointer;
margin: .25rem;
margin: 0.25rem;
}
.modes input {
display: none;
}
.controls button, .controls hr, .controls .config {
.controls button,
.controls hr,
.controls .config {
margin-top: 1rem;
}