#3646 JS rendering backend for wasm

.github/workflows/indigo-ci.yaml

@@ -904,6 +904,10 @@ jobs:
           ver=$(git describe --abbrev=0 --tags --match "indigo-*")-$(git rev-list $(git describe --abbrev=0 --tags --match "indigo-*").. --count)
           ver=$(echo $ver | sed 's/indigo-//g' | sed 's/-0//g')
           npm version --allow-same-version ${ver}
+      - name: Install Puppeteer Dependencies
+        run: |
+          apt-get update
+          apt-get install -y libnss3 libnspr4 libatk1.0-0 libatk-bridge2.0-0 libcups2 libdrm2 libxkbcommon0 libxcomposite1 libxdamage1 libxfixes3 libxrandr2 libgbm1 libasound2t64 libpango-1.0-0 libcairo2
       - name: Build, Test, Pack
         run: |
           mkdir build
@@ -936,6 +940,10 @@ jobs:
           ver=$(git describe --abbrev=0 --tags --match "indigo-*")-$(git rev-list $(git describe --abbrev=0 --tags --match "indigo-*").. --count)
           ver=$(echo $ver | sed 's/indigo-//g' | sed 's/-0//g')
           npm version --allow-same-version ${ver}
+      - name: Install Puppeteer Dependencies
+        run: |
+          apt-get update
+          apt-get install -y libnss3 libnspr4 libatk1.0-0 libatk-bridge2.0-0 libcups2 libdrm2 libxkbcommon0 libxcomposite1 libxdamage1 libxfixes3 libxrandr2 libgbm1 libasound2t64 libpango-1.0-0 libcairo2 fonts-noto-cjk
       - name: Build, Test, Pack
         run: |
           mkdir build
@@ -951,7 +959,7 @@ jobs:
   build_indigo_utils_x86_64:
     strategy:
       fail-fast: false
-      matrix: ${{ fromJSON(needs.set_matrix.outputs.matrix) }}
+      matrix: ${{ fromJSON(needs.set_matrix.outputs.matrix || '{"os":["ubuntu-latest","windows-latest"]}') }}
     runs-on: ${{ matrix.os }}
     # needs: [build_bingo_postgres_linux_x86_64, build_bingo_postgres_windows_msvc_x86_64, build_bingo_postgres_macos_x86_64]
     needs: [build_bingo_postgres_linux_x86_64, build_bingo_postgres_windows_msvc_x86_64, set_matrix ]

CMakeLists.txt

@@ -93,7 +93,7 @@ if (EMSCRIPTEN)
     set(BUILD_BINGO_SQLSERVER OFF)
     set(BUILD_BINGO_ORACLE OFF)
     set(BUILD_BINGO_ELASTIC OFF)
-    set(USE_FONT_MANAGER ON)
+    set(USE_FONT_MANAGER OFF)
     # Skip Array/Pool bounds-check throws in release WASM builds to allow inlining.
     # emscripten's JS-based exception handling wraps every throw-containing function
     # in invoke_* shims, preventing inlining and causing ~80x overhead in hot loops.

api/wasm/indigo-ketcher/CMakeLists.txt

@@ -34,11 +34,14 @@ set(EMCC_COMMON_FLAGS
         -s INITIAL_MEMORY=32mb
         -s ALLOW_MEMORY_GROWTH=1
         -s DISABLE_EXCEPTION_CATCHING=0
+        -s DYNAMIC_EXECUTION=0
+        -s ENVIRONMENT=web,worker
         -s MODULARIZE=1
         -s FILESYSTEM=1
         ${EMCC_ASSERTIONS}
         -s USE_SDL=0 -s USE_SDL_IMAGE=0 -s USE_SDL_TTF=0 -s USE_SDL_NET=0
         --no-entry
+        --post-js ${CMAKE_CURRENT_SOURCE_DIR}/post.js
         ${EMCC_FLAGS}
         )
 
