Updated design and supported multiple files (Processing 4.4.1)

Author: Stefterv

src/components/OpenWithButton.js

@@ -1,18 +1,34 @@
-import React from 'react';
+import React, { useState } from 'react';
 import classnames from 'classnames';
 
 import ProcessingIcon from '../images/logo-processing.svg';
 
-import * as css from './CopyButton.module.css';
+import * as css from './OpenWithButton.module.css';
+
+const OpenWithButton = ({ pdes }) => {
+    const main = pdes[0]
+    let sketchURL = `pde://sketch/base64/${stringToBase64(main.code)}?pde=`
+    for (let pde of pdes) {
+        if (pde === main) continue
+        sketchURL += `${pde.name}:${stringToBase64(pde.code)},`
+    }
+    const [showInstructions, setShowInstructions] = useState(false)
 
-const OpenWithButton = ({ text }) => {
     return (
         <a
-            href={`pde://sketch/base64/${stringToBase64(text)}`}
+            href={sketchURL}
             type="button"
             className={classnames(css.root)}
+            onClick={() => setShowInstructions(true)}
         >
             <ProcessingIcon /> {'Open With Processing'}
+            {showInstructions && (
+                <div className={classnames(css.instructions)}>
+                    <p>If this did not open Processing, make sure you have it installed and opened at least once.</p>
+                    <p>Currently only versions of Processing later than 4.4 are supported</p>
+                    <a href="https://www.processing.org/download/" target="_black">Download Processing</a>
+                </div>
+            )}
         </a>
     )
 }
@@ -23,5 +39,5 @@ function stringToBase64(str) {
     if (typeof Buffer !== 'undefined') {
         return Buffer.from(str).toString('base64');
     }
-    return btoa(str);
-}
+    return btoa(str)
+}

src/components/OpenWithButton.module.css

@@ -6,6 +6,7 @@
   color: var(--darkgray);
   cursor: pointer;
   fill: var(--darkgray);
+  position: relative;
 
   & svg {
     height: 12px;
@@ -21,4 +22,32 @@
 .root:active {
   color: var(--processing-blue-mid);
   fill: var(--processing-blue-mid);
-}
+}
+
+.instructions {
+  bottom: 100%;
+  margin-bottom: 10px;
+  left: 50%;
+  position: absolute;
+  transform: translateX(-50%);
+  min-width: 16em;
+  background-color: #555;
+  color: #fff;
+  text-align: left;
+  border-radius: 6px;
+  padding: 8px 10px 10px 25px;
+  transition: opacity 0.3s;
+  a {
+    color: var(--processing-blue-mid);
+  }
+  &::before {
+    content: "";
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    margin-left: -10px;
+    border-width: 10px;
+    border-style: solid;
+    border-color: #555 transparent transparent transparent;
+  }
+}

src/components/Tabs.js

@@ -43,7 +43,7 @@ const Tabs = ({ pdes, className }) => {
           key={key}>
           <div className={css.actions}>
             <CopyButton text={pde.code} />
-            <OpenWithButton text={pde.code} />
+            <OpenWithButton pdes={pdes} />
           </div>
           <pre className={css.codeBlock}>
             <code