@designcrowd/library.brand-page 5.12.10-shape-1 → 5.12.10

package/package.json

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

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

@@ -6,7 +6,6 @@ import axios from 'axios';
 import { applyColorToSvgString } from '../../utils/svg-color.util';
 import { isURL } from '../../../utils/validator.util';
 import { PROXY_SHAPE_URL_REGEX } from '../../../brand-page/constants';
-import { getRegexToMatchAttributeInSvgTag } from '../../../brand-page/utils/svg.util';
 
 const SUPPORTED_SHAPE_HOSTS = [
   'https://bc-user-uploads.brandcrowd.com/public',
@@ -22,7 +21,7 @@ export default defineComponent({
     },
   },
   data() {
-    return { svgData: '', svgDataObjectUrl: '', originalSvgData: '' };
+    return { svgData: '', originalSvgData: '' };
   },
   computed: {
     useObjectElement(): boolean {
@@ -40,12 +39,15 @@ export default defineComponent({
       );
     },
 
-    objectUrl(): string {
-      if (!this.useObjectElement) {
-        return this.svgDataObjectUrl;
+    svgAttributes(): string {
+      const attributes: string[] = [];
+
+      if (this.isFullBackground) {
+        attributes.push('preserveAspectRatio="xMidYMid slice"');
+        attributes.push('style="width: 100%; height: 100%;"');
       }
 
-      return this.viewModel.name;
+      return attributes.join(' ');
     },
   },
   watch: {
@@ -72,49 +74,6 @@ export default defineComponent({
       );
     },
 
-    applySvgAttributes(svgData: string): string {
-      const attributes: string[] = [];
-
-      if (this.isFullBackground) {
-        const widthRegex = getRegexToMatchAttributeInSvgTag('width');
-
-        if (svgData.match(widthRegex)) {
-          svgData = svgData.replace(widthRegex, `$1width="100%"`);
-        } else {
-          attributes.push(`width="100%"`);
-        }
-
-        const heightRegex = getRegexToMatchAttributeInSvgTag('height');
-
-        if (svgData.match(heightRegex)) {
-          svgData = svgData.replace(heightRegex, `$1height="100%"`);
-        } else {
-          attributes.push(`height="100%"`);
-        }
-
-        const preserveAspectRatioRegex = getRegexToMatchAttributeInSvgTag(
-          'preserveAspectRatio',
-        );
-
-        if (svgData.match(preserveAspectRatioRegex)) {
-          svgData = svgData.replace(
-            preserveAspectRatioRegex,
-            `$1preserveAspectRatio="xMidYMid slice"`,
-          );
-        } else {
-          attributes.push(`preserveAspectRatio="xMidYMid slice"`);
-        }
-      }
-
-      const svgAttributes = attributes.join(' ');
-
-      if (svgAttributes) {
-        svgData = svgData.replace('<svg ', `<svg ${svgAttributes} `);
-      }
-
-      return svgData;
-    },
-
     async render() {
       if (this.useObjectElement) {
         return;
@@ -137,23 +96,12 @@ export default defineComponent({
           this.originalSvgData,
           this.viewModel.style.color,
         );
-      } else {
-        this.svgData = this.originalSvgData;
       }
 
-      this.svgData = this.applySvgAttributes(this.svgData);
-
-      const blob = new Blob([this.svgData], { type: 'image/svg+xml' });
-
-      const oldSvgDataObjectUrl = this.svgDataObjectUrl;
-
-      // Create an Object URL
-      this.svgDataObjectUrl = URL.createObjectURL(blob);
-
-      if (oldSvgDataObjectUrl) {
-        // clean up previous Object URL
-        URL.revokeObjectURL(oldSvgDataObjectUrl);
-      }
+      this.svgData = this.svgData.replace(
+        '<svg ',
+        `<svg ${this.svgAttributes} `,
+      );
     },
   },
 });

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

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

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

@@ -5,7 +5,6 @@ import ComponentCommonMixin from '../mixins/component-common.mixin';
 import axios from 'axios';
 import { applyColorReplacementsToSvgString } from '../../utils/svg-color.util';
 import { PROXY_SHAPE_URL_REGEX } from '../../../brand-page/constants';
-import { getRegexToMatchAttributeInSvgTag } from '../../../brand-page/utils/svg.util';
 
 export default defineComponent({
   mixins: [ComponentCommonMixin],
@@ -35,7 +34,7 @@ export default defineComponent({
     },
   },
   data() {
-    return { svgData: '', svgDataObjectUrl: '', originalSvgData: '' };
+    return { svgData: '', originalSvgData: '' };
   },
   computed: {
     useObjectElement(): boolean {
@@ -54,10 +53,6 @@ export default defineComponent({
     },
 
     objectUrl() {
-      if (!this.useObjectElement) {
-        return this.svgDataObjectUrl;
-      }
-
       let dimensionQuery = ``;
 
       if (this.size) {
@@ -68,17 +63,21 @@ export default defineComponent({
 
       return `${this.imageUrl}${dimensionQuery}`;
     },
+
+    svgAttributes(): string {
+      const attributes: string[] = [];
+
+      if (this.size) {
+        attributes.push(`height=${this.size} width=${this.size}`);
+      }
+
+      return attributes.join(' ');
+    },
   },
   watch: {
     colorReplacements: {
-      handler(newVal, oldVal) {
-        if (
-          newVal &&
-          oldVal &&
-          JSON.stringify(newVal) !== JSON.stringify(oldVal)
-        ) {
-          this.renderAsInnerHtml();
-        }
+      handler() {
+        this.renderAsInnerHtml();
       },
       deep: true,
     },
@@ -121,35 +120,6 @@ export default defineComponent({
     }
   },
   methods: {
-    applySvgAttributes(svgData: string): string {
-      const attributes: string[] = [];
-
-      if (this.size) {
-        const widthRegex = getRegexToMatchAttributeInSvgTag('width');
-
-        if (svgData.match(widthRegex)) {
-          svgData = svgData.replace(widthRegex, `$1width="${this.size}"`);
-        } else {
-          attributes.push(`width="${this.size}"`);
-        }
-
-        const heightRegex = getRegexToMatchAttributeInSvgTag('height');
-
-        if (svgData.match(heightRegex)) {
-          svgData = svgData.replace(heightRegex, `$1height="${this.size}"`);
-        } else {
-          attributes.push(`height="${this.size}"`);
-        }
-      }
-
-      const svgAttributes = attributes.join(' ');
-
-      if (svgAttributes) {
-        svgData = svgData.replace('<svg ', `<svg ${svgAttributes} `);
-      }
-
-      return svgData;
-    },
     async renderAsInnerHtml() {
       if (!this.originalSvgData) {
         return;
@@ -160,19 +130,10 @@ export default defineComponent({
         this.colorReplacements,
       );
 
-      this.svgData = this.applySvgAttributes(this.svgData);
-
-      const blob = new Blob([this.svgData], { type: 'image/svg+xml' });
-
-      const oldSvgDataObjectUrl = this.svgDataObjectUrl;
-
-      // Create an Object URL
-      this.svgDataObjectUrl = URL.createObjectURL(blob);
-
-      if (oldSvgDataObjectUrl) {
-        // clean up previous Object URL
-        URL.revokeObjectURL(oldSvgDataObjectUrl);
-      }
+      this.svgData = this.svgData.replace(
+        '<svg ',
+        `<svg ${this.svgAttributes} `,
+      );
     },
   },
 });

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

@@ -1,11 +1,18 @@
 <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/svg.util.ts

@@ -24,7 +24,3 @@ export const setSvgCssStyle = (svgData: string, cssStyle: string): string => {
 export const appendSvgIdSuffix = (svgData: string, svgIdSuffix: string) => {
   return svgData.replace(/(SVGID(?:_\d+)+)/g, `$1_${svgIdSuffix}`);
 };
-
-export const getRegexToMatchAttributeInSvgTag = (attribute: string) => {
-  return new RegExp(`(<svg\\b[^>]*?)${attribute}="[^"]*"`, 'i');
-};