feat: Make SVGs "Penrose-editable" #1171

lmxlucy · 2022-12-10T00:40:13Z

Description

Related issue/PR: #1129

Provide editability of any (SVG) diagram created in Penrose.

SVGs exported from Penrose contain (in metadata) the entire source code used to generate the diagram (Domain, Style, and Substance), along with the seed and software version.
The Penrose IDE can directly import an SVG, and automatically import this metadata.

Implementation strategy and design decisions

Penrose SVG Export:

Figure out where SVGs are exported
Programmatically retrieve the Penrose version, variation string, substance code, style code, and domain code
Add this code to the exported SVG metadata

Penrose SVG Import:

Figure out how to upload SVG (dropzone in a new SVG tab)
Figure out how to load trios (focus on In-browser storage)
Extract trios content from SVG and load this code to trios in browser

Examples with steps to reproduce them

Export Penrose SVG

Load word-cloud trios from Roger
Click Compile to compile diagram from trios
Click SVG to export the diagram in svg
Open the exported svg in text editor to see added Penrose tag

Import Penrose SVG

For comparison purpose, load walk-on-spheres from Roger and compile
Upload the word-cloud svg downloaded above in the svg tab and Compile
Check trios content and the newly compiled diagram match the uploaded svg (the titles of trios stay as walk-on-spheres)

Checklist

I have commented my code, particularly in hard-to-understand areas
My changes generate no new ESLint warnings
I have reviewed any generated changes to the diagrams/ folder

added code for creating <penrose> medatadata field and subfields

…lds" This reverts commit 5417cc1.

feat: svg metadata tags (second PR, first one accidentally reverted changes)

* Added SVG tag that can upload SVGs, but there are some UI bugs * added ability to upload style code * working on parsing xml * working on svg parsing * SVG uploader essentially done, although style isn't great * finished SVGUploader

codecov · 2022-12-10T02:25:22Z

Codecov Report

Merging #1171 (1388c70) into main (3c9b12b) will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff           @@
##             main    #1171   +/-   ##
=======================================
  Coverage   62.07%   62.07%           
=======================================
  Files          59       59           
  Lines        7111     7111           
  Branches     1708     1708           
=======================================
  Hits         4414     4414           
  Misses       2614     2614           
  Partials       83       83

Impacted Files	Coverage Δ
packages/core/src/renderer/Renderer.ts	`25.92% <ø> (ø)`

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

wodeni

LGTM overall! Thanks again for submitting the PR 🎉!

I only have a few minor comments that might improve the UX a little bit. I tested the new feature locally and everything seems to run very smoothly. For testing, it might be useful to start adding some tests to editor for this (e.g. serializing all diagrams from the registry and loading them again). This might require a bit more changes and is probably worth another PR.

packages/core/src/renderer/Renderer.ts

packages/editor/src/components/DiagramPanel.tsx

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

packages/editor/src/App.tsx

packages/editor/src/components/SvgUploader.tsx

wodeni

Thanks for cleaning the diff! Small comments on variation loading below.

packages/editor/src/components/SvgUploader.tsx

packages/editor/src/components/DiagramPanel.tsx

packages/editor/src/components/SvgUploader.tsx

wodeni

Great! variation works correctly now. I think it'd be great if we auto-compile uploaded diagrams as a finishing touch. Also a small comment on calls to trim, not a functional issue, just want to future-proof this.

packages/editor/src/components/SvgUploader.tsx

lmxlucy · 2022-12-13T17:30:52Z

I think it'd be great if we auto-compile uploaded diagrams as a finishing touch.

I tried to auto-compile diagram after upload. I tried compileDiagram inside handleChange both inside(after current workspace is updated with uploaded trios) and after reader.onload but diagram was not compiled and no error was displayed. I also did not find other events appropriate for compileDiagram. I am not sure what the problem is. Do you have any ideas on what to do?

wodeni · 2022-12-13T17:34:09Z

I think it'd be great if we auto-compile uploaded diagrams as a finishing touch.

I tried to auto-compile diagram after upload. I tried compileDiagram inside handleChange both inside(after current workspace is updated with uploaded trios) and after reader.onload but diagram was not compiled and no error was displayed. I also did not find other events appropriate for compileDiagram. I am not sure what the problem is. Do you have any ideas on what to do?

