alexandre/PaletteSwitcher
1
0
Fork 0
Code Issues 4 Pull Requests 8 Actions Packages Projects Releases Activity

REBASEME

Browse Source
This commit is contained in:
Alexandre Bruyant 2024-01-26 10:15:44 +01:00
parent d919b1a26d
commit 5cc21d68ae
5 changed files with 79 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
palette-switcher-v2/src/index.tsx
View File

@ -5,7 +5,7 @@ import "./index.css";
import App from "./App";
import { Router, Route } from "@solidjs/router";
import About from "./pages/About";
import Switcher from "./pages/Switcher";
import Switcher from "./pages/Switcher/Switcher";
const root = document.getElementById("root");

3
palette-switcher-v2/src/lib/algorithm.ts Normal file
View File

@ -0,0 +1,3 @@
import { BaseJob } from "./job"
type Algorithm = typeof BaseJob.kind;

22
palette-switcher-v2/src/lib/job.ts
View File

@ -1,21 +1,35 @@
type Color = string;
export enum Algorithm {
FLOYD_STEINBERG = "FLOYD_STEINBERG",
BAYER = "BAYER",
PIXEL_MAPPER = "PIXEL_MAPPER"
};
type AlgorithmName = {
[T in Algorithm]: {
[Algorithm.FLOYD_STEINBERG]: "Floyd-Steinberg",
[Algorithm.BAYER]: "Bayer",
[Algorithm.PIXEL_MAPPER]: "Pixel Mapper"
}[T]
}
interface BaseJob {
kind: string;
kind: Algorithm;
image: ArrayBuffer;
palette: Color[];
}
interface FloydSteinberg extends BaseJob {
kind: "FLOYD_STEINBERG";
kind: Algorithm.FLOYD_STEINBERG;
}
interface Bayer extends BaseJob {
kind: "BAYER";
kind: Algorithm.BAYER;
}
interface PixelMapper extends BaseJob {
kind: "PIXEL_MAPPER";
kind: Algorithm.PIXEL_MAPPER;
}
export type Job = FloydSteinberg | Bayer | PixelMapper;

42
palette-switcher-v2/src/pages/Switcher.tsx
View File

@ -1,42 +0,0 @@
import { Component, JSX, splitProps } from "solid-js";
import { image, setJob } from "../lib/ditherer";
type DefaultButtonProps = { children?: JSX.Element } & JSX.HTMLAttributes<HTMLButtonElement>;
const DefaultButton: Component<DefaultButtonProps> = (props) => {
const [, rest] = splitProps(props, ["children"]);
return <button
{...rest}
type="button"
class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800"
>
{props.children}
</button>
}
const Switcher: Component = () => {
const handler = () => {
setJob({
kind: "FLOYD_STEINBERG",
image: new ArrayBuffer(1),
palette: ["FFFFFF"],
});
};
return (
<div class="mx-auto max-w-7xl py-6 sm:px-6 lg:px-8">
<main class="p-4 h-auto">
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-4">
<div class="border-2 border-dashed border-gray-300 rounded-lg dark:border-gray-600 h-32 md:h-64"></div>
<div class="border-2 border-dashed rounded-lg border-gray-300 dark:border-gray-600 h-32 md:h-64"></div>
<div class="border-2 border-dashed rounded-lg border-gray-300 dark:border-gray-600 h-32 md:h-64"></div>
<div class="border-2 border-dashed rounded-lg border-gray-300 dark:border-gray-600 h-32 md:h-64"></div>
</div>
</main>
<DefaultButton onClick={handler}>Trigger</DefaultButton>
<span>{image()}</span>
</div >
);
};
export default Switcher;

57
palette-switcher-v2/src/pages/Switcher/Switcher.tsx Normal file
View File

@ -0,0 +1,57 @@
import { Component, For, JSX, createSignal, splitProps } from "solid-js";
import { image, setJob } from "../../lib/ditherer";
import { Algorithm, AlgorithmName } from "../../lib/job";
const Switcher: Component = () => {
const handler = () => {
setJob({
kind: Algorithm.FLOYD_STEINBERG,
image: new ArrayBuffer(1),
palette: ["FFFFFF"],
});
};
const [algorithms, setAlgorithms] = createSignal(Object.keys(Algorithm));
return (
<div class="mx-auto max-w-7xl py-6 sm:px-6 lg:px-8">
<main class="p-4 h-auto">
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-4">
<div class="border-2 border-dashed rounded-lg border-gray-300 dark:border-gray-600 h-32 md:h-64 lg:col-span-3">
<span>Image Goes Here</span>
</div>
<div class="rounded-lg">
<section class="bg-white dark:bg-gray-900">
<div class="p-4 mx-auto max-w-2xl">
<h2 class="mb-4 text-xl font-bold text-gray-900 dark:text-white">Configuration</h2>
<form action="#">
<div class="grid gap-4 sm:grid-cols-2 sm:gap-6">
<div>
<label for="category" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Algorithm</label>
<select id="category" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500">
<option >Select Algorithm</option>
<For each={algorithms()}>{(algo, _) => <option value={algo}>{AlgorithmName[algo]}</option>}</For>
<option value="FS">Floyd-Steinberg</option>
<option value="NC">Nearest color</option>
</select>
</div>
</div>
<button type="submit"
class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 mt-4 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800"
>
Start processing
</button>
</form>
</div>
</section>
</div>
</div>
</main>
<span>{image()}</span>
</div >
);
};
export default Switcher;