Position text within drawing according to text alignment

dev7355608 · Dec 12, 2022 · 8d1b1d8 · 8d1b1d8
1 parent bfc8bf5
commit 8d1b1d8
Show file tree

Hide file tree

Showing 6 changed files with 82 additions and 21 deletions.
diff --git a/module.json b/module.json
@@ -9,10 +9,10 @@
       "email": "[email protected]"
     }
   ],
-  "version": "2.0.3",
+  "version": "2.0.4",
   "compatibility": {
     "minimum": "10.276",
-    "verified": "10.288",
+    "verified": "10.291",
     "maximum": "10"
   },
   "minimumCoreVersion": "10",
@@ -29,8 +29,8 @@
   },
   "url": "https://github.com/dev7355608/advanced-drawing-tools",
   "manifest": "https://raw.githubusercontent.com/dev7355608/advanced-drawing-tools/main/module.json",
-  "download": "https://github.com/dev7355608/advanced-drawing-tools/archive/v2.0.3.zip",
-  "changelog": "https://github.com/dev7355608/advanced-drawing-tools/releases/tag/v2.0.3",
+  "download": "https://github.com/dev7355608/advanced-drawing-tools/releases/download/v2.0.4/module.zip",
+  "changelog": "https://github.com/dev7355608/advanced-drawing-tools/releases/tag/v2.0.4",
   "bugs": "https://github.com/dev7355608/advanced-drawing-tools/issues",
   "readme": "https://raw.githubusercontent.com/dev7355608/advanced-drawing-tools/main/README.md",
   "license": "https://raw.githubusercontent.com/dev7355608/advanced-drawing-tools/main/LICENSE"

