Version bump

- style improvements for filter controls and light application theme
- FilterSelector will now manually sort the presets after rank change
- Fixed FilterSelector rank sorting failing if two filters share the same rank

Author: Aedif

CHANGELOG.md

@@ -1,3 +1,11 @@
+# Token Magic FX - Update v0.7.5
+
+**Filter Editor**
+
+- Slight style changes and improvements when using `Light` applications theme
+- Fixed rank sorting failing when two or more filters shared the same rank
+- Rank sorting will now take immediate effect upon change
+
 # Token Magic FX - Update v0.7.4
 
 **Filter Editor**

tokenmagic/gui/apps/FilterEditor.js

@@ -106,7 +106,7 @@ class FilterSelector extends HandlebarsApplicationMixin(ApplicationV2) {
 
 	/** @override */
 	static DEFAULT_OPTIONS = {
-		window: { resizable: true },
+		window: { resizable: true, contentClasses: ['standard-form'] },
 		classes: ['tokenmagic', 'selector', 'flexcol'],
 		actions: {
 			select: FilterSelector._onEdit,
@@ -134,13 +134,14 @@ class FilterSelector extends HandlebarsApplicationMixin(ApplicationV2) {
 	};
 
 	static getFilter(document, { filterId, filterType, filterInternalId }) {
-		const filters = document.getFlag('tokenmagic', 'filters');
-		return filters?.find(
-			(f) =>
-				f.tmFilters.tmFilterId === filterId &&
-				f.tmFilters.tmFilterType === filterType &&
-				f.tmFilters.tmFilterInternalId === filterInternalId,
-		)?.tmFilters.tmParams;
+		return document
+			.getFlag('tokenmagic', 'filters')
+			?.find(
+				(f) =>
+					f.tmFilters.tmFilterId === filterId &&
+					f.tmFilters.tmFilterType === filterType &&
+					f.tmFilters.tmFilterInternalId === filterInternalId,
+			)?.tmFilters.tmParams;
 	}
 
 	/** @override */
@@ -290,9 +291,29 @@ class FilterSelector extends HandlebarsApplicationMixin(ApplicationV2) {
 	}
 
 	async _onUpdateFilterRank(fromFilter, toFilter) {
-		const filters = this._document.getFlag('tokenmagic', 'filters');
+		const filters = deepClone(this._document.getFlag('tokenmagic', 'filters'));
 		if (!filters || !filters.length) return;
 
+		// First make sure there are no duplicate ranks
+		const paramArray = filters.map((f) => f.tmFilters.tmParams).sort((f1, f2) => f1.rank - f2.rank);
+		let resort = false;
+		for (let i = 0; i < paramArray.length - 1; i++) {
+			if (paramArray[i].rank === paramArray[i + 1].rank) {
+				resort = true;
+				break;
+			}
+		}
+		if (resort) {
+			const updates = [];
+			const minRank = paramArray[0].rank;
+			for (let i = 1; i < paramArray.length; i++) {
+				const { filterId, filterType, filterInternalId } = paramArray[i];
+				updates.push({ filterId, filterType, filterInternalId, rank: minRank + i });
+			}
+			await TokenMagic.updateFiltersByPlaceable(this._document, updates);
+		}
+
+		// Swap filters
 		const fromParams = FilterSelector.getFilter(this._document, fromFilter);
 		const toParams = FilterSelector.getFilter(this._document, toFilter);
 		if (!fromParams || !toParams) return;
@@ -311,6 +332,11 @@ class FilterSelector extends HandlebarsApplicationMixin(ApplicationV2) {
 				rank: fromParams.rank,
 			},
 		]);
+
+		// Sort filters based on new ranks
+		const sprite = this._document.object?._TMFXgetSprite();
+		if (sprite) sprite.filters = sprite.filters.sort((f1, f2) => f1.rank - f2.rank);
+
 		this.render(true);
 	}
 

tokenmagic/module.json

@@ -2,9 +2,9 @@
   "id": "tokenmagic",
   "title": "Token Magic FX",
   "description": "<p>Add special effects and animations on your tokens, tiles, drawings, templates, and regions</p>",
-  "version": "0.7.4",
+  "version": "0.7.5",
   "manifest": "https://github.com/Feu-Secret/Tokenmagic/releases/latest/download/module.json",
-  "download": "https://github.com/Feu-Secret/Tokenmagic/releases/download/0.7.4/tokenmagic.zip",
+  "download": "https://github.com/Feu-Secret/Tokenmagic/releases/download/0.7.5/tokenmagic.zip",
   "compatibility": {
     "minimum": "13",
     "verified": "13.350"

tokenmagic/styles/tokenmagic.css

@@ -40,7 +40,7 @@
 }
 
 .tokenmagic.application .filter:hover {
-	background-color: #2c2c2c;
+	background-color: var(--sidebar-entry-hover-bg);
 }
 
 .tokenmagic.application .filter img {
@@ -59,7 +59,7 @@
 	display: flex;
 	flex-direction: column;
     gap: 3px;
-	color: white;
+	color: var(--color-text-primary);
  }
 
  .tokenmagic.application .filter .name > * {
@@ -74,14 +74,17 @@
 
 .tokenmagic.application .filter .control {
 	flex: 0 0 5px;
+	border-color: darkgray;
 }
 
 .tokenmagic.application .filter .control.active {
-	color: chartreuse;
+	color: greenyellow;
+	outline: unset;
+    box-shadow: unset;
 }
 
 .tokenmagic.application .filter .control.delete {
-	color: red;
+	color: orangered;
 }
 
 .tokenmagic.application .header {
@@ -135,7 +138,7 @@
 	display: flex;
     align-items: center;
     justify-content: center;
-	color: var(--color-light-1);
+	color: var(--color-text-primary);
 }
 
 .tokenmagic.application .header-controls > a[disabled] {
@@ -146,16 +149,16 @@
 	color: darkorange;
 }
 
-/* ====================
- * == Preset Toggler ==
- * ==================== */ 
+/* ========================
+ * == Bespoke App Styles ==
+ * ======================== */ 
 
-.tokenmagic.toggler .filter .name {
-	color: var(--color-text-primary);
+.tokenmagic.selector .header-controls > a { 
+	color: var(--color-light-1);
 }
 
-.tokenmagic.toggler .header-controls a {
-	color: var(--color-text-primary);
+.tokenmagic.selector .filter .name {
+	color: white;
 }
 
 .tokenmagic.toggler .filter.active {

tokenmagic/templates/apps/filter-editor/filter-list.hbs

@@ -8,7 +8,7 @@
             <span class="subtext">{{subtext}}</span>
         </a>
         {{#each controls}}
-        <a class="control{{#if class}} {{class}}{{/if}}{{#if active}} active{{/if}}" data-action="{{action}}" data-tooltip="{{tooltip}}"><i class="{{icon}}"></i></a>
+        <button type="button" class="control{{#if class}} {{class}}{{/if}}{{#if active}} active{{/if}}" data-action="{{action}}" data-tooltip="{{tooltip}}"><i class="{{icon}}"></i></button>
         {{/each}}
     </li>
     {{/each}}