@lvl99dotcom/paintcanvas 0.3.1 → 0.4.0

package/dist/ui/elements/PcPanelColours/index.d.ts

@@ -0,0 +1,171 @@
+import { nothing, type PropertyValues } from "lit";
+import { PcPanel } from "../PcPanel";
+import "../PcColourPair";
+import "../PcMenu";
+import "../PcDialog";
+import type { default as PaintCanvas } from "../../../lib/classes/PaintCanvas";
+import { type Hsl, type Rgb } from "../../../lib/utils/colour";
+import { type SaveMethod } from "../../../lib/rendering/screenshot";
+/** The colour models the sliders can show */
+export type ColourModel = "rgb" | "hsl";
+/**
+ * The CSS gradient a channel's slider track shows: the colours its values give, from the lowest to the highest, keeping
+ * the colour's other values. Red, green and blue go from none to all of that channel (e.g. red from `rgb(0, g, b)` to
+ * `rgb(255, g, b)`), saturation from grey to full colour, and lightness from black through the colour to white. Hue goes
+ * through every hue at full saturation, so it never shows as grey.
+ *
+ * @example
+ * channelGradient("r", { r: 0, g: 128, b: 255 }, { h: 210, s: 100, l: 50 }); // "linear-gradient(to right, #0080ff, #ff80ff)"
+ * channelGradient("s", { r: 77, g: 179, b: 77 }, { h: 120, s: 40, l: 50 }); // "linear-gradient(to right, #808080, #00ff00)"
+ */
+export declare const channelGradient: (key: string, rgb: Rgb, hsl: Hsl) => string;
+/** How long a touch is held on a saved colour to open its menu (milliseconds) */
+export declare const LONG_PRESS_MS = 500;
+/**
+ * The colour palette menu: the foreground and background colours (the selected one is configured), its hex value, RGB
+ * and HSL sliders, the saved colours, and buttons to import and export them as a JSON file.
+ *
+ * - Pressing the foreground or background colour selects it.
+ * - Pressing a saved colour sets the selected colour; [+] saves the selected colour.
+ * - A saved colour is deleted, after asking, by clicking it with Alt/Option held (the cursor shows an "X"), from its
+ *   menu (right-click, a long press on touch screens, or the context menu key), or with Delete or Backspace. Arrow keys,
+ *   Home and End move between saved colours.
+ * - Escape closes it (closes the canvas's open panel).
+ *
+ * Fires `pc-toast` after importing, or when importing or exporting fails.
+ *
+ * @example
+ * html`<pc-panel-colours .app=${app}></pc-panel-colours>`
+ */
+export declare class PcPanelColours extends PcPanel {
+    static properties: {
+        app: {
+            attribute: boolean;
+        };
+        model: {
+            type: StringConstructor;
+        };
+        hexDraft: {
+            state: boolean;
+        };
+        menu: {
+            state: boolean;
+        };
+        confirming: {
+            state: boolean;
+        };
+        icon: {
+            type: StringConstructor;
+        };
+        label: {
+            type: StringConstructor;
+        };
+        badge: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        translations: {
+            attribute: boolean;
+        };
+        icons: {
+            attribute: boolean;
+        };
+        theme: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+    };
+    static styles: import("lit").CSSResultGroup[];
+    app?: PaintCanvas;
+    /** The colour model the sliders show */
+    model: ColourModel;
+    /** The hex value being typed, while it differs from the colour */
+    hexDraft?: string;
+    /** The saved colour whose menu is open, and where */
+    menu?: {
+        index: number;
+        x: number;
+        y: number;
+    };
+    /** The saved colour being deleted, while asking */
+    confirming?: number;
+    /** Saves exported files (replaceable for tests) */
+    saveFile: (blob: Blob, name: string) => Promise<SaveMethod | undefined>;
+    /** The HSL values shown, kept while they give the selected colour (so hue stays put for greys) */
+    private hsl;
+    /** The saved colour that is reached with Tab (the others with arrow keys) */
+    private focusIndex;
+    /** A touch being held on a saved colour, until it opens its menu */
+    private press?;
+    /** Whether a long press opened a menu, so the click that follows is ignored */
+    private longPressed;
+    private changes;
+    private readonly onKey;
+    private readonly onBlur;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** The selected colour's value, e.g. `#000000` */
+    get colour(): string;
+    protected willUpdate(changed: PropertyValues<this>): void;
+    /** Set the selected colour */
+    private setColour;
+    /** Select the pressed colour */
+    private onColourClick;
+    /** Follow the hex value as it's typed, setting the colour once it's a full 6-digit value */
+    private onHexInput;
+    /** Set the colour from a typed hex value (including 3 digits) when done, or show the colour again if it isn't one */
+    private onHexChange;
+    /** Switch colour model with the arrow keys, Home and End, as tabs do */
+    private onTabKeyDown;
+    /** Show a colour model's sliders */
+    private selectModel;
+    /** Change one channel of the colour model shown */
+    private onChannel;
+    /** Set the selected colour from a saved colour, or ask to delete it with Alt/Option held */
+    private onSwatchClick;
+    /** Open a saved colour's menu where it was right-clicked */
+    private onSwatchContextMenu;
+    /** Start waiting for a touch held on a saved colour to open its menu */
+    private onSwatchPointerDown;
+    /** Stop waiting for a long press when the touch moves away */
+    private onSwatchPointerMove;
+    /** Stop waiting for a long press */
+    private cancelPress;
+    /**
+     * Move between saved colours, ask to delete one, or open its menu, with the keyboard. Keys used here don't reach the
+     * keyboard shortcuts (e.g. Delete doesn't also delete the masked image data).
+     */
+    private onSwatchKeyDown;
+    /** How many saved colours fit in a row */
+    private columns;
+    /** Focus a saved colour */
+    private focusSwatch;
+    /** Save the selected colour */
+    private onAdd;
+    /** Delete the saved colour that was asked about, if confirmed */
+    private onConfirm;
+    /** Close the palette with Escape (unless a dialog or menu is open, which closes first) */
+    private onKeyDown;
+    /**
+     * Import the colours in a colour palette file, adding them after the saved ones (leaving out ones already saved).
+     */
+    importFile(file: File): Promise<void>;
+    /**
+     * Export the saved colours as a colour palette file.
+     */
+    exportFile(): Promise<void>;
+    /** Show a palette file error (one of `PALETTE_FILE_ERRORS`) in the chosen language */
+    private toastError;
+    /** The colour model tabs and the selected model's sliders */
+    private renderChannels;
+    /** The saved colours and the [+] button */
+    private renderSwatches;
+    /** The saved colour's menu, while open */
+    private renderMenu;
+    /** The dialog asking before deleting a saved colour, while asking */
+    private renderConfirmation;
+    protected get defaultIcon(): string;
+    protected get defaultLabel(): string;
+    protected renderBody(): import("lit").TemplateResult<1> | typeof nothing;
+}