My guess is that you did not await for compileDiagram. The function is asynchronous (for retrieving math labels and resolving images mostly) and callers need to wait for it to complete. Your onload will need to be async too probably.

lmxlucy · 2022-12-13T18:01:45Z

I think it'd be great if we auto-compile uploaded diagrams as a finishing touch.

I tried to auto-compile diagram after upload. I tried compileDiagram inside handleChange both inside(after current workspace is updated with uploaded trios) and after reader.onload but diagram was not compiled and no error was displayed. I also did not find other events appropriate for compileDiagram. I am not sure what the problem is. Do you have any ideas on what to do?

My guess is that you did not await for compileDiagram. The function is asynchronous (for retrieving math labels and resolving images mostly) and callers need to wait for it to complete. Your onload will need to be async too probably.

Thank you!! Good to go now!!

wodeni

Final thing: you can simply await the function call. Looking forward to having this in main!

packages/editor/src/components/SvgUploader.tsx

Co-authored-by: Wode "Nimo" Ni <woden@cs.cmu.edu>

lmxlucy · 2022-12-14T02:48:03Z

Final thing: you can simply await the function call. Looking forward to having this in main!

Thank you!

wodeni

Wonderful 💯! Merging if CI passes.Thanks again for the PR!

wodeni · 2022-12-14T06:16:09Z

Looks like format is not passing. @lmxlucy do you mind running yarn format and push again?

wodeni · 2022-12-14T13:52:21Z

