@lvl99dotcom/paintcanvas 0.4.0 → 0.6.0

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

@@ -1,7 +1,10 @@
-import { nothing } from "lit";
+import { nothing, type PropertyValues } from "lit";
 import { PcElement } from "../../base";
 import PaintCanvas, { Tool } from "../../../lib/classes/PaintCanvas";
 import type { BrushConfig } from "../../../lib/brushes/types";
+import "../PcBrushSize";
+import "../PcNumberSlider";
+import "../PcPopover";
 /** Settings varied with pen tilt by the tilt toggle */
 declare const TILT_PARAMS: readonly ["widthConfig", "heightConfig", "rotationConfig"];
 /** A setting's variation config key */
@@ -28,6 +31,8 @@ export declare const withSource: (preset: BrushConfig, params: readonly ParamKey
  * roundAngle(12.3456); // 12.35
  */
 export declare const roundAngle: (degrees: number) => number;
+/** Largest width or height the move tool's fields go to (pixels or percent) */
+export declare const MAX_MOVE_SIZE = 10000;
 /** Steps of the zoom slider, across the whole zoom range */
 export declare const ZOOM_SLIDER_STEPS = 1000;
 /**
@@ -54,13 +59,20 @@ export declare const sliderToZoom: (value: number) => number;
  */
 export declare const zoomPercent: (zoom: number) => string;
 /**
- * The bar of settings for the current tool, shown at the top of the canvas when the tool has any:
+ * The bar of settings for the current tool, shown at the top of the canvas when the tool has any. The tool's settings
+ * are at the start (part `start`); the end, on the right (part `end`), is for your own items. The `start` and `end`
+ * slots add your own items to each. (Cut, copy and paste are `<pc-clipboard-tools>`.)
  *
- * - Brush and eraser: the preset (its name and shape; shows or hides the preset menu), width, height, constrain proportions, pressure, tilt, opacity and "Configure" (fires
- *   `pc-configure-brush` with the tool, "brush" or "eraser").
+ * - Brush and eraser: the preset (its name and shape; shows or hides the preset menu), the size (`pc-brush-size`), the
+ *   size settings (a cog button that shows or hides a popover under it with pressure, tilt and focus pen mode above the
+ *   width, constrain proportions and height), opacity and "Configure" (fires `pc-configure-brush` with the tool,
+ *   "brush" or "eraser"). The size, width, height and opacity are `pc-number-slider`s: pressed and dragged right or up
+ *   to raise them, left or down to lower them, or tapped to type a value. Focus pen mode: only pens draw, and touches
+ *   are ignored while a pen is down or just lifted.
  * - Lassos: select all, and invert selection and deselect (only while there is a mask).
  * - Move, scale and rotate: width and height (in pixels or percent), constrain proportions, flip horizontal and vertical,
- *   angle (to 2 decimal places), rotate 90° left and right, and reset (undoes the whole transform).
+ *   angle (to 2 decimal places), rotate 90° left and right, and reset (undoes the whole transform). The width, height
+ *   and angle are `pc-number-slider`s.
  * - Colour sample: point sample (the pixel under the pointer) or area sample (the average of a dragged rectangle).
  * - Zoom: zoom in and out, a slider across the zoom range (logarithmic) with the zoom as a percentage, and reset (100%),
  *   all around the centre of the view.
@@ -68,7 +80,9 @@ export declare const zoomPercent: (zoom: number) => string;
  * Changes to the brush or eraser apply to the current settings only, not the preset. Styling is structural only.
  *
  * @example
- * html`<pc-tool-settings .app=${app}></pc-tool-settings>`
+ * html`<pc-tool-settings .app=${app}>
+ *   <button slot="end" @click=${share}>Share</button>
+ * </pc-tool-settings>`
  */
 export declare class PcToolSettings extends PcElement {
     static properties: {
@@ -78,6 +92,9 @@ export declare class PcToolSettings extends PcElement {
         percent: {
             state: boolean;
         };
+        sizeOpen: {
+            state: boolean;
+        };
         translations: {
             attribute: boolean;
         };
@@ -93,8 +110,24 @@ export declare class PcToolSettings extends PcElement {
     app?: PaintCanvas;
     /** Whether the move tool's width and height are in percent (of the original size) instead of pixels */
     percent: boolean;
+    /** Whether the brush or eraser's size settings (width, height, constrain proportions) are shown */
+    sizeOpen: boolean;
+    private readonly placeSizeSettings;
     private changes;
     constructor();
+    disconnectedCallback(): void;
+    /** The size settings' popover, while a brush or eraser's settings are shown */
+    private get sizePopover();
+    /** Follow the window's scrolling and resizing (or stop) */
+    private listenWhileSizeOpen;
+    /**
+     * Hide the size settings (e.g. on Escape or a press outside them), returning focus to their button if it was in them.
+     */
+    private closeSizeSettings;
+    protected willUpdate(changed: PropertyValues<this>): void;
+    protected updated(changed: PropertyValues<this>): void;
+    /** Put the opened size settings under their button, once they can be measured */
+    private showSizeSettings;
     /** Fire an event that crosses shadow DOM boundaries */
     private emit;
     /**
@@ -102,10 +135,14 @@ export declare class PcToolSettings extends PcElement {
      */
     private changeBox;
     /**
-     * Render the focus pen mode toggle, on the right of every tool's settings: while on, only pens draw, and touches are
-     * ignored while a pen is down or just lifted.
+     * Render the focus pen mode toggle, for the brush and eraser: while on, only pens draw, and touches are ignored while a
+     * pen is down or just lifted.
      */
     private renderFocusPen;
+    /**
+     * Render a setting as a named `pc-number-slider` (dragged or typed), from 1 to 256 pixels unless given another range.
+     */
+    private renderNumberField;
     /** Render the brush or eraser settings */
     private renderBrush;
     /** Render the mask settings */
@@ -115,7 +152,7 @@ export declare class PcToolSettings extends PcElement {
      * proportion when constrained.
      */
     private resizeBox;
-    /** A box side in the current unit, for an input */
+    /** A box side in the current unit (pixels or percent) */
     private sideValue;
     /** Render the move, scale and rotate settings */
     private renderMove;
@@ -123,6 +160,8 @@ export declare class PcToolSettings extends PcElement {
     private renderZoom;
     /** Render the colour sample tool's settings: point or area sampling */
     private renderColourSample;
+    /** The current tool's settings, if it has any */
+    private toolView;
     render(): import("lit").TemplateResult<1> | typeof nothing;
 }
 export {};