@omrips/viewstl 2.0.0-rc.6 → 2.0.0-rc.7

package/build/viewstl.cjs

@@ -1,3 +1,4 @@
+//=========== Stl Viewer v2.0.0-rc.7, by Omri Rips, Viewstl.com, November 2026 ; admin@viewstl.com ===========
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -2369,7 +2370,7 @@ function modelOptions(input) {
   return out;
 }
 var StlViewer = class _StlViewer {
-  static version = "2.0.0-rc.6";
+  static version = "2.0.0-rc.7";
   static workerURL = null;
   constructor(parent, options = {}) {
     if (!parent?.appendChild)
@@ -3823,7 +3824,7 @@ var StlViewer = class _StlViewer {
       null,
       scene.files.map((f) => f.bin)
     );
-    return new Blob([await job], { type: "application/zip" });
+    return new Blob([await job], { type: "application/octet-stream" });
   }
   download_vsb(filename = "1.vsb") {
     return this.get_vsb_blob().then(
@@ -5593,7 +5594,7 @@ function mountViewstlApp(root, options = {}) {
   let animationUI;
   let toolsUI;
   let sceneImport;
-  let draining = false, busy = false, gridEnabled = false, gridHeight = 0, gridSpacing = 1, moveMode = false, transformTool = "move", modelMover, dragArrangement, background = "transparent";
+  let draining = false, busy = false, gridEnabled = false, gridHeight = 0, gridSpacing = 1, moveMode = false, selectionMode = false, selectionPointer = null, transformTool = "move", modelMover, dragArrangement, background = "transparent";
   const viewNames = {
     flat: "Solid",
     edges: "Solid + edges",
@@ -5604,6 +5605,7 @@ function mountViewstlApp(root, options = {}) {
     orientation: "Face orientation"
   };
   const modeInputs = [...root.querySelectorAll('[name="view-mode"]')];
+  const shortcutButtons = [...root.querySelectorAll("[data-viewstl-shortcut]")];
   if (options.id_prefix)
     modeInputs.forEach(
       (input) => input.name = options.id_prefix + "view-mode"
@@ -5623,7 +5625,44 @@ function mountViewstlApp(root, options = {}) {
   }
   function syncSelection() {
     viewer?.set_selection(
-      !busy && records.has(modelID) && (moveMode || !$("scene-panel").hidden) ? modelID : null
+      !busy && records.has(modelID) && (selectionMode || moveMode || !$("scene-panel").hidden) ? modelID : null
+    );
+  }
+  function syncShortcuts() {
+    for (const button of shortcutButtons) {
+      const action = button.dataset.viewstlShortcut;
+      button.disabled = busy || !records.size || action === "save" && !exportUI;
+      if (action === "select")
+        button.setAttribute("aria-pressed", String(selectionMode));
+    }
+  }
+  function setSelectionMode(enabled) {
+    if (enabled) setMoveMode(false);
+    selectionMode = !!enabled && !busy && records.size > 0;
+    selectionPointer = null;
+    if (viewer) {
+      viewer.controls.enabled = !selectionMode;
+      viewer.canvas.setAttribute(
+        "aria-label",
+        selectionMode ? "Select a model with a click. Escape returns to viewing." : "3D model viewer. Drag to rotate, shift-drag to pan, scroll to zoom."
+      );
+    }
+    $("workspace").classList.toggle("selecting-model-mode", selectionMode);
+    syncShortcuts();
+    syncSelection();
+  }
+  function editModelAt(event) {
+    const hit = viewer.pick_model(event.clientX, event.clientY);
+    if (!hit || !records.has(hit.id)) return;
+    event.preventDefault();
+    selectModel(hit.id);
+    closePanels();
+    $("scene-panel").hidden = false;
+    $("scene-button").setAttribute("aria-expanded", "true");
+    $("position-details").open = true;
+    syncSelection();
+    announce(
+      records.get(hit.id).name + " selected. Choose Move, Rotate or Depth."
     );
   }
   function closePanel(name) {
@@ -5699,6 +5738,7 @@ function mountViewstlApp(root, options = {}) {
     printUI?.sync();
     animationUI?.sync();
     toolsUI?.sync();
+    syncShortcuts();
   }
   function populateInfo() {
     if (modelID === null) return;
@@ -5739,6 +5779,7 @@ function mountViewstlApp(root, options = {}) {
   }
   function renderScene() {
     const has = records.size > 0;
+    if (!has && selectionMode) setSelectionMode(false);
     $("workspace").classList.toggle("has-models", has);
     $("viewer").hidden = !has && !busy;
     $("empty-state").hidden = has || busy;
@@ -5757,6 +5798,7 @@ function mountViewstlApp(root, options = {}) {
   function setBusy(value) {
     if (value) exportUI?.close();
     if (disposed) return;
+    if (value && selectionMode) setSelectionMode(false);
     if (value) setMoveMode(false);
     busy = value;
     $("loading-state").hidden = !value;
@@ -5894,6 +5936,7 @@ function mountViewstlApp(root, options = {}) {
     $("move-gesture-message").textContent = toolHints[transformTool] + " \xB7 Scroll to adjust depth";
   }
   function setMoveMode(enabled, tool = transformTool, retainPaused = false) {
+    if (enabled && selectionMode) setSelectionMode(false);
     modelMover?.setEnabled(false);
     transformTool = tool;
     moveMode = !!enabled && modelID !== null && !busy;
@@ -5906,7 +5949,7 @@ function mountViewstlApp(root, options = {}) {
     if (viewer?.canvas)
       viewer.canvas.setAttribute(
         "aria-label",
-        moveMode ? toolHints[transformTool] + ". Scroll changes only its depth. Escape exits." : "3D model viewer. Drag to rotate, shift-drag to pan, scroll to zoom."
+        moveMode ? toolHints[transformTool] + ". Scroll changes only its depth. Escape exits." : selectionMode ? "Select a model with a click. Escape returns to viewing." : "3D model viewer. Drag to rotate, shift-drag to pan, scroll to zoom."
       );
     if (moveMode) {
       closePanels();
@@ -6144,20 +6187,39 @@ function mountViewstlApp(root, options = {}) {
           }
         });
         listen(viewer.canvas, "dblclick", (event) => {
-          if (busy || event.button !== 0) return;
-          const hit = viewer.pick_model(event.clientX, event.clientY);
-          if (!hit || !records.has(hit.id)) return;
+          if (busy || selectionMode || event.button !== 0) return;
+          editModelAt(event);
+        });
+        listen(viewer.canvas, "pointerdown", (event) => {
+          if (!selectionMode || busy || event.button !== 0 || !event.isPrimary)
+            return;
+          selectionPointer = {
+            id: event.pointerId,
+            x: event.clientX,
+            y: event.clientY,
+            moved: false
+          };
+          viewer.canvas.focus({ preventScroll: true });
+          viewer.canvas.setPointerCapture(event.pointerId);
           event.preventDefault();
-          selectModel(hit.id);
-          closePanels();
-          $("scene-panel").hidden = false;
-          $("scene-button").setAttribute("aria-expanded", "true");
-          $("position-details").open = true;
-          syncSelection();
-          announce(
-            records.get(hit.id).name + " selected. Choose Move, Rotate or Depth."
-          );
         });
+        listen(viewer.canvas, "pointermove", (event) => {
+          if (selectionPointer?.id === event.pointerId && Math.hypot(
+            event.clientX - selectionPointer.x,
+            event.clientY - selectionPointer.y
+          ) > 6)
+            selectionPointer.moved = true;
+        });
+        listen(viewer.canvas, "pointerup", (event) => {
+          const pointer = selectionPointer;
+          selectionPointer = null;
+          if (selectionMode && !busy && pointer?.id === event.pointerId && !pointer.moved)
+            editModelAt(event);
+        });
+        for (const event of ["pointercancel", "lostpointercapture"])
+          listen(viewer.canvas, event, () => {
+            selectionPointer = null;
+          });
         return viewer;
       }).catch((error) => {
         modelMover?.dispose();
@@ -6422,6 +6484,39 @@ function mountViewstlApp(root, options = {}) {
     }
   }
   root.querySelectorAll("[data-open-file]").forEach((b) => listen(b, "click", () => $("file-input").click()));
+  for (const button of shortcutButtons)
+    listen(button, "click", () => {
+      if (button.disabled || busy || !records.size) return;
+      const action = button.dataset.viewstlShortcut;
+      if (action === "save") $("save-button")?.click();
+      else if (action === "select") {
+        setSelectionMode(!selectionMode);
+        closePanels();
+        announce(
+          selectionMode ? "Selection mode. Click a model; Escape returns to viewing." : "Viewing mode. Drag to rotate the scene."
+        );
+      } else if ([
+        "front",
+        "back",
+        "left",
+        "right",
+        "top",
+        "bottom",
+        "isometric"
+      ].includes(action)) {
+        setMoveMode(false);
+        setSelectionMode(false);
+        viewer.set_camera_view(action);
+        toolsUI?.sync();
+        announce(button.title || action + " view");
+      }
+    });
+  listen(window2, "resize", () => {
+    if (selectionMode && !shortcutButtons.some(
+      (button) => button.dataset.viewstlShortcut === "select" && button.getClientRects().length
+    ))
+      setSelectionMode(false);
+  });
   listen($("file-input"), "change", () => {
     const files = [...$("file-input").files];
     $("file-input").value = "";
@@ -6633,6 +6728,12 @@ function mountViewstlApp(root, options = {}) {
   listen(root, "keydown", (event) => {
     if (event.key !== "Escape") return;
     if ($("save-dialog")?.open) return;
+    if (selectionMode) {
+      setSelectionMode(false);
+      closePanels();
+      announce("Viewing mode. Drag to rotate the scene.");
+      return;
+    }
     if (moveMode) {
       setMoveMode(false);
       announce("Move tool closed.");

package/build/viewstl.js

@@ -1,3 +1,5 @@
+//=========== Stl Viewer v2.0.0-rc.7, by Omri Rips, Viewstl.com, November 2026 ; admin@viewstl.com ===========
+
 // src/math.js
 var add = (a, b) => a.map((v, i) => v + b[i]);
 var sub = (a, b) => a.map((v, i) => v - b[i]);
@@ -2342,7 +2344,7 @@ function modelOptions(input) {
   return out;
 }
 var StlViewer = class _StlViewer {
-  static version = "2.0.0-rc.6";
+  static version = "2.0.0-rc.7";
   static workerURL = null;
   constructor(parent, options = {}) {
     if (!parent?.appendChild)
@@ -3796,7 +3798,7 @@ var StlViewer = class _StlViewer {
       null,
       scene.files.map((f) => f.bin)
     );
-    return new Blob([await job], { type: "application/zip" });
+    return new Blob([await job], { type: "application/octet-stream" });
   }
   download_vsb(filename = "1.vsb") {
     return this.get_vsb_blob().then(
@@ -5565,7 +5567,7 @@ function mountViewstlApp(root, options = {}) {
   let animationUI;
   let toolsUI;
   let sceneImport;
-  let draining = false, busy = false, gridEnabled = false, gridHeight = 0, gridSpacing = 1, moveMode = false, transformTool = "move", modelMover, dragArrangement, background = "transparent";
+  let draining = false, busy = false, gridEnabled = false, gridHeight = 0, gridSpacing = 1, moveMode = false, selectionMode = false, selectionPointer = null, transformTool = "move", modelMover, dragArrangement, background = "transparent";
   const viewNames = {
     flat: "Solid",
     edges: "Solid + edges",
@@ -5576,6 +5578,7 @@ function mountViewstlApp(root, options = {}) {
     orientation: "Face orientation"
   };
   const modeInputs = [...root.querySelectorAll('[name="view-mode"]')];
+  const shortcutButtons = [...root.querySelectorAll("[data-viewstl-shortcut]")];
   if (options.id_prefix)
     modeInputs.forEach(
       (input) => input.name = options.id_prefix + "view-mode"
@@ -5595,7 +5598,44 @@ function mountViewstlApp(root, options = {}) {
   }
   function syncSelection() {
     viewer?.set_selection(
-      !busy && records.has(modelID) && (moveMode || !$("scene-panel").hidden) ? modelID : null
+      !busy && records.has(modelID) && (selectionMode || moveMode || !$("scene-panel").hidden) ? modelID : null
+    );
+  }
+  function syncShortcuts() {
+    for (const button of shortcutButtons) {
+      const action = button.dataset.viewstlShortcut;
+      button.disabled = busy || !records.size || action === "save" && !exportUI;
+      if (action === "select")
+        button.setAttribute("aria-pressed", String(selectionMode));
+    }
+  }
+  function setSelectionMode(enabled) {
+    if (enabled) setMoveMode(false);
+    selectionMode = !!enabled && !busy && records.size > 0;
+    selectionPointer = null;
+    if (viewer) {
+      viewer.controls.enabled = !selectionMode;
+      viewer.canvas.setAttribute(
+        "aria-label",
+        selectionMode ? "Select a model with a click. Escape returns to viewing." : "3D model viewer. Drag to rotate, shift-drag to pan, scroll to zoom."
+      );
+    }
+    $("workspace").classList.toggle("selecting-model-mode", selectionMode);
+    syncShortcuts();
+    syncSelection();
+  }
+  function editModelAt(event) {
+    const hit = viewer.pick_model(event.clientX, event.clientY);
+    if (!hit || !records.has(hit.id)) return;
+    event.preventDefault();
+    selectModel(hit.id);
+    closePanels();
+    $("scene-panel").hidden = false;
+    $("scene-button").setAttribute("aria-expanded", "true");
+    $("position-details").open = true;
+    syncSelection();
+    announce(
+      records.get(hit.id).name + " selected. Choose Move, Rotate or Depth."
     );
   }
   function closePanel(name) {
@@ -5671,6 +5711,7 @@ function mountViewstlApp(root, options = {}) {
     printUI?.sync();
     animationUI?.sync();
     toolsUI?.sync();
+    syncShortcuts();
   }
   function populateInfo() {
     if (modelID === null) return;
@@ -5711,6 +5752,7 @@ function mountViewstlApp(root, options = {}) {
   }
   function renderScene() {
     const has = records.size > 0;
+    if (!has && selectionMode) setSelectionMode(false);
     $("workspace").classList.toggle("has-models", has);
     $("viewer").hidden = !has && !busy;
     $("empty-state").hidden = has || busy;
@@ -5729,6 +5771,7 @@ function mountViewstlApp(root, options = {}) {
   function setBusy(value) {
     if (value) exportUI?.close();
     if (disposed) return;
+    if (value && selectionMode) setSelectionMode(false);
     if (value) setMoveMode(false);
     busy = value;
     $("loading-state").hidden = !value;
@@ -5866,6 +5909,7 @@ function mountViewstlApp(root, options = {}) {
     $("move-gesture-message").textContent = toolHints[transformTool] + " \xB7 Scroll to adjust depth";
   }
   function setMoveMode(enabled, tool = transformTool, retainPaused = false) {
+    if (enabled && selectionMode) setSelectionMode(false);
     modelMover?.setEnabled(false);
     transformTool = tool;
     moveMode = !!enabled && modelID !== null && !busy;
@@ -5878,7 +5922,7 @@ function mountViewstlApp(root, options = {}) {
     if (viewer?.canvas)
       viewer.canvas.setAttribute(
         "aria-label",
-        moveMode ? toolHints[transformTool] + ". Scroll changes only its depth. Escape exits." : "3D model viewer. Drag to rotate, shift-drag to pan, scroll to zoom."
+        moveMode ? toolHints[transformTool] + ". Scroll changes only its depth. Escape exits." : selectionMode ? "Select a model with a click. Escape returns to viewing." : "3D model viewer. Drag to rotate, shift-drag to pan, scroll to zoom."
       );
     if (moveMode) {
       closePanels();
@@ -6116,20 +6160,39 @@ function mountViewstlApp(root, options = {}) {
           }
         });
         listen(viewer.canvas, "dblclick", (event) => {
-          if (busy || event.button !== 0) return;
-          const hit = viewer.pick_model(event.clientX, event.clientY);
-          if (!hit || !records.has(hit.id)) return;
+          if (busy || selectionMode || event.button !== 0) return;
+          editModelAt(event);
+        });
+        listen(viewer.canvas, "pointerdown", (event) => {
+          if (!selectionMode || busy || event.button !== 0 || !event.isPrimary)
+            return;
+          selectionPointer = {
+            id: event.pointerId,
+            x: event.clientX,
+            y: event.clientY,
+            moved: false
+          };
+          viewer.canvas.focus({ preventScroll: true });
+          viewer.canvas.setPointerCapture(event.pointerId);
           event.preventDefault();
-          selectModel(hit.id);
-          closePanels();
-          $("scene-panel").hidden = false;
-          $("scene-button").setAttribute("aria-expanded", "true");
-          $("position-details").open = true;
-          syncSelection();
-          announce(
-            records.get(hit.id).name + " selected. Choose Move, Rotate or Depth."
-          );
         });
+        listen(viewer.canvas, "pointermove", (event) => {
+          if (selectionPointer?.id === event.pointerId && Math.hypot(
+            event.clientX - selectionPointer.x,
+            event.clientY - selectionPointer.y
+          ) > 6)
+            selectionPointer.moved = true;
+        });
+        listen(viewer.canvas, "pointerup", (event) => {
+          const pointer = selectionPointer;
+          selectionPointer = null;
+          if (selectionMode && !busy && pointer?.id === event.pointerId && !pointer.moved)
+            editModelAt(event);
+        });
+        for (const event of ["pointercancel", "lostpointercapture"])
+          listen(viewer.canvas, event, () => {
+            selectionPointer = null;
+          });
         return viewer;
       }).catch((error) => {
         modelMover?.dispose();
@@ -6394,6 +6457,39 @@ function mountViewstlApp(root, options = {}) {
     }
   }
   root.querySelectorAll("[data-open-file]").forEach((b) => listen(b, "click", () => $("file-input").click()));
+  for (const button of shortcutButtons)
+    listen(button, "click", () => {
+      if (button.disabled || busy || !records.size) return;
+      const action = button.dataset.viewstlShortcut;
+      if (action === "save") $("save-button")?.click();
+      else if (action === "select") {
+        setSelectionMode(!selectionMode);
+        closePanels();
+        announce(
+          selectionMode ? "Selection mode. Click a model; Escape returns to viewing." : "Viewing mode. Drag to rotate the scene."
+        );
+      } else if ([
+        "front",
+        "back",
+        "left",
+        "right",
+        "top",
+        "bottom",
+        "isometric"
+      ].includes(action)) {
+        setMoveMode(false);
+        setSelectionMode(false);
+        viewer.set_camera_view(action);
+        toolsUI?.sync();
+        announce(button.title || action + " view");
+      }
+    });
+  listen(window2, "resize", () => {
+    if (selectionMode && !shortcutButtons.some(
+      (button) => button.dataset.viewstlShortcut === "select" && button.getClientRects().length
+    ))
+      setSelectionMode(false);
+  });
   listen($("file-input"), "change", () => {
     const files = [...$("file-input").files];
     $("file-input").value = "";
@@ -6605,6 +6701,12 @@ function mountViewstlApp(root, options = {}) {
   listen(root, "keydown", (event) => {
     if (event.key !== "Escape") return;
     if ($("save-dialog")?.open) return;
+    if (selectionMode) {
+      setSelectionMode(false);
+      closePanels();
+      announce("Viewing mode. Drag to rotate the scene.");
+      return;
+    }
     if (moveMode) {
       setMoveMode(false);
       announce("Move tool closed.");