Allow export of Composited Image

Add a third option to export button select, COMPOSITED, which handles split/side (css clipPath) and css mixBlendModes

package.json

@@ -22,6 +22,7 @@
     "@tmcw/togeojson": "^5.6.0",
     "date-fns": "^2.30.0",
     "dayjs": "^1.11.7",
+    "html-to-image": "^1.11.11",
     "mapbox-gl": "^2.14.1",
     "mapbox-gl-controls": "^2.3.5",
     "react": "^18.2.0",

src/App.tsx

@@ -363,6 +363,7 @@ function App() {
           ></div>
         </Split>
       </div>
+      <div style={{position: 'absolute', inset: '0'}} id={'mapsParent'} >
       <Map
         {...sharedMapsProps}
         hash={true}
@@ -437,7 +438,6 @@ function App() {
         {/* beforeId={"GROUP_"} */}
         <ScaleControl maxWidth={60} unit="metric" position={'top-left'}/>
       </Map>
-      <>
       <div
         style={RightMapStyle}
       >
@@ -488,12 +488,13 @@ function App() {
         </Map>
         {(splitScreenMode !== "split-screen") && (
           <canvas 
+            preserveDrawingBuffer = {true}
             style={
               {...RightMapStyle, 
                 pointerEvents: 'none',
                 // backgroundColor: 'red',
                 mixBlendMode: blendingActivation ? blendingMode : "normal",
-                opacity: opacity,
+                opacity: blendingMode !== 'normal' ? opacity : 0,
                 display: blendingActivation ? 'block' : 'none', 
                 ...{top: 0, bottom: 0, left: 0, right: 0, }, 
                 margin: '0 auto',
@@ -507,7 +508,7 @@ function App() {
             </canvas>
           )}
         </div>
-      </>
+      </div>
       <ControlPanel
         // Adding blending mode opacity, and blending mode activation to pass downward
         blendingActivation={blendingActivation}

src/blending-control.tsx

@@ -8,7 +8,9 @@ const BlendingControl = (props:any) => {
   ];
 
   const handleBlendingModeChange = (event:any) => {
-    props.setBlendingMode(event.target.value);
+    const mode = event.target.value;
+    props.setBlendingMode(mode);
+    if (mode !== 'normal') props.setBlendingActivation(true)
   };
 
   return (