@@ -52,15 +55,16 @@ set(EMCC_FLAGS_SEPARATE
 set(EMCC_FLAGS
         ${EMCC_COMMON_FLAGS}
         -s SINGLE_FILE=1
+        -s SINGLE_FILE_BINARY_ENCODE=0
         )
 
 set(TARGET_FILES
         $<TARGET_OBJECTS:${PROJECT_NAME}-object>
-        $<TARGET_FILE:indigo-static> $<TARGET_FILE:indigo-inchi-static> $<TARGET_FILE:indigo-renderer-static> $<TARGET_FILE:render2d> $<TARGET_FILE:lunasvg> $<TARGET_FILE:plutovg> $<TARGET_FILE:cairo> $<TARGET_FILE:freetype>  $<TARGET_FILE:png> $<TARGET_FILE:pixman> $<TARGET_FILE:indigo-core> $<TARGET_FILE:inchi> $<TARGET_FILE:tinyxml2> $<TARGET_FILE:z>
+        $<TARGET_FILE:indigo-static> $<TARGET_FILE:indigo-inchi-static> $<TARGET_FILE:indigo-renderer-static> $<TARGET_FILE:render2d> $<TARGET_FILE:indigo-core> $<TARGET_FILE:inchi> $<TARGET_FILE:tinyxml2> $<TARGET_FILE:z>
         )
 
 set(TARGET_FILES_NORENDER
-    $<TARGET_OBJECTS:${PROJECT_NAME}-object-norender> $<TARGET_FILE:indigo-static> $<TARGET_FILE:indigo-inchi-static> $<TARGET_FILE:indigo-core> $<TARGET_FILE:inchi> $<TARGET_FILE:tinyxml2> $<TARGET_FILE:png> $<TARGET_FILE:z>
+    $<TARGET_OBJECTS:${PROJECT_NAME}-object-norender> $<TARGET_FILE:indigo-static> $<TARGET_FILE:indigo-inchi-static> $<TARGET_FILE:indigo-core> $<TARGET_FILE:inchi> $<TARGET_FILE:tinyxml2> $<TARGET_FILE:z>
 )
 
 add_custom_target(${PROJECT_NAME}-separate
@@ -109,6 +113,7 @@ if (NOT RENDER_ENABLE_CJK)
             WORKING_DIRECTORY ${CMAKE_LIBRARY_OUTPUT_DIRECTORY}
             COMMAND ${CMAKE_COMMAND} -P ${CMAKE_CURRENT_LIST_DIR}/patch.cmake
             COMMAND npm test
+            COMMAND npm run test_browser
             COMMAND npm pack
             COMMAND ${CMAKE_COMMAND} -E make_directory ${DIST_DIRECTORY}
             COMMAND ${COPY_COMMAND} ${CMAKE_LIBRARY_OUTPUT_DIRECTORY}${SEP}${PROJECT_NAME}*.tgz ${NATIVE_DIST_DIRECTORY}${SEP}
@@ -125,6 +130,7 @@ else ()
             WORKING_DIRECTORY ${CMAKE_LIBRARY_OUTPUT_DIRECTORY}
             COMMAND ${CMAKE_COMMAND} -P ${CMAKE_CURRENT_LIST_DIR}/patch.cmake
             COMMAND npm test
+            COMMAND npm run test_browser
             COMMAND npm run test_cjk
             COMMAND npm pack
             COMMAND ${CMAKE_COMMAND} -E make_directory ${DIST_DIRECTORY}

api/wasm/indigo-ketcher/package.json

@@ -58,9 +58,21 @@
   "homepage": "https://lifescience.opensource.epam.com/indigo/api/index.html",
   "scripts": {
     "test": "node test.js",
+    "test_browser": "node test_browser.js",
     "test_cjk": "node test_cjk.js"
   },
   "devDependencies": {
-    "looks-same": "^8.2.4"
+    "looks-same": "^8.2.4",
+    "puppeteer": "^22.0.0"
+  },
+  "dependencies": {
+    "@fontsource/noto-sans": "^5.0.0",
+    "@fontsource/noto-sans-jp": "^5.0.0",
+    "@fontsource/noto-sans-kr": "^5.0.0",
+    "@fontsource/noto-sans-sc": "^5.0.0",
+    "@fontsource/noto-sans-tc": "^5.0.0"
+  },
+  "optionalDependencies": {
+    "canvas": "^3.1.0"
   }
 }

api/wasm/indigo-ketcher/post.js

@@ -0,0 +1,87 @@
+// post.js - appended to the end of the emscripten module
+// Adds Module.renderAsync() for asynchronous SVG-to-PNG conversion
+
+(function() {
+
+    // Convert SVG string to PNG base64 using browser Canvas API
+    function svgToPngBrowser(svgStr) {
+        return new Promise(function(resolve, reject) {
+            var img = new Image();
+            img.onload = function() {
+                try {
+                    var canvas = document.createElement('canvas');
+                    canvas.width = img.width;
+                    canvas.height = img.height;
+                    var ctx = canvas.getContext('2d');
+                    ctx.drawImage(img, 0, 0);
+                    var dataUrl = canvas.toDataURL('image/png');
+                    resolve(dataUrl.split(',')[1]);
+                } catch (e) {
+                    reject(e);
+                }
+            };
+            img.onerror = function() {
+                reject(new Error('Failed to load SVG into Image for PNG conversion'));
+            };
+            img.src = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svgStr);
+        });
+    }
+
+    // Convert SVG string to PNG base64 using sharp (Node.js)
+    function svgToPngNode(svgStr) {
+        var sharp = require('sharp');
+        return sharp(Buffer.from(svgStr)).png().toBuffer().then(function(buf) {
+            return buf.toString('base64');
+        });
+    }
+
+    Module.renderAsync = async function(data, options) {
+        var requestedFormat = 'svg';
+
+        // Detect requested format and override to SVG for C++ engine
+        if (options && typeof options.get === 'function') {
+            try {
+                var fmt = options.get('render-output-format');
+                if (fmt) requestedFormat = fmt;
+            } catch(e) {}
+
+            if (requestedFormat === 'png') {
+                options.set('render-output-format', 'svg');
+            }
+        }
+
+        // Call synchronous C++ render — always returns base64-encoded SVG
+        var base64Out = Module.render(data, options);
+
+        // Restore original option so the caller's map isn't permanently mutated
+        if (requestedFormat === 'png' && options && typeof options.set === 'function') {
+            options.set('render-output-format', 'png');
+        }
+
+        if (requestedFormat !== 'png') {
+            return base64Out;
+        }
+
+        // Decode base64 SVG to string
+        var svgStr;
+        if (typeof Buffer !== 'undefined') {
+            svgStr = Buffer.from(base64Out, 'base64').toString('utf-8');
+        } else {
+            var binary = atob(base64Out);
+            var bytes = new Uint8Array(binary.length);
+            for (var i = 0; i < binary.length; i++) {
+                bytes[i] = binary.charCodeAt(i);
+            }
+            svgStr = new TextDecoder().decode(bytes);
+        }
+
+        // Convert SVG to PNG using the appropriate environment
+        if (typeof window !== 'undefined' && typeof document !== 'undefined') {
+            return svgToPngBrowser(svgStr);
+        } else if (typeof require !== 'undefined') {
+            return svgToPngNode(svgStr);
+        } else {
+            throw new Error('No environment available for SVG to PNG conversion');
+        }
+    };
+})();

