Merge pull request #481 from IshavSohal/issue-456

Add modified property to dynamic panel schema, Fix SVG rendering
ramp4-pcar4 · Dec 20, 2024 · 2f3e83f · 2f3e83f
2 parents bc2f3c0 + 6f78f6a
commit 2f3e83f
Show file tree

Hide file tree

Showing 7 changed files with 76 additions and 28 deletions.
diff --git a/StorylinesSchema.json b/StorylinesSchema.json
@@ -103,6 +103,10 @@
                 "type": {
                     "type": "string",
                     "enum": ["dynamic"]
+                }, 
+                "modified": {
+                    "type": "boolean",
+                    "description": "An optional tag that specifies whether the panel has been modified from its default configuration"
                 }
             },
             "required": ["content", "type", "children", "title"]

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -27,7 +27,7 @@
         "nouislider": "^15.5.0",
         "ramp-config-editor_editeur-config-pcar": "^3.6.0",
         "ramp-pcar": "^4.8.0",
-        "ramp-storylines_demo-scenarios-pcar": "^3.2.8",
+        "ramp-storylines_demo-scenarios-pcar": "^3.2.9",
         "throttle-debounce": "^5.0.0",
         "url": "^0.11.3",
         "uuid": "^9.0.0",

diff --git a/public/StorylinesSlideSchema.json b/public/StorylinesSlideSchema.json
@@ -107,6 +107,10 @@
                 "customStyles": {
                     "type": "string",
                     "description": "Additional CSS styles to apply to the panel."
+                }, 
+                "modified": {
+                    "type": "boolean",
+                    "description": "An optional tag that specifies whether the panel has been modified from its default configuration"
                 }
             },
             "additionalProperties": false,

diff --git a/src/components/editor.vue b/src/components/editor.vue
@@ -335,8 +335,8 @@ import {
     ConfigFileStructure,
     HelpSection,
     MetadataContent,
-    Slide,
     MultiLanguageSlide,
+    Slide,
     SourceCounts,
     StoryRampConfig,
     TextPanel

diff --git a/src/components/image-editor.vue b/src/components/image-editor.vue
@@ -206,16 +206,33 @@ export default class ImageEditorV extends Vue {
                 const assetSrc = `${image.src.substring(image.src.indexOf('/') + 1)}`;
                 const filename = image.src.replace(/^.*[\\/]/, '');
                 const assetFile = this.configFileStructure.zip.file(assetSrc);
+                const assetType = assetSrc.split('.').at(-1);
+
                 if (assetFile) {
-                    this.imagePreviewPromises.push(
-                        assetFile.async('blob').then((res: Blob) => {
-                            return {
-                                ...image,
-                                id: filename ? filename : image.src,
-                                src: URL.createObjectURL(res)
-                            } as ImageFile;
-                        })
-                    );
+                    if (assetType != 'svg') {
+                        this.imagePreviewPromises.push(
+                            assetFile.async('blob').then((res: Blob) => {
+                                return {
+                                    ...image,
+                                    id: filename ? filename : image.src,
+                                    src: URL.createObjectURL(res)
+                                } as ImageFile;
+                            })
+                        );
+                    } else {
+                        this.imagePreviewPromises.push(
+                            assetFile.async('text').then((res) => {
+                                const imageFile = new File([res], filename, {
+                                    type: 'image/svg+xml'
+                                });
+                                return {
+                                    ...image,
+                                    id: filename ? filename : image.src,
+                                    src: URL.createObjectURL(imageFile)
+                                } as ImageFile;
+                            })
+                        );
+                    }
                 }
             });
 

diff --git a/src/components/metadata-editor.vue b/src/components/metadata-editor.vue
@@ -575,9 +575,9 @@ import {
     ImagePanel,
     MapPanel,
     MetadataContent,
+    MultiLanguageSlide,
     PanelType,
     Slide,
-    MultiLanguageSlide,
     SlideshowPanel,
     SourceCounts,
     StoryRampConfig,
@@ -776,12 +776,24 @@ export default class MetadataEditorV extends Vue {
 
                 if (logo) {
                     const logoFile = this.configFileStructure?.zip.file(logoSrc);
+                    const logoType = logoSrc.split('.').at(-1);
                     if (logoFile) {
-                        logoFile.async('blob').then((img: Blob) => {
-                            this.logoImage = new File([img], this.metadata.logoName);
-                            this.metadata.logoPreview = URL.createObjectURL(img);
-                            this.loadStatus = 'loaded';
-                        });
+                        if (logoType !== 'svg') {
+                            logoFile.async('blob').then((img: Blob) => {
+                                this.logoImage = new File([img], this.metadata.logoName);
+                                this.metadata.logoPreview = URL.createObjectURL(img);
+                                this.loadStatus = 'loaded';
+                            });
+                        } else {
+                            logoFile.async('text').then((img) => {
+                                const logoImageFile = new File([img], this.metadata.logoName, {
+                                    type: 'image/svg+xml'
+                                });
+                                this.logoImage = logoImageFile;
+                                this.metadata.logoPreview = URL.createObjectURL(logoImageFile);
+                                this.loadStatus = 'loaded';
+                            });
+                        }
                     } else {
                         // Fill in the field with this value whether it exists or not.
                         this.metadata.logoName = logo;
@@ -1295,19 +1307,30 @@ export default class MetadataEditorV extends Vue {
         if (logo) {
             // Set the alt text for the logo.
             this.metadata.logoAltText = config.introSlide.logo?.altText ? config.introSlide.logo.altText : '';
+            this.metadata.logoName = logo.split('/').at(-1);
 
             // Fetch the logo from the folder (if it exists).
             const logoSrc = `${logo.substring(logo.indexOf('/') + 1)}`;
             const logoName = `${logo.split('/')[logo.split('/').length - 1]}`;
             const logoFile = this.configFileStructure?.zip.file(logoSrc);
-
+            const logoType = logoSrc.split('.').at(-1);
             if (logoFile) {
-                logoFile.async('blob').then((img: Blob) => {
-                    this.logoImage = new File([img], logoName);
-                    this.metadata.logoPreview = URL.createObjectURL(img);
-                    this.metadata.logoName = logoName;
-                    this.loadStatus = 'loaded';
-                });
+                if (logoType !== 'svg') {
+                    logoFile.async('blob').then((img: Blob) => {
+                        this.logoImage = new File([img], this.metadata.logoName);
+                        this.metadata.logoPreview = URL.createObjectURL(img);
+                        this.loadStatus = 'loaded';
+                    });
+                } else {
+                    logoFile.async('text').then((img) => {
+                        const logoImageFile = new File([img], this.metadata.logoName, {
+                            type: 'image/svg+xml'
+                        });
+                        this.logoImage = logoImageFile;
+                        this.metadata.logoPreview = URL.createObjectURL(logoImageFile);
+                        this.loadStatus = 'loaded';
+                    });
+                }
             } else {
                 // Fill in the field with this value whether it exists or not.
                 this.metadata.logoName = logo;