From 8d1b1d822207215f27c34ad99c588dfe26eade07 Mon Sep 17 00:00:00 2001 From: dev7355608 Date: Mon, 12 Dec 2022 00:50:40 +0100 Subject: [PATCH] Position text within drawing according to text alignment --- module.json | 8 +++--- scripts/config.js | 70 +++++++++++++++++++++++++++++++++++++++-------- scripts/const.js | 2 +- scripts/index.js | 1 + scripts/text.js | 20 ++++++++++++-- scripts/utils.js | 2 +- 6 files changed, 82 insertions(+), 21 deletions(-) diff --git a/module.json b/module.json index 70d10b9..ae7131f 100644 --- a/module.json +++ b/module.json @@ -9,10 +9,10 @@ "email": "dev7355608@gmail.com" } ], - "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 index b49e9eb..e1878bc 100644 --- a/scripts/config.js +++ b/scripts/config.js @@ -86,9 +86,9 @@ Hooks.on("renderDrawingConfig", (app, html) => {
- + - +
@@ -186,7 +186,7 @@ Hooks.on("renderDrawingConfig", (app, html) => { html.find(`input[name="textColor"]`).closest(".form-fields").append(`   - +   @@ -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) => {
- - + +   - +   @@ -267,7 +267,8 @@ Hooks.on("renderDrawingConfig", (app, html) => {
- + +
- +
@@ -290,7 +291,7 @@ Hooks.on("renderDrawingConfig", (app, html) => {
- +
@@ -320,6 +321,51 @@ Hooks.on("renderDrawingConfig", (app, html) => {
`); + 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 index 4052c73..d23e540 100644 --- 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 index e7a92cf..1a28df9 100644 --- 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 index 9dc791a..8182ded 100644 --- 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,7 +87,7 @@ 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, @@ -93,7 +95,7 @@ Hooks.on("refreshDrawing", drawing => { 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 index 33680e9..9ffb276 100644 --- 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; }