api/wasm/indigo-ketcher/test-cjk/test_cjk.js

@@ -13,15 +13,42 @@ function parseHrtimeToSeconds(hrtime) {
     return (hrtime[0] + (hrtime[1] / 1e9)).toFixed(3);
 }
 
-function run() {
+async function run() {
     let succeeded = 0;
     let failed = 0;
+
+    // On Linux, configure FontConfig to use the @fontsource fonts so that `sharp` (librsvg) 
+    // renders SVGs with the correct Noto Sans CJK fonts, avoiding looksSame failures in CI.
+    if (process.platform === 'linux') {
+        const { execSync } = require('child_process');
+        const os = require('os');
+        const path = require('path');
+        const fs = require('fs');
+        try {
+            console.log("Configuring FontConfig for Linux...");
+            const fontsDir = path.join(os.homedir(), '.fonts');
+            if (!fs.existsSync(fontsDir)) {
+                fs.mkdirSync(fontsDir, { recursive: true });
+            }
+            const sourceDir = path.join(__dirname, 'node_modules', '@fontsource');
+            if (fs.existsSync(sourceDir)) {
+                execSync(`find "${sourceDir}" -type f \\( -name "*.woff" -o -name "*.woff2" -o -name "*.ttf" \\) -exec cp {} "${fontsDir}" \\;`);
+                execSync('fc-cache -f -v');
+                console.log("FontConfig successfully updated with Noto Sans fonts.");
+            } else {
+                console.warn(`Fontsource directory not found at ${sourceDir}`);
+            }
+        } catch (e) {
+            console.error('Failed to configure FontConfig for Linux:', e.message);
+        }
+    }
+
     console.log("Starting tests...\n")
     var startTestsTime = process.hrtime();
-    tests.forEach(t => {
+    for (const t of tests) {
         try {
             var startTestTime = process.hrtime();
-            t.fn()
+            await t.fn()
             const elapsedSeconds = parseHrtimeToSeconds(process.hrtime(startTestTime));
             console.log(`✅ ${t.group}.${t.name} [${elapsedSeconds}s]`);
             succeeded++;
@@ -30,7 +57,7 @@ function run() {
             console.log(e.stack)
             failed++
         }
-    })
+    }
     const elapsedSeconds = parseHrtimeToSeconds(process.hrtime(startTestsTime));
     const total = succeeded + failed;
     console.log(`\n${total} tests executed in ${elapsedSeconds} seconds. ${succeeded} succeeded, ${failed} failed.`)

api/wasm/indigo-ketcher/test/bonds.mol

@@ -0,0 +1,45 @@
+
+  Mrv0541 12021111492D          
+
+ 26 13  0  0  0  0            999 V2000
+    0.4125    0.0000    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
+   -0.4125    0.0000    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
+    3.4768    0.0000    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
+    2.6518    0.0000    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
+    6.4232    0.0000    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
+    5.5982    0.0000    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
+    9.4875    0.0000    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
+    8.6625    0.0000    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
+    0.4125   -1.6500    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
+   -0.4125   -1.6500    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
+    3.4768   -1.6500    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
+    2.6518   -1.6500    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
+    6.5411   -1.6500    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
+    5.7161   -1.6500    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
+    9.6054   -1.6500    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
+    8.7804   -1.6500    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
+    0.4125   -3.3000    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
+   -0.4125   -3.3000    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
+    3.2411   -3.3000    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
+    2.4161   -3.3000    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
+    6.0696   -3.3000    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
+    5.2446   -3.3000    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
+    8.8982   -3.3000    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
+    8.0732   -3.3000    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
+    0.4125   -4.9500    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
+   -0.4125   -4.9500    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
+  1  2  1  0  0  0  0
+  3  4  2  0  0  0  0
+  5  6  3  0  0  0  0
+  7  8  4  0  0  0  0
+  9 10  1  1  0  0  0
+ 11 12  1  6  0  0  0
+ 13 14  1  4  0  0  0
+ 15 16  2  3  0  0  0
+ 17 18  2  3  0  0  0
+ 19 20  5  0  0  0  0
+ 21 22  6  0  0  0  0
+ 23 24  7  0  0  0  0
+ 25 26  8  0  0  0  0
+M  MRV CTU  1   9
+M  END