@lvl99dotcom/paintcanvas 0.3.0 → 0.4.0

package/dist/locales/zh-Hant.js

@@ -26,8 +26,34 @@ var zh_Hant_default = {
 	"paintCanvas.tool.zoom": "縮放",
 	"paintCanvas.tool.colourSample": "滴管",
 	"paintCanvas.tool.withShortcut": "{tool}（{shortcut}）",
+	"paintCanvas.colours.foreground": "前景色（{colour}）",
+	"paintCanvas.colours.background": "背景色（{colour}）",
+	"paintCanvas.palette.label": "調色盤",
+	"paintCanvas.palette.hex": "十六進位顏色",
+	"paintCanvas.palette.model": "色彩模式",
+	"paintCanvas.palette.rgb": "RGB",
+	"paintCanvas.palette.hsl": "HSL",
+	"paintCanvas.palette.red": "紅",
+	"paintCanvas.palette.green": "綠",
+	"paintCanvas.palette.blue": "藍",
+	"paintCanvas.palette.hue": "色相",
+	"paintCanvas.palette.saturation": "飽和度",
+	"paintCanvas.palette.lightness": "亮度",
+	"paintCanvas.palette.saved": "已儲存的顏色",
+	"paintCanvas.palette.add": "將 {colour} 儲存到調色盤",
+	"paintCanvas.palette.colourActions": "{colour} 的操作",
+	"paintCanvas.palette.deleteColour": "刪除顏色",
+	"paintCanvas.palette.deleteMessage": "要刪除這個顏色嗎？",
+	"paintCanvas.palette.deleteConfirm": "是，刪除顏色",
+	"paintCanvas.palette.import": "匯入",
+	"paintCanvas.palette.export": "匯出",
+	"paintCanvas.palette.importFile": "匯入調色盤檔案",
+	"paintCanvas.palette.imported.one": "已新增 {count} 個顏色",
+	"paintCanvas.palette.imported.other": "已新增 {count} 個顏色",
+	"paintCanvas.palette.fileIncompatible": "不相容的調色盤 JSON 檔案",
+	"paintCanvas.palette.fileReadFailed": "無法讀取調色盤 JSON 檔案",
+	"paintCanvas.palette.exportFailed": "匯出調色盤 JSON 檔案時發生錯誤",
 	"paintCanvas.toolbar.label": "工具",
-	"paintCanvas.toolbar.currentColour": "目前顏色",
 	"paintCanvas.toolbar.layers": "圖層",
 	"paintCanvas.toolbar.menu": "選單",
 	"paintCanvas.toolbar.undoWithShortcut": "復原（{shortcut}）",
@@ -168,6 +194,66 @@ var zh_Hant_default = {
 	"paintCanvas.autosave.elsewhereMessage": "此畫作已在另一個視窗或分頁中開啟，一次只能在一個視窗中繪畫。選擇「在此繪畫」即可在此視窗繼續（另一個視窗將停止）。",
 	"paintCanvas.autosave.takeOver": "在此繪畫",
 	"paintCanvas.autosave.failed": "無法在此瀏覽器中儲存畫作",
+	"paintCanvas.settings.saveFailed": "無法在此瀏覽器中保存你的設定",
+	"paintCanvas.shortcuts.title": "鍵盤快速鍵",
+	"paintCanvas.shortcuts.recordHint": "按下要使用的按鍵",
+	"paintCanvas.shortcuts.none": "無",
+	"paintCanvas.shortcuts.remove": "刪除「{action}」的快速鍵",
+	"paintCanvas.shortcuts.fixed": "無法變更",
+	"paintCanvas.shortcuts.fixedUsed": "{keys} 已用於「{action}」，無法變更",
+	"paintCanvas.shortcuts.moved": "{keys} 已從「{from}」移到「{to}」",
+	"paintCanvas.shortcuts.reset": "恢復預設值",
+	"paintCanvas.shortcuts.wasReset": "已將鍵盤快速鍵恢復為預設值",
+	"paintCanvas.shortcuts.group.tools": "工具",
+	"paintCanvas.shortcuts.group.brushes": "筆刷與橡皮擦",
+	"paintCanvas.shortcuts.group.clipboard": "剪貼簿",
+	"paintCanvas.shortcuts.group.masking": "遮罩",
+	"paintCanvas.shortcuts.group.fills": "填色與顏色",
+	"paintCanvas.shortcuts.group.viewport": "檢視",
+	"paintCanvas.shortcuts.group.layers": "圖層",
+	"paintCanvas.shortcuts.group.history": "歷史紀錄",
+	"paintCanvas.shortcuts.group.general": "一般",
+	"paintCanvas.shortcuts.pan": "按住時平移（放開後回到上一個工具）",
+	"paintCanvas.shortcuts.tool-move": "移動",
+	"paintCanvas.shortcuts.tool-brush": "筆刷",
+	"paintCanvas.shortcuts.tool-eraser": "橡皮擦",
+	"paintCanvas.shortcuts.tool-rectangle-mask": "矩形遮罩",
+	"paintCanvas.shortcuts.tool-circle-mask": "圓形遮罩",
+	"paintCanvas.shortcuts.tool-polygon-mask": "多邊形遮罩",
+	"paintCanvas.shortcuts.tool-freehand-mask": "手繪遮罩",
+	"paintCanvas.shortcuts.tool-colour-sample": "滴管",
+	"paintCanvas.shortcuts.tool-zoom": "縮放",
+	"paintCanvas.shortcuts.brush-bigger": "放大尺寸",
+	"paintCanvas.shortcuts.brush-smaller": "縮小尺寸",
+	"paintCanvas.shortcuts.brush-more-opaque": "提高不透明度",
+	"paintCanvas.shortcuts.brush-less-opaque": "降低不透明度",
+	"paintCanvas.shortcuts.cut": "剪下",
+	"paintCanvas.shortcuts.copy": "複製",
+	"paintCanvas.shortcuts.paste": "貼上",
+	"paintCanvas.shortcuts.select-all": "全選",
+	"paintCanvas.shortcuts.invert-selection": "反轉選取範圍",
+	"paintCanvas.shortcuts.deselect": "取消選取",
+	"paintCanvas.shortcuts.fill-foreground": "以前景色填色",
+	"paintCanvas.shortcuts.fill-background": "以背景色填色",
+	"paintCanvas.shortcuts.swap-colours": "交換前景色與背景色",
+	"paintCanvas.shortcuts.zoom-in": "放大",
+	"paintCanvas.shortcuts.zoom-out": "縮小",
+	"paintCanvas.shortcuts.reset-zoom": "縮放至 100%",
+	"paintCanvas.shortcuts.toggle-interface": "顯示或隱藏介面",
+	"paintCanvas.shortcuts.save": "儲存為 PNG",
+	"paintCanvas.shortcuts.undo": "復原",
+	"paintCanvas.shortcuts.redo": "重做",
+	"paintCanvas.shortcuts.delete": "刪除遮罩區域",
+	"paintCanvas.shortcuts.cancel": "取消",
+	"paintCanvas.shortcuts.commit": "套用",
+	"paintCanvas.shortcuts.layerOpacity": "將圖層不透明度設為 {percent}%",
+	"paintCanvas.settings.import": "匯入設定",
+	"paintCanvas.settings.export": "匯出設定",
+	"paintCanvas.settings.importFile": "匯入設定檔",
+	"paintCanvas.settings.imported": "已匯入設定",
+	"paintCanvas.settings.fileIncompatible": "不相容的設定 JSON 檔案",
+	"paintCanvas.settings.fileReadFailed": "無法讀取設定 JSON 檔案",
+	"paintCanvas.settings.exportFailed": "匯出設定 JSON 檔案時發生錯誤",
 	"paintCanvas.stats.label": "畫布詳細資料",
 	"paintCanvas.stats.size": "畫布：{width} × {height} 像素",
 	"paintCanvas.stats.zoom": "縮放：{zoom}",

package/dist/package.js

@@ -1,3 +1,3 @@
 // package.json
-var version = "0.3.0";
+var version = "0.4.0";
 export { version };

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

@@ -1,42 +1,42 @@
 import { PcElement } from "../../base";
 import PaintCanvas from "../../../lib/classes/PaintCanvas";
+import SettingsAutosave from "../../../lib/classes/SettingsAutosave";
 import type { BrushConfig } from "../../../lib/brushes/types";
 import { type SaveMethod } from "../../../lib/rendering/screenshot";
 import { type InputKind, type LayoutState } from "../../layout";
-import type { PcPanel } from "../PcPanel";
 import "../PcPanel";
 import "../PcToolbar";
 import "../PcToolSettings";
 import "../PcCanvas";
 import "../PcCanvasMap";
-import "../PcBrushMenu";
-import "../PcLayersMenu";
+import "../PcPanelBrushes";
+import "../PcPanelLayers";
 import "../PcBrushConfig";
 import "../PcStats";
+import "../PcPanelColours";
 import "../PcDialog";
-/** A side of the layout */
-type Side = "left" | "right";
 /**
  * A ready-made painting app: the drawing elements arranged around the canvas, sized to its container (not the
  * window), with slots to add or replace content:
  *
  * - `header`: across the top (empty by default)
- * - `left`: `<pc-toolbar>` by default
- * - `top`: `<pc-tool-settings>` (for tools that have settings) by default
- * - `right`: empty by default (e.g. a `<pc-panel>` with a layers menu or chat)
+ * - `left`: `<pc-toolbar>` (a pane) by default
+ * - `top`: a horizontal `<pc-pane>` with `<pc-tool-settings>` (for tools that have settings) by default
+ * - `right`: a `<pc-pane>` with `<pc-panel-layers>` by default
  * - `center`: `<pc-canvas>` by default
  * - `overlay`: drawn over the canvas; `<pc-canvas-map>` by default
  * - `bottom`: under the canvas (empty by default)
  * - `footer`: across the bottom; `<pc-stats>` by default
- * - `menu`: the app menu the toolbar's menu button opens (the button shows only with a menu)
+ * - `menu`: the app menu the toolbar's menu button opens, shown in a `<pc-panel>` (the button shows only with a menu)
  *
  * Content given for a slot replaces its default; an empty element clears it. Empty slots take no space. Hiding the
- * interface (Tab key) leaves only the canvas and overlay. A `<pc-layers-menu>` given in a side (e.g. in a `<pc-panel>`)
- * replaces the toolbar's layers menu button.
+ * interface (Tab key) leaves only the canvas and overlay. While a side has a `<pc-panel-layers>` (as the right side
+ * does by default), the toolbar has no layers menu button.
  *
  * Each side has a mode, chosen by the layout's width from `left-modes` and `right-modes` (default `"docked,
- * rail@600"`): `docked` beside the canvas; `rail`, a column of buttons (one per `<pc-panel>`) that open each panel over
- * the canvas; or `floating`, the side over the canvas as a palette that collapses to a button.
+ * rail@600"`), which the layout gives the side's `<pc-pane>`s (see `PcPane`): `docked` beside the canvas; `rail`, a
+ * column of buttons (one per panel) that open each panel over the canvas; or `floating`, the pane over the canvas as a
+ * box that collapses to a button. Give side content in a `<pc-pane>` to have it follow the side's mode.
  *
  * Reports its state for styling as attributes (`narrow`, `input="pen|touch|mouse"`, `ui-hidden`, `left-mode`,
  * `right-mode`) and as `pc-state-change` events (see `LayoutState`). Creates its own canvas unless given one, and
@@ -46,10 +46,16 @@ type Side = "left" | "right";
  * reloading the page (see `LayerAutosave`). While another window is drawing on it, the layout is blocked by a message
  * that offers to draw here instead. Fires `pc-toast` when the drawing can't be loaded or saved.
  *
+ * With a `settings-store` name, the user's app settings (input settings, keyboard shortcuts, colour palette and
+ * colours) are kept in the browser under that name (see `SettingsAutosave`). Fires `pc-toast` when they can't be.
+ *
  * @example
  * html`<paint-canvas style="height: 600px"></paint-canvas>`
  * html`<paint-canvas .app=${canvas} right-modes="docked, rail@800">
- *   <pc-panel slot="right" icon="layers" label="Layers"><pc-layers-menu .app=${canvas}></pc-layers-menu></pc-panel>
+ *   <pc-pane slot="right">
+ *     <pc-panel-layers .app=${canvas}></pc-panel-layers>
+ *     <pc-panel icon="chat" label="Chat"><my-chat></my-chat></pc-panel>
+ *   </pc-pane>
  * </paint-canvas>`
  */
 export declare class PaintCanvasElement extends PcElement {
@@ -83,6 +89,10 @@ export declare class PaintCanvasElement extends PcElement {
         store: {
             type: StringConstructor;
         };
+        settingsStore: {
+            type: StringConstructor;
+            attribute: string;
+        };
         width: {
             state: boolean;
         };
@@ -92,12 +102,6 @@ export declare class PaintCanvasElement extends PcElement {
         configuring: {
             state: boolean;
         };
-        collapsed: {
-            state: boolean;
-        };
-        openPanel: {
-            state: boolean;
-        };
         translations: {
             attribute: boolean;
         };
@@ -126,6 +130,8 @@ export declare class PaintCanvasElement extends PcElement {
     shortcuts: boolean;
     /** Name to keep the user's layers under in the browser, so the drawing survives reloading the page (none by default) */
     store?: string;
+    /** Name to keep the user's app settings under in the browser (none by default) */
+    settingsStore?: string;
     /** The layout's width in CSS pixels */
     width: number;
     /** The input being used now */
@@ -136,10 +142,6 @@ export declare class PaintCanvasElement extends PcElement {
         config: BrushConfig;
         editingId?: string;
     };
-    /** Which floating sides are collapsed to a button */
-    collapsed: Record<Side, boolean>;
-    /** The panel open from a rail, if any */
-    openPanel?: PcPanel;
     /** Saves files (replaceable for tests) */
     saveFile: (blob: Blob, name: string) => Promise<SaveMethod | undefined>;
     private changes;
@@ -147,10 +149,10 @@ export declare class PaintCanvasElement extends PcElement {
     private ownAutosave?;
     /** The autosave whose errors are shown */
     private watchedAutosave?;
+    /** Keeps the app settings under the `settings-store` name, if any */
+    private ownSettingsAutosave?;
     /** Whether drawing was blocked when shortcuts were last watched */
     private blockedShortcuts;
-    /** The panels in each side's slot */
-    private panels;
     /** Whether each side's slot has a layers menu (the toolbar's isn't needed then) */
     private sideLayers;
     /** Whether the implementer gave a menu */
@@ -163,15 +165,13 @@ export declare class PaintCanvasElement extends PcElement {
     private reported?;
     /** Space the floating sides cover over the canvas */
     private floatingInsets;
-    /** The rail button that opened the open panel, to return focus to */
-    private opener?;
     private readonly resizeObserver?;
-    private readonly panelObserver;
     private readonly onPointerDown;
     private readonly onAutosaveError;
+    private readonly onSettingsAutosaveError;
     private readonly onShortcut;
     private readonly onDocumentPointerDown;
-    private readonly onKeyDown;
+    private readonly onPaneCollapse;
     constructor();
     /** Whether another window is drawing on the stored drawing, so this one is blocked */
     get blocked(): boolean;
@@ -183,6 +183,10 @@ export declare class PaintCanvasElement extends PcElement {
     disconnectedCallback(): void;
     protected willUpdate(changed: Map<PropertyKey, unknown>): void;
     protected updated(): void;
+    /** The panes in a side: the default one, or those given for it */
+    private panesIn;
+    /** Show each side's panes in the side's mode, facing the canvas */
+    private setPaneModes;
     /** Keep the canvas clear of floating sides when fitting it */
     private measureFloatingSides;
     /**
@@ -190,6 +194,13 @@ export declare class PaintCanvasElement extends PcElement {
      * previous canvas). An autosave the implementer started is left alone when there's no name.
      */
     private useStore;
+    /** Keeps the app settings under the `settings-store` name, if any (e.g. to wait until they are restored with `ready`) */
+    get settingsAutosave(): SettingsAutosave | undefined;
+    /**
+     * Keep the canvas's app settings under the `settings-store` name, stopping the previous settings autosave (which
+     * saves any change waiting to be saved).
+     */
+    private useSettingsStore;
     /** Show errors from the canvas's current autosave */
     private watchAutosaveErrors;
     /** Handle keyboard shortcuts for the current canvas, if asked to (not while blocked) */
@@ -212,32 +223,24 @@ export declare class PaintCanvasElement extends PcElement {
      * Open the configuration window to make a new preset, starting from the current brush or eraser settings.
      */
     newPreset(kind: "brush" | "eraser"): void;
-    /** Which side a panel is in */
-    private sideOf;
-    /**
-     * Open a panel from its rail button (closing any other), or close it if it's open. Focus moves into the panel.
-     */
-    togglePanel(panel: PcPanel, opener?: HTMLElement): void;
-    /**
-     * Close the panel open from a rail, moving focus back to its rail button if asked.
-     */
-    closePanel(returnFocus: boolean): void;
     /** Follow which slots have content given (their defaults aren't needed) */
     private onSlotChange;
     /** A slot, with its default content unless content was given for it */
     private slotWithDefault;
-    /** Follow the panels given for a side, and whether it has a layers menu */
+    /** Follow whether a side given content has a layers menu */
     private onSideSlotChange;
     /** Follow whether a menu was given */
     private onMenuSlotChange;
     /** Whether a side has a layers menu, replacing the toolbar's */
     private get layersInSide();
-    /** The toolbar shown on the left unless the implementer gives other content */
-    private renderToolbar;
-    /** A side's rail buttons, one per panel */
-    private renderRail;
-    /** A side, in its mode */
+    /** A side's default content: the toolbar on the left, and the layers on the right */
+    private renderSideDefault;
+    /** A side: its panes, in its mode (set on them after rendering) */
     private renderSide;
+    /**
+     * Close the colour palette on a press outside it and the colours that open it.
+     */
+    private closePaletteOutside;
     /** The menus the toolbar opens, floating over the canvas beside it */
     private renderPanels;
     /** The brush configuration window, while open */
@@ -246,4 +249,3 @@ export declare class PaintCanvasElement extends PcElement {
     private renderBlocked;
     render(): import("lit").TemplateResult<1>;
 }
-export {};