@funnest/charts-ui 0.6.11 → 0.6.13

package/dist/i18n.d.ts

@@ -76,6 +76,8 @@ export declare const STRINGS: {
         remove: string;
         color: string;
         customColor: string;
+        partColors: string;
+        resetColors: string;
         lineWidth: string;
         lineStyle: string;
         lineSolid: string;
@@ -218,6 +220,8 @@ export declare const STRINGS: {
         remove: string;
         color: string;
         customColor: string;
+        partColors: string;
+        resetColors: string;
         lineWidth: string;
         lineStyle: string;
         lineSolid: string;

package/dist/icons.d.ts

@@ -56,6 +56,8 @@ export declare const CornerIcon: () => import("preact").JSX.Element;
 /** Sliders: the 도구 menu. */
 export declare const ToolsIcon: () => import("preact").JSX.Element;
 export declare const GripIcon: () => import("preact").JSX.Element;
+/** Several colors (a tool's parts): a palette. */
+export declare const PaletteIcon: () => import("preact").JSX.Element;
 export declare const LockIcon: ({ open }: {
     open?: boolean;
 }) => import("preact").JSX.Element;

package/dist/index.js

@@ -499,6 +499,8 @@ var STRINGS = {
     remove: "\uC0AD\uC81C",
     color: "\uC0C9\uC0C1",
     customColor: "\uB2E4\uB978 \uC0C9",
+    partColors: "\uBD80\uBD84 \uC0C9\uC0C1",
+    resetColors: "\uAE30\uBCF8 \uC0C9\uC73C\uB85C",
     lineWidth: "\uC120 \uAD75\uAE30",
     lineStyle: "\uC120 \uBAA8\uC591",
     lineSolid: "\uC2E4\uC120",
@@ -643,6 +645,8 @@ var STRINGS = {
     remove: "Remove",
     color: "Color",
     customColor: "Other color",
+    partColors: "Part colors",
+    resetColors: "Reset colors",
     lineWidth: "Line width",
     lineStyle: "Line style",
     lineSolid: "Solid",
@@ -823,6 +827,7 @@ var EyeIcon = () => /* @__PURE__ */ a3(Icon, { size: 14, children: [
   /* @__PURE__ */ a3("circle", { cx: "10", cy: "10", r: "2.3" })
 ] });
 var EyeOffIcon = () => /* @__PURE__ */ a3(Icon, { size: 14, children: /* @__PURE__ */ a3("path", { d: "M3 3l14 14M8.2 5a8 8 0 0 1 1.8-.5c5 0 8 5.5 8 5.5a14 14 0 0 1-2.2 2.9M5.4 6.4A14 14 0 0 0 2 10s3 5.5 8 5.5a7.7 7.7 0 0 0 3.6-.9" }) });
+var ChevronUpIcon = () => /* @__PURE__ */ a3(Icon, { size: 14, children: /* @__PURE__ */ a3("path", { d: "M5 12l5-5 5 5" }) });
 var MagnetIcon = () => /* @__PURE__ */ a3(Icon, { children: [
   /* @__PURE__ */ a3("path", { d: "M5 4h3v6.5a2 2 0 0 0 4 0V4h3v6.5a5 5 0 0 1-10 0z" }),
   /* @__PURE__ */ a3("path", { d: "M5 7h3M12 7h3" })
@@ -834,7 +839,6 @@ var StarIcon = ({ filled = false }) => /* @__PURE__ */ a3(Icon, { size: 16, chil
     fill: filled ? "currentColor" : "none"
   }
 ) });
-var CollapseLeftIcon = () => /* @__PURE__ */ a3(Icon, { size: 14, children: /* @__PURE__ */ a3("path", { d: "M11 5l-5 5 5 5M15 5l-5 5 5 5" }) });
 var SettingsIcon = () => /* @__PURE__ */ a3(Icon, { children: [
   /* @__PURE__ */ a3("path", { d: "M10 12.6a2.6 2.6 0 1 0 0-5.2 2.6 2.6 0 0 0 0 5.2z" }),
   /* @__PURE__ */ a3("path", { d: "M16.2 12a1.3 1.3 0 0 0 .26 1.43l.05.05a1.6 1.6 0 1 1-2.26 2.26l-.05-.05a1.3 1.3 0 0 0-1.43-.26 1.3 1.3 0 0 0-.79 1.19v.14a1.6 1.6 0 0 1-3.2 0v-.07a1.3 1.3 0 0 0-.85-1.19 1.3 1.3 0 0 0-1.43.26l-.05.05a1.6 1.6 0 1 1-2.26-2.26l.05-.05A1.3 1.3 0 0 0 4.5 12a1.3 1.3 0 0 0-1.19-.79h-.14a1.6 1.6 0 0 1 0-3.2h.07a1.3 1.3 0 0 0 1.19-.85 1.3 1.3 0 0 0-.26-1.43l-.05-.05a1.6 1.6 0 1 1 2.26-2.26l.05.05a1.3 1.3 0 0 0 1.43.26h.06a1.3 1.3 0 0 0 .79-1.19v-.14a1.6 1.6 0 0 1 3.2 0v.07a1.3 1.3 0 0 0 .79 1.19 1.3 1.3 0 0 0 1.43-.26l.05-.05a1.6 1.6 0 1 1 2.26 2.26l-.05.05a1.3 1.3 0 0 0-.26 1.43v.06a1.3 1.3 0 0 0 1.19.79h.14a1.6 1.6 0 0 1 0 3.2h-.07a1.3 1.3 0 0 0-1.19.79z" })
@@ -882,6 +886,10 @@ var ToolsIcon = () => /* @__PURE__ */ a3(Icon, { size: 18, children: [
   /* @__PURE__ */ a3("circle", { cx: "7.5", cy: "14", r: "2" })
 ] });
 var GripIcon = () => /* @__PURE__ */ a3(Icon, { children: /* @__PURE__ */ a3("path", { d: "M7.5 5h.01M7.5 10h.01M7.5 15h.01M12.5 5h.01M12.5 10h.01M12.5 15h.01", "stroke-width": "2.4" }) });
+var PaletteIcon = () => /* @__PURE__ */ a3(Icon, { children: [
+  /* @__PURE__ */ a3("path", { d: "M10 3.5a6.5 6.5 0 1 0 0 13c1 0 1.5-.6 1.5-1.3 0-.9-.8-1.2-.8-2 0-.7.6-1.2 1.4-1.2h1.6a2.8 2.8 0 0 0 2.8-2.8C16.5 6 13.6 3.5 10 3.5Z" }),
+  /* @__PURE__ */ a3("path", { d: "M6.6 9.2h.01M8.4 6.6h.01M11.6 6.4h.01M13.6 8.6h.01", "stroke-width": "2.2" })
+] });
 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" })
@@ -964,8 +972,13 @@ function ToolGroup({
   A2(() => {
     if (!open) return;
     const close = (e3) => !ref.current?.contains(e3.target) && onOpen(false);
+    const esc = (e3) => e3.key === "Escape" && onOpen(false);
     document.addEventListener("pointerdown", close, true);
-    return () => document.removeEventListener("pointerdown", close, true);
+    document.addEventListener("keydown", esc);
+    return () => {
+      document.removeEventListener("pointerdown", close, true);
+      document.removeEventListener("keydown", esc);
+    };
   }, [open]);
   const pick = (def) => {
     setChosen(def.type);
@@ -1099,7 +1112,14 @@ function SelectionBar({ ctx }) {
   const style = d3.style ?? {};
   const setStyle = (patch) => ctx.chart.updateDrawing(d3.id, { style: { ...style, ...patch } });
   const current = d3.color ?? SWATCHES[0];
-  const pickColor = (color) => ctx.chart.updateDrawing(d3.id, { color });
+  const pickColor = (color) => {
+    if (style.colors) {
+      const { colors: _drop, ...rest } = style;
+      ctx.chart.updateDrawing(d3.id, { color, style: rest });
+    } else ctx.chart.updateDrawing(d3.id, { color });
+  };
+  const slots = def?.colors ?? [];
+  const slotColor = (key, fallback) => style.colors?.[key] ?? d3.color ?? fallback;
   const addRecent = (color) => {
     const next = [color, ...recent.filter((c3) => c3 !== color)].slice(0, 3);
     setRecent(next);
@@ -1151,6 +1171,40 @@ function SelectionBar({ ctx }) {
         }
       )
     ] }),
+    slots.length > 0 && /* @__PURE__ */ a3("div", { class: "fnc-selbar-menu", children: [
+      /* @__PURE__ */ a3("button", { class: "fnc-btn", "data-tip": t3.partColors, "aria-label": t3.partColors, "aria-expanded": menu === "colors", onClick: () => setMenu(menu === "colors" ? null : "colors"), children: /* @__PURE__ */ a3(PaletteIcon, {}) }),
+      menu === "colors" && /* @__PURE__ */ a3("div", { class: "fnc-menu fnc-selbar-pop fnc-part-menu", role: "menu", children: [
+        slots.map((slot) => {
+          const c3 = slotColor(slot.key, slot.color);
+          return /* @__PURE__ */ a3("label", { class: "fnc-menu-item fnc-part", children: [
+            /* @__PURE__ */ a3("span", { class: "fnc-swatch", style: { background: c3 } }),
+            /* @__PURE__ */ a3("span", { children: slot.name[s3.locale] }),
+            /* @__PURE__ */ a3(
+              "input",
+              {
+                type: "color",
+                "aria-label": `${slot.name[s3.locale]} ${t3.color}`,
+                value: /^#[0-9a-f]{6}$/i.test(c3) ? c3 : "#3182f6",
+                onInput: (e3) => setStyle({ colors: { ...style.colors, [slot.key]: e3.target.value } })
+              }
+            )
+          ] });
+        }),
+        /* @__PURE__ */ a3(
+          "button",
+          {
+            class: "fnc-menu-item fnc-part-reset",
+            role: "menuitem",
+            onClick: () => {
+              const { colors: _drop, ...rest } = style;
+              ctx.chart.updateDrawing(d3.id, { style: rest });
+              setMenu(null);
+            },
+            children: t3.resetColors
+          }
+        )
+      ] })
+    ] }),
     /* @__PURE__ */ a3("div", { class: "fnc-sep" }),
     /* @__PURE__ */ a3("div", { class: "fnc-selbar-menu", children: [
       /* @__PURE__ */ a3("button", { class: "fnc-btn fnc-selbar-width", "data-tip": t3.lineWidth, "aria-label": t3.lineWidth, "aria-expanded": menu === "width", onClick: () => setMenu(menu === "width" ? null : "width"), children: /* @__PURE__ */ a3("svg", { width: "20", height: "20", viewBox: "0 0 20 20", "aria-hidden": "true", children: /* @__PURE__ */ a3("path", { d: "M3 10h14", stroke: "currentColor", "stroke-width": style.width ?? 2, "stroke-linecap": "round" }) }) }),
@@ -2553,7 +2607,7 @@ function Legend({ ctx }) {
         )
       ] })),
       !collapsed && overlayItems.map((item) => /* @__PURE__ */ a3(IndicatorItem, { ctx, item })),
-      overlayItems.length > 0 && (collapsed ? /* @__PURE__ */ a3("button", { class: "fnc-ind-handle", "aria-expanded": "false", "aria-label": t3.expand, "data-tip": t3.expand, onClick: () => setCollapsed(false), children: /* @__PURE__ */ a3("span", {}) }) : /* @__PURE__ */ a3("button", { class: "fnc-ind-collapse", "aria-expanded": "true", "aria-label": t3.collapse, "data-tip": t3.collapse, onClick: () => setCollapsed(true), children: /* @__PURE__ */ a3(CollapseLeftIcon, {}) }))
+      overlayItems.length > 0 && (collapsed ? /* @__PURE__ */ a3("button", { class: "fnc-ind-handle", "aria-expanded": "false", "aria-label": t3.expand, "data-tip": t3.expand, onClick: () => setCollapsed(false), children: /* @__PURE__ */ a3("span", {}) }) : /* @__PURE__ */ a3("button", { class: "fnc-ind-collapse", "aria-expanded": "true", "aria-label": t3.collapse, "data-tip": t3.collapse, onClick: () => setCollapsed(true), children: /* @__PURE__ */ a3(ChevronUpIcon, {}) }))
     ] }),
     paneLegends.map(
       ({ pane, item }) => item && /* @__PURE__ */ a3("div", { class: "fnc-legend fnc-pane-legend", style: { top: `${pane.top + 4}px` }, children: /* @__PURE__ */ a3(IndicatorItem, { ctx, item }) })
@@ -2922,6 +2976,11 @@ var CSS = (
 .fnc-selbar-menu { position: relative; }
 .fnc-selbar-pop { top: calc(100% + 6px); left: 50%; transform: translateX(-50%); min-width: 110px; }
 .fnc-selbar-pop .fnc-menu-item { gap: 10px; }
+.fnc-part-menu { min-width: 150px; max-height: 320px; overflow-y: auto; }
+.fnc-part { position: relative; cursor: pointer; }
+.fnc-part .fnc-swatch { width: 14px; height: 14px; box-shadow: 0 0 0 1px var(--fnc-border); }
+.fnc-part input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
+.fnc-part-reset { margin-top: 4px; border-top: 1px solid var(--fnc-border); color: var(--fnc-text-2); }
 .fnc-selbar-text { width: 150px; height: 28px; padding: 0 8px; border: 1px solid var(--fnc-border); border-radius: var(--fnc-radius); background: var(--fnc-surface); color: var(--fnc-text); font: inherit; font-size: 13px; outline: none; }
 .fnc-selbar-text:focus { border-color: var(--fnc-text-2); }
 .fnc-overlay { pointer-events: none; }
@@ -3675,6 +3734,8 @@ var CSS = (
 .fnc-tool-group:hover .fnc-tool-chevron,
 .fnc-tool-more[aria-expanded='true'] .fnc-tool-chevron,
 .fnc-tool-more:focus-visible .fnc-tool-chevron { display: flex; }
+/* Once the list is open the tab has done its job: it fades out (clicking its spot still closes the list). */
+.fnc-tool-group[data-open='true'] .fnc-tool-more { opacity: 0; }
 @media (hover: none) {
   .fnc-tool-more { right: -12px; width: 14px; align-items: center; justify-content: center; padding: 0; }
   .fnc-tool-corner { display: none; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@funnest/charts-ui",
-  "version": "0.6.11",
+  "version": "0.6.13",
   "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.11"
+    "@funnest/charts": "0.6.13"
   },
   "devDependencies": {
     "preact": "^11.2.0"