goldenChat base source add

2026-05-23 15:11:48 +09:00
commit a4ea7762b5
2081 changed files with 1155760 additions and 0 deletions
@@ -0,0 +1,123 @@
+/**
+ * 보조지표 설정 — 색상 + 투명도 (스와치 클릭 시 팔레트·고급 선택기)
+ */
+import React, { useState, useRef, useEffect, useCallback } from 'react';
+import { createPortal } from 'react-dom';
+import { parsePlotColor, formatPlotColor, plotColorCss } from '../utils/plotColorUtils';
+import { getOpacityPercentSpec } from '../utils/indicatorParamSpec';
+import NumericParamInput from './NumericParamInput';
+import ColorPickerPanel from './ColorPickerPanel';
+
+export interface ColorInputProps {
+  value: string;
+  onChange: (v: string) => void;
+}
+
+const ColorInput: React.FC<ColorInputProps> = ({ value, onChange }) => {
+  const { hex6, alpha } = parsePlotColor(value);
+  const [open, setOpen] = useState(false);
+  const anchorRef = useRef<HTMLDivElement>(null);
+  const popoverRef = useRef<HTMLDivElement>(null);
+  const [pos, setPos] = useState({ top: 0, left: 0 });
+
+  const updatePosition = useCallback(() => {
+    const el = anchorRef.current;
+    if (!el) return;
+    const rect = el.getBoundingClientRect();
+    const popW = 280;
+    let left = rect.left;
+    if (left + popW > window.innerWidth - 12) {
+      left = window.innerWidth - popW - 12;
+    }
+    setPos({ top: rect.bottom + 6, left: Math.max(8, left) });
+  }, []);
+
+  useEffect(() => {
+    if (!open) return;
+    updatePosition();
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') setOpen(false);
+    };
+    const onScroll = () => updatePosition();
+    window.addEventListener('keydown', onKey);
+    window.addEventListener('resize', updatePosition);
+    window.addEventListener('scroll', onScroll, true);
+    return () => {
+      window.removeEventListener('keydown', onKey);
+      window.removeEventListener('resize', updatePosition);
+      window.removeEventListener('scroll', onScroll, true);
+    };
+  }, [open, updatePosition]);
+
+  useEffect(() => {
+    if (!open) return;
+    const onDoc = (e: MouseEvent) => {
+      const t = e.target as Node;
+      if (anchorRef.current?.contains(t) || popoverRef.current?.contains(t)) return;
+      setOpen(false);
+    };
+    document.addEventListener('mousedown', onDoc);
+    return () => document.removeEventListener('mousedown', onDoc);
+  }, [open]);
+
+  const patchHex = (h: string) => onChange(formatPlotColor(h, alpha));
+  const patchAlpha = (a: number) => onChange(formatPlotColor(hex6, a));
+
+  const popover = open && typeof document !== 'undefined' ? (
+    <div
+      ref={popoverRef}
+      className="ism-color-popover"
+      style={{ top: pos.top, left: pos.left }}
+      role="dialog"
+      aria-label="색상 선택"
+      onMouseDown={e => e.stopPropagation()}
+    >
+      <div className="ism-color-popover-native">
+        <label className="ism-color-native-label">
+          <span className="ism-style-label">직접 선택</span>
+          <input
+            type="color"
+            className="ism-color-picker"
+            value={hex6}
+            onChange={e => patchHex(e.target.value)}
+          />
+        </label>
+      </div>
+      <ColorPickerPanel hex6={hex6} onHexChange={patchHex} />
+    </div>
+  ) : null;
+
+  return (
+    <div className="ism-color-wrap" ref={anchorRef}>
+      <button
+        type="button"
+        className="ism-color-swatch-btn"
+        title="색상 선택"
+        aria-expanded={open}
+        onClick={() => {
+          setOpen(v => !v);
+          if (!open) requestAnimationFrame(updatePosition);
+        }}
+      >
+        <span className="ism-color-swatch-preview" style={{ background: plotColorCss(value) }} />
+      </button>
+      <input
+        type="color"
+        className="ism-color-picker ism-color-picker--compact"
+        value={hex6}
+        title="브라우저 색상 선택"
+        onChange={e => patchHex(e.target.value)}
+      />
+      <NumericParamInput
+        className="ism-input ism-alpha-input"
+        value={alpha}
+        spec={getOpacityPercentSpec(alpha)}
+        onChange={patchAlpha}
+      />
+      <span className="ism-alpha-label">%</span>
+      {popover ? createPortal(popover, document.body) : null}
+    </div>
+  );
+};
+
+export default ColorInput;