nv-basic-bw 1.0.12 → 1.0.15

package/nd.js

@@ -0,0 +1,390 @@
+const {is_async} = require("./util");
+
+const get_depth = (node) => {
+    let depth = 0;
+    while (node && node.parentNode) {
+        node = node.parentNode;
+        depth++;
+    }
+    return depth;
+};
+
+const get_ance  = (node,which)=>{
+    if(which >0) {
+        let c = 1;
+        while(true) {
+            let pr = node.parentNode;
+            if(c===which) {
+                return pr;
+            } else {
+                node = pr;
+                ++c;
+            }
+        }
+    } else {
+        return node;
+    }
+}
+
+const get_rt = (node) => {
+    while (node.parentNode) {
+        node = node.parentNode;
+    }
+
+    return node;
+};
+
+
+const is_topo_leaf = (nd)=> nd.firstChild===null || nd.firstChild===undefined;
+
+
+const get_drmost = (node,is_leaf=is_topo_leaf) => {
+    let rel_depth = 0;
+    while (true) {
+        if(!is_leaf(node)) {
+            node = node.lastChild;
+            ++rel_depth;
+        } else {
+            break; 
+        }
+    }
+    return [node,rel_depth];
+};
+
+const get_dlmost = (node,is_leaf=is_topo_leaf)=>{
+    let rel_depth = 0;
+    while (true) {
+        if(!is_leaf(node)) {
+            node = node.firstChild;
+            ++rel_depth;
+        } else {
+            break;
+        }
+    }
+    return [node,rel_depth];
+}
+
+
+
+const find_rb_of_fst_ance_has_rb = (node, rel_depth) => {
+    // 1️⃣ 当前节点有 nextSibling
+    if (node.nextSibling) {
+        return [node.nextSibling, rel_depth];
+    }
+
+    // 2️⃣ 沿父节点向上查找
+    let current = node.parentNode;
+    let depth = rel_depth;
+
+    while (current) {
+        depth -= 1; // 向上走一层
+
+        if (current.nextSibling) {
+            return [current.nextSibling, depth];
+        }
+
+        current = current.parentNode;
+    }
+
+    // 3️⃣ 已到根节点，仍然没有
+    return [null,-1];
+};
+
+const editonly_sdfs_for_each = async(rt,cb=(el,rel_depth)=>{},is_leaf=is_topo_leaf)=> {
+    let [drmost,ignore] = get_drmost(rt,is_leaf)
+    let curr = rt;
+    let should_await = is_async(cb);
+    let rel_depth =0;
+    while(true) {
+        let should_break = false;
+        if(should_await) {
+            should_break = await cb(curr,rel_depth);    
+        } else {
+            should_break = cb(curr,rel_depth);
+        }
+        if(should_break||curr=== drmost) {return;} else {
+            if(!is_leaf(curr)) {
+                ++rel_depth;
+                curr = curr.firstChild;
+            } else {
+                let pair = find_rb_of_fst_ance_has_rb(curr,rel_depth);
+                curr = pair[0];
+                if(curr) {
+                    rel_depth = pair[1];
+                } else   {
+                    break;
+                }
+            }
+
+        }
+    }
+}
+
+const find_lb_of_fst_ance_has_lb = (node, rel_depth) => {
+    // 1️⃣ 当前节点有 nextSibling
+    if (node.prevSibling) {
+        return [node.prevSibling, rel_depth];
+    }
+
+    // 2️⃣ 沿父节点向上查找
+    let current = node.parentNode;
+    let depth = rel_depth;
+
+    while (current) {
+        depth -= 1; // 向上走一层
+
+        if (current.prevSibling) {
+            return [current.prevSibling, depth];
+        }
+
+        current = current.parentNode;
+    }
+
+    // 3️⃣ 已到根节点，仍然没有
+    return [null,-1];
+};
+
+const editonly_rsdfs_for_each = async(rt,cb=(el,rel_depth)=>{},is_leaf=is_topo_leaf)=> {
+    let [dlmost,ignore] = get_dlmost(rt,is_leaf)
+    let curr = rt;
+    let should_await = is_async(cb);
+    let rel_depth =0;
+    while(true) {
+        let should_break = false;
+        if(should_await) {
+            should_break = await cb(curr,rel_depth);
+        } else {
+            should_break = cb(curr,rel_depth);
+        }
+        if(should_break||curr=== dlmost) {return;} else {
+            if(!is_leaf(curr)) {
+                ++rel_depth;
+                curr = curr.lastChild;
+            } else {
+                let pair = find_lb_of_fst_ance_has_lb(curr,rel_depth);
+                curr = pair[0];
+                if(curr) {
+                    rel_depth = pair[1];
+                } else   {
+                    break;
+                }
+            }
+
+        }
+    }
+}
+
+const editonly_edfs_for_each = async(rt,cb=(el,rel_depth)=>{},is_leaf=is_topo_leaf)=> {
+    let [curr,rel_depth] = get_dlmost(rt,is_leaf)
+    let should_await = is_async(cb);
+    while(true) {
+        let should_break = false;
+        if(should_await) {
+            should_break = await cb(curr,rel_depth);
+        } else {
+            should_break = cb(curr,rel_depth);
+        }
+        if(should_break|| curr === rt) {return;} else {
+            let rb = curr.nextSibling;
+            if(rb) {
+                let pair = get_dlmost(rb,is_leaf);
+                rel_depth+= pair[1];
+                curr = pair[0];
+            } else {
+                let pr = curr.parentNode;
+                if(pr) {
+                    --rel_depth;
+                    curr = pr;
+                } else {
+                    break;
+                }
+            }
+        }
+    }
+}
+
+const editonly_redfs_for_each = async(rt,cb=(el,rel_depth)=>{},is_leaf=is_topo_leaf)=> {
+    let [curr,rel_depth] = get_drmost(rt,is_leaf)
+    let should_await = is_async(cb);
+    while(true) {
+        let should_break = false;
+        if(should_await) {
+            should_break = await cb(curr,rel_depth);
+        } else {
+            should_break = cb(curr,rel_depth);
+        }
+        if(should_break || curr === rt) {return;} else {
+            let lb = curr.prevSibling;
+            if(lb) {
+                let pair = get_drmost(lb,is_leaf);
+                rel_depth+= pair[1];
+                curr = pair[0];
+            } else {
+                let pr = curr.parentNode;
+                if(pr) {
+                    --rel_depth;
+                    curr = pr;
+                } else {
+                    break;
+                }
+            }
+        }
+    }
+}
+
+const visit = async(
+    rt,
+    exit_cb  = (el,rel_depth)=>{},
+    enter_cb = (el,rel_depth)=>{},
+    is_leaf=is_topo_leaf,
+) => {
+    let curr  = rt;
+    let state = "open";
+    let cbs   = {
+        "open": [enter_cb, is_async(enter_cb)],
+        "clos": [exit_cb,  is_async(exit_cb) ]
+    };
+    let rel_depth = 0;
+    while(true) {
+        let should_break = false;
+        let [cb,should_await] = cbs[state];
+        if(state === "open") {
+            // open 状态 先执行用户回调
+            if(should_await) {should_break = await cb(curr,rel_depth);} else{should_break = cb(curr,rel_depth);} 
+            // 然后再取下一个节点:  用户回调如果修改了树结构,拿到的是修改后的
+            if(should_break) {return;} else {
+                if(!is_leaf(curr)) { 
+                    curr=curr.firstChild; ++rel_depth;
+                } else {
+                    state = "clos";
+                }
+            }
+        } else {
+            //事先拿出nxt,因为用户可能改变树结构
+            let nxt;
+            let nxt_rel_depth;
+            let nxt_state;
+            let rb = curr.nextSibling;
+            if(rb) {
+                nxt_state = "open"; 
+                nxt = rb;
+                nxt_rel_depth = rel_depth;
+            } else {
+                nxt_state = "clos";
+                nxt           = curr.parentNode; 
+                nxt_rel_depth = rel_depth -1;
+            }
+            if(should_await) {should_break = await cb(curr,rel_depth);} else{should_break = cb(curr,rel_depth);}
+            if(should_break) {return;} else {
+                if(curr !== rt) {
+                    state = nxt_state;curr  = nxt;rel_depth = nxt_rel_depth;
+                } else          {
+                    break;
+                }
+            }
+        }
+    }
+}
+
+
+const rvisit = async(
+    rt,
+    exit_cb  = (el,rel_depth)=>{},
+    enter_cb = (el,rel_depth)=>{},
+    is_leaf=is_topo_leaf,
+) => {
+    let curr  = rt;
+    let state = "open";
+    let cbs   = {
+        "open": [enter_cb, is_async(enter_cb)],
+        "clos": [exit_cb,  is_async(exit_cb) ]
+    };
+    let rel_depth = 0;
+    while(true) {
+        let should_break = false;
+        let [cb,should_await] = cbs[state];
+        if(state === "open") {
+            // open 状态 先执行用户回调
+            if(should_await) {should_break = await cb(curr,rel_depth);} else{should_break = cb(curr,rel_depth);} 
+            // 然后再取下一个节点:  用户回调如果修改了树结构,拿到的是修改后的
+            if(should_break) {return;} else {
+                if(!is_leaf(curr)) { 
+                    curr=curr.lastChild;;           ++rel_depth;
+                } else {
+                    state = "clos";
+                }
+            }
+        } else {
+            //事先拿出nxt,因为用户可能改变树结构
+            let nxt;
+            let nxt_rel_depth;
+            let nxt_state;
+            let lb = curr.prevSibling;
+            if(lb) {
+                nxt_state = "open"; 
+                nxt = lb;
+                nxt_rel_depth = rel_depth;
+            } else {
+                nxt_state = "clos";
+                nxt           = curr.parentNode; 
+                nxt_rel_depth = rel_depth -1;
+            }
+            if(should_await) {should_break = await cb(curr,rel_depth);} else{should_break = cb(curr,rel_depth);}
+            if(should_break) {return;} else {
+                if(curr !== rt) {
+                    state = nxt_state;curr  = nxt;rel_depth = nxt_rel_depth;
+                } else          {
+                    break;
+                }            
+            }
+        }
+    }
+}
+
+module.exports = {
+    get_depth,
+    get_ance,
+    get_rt,
+    is_topo_leaf,
+    get_drmost,
+    get_dlmost,
+    find_rb_of_fst_ance_has_rb,
+    editonly_sdfs_for_each,
+    find_lb_of_fst_ance_has_lb,
+    editonly_rsdfs_for_each,
+    editonly_edfs_for_each,
+    editonly_redfs_for_each,
+    visit,
+    rvisit,
+}
+
+/*
+visit(
+    document,
+    (el,rel_depth)=>{
+        let t = el.nodeType;
+        switch(t) {
+            case document.ELEMENT_NODE :{console.log(" ".repeat(rel_depth)+"</"+el.tagName.toLowerCase()+">");break;}
+            case document.TEXT_NODE    :{console.log(" ".repeat(rel_depth)+el.textContent);break;}
+            case document.COMMENT_NODE :{console.log(" ".repeat(rel_depth)+"<!--" +el.data + "-->");break;}
+            case document.ATTRIBUTE_NODE:              {break;}
+            case document.CDATA_SECTION_NODE :         {break;}
+            case document.ENTITY_REFERENCE_NODE:       {break;}
+            case document.ENTITY_NODE :                {break;}
+            case document.PROCESSING_INSTRUCTION_NODE: {break;}
+            case document.DOCUMENT_NODE:               {break;}
+            case document.DOCUMENT_TYPE_NODE:          {break;}
+            case document.DOCUMENT_FRAGMENT_NODE:      {break;}
+            case document.NOTATION_NODE :              {break;}
+        }
+    },
+    (el,rel_depth)=>{
+    let t = el.nodeType;
+        switch(t) {
+            case document.ELEMENT_NODE :{
+                console.log(" ".repeat(rel_depth)+"<"+el.tagName.toLowerCase()+">");break;
+            }
+        }
+    },
+)
+*/

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nv-basic-bw",
-  "version": "1.0.12",
+  "version": "1.0.15",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
@@ -9,6 +9,6 @@
   "license": "ISC",
   "description": "",
   "dependencies": {
-    "nvison": "^1.2.1"
+    "nvison-bw": "^1.0.0"
   }
 }

