@ninebone/util 1.0.44 → 1.0.48

package/dist/nine-util.js

@@ -9,7 +9,7 @@ var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read fr
 var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
 var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
-var _name, _color, _Trace_instances, isTraceEnabled_fn, _a, _timer, _queue, _delay, _TaskDebouncer_instances, flush_fn, _request, _shift, _dialog, _init, _onMouseDown, _onTouchStart, _NineUxUtil_instances, prepare_fn, _mode, _isSiblingOnly, _detectMode, _startDrag, _init2, _prepareLayout, _requestLogin;
+var _name, _color, _Trace_instances, isTraceEnabled_fn, _a, _timer, _queue, _delay, _TaskDebouncer_instances, flush_fn, _request, _shift, _dialog, _init, _onMouseDown, _onTouchStart, _NineUxUtil_instances, prepare_fn, _mode, _isSiblingOnly, _getPrevValidSibling, _getNextValidSibling, _detectMode, _startDrag, _init2, _prepareLayout, _requestLogin;
 import React from "react";
 import { createRoot } from "react-dom/client";
 const listeners = /* @__PURE__ */ new Set();
@@ -908,7 +908,6 @@ class nineDialog extends HTMLElement {
   connectedCallback() {
     const v = this.innerHTML;
     const titleText = this.getAttribute("subject") || "Details";
-    trace$1.log(dialogStyles);
     this.innerHTML = `
 			<style>${dialogStyles}</style>
 		
@@ -1156,9 +1155,37 @@ class NineSplitter extends HTMLElement {
       if (attr === null) return false;
       return attr.toLowerCase() === "false" ? false : true;
     });
+    // 🎯 실제로 화면에 보이는 이전 형제 패널을 찾는 메서드
+    __privateAdd(this, _getPrevValidSibling, () => {
+      let el = this.previousElementSibling;
+      while (el) {
+        if (el.tagName.toLowerCase() !== "nine-splitter") {
+          const style = window.getComputedStyle(el);
+          if (style.display !== "none") {
+            return el;
+          }
+        }
+        el = el.previousElementSibling;
+      }
+      return null;
+    });
+    // 🎯 실제로 화면에 보이는 다음 형제 패널을 찾는 메서드
+    __privateAdd(this, _getNextValidSibling, () => {
+      let el = this.nextElementSibling;
+      while (el) {
+        if (el.tagName.toLowerCase() !== "nine-splitter") {
+          const style = window.getComputedStyle(el);
+          if (style.display !== "none") {
+            return el;
+          }
+        }
+        el = el.nextElementSibling;
+      }
+      return null;
+    });
     __privateAdd(this, _detectMode, (el) => {
-      const prev = el.previousElementSibling;
-      const next = el.nextElementSibling;
+      const prev = __privateGet(this, _getPrevValidSibling).call(this);
+      const next = __privateGet(this, _getNextValidSibling).call(this);
       if (!prev || !next) {
         __privateSet(this, _mode, this.classList.contains("h") ? "h" : "v");
         return;
@@ -1190,8 +1217,8 @@ class NineSplitter extends HTMLElement {
       });
       const root = this.getRootNode({ composed: true });
       const parent = root instanceof ShadowRoot ? root.host : this.parentElement;
-      const prev = this.previousElementSibling;
-      const next = this.nextElementSibling;
+      const prev = __privateGet(this, _getPrevValidSibling).call(this);
+      const next = __privateGet(this, _getNextValidSibling).call(this);
       if (!parent || !prev || !next) {
         trace$1.warn("Spliter's parent or siblings not found.");
         return;
@@ -1313,7 +1340,7 @@ class NineSplitter extends HTMLElement {
       const htmlTmpl = document.createElement("template");
       htmlTmpl.innerHTML = `
 			<style>
-				@import "https://cdn.jsdelivr.net/npm/@ninebone/util@${"1.0.44"}/dist/css/nine-util.css";
+				@import "https://cdn.jsdelivr.net/npm/@ninebone/util@${"1.0.48"}/dist/css/nine-util.css";
 				${customImport}
 			</style>
 			${gripTmpl}
@@ -1358,6 +1385,8 @@ class NineSplitter extends HTMLElement {
 }
 _mode = new WeakMap();
 _isSiblingOnly = new WeakMap();
+_getPrevValidSibling = new WeakMap();
+_getNextValidSibling = new WeakMap();
 _detectMode = new WeakMap();
 _startDrag = new WeakMap();
 _init2 = new WeakMap();
@@ -1857,9 +1886,9 @@ class NineUtil {
       return v + Array(n - String(v).length + 1).join(str || "0");
     });
     __publicField(this, "cut", (v, len) => {
-      var str = v;
-      var s = 0;
-      for (var i = 0; i < str.length; i++) {
+      const str = v;
+      let s = 0;
+      for (let i = 0; i < str.length; i++) {
         s += str.charCodeAt(i) > 128 ? 2 : 1;
         if (s > len) return str.substring(0, i);
       }
@@ -1868,6 +1897,43 @@ class NineUtil {
     __publicField(this, "getByteLength", (v) => {
       return v.replace(/[\0-\x7f]|([0-\u07ff]|(.))/g, "$&$1$2").length;
     });
+    __publicField(this, "oppositeColor", (bgColor, lightColor = "#ffffff", darkColor = "#000000") => {
+      const color = bgColor && bgColor.charAt(0) === "#" ? bgColor.substring(1, 7) : bgColor || "ffffff";
+      const r = parseInt(color.substring(0, 2), 16);
+      const g = parseInt(color.substring(2, 4), 16);
+      const b = parseInt(color.substring(4, 6), 16);
+      if (isNaN(r) || isNaN(g) || isNaN(b)) return darkColor;
+      const yuv = (r * 299 + g * 587 + b * 114) / 1e3;
+      return yuv >= 128 ? darkColor : lightColor;
+    });
+    __publicField(this, "measureTextSize", (_text, _font = "12px sans-serif") => {
+      if (typeof _text === "number") _text = _text + "";
+      if (!_text) return { width: null, height: null };
+      _text = _text.replaceAll("\n", "<br>");
+      let canvas = document.body.querySelector("canvas#_nine_measure_canvas_");
+      if (!canvas) {
+        canvas = document.createElement("canvas");
+        canvas.id = "_nine_measure_canvas_";
+        canvas.style.cssText = "visibility: hidden;";
+        document.body.appendChild(canvas);
+      }
+      const context = canvas.getContext("2d");
+      context.font = _font;
+      let w = 0;
+      let h = 0;
+      for (let v of _text.split("<br>")) {
+        v = v.replace(/<(\/)?([a-zA-Z]*)(\s[a-zA-Z]*=[^>]*)?(\s)*(\/)?>/ig, "");
+        const metrics = context.measureText(v);
+        w = Math.max(w, metrics.width);
+        const ascent = metrics.fontBoundingBoxAscent || 10;
+        const descent = metrics.fontBoundingBoxDescent || 3;
+        h += ascent + descent;
+      }
+      return {
+        width: w,
+        height: h
+      };
+    });
     /**
      * 🔮 초간단 만능 드래그 팝업 엔진 (Promise/Then 규격)
      * @param {React.Component} ContentComponent - 팝업 내부에 띄울 리액트 컴포넌트