Improvement - VueUiWordCloud - Add config option to use strictPixelPadding or not

Author: graphieros

src/App.vue

@@ -125,7 +125,7 @@ const components = ref([             //------|
  * Modify the index to display a component
  * [0] = VueUiXy 
  */
- const selectedComponent = ref(components.value[54]);
+ const selectedComponent = ref(components.value[37]);
 
 /**
  * Legacy testing arena where some non chart components can be tested

src/components/vue-ui-word-cloud.vue

@@ -237,6 +237,7 @@ function generateWordCloud() {
         words: scaledWords,
         svg: svg.value,
         proximity: FINAL_CONFIG.value.style.chart.words.proximity,
+        strictPixelPadding: FINAL_CONFIG.value.strictPixelPadding
     });
 }
 

src/useConfig.js

@@ -3645,6 +3645,7 @@ export function useConfig() {
         customPalette: [],
         useCssAnimation: true,
         animationDelayMs: 20,
+        strictPixelPadding: false, // If true, strict per-pixel padding is used (dilateWordMask); if false, just rectangular bounding box (or pad).
         userOptions: USER_OPTIONS({
             tooltip: true,
             pdf: true,

src/wordcloud.js

@@ -135,6 +135,7 @@ export function positionWords({
     words,
     proximity = 0,
     svg,
+    strictPixelPadding
 }) {
     const { width, height } = svg;
     const maskW = Math.round(width);
@@ -178,7 +179,9 @@ export function positionWords({
                 svg
             });
 
-            wordMask = dilateWordMask({ wordMask, w, h, dilation: 2 });
+            if (strictPixelPadding) {
+                wordMask = dilateWordMask({ wordMask, w, h, dilation: 1 });
+            }
 
             let r = 0;
             let attempts = 0;

types/vue-data-ui.d.ts

@@ -5480,6 +5480,7 @@ declare module "vue-data-ui" {
         userOptions?: ChartUserOptions;
         useCssAnimation?: boolean;
         animationDelayMs?: number;
+        strictPixelPadding?: boolean;
         style?: {
             fontFamily?: string;
             chart?: {