Merge pull request #26 from dvoromar/updates

Updates

README.md

@@ -49,7 +49,7 @@ You can build the complete web application using emscripten (https://emscripten.
 * Build the project:
   * For the complete web version, build the project using emscripten:
     ```
-    cmake -DCMAKE_BUILD_TYPE=Release -DCMAKE_C_COMPILER=PATH_TO_EMSDK/upstream/emscripten/emcc -DCMAKE_CXX_COMPILER=PATH_TO_EMSDK/upstream/emscripten/em++ ../../src && make
+    cmake -DCMAKE_BUILD_TYPE=Release -DCMAKE_TOOLCHAIN_FILE=PATH_TO_EMSDK/upstream/emscripten/cmake/Modules/Platform/Emscripten.cmake ../../src && make
     ```
     (Replace PATH_TO_EMSDK with the path to your emsdk directory.)
   * For the desktop version, build the project using clang/gcc:

src/main.cpp

@@ -246,6 +246,15 @@ EMSCRIPTEN_KEEPALIVE void enableKeyboardEvents() {
 EMSCRIPTEN_KEEPALIVE void disableKeyboardEvents() {
   mainWindow.disableKeyboardEvents();
 }
+
+EMSCRIPTEN_KEEPALIVE void moveSelectedLayersInDepth(int step,
+                                                    bool overlapping) {
+  mainWindow.moveSelectedLayersInDepth(step, overlapping);
+}
+
+EMSCRIPTEN_KEEPALIVE int getNumberOfLayers() {
+  return mainWindow.getNumberOfLayers();
+}
 }
 #endif
 

src/mainwindow.cpp

@@ -738,6 +738,18 @@ void MainWindow::keyPressEvent(const MyKeyEvent &keyEvent) {
   if (keyEvent.key == SDLK_DELETE || keyEvent.key == SDLK_BACKSPACE) {
     removeControlPointOrRegion();
   }
+  if (keyEvent.key == SDLK_PAGEUP) {
+    moveSelectedLayersInDepth(1, true);
+  }
+  if (keyEvent.key == SDLK_PAGEDOWN) {
+    moveSelectedLayersInDepth(-1, true);
+  }
+  if (keyEvent.key == SDLK_HOME) {
+    moveSelectedLayersInDepth(layers.size(), false);
+  }
+  if (keyEvent.key == SDLK_END) {
+    moveSelectedLayersInDepth(-layers.size(), false);
+  }
 #endif
 }
 
@@ -2413,13 +2425,19 @@ void MainWindow::exportAsOBJ(const std::string &outDir,
   writeOBJ(objFn, V, defData.Faces, N, defData.Faces, textureCoords,
            defData.Faces);
   if (!templateImg.isNull() && saveTexture) {
-    // write material to a file
+    // Write material to the beginning of the exported file.
     {
-      ofstream stream(objFn, ofstream::out | ofstream::app);
+      ostringstream objContent;
+      ifstream istr(objFn);
+      objContent << istr.rdbuf();
+      istr.close();
+
+      ofstream stream(objFn, ofstream::out);
       if (stream.is_open()) {
         stream << "s 1" << endl;
         stream << "mtllib " << outFnWithoutExtension << ".mtl" << endl;
         stream << "usemtl Textured" << endl;
+        stream << objContent.str();
         stream.close();
       }
     }
@@ -2577,3 +2595,101 @@ void MainWindow::pauseAnimation() { pauseAll(animStatus); }
 void MainWindow::resumeAnimation() { resumeAll(animStatus); }
 
 int MainWindow::getNumberOfAnimationFrames() { return cpAnimSync.getLength(); }
+
+void MainWindow::moveSelectedLayersInDepth(int step, bool overlapping) {
+  if (selectedLayer == -1 || step == 0) return;
+
+  // Find overlaps of each selected layer with other non-selected layers and
+  // create an overlap matrix (first column is a flag denoting whether a layer
+  // is selected).
+  MatrixXi OM(layers.size(), layers.size() + 1);
+  OM.fill(0);  // Empty values are 0.
+  if (overlapping) {
+    // Find overlapping layers.
+    for (const int selLayerId : selectedLayers) {
+      OM(selLayerId, 0) = 1;
+      const Imguc &ISel = regionImgs[layers[selLayerId]];
+      forlist(layerId, layers) {
+        // Skip selected layers.
+        if (selectedLayers.find(layerId) != selectedLayers.end()) continue;
+        // Check overlap.
+        const int regId = layers[layerId];
+        const Imguc &I = regionImgs[regId];
+        bool exit = false;
+        fora(y, 0, ISel.h) {
+          fora(x, 0, ISel.w) {
+            if (ISel(x, y, 0) == 0 || I(x, y, 0) == 0) continue;
+            // Regions are overlapping.
+            OM(layerId, selLayerId + 1) = 1;
+            exit = true;
+            break;
+          }
+          if (exit) break;
+        }
+      }
+    }
+  } else {
+    // Do not deal with overlaps, instead consider all layers.
+    for (const int selLayerId : selectedLayers) {
+      OM(selLayerId, 0) = 1;
+      forlist(layerId, layers) {
+        // Skip selected layers.
+        if (selectedLayers.find(layerId) != selectedLayers.end()) continue;
+        OM(layerId, selLayerId + 1) = 1;
+      }
+    }
+  }
+  DEBUG_CMD_MM(cout << "Overlap matrix:" << endl << OM << endl;);
+
+  // Move layers: Proceed with selected layers ordered in depth.
+  // For moving layers closer in depth, start with the nearest layer. Move each
+  // layer so that it is in front of n nearest overlapping objects (where
+  // n=abs(step)) but make sure that the relative order of selected objects
+  // remains unchanged. For moving layers further in depth, start with the
+  // furthest layer.
+  for (int r1 = (step > 0 ? OM.rows() - 1 : 0);
+       (step > 0 ? r1 >= 0 : r1 < OM.rows()); (step > 0 ? r1-- : r1++)) {
+    const bool isSelected1 = OM(r1, 0);
+    if (!isSelected1) continue;
+    const int selRow = r1;
+    int steps = 0;
+    int firstRow = 0;
+    int finalRow = 0;
+    int sign = (step > 0 ? 1 : -1);
+    for (int r2 = selRow; (step > 0 ? r2 < OM.rows() - 1 : r2 >= 1);
+         (step > 0 ? r2++ : r2--)) {
+      const bool isSelected2 = OM(r2 + sign, 0);
+      if (isSelected2) break;
+
+      OM.row(r2).swap(OM.row(r2 + sign));
+      swap(layers[r2], layers[r2 + sign]);
+      DEBUG_CMD_MM(cout << "Overlap matrix (" << r2 << "):" << endl
+                        << OM << endl;);
+
+      if (OM(r2, selRow + 1)) {
+        steps++;
+        firstRow = selRow;
+        finalRow = r2 + sign;
+        if (steps >= abs(step)) break;
+      }
+    }
+    if (steps > 0) {
+      if (firstRow == selectedLayer) {
+        DEBUG_CMD_MM(cout << "Selected layer: " << selectedLayer << " -> "
+                          << finalRow << endl;);
+        selectedLayer = finalRow;
+      }
+      DEBUG_CMD_MM(cout << "Moved layer " << firstRow << " -> " << finalRow
+                        << ", total steps: " << steps << endl;);
+    }
+  }
+
+  // Recreate selection.
+  selectedLayers.clear();
+  fora(i, 0, OM.rows()) {
+    if (OM(i, 0)) selectedLayers.insert(i);
+  }
+  recreateMergedImgs();
+}
+
+int MainWindow::getNumberOfLayers() { return layers.size(); }

src/mainwindow.h

@@ -62,6 +62,8 @@ class MainWindow : public MyWindow {
   void resetView();
   void exportAsOBJ(const std::string &outDir,
                    const std::string &outFnWithoutExtension, bool saveTexture);
+  int getNumberOfLayers();
+  void moveSelectedLayersInDepth(int step, bool overlapping);
 
   // animation
   void offsetSelectedCpAnimsByFrames(double offset);

src/ui/main.js

@@ -169,6 +169,10 @@ $(window).keydown(function(e) {
   if (e.which === 107 || e.which === 187 || (e.shiftKey && e.which === 187)) Module._offsetSelectedCpAnimsByFrames(1);
   if (e.which === 109 || e.which === 189) Module._offsetSelectedCpAnimsByFrames(-1);
   if (e.which === 46 || e.which === 8) Module._removeControlPointOrRegion();
+  if (e.which === 33) Module._moveSelectedLayersInDepth(1, true); // PageUp
+  if (e.which === 34) Module._moveSelectedLayersInDepth(-1, true); // PageDown
+  if (e.which === 36) Module._moveSelectedLayersInDepth(Module._getNumberOfLayers(), false); // Home
+  if (e.which === 35) Module._moveSelectedLayersInDepth(-Module._getNumberOfLayers(), false); // End
 });
 
 function showRecordButton() {

src/ui/myshell.html

@@ -160,11 +160,19 @@ <h4 class="pt-5">Example Gallery</h4>
 
               <h4 class="pt-5">Give us Feedback</h4>
 
-              <p>We started a discussion thread about Monster Mash on <a href="https://forums.cgsociety.org/t/monster-mash-a-tool-for-casual-3d-modeling-and-animation/2061144" target="_blank">CGSociety forum</a>. Let us know what you think about the tool in this forum!</p>
+              <p>We have created a user forum for dissussions about Monster Mash which is available at <a href="https://forum.monstermash.zone" target="_blank">forum.monstermash.zone</a>. You can use it to share your results with us or to let us know what you think about the tool. The forum code is <img src="imgs/forumpwd.png" style="height: 1em;" />.</p>
 
               <h4 class="pt-5">What's New</h4>
 
               <table class="whatsNewTable">
+                <tr>
+                  <td>October&nbsp;29,&nbsp;2021</td>
+                  <td>Added an option to move layers in depth. <a href="#hotKeysInfo">Learn more&hellip;</a></td>
+                </tr>
+                <tr>
+                  <td>April&nbsp;30,&nbsp;2021</td>
+                  <td>A new user forum for discussion about Monster Mash is available at <a href="https://forum.monstermash.zone" target="_blank">forum.monstermash.zone</a>. From now on, please use this forum instead of the older CGSociety thread.</td>
+                </tr>
                 <tr>
                   <td>March&nbsp;9,&nbsp;2021</td>
                   <td>The entire textured animation can be exported to the <a href="https://www.khronos.org/gltf/" target="_blank">glTF format</a>, which allows importing the results into various 3D modeling software (tested in Blender). <a href="#exportToAnimationInfo">Read more&hellip;</a></td>
@@ -357,6 +365,7 @@ <h5 class="pt-3">5. Mouse buttons</h5>
 </table>
 </p>
 
+<a name="hotKeysInfo"></a>
 <h5 class="pt-3">6. Hot-keys</h5>
 <p>
 <table>
@@ -376,7 +385,18 @@ <h5 class="pt-3">6. Hot-keys</h5>
 <tr><td><span class="keyBox keySmallerFont">Delete</span> or <span class="keyBox keyRect keySmallerFont">Backspace</span></td><td>&nbsp;</td><td>Remove selected part or control pin.</td></tr>
 <tr><td><span class="keyBox">+</span></td><td>&nbsp;</td><td>Offset control pin animation forward in time.</td></tr>
 <tr><td><span class="keyBox">&minus;</span></td><td>&nbsp;</td><td>Offset control pin animation backward in time.</td></tr>
+<tr><td><span class="keyBox keySmallerFont">PgUp</span></td><td>&nbsp;</td><td>Move selected layers one step closer in depth.</td></tr>
+<tr><td><span class="keyBox keySmallerFont">PgDn</span></td><td>&nbsp;</td><td>Move selected layers one step further in depth.</td></tr>
+<tr><td><span class="keyBox keySmallerFont">Home</span></td><td>&nbsp;</td><td>Move selected layers closest in depth.</td></tr>
+<tr><td><span class="keyBox keySmallerFont">End</span></td><td>&nbsp;</td><td>Move selected layers furthest in depth.</td></tr>
 </table>
+</p>
+
+<h5 class="pt-3">Older Versions</h5>
+<p>
+<ul>
+  <li><a href="archive/2103192337" target="_blank">2103192337</a></li>
+</ul>
 </p>
 
               <p class="text-right"><small>Monster Mash v. <span class="appVersion"></span></small></p>