More wasm related fixes, high-dpi and touch events

Signed-off-by: falkTX <falktx@falktx.com>

carla

@@ -1 +1 @@
-Subproject commit 01f93b40d5e6d9238e2422c4daf4839412a98dd3
+Subproject commit e3a0aad27a01c1a91e12000c9df856a1df0f34fa

dpf

@@ -1 +1 @@
-Subproject commit 9d37dbf240e770195624e4fc4e06d2b49cf4661a
+Subproject commit 11e76be7057c8b189a593ca328aa871fe61fc699

patches/examples/DRMR_-_BassGrowl.vcv

@@ -1,10 +1,6 @@
 {
   "version": "2.0",
   "zoom": 1.0,
-  "gridOffset": [
-    -14.779948234558105,
-    -0.049229029566049576
-  ],
   "modules": [
     {
       "id": 5044954743508992,

patches/examples/DRMR_-_Etherpad.vcv

@@ -1,10 +1,6 @@
 {
   "version": "2.0",
   "zoom": 1.0,
-  "gridOffset": [
-    -6.7139325141906738,
-    -0.20362870395183563
-  ],
   "modules": [
     {
       "id": 6435223154102100,

patches/examples/DRMR_-_Gabberswing.vcv

@@ -1,10 +1,6 @@
 {
   "version": "2.0",
   "zoom": 1.0,
-  "gridOffset": [
-    -37.436588287353516,
-    0.2261204719543457
-  ],
   "modules": [
     {
       "id": 5567774278698987,

patches/examples/DRMR_-_Interverb.vcv

@@ -1,10 +1,6 @@
 {
   "version": "2.0",
   "zoom": 1.0,
-  "gridOffset": [
-    -3.4424479007720947,
-    0.86171877384185791
-  ],
   "modules": [
     {
       "id": 1184757612963547,

patches/examples/VT_-_Jupiter_Ascent.vcv

@@ -1,12 +1,6 @@
 {
   "version": "2.1.1",
-  "path": "/home/falktx/Source/DISTRHO/Cardinal/src/Rack/../../patches/VT_-_Jupiter_Ascent.vcv",
-  "unsaved": true,
   "zoom": 1.0,
-  "gridOffset": [
-    -1.0,
-    -0.03684210404753685
-  ],
   "modules": [
     {
       "id": 674529428127255,
@@ -630,4 +624,4 @@
       "color": "#ff5252"
     }
   ]
-}
+}

patches/examples/falkTX_-_Random-Progress-Pluck-Rev.vcv

@@ -1,10 +1,6 @@
 {
   "version": "2.0",
   "zoom": 1.0,
-  "gridOffset": [
-    -6.3333334922790527,
-    -0.028947368264198303
-  ],
   "modules": [
     {
       "id": 3056105853448179,

patches/examples/falkTX_-_Salomonis-MonoRegen.vcv

@@ -1,10 +1,6 @@
 {
   "version": "2.0",
   "zoom": 1.0,
-  "gridOffset": [
-    -2.3333332538604736,
-    0.71315789222717285
-  ],
   "modules": [
     {
       "id": 35699846797895,

patches/init/fx.vcv

@@ -1,6 +1,5 @@
 {
   "version": "2.1.1",
-  "unsaved": true,
   "zoom": 1.0,
   "modules": [
     {

patches/init/main.vcv

@@ -1,6 +1,5 @@
 {
   "version": "2.1",
-  "unsaved": true,
   "zoom": 1.0,
   "modules": [
     {

patches/init/synth.vcv

@@ -1,6 +1,5 @@
 {
   "version": "2.1.1",
-  "unsaved": true,
   "zoom": 1.0,
   "modules": [
     {

patches/init/wasm.vcv

@@ -1,6 +1,5 @@
 {
   "version": "2.1.2",
-  "unsaved": true,
   "zoom": 1.0,
   "modules": [
     {

plugins/Makefile

@@ -1192,7 +1192,7 @@ endif
 
 RESOURCE_FILES += Cardinal/res/Miku/Miku.png
 
-# MOD builds only have LV2 FX variant for now
+# MOD builds only have LV2 main and FX variant
 ifeq ($(MOD_BUILD),true)
 
 LV2_RESOURCES  = $(PLUGIN_LIST:%=../bin/Cardinal.lv2/resources/PluginManifests/%.json)
@@ -1200,6 +1200,12 @@ LV2_RESOURCES += $(PLUGIN_LIST:%=../bin/CardinalFX.lv2/resources/PluginManifests
 LV2_RESOURCES += $(RESOURCE_FILES:%=../bin/Cardinal.lv2/resources/%)
 LV2_RESOURCES += $(RESOURCE_FILES:%=../bin/CardinalFX.lv2/resources/%)
 
+# MOD builds only have LV2 FX variant for now
+else ifeq ($(WASM),true)
+
+LV2_RESOURCES  = $(PLUGIN_LIST:%=../bin/CardinalNative.lv2/resources/PluginManifests/%.json)
+LV2_RESOURCES += $(RESOURCE_FILES:%=../bin/CardinalNative.lv2/resources/%)
+
 else
 
 LV2_RESOURCES  = $(PLUGIN_LIST:%=../bin/Cardinal.lv2/resources/PluginManifests/%.json)
@@ -1238,6 +1244,10 @@ resources: $(LV2_RESOURCES) $(VST2_RESOURCES) $(VST3_RESOURCES)
 	-@mkdir -p "$(shell dirname $@)"
 	$(SILENT)ln -sf $(abspath $<) $@
 
+../bin/CardinalNative.lv2/resources/%: %
+	-@mkdir -p "$(shell dirname $@)"
+	$(SILENT)ln -sf $(abspath $<) $@
+
 ../bin/CardinalSynth.lv2/resources/%: %
 	-@mkdir -p "$(shell dirname $@)"
 	$(SILENT)ln -sf $(abspath $<) $@
@@ -1256,6 +1266,10 @@ endif
 	-@mkdir -p "$(shell dirname $@)"
 	$(SILENT)ln -sf $(abspath $<) $@
 
+../bin/CardinalNative.lv2/resources/PluginManifests/%.json: %/plugin.json
+	-@mkdir -p "$(shell dirname $@)"
+	$(SILENT)ln -sf $(abspath $<) $@
+
 ../bin/CardinalSynth.lv2/resources/PluginManifests/%.json: %/plugin.json
 	-@mkdir -p "$(shell dirname $@)"
 	$(SILENT)ln -sf $(abspath $<) $@

src/Makefile.cardinal.mk

@@ -378,7 +378,11 @@ endif
 
 $(TARGET_DIR)/%/patches: ../../patches
 	-@mkdir -p "$(shell dirname $@)"
+ifeq ($(WASM),true)
+	cp -rL $< $@
+else
 	$(SILENT)ln -sf $(abspath $<) $@
+endif
 
 $(TARGET_DIR)/$(NAME).lv2/resources/%: ../Rack/res/%
 	-@mkdir -p "$(shell dirname $@)"

src/emscripten/shell.html

@@ -5,7 +5,7 @@
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     <meta name="description" content="Cardinal" />
     <meta name="theme-color" content="#111111">
-    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1" user-scalable="no">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=0" user-scalable="no">
     <title>Cardinal</title>
     <style>
       html {
@@ -23,407 +23,17 @@
       }
 
       #canvas_wrapper {
+        --device-pixel-ratio: 1;
         display: none;
         image-rendering: pixelated;
         image-rendering: crisp-edges;
         position: absolute;
+        transform-origin: 0 0 0;
+        transform: scale(calc(1 / var(--device-pixel-ratio)));
         width: 100vw;
         height: 100vh;
       }
 
-      /* automatically generated */
-      @media (min-resolution: 0.29dppx) {
-        #canvas_wrapper {
-          scale: calc(1 / 0.3);
-          left: 0;
-          top: calc((1 - (1 / 0.3)) / 2 * -100vh);
-        }
-      }
-
-      @media (min-resolution: 0.39dppx) {
-        #canvas_wrapper {
-          scale: calc(1 / 0.4);
-          left: 0;
-          top: calc((1 - (1 / 0.4)) / 2 * -100vh);
-        }
-      }
-
-      @media (min-resolution: 0.49dppx) {
-        #canvas_wrapper {
-          scale: calc(1 / 0.5);
-          left: 0;
-          top: calc((1 - (1 / 0.5)) / 2 * -100vh);
-        }
-      }
-
-      @media (min-resolution: 0.59dppx) {
-        #canvas_wrapper {
-          scale: calc(1 / 0.6);
-          left: 0;
-          top: calc((1 - (1 / 0.6)) / 2 * -100vh);
-        }
-      }
-
-      @media (min-resolution: 0.665dppx) {
-        #canvas_wrapper {
-          scale: calc(1 / 0.666);
-          left: 0;
-          top: calc((1 - (1 / 0.666)) / 2 * -100vh);
-        }
-      }
-
-      @media (min-resolution: 0.69dppx) {
-        #canvas_wrapper {
-          scale: calc(1 / 0.7);
-          left: 0;
-          top: calc((1 - (1 / 0.7)) / 2 * -100vh);
-        }
-      }
-
-      @media (min-resolution: 0.79dppx) {
-        #canvas_wrapper {
-          scale: calc(1 / 0.8);
-          left: 0;
-          top: calc((1 - (1 / 0.8)) / 2 * -100vh);
-        }
-      }
-
-      @media (min-resolution: 0.89dppx) {
-        #canvas_wrapper {
-          scale: calc(1 / 0.9);
-          left: 0;
-          top: calc((1 - (1 / 0.9)) / 2 * -100vh);
-        }
-      }
-
-      @media (min-resolution: 1.0dppx) {
-        #canvas_wrapper {
-          scale: calc(1 / 1.0);
-          left: calc((1 - (1 / 1.0)) / 2 * -100vw);
-          top: calc((1 - (1 / 1.0)) / 2 * -100vh);
-        }
-      }
-
-      @media (min-resolution: 1.1dppx) {
-        #canvas_wrapper {
-          scale: calc(1 / 1.1);
-          left: calc((1 - (1 / 1.1)) / 2 * -100vw);
-          top: calc((1 - (1 / 1.1)) / 2 * -100vh);
-        }
-      }
-
-      @media (min-resolution: 1.2dppx) {
-        #canvas_wrapper {
-          scale: calc(1 / 1.2);
-          left: calc((1 - (1 / 1.2)) / 2 * -100vw);
-          top: calc((1 - (1 / 1.2)) / 2 * -100vh);
-        }
-      }
-
-      @media (min-resolution: 1.3dppx) {
-        #canvas_wrapper {
-          scale: calc(1 / 1.3);
-          left: calc((1 - (1 / 1.3)) / 2 * -100vw);
-          top: calc((1 - (1 / 1.3)) / 2 * -100vh);
-        }
-      }
-
-      @media (min-resolution: 1.4dppx) {
-        #canvas_wrapper {
-          scale: calc(1 / 1.4);
-          left: calc((1 - (1 / 1.4)) / 2 * -100vw);
-          top: calc((1 - (1 / 1.4)) / 2 * -100vh);
-        }
-      }
-
-      @media (min-resolution: 1.5dppx) {
-        #canvas_wrapper {
-          scale: calc(1 / 1.5);
-          left: calc((1 - (1 / 1.5)) / 2 * -100vw);
-          top: calc((1 - (1 / 1.5)) / 2 * -100vh);
-        }
-      }
-
-      @media (min-resolution: 1.6dppx) {
-        #canvas_wrapper {
-          scale: calc(1 / 1.6);
-          left: calc((1 - (1 / 1.6)) / 2 * -100vw);
-          top: calc((1 - (1 / 1.6)) / 2 * -100vh);
-        }
-      }
-
-      @media (min-resolution: 1.7dppx) {
-        #canvas_wrapper {
-          scale: calc(1 / 1.7);
-          left: calc((1 - (1 / 1.7)) / 2 * -100vw);
-          top: calc((1 - (1 / 1.7)) / 2 * -100vh);
-        }
-      }
-
-      @media (min-resolution: 1.8dppx) {
-        #canvas_wrapper {
-          scale: calc(1 / 1.8);
-          left: calc((1 - (1 / 1.8)) / 2 * -100vw);
-          top: calc((1 - (1 / 1.8)) / 2 * -100vh);
-        }
-      }
-
-      @media (min-resolution: 1.9dppx) {
-        #canvas_wrapper {
-          scale: calc(1 / 1.9);
-          left: calc((1 - (1 / 1.9)) / 2 * -100vw);
-          top: calc((1 - (1 / 1.9)) / 2 * -100vh);
-        }
-      }
-
-      @media (min-resolution: 2.0dppx) {
-        #canvas_wrapper {
-          scale: calc(1 / 2.0);
-          left: calc((1 - (1 / 2.0)) / 2 * -100vw);
-          top: calc((1 - (1 / 2.0)) / 2 * -100vh);
-        }
-      }
-
-      @media (min-resolution: 2.1dppx) {
-        #canvas_wrapper {
-          scale: calc(1 / 2.1);
-          left: calc((1 - (1 / 2.1)) / 2 * -100vw);
-          top: calc((1 - (1 / 2.1)) / 2 * -100vh);
-        }
-      }
-
-      @media (min-resolution: 2.2dppx) {
-        #canvas_wrapper {
-          scale: calc(1 / 2.2);
-          left: calc((1 - (1 / 2.2)) / 2 * -100vw);
-          top: calc((1 - (1 / 2.2)) / 2 * -100vh);
-        }
-      }
-
-      @media (min-resolution: 2.3dppx) {
-        #canvas_wrapper {
-          scale: calc(1 / 2.3);
-          left: calc((1 - (1 / 2.3)) / 2 * -100vw);
-          top: calc((1 - (1 / 2.3)) / 2 * -100vh);
-        }
-      }
-
-      @media (min-resolution: 2.4dppx) {
-        #canvas_wrapper {
-          scale: calc(1 / 2.4);
-          left: calc((1 - (1 / 2.4)) / 2 * -100vw);
-          top: calc((1 - (1 / 2.4)) / 2 * -100vh);
-        }
-      }
-
-      @media (min-resolution: 2.5dppx) {
-        #canvas_wrapper {
-          scale: calc(1 / 2.5);
-          left: calc((1 - (1 / 2.5)) / 2 * -100vw);
-          top: calc((1 - (1 / 2.5)) / 2 * -100vh);
-        }
-      }
-
-      @media (min-resolution: 2.6dppx) {
-        #canvas_wrapper {
-          scale: calc(1 / 2.6);
-          left: calc((1 - (1 / 2.6)) / 2 * -100vw);
-          top: calc((1 - (1 / 2.6)) / 2 * -100vh);
-        }
-      }
-
-      @media (min-resolution: 2.7dppx) {
-        #canvas_wrapper {
-          scale: calc(1 / 2.7);
-          left: calc((1 - (1 / 2.7)) / 2 * -100vw);
-          top: calc((1 - (1 / 2.7)) / 2 * -100vh);
-        }
-      }
-
-      @media (min-resolution: 2.8dppx) {
-        #canvas_wrapper {
-          scale: calc(1 / 2.8);
-          left: calc((1 - (1 / 2.8)) / 2 * -100vw);
-          top: calc((1 - (1 / 2.8)) / 2 * -100vh);
-        }
-      }
-
-      @media (min-resolution: 2.9dppx) {
-        #canvas_wrapper {
-          scale: calc(1 / 2.9);
-          left: calc((1 - (1 / 2.9)) / 2 * -100vw);
-          top: calc((1 - (1 / 2.9)) / 2 * -100vh);
-        }
-      }
-
-      @media (min-resolution: 3.0dppx) {
-        #canvas_wrapper {
-          scale: calc(1 / 3.0);
-          left: calc((1 - (1 / 3.0)) / 2 * -100vw);
-          top: calc((1 - (1 / 3.0)) / 2 * -100vh);
-        }
-      }
-
-      @media (min-resolution: 3.1dppx) {
-        #canvas_wrapper {
-          scale: calc(1 / 3.1);
-          left: calc((1 - (1 / 3.1)) / 2 * -100vw);
-          top: calc((1 - (1 / 3.1)) / 2 * -100vh);
-        }
-      }
-
-      @media (min-resolution: 3.2dppx) {
-        #canvas_wrapper {
-          scale: calc(1 / 3.2);
-          left: calc((1 - (1 / 3.2)) / 2 * -100vw);
-          top: calc((1 - (1 / 3.2)) / 2 * -100vh);
-        }
-      }
-
-      @media (min-resolution: 3.3dppx) {
-        #canvas_wrapper {
-          scale: calc(1 / 3.3);
-          left: calc((1 - (1 / 3.3)) / 2 * -100vw);
-          top: calc((1 - (1 / 3.3)) / 2 * -100vh);
-        }
-      }
-
-      @media (min-resolution: 3.4dppx) {
-        #canvas_wrapper {
-          scale: calc(1 / 3.4);
-          left: calc((1 - (1 / 3.4)) / 2 * -100vw);
-          top: calc((1 - (1 / 3.4)) / 2 * -100vh);
-        }
-      }
-
-      @media (min-resolution: 3.5dppx) {
-        #canvas_wrapper {
-          scale: calc(1 / 3.5);
-          left: calc((1 - (1 / 3.5)) / 2 * -100vw);
-          top: calc((1 - (1 / 3.5)) / 2 * -100vh);
-        }
-      }
-
-      @media (min-resolution: 3.6dppx) {
-        #canvas_wrapper {
-          scale: calc(1 / 3.6);
-          left: calc((1 - (1 / 3.6)) / 2 * -100vw);
-          top: calc((1 - (1 / 3.6)) / 2 * -100vh);
-        }
-      }
-
-      @media (min-resolution: 3.7dppx) {
-        #canvas_wrapper {
-          scale: calc(1 / 3.7);
-          left: calc((1 - (1 / 3.7)) / 2 * -100vw);
-          top: calc((1 - (1 / 3.7)) / 2 * -100vh);
-        }
-      }
-
-      @media (min-resolution: 3.8dppx) {
-        #canvas_wrapper {
-          scale: calc(1 / 3.8);
-          left: calc((1 - (1 / 3.8)) / 2 * -100vw);
-          top: calc((1 - (1 / 3.8)) / 2 * -100vh);
-        }
-      }
-
-      @media (min-resolution: 3.9dppx) {
-        #canvas_wrapper {
-          scale: calc(1 / 3.9);
-          left: calc((1 - (1 / 3.9)) / 2 * -100vw);
-          top: calc((1 - (1 / 3.9)) / 2 * -100vh);
-        }
-      }
-
-      @media (min-resolution: 4.0dppx) {
-        #canvas_wrapper {
-          scale: calc(1 / 4.0);
-          left: calc((1 - (1 / 4.0)) / 2 * -100vw);
-          top: calc((1 - (1 / 4.0)) / 2 * -100vh);
-        }
-      }
-
-      @media (min-resolution: 4.1dppx) {
-        #canvas_wrapper {
-          scale: calc(1 / 4.1);
-          left: calc((1 - (1 / 4.1)) / 2 * -100vw);
-          top: calc((1 - (1 / 4.1)) / 2 * -100vh);
-        }
-      }
-
-      @media (min-resolution: 4.2dppx) {
-        #canvas_wrapper {
-          scale: calc(1 / 4.2);
-          left: calc((1 - (1 / 4.2)) / 2 * -100vw);
-          top: calc((1 - (1 / 4.2)) / 2 * -100vh);
-        }
-      }
-
-      @media (min-resolution: 4.3dppx) {
-        #canvas_wrapper {
-          scale: calc(1 / 4.3);
-          left: calc((1 - (1 / 4.3)) / 2 * -100vw);
-          top: calc((1 - (1 / 4.3)) / 2 * -100vh);
-        }
-      }
-
-      @media (min-resolution: 4.4dppx) {
-        #canvas_wrapper {
-          scale: calc(1 / 4.4);
-          left: calc((1 - (1 / 4.4)) / 2 * -100vw);
-          top: calc((1 - (1 / 4.4)) / 2 * -100vh);
-        }
-      }
-
-      @media (min-resolution: 4.5dppx) {
-        #canvas_wrapper {
-          scale: calc(1 / 4.5);
-          left: calc((1 - (1 / 4.5)) / 2 * -100vw);
-          top: calc((1 - (1 / 4.5)) / 2 * -100vh);
-        }
-      }
-
-      @media (min-resolution: 4.6dppx) {
-        #canvas_wrapper {
-          scale: calc(1 / 4.6);
-          left: calc((1 - (1 / 4.6)) / 2 * -100vw);
-          top: calc((1 - (1 / 4.6)) / 2 * -100vh);
-        }
-      }
-
-      @media (min-resolution: 4.7dppx) {
-        #canvas_wrapper {
-          scale: calc(1 / 4.7);
-          left: calc((1 - (1 / 4.7)) / 2 * -100vw);
-          top: calc((1 - (1 / 4.7)) / 2 * -100vh);
-        }
-      }
-
-      @media (min-resolution: 4.8dppx) {
-        #canvas_wrapper {
-          scale: calc(1 / 4.8);
-          left: calc((1 - (1 / 4.8)) / 2 * -100vw);
-          top: calc((1 - (1 / 4.8)) / 2 * -100vh);
-        }
-      }
-
-      @media (min-resolution: 4.9dppx) {
-        #canvas_wrapper {
-          scale: calc(1 / 4.9);
-          left: calc((1 - (1 / 4.9)) / 2 * -100vw);
-          top: calc((1 - (1 / 4.9)) / 2 * -100vh);
-        }
-      }
-
-      @media (min-resolution: 5.0dppx) {
-        #canvas_wrapper {
-          scale: calc(1 / 5.0);
-          left: calc((1 - (1 / 5.0)) / 2 * -100vw);
-          top: calc((1 - (1 / 5.0)) / 2 * -100vh);
-        }
-      }
-
       .emscripten {
         display: block;
         margin-left: auto;