diff --git a/scripts/config.js b/scripts/config.js
@@ -86,9 +86,9 @@ Hooks.on("renderDrawingConfig", (app, html) => {
             <label>Texture Size <span class="units">(Pixels or %)</span></label>
             <div class="form-fields">
                 <label>X</label>
-                <input type="text" name="flags.${MODULE_ID}.fillStyle.texture.width" title="Pixels (px) or Percent (%)" pattern="\\s*(\\d*\\.?\\d+)\\s*(px|%)?\\s*" placeholder="Auto" value="${stringifyValue(fs.texture?.width) ?? ""}">
+                <input type="text" name="flags.${MODULE_ID}.fillStyle.texture.width" title="Pixels (px) or Percent (%)" pattern="\\s*(\\d*\\.?\\d+)\\s*(px|%)?\\s*" placeholder="Width" value="${stringifyValue(fs.texture?.width) ?? ""}">
                 <label>Y</label>
-                <input type="text" name="flags.${MODULE_ID}.fillStyle.texture.height" title="Pixels (px) or Percent (%)" pattern="\\s*(\\d*\\.?\\d+)\\s*(px|%)?\\s*" placeholder="Auto" value="${stringifyValue(fs.texture?.height) ?? ""}">
+                <input type="text" name="flags.${MODULE_ID}.fillStyle.texture.height" title="Pixels (px) or Percent (%)" pattern="\\s*(\\d*\\.?\\d+)\\s*(px|%)?\\s*" placeholder="Height" value="${stringifyValue(fs.texture?.height) ?? ""}">
             </div>
         </div>
         <div class="form-group">
@@ -186,7 +186,7 @@ Hooks.on("renderDrawingConfig", (app, html) => {
 
     html.find(`input[name="textColor"]`).closest(".form-fields").append(`
         &nbsp;
-        <input type="number" name="flags.${MODULE_ID}.textStyle.fillGradientStops" min="0" max="1" step="0.001" placeholder="Auto" title="Color Stop" value="${ts?.fillGradientStops?.[0] ?? ""}">
+        <input type="number" name="flags.${MODULE_ID}.textStyle.fillGradientStops" min="0" max="1" step="0.001" placeholder="" title="Color Stop" value="${ts?.fillGradientStops?.[0] ?? ""}">
         &nbsp;
         <a title="Add Color" class="${MODULE_ID}--textStyle-fill--add" style="flex: 0;"><i class="fas fa-plus fa-fw" style="margin: 0;"></i></a>
         <a title="Remove Color" class="${MODULE_ID}--textStyle-fill--remove" style="flex: 0;"><i class="fas fa-minus fa-fw" style="margin: 0;"></i></a>
@@ -200,7 +200,7 @@ Hooks.on("renderDrawingConfig", (app, html) => {
     });
     html.find(`a[class="${MODULE_ID}--textStyle-fill--remove"]`).click(event => {
         html.find(`input[name="textColor"],input[data-edit="textColor"]`).val(
-            html.find(`input[name="flags.${MODULE_ID}.textStyle.fill"]`).eq(0).val() || "#FFFFFF"
+            html.find(`input[name="flags.${MODULE_ID}.textStyle.fill"]`).eq(0).val() || "#ffffff"
         );
         html.find(`input[name="flags.${MODULE_ID}.textStyle.fillGradientStops"]`).eq(0).val(
             html.find(`input[name="flags.${MODULE_ID}.textStyle.fillGradientStops"]`).eq(1).val() ?? ""
@@ -214,10 +214,10 @@ Hooks.on("renderDrawingConfig", (app, html) => {
             <div class="form-group">
                 <label></label>
                 <div class="form-fields">
-                    <input class="color" type="text" name="flags.${MODULE_ID}.textStyle.fill" value="${fill || "#FFFFFF"}">
-                    <input type="color" data-edit="" value="${fill || "#FFFFFF"}">
+                    <input class="color" type="text" name="flags.${MODULE_ID}.textStyle.fill" value="${fill || "#ffffff"}">
+                    <input type="color" data-edit="" value="${fill || "#ffffff"}">
                     &nbsp;
-                    <input type="number" name="flags.${MODULE_ID}.textStyle.fillGradientStops" min="0" max="1" step="0.001" placeholder="Auto" title="Color Stop" value="${stop ?? ""}">
+                    <input type="number" name="flags.${MODULE_ID}.textStyle.fillGradientStops" min="0" max="1" step="0.001" placeholder="" title="Color Stop" value="${stop ?? ""}">
                     &nbsp;
                     <a title="Add Color" style="flex: 0;"><i class="fas fa-plus fa-fw" style="margin: 0;"></i></a>
                     <a title="Remove Color" style="flex: 0;"><i class="fas fa-minus fa-fw" style="margin: 0;"></i></a>
@@ -267,7 +267,8 @@ Hooks.on("renderDrawingConfig", (app, html) => {
         <div class="form-group">
             <label>Text Alignment</label>
             <select name="flags.${MODULE_ID}.textStyle.align">
-                <option value="left" ${ts.align === "left" || ts.align == null ? "selected" : ""}>Left</option>
+                <option value="" ${ts.align == null ? "selected" : ""}>Default</option>
+                <option value="left" ${ts.align === "left" ? "selected" : ""}>Left</option>
                 <option value="center" ${ts.align === "center" ? "selected" : ""}>Center</option>
                 <option value="right" ${ts.align === "right" ? "selected" : ""}>Right</option>
                 <option value="justify" ${ts.align === "justify" ? "selected" : ""}>Justify</option>
@@ -276,21 +277,21 @@ Hooks.on("renderDrawingConfig", (app, html) => {
         <div class="form-group">
             <label>Stroke Color</label>
             <div class="form-fields">
-                <input class="color" type="text" name="flags.${MODULE_ID}.textStyle.stroke" placeholder="Auto" value="${ts.stroke || ""}">
-                <input type="color" value="${ts.stroke || ""}" data-edit="flags.${MODULE_ID}.textStyle.stroke">
+                <input class="color" type="text" name="flags.${MODULE_ID}.textStyle.stroke" placeholder="" value="${ts.stroke || ""}">
+                <input type="color" value="${ts.stroke || "#000000"}" data-edit="flags.${MODULE_ID}.textStyle.stroke">
             </div>
         </div>
         <div class="form-group">
             <label>Stroke Thickness <span class="units">(Pixels)</span></label>
-            <input type="number" name="flags.${MODULE_ID}.textStyle.strokeThickness" min="0" step="0.1" placeholder="Auto" value="${ts.strokeThickness ?? ""}">
+            <input type="number" name="flags.${MODULE_ID}.textStyle.strokeThickness" min="0" step="0.1" placeholder="Default" value="${ts.strokeThickness ?? ""}">
         </div>
         <div class="form-group">
             <label>Drop Shadow</label>
             <input type="checkbox" name="flags.${MODULE_ID}.textStyle.dropShadow" ${(ts.dropShadow ?? true) ? "checked" : ""}>
         </div>
         <div class="form-group">
             <label>Drop Shadow Blur <span class="units">(Pixels)</span></label>
-            <input type="number" name="flags.${MODULE_ID}.textStyle.dropShadowBlur" min="0" step="0.1" placeholder="Auto" value="${ts.dropShadowBlur ?? ""}">
+            <input type="number" name="flags.${MODULE_ID}.textStyle.dropShadowBlur" min="0" step="0.1" placeholder="Default" value="${ts.dropShadowBlur ?? ""}">
         </div>
         <div class="form-group">
             <label>Drop Shadow Distance <span class="units">(Pixels)</span></label>
@@ -320,6 +321,51 @@ Hooks.on("renderDrawingConfig", (app, html) => {
         </div>
     `);
 
+    const updateStrokeColorPlaceholder = () => {
+        let textColor;
+
+        if (event?.target.type === "color") {
+            textColor = html.find(`input[data-edit="textColor"]`).val();
+        } else {
+            textColor = html.find(`input[name="textColor"]`).val();
+        }
+
+        html.find(`input[name="flags.advanced-drawing-tools.textStyle.stroke"],input[data-edit="flags.advanced-drawing-tools.textStyle.stroke"]`).attr(
+            "placeholder",
+            Color.from(textColor || "#FFFFFF").hsv[2] > 0.6 ? "#000000" : "#FFFFFF"
+        );
+    };
+
+    updateStrokeColorPlaceholder();
+
+    html.find(`input[name="textColor"],input[data-edit="textColor"]`).change(event => updateStrokeColorPlaceholder(event));
+
+    const updateStrokeThicknessPlaceholder = () => {
+        const fontSize = html.find(`input[name="fontSize"]`).val();
+
+        html.find(`input[name="flags.advanced-drawing-tools.textStyle.strokeThickness"]`).attr(
+            "placeholder",
+            Math.max(Math.round(fontSize / 32), 2)
+        );
+    };
+
+    updateStrokeThicknessPlaceholder();
+
+    html.find(`input[name="fontSize"]`).change(event => updateStrokeThicknessPlaceholder(event));
+
+    const updateDropShadowBlurPlaceholder = () => {
+        const fontSize = html.find(`input[name="fontSize"]`).val();
+
+        html.find(`input[name="flags.advanced-drawing-tools.textStyle.dropShadowBlur"]`).attr(
+            "placeholder",
+            Math.max(Math.round(fontSize / 16), 2)
+        );
+    };
+
+    updateDropShadowBlurPlaceholder();
+
+    html.find(`input[name="fontSize"]`).change(event => updateDropShadowBlurPlaceholder(event));
+
     app.options.height = "auto";
     app.position.height = "auto";
     app.setPosition(app.position);

diff --git a/scripts/const.js b/scripts/const.js
@@ -13,7 +13,7 @@ export const DEFAULT_FLAGS = Object.freeze({
     [`flags.${MODULE_ID}.fillStyle.transform.skew.x`]: 0,
     [`flags.${MODULE_ID}.fillStyle.transform.skew.y`]: 0,
     [`flags.${MODULE_ID}.lineStyle.dash`]: null,
-    [`flags.${MODULE_ID}.textStyle.align`]: "left",
+    [`flags.${MODULE_ID}.textStyle.align`]: null,
     [`flags.${MODULE_ID}.textStyle.dropShadow`]: true,
     [`flags.${MODULE_ID}.textStyle.dropShadowAlpha`]: 1,
     [`flags.${MODULE_ID}.textStyle.dropShadowAngle`]: 0,

diff --git a/scripts/index.js b/scripts/index.js
@@ -22,6 +22,7 @@ Hooks.once("libWrapper.Ready", () => {
         else if (size >= 32) return 4;
         return 1;
     }, "OVERRIDE");
+    libWrapper.ignore_conflicts(MODULE_ID, "precise-drawing-tools", "DrawingsLayer.prototype.gridPrecision");
 
     libWrapper.register(MODULE_ID, "Drawing.prototype._rescaleDimensions", function (original, dx, dy) {
         let { points, width, height } = original.shape;

diff --git a/scripts/text.js b/scripts/text.js
@@ -70,7 +70,9 @@ Hooks.once("libWrapper.Ready", () => {
 });
 
 Hooks.on("refreshDrawing", drawing => {
-    if (!drawing.text) {
+    const text = drawing.text;
+
+    if (!text) {
         if (drawing._warpedText) {
             if (!drawing._warpedText.destroyed) {
                 drawing._warpedText.destroy();
@@ -85,15 +87,15 @@ Hooks.on("refreshDrawing", drawing => {
     const document = drawing.document;
     const ts = document.getFlag(MODULE_ID, "textStyle");
 
-    Object.assign(drawing.text.style, {
+    Object.assign(text.style, {
         align: ts?.align || "left",
         dropShadow: ts?.dropShadow ?? true,
         dropShadowAlpha: ts?.dropShadowAlpha ?? 1,
         dropShadowAngle: (ts?.dropShadowAngle ?? 0) / 180 * Math.PI,
         dropShadowBlur: ts?.dropShadowBlur ?? Math.max(Math.round(document.fontSize / 16), 2),
         dropShadowColor: ts?.dropShadowColor || "#000000",
         dropShadowDistance: ts?.dropShadowDistance ?? 0,
-        fill: ts?.fill?.length ? [document.textColor || "#FFFFFF"].concat(ts.fill) : document.textColor || "#FFFFFF",
+        fill: ts?.fill?.length ? [document.textColor || "#FFFFFF"].concat(ts.fill.map(c => c || "#FFFFFF")) : document.textColor || "#FFFFFF",
         fillGradientStops: ts?.fillGradientStops ?? [],
         fillGradientType: ts?.fillGradientType ?? PIXI.TEXT_GRADIENT.LINEAR_VERTICAL,
         fontStyle: ts?.fontStyle || "normal",
@@ -107,6 +109,18 @@ Hooks.on("refreshDrawing", drawing => {
         wordWrapWidth: calculateValue(ts?.wordWrapWidth, document.shape.width) ?? document.shape.width
     });
 
+    const offset = Math.min(Math.max(document.shape.width - text.width, 0) / 2, document.strokeWidth + document.fontSize / 2);
+
+    if (ts?.align === "left" || ts?.align === "justify") {
+        text.pivot.set(Math.max(text.width, document.shape.width) / 2 - offset, text.height / 2);
+    } else if (ts?.align === "right") {
+        text.pivot.set(text.width - Math.max(text.width, document.shape.width) / 2 + offset, text.height / 2);
+    } else {
+        text.pivot.set(text.width / 2, text.height / 2);
+    }
+
+    text.position.set(document.shape.width / 2, document.shape.height / 2);
+
     const arc = Math.clamped(ts?.arc ? ts.arc / 180 * Math.PI : 0, -2 * Math.PI, +2 * Math.PI);
 
     if (arc !== 0) {

diff --git a/scripts/utils.js b/scripts/utils.js
@@ -140,7 +140,7 @@ export function cleanData(data, deletionKeys = true) {
 
     if (deletionKeys) {
         for (const key in newData) {
-            if (!key.startsWith(`flags.${MODULE_ID}.`)) {
+            if (!key.startsWith(`flags.${MODULE_ID}.`) && !key.startsWith(`flags.-=${MODULE_ID}`)) {
                 continue;
             }