@designcrowd/library.brand-page 5.12.5 → 5.12.6-shape-1

package/lib/src/shared/content-settings/components/text-items-field/TextItemsField.mixin.js

@@ -76,6 +76,7 @@ export default defineComponent({
                     fontSize: FONT_SIZE_BODY,
                     textAlign: 'left',
                     textStyleType: TEXT_STYLE_TYPES.paragraphs,
+                    applyAutoScale: true,
                 },
             });
             this.isEmpty.push(false);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@designcrowd/library.brand-page",
   "description": "A collection of Maker/Designer applications",
-  "version": "5.12.5",
+  "version": "5.12.6-shape-1",
   "author": "Design.com Eng",
   "license": "UNLICENSED",
   "type": "module",

package/src/brand-page/components/background-shape/BackgroundShape.mixin.ts

@@ -21,7 +21,7 @@ export default defineComponent({
     },
   },
   data() {
-    return { svgData: '', originalSvgData: '' };
+    return { svgData: '', svgDataObjectUrl: '', originalSvgData: '' };
   },
   computed: {
     useObjectElement(): boolean {
@@ -44,11 +44,19 @@ export default defineComponent({
 
       if (this.isFullBackground) {
         attributes.push('preserveAspectRatio="xMidYMid slice"');
-        attributes.push('style="width: 100%; height: 100%;"');
+        attributes.push(`height="100%" width="100%"`);
       }
 
       return attributes.join(' ');
     },
+
+    objectUrl(): string {
+      if (!this.useObjectElement) {
+        return this.svgDataObjectUrl;
+      }
+
+      return this.viewModel.name;
+    },
   },
   watch: {
     'viewModel.style.color': {
@@ -79,6 +87,11 @@ export default defineComponent({
         return;
       }
 
+      if (this.svgDataObjectUrl) {
+        // clean up previous Object URL
+        URL.revokeObjectURL(this.svgDataObjectUrl);
+      }
+
       if (isURL(this.viewModel.name)) {
         if (!this.isValidSvgUrl(this.viewModel.name)) {
           return;
@@ -96,12 +109,19 @@ export default defineComponent({
           this.originalSvgData,
           this.viewModel.style.color,
         );
+      } else {
+        this.svgData = this.originalSvgData;
       }
 
       this.svgData = this.svgData.replace(
         '<svg ',
         `<svg ${this.svgAttributes} `,
       );
+
+      const blob = new Blob([this.svgData], { type: 'image/svg+xml' });
+
+      // Create an Object URL
+      this.svgDataObjectUrl = URL.createObjectURL(blob);
     },
   },
 });

package/src/brand-page/components/background-shape/BackgroundShape.vue

@@ -1,18 +1,8 @@
 <template>
   <div class="c-shape-background">
-    <div
-      v-if="useObjectElement"
-      :style="backgroundShapesStyle"
-      class="c-shape c-shape-object"
-    >
-      <object class="tw-w-full tw-h-full" :data="viewModel.name" />
+    <div :style="backgroundShapesStyle" class="c-shape c-shape-object">
+      <object class="tw-w-full tw-h-full" :data="objectUrl" />
     </div>
-    <div
-      v-else
-      :style="backgroundShapesStyle"
-      class="c-shape"
-      v-html="svgData"
-    />
   </div>
 </template>
 <script>

package/src/brand-page/components/media/Shape.mixin.ts

@@ -34,7 +34,7 @@ export default defineComponent({
     },
   },
   data() {
-    return { svgData: '', originalSvgData: '' };
+    return { svgData: '', svgDataObjectUrl: '', originalSvgData: '' };
   },
   computed: {
     useObjectElement(): boolean {
@@ -53,6 +53,10 @@ export default defineComponent({
     },
 
     objectUrl() {
+      if (!this.useObjectElement) {
+        return this.svgDataObjectUrl;
+      }
+
       let dimensionQuery = ``;
 
       if (this.size) {
@@ -68,7 +72,7 @@ export default defineComponent({
       const attributes: string[] = [];
 
       if (this.size) {
-        attributes.push(`height=${this.size} width=${this.size}`);
+        attributes.push(`height="${this.size}" width="${this.size}"`);
       }
 
       return attributes.join(' ');
@@ -125,6 +129,11 @@ export default defineComponent({
         return;
       }
 
+      if (this.svgDataObjectUrl) {
+        // clean up previous Object URL
+        URL.revokeObjectURL(this.svgDataObjectUrl);
+      }
+
       this.svgData = applyColorReplacementsToSvgString(
         this.originalSvgData,
         this.colorReplacements,
@@ -134,6 +143,11 @@ export default defineComponent({
         '<svg ',
         `<svg ${this.svgAttributes} `,
       );
+
+      const blob = new Blob([this.svgData], { type: 'image/svg+xml' });
+
+      // Create an Object URL
+      this.svgDataObjectUrl = URL.createObjectURL(blob);
     },
   },
 });

package/src/brand-page/components/media/Shape.vue

@@ -1,18 +1,11 @@
 <template>
   <div :class="imgClasses">
     <div
-      v-if="useObjectElement"
       class="c-shape c-shape-object"
       :class="{ 'tw-flex tw-justify-center tw-items-center': size }"
     >
       <object :style="objectStyle" :data="objectUrl" />
     </div>
-    <div
-      v-else
-      class="c-shape"
-      :class="{ 'tw-flex tw-justify-center tw-items-center': size }"
-      v-html="svgData"
-    />
   </div>
 </template>
 <script>

package/src/brand-page/utils/__snapshots__/migration.util.test.ts.snap

@@ -426,7 +426,7 @@ BrandPageModel {
       },
     },
   },
-  "v": 4,
+  "v": 5,
 }
 `;
 
@@ -839,7 +839,7 @@ BrandPageModel {
       },
     },
   },
-  "v": 4,
+  "v": 5,
 }
 `;
 
@@ -1259,6 +1259,6 @@ BrandPageModel {
       },
     },
   },
-  "v": 4,
+  "v": 5,
 }
 `;

package/src/brand-page/utils/migration/migration-05.ts

@@ -0,0 +1,20 @@
+import { type BrandPageModel, type TextContent } from '../..';
+import { isTextContent } from '../model.util';
+
+export const migration05 = (brandPageModel: BrandPageModel): BrandPageModel => {
+  brandPageModel.pages.forEach((page) => {
+    page.contents.forEach((content) => {
+      if (isTextContent(content)) {
+        const textContent = content as TextContent;
+
+        textContent.textItems?.forEach((textItem) => {
+          if (textItem.textStyle) {
+            textItem.textStyle.applyAutoScale = true;
+          }
+        });
+      }
+    });
+  });
+
+  return brandPageModel;
+};

package/src/brand-page/utils/migration.util.ts

@@ -3,6 +3,7 @@ import { migration01 } from './migration/migration-01';
 import { migration02 } from './migration/migration-02';
 import { migration03 } from './migration/migration-03';
 import { migration04 } from './migration/migration-04';
+import { migration05 } from './migration/migration-05';
 
 interface MigrationTableItem {
   version: number;
@@ -32,6 +33,10 @@ const MIGRATION_TABLE = [
     version: 4,
     migrateFn: migration04,
   },
+  {
+    version: 5,
+    migrateFn: migration05,
+  },
 ] as MigrationTableItem[];
 
 export const GetLatestModelVersion = () =>

package/src/shared/content-settings/components/text-items-field/TextItemsField.mixin.ts

@@ -96,6 +96,7 @@ export default defineComponent({
           fontSize: FONT_SIZE_BODY,
           textAlign: 'left',
           textStyleType: TEXT_STYLE_TYPES.paragraphs,
+          applyAutoScale: true,
         },
       });