package/ui.js

@@ -182,6 +182,221 @@ const simple_confirm_cancel = async (title, cb = async (type, el) => { console.l
 
 }
 
+////
+/**
+ * UI 层：弹出预览遮罩
+ */     
+/**
+ * 显示预览弹窗，支持拖拽、保存和关闭
+ * @param {Promise|string|HTMLImageElement} imgData 
+ */
+const show_img_modal = async (imgData) => {
+    // 1. 基础遮罩容器
+    const mask = document.createElement('div');
+    Object.assign(mask.style, {
+        position: 'fixed', inset: '0', backgroundColor: 'rgba(0,0,0,0.85)',
+        display: 'flex', justifyContent: 'center', alignItems: 'center',
+        zIndex: '100000', backdropFilter: 'blur(4px)', overflow: 'hidden'
+    });
+
+    const data = await imgData;
+    let img = (data instanceof HTMLElement) ? data : new Image();
+    if (typeof data === "string") img.src = data;
+
+    Object.assign(img.style, { 
+        maxWidth: '90%', maxHeight: '90%', objectFit: 'contain',
+        border: '1px solid #555', boxShadow: '0 8px 30px rgba(0,0,0,0.5)',
+        backgroundColor: '#fff'
+    });
+
+    // --- 创建组合控件容器 ---
+    const panel = document.createElement('div');
+    Object.assign(panel.style, {
+        position: 'fixed', top: '30px', right: '30px',
+        display: 'flex', height: '40px', background: '#222',
+        borderRadius: '20px', boxShadow: '0 4px 15px rgba(0,0,0,0.8)',
+        zIndex: '100001', overflow: 'hidden', border: '1px solid #444'
+    });
+
+    // 1. 拖拽手柄
+    const dragHandle = document.createElement('div');
+    dragHandle.innerHTML = '⠿';
+    Object.assign(dragHandle.style, {
+        padding: '0 15px', cursor: 'move', backgroundColor: '#333',
+        height: '100%', display: 'flex', alignItems: 'center', color: '#888'
+    });
+
+    // 2. 保存按钮 (调用 savePick)
+    const saveBtn = document.createElement('div');
+    saveBtn.innerText = '保存截图';
+    Object.assign(saveBtn.style, {
+        padding: '0 15px', cursor: 'pointer', height: '100%',
+        display: 'flex', alignItems: 'center', fontSize: '13px',
+        fontWeight: 'bold', backgroundColor: '#2f54eb', color: '#fff',
+        borderRight: '1px solid #444'
+    });
+    saveBtn.onclick = async() => {
+       const handle = await window.showSaveFilePicker({
+            suggestedName: `screenshot_${new Date().getTime()}.png`,
+            types: [{
+                description: 'PNG Image',
+                accept: { 'image/png': ['.png'] },
+            }],
+        });
+        const response = await fetch(img.src);
+        const blob = await response.blob();
+        const writable = await handle.createWritable();
+        await writable.write(blob);
+        await writable.close();	
+    };
+
+    // 3. 关闭按钮
+    const closeBtn = document.createElement('div');
+    closeBtn.innerText = '关闭';
+    Object.assign(closeBtn.style, {
+        padding: '0 15px', cursor: 'pointer', height: '100%',
+        display: 'flex', alignItems: 'center', fontSize: '13px',
+        fontWeight: 'bold', backgroundColor: '#ff4d4f', color: '#fff'
+    });
+    closeBtn.onclick = () => {
+        mask.remove();
+        panel.remove();
+        window.onmousemove = null;
+        window.onmouseup = null;
+    };
+
+    // --- 拖拽逻辑 ---
+    let isDragging = false;
+    let offset = { x: 0, y: 0 };
+    dragHandle.onmousedown = (e) => {
+        isDragging = true;
+        offset.x = e.clientX - panel.offsetLeft;
+        offset.y = e.clientY - panel.offsetTop;
+    };
+    window.onmousemove = (e) => {
+        if (!isDragging) return;
+        panel.style.left = (e.clientX - offset.x) + 'px';
+        panel.style.top = (e.clientY - offset.y) + 'px';
+        panel.style.right = 'auto';
+    };
+    window.onmouseup = () => isDragging = false;
+
+    // 组装并渲染
+    panel.append(dragHandle, saveBtn, closeBtn);
+    mask.appendChild(img);
+    document.body.append(mask, panel);
+}
+////
+/**
+ * 格式转换核心函数
+ */
+const  convert_canvas = async (canvas, format) => {
+    if (format === 'b64') return canvas.toDataURL('image/png');
+    let blob = await new Promise(resolve => canvas.toBlob(resolve, 'image/png'));
+    switch (format) {
+        case 'url':  return URL.createObjectURL(blob);
+        case 'u8a':  return new Uint8Array(await blob.arrayBuffer());
+        case 'ab' :  return await blob.arrayBuffer();
+        case 'img':  {
+           return new Promise((resolve, reject) => {
+                const img = new Image();
+                const url = URL.createObjectURL(blob);
+                img.onload = () => {
+                    // 只要图片加载进内存，就可以释放临时的 Blob URL 了
+                    URL.revokeObjectURL(url); 
+                    resolve(img);
+                };
+                img.onerror = reject;
+                img.src = url;
+		img.crossOrigin = 'anonymous';
+            });        
+	}
+        default   :  return blob;
+    }
+}
+
+////
+/**
+ * 最终完善版：带高亮反馈和异常处理的元素截图
+ */
+const ele2img = async (element, format = undefined) => {
+    // 检查元素合法性
+    if (!element || !(element instanceof HTMLElement)) {
+        console.error("无效的元素对象");
+        return;
+    }
+
+    // 1. 记录原始样式并开启高亮反馈
+    const originalOutline = element.style.outline;
+    const originalTransition = element.style.transition;
+    
+    try {
+        // 瞬间高亮目标元素，给用户视觉确认
+        element.style.transition = "outline 0.2s ease";
+        element.style.outline = "4px solid #2f54eb";
+        element.style.outlineOffset = "2px";
+
+        // 2. 确保元素在视口中央
+        element.scrollIntoView({ block: 'center', behavior: 'instant' });
+
+        // 3. 启动捕获 (提示：需在弹窗中选择“当前标签页”)
+        const stream = await navigator.mediaDevices.getDisplayMedia({
+            video: { displaySurface: "browser" },
+            preferCurrentTab: true
+        });
+
+        const video = document.createElement('video');
+        video.srcObject = stream;
+        await video.play();
+
+        // --- 坐标与比例计算 ---
+        const scaleX = video.videoWidth / window.innerWidth;
+        const scaleY = video.videoHeight / window.innerHeight;
+        const rect = element.getBoundingClientRect();
+
+        const canvas = document.createElement('canvas');
+        canvas.width = rect.width * scaleX;
+        canvas.height = rect.height * scaleY;
+
+        const ctx = canvas.getContext('2d');
+        ctx.drawImage(
+            video,
+            rect.left * scaleX, rect.top * scaleY,
+            rect.width * scaleX, rect.height * scaleY,
+            0, 0,
+            canvas.width, canvas.height
+        );
+
+        // 停止流
+        stream.getTracks().forEach(track => track.stop());
+
+        // 4. 恢复元素原始样式
+        element.style.outline = originalOutline;
+        element.style.transition = originalTransition;
+
+        // 5. 处理结果
+        if (format === undefined) {
+            const imgEl = await convert_canvas(canvas, "img");
+            show_img_modal(imgEl);
+            return;
+        }
+        return await convert_canvas(canvas, format);
+
+    } catch (err) {
+        // 恢复样式防止卡死在高亮状态
+        element.style.outline = originalOutline;
+        element.style.transition = originalTransition;
+
+        // 完善的错误分类捕获
+        if (err.name === 'NotAllowedError') {
+            console.warn("用户取消了屏幕共享授权或权限被拒绝");
+        } else if (err.name === 'NotFoundError') {
+            console.error("未找到可用的媒体流源");
+        } else {
+            console.error("截图发生意外错误:", err);
+        }
+    }
+};
 
 
 module.exports = {
@@ -189,6 +404,9 @@ module.exports = {
     creat_simple_alert,
     simple_alert,
     cancel_simple_alert,
-    simple_confirm_cancel
+    simple_confirm_cancel,
+    show_img_modal,
+    convert_canvas,
+    ele2img
 };
 

package/util.js

@@ -0,0 +1,75 @@
+const is_async = (f)=>f.constructor.name === "AsyncFunction";
+const is_url = (s)=>{
+  if (typeof s !== "string") return false;
+  s = s.trim();
+  if (s === "") return false;
+
+  // 快路径（你系统里最常见的）
+  // 绝对 URL / 协议相对 / 绝对路径 / 相对路径
+  if (
+    s.startsWith("http://") ||
+    s.startsWith("https://") ||
+    s.startsWith("ws://") ||
+    s.startsWith("wss://") ||    
+    s.startsWith("//") ||
+    s.startsWith("/") ||
+    s.startsWith("./") ||
+    s.startsWith("../")
+  ) {
+    return true;
+  }
+
+  // data / blob / file / wasm 等（前端系统常见）
+  if (/^(data|blob|file|wasm):/i.test(s)) {
+    return true;
+  }
+  return false;
+}
+
+const fullfill_url = (url)=>{
+    if(
+       url.startsWith("http://")  || 
+       url.startsWith("https://") || 
+       url.startsWith("ws://")    || 
+       url.startsWith("wss://")   ||
+       /^(data|blob|file|wasm):/i.test(url)
+    ) {
+	return url;
+    } else if(
+       url.startsWith("//") || url.startsWith("/") || url.startsWith("./") || url.startsWith("../")
+    ) {
+        // protocol-relative: //cdn/a.js
+        if (url.startsWith("//")) {
+            return window.location.protocol + url;
+        }
+        // absolute path: /a/b
+        if (url.startsWith("/")) {
+            return window.location.origin + url;
+        }
+        // relative path: ./a  ../b  foo/bar
+        return new URL(url, window.location.href).href;    
+    } else {
+        return url
+    }
+}
+
+const creat_dt_prefix = () => new Date().toISOString().replace(/[:.]/g, "-");
+
+const CKRGX  = /^(.*?)=["]?(.*)["]?$/;
+const get_ck = (s=document.cookie)=>{
+   let arr = s.split("; ");
+   let d = {};
+   for(let e of arr) {
+      let grps = CKRGX.exec(e);
+      d[grps[1]] = grps[2];
+   }
+   return d;
+}
+
+module.exports = {
+   is_async,
+   is_url,
+   fullfill_url,
+   creat_dt_prefix,
+   get_ck
+}