new WebGPU Shader Toy version

pongasoft · Jul 29, 2024 · da331d4 · da331d4
1 parent 715a036
commit da331d4
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 16 deletions.
diff --git a/webgpu-shader-toy/index.html b/webgpu-shader-toy/index.html
@@ -36,6 +36,7 @@
       height: 0;
       cursor: nwse-resize;
       transition: border-bottom-color 0.5s ease;
+      z-index: 1;
     }
 
     .canvas-handle:hover {
@@ -59,12 +60,21 @@
       overflow-x: clip;
     }
 
+    .left-pane {
+      order: 0;
+    }
+
     .separator {
       width: 4px;
       border-left: solid 1px;
       border-right: solid 1px;
       cursor: ew-resize;
       transition: background-color 0.5s ease;
+      order: 1;
+    }
+
+    .right-pane {
+      order: 2;
     }
 
     .separator:hover {
@@ -302,12 +312,12 @@ <h3 class="error">This tool requires javascript (currently disabled)!</h3>
 </div>
 
 <div id="canvases" class="split-pane">
-  <div id="canvas1-container" class="canvas-container pane" style="width: 50%">
+  <div id="canvas1-container" class="canvas-container pane left-pane" style="width: 50%">
     <div id="canvas1-handle" class="canvas-handle hidden"></div>
     <canvas id="canvas1" oncontextmenu="event.preventDefault()"></canvas>
   </div>
   <div class="separator" id="separator"></div>
-  <div id="canvas2-container" class="canvas-container pane" style="width: 50%">
+  <div id="canvas2-container" class="canvas-container pane right-pane" style="width: 50%">
     <div id="canvas2-handle" class="canvas-handle hidden"></div>
     <canvas id="canvas2" oncontextmenu="event.preventDefault()"></canvas>
   </div>
@@ -328,7 +338,7 @@ <h3>Something went wrong</h3>
   </ul>
 </div>
 
-<div id="footer"><a href="https://pongasoft.com" target="_blank">pongasoft</a> | <a href="?reset">Reset</a> | <a href="https://github.com/pongasoft/webgpu-shader-toy" target="_blank">v2024.07.21</a></div>
+<div id="footer"><a href="https://pongasoft.com" target="_blank">pongasoft</a> | <a href="?reset">Reset</a> | <a href="https://github.com/pongasoft/webgpu-shader-toy" target="_blank">v2024.07.29</a></div>
 
 <script type='text/javascript'>
   var Module = {isResizing: false};
@@ -415,6 +425,11 @@ <h3>Something went wrong</h3>
         SplitPaneMgr.setLayout(manualLayout, leftPaneWidth, rightPaneWidth);
       };
 
+      // Module.wst_set_window_order
+      Module.wst_set_window_order = (leftWindow, rightWindow) => {
+        SplitPaneMgr.setWindowOrder(leftWindow, rightWindow);
+      };
+
       // Module.wst_wait_for_continue
       Module.wst_wait_for_continue = async () => {
         fadeAndRemove("#intro .status", 0);
@@ -432,7 +447,7 @@ <h3>Something went wrong</h3>
       // load the main wasm code
       let scriptTag = document.createElement("script");
       scriptTag.type = "text/javascript";
-      scriptTag.src = "index.js";
+      scriptTag.src = "index.js?v2024.07.29";
       scriptTag.async = true;
       document.head.appendChild(scriptTag);
     })();
@@ -577,11 +592,36 @@ <h3>Something went wrong</h3>
         SplitPaneMgr.removeAutomaticLayout();
     },
 
+    // getContainer
+    getContainer: (w) => {
+      const canvas = Module.glfwGetCanvas(w);
+      return document.querySelector(`#${canvas.id}-container`);
+    },
+
+    // setWindowOrder
+    setWindowOrder: (leftWindow, rightWindow) => {
+      SplitPaneMgr.setPaneOrder(SplitPaneMgr.getContainer(leftWindow), SplitPaneMgr.getContainer(rightWindow));
+    },
+
+    // setPaneOrder
+    setPaneOrder: (leftPane, rightPane) => {
+      leftPane.classList.replace('right-pane', 'left-pane');
+      rightPane.classList.replace('left-pane', 'right-pane');
+    },
+
+    // getLeftPane
+    getLeftPane: () => {
+      return document.querySelector('.left-pane');
+    },
+
+    // getRightPane
+    getRightPane: () => {
+      return document.querySelector('.right-pane');
+    },
+
     // setAutomaticLayout
     setAutomaticLayout: (iLeftPaneWidth, iRightPaneWidth) => {
       const separator = document.getElementById('separator');
-      const leftPane = document.getElementById('canvas1-container');
-      const rightPane = document.getElementById('canvas2-container');
 
       separator.addEventListener('mousedown', startResize);
       separator.addEventListener('dblclick', resetResize);
@@ -595,13 +635,13 @@ <h3>Something went wrong</h3>
       }
 
       function setPanesWidth(leftPaneWidth) {
-        leftPane.style.width = `${leftPaneWidth}px`;
-        rightPane.style.width = `calc(100% - ${leftPaneWidth}px)`;
+        SplitPaneMgr.getLeftPane().style.width = `${leftPaneWidth}px`;
+        SplitPaneMgr.getRightPane().style.width = `calc(100% - ${leftPaneWidth}px)`;
       }
 
       function splitPanesEvenly() {
-        leftPane.style.width = '50%';
-        rightPane.style.width = '50%';
+        SplitPaneMgr.getLeftPane().style.width = '50%';
+        SplitPaneMgr.getRightPane().style.width = '50%';
       }
 
       if(iLeftPaneWidth === iRightPaneWidth)
@@ -610,7 +650,7 @@ <h3>Something went wrong</h3>
         setPanesWidth(iLeftPaneWidth);
 
       var lastDownX = 0;
-      var leftPaneWidth = computeWidth(leftPane);
+      var leftPaneWidth = computeWidth(SplitPaneMgr.getLeftPane());
 
       function computeDownX(e) {
         return e.clientX;
@@ -619,7 +659,7 @@ <h3>Something went wrong</h3>
       function startResize(e) {
         e.preventDefault();
         lastDownX = computeDownX(e);
-        leftPaneWidth = computeWidth(leftPane);
+        leftPaneWidth = computeWidth(SplitPaneMgr.getLeftPane());
         Module.isResizing = true;
       }
 
@@ -630,7 +670,7 @@ <h3>Something went wrong</h3>
 
       function resetResize(e) {
         splitPanesEvenly();
-        leftPaneWidth = computeWidth(leftPane);
+        leftPaneWidth = computeWidth(SplitPaneMgr.getLeftPane());
       }
 
       function resizePane(e) {
@@ -647,12 +687,12 @@ <h3>Something went wrong</h3>
 
       function resizeWindow(e) {
         const windowWith = window.innerWidth;
-        if(leftPane.style.width !== '50%') {
+        if(SplitPaneMgr.getLeftPane().style.width !== '50%') {
           const previousRatio = leftPaneWidth / previousWindowWidth;
           leftPaneWidth = previousRatio * windowWith;
           setPanesWidth(leftPaneWidth);
         } else {
-          leftPaneWidth = computeWidth(leftPane);
+          leftPaneWidth = computeWidth(SplitPaneMgr.getLeftPane());
         }
 
         previousWindowWidth = windowWith;

diff --git a/webgpu-shader-toy/index.js b/webgpu-shader-toy/index.js
diff --git a/webgpu-shader-toy/index.wasm b/webgpu-shader-toy/index.wasm