Looks like something is off with your prettier configuration. Be sure to run yarn format at the repo root, and do not use a global installation of prettier (I guess that's the reason why the diffs have conflicts).

Remove package-lock.json. Looks like this is a byproduct of running npm install, which we don't use.

lmxlucy · 2022-12-14T18:00:59Z

Looks like something is off with your prettier configuration. Be sure to run yarn format at the repo root, and do not use a global installation of prettier (I guess that's the reason why the diffs have conflicts).

I did run it at repo root and my prettier version:

Remove package-lock.json. Looks like this is a byproduct of running npm install, which we don't use.

That's my bad. I might have accidentally did it on this repo when I meant to do it on others. Removed.

wodeni · 2022-12-14T19:52:00Z

Looks like we have prettier set at 2.2.1, not 2.3.0.

penrose/package.json

Line 37 in 3ae696e

"prettier": "2.2.1",

Might wanna reset your build?

lmxlucy · 2022-12-14T20:36:57Z

Looks like we have prettier set at 2.2.1, not 2.3.0.

penrose/package.json

Line 37 in 3ae696e

"prettier": "2.2.1",

Might wanna reset your build?

I changed my prettier version to 2.3.0 and cleaned my build. But there seem to still be conflicts

wodeni · 2022-12-14T20:41:30Z

Looks like we have prettier set at 2.2.1, not 2.3.0.

penrose/package.json

Line 37 in 3ae696e

"prettier": "2.2.1",

Might wanna reset your build?

I changed my prettier version to 2.3.0 and cleaned my build. But there seem to still be conflicts

To clarify: 2.2.1 is the expected version. Try downgrading or refreshing the build again?

wodeni and others added 12 commits November 30, 2022 17:49

chore: autocomplete shape props inside shape constructors

eda905e

fix: import

1a19623

added code for creating <penrose> medatadata field and subfields

6ea24aa

added code for creating <penrose> medatadata field and subfields

5417cc1

Merge pull request #1 from YonahGoldberg/feat/svg-metadata-tags

f192a15

added code for creating <penrose> medatadata field and subfields

Revert "added code for creating <penrose> medatadata field and subfie…

9b78790

…lds" This reverts commit 5417cc1.

Merge pull request #2 from YonahGoldberg/feat/svg-metadata-tags

014e27f

feat: svg metadata tags (second PR, first one accidentally reverted changes)

Svg drop zone (#3)

facbb87

* Added SVG tag that can upload SVGs, but there are some UI bugs * added ability to upload style code * working on parsing xml * working on svg parsing * SVG uploader essentially done, although style isn't great * finished SVGUploader

retrieved all data to svg output

e79b756

fixed SVG exporting and reverted styleconfig.ts

0951b4f

fixed bug of escaped xml characters being loaded incorrectly

157e3c8

Merge branch 'penrose:main' into penrose-editable-svgs

8493d2b

lmxlucy changed the title ~~feat: Penrose editable svgs~~ feat: Make SVGs "Penrose-editable" Dec 10, 2022

wodeni linked an issue Dec 10, 2022 that may be closed by this pull request

Make SVGs "Penrose-editable" #1129

Closed

wodeni reviewed Dec 10, 2022

View reviewed changes

lmxlucy added 5 commits December 10, 2022 13:44

deleted unused import in renderer

cb02cfe

removed completed TODO

3bb3b7c

removed irrelevant changes to Penrose Editable PR

2387db3

move svg upload tab to the left sidebar

9ae407c

set variation when recreating uploaded svg

34330ae

wodeni requested changes Dec 11, 2022

View reviewed changes

packages/editor/src/components/SvgUploader.tsx Outdated Show resolved Hide resolved

packages/editor/src/components/DiagramPanel.tsx Show resolved Hide resolved

packages/editor/src/components/SvgUploader.tsx Show resolved Hide resolved

lmxlucy added 2 commits December 11, 2022 18:26

fixed small typo on create variation tag

c8bec3b

set variation from the uploaded svg instead of current workspace

f73c84b

wodeni self-requested a review December 13, 2022 04:15

wodeni requested changes Dec 13, 2022

View reviewed changes

small edit on trim

34180e9

added auto compile uploaded svg feature

ed8d30b

wodeni requested changes Dec 13, 2022

View reviewed changes

packages/editor/src/components/SvgUploader.tsx Outdated Show resolved Hide resolved

Update compileDiagram in SvgUploader

49ba364

Co-authored-by: Wode "Nimo" Ni <woden@cs.cmu.edu>

wodeni self-requested a review December 14, 2022 06:12

wodeni approved these changes Dec 14, 2022

View reviewed changes

reformat

3bf8897

removed package-lock.json

ae2282a

lmxlucy added 2 commits December 14, 2022 15:09

reformat

87c71ca

reformat with prettier 2.3.0

6e2a120

reformat after refresh build

1388c70

wodeni merged commit edb5dc8 into penrose:main Dec 14, 2022

wodeni mentioned this pull request Oct 26, 2023

fix: duplicate <penrose> tags in exported SVGs #1652

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Make SVGs "Penrose-editable" #1171

feat: Make SVGs "Penrose-editable" #1171

lmxlucy commented Dec 10, 2022 •

edited

codecov bot commented Dec 10, 2022 •

edited

wodeni left a comment

wodeni left a comment

wodeni left a comment

lmxlucy commented Dec 13, 2022 •

edited

wodeni commented Dec 13, 2022

lmxlucy commented Dec 13, 2022

wodeni left a comment

lmxlucy commented Dec 14, 2022

wodeni left a comment •

edited

wodeni commented Dec 14, 2022

wodeni commented Dec 14, 2022 •

edited

lmxlucy commented Dec 14, 2022 •

edited

wodeni commented Dec 14, 2022

lmxlucy commented Dec 14, 2022

wodeni commented Dec 14, 2022

feat: Make SVGs "Penrose-editable" #1171

feat: Make SVGs "Penrose-editable" #1171

Conversation

lmxlucy commented Dec 10, 2022 • edited

Description

Implementation strategy and design decisions

Examples with steps to reproduce them

Checklist

codecov bot commented Dec 10, 2022 • edited

Codecov Report

wodeni left a comment

Choose a reason for hiding this comment

wodeni left a comment

Choose a reason for hiding this comment

wodeni left a comment

Choose a reason for hiding this comment

lmxlucy commented Dec 13, 2022 • edited

wodeni commented Dec 13, 2022

lmxlucy commented Dec 13, 2022

wodeni left a comment

Choose a reason for hiding this comment

lmxlucy commented Dec 14, 2022

wodeni left a comment • edited

Choose a reason for hiding this comment

wodeni commented Dec 14, 2022

wodeni commented Dec 14, 2022 • edited

lmxlucy commented Dec 14, 2022 • edited

wodeni commented Dec 14, 2022

lmxlucy commented Dec 14, 2022

wodeni commented Dec 14, 2022

lmxlucy commented Dec 10, 2022 •

edited

codecov bot commented Dec 10, 2022 •

edited

lmxlucy commented Dec 13, 2022 •

edited

wodeni left a comment •

edited

wodeni commented Dec 14, 2022 •

edited

lmxlucy commented Dec 14, 2022 •

edited