{"version":3,"file":"FontFillText.2dd6f1d9.js","sources":["../../src/components/FontFillText.vue","../../src/components/FontFillText.vue?vue&type=template&id=1463600c&lang.js"],"sourcesContent":["<template>\n  <div :class=\"[classes.fontFillText]\" ref=\"fontFillTextRef\">\n    <DynamicText\n      :class=\"classes.fontFillTextBit\"\n      tag=\"span\"\n      :styleGroup=\"styleGroup\"\n      :get=\"getFont\"\n      :set=\"setFont\"\n    >\n      <p :key=\"line\" :style=\"fontFillStyle\" v-for=\"line in fontFillLines\">\n        {{ line }}\n      </p>\n    </DynamicText>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { useDimensionSync } from \"@fresh8/vue-utils/src/dimensionSync\";\nimport {\n  defineComponent,\n  watchEffect,\n  ref,\n  computed,\n  PropType,\n  onMounted\n} from \"vue\";\nimport { AutoFittingText } from \"fontfill/src/index\";\nimport { injectBrand } from \"@fresh8/ad-data-composition/src/brand\";\nimport { titleCase } from \"@fresh8/ad-data-composition/src/lib/formatText\";\nimport DynamicText from \"./DynamicText.vue\";\nimport { Brand } from \"@fresh8/types/src/index\";\nimport { createUseStyles } from \"@fresh8/vue-jss/src\";\n\nconst useStyles = createUseStyles({\n  fontFillText: {\n    textAlign: \"center\",\n    display: \"flex\",\n    flexDirection: \"column\",\n    flex: 1,\n    overflow: \"hidden\",\n    position: \"relative\",\n    justifyContent: props => props.justifyContent,\n    alignItems: props => props.alignment\n  },\n  fontFillTextBit: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    position: \"relative\",\n    justifyContent: props => props.justifyContent,\n    alignItems: props => props.alignment,\n    // This fixes an issue with some fonts loading in Safari\n    // bigger than when they measured by fontfill in canvas\n    textRendering: \"optimizeSpeed\"\n  }\n});\n\nexport default defineComponent({\n  components: { DynamicText },\n  props: {\n    text: String,\n    styleGroup: { type: String, required: true },\n    maxSize: {\n      type: Number,\n      default: 25\n    },\n    minSize: {\n      type: Number,\n      default: 10\n    },\n    lineHeight: {\n      type: Number,\n      default: 1.2\n    },\n    getFont: {\n      type: Function as PropType<\n        (brand: Brand | undefined) => string | undefined\n      >,\n      required: true\n    },\n    setFont: {\n      type: Function as PropType<(brand: Brand, value: string) => void>,\n      required: true\n    },\n    alignment: {\n      type: String as PropType<\"flex-end\" | \"flex-start\" | \"center\">,\n      default: \"center\"\n    },\n    justifyContent: {\n      type: String as PropType<\"flex-end\" | \"flex-start\" | \"center\">,\n      default: \"center\"\n    }\n  },\n  setup(props) {\n    const reactiveStyles = computed(() => ({\n      alignment: props.alignment,\n      justifyContent: props.justifyContent\n    }));\n\n    const classes = useStyles(reactiveStyles);\n    const brandContext = injectBrand();\n\n    const fontId = computed(\n      () => props.getFont(brandContext?.brand.value) || \"\"\n    );\n\n    const fontStyle = computed(() =>\n      brandContext?.getFontStyle(fontId.value, true)\n    );\n\n    const defaultFontFamily =\n      \"'Roboto','Arial','Helvetica Neue','Helvetica',sans-serif\";\n\n    const targetString = computed(() => {\n      if (!props.text) {\n        return \"\";\n      }\n\n      if (fontStyle?.value?.textTransform === \"uppercase\") {\n        return props.text.toUpperCase().trim();\n      }\n\n      if (fontStyle?.value?.textTransform === \"capitalize\") {\n        return titleCase(props.text).trim();\n      }\n\n      if (fontStyle?.value?.textTransform === \"lowercase\") {\n        return props.text.toLowerCase().trim();\n      }\n\n      return props.text.trim();\n    });\n\n    const fontFillTextRef = ref();\n    const { dimensions: fontFillTextBox, layoutContext } = useDimensionSync(\n      fontFillTextRef\n    );\n    const fontFitter = new AutoFittingText(\n      fontFillTextBox.value.width,\n      fontFillTextBox.value.height,\n      {\n        targetString: targetString.value,\n        family: fontStyle.value?.fontFamily || defaultFontFamily,\n        lineHeight: props.lineHeight,\n        maxFontSize: props.maxSize,\n        minFontSize: props.minSize\n      }\n    );\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    const fontMetrics = ref<any>();\n\n    watchEffect(() => {\n      fontFitter.width = fontFillTextBox.value.width;\n      fontFitter.height = fontFillTextBox.value.height;\n\n      fontFitter.targetString = targetString.value;\n      fontFitter.family = fontStyle.value?.fontFamily || defaultFontFamily;\n\n      window.requestAnimationFrame(() => {\n        fontMetrics.value = fontFitter.metrics;\n      });\n\n      document.fonts &&\n        document.fonts\n          .load(`12px ${fontStyle.value?.fontFamily}`, fontFitter.targetString)\n          .then(() => {\n            // trigger a recalculation\n            // should make fontfill more functional\n            fontFitter.family = \"\";\n            fontFitter.family =\n              fontStyle.value?.fontFamily || defaultFontFamily;\n            fontMetrics.value = fontFitter.metrics;\n            layoutContext.layoutEffect();\n          });\n    });\n\n    const fontFillLines = computed(() => fontMetrics?.value?.lines as string[]);\n    const fontFillStyle = computed(() => ({\n      fontSize: Math.floor(fontMetrics.value.fontSize) + \"px\",\n      lineHeight: props.lineHeight,\n      margin: 0,\n      padding: 0\n    }));\n\n    const rafId = ref();\n\n    function refreshFontFill() {\n      layoutContext.layoutEffect();\n      rafId.value = requestAnimationFrame(refreshFontFill);\n    }\n\n    onMounted(() => {\n      rafId.value = requestAnimationFrame(refreshFontFill);\n\n      setTimeout(() => {\n        cancelAnimationFrame(rafId.value);\n      }, 1000);\n    });\n\n    return {\n      classes,\n      fontFillTextRef,\n      fontFillLines,\n      fontFillStyle\n    };\n  }\n});\n</script>\n\n<style></style>\n","<template>\n  <div :class=\"[classes.fontFillText]\" ref=\"fontFillTextRef\">\n    <DynamicText\n      :class=\"classes.fontFillTextBit\"\n      tag=\"span\"\n      :styleGroup=\"styleGroup\"\n      :get=\"getFont\"\n      :set=\"setFont\"\n    >\n      <p :key=\"line\" :style=\"fontFillStyle\" v-for=\"line in fontFillLines\">\n        {{ line }}\n      </p>\n    </DynamicText>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { useDimensionSync } from \"@fresh8/vue-utils/src/dimensionSync\";\nimport {\n  defineComponent,\n  watchEffect,\n  ref,\n  computed,\n  PropType,\n  onMounted\n} from \"vue\";\nimport { AutoFittingText } from \"fontfill/src/index\";\nimport { injectBrand } from \"@fresh8/ad-data-composition/src/brand\";\nimport { titleCase } from \"@fresh8/ad-data-composition/src/lib/formatText\";\nimport DynamicText from \"./DynamicText.vue\";\nimport { Brand } from \"@fresh8/types/src/index\";\nimport { createUseStyles } from \"@fresh8/vue-jss/src\";\n\nconst useStyles = createUseStyles({\n  fontFillText: {\n    textAlign: \"center\",\n    display: \"flex\",\n    flexDirection: \"column\",\n    flex: 1,\n    overflow: \"hidden\",\n    position: \"relative\",\n    justifyContent: props => props.justifyContent,\n    alignItems: props => props.alignment\n  },\n  fontFillTextBit: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    position: \"relative\",\n    justifyContent: props => props.justifyContent,\n    alignItems: props => props.alignment,\n    // This fixes an issue with some fonts loading in Safari\n    // bigger than when they measured by fontfill in canvas\n    textRendering: \"optimizeSpeed\"\n  }\n});\n\nexport default defineComponent({\n  components: { DynamicText },\n  props: {\n    text: String,\n    styleGroup: { type: String, required: true },\n    maxSize: {\n      type: Number,\n      default: 25\n    },\n    minSize: {\n      type: Number,\n      default: 10\n    },\n    lineHeight: {\n      type: Number,\n      default: 1.2\n    },\n    getFont: {\n      type: Function as PropType<\n        (brand: Brand | undefined) => string | undefined\n      >,\n      required: true\n    },\n    setFont: {\n      type: Function as PropType<(brand: Brand, value: string) => void>,\n      required: true\n    },\n    alignment: {\n      type: String as PropType<\"flex-end\" | \"flex-start\" | \"center\">,\n      default: \"center\"\n    },\n    justifyContent: {\n      type: String as PropType<\"flex-end\" | \"flex-start\" | \"center\">,\n      default: \"center\"\n    }\n  },\n  setup(props) {\n    const reactiveStyles = computed(() => ({\n      alignment: props.alignment,\n      justifyContent: props.justifyContent\n    }));\n\n    const classes = useStyles(reactiveStyles);\n    const brandContext = injectBrand();\n\n    const fontId = computed(\n      () => props.getFont(brandContext?.brand.value) || \"\"\n    );\n\n    const fontStyle = computed(() =>\n      brandContext?.getFontStyle(fontId.value, true)\n    );\n\n    const defaultFontFamily =\n      \"'Roboto','Arial','Helvetica Neue','Helvetica',sans-serif\";\n\n    const targetString = computed(() => {\n      if (!props.text) {\n        return \"\";\n      }\n\n      if (fontStyle?.value?.textTransform === \"uppercase\") {\n        return props.text.toUpperCase().trim();\n      }\n\n      if (fontStyle?.value?.textTransform === \"capitalize\") {\n        return titleCase(props.text).trim();\n      }\n\n      if (fontStyle?.value?.textTransform === \"lowercase\") {\n        return props.text.toLowerCase().trim();\n      }\n\n      return props.text.trim();\n    });\n\n    const fontFillTextRef = ref();\n    const { dimensions: fontFillTextBox, layoutContext } = useDimensionSync(\n      fontFillTextRef\n    );\n    const fontFitter = new AutoFittingText(\n      fontFillTextBox.value.width,\n      fontFillTextBox.value.height,\n      {\n        targetString: targetString.value,\n        family: fontStyle.value?.fontFamily || defaultFontFamily,\n        lineHeight: props.lineHeight,\n        maxFontSize: props.maxSize,\n        minFontSize: props.minSize\n      }\n    );\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    const fontMetrics = ref<any>();\n\n    watchEffect(() => {\n      fontFitter.width = fontFillTextBox.value.width;\n      fontFitter.height = fontFillTextBox.value.height;\n\n      fontFitter.targetString = targetString.value;\n      fontFitter.family = fontStyle.value?.fontFamily || defaultFontFamily;\n\n      window.requestAnimationFrame(() => {\n        fontMetrics.value = fontFitter.metrics;\n      });\n\n      document.fonts &&\n        document.fonts\n          .load(`12px ${fontStyle.value?.fontFamily}`, fontFitter.targetString)\n          .then(() => {\n            // trigger a recalculation\n            // should make fontfill more functional\n            fontFitter.family = \"\";\n            fontFitter.family =\n              fontStyle.value?.fontFamily || defaultFontFamily;\n            fontMetrics.value = fontFitter.metrics;\n            layoutContext.layoutEffect();\n          });\n    });\n\n    const fontFillLines = computed(() => fontMetrics?.value?.lines as string[]);\n    const fontFillStyle = computed(() => ({\n      fontSize: Math.floor(fontMetrics.value.fontSize) + \"px\",\n      lineHeight: props.lineHeight,\n      margin: 0,\n      padding: 0\n    }));\n\n    const rafId = ref();\n\n    function refreshFontFill() {\n      layoutContext.layoutEffect();\n      rafId.value = requestAnimationFrame(refreshFontFill);\n    }\n\n    onMounted(() => {\n      rafId.value = requestAnimationFrame(refreshFontFill);\n\n      setTimeout(() => {\n        cancelAnimationFrame(rafId.value);\n      }, 1000);\n    });\n\n    return {\n      classes,\n      fontFillTextRef,\n      fontFillLines,\n      fontFillStyle\n    };\n  }\n});\n</script>\n\n<style></style>\n"],"names":["useStyles","createUseStyles","fontFillText","textAlign","display","flexDirection","flex","overflow","position","justifyContent","props","alignItems","alignment","fontFillTextBit","textRendering","defineComponent","components","DynamicText","text","String","styleGroup","type","required","maxSize","Number","default","minSize","lineHeight","getFont","Function","setFont","[object Object]","computed","reactiveStyles","injectBrand","brandContext","brand","value","getFontStyle","fontId","fontStyle","textTransform","toUpperCase","trim","titleCase","toLowerCase","ref","dimensions","layoutContext","useDimensionSync","fontFillTextRef","AutoFittingText","fontFillTextBox","width","height","targetString","family","fontFamily","defaultFontFamily","maxFontSize","minFontSize","requestAnimationFrame","fontFitter","metrics","fonts","document","load","then","layoutEffect","fontMetrics","lines","fontSize","Math","floor","margin","padding","refreshFontFill","rafId","classes","fontFillLines","fontFillStyle","_createBlock","class","_ctx","_createVNode","tag","get","set","key","line","style"],"mappings":"4QAiCA,MAAMA,EAAYC,EAAgB,CAChCC,aAAc,CACZC,UAAW,SACXC,QAAS,OACTC,cAAe,SACfC,KAAM,EACNC,SAAU,SACVC,SAAU,WACVC,kBAAyBC,EAAMD,eAC/BE,cAAqBD,EAAME,WAE7BC,gBAAiB,CACfT,QAAS,OACTC,cAAe,SACfG,SAAU,WACVC,kBAAyBC,EAAMD,eAC/BE,cAAqBD,EAAME,UAG3BE,cAAe,mBAInB,MAAeC,EAAgB,CAC7BC,WAAY,CAAEC,eACdP,MAAO,CACLQ,KAAMC,OACNC,WAAY,CAAEC,KAAMF,OAAQG,UAAU,GACtCC,QAAS,CACPF,KAAMG,OACNC,QAAS,IAEXC,QAAS,CACPL,KAAMG,OACNC,QAAS,IAEXE,WAAY,CACVN,KAAMG,OACNC,QAAS,KAEXG,QAAS,CACPP,KAAMQ,SAGNP,UAAU,GAEZQ,QAAS,CACPT,KAAMQ,SACNP,UAAU,GAEZV,UAAW,CACTS,KAAMF,OACNM,QAAS,UAEXhB,eAAgB,CACdY,KAAMF,OACNM,QAAS,WAGbM,iBACyBC,GAAS,MAC9BpB,UAAWF,EAAME,UACjBH,eAAgBC,EAAMD,qBAGRT,EAAUiC,KACLC,MAENF,GACb,IAAMtB,EAAMkB,QAAQO,GAAcC,MAAMC,QAAU,OAGlCL,GAAS,IACzBG,GAAcG,aAAaC,EAAOF,OAAO,OAIzC,6DAEmBL,GAAS,IACvBtB,EAAMQ,KAI6B,cAApCsB,GAAWH,OAAOI,cACb/B,EAAMQ,KAAKwB,cAAcC,OAGM,eAApCH,GAAWH,OAAOI,cACbG,EAAUlC,EAAMQ,MAAMyB,OAGS,cAApCH,GAAWH,OAAOI,cACb/B,EAAMQ,KAAK2B,cAAcF,OAG3BjC,EAAMQ,KAAKyB,OAfT,OAkBaG,KAChBC,2BAA6BC,GAAkBC,EACrDC,KAEiB,IAAIC,EACrBC,EAAgBf,MAAMgB,MACtBD,EAAgBf,MAAMiB,OACtB,CACEC,aAAcA,EAAalB,MAC3BmB,OAAQhB,EAAUH,OAAOoB,YAAcC,EACvC/B,WAAYjB,EAAMiB,WAClBgC,YAAajD,EAAMa,QACnBqC,YAAalD,EAAMgB,YAKHoB,OAER,OACCO,MAAQD,EAAgBf,MAAMgB,QAC9BC,OAASF,EAAgBf,MAAMiB,SAE/BC,aAAeA,EAAalB,QAC5BmB,OAAShB,EAAUH,OAAOoB,YAAcC,SAE5CG,uBAAsB,OACfxB,MAAQyB,EAAWC,oBAGxBC,OACPC,SAASD,MACNE,KAAK,QAAQ1B,EAAUH,OAAOoB,WAAcK,EAAWP,cACvDY,MAAK,OAGOX,OAAS,KACTA,OACThB,EAAUH,OAAOoB,YAAcC,IACrBrB,MAAQyB,EAAWC,UACjBK,6BAIApC,GAAS,IAAMqC,GAAahC,OAAOiC,UACnCtC,GAAS,MAC7BuC,SAAUC,KAAKC,MAAMJ,EAAYhC,MAAMkC,UAAY,KACnD5C,WAAYjB,EAAMiB,WAClB+C,OAAQ,EACRC,QAAS,QAGG7B,mBAGEsB,iBACR/B,MAAQwB,sBAAsBe,aAG5B,OACFvC,MAAQwB,sBAAsBe,eAEzB,0BACYC,EAAMxC,SAC1B,QAGE,CACLyC,QAAAA,EACA5B,gBAAAA,EACA6B,cAAAA,EACAC,cAAAA,yEC1MJC,SAAMC,OAAQC,UAAQjF,cAAe4C,IAAI,oBACvCsC,KACGF,MAAOC,UAAQtE,gBAChBwE,IAAI,OACHjE,WAAY+D,aACZG,IAAKH,UACLI,IAAKJ,uBAEgC,YAAtCF,WAAqDE,yBAArDF,OAAIO,IAAKC,EAAOC,MAAOP,mBAClBM"}