@funnest/charts-ui 0.6.26 → 0.6.27

package/dist/context.d.ts

@@ -20,6 +20,8 @@ export interface UiState {
     drawingTool: DrawingType | null;
     selection: Drawing | null;
     drawingCount: number;
+    /** Every drawing of this pane is locked (the drawing bar's lock-all shows as pressed). */
+    drawingsLocked: boolean;
     /** Narrow screens: the drawing bar is hidden until toggled from the toolbar. */
     drawbarOpen: boolean;
     magnet: boolean;
@@ -37,6 +39,12 @@ export interface UiState {
     favoriteIntervals: Resolution[];
     /** Desktop: the left drawing bar folded away (a small tab brings it back). */
     drawbarCollapsed: boolean;
+    /** Tools pinned at the top of the drawing bar (★ in a tool list). */
+    favoriteTools: DrawingType[];
+    /** 연속 그리기: tools stay armed after each drawing. */
+    keepDrawing: boolean;
+    /** Every drawing hidden (the drawing bar's 👁). */
+    drawingsHidden: boolean;
     canUndo: boolean;
     canRedo: boolean;
     compares: CompareInfo[];
@@ -127,6 +135,10 @@ export interface WidgetContext {
     selectSymbol(symbol: string): void;
     selectResolution(resolution: Resolution): void;
     toggleFavoriteInterval(resolution: Resolution): void;
+    toggleFavoriteTool(tool: DrawingType): void;
+    setKeepDrawing(on: boolean): void;
+    /** Hides or shows the drawings of every pane. */
+    setDrawingsHidden(hidden: boolean): void;
     setSearchOpen(open: boolean, target?: 'symbol' | 'compare'): void;
     screenshot(): void;
     toggleFullscreen(): void;

package/dist/i18n.d.ts

@@ -29,6 +29,14 @@ export declare const STRINGS: {
         horizontal: string;
         fibonacci: string;
         removeAll: string;
+        keepDrawing: string;
+        lockAll: string;
+        unlockAll: string;
+        hideAll: string;
+        showAll: string;
+        favoriteTool: string;
+        unfavoriteTool: string;
+        fontSize: string;
         collapseDrawbar: string;
         chartSettings: string;
         settingsTheme: string;
@@ -176,6 +184,14 @@ export declare const STRINGS: {
         horizontal: string;
         fibonacci: string;
         removeAll: string;
+        keepDrawing: string;
+        lockAll: string;
+        unlockAll: string;
+        hideAll: string;
+        showAll: string;
+        favoriteTool: string;
+        unfavoriteTool: string;
+        fontSize: string;
         collapseDrawbar: string;
         chartSettings: string;
         settingsTheme: string;

package/dist/icons.d.ts

@@ -61,5 +61,10 @@ export declare const PaletteIcon: () => import("preact").JSX.Element;
 export declare const LockIcon: ({ open }: {
     open?: boolean;
 }) => import("preact").JSX.Element;
+/** 연속 그리기: a pencil that keeps going. */
+export declare const KeepDrawingIcon: () => import("preact").JSX.Element;
+export declare const DrawingsEyeIcon: ({ off }: {
+    off?: boolean;
+}) => import("preact").JSX.Element;
 export declare const CopyIcon: () => import("preact").JSX.Element;
 export declare const TextIcon: () => import("preact").JSX.Element;

package/dist/index.js

@@ -455,6 +455,14 @@ var STRINGS = {
     horizontal: "\uC218\uD3C9\uC120",
     fibonacci: "\uD53C\uBCF4\uB098\uCE58 \uB418\uB3CC\uB9BC",
     removeAll: "\uADF8\uB9AC\uAE30 \uBAA8\uB450 \uC0AD\uC81C",
+    keepDrawing: "\uC5F0\uC18D \uADF8\uB9AC\uAE30 (\uB3C4\uAD6C \uC720\uC9C0)",
+    lockAll: "\uADF8\uB9BC \uBAA8\uB450 \uC7A0\uADF8\uAE30",
+    unlockAll: "\uADF8\uB9BC \uBAA8\uB450 \uC7A0\uAE08 \uD480\uAE30",
+    hideAll: "\uADF8\uB9BC \uBAA8\uB450 \uC228\uAE30\uAE30",
+    showAll: "\uADF8\uB9BC \uBAA8\uB450 \uBCF4\uC774\uAE30",
+    favoriteTool: "\uC990\uACA8\uCC3E\uAE30\uC5D0 \uCD94\uAC00",
+    unfavoriteTool: "\uC990\uACA8\uCC3E\uAE30\uC5D0\uC11C \uBE7C\uAE30",
+    fontSize: "\uAE00\uC790 \uD06C\uAE30",
     collapseDrawbar: "\uADF8\uB9AC\uAE30 \uB3C4\uAD6C \uC811\uAE30",
     chartSettings: "\uCC28\uD2B8 \uC124\uC815",
     settingsTheme: "\uD14C\uB9C8",
@@ -604,6 +612,14 @@ var STRINGS = {
     horizontal: "Horizontal line",
     fibonacci: "Fib retracement",
     removeAll: "Remove all drawings",
+    keepDrawing: "Stay in drawing mode",
+    lockAll: "Lock all drawings",
+    unlockAll: "Unlock all drawings",
+    hideAll: "Hide all drawings",
+    showAll: "Show all drawings",
+    favoriteTool: "Add to favorites",
+    unfavoriteTool: "Remove from favorites",
+    fontSize: "Text size",
     collapseDrawbar: "Hide drawing tools",
     chartSettings: "Chart settings",
     settingsTheme: "Theme",
@@ -888,6 +904,15 @@ var LockIcon = ({ open = false }) => /* @__PURE__ */ a3(Icon, { children: [
   /* @__PURE__ */ a3("rect", { x: "4.5", y: "9", width: "11", height: "8", rx: "1.8" }),
   /* @__PURE__ */ a3("path", { d: open ? "M7 9V6.5a3 3 0 0 1 5.8-1" : "M7 9V6.5a3 3 0 0 1 6 0V9" })
 ] });
+var KeepDrawingIcon = () => /* @__PURE__ */ a3(Icon, { children: [
+  /* @__PURE__ */ a3("path", { d: "M3.5 13.5 11 6l3 3-7.5 7.5H3.5z" }),
+  /* @__PURE__ */ a3("path", { d: "M13 3.5a3.5 3.5 0 0 1 3.5 3.5M15 2l1.5 1.5L15 5" })
+] });
+var DrawingsEyeIcon = ({ off = false }) => /* @__PURE__ */ a3(Icon, { children: [
+  /* @__PURE__ */ a3("path", { d: "M2 10s3-5.5 8-5.5S18 10 18 10s-3 5.5-8 5.5S2 10 2 10z" }),
+  /* @__PURE__ */ a3("circle", { cx: "10", cy: "10", r: "2.3" }),
+  off && /* @__PURE__ */ a3("path", { d: "M3.5 3.5l13 13" })
+] });
 var CopyIcon = () => /* @__PURE__ */ a3(Icon, { children: [
   /* @__PURE__ */ a3("rect", { x: "7", y: "7", width: "9.5", height: "9.5", rx: "1.8" }),
   /* @__PURE__ */ a3("path", { d: "M13 7V5a1.5 1.5 0 0 0-1.5-1.5h-6A1.5 1.5 0 0 0 4 5v6a1.5 1.5 0 0 0 1.5 1.5H7" })
@@ -990,9 +1015,22 @@ function ToolGroup({
       const heading = section && section !== tools[i3 - 1]?.section?.[s3.locale];
       return /* @__PURE__ */ a3($, { children: [
         heading && /* @__PURE__ */ a3("div", { class: `fnc-tool-section${i3 > 0 ? " is-after" : ""}`, role: "presentation", children: section }),
-        /* @__PURE__ */ a3("button", { class: "fnc-menu-item", role: "menuitemradio", "aria-checked": def.type === current.type, onClick: () => pick(def), children: [
-          /* @__PURE__ */ a3(ToolIcon, { def, locale: s3.locale }),
-          /* @__PURE__ */ a3("span", { children: def.name[s3.locale] })
+        /* @__PURE__ */ a3("div", { class: "fnc-tool-row", children: [
+          /* @__PURE__ */ a3("button", { class: "fnc-menu-item", role: "menuitemradio", "aria-checked": def.type === current.type, onClick: () => pick(def), children: [
+            /* @__PURE__ */ a3(ToolIcon, { def, locale: s3.locale }),
+            /* @__PURE__ */ a3("span", { children: def.name[s3.locale] })
+          ] }),
+          /* @__PURE__ */ a3(
+            "button",
+            {
+              class: "fnc-tool-fav",
+              "aria-pressed": s3.favoriteTools.includes(def.type),
+              "aria-label": `${s3.favoriteTools.includes(def.type) ? t3.unfavoriteTool : t3.favoriteTool}: ${def.name[s3.locale]}`,
+              "data-tip": s3.favoriteTools.includes(def.type) ? t3.unfavoriteTool : t3.favoriteTool,
+              onClick: () => ctx.toggleFavoriteTool(def.type),
+              children: /* @__PURE__ */ a3(StarIcon, { filled: s3.favoriteTools.includes(def.type) })
+            }
+          )
         ] })
       ] }, def.type);
     }) })
@@ -1017,7 +1055,11 @@ function DrawingToolbar({ ctx }) {
     ro.observe(el);
     return () => ro.disconnect();
   }, []);
-  const groups = toolGroups(ctx.chart.drawingDefinitions());
+  const defs = ctx.chart.drawingDefinitions();
+  const groups = toolGroups(defs);
+  const favorites = s3.favoriteTools.map((type) => defs.find((d3) => d3.type === type)).filter((d3) => !!d3);
+  const allLocked = s3.drawingsLocked;
+  const lockAll = () => ctx.chart.setDrawings(ctx.chart.getDrawings().map((d3) => ({ ...d3, style: { ...d3.style, locked: !allLocked } })));
   const pick = (tool) => {
     ctx.chart.setDrawingTool(tool);
     if (tool && ctx.store.get().drawbarOpen) ctx.store.set({ drawbarOpen: false });
@@ -1036,6 +1078,21 @@ function DrawingToolbar({ ctx }) {
         "data-collapsed": s3.drawbarCollapsed,
         children: [
           /* @__PURE__ */ a3("button", { class: "fnc-btn", "data-tip": t3.cursor, "aria-label": t3.cursor, "aria-pressed": s3.drawingTool === null, onClick: () => pick(null), children: /* @__PURE__ */ a3(CursorIcon, {}) }),
+          favorites.length > 0 && /* @__PURE__ */ a3($, { children: [
+            favorites.map((def) => /* @__PURE__ */ a3(
+              "button",
+              {
+                class: "fnc-btn fnc-fav-tool",
+                "data-tip": def.name[s3.locale],
+                "aria-label": def.name[s3.locale],
+                "aria-pressed": s3.drawingTool === def.type,
+                onClick: () => pick(s3.drawingTool === def.type ? null : def.type),
+                children: /* @__PURE__ */ a3(ToolIcon, { def, locale: s3.locale })
+              },
+              `fav-${def.type}`
+            )),
+            /* @__PURE__ */ a3("div", { class: "fnc-hsep" })
+          ] }),
           groups.map(([key, tools]) => /* @__PURE__ */ a3(
             ToolGroup,
             {
@@ -1059,6 +1116,31 @@ function DrawingToolbar({ ctx }) {
               children: /* @__PURE__ */ a3(MagnetIcon, {})
             }
           ),
+          /* @__PURE__ */ a3("button", { class: "fnc-btn", "data-tip": t3.keepDrawing, "aria-label": t3.keepDrawing, "aria-pressed": s3.keepDrawing, onClick: () => ctx.setKeepDrawing(!s3.keepDrawing), children: /* @__PURE__ */ a3(KeepDrawingIcon, {}) }),
+          /* @__PURE__ */ a3(
+            "button",
+            {
+              class: "fnc-btn",
+              "data-tip": allLocked ? t3.unlockAll : t3.lockAll,
+              "aria-label": allLocked ? t3.unlockAll : t3.lockAll,
+              "aria-pressed": allLocked,
+              disabled: s3.drawingCount === 0,
+              onClick: lockAll,
+              children: /* @__PURE__ */ a3(LockIcon, { open: !allLocked })
+            }
+          ),
+          /* @__PURE__ */ a3(
+            "button",
+            {
+              class: "fnc-btn",
+              "data-tip": s3.drawingsHidden ? t3.showAll : t3.hideAll,
+              "aria-label": s3.drawingsHidden ? t3.showAll : t3.hideAll,
+              "aria-pressed": s3.drawingsHidden,
+              disabled: s3.drawingCount === 0 && !s3.drawingsHidden,
+              onClick: () => ctx.setDrawingsHidden(!s3.drawingsHidden),
+              children: /* @__PURE__ */ a3(DrawingsEyeIcon, { off: s3.drawingsHidden })
+            }
+          ),
           /* @__PURE__ */ a3(
             "button",
             {
@@ -1088,6 +1170,7 @@ function DrawingToolbar({ ctx }) {
 }
 var SWATCHES = ["#3182F6", "#F04452", "#12B886", "#FF9F0A", "#7048E8"];
 var WIDTHS = [1, 2, 3, 4];
+var FONT_SIZES = [10, 12, 14, 16, 20, 24, 32];
 var DASH_ORDER = ["solid", "dashed", "dotted"];
 var RECENT_KEY = "fnc-drawing-colors";
 var POS_KEY = "fnc-selbar-pos";
@@ -1260,6 +1343,25 @@ function SelectionBar({ ctx }) {
         onKeyDown: (e3) => e3.stopPropagation()
       }
     ),
+    def?.text && /* @__PURE__ */ a3("div", { class: "fnc-selbar-menu", children: [
+      /* @__PURE__ */ a3("button", { class: "fnc-btn fnc-selbar-font", "data-tip": t3.fontSize, "aria-label": t3.fontSize, "aria-expanded": menu === "font", onClick: () => setMenu(menu === "font" ? null : "font"), children: style.fontSize ?? 14 }),
+      menu === "font" && /* @__PURE__ */ a3("div", { class: "fnc-menu fnc-selbar-pop", role: "menu", children: FONT_SIZES.map((size) => /* @__PURE__ */ a3(
+        "button",
+        {
+          class: "fnc-menu-item",
+          role: "menuitemradio",
+          "aria-checked": (style.fontSize ?? 14) === size,
+          onClick: () => {
+            setStyle({ fontSize: size });
+            setMenu(null);
+          },
+          children: /* @__PURE__ */ a3("span", { children: [
+            size,
+            "px"
+          ] })
+        }
+      )) })
+    ] }),
     /* @__PURE__ */ a3("div", { class: "fnc-sep" }),
     /* @__PURE__ */ a3("button", { class: "fnc-btn", "data-tip": locked ? t3.unlock : t3.lock, "aria-label": locked ? t3.unlock : t3.lock, "aria-pressed": locked, onClick: () => setStyle({ locked: !locked }), children: /* @__PURE__ */ a3(LockIcon, { open: !locked }) }),
     /* @__PURE__ */ a3(
@@ -3959,6 +4061,14 @@ var CSS = (
 .fnc-tool-section { padding: 8px 10px 4px; color: var(--fnc-text-2); font-size: 11px; font-weight: 600; }
 .fnc-tool-section.is-after { margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--fnc-border); }
 .fnc-tool-menu .fnc-menu-item { white-space: nowrap; }
+.fnc-tool-row { position: relative; display: flex; align-items: center; }
+.fnc-tool-row .fnc-menu-item { flex: 1; padding-right: 36px; }
+.fnc-tool-fav { position: absolute; right: 6px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 6px; color: var(--fnc-text-2); opacity: 0; cursor: pointer; }
+.fnc-tool-row:hover .fnc-tool-fav, .fnc-tool-fav:focus-visible, .fnc-tool-fav[aria-pressed='true'] { opacity: 1; }
+.fnc-tool-fav[aria-pressed='true'] { color: #FFB400; }
+.fnc-tool-fav:hover { background: var(--fnc-surface); color: var(--fnc-text); }
+@media (hover: none) { .fnc-tool-fav { opacity: 1; } }
+.fnc-selbar-font { min-width: 32px; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
 .fnc-tool-letter { font-size: 13px; font-weight: 700; }
 .fnc-svg-icon { display: inline-flex; }
 .fnc-svg-icon svg { width: 20px; height: 20px; }
@@ -4215,6 +4325,9 @@ function createShell(container, options) {
   darkQuery?.addEventListener?.("change", onSchemeChange);
   let favoriteIntervals = storage.get("favorite-intervals", [...options.favoriteIntervals]);
   let drawbarCollapsed = storage.get("drawbar-collapsed", false);
+  let favoriteTools = storage.get("favorite-tools", []);
+  let keepDrawing = storage.get("keep-drawing", false);
+  let drawingDefaults = storage.get("drawing-defaults", {});
   const broadcast = (patch) => {
     for (const p3 of panes()) p3.store.set(patch);
   };
@@ -4235,7 +4348,27 @@ function createShell(container, options) {
     slots,
     storage,
     theme: () => theme,
-    sharedState: () => ({ fullscreen: isFullscreen(), favoriteIntervals, drawbarCollapsed }),
+    sharedState: () => ({ fullscreen: isFullscreen(), favoriteIntervals, drawbarCollapsed, favoriteTools, keepDrawing }),
+    drawingDefaults: () => drawingDefaults,
+    saveDrawingDefaults: (defaults) => {
+      drawingDefaults = defaults;
+      storage.set("drawing-defaults", defaults);
+      for (const p3 of panes()) p3.chart.setDrawingDefaults(defaults);
+    },
+    toggleFavoriteTool: (tool) => {
+      favoriteTools = favoriteTools.includes(tool) ? favoriteTools.filter((x2) => x2 !== tool) : [...favoriteTools, tool];
+      storage.set("favorite-tools", favoriteTools);
+      broadcast({ favoriteTools });
+    },
+    setKeepDrawing: (on) => {
+      keepDrawing = on;
+      storage.set("keep-drawing", on);
+      for (const p3 of panes()) p3.chart.setKeepDrawingTool(on);
+      broadcast({ keepDrawing });
+    },
+    setDrawingsHidden: (hidden) => {
+      for (const p3 of panes()) p3.chart.setDrawingsHidden(hidden);
+    },
     setPanes: (get) => {
       panes = get;
     },
@@ -4335,6 +4468,8 @@ function createPane(shell, config) {
     displayTimezone: config.displayTimezone
   });
   chart.setChartType(config.chartType);
+  chart.setKeepDrawingTool(shell.sharedState().keepDrawing);
+  chart.setDrawingDefaults(shell.drawingDefaults());
   const canvasVars = (s3) => {
     const muted = s3.textColor && /^#[0-9a-f]{6}$/i.test(s3.textColor) ? `${s3.textColor}99` : null;
     const vars = [
@@ -4374,8 +4509,10 @@ function createPane(shell, config) {
     drawingTool: null,
     selection: null,
     drawingCount: 0,
+    drawingsLocked: false,
     drawbarOpen: false,
     magnet: chart.magnetEnabled,
+    drawingsHidden: chart.drawingsHidden,
     indicators: chart.getIndicators(),
     dialog: null,
     ...shell.sharedState()
@@ -4389,9 +4526,12 @@ function createPane(shell, config) {
     chart.on("dataChange", syncRealtime),
     chart.on("drawingToolChange", (drawingTool) => store.set({ drawingTool })),
     chart.on("selectionChange", (selection) => store.set({ selection })),
-    chart.on("drawingsChange", (drawings) => store.set({ drawingCount: drawings.length })),
+    chart.on("drawingsChange", (drawings) => store.set({ drawingCount: drawings.length, drawingsLocked: drawings.length > 0 && drawings.every((d3) => d3.style?.locked) })),
     chart.on("indicatorsChange", (indicators) => store.set({ indicators })),
     chart.on("magnetChange", (magnet) => store.set({ magnet })),
+    chart.on("drawingsHiddenChange", (drawingsHidden) => store.set({ drawingsHidden })),
+    // A color or style picked for a drawing: remembered for the tool, in every pane.
+    chart.on("drawingDefaultsChange", (defaults) => shell.saveDrawingDefaults(defaults)),
     chart.on("chartTypeChange", (chartType) => store.set({ chartType })),
     chart.on("historyChange", ({ canUndo, canRedo }) => store.set({ canUndo, canRedo })),
     chart.on("comparesChange", (compares) => store.set({ compares })),
@@ -4433,6 +4573,9 @@ function createPane(shell, config) {
       if (current) void load(current.symbol, res);
     },
     toggleFavoriteInterval: shell.toggleFavoriteInterval,
+    toggleFavoriteTool: shell.toggleFavoriteTool,
+    setKeepDrawing: shell.setKeepDrawing,
+    setDrawingsHidden: shell.setDrawingsHidden,
     setSearchOpen: (open, target = "symbol") => store.set(open ? { searchOpen: true, searchTarget: target } : { searchOpen: false }),
     screenshot: () => {
       const s3 = store.get();

package/dist/shell.d.ts

@@ -1,4 +1,4 @@
-import { type DirectionPreset, type Resolution, type ThemeTokens } from '@funnest/charts';
+import { type DirectionPreset, type DrawingDefaults, type DrawingType, type Resolution, type ThemeTokens } from '@funnest/charts';
 import type { UiState } from './context';
 import { type WidgetStorage } from './storage';
 import type { Store } from './store';
@@ -30,6 +30,9 @@ export interface ShellPane {
     readonly store: Store<UiState>;
     readonly chart: {
         setTheme(theme: Partial<ThemeTokens>): void;
+        setKeepDrawingTool(on: boolean): void;
+        setDrawingsHidden(hidden: boolean): void;
+        setDrawingDefaults(defaults: DrawingDefaults): void;
     };
 }
 export interface ShellOptions {
@@ -58,7 +61,13 @@ export interface Shell {
     readonly storage: WidgetStorage;
     theme(): ThemeTokens;
     /** Initial UI-state fields owned by the shell (same for every pane). */
-    sharedState(): Pick<UiState, 'fullscreen' | 'favoriteIntervals' | 'drawbarCollapsed'>;
+    sharedState(): Pick<UiState, 'fullscreen' | 'favoriteIntervals' | 'drawbarCollapsed' | 'favoriteTools' | 'keepDrawing'>;
+    /** Each tool's last color / style (saved; every pane starts with it). */
+    drawingDefaults(): DrawingDefaults;
+    saveDrawingDefaults(defaults: DrawingDefaults): void;
+    toggleFavoriteTool(tool: DrawingType): void;
+    setKeepDrawing(on: boolean): void;
+    setDrawingsHidden(hidden: boolean): void;
     setPanes(panes: () => readonly ShellPane[]): void;
     setTheme(patch: Partial<ThemeTokens>): void;
     setColorScheme(scheme: ColorScheme): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@funnest/charts-ui",
-  "version": "0.6.26",
+  "version": "0.6.27",
   "description": "Pro trading UI (toolbar, drawing tools, sheets) for Funnest Charts. Framework-agnostic.",
   "keywords": [
     "chart",
@@ -42,7 +42,7 @@
     "NOTICE"
   ],
   "dependencies": {
-    "@funnest/charts": "0.6.26"
+    "@funnest/charts": "0.6.27"
   },
   "devDependencies": {
     "preact": "^11.2.0"