pinokiod 3.41.0 → 3.42.0

package/server/public/common.js

@@ -1,3 +1,273 @@
+function downloadBlob(blob, filename = 'screenshot.png') {
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = filename;
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+  URL.revokeObjectURL(url);
+}
+async function uploadBlob(blob, filename = 'screenshot.png') {
+  const fd = new FormData();
+  fd.append('file', blob, filename);
+
+  // Adjust URL as needed; include credentials if you use cookies/sessions
+  const res = await fetch('/screenshot', {
+    method: 'POST',
+    body: fd,
+    credentials: 'include'
+  });
+
+  if (!res.ok) {
+    const text = await res.text();
+    throw new Error(`Upload failed: ${res.status} ${text}`);
+  }
+  const json = await res.json();
+  return json
+
+}
+async function screenshot(opts = {}) {
+  const {
+    container = document.body,
+    mimeType = 'image/png',
+    autoDownload = false,
+    filename = 'screenshot.png'
+  } = opts;
+
+  // 1) Capture one frame (no modal visible yet)
+  const stream = await navigator.mediaDevices.getDisplayMedia({
+    video: { cursor: 'always' },
+    audio: false
+  });
+
+  const video = document.createElement('video');
+  video.srcObject = stream;
+  video.playsInline = true;
+  video.muted = true;
+  Object.assign(video.style, {
+    position: 'fixed', opacity: '0', pointerEvents: 'none', transform: 'translate(-99999px,-99999px)'
+  });
+  document.body.appendChild(video);
+
+  await new Promise(res => {
+    const ready = () => (video.readyState >= 2 ? res() : (video.onloadeddata = () => res()));
+    video.addEventListener('loadedmetadata', ready, { once: true });
+    video.addEventListener('loadeddata', ready, { once: true });
+  });
+  await video.play().catch(()=>{});
+
+  const vw = video.videoWidth || 1920;
+  const vh = video.videoHeight || 1080;
+  const snap = document.createElement('canvas');
+  snap.width = vw; snap.height = vh;
+  snap.getContext('2d').drawImage(video, 0, 0, vw, vh);
+
+  // Stop quickly; we only needed one frame
+  stream.getTracks().forEach(t => t.stop());
+  video.remove();
+
+  // 2) Crop UI over STILL image
+  const root = document.createElement('div');
+  root.style.cssText = `
+    position:fixed; inset:0; z-index:2147483647;
+    background:rgba(0,0,0,.65); display:grid; place-items:center;
+    font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
+  `;
+  const frame = document.createElement('div');
+  frame.style.cssText = `
+    position:relative; background:#111; border-radius:12px; overflow:hidden;
+    box-shadow:0 10px 40px rgba(0,0,0,.5);
+    width:min(90vw,1200px);
+    display:grid; grid-template-rows:1fr auto;
+  `;
+  const stage = document.createElement('div');
+  stage.style.cssText = `position:relative;background:#000;`;
+
+  const img = new Image();
+  img.src = snap.toDataURL('image/png');
+  img.style.cssText = `max-width:100%;max-height:100%;display:block;margin:auto;user-select:none;`;
+
+  const overlay = document.createElement('canvas');
+  overlay.style.cssText = `position:absolute;inset:0;cursor:crosshair;touch-action:none;`;
+
+  const toolbar = document.createElement('div');
+  toolbar.style.cssText = `
+    display:flex;gap:8px;padding:10px;background:#0b0b0b;border-top:1px solid #222;
+    align-items:center;justify-content:space-between;color:#ddd;font-size:14px;
+  `;
+  const hint = document.createElement('div');
+  hint.textContent = 'Drag to select an area. Click “Save” to export.';
+  const right = document.createElement('div');
+  right.style.cssText = 'display:flex;gap:8px;';
+  const btnCancel = document.createElement('button');
+  const btnSave = document.createElement('button');
+  [btnCancel, btnSave].forEach(b => {
+    b.textContent = b === btnCancel ? 'Cancel' : 'Save';
+    b.style.cssText = `
+      padding:8px 12px;border-radius:8px;border:1px solid #2a2a2a;
+      background:#1a1a1a;color:#eee;cursor:pointer;
+    `;
+    b.onpointerdown = e => e.preventDefault();
+    b.onmouseenter = () => (b.style.background = '#222');
+    b.onmouseleave = () => (b.style.background = '#1a1a1a');
+  });
+
+  right.append(btnCancel, btnSave);
+  toolbar.append(hint, right);
+  stage.append(img, overlay);
+  frame.append(stage, toolbar);
+  root.append(frame);
+  container.append(root);
+
+  // 3) Cropping logic (DPR aware + exact image box)
+  const dpr = window.devicePixelRatio || 1;
+  const ctx = overlay.getContext('2d');
+
+  let dragging = false;
+  let start = { x: 0, y: 0 };
+  let rect = null; // {x,y,w,h} in CSS px
+
+  function fit() {
+    const r = stage.getBoundingClientRect();
+
+    // keep CSS size for layout
+    overlay.style.width = r.width + 'px';
+    overlay.style.height = r.height + 'px';
+
+    // scale backing store for HiDPI
+    overlay.width  = Math.round(r.width  * dpr);
+    overlay.height = Math.round(r.height * dpr);
+
+    // 1 canvas unit == 1 CSS px
+    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+
+    drawOverlay();
+  }
+
+  function drawOverlay() {
+    ctx.clearRect(0, 0, overlay.width / dpr, overlay.height / dpr);
+    ctx.fillStyle = 'rgba(0,0,0,0.35)';
+    ctx.fillRect(0, 0, overlay.width / dpr, overlay.height / dpr);
+    if (rect && rect.w > 2 && rect.h > 2) {
+      ctx.save();
+      ctx.globalCompositeOperation = 'destination-out';
+      ctx.fillRect(rect.x, rect.y, rect.w, rect.h);
+      ctx.restore();
+      ctx.strokeStyle = '#00d1ff';
+      ctx.lineWidth = 2;
+      ctx.setLineDash([6,6]);
+      ctx.strokeRect(rect.x+1, rect.y+1, rect.w-2, rect.h-2);
+    }
+  }
+
+  function toLocal(e) {
+    const r = overlay.getBoundingClientRect();
+    return { x: e.clientX - r.left, y: e.clientY - r.top };
+  }
+
+  overlay.addEventListener('pointerdown', e => {
+    dragging = true;
+    start = toLocal(e);
+    rect = { x: start.x, y: start.y, w: 0, h: 0 };
+    drawOverlay();
+  });
+  overlay.addEventListener('pointermove', e => {
+    if (!dragging) return;
+    const p = toLocal(e);
+    rect = { x: Math.min(start.x, p.x), y: Math.min(start.y, p.y), w: Math.abs(p.x - start.x), h: Math.abs(p.y - start.y) };
+    drawOverlay();
+  });
+  const endDrag = () => (dragging = false);
+  overlay.addEventListener('pointerup', endDrag);
+  overlay.addEventListener('pointerleave', endDrag);
+  window.addEventListener('resize', fit);
+
+  await new Promise(res => (img.complete ? res() : (img.onload = res)));
+  fit();
+
+  function cleanup() {
+    window.removeEventListener('resize', fit);
+    root.remove();
+  }
+
+  // Exact image placement from layout
+  function computeImageBox() {
+    const ir = img.getBoundingClientRect();
+    const sr = stage.getBoundingClientRect();
+    return {
+      offsetX: ir.left - sr.left,
+      offsetY: ir.top  - sr.top,
+      displayW: ir.width,
+      displayH: ir.height,
+      iw: img.naturalWidth,
+      ih: img.naturalHeight
+    };
+  }
+
+  async function exportCrop() {
+    const { offsetX, offsetY, displayW, displayH, iw, ih } = computeImageBox();
+
+    let sx = 0, sy = 0, sw = iw, sh = ih;
+
+    if (rect && rect.w > 4 && rect.h > 4) {
+      const rx = Math.max(0, rect.x - offsetX);
+      const ry = Math.max(0, rect.y - offsetY);
+      const rw = Math.max(0, Math.min(rect.w, displayW - rx));
+      const rh = Math.max(0, Math.min(rect.h, displayH - ry));
+
+      const scaleX = iw / displayW;
+      const scaleY = ih / displayH;
+
+      // Optional tiny inset to avoid 1px halos on borders
+      const epsilon = 0.01;
+
+      sx = Math.max(0, Math.round((rx + epsilon) * scaleX));
+      sy = Math.max(0, Math.round((ry + epsilon) * scaleY));
+      sw = Math.max(1, Math.round(rw * scaleX));
+      sh = Math.max(1, Math.round(rh * scaleY));
+    }
+
+    const out = document.createElement('canvas');
+    out.width = sw; out.height = sh;
+    const octx = out.getContext('2d');
+    octx.imageSmoothingQuality = 'high';
+    // draw from the full-res snapshot
+    octx.drawImage(snap, sx, sy, sw, sh, 0, 0, sw, sh);
+
+    const blob = await new Promise(res => out.toBlob(res, mimeType));
+    const dataURL = out.toDataURL(mimeType);
+
+    if (autoDownload && blob) {
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = filename;
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      URL.revokeObjectURL(url);
+    }
+    uploadBlob(blob)
+//    downloadBlob(blob)
+    return { blob, dataURL };
+  }
+
+  return new Promise((resolve, reject) => {
+    btnCancel.onclick = () => { cleanup(); reject(new DOMException('Canceled', 'AbortError')); };
+    btnSave.onclick = async () => {
+      try {
+        const res = await exportCrop();
+        cleanup();
+        resolve(res);
+      } catch (e) {
+        cleanup();
+        reject(e);
+      }
+    };
+  });
+}
+
 const open_url2 = (href, target, features) => {
   if (target) {
     if (target === "_blank") {
@@ -39,6 +309,19 @@ const refreshParent = (e) => {
   }
 }
 document.addEventListener("DOMContentLoaded", () => {
+  try {
+    tippy("[data-tippy-content]", {
+      theme: "pointer"
+    })
+  } catch(e) {
+    console.log(e)
+  }
+  
+  if (document.querySelector("#screenshot")) {
+    document.querySelector("#screenshot").addEventListener("click", (e) => {
+      screenshot()
+    })
+  }
   if (document.querySelector("#back")) {
     document.querySelector("#back").addEventListener("click", (e) => {
       history.back()
@@ -51,9 +334,94 @@ document.addEventListener("DOMContentLoaded", () => {
   }
   if (document.querySelector("#refresh-page")) {
     document.querySelector("#refresh-page").addEventListener("click", (e) => {
-      location.reload()
+      let browserview = document.querySelector(".browserview")
+      if (browserview) {
+        let iframe = browserview.querySelector("iframe:not(.hidden)")
+        try {
+          iframe.contentWindow.location.reload()
+        } catch (e) {
+          iframe.src=iframe.src
+        }
+        refresh()
+      } else {
+        location.reload()
+      }
+    })
+  }
+  if (document.querySelector("#clone-win")) {
+    document.querySelector("#clone-win").addEventListener("click", (e) => {
+      open_url2(location.href, "_blank")
+    })
+  }
+
+  const dropdown = document.querySelector('.dropdown');
+  if (dropdown) {
+    const dropdownBtn = document.getElementById('window-management');
+    const dropdownContent = document.getElementById('dropdown-content');
+    let hoverTimeout;
+
+    // Show dropdown on hover
+    /*
+    dropdown.addEventListener('mouseenter', function() {
+        clearTimeout(hoverTimeout);
+        openDropdown();
+    });
+
+    // Hide dropdown when mouse leaves (with small delay)
+    dropdown.addEventListener('mouseleave', function() {
+        hoverTimeout = setTimeout(() => {
+            closeDropdown();
+        }, 100); // Small delay to prevent flickering when moving mouse
+    });
+    */
+
+    // Toggle dropdown on button click (still works for touch devices)
+    dropdownBtn.addEventListener('click', function(e) {
+        e.stopPropagation();
+        const isOpen = dropdownContent.classList.contains('show');
+        
+        if (isOpen) {
+            closeDropdown();
+        } else {
+            openDropdown();
+        }
+    });
+
+    // Close dropdown when clicking outside
+    document.addEventListener('click', function(e) {
+//        if (!dropdown.contains(e.target)) {
+            closeDropdown();
+//        }
+    });
+
+    // Close dropdown when pressing Escape key
+    document.addEventListener('keydown', function(e) {
+        if (e.key === 'Escape') {
+            closeDropdown();
+        }
+    });
+
+    function openDropdown() {
+        dropdownContent.classList.add('show');
+        dropdown.classList.add('active');
+    }
+
+    function closeDropdown() {
+        dropdownContent.classList.remove('show');
+        dropdown.classList.remove('active');
+    }
+  }
+
+
+  if (document.querySelector(".urlbar")) {
+    document.querySelector(".urlbar").addEventListener("submit", (e) => {
+      e.preventDefault()
+      e.stopPropagation()
+      debugger
+      location.href = "/container?url=" + e.target.querySelector("input[type=url]").value
     })
   }
+
   if (document.querySelector("#genlog")) {
     document.querySelector("#genlog").addEventListener("click", (e) => {
       e.preventDefault()
@@ -72,6 +440,19 @@ document.addEventListener("DOMContentLoaded", () => {
       })
     })
   }
+  if (document.querySelector("#close-window")) {
+    const isInIframe = window.self !== window.top;
+    console.log("isInIframe", isInIframe)
+    if (isInIframe) {
+      document.querySelector("#close-window").classList.remove("hidden")
+      document.querySelector("#close-window").addEventListener("click", (e) => {
+        window.parent.postMessage({
+          e: "close"
+        }, "*")
+//        open_url2(location.href, "_blank")
+      })
+    }
+  }
   if (document.querySelector("#create-new-folder")) {
     document.querySelector("#create-new-folder").addEventListener("click", async (e) => {
       e.preventDefault()

package/server/public/fscreator.js

@@ -111,7 +111,6 @@ const FSCreator = async (config) => {
                 alert(err.error)
               },
               ondata: (formData) => {
-                debugger
                 // set custom input fields
                 if (config.input) {
                   for(let input of config.input) {

package/server/public/loading.js

@@ -0,0 +1,17 @@
+const LoadingDialog = {
+  start: (msg) => {
+    Swal.fire({
+      html: `<i class="fa-solid fa-circle-notch fa-spin"></i> ${msg}`,
+      customClass: {
+        container: "loader-container",
+        popup: "loader-popup",
+        htmlContainer: "loader-dialog",
+        footer: "hidden",
+        actions: "hidden"
+      }
+    });
+  },
+  end: () => {
+    Swal.close()
+  }
+}

package/server/public/notifyinput.js

@@ -59,7 +59,6 @@ const NotifyInput = async (params, n) => {
     }
   }
   let input = notification.barDom.querySelector("[data-id]")
-  debugger
   if (input) {
     if (input.oninput) input.oninput(input)
     input.focus()

package/server/public/opener.js

@@ -39,7 +39,6 @@ document.addEventListener("click", async (e) => {
     }
   }
   if (el) {
-    debugger
     e.preventDefault()
     e.stopPropagation()
     let filepath = el.getAttribute("data-filepath")
@@ -101,7 +100,10 @@ document.addEventListener("click", async (e) => {
     e.preventDefault()
     e.stopPropagation()
     let features = el.getAttribute("features")
-    open_url(el.href, "_blank", features)
+    let href = el.href || el.getAttribute("data-href")
+    if (href) {
+      open_url(href, "_blank", features)
+    }
 //    if (features && features.includes("app")) {
 //      window.open(el.href, "_blank", features)
 //    } else {