Add embed option to share modal

packages/server/src/main/resources/diagram-resource.ts

@@ -6,9 +6,11 @@ import pdfFonts from 'pdfmake/build/vfs_fonts';
 import { DiagramDTO } from 'shared/src/main/diagram-dto';
 import { DiagramService } from '../services/diagram-service/diagram-service';
 import { DiagramStorageFactory } from '../services/diagram-storage';
+import { ConversionService } from '../services/conversion-service/conversion-service';
 
 export class DiagramResource {
   diagramService: DiagramService = new DiagramService(DiagramStorageFactory.getStorageService());
+  conversionService: ConversionService = new ConversionService();
 
   getDiagram = (req: Request, res: Response) => {
     const tokenValue: string = req.params.token;
@@ -19,12 +21,23 @@ export class DiagramResource {
     if (/^[a-zA-Z0-9]+$/.test(tokenValue)) {
       this.diagramService
         .getDiagramByLink(tokenValue)
-        .then((diagram: DiagramDTO | undefined) => {
+        .then(async (diagram: DiagramDTO | undefined) => {
           if (diagram) {
-            res.json(diagram);
-          } else {
-            res.status(404).send('Diagram not found');
+            if (req.query.type === 'svg') {
+              const diagramSvg = (await this.conversionService.convertToSvg(diagram.model)).svg;
+              const diagramSvgWhiteBackground = diagramSvg.replace(
+                /<svg([^>]*)>/,
+                '<svg$1 style="background-color: white;">',
+              );
+
+              res.setHeader('Content-Type', 'image/svg+xml');
+              return res.send(diagramSvgWhiteBackground);
+            }
+
+            return res.json(diagram);
           }
+
+          return res.status(404).send('Diagram not found');
         })
         .catch(() => res.status(503).send('Error occurred'));
     } else {

packages/shared/src/main/diagram-view.ts

@@ -3,4 +3,5 @@ export enum DiagramView {
   SEE_FEEDBACK = 'SEE_FEEDBACK',
   EDIT = 'EDIT',
   COLLABORATE = 'COLLABORATE',
+  EMBED = 'EMBED',
 }

packages/webapp/src/main/components/modals/share-modal/share-modal.tsx

@@ -48,6 +48,15 @@ class ShareModalComponent extends Component<Props, State> {
   state = getInitialState();
 
   getLinkForView = () => {
+    if (LocalStorageRepository.getLastPublishedType() === DiagramView.EMBED) {
+      return (
+        `![${
+          this.props.diagram ? this.props.diagram.title : 'Diagram'
+        }](${DEPLOYMENT_URL}/api/diagrams/${LocalStorageRepository.getLastPublishedToken()}?type=svg)` +
+        `\n[Edit a copy](${DEPLOYMENT_URL}/${LocalStorageRepository.getLastPublishedToken()}?view=${DiagramView.EDIT})`
+      );
+    }
+
     return `${DEPLOYMENT_URL}/${LocalStorageRepository.getLastPublishedToken()}?view=${LocalStorageRepository.getLastPublishedType()}`;
   };
 
@@ -63,6 +72,9 @@ class ShareModalComponent extends Component<Props, State> {
       case DiagramView.COLLABORATE:
         innerMessage = 'collaborate';
         break;
+      case DiagramView.EMBED:
+        innerMessage = 'embed';
+        break;
     }
     return `${innerMessage}`;
   };
@@ -90,7 +102,7 @@ class ShareModalComponent extends Component<Props, State> {
           this.setState({ token }, () => {
             LocalStorageRepository.setLastPublishedToken(token);
             LocalStorageRepository.setLastPublishedType(this.state.view);
-            if (this.state.view === 'COLLABORATE') {
+            if (this.state.view === DiagramView.COLLABORATE) {
               window.location.href = this.getLinkForView() + '&notifyUser=true';
             }
             this.copyLink(true);
@@ -156,7 +168,7 @@ class ShareModalComponent extends Component<Props, State> {
 
             <div className="container mb-3">
               <div className="row">
-                <div className="col-sm-12 col-md-6 col-lg-3 p-1">
+                <div className="col-sm-12 col-md-6 col-lg-4 p-1">
                   <button
                     type="button"
                     onClick={() => {
@@ -167,37 +179,48 @@ class ShareModalComponent extends Component<Props, State> {
                     Edit
                   </button>
                 </div>
-                <div className="col-sm-12 col-md-6 col-lg-3 p-1">
+                <div className="col-sm-12 col-md-6 col-lg-4 p-1">
                   <button
                     type="button"
                     onClick={() => {
-                      this.shareDiagram(DiagramView.GIVE_FEEDBACK);
+                      this.shareDiagram(DiagramView.COLLABORATE);
                     }}
-                    className="btn btn-outline-secondary  w-100"
+                    className="btn btn-outline-secondary w-100"
                   >
-                    Give Feedback
+                    Collaborate
                   </button>
                 </div>
-                <div className="col-sm-12 col-md-6 col-lg-3 p-1">
+                <div className="col-sm-12 col-md-6 col-lg-4 p-1">
                   <button
                     type="button"
                     onClick={() => {
-                      this.shareDiagram(DiagramView.SEE_FEEDBACK);
+                      this.shareDiagram(DiagramView.EMBED);
+                    }}
+                    className="btn btn-outline-secondary w-100"
+                  >
+                    Embed
+                  </button>
+                </div>
+                <div className="col-sm-12 col-md-6 col-lg-4 p-1">
+                  <button
+                    type="button"
+                    onClick={() => {
+                      this.shareDiagram(DiagramView.GIVE_FEEDBACK);
                     }}
                     className="btn btn-outline-secondary  w-100"
                   >
-                    See Feedback
+                    Give Feedback
                   </button>
                 </div>
-                <div className="col-sm-12 col-md-6 col-lg-3 p-1">
+                <div className="col-sm-12 col-md-6 col-lg-4 p-1">
                   <button
                     type="button"
                     onClick={() => {
-                      this.shareDiagram(DiagramView.COLLABORATE);
+                      this.shareDiagram(DiagramView.SEE_FEEDBACK);
                     }}
-                    className="btn btn-outline-secondary w-100"
+                    className="btn btn-outline-secondary  w-100"
                   >
-                    Collaborate
+                    See Feedback
                   </button>
                 </div>
               </div>
@@ -208,13 +231,18 @@ class ShareModalComponent extends Component<Props, State> {
                 <legend className="scheduler-border float-none w-auto">Recently shared Diagram:</legend>
                 <InputGroup>
                   {!this.state.token ? (
-                    <FormControl readOnly value={this.getLinkForView()} />
+                    <FormControl
+                      readOnly
+                      value={this.getLinkForView()}
+                      as={LocalStorageRepository.getLastPublishedType() === DiagramView.EMBED ? 'textarea' : 'input'}
+                    />
                   ) : (
                     <a target="blank" href={this.getLinkForView()}>
                       <FormControl
                         style={{ cursor: 'pointer', textDecoration: 'underline' }}
                         readOnly
                         value={this.getLinkForView()}
+                        as={LocalStorageRepository.getLastPublishedType() === DiagramView.EMBED ? 'textarea' : 'input'}
                       />
                     </a>
                   )}