Svg drop zone

packages/core/src/renderer/Renderer.ts

@@ -186,40 +186,7 @@ export const RenderStatic = async (
   svg.setAttribute("version", "1.2");
   svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
   svg.setAttribute("viewBox", `0 0 ${canvas.width} ${canvas.height}`);
-
-  // Create custom <penrose> tag to store metadata
-  const metadata = document.createElementNS("https://penrose.cs.cmu.edu/metadata", "penrose");
-
-  // Create <version> tag for penrose version
-  const version = document.createElementNS("https://penrose.cs.cmu.edu/version", "version");
-  version.insertAdjacentText('afterbegin', 'penrose version here');
-
-  // Create <variation> tag for variation string
-  const variation = document.createElementNS("https://penrose.cs.cmu.edu/version", "variation");
-  variation.insertAdjacentText('afterbegin', 'penrose variation code here');
 
-  // Create <sub> tag to store substance (.sub) code
-  const substance = document.createElementNS("https://penrose.cs.cmu.edu/substance", "sub");
-  substance.insertAdjacentText('afterbegin', '.sub code here');
-
-  // Create <sty> tag to store style (.sty) code
-  const style = document.createElementNS("https://penrose.cs.cmu.edu/style", "sty");
-  style.insertAdjacentText('afterbegin', '.sty code here');
-
-  // Create <dsl> tag to store .dsl code
-  const dsl = document.createElementNS("https://penrose.cs.cmu.edu/dsl", "dsl");
-  dsl.insertAdjacentText('afterbegin', '.dsl code here');
-
-  // Add these new tags under the <penrose> metadata tag
-  metadata.appendChild(version);
-  metadata.appendChild(variation);
-  metadata.appendChild(substance);
-  metadata.appendChild(style);
-  metadata.appendChild(dsl);
-
-  // Add the <penrose> metadata tag to the parent <svg> tag
-  svg.appendChild(metadata);
-
   return Promise.all(
     computeShapes(varyingValues).map((shape) =>
       RenderShape({

packages/editor/package.json

@@ -57,6 +57,7 @@
     "react": "^18.0.0",
     "react-data-table-component": "^6.11.7",
     "react-dom": "^18.0.0",
+    "react-drag-drop-files": "^2.3.8",
     "react-hot-toast": "^2.2.0",
     "react-inspector": "^4.0.1",
     "react-responsive": "^9.0.0",

packages/editor/src/App.tsx

@@ -23,6 +23,7 @@ import RogerPanel from "./components/RogerPanel";
 import SavedFilesBrowser from "./components/SavedBrowser";
 import Settings from "./components/Settings";
 import StateInspector from "./components/StateInspector";
+import SvgUploader from "./components/SvgUploader";
 import TopBar from "./components/TopBar";
 import {
   currentRogerState,
@@ -52,6 +53,11 @@ const mainRowLayout: IJsonRowNode = {
               },
             ]
           : []),
+        {
+          type: "tab",
+          name: "svg",
+          component: "svgUploader",
+        },
         {
           type: "tab",
           name: ".sub",
@@ -152,6 +158,8 @@ function App() {
       switch (node.getComponent()) {
         case "programEditor":
           return <ProgramEditor kind={node.getConfig().kind} />;
+        case "svgUploader":
+          return <SvgUploader />;
         case "diagram":
           return <DiagramPanel />;
         case "savedFiles":

packages/editor/src/components/DiagramPanel.tsx

@@ -27,8 +27,14 @@ import BlueButton from "./BlueButton";
  */
 export const DownloadSVG = (
   svg: SVGSVGElement,
-  title = "illustration"
+  title = "illustration",
+  dslStr: string,
+  subStr: string,
+  styleStr: string,
+  versionStr: string,
+  variationStr: string,
 ): void => {
+  SVGaddCode(svg, dslStr, subStr, styleStr, versionStr, variationStr);
   const blob = new Blob([svg.outerHTML], {
     type: "image/svg+xml;charset=utf-8",
   });
@@ -41,6 +47,75 @@ export const DownloadSVG = (
   document.body.removeChild(downloadLink);
 };
 
+/**
+ * TODO: add comment
+ * 
+ * @param svg 
+ * @param dslStr 
+ * @param subStr 
+ * @param styleStr 
+ * @param versionStr 
+ * @param variationStr 
+ */
+const SVGaddCode = (
+  svg: SVGSVGElement,
+  dslStr: string,
+  subStr: string,
+  styleStr: string,
+  versionStr: string,
+  variationStr: string,
+): void => {
+  svg.setAttribute("penrose", "0");
+
+  // Create custom <penrose> tag to store metadata
+  const metadata = document.createElementNS(
+    "https://penrose.cs.cmu.edu/metadata",
+    "penrose"
+  );
+
+  // Create <version> tag for penrose version
+  const version = document.createElementNS(
+    "https://penrose.cs.cmu.edu/version",
+    "version"
+  );
+  version.insertAdjacentText("afterbegin", versionStr);
+
+  // Create <variation> tag for variation string
+  const variation = document.createElementNS(
+    "https://penrose.cs.cmu.edu/version",
+    "variation"
+  );
+  variation.insertAdjacentText("afterbegin", variationStr);
+
+  // Create <sub> tag to store substance (.sub) code
+  const substance = document.createElementNS(
+    "https://penrose.cs.cmu.edu/substance",
+    "sub"
+  );
+  substance.insertAdjacentText("afterbegin", subStr);
+
+  // Create <sty> tag to store style (.sty) code
+  const style = document.createElementNS(
+    "https://penrose.cs.cmu.edu/style",
+    "sty"
+  );
+  style.insertAdjacentText("afterbegin", styleStr);
+
+  // Create <dsl> tag to store .dsl code
+  const dsl = document.createElementNS("https://penrose.cs.cmu.edu/dsl", "dsl");
+  dsl.insertAdjacentText("afterbegin", dslStr);
+
+  // Add these new tags under the <penrose> metadata tag
+  metadata.appendChild(version);
+  metadata.appendChild(variation);
+  metadata.appendChild(substance);
+  metadata.appendChild(style);
+  metadata.appendChild(dsl);
+
+  // Add the <penrose> metadata tag to the parent <svg> tag
+  svg.appendChild(metadata);
+};
+
 /**
  * (browser-only) Downloads any given exported PNG to the user's computer
  * @param svg

packages/editor/src/components/SvgUploader.tsx

@@ -0,0 +1,86 @@
+import { FileUploader } from "react-drag-drop-files";
+import toast from "react-hot-toast";
+import { useRecoilState } from "recoil";
+import { fileContentsSelector } from "../state/atoms";
+
+export default function SvgUploader() {
+  const setDomain = useRecoilState(fileContentsSelector("domain"))[1];
+  const setSubstance = useRecoilState(fileContentsSelector("substance"))[1];
+  const setStyle = useRecoilState(fileContentsSelector("style"))[1];
+
+  const handleChange = (svg: File) => {
+    const reader = new FileReader();
+    reader.readAsText(svg);
+    reader.onabort = () => console.log("file reading was aborted");
+    reader.onerror = () => console.log("file reading has failed");
+    reader.onload = () => {
+      const svgText = reader.result?.toString();
+      if (!svgText) {
+        return;
+      }
+
+      const parser = new DOMParser();
+      const xmlDoc = parser.parseFromString(svgText, "text/xml");
+      const styElem = xmlDoc.getElementsByTagName("sty");
+      const subElem = xmlDoc.getElementsByTagName("sub");
+      const dslElem = xmlDoc.getElementsByTagName("dsl");
+
+      if (styElem.length === 0) {
+        toast.error(
+          "Could not load SVG. Make sure the SVG was exported from Penrose."
+        );
+        return;
+      }
+
+      setStyle({
+        name: "SVG import",
+        contents: styElem[0].innerHTML.trim(),
+      });
+
+      if (subElem.length === 0) {
+        toast.error(
+          "Could not load SVG. Make sure the SVG was exported from Penrose."
+        );
+        return;
+      }
+
+      setSubstance({
+        name: "SVG import",
+        contents: subElem[0].innerHTML.trim(),
+      });
+
+      if (dslElem.length === 0) {
+        toast.error(
+          "Could not load SVG. Make sure the SVG was exported from Penrose."
+        );
+        return;
+      }
+
+      setDomain({
+        name: "SVG import",
+        contents: dslElem[0].innerHTML.trim(),
+      });
+
+      toast.success("Sucessfully uploaded SVG to editor");
+    };
+  };
+
+  return (
+    <FileUploader
+      handleChange={handleChange}
+      name="file"
+      types={["SVG"]}
+      multiple={false}
+      label="Upload or drop a Penrose exported SVG here"
+    >
+      <div
+        style={{ border: "2px dashed", borderColor: "darkgrey", padding: 10 }}
+      >
+        <p>
+          <span style={{ textDecoration: "underline" }}>Upload</span> or drop a
+          Penrose exported SVG here
+        </p>
+      </div>
+    </FileUploader>
+  );
+}

packages/examples/src/tutorials/code/tutorial1/setTheory.dsl

@@ -4,5 +4,5 @@
  */
 
  /**************YOUR CODE - START********************/
-
+type Set
 /**************YOUR CODE - END**********************/

packages/examples/src/tutorials/code/tutorial1/twoSets.sty

@@ -5,4 +5,14 @@
 
  /**************YOUR CODE - START********************/
 
-/**************YOUR CODE - END**********************/
+/**************YOUR CODE - END**********************/
+canvas {
+    width = 800
+    height = 700
+}
+
+forall Set x {
+    x.icon =  Circle {
+        strokeWidth : 0.0
+    }
+}

packages/examples/src/tutorials/code/tutorial1/twoSets.sub

@@ -4,5 +4,7 @@
  */
 
  /**************YOUR CODE - START********************/
-
+Set A
+Set B
+Set C
 /**************YOUR CODE - END**********************/

yarn.lock

@@ -19718,6 +19718,14 @@ react-dom@^18.0.0:
     loose-envify "^1.1.0"
     scheduler "^0.22.0"
 
+react-drag-drop-files@^2.3.8:
+  version "2.3.8"
+  resolved "https://registry.yarnpkg.com/react-drag-drop-files/-/react-drag-drop-files-2.3.8.tgz#909e78de96e3300d6b2bdca5fdb3c93140d09b7b"
+  integrity sha512-/tA1FEGhw6IwG5DlogYu0y3uLkyZ6np8cbzihW7Hy/k3b1T022T7zjn/4elZ6+M69GwnJnUUO0Utisu1xZFATA==
+  dependencies:
+    prop-types "^15.7.2"
+    styled-components "^5.3.0"
+
 react-element-to-jsx-string@^14.3.4:
   version "14.3.4"
   resolved "https://registry.yarnpkg.com/react-element-to-jsx-string/-/react-element-to-jsx-string-14.3.4.tgz#709125bc72f06800b68f9f4db485f2c7d31218a8"
@@ -22097,6 +22105,22 @@ style-to-object@0.3.0, style-to-object@^0.3.0:
   dependencies:
     inline-style-parser "0.1.1"
 
+styled-components@^5.3.0:
+  version "5.3.6"
+  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.3.6.tgz#27753c8c27c650bee9358e343fc927966bfd00d1"
+  integrity sha512-hGTZquGAaTqhGWldX7hhfzjnIYBZ0IXQXkCYdvF1Sq3DsUaLx6+NTHC5Jj1ooM2F68sBiVz3lvhfwQs/S3l6qg==
+  dependencies:
+    "@babel/helper-module-imports" "^7.0.0"
+    "@babel/traverse" "^7.4.5"
+    "@emotion/is-prop-valid" "^1.1.0"
+    "@emotion/stylis" "^0.8.4"
+    "@emotion/unitless" "^0.7.4"
+    babel-plugin-styled-components ">= 1.12.0"
+    css-to-react-native "^3.0.0"
+    hoist-non-react-statics "^3.0.0"
+    shallowequal "^1.1.0"
+    supports-color "^5.5.0"
+
 styled-components@^5.3.5:
   version "5.3.5"
   resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.3.5.tgz#a750a398d01f1ca73af16a241dec3da6deae5ec4"