Skip to content

Commit

Permalink
Share pal (#165)
Browse files Browse the repository at this point in the history 
* Share pal

* extract serializer, do some perf stuff
  • Loading branch information
@mcnuttandrew
mcnuttandrew authored Oct 21, 2024
1 parent 60df5ff commit 47915fa
Show file tree
Hide file tree
Showing 8 changed files with 164 additions and 11 deletions.
47 changes: 47 additions & 0 deletions apps/color-buddy/src/App.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,50 @@
{},
$configStore.userName
);
// check if there's a palette specified in the url
const url = new URL(window.location.href);
// const colors = url.searchParams.get("colors");
// const background = url.searchParams.get("background") || "#ffffff";
// const palName = url.searchParams.get("palName");
// const space = url.searchParams.get("space");
const pal = deserializePaletteForUrl(window.location.href);
if (pal) {
colorStore.createNewPal(pal);
url.searchParams.delete("colors");
url.searchParams.delete("bg");
url.searchParams.delete("name");
url.searchParams.delete("space");
window.history.replaceState({}, "", url.toString());
}
// // } else
// if (colors) {
// console.log(colors, background, palName, space);
// let parsedColors = [];
// try {
// parsedColors = JSON.parse(colors || "[]");
// } catch (e) {
// console.error(e);
// }
// const newPal = makePalFromString(parsedColors, background);
// if (palName) {
// newPal.name = palName;
// }
// if (space) {
// newPal.colorSpace = space as any;
// }
// if (parsedColors.length > 0) {
// console.log("here", newPal);
// colorStore.createNewPal(newPal);
// }
// // remove the palette from the url
// url.searchParams.delete("colors");
// url.searchParams.delete("background");
// url.searchParams.delete("palName");
// url.searchParams.delete("space");
// window.history.replaceState({}, "", url.toString());
// }
});
// make sure no focused colors are out of bounds
Expand Down Expand Up @@ -43,11 +87,13 @@
import TourProvider from "./content-modules/TourProvider.svelte";
import Config from "./controls/Config.svelte";
import Title from "./controls/Title.svelte";
import SharePal from "./components/SharePal.svelte";
import { lint } from "./lib/api-calls";
import { debounce } from "vega";
import { buttonStyle } from "./lib/styles";
import { deserializePaletteForUrl } from "./lib/utils";
$: route = $configStore.route;
$: evalRoute = $configStore.evalDisplayMode;
Expand Down Expand Up @@ -114,6 +160,7 @@
Redo
</button>
</div>
<SharePal />
</div>
</div>
</div>
Expand Down
44 changes: 44 additions & 0 deletions apps/color-buddy/src/components/SharePal.svelte
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
<script lang="ts">
import ExportIcon from "virtual:icons/fa6-solid/file-export";
import Tooltip from "./Tooltip.svelte";
import { buttonStyle } from "../lib/styles";
import { serializePaletteForUrl } from "../lib/utils";
import colorStore from "../stores/color-store";
$: palette = $colorStore.palettes[$colorStore.currentPal];
let copyState = "idle" as "idle" | "copied";
</script>

<div class="mt-0.5 ml-2">
<Tooltip>
<div slot="content" let:open class="max-w-md overflow-hidden">
<div class="font-bold">Share via url</div>
<div class="font-mono text-sm p-1 border">
{open && serializePaletteForUrl(palette)}
</div>
<div class="flex items-center">
<button
class={buttonStyle}
on:click={() => {
navigator.clipboard.writeText(serializePaletteForUrl(palette));
copyState = "copied";
setTimeout(() => {
copyState = "idle";
}, 2000);
}}
>
Copy
</button>
{#if copyState === "copied"}
<div class=" ml-4">Copied!</div>
{/if}
</div>
</div>

<button slot="target" let:toggle on:click={toggle} class={buttonStyle}>
<ExportIcon class="text-xl" />
</button>
</Tooltip>
</div>
2 changes: 1 addition & 1 deletion apps/color-buddy/src/components/Tooltip.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -129,7 +129,7 @@
}}
></div>
{/if}
<slot name="content" {onClick} />
<slot name="content" {onClick} open={tooltipOpen} />
</span>
</div>
</div>
Expand Down
34 changes: 34 additions & 0 deletions apps/color-buddy/src/lib/utils.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import {
makePalFromString,
} from "color-buddy-palette";
import type { Palette, StringPalette } from "color-buddy-palette";
import queryString from "query-string";

import { Formatter, FracturedJsonOptions, EolStyle } from "fracturedjsonjs";
import fits from "../assets/outfits.json";
Expand Down Expand Up @@ -576,3 +577,36 @@ export function computeStroke(
}
return "none";
}

export function serializePaletteForUrl(palette: Palette): string {
const colors = palette.colors.map((color) => color.toString());
const bg = palette.background.toString();
const name = palette.name;
const space = palette.colorSpace;
const params = { colors, bg, name, space };
console.log(params);
const str = queryString.stringify(params);
const prefix = window.location.origin + window.location.pathname;
return `${prefix}?&${str}`;
}

export function deserializePaletteForUrl(url: string): Palette | undefined {
const parsed = queryString.parse(url);
console.log(parsed);
const colorSpace = parsed.space as ColorSpace;
const colors = parsed.colors as string[];
const bg = parsed.bg as string;
const name = parsed.name as string;
console.log(name, bg, colors, colorSpace);
if (!colorSpace || !colors || !bg || !name) {
return undefined;
}
try {
const newPal = makePalFromString(colors, bg);
newPal.name = name;
return convertPalToSpace(newPal, colorSpace);
} catch (e) {
console.log(e);
return undefined;
}
}
2 changes: 1 addition & 1 deletion packages/color-namer/main.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ export function nameColor(
const numResults = props?.numResults ?? 1;
const colors = props?.colors ?? heerStoneColors;
const listName = props?.colorListName ?? "heerStone";
const str = `${color.toString().toUpperCase()}-${numResults}-${listName}`;
const str = `${color.toHex().toUpperCase()}-${numResults}-${listName}`;
if (nameCache.has(str)) {
return nameCache.get(str)!;
}
Expand Down
5 changes: 3 additions & 2 deletions packages/palette-lint/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,16 +20,17 @@
"rollup": "^4.18.0",
"ts-json-schema-generator": "^1.5.0",
"typescript": "^5.5.3",
"vite-plugin-dts": "^4.0.0-beta.1",
"vite": "^5.2.0",
"vite-plugin-dts": "^4.0.0-beta.1",
"vitest": "^1.6.0"
},
"dependencies": {
"color-buddy-color-lists": "*",
"color-buddy-color-namer": "*",
"color-buddy-palette": "*",
"fracturedjsonjs": "^4.0.1",
"ohm-js": "^17.1.0"
"ohm-js": "^17.1.0",
"query-string": "^9.1.1"
},
"license": "BSD-3-Clause",
"files": [
Expand Down
17 changes: 15 additions & 2 deletions packages/palette/src/Color.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ type DistAlgorithm = "76" | "CMC" | "2000" | "ITP" | "Jz" | "OK";
const ColorIOCaches = new Map<string, ColorIO>();
const InGamutCache = new Map<string, boolean>();
const colorStateCache = new Map<string, number>();
const distCache = new Map<string, number>();

/**
* The base class for all color spaces
Expand Down Expand Up @@ -178,16 +179,28 @@ export class Color {
return val;
}
distance(color: Color, space: string): number {
const key = `distance-${this.toString()}-${color.toString()}-${space}`;
if (distCache.has(key)) {
return distCache.get(key)!;
}
const colorSpace = space || this.spaceName;
const targetSpace = space === "rgb" ? "srgb" : colorSpace;
const left = this.toColorIO().to(targetSpace);
const right = color.toColorIO().to(targetSpace);
return left.distance(right);
const val = left.distance(right);
distCache.set(key, val);
return val;
}
symmetricDeltaE(color: Color, algorithm: DistAlgorithm = "2000"): number {
const key = `${this.toString()}-${color.toString()}-${algorithm}`;
if (distCache.has(key)) {
return distCache.get(key)!;
}
const left = this.deltaE(color, algorithm);
const right = color.deltaE(this, algorithm);
return 0.5 * (left + right);
const val = 0.5 * (left + right);
distCache.set(key, val);
return val;
}
copy(): Color {
return this.fromChannels(this.toChannels());
Expand Down
24 changes: 19 additions & 5 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2314,11 +2314,6 @@
resolved "https://registry.npmjs.org/@types/color-namer/-/color-namer-1.3.3.tgz"
integrity sha512-DJ0MHHqazwb94dUBRhahK49nXhRGk2DIRNrVNVR3U3uQjYWY4uNhEjHXO+TbFQGpZcwli1pCj6xm3S3KsB/+3A==

"@types/color-thief-node@^1.0.4":
version "1.0.4"
resolved "https://registry.yarnpkg.com/@types/color-thief-node/-/color-thief-node-1.0.4.tgz#33b250895de87ed7090dce44bee2b19a419acbb6"
integrity sha512-9mHoSyLAojvDQsZWxu3FHhiwUsQC7Lfuxrii6rnYc11uJ7GH2ODaM82gyDCXnR/5eXqlOymauUXU5eCEYAHS4A==

"@types/d3-array@*":
version "3.2.1"
resolved "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.1.tgz"
Expand Down Expand Up @@ -4653,6 +4648,11 @@ decimal.js@^10.4.3:
resolved "https://registry.npmjs.org/decimal.js/-/decimal.js-10.4.3.tgz"
integrity sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA==

decode-uri-component@^0.4.1:
version "0.4.1"
resolved "https://registry.yarnpkg.com/decode-uri-component/-/decode-uri-component-0.4.1.tgz#2ac4859663c704be22bf7db760a1494a49ab2cc5"
integrity sha512-+8VxcR21HhTy8nOt6jf20w0c9CADrw1O8d+VZ/YzzCt4bJ3uBjw+D1q2osAB8RnpwwaeYBxy0HyKQxD5JBMuuQ==

decompress-response@^6.0.0:
version "6.0.0"
resolved "https://registry.npmjs.org/decompress-response/-/decompress-response-6.0.0.tgz"
Expand Down Expand Up @@ -8754,6 +8754,15 @@ qs@^6.9.6:
dependencies:
side-channel "^1.0.6"

query-string@^9.1.1:
version "9.1.1"
resolved "https://registry.yarnpkg.com/query-string/-/query-string-9.1.1.tgz#dbfebb4196aeb2919915f2b2b81b91b965cf03a0"
integrity sha512-MWkCOVIcJP9QSKU52Ngow6bsAWAPlPK2MludXvcrS2bGZSl+T1qX9MZvRIkqUIkGLJquMJHWfsT6eRqUpp4aWg==
dependencies:
decode-uri-component "^0.4.1"
filter-obj "^5.1.0"
split-on-first "^3.0.0"

querystringify@^2.1.1:
version "2.2.0"
resolved "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz"
Expand Down Expand Up @@ -9536,6 +9545,11 @@ speakingurl@^14.0.1:
resolved "https://registry.npmjs.org/speakingurl/-/speakingurl-14.0.1.tgz"
integrity sha512-1POYv7uv2gXoyGFpBCmpDVSNV74IfsWlDW216UPjbWufNf+bSU6GdbDsxdcxtfwb4xlI3yxzOTKClUosxARYrQ==

split-on-first@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/split-on-first/-/split-on-first-3.0.0.tgz#f04959c9ea8101b9b0bbf35a61b9ebea784a23e7"
integrity sha512-qxQJTx2ryR0Dw0ITYyekNQWpz6f8dGd7vffGNflQQ3Iqj9NJ6qiZ7ELpZsJ/QBhIVAiDfXdag3+Gp8RvWa62AA==

split2@^1.0.0:
version "1.1.1"
resolved "https://registry.npmjs.org/split2/-/split2-1.1.1.tgz"
Expand Down

0 comments on commit 47915fa

Please sign in to comment.