0.8.1

CHANGELOG.md

@@ -4,6 +4,13 @@ All notable changes to this project will be documented in this file. Dates are d
 
 ## [Unreleased]
 
+## [0.8.1](https://github.com/averrin/director/compare/0.8.0...0.8.1)
+Fixed:
+  * Changing variable type doesnt change list of available variables in arg inputs
+
+Added:
+  * Selection tab previews respects tint
+
 ## [0.8.0](https://github.com/averrin/director/compare/0.7.2...0.8.0)
 
 Added:

README.md

@@ -45,21 +45,26 @@ It's not going to be MATT's alternative, so actions are pretty basic
 * FxMaster
 
 ## Plans
-- [ ] Documentation
-- [X] Extension API
+- [ ] Actual Documentation
+- [ ] Better `multiply`
 - [ ] Migrate to Active Effects Manager
+- [ ] Automated Animations integration
 - [ ] Token Attacher integration
 - [ ] Warpgate mutations & summons integration
 - [ ] Support for templates, lights, doors and so on
 - [ ] Rolls support (variables, hooks)
-- [X] v10 support
-- [ ] Beginner / Expert UI mode
 - [ ] Better import / export
+- [ ] Hooks for ending effects of a sequence. E.g. to destroy DAE's effects.
+- [ ] Better position/token/tile picker
+- [ ] Fix known bugs
+- [ ] MidiQOL hooks
+- [ ] Beginner / Expert UI mode
+- [X] v10 support
 - [X] Better support of Sequencer's functions and types
 - [X] Better support for Token Magic FX
 - [X] Support for Convenient Effects
-- [ ] Hooks for ending effects of a sequence. E.g. to destroy DAE's effects.
-- [ ] [Alpha HUD](https://github.com/averrin/alpha-hud) integrations. A scene widget with something like the hotbar.
+- [X] [Alpha HUD](https://github.com/averrin/alpha-hud) integrations. A scene widget with something like the hotbar.
+- [X] Extension API
 
 ## Images (quite outdated, see docs)
 ![toolbar](/assets/toolbar.png)

src/modules/helpers.js

@@ -236,3 +236,52 @@ export async function getIconNames(collection) {
 export function capitalize(str) {
   return str.charAt(0).toUpperCase() + str.slice(1);
 }
+
+export function tintImage(src, tint) {
+  tint = _getRGBAArray(tint);
+
+  return new Promise((resolve, reject) => {
+    let canvas = document.createElement('canvas');
+    let context = canvas.getContext('2d');
+    let image = new Image();
+    image.crossOrigin = "Anonymous";
+    image.onload = () => {
+      canvas.width = image.width;
+      canvas.height = image.height;
+
+      context.drawImage(image, 0, 0, canvas.width, canvas.height);
+
+      let imgData = context.getImageData(0, 0, canvas.width, canvas.height);
+      let data = imgData.data;
+
+      for (let i = 0; i < data.length; i += 4) {
+        if (data[i + 0] || data[i + 1] || data[i + 2] || data[i + 3]) {
+          data[i + 0] = tint[0];
+          data[i + 1] = tint[1];
+          data[i + 2] = tint[2];
+          data[i + 3] = tint[3];
+        }
+      }
+      context.putImageData(imgData, 0, 0);
+      resolve({ url: canvas.toDataURL(), width: image.width, height: image.height });
+    };
+    image.onerror = error => reject(src, error);
+    image.src = src;
+
+  });
+}
+
+function _getRGBAArray(color) {
+  // Check input as rgba/rgb color
+  let m = /^rgba?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*(?:,\s*(\d+(?:\.\d+)?)\s*)?\)$/.exec(color);
+  if (m) {
+    if (m[4]) return [m[1], m[2], m[3], m[4] * 255];
+    return [m[1], m[2], m[3], 255];
+  }
+
+  // Check input as hex 6-digit color
+  m = /^#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})$/.exec(color);
+  if (m) {
+    return [parseInt(m[1], 16), parseInt(m[2], 16), parseInt(m[3], 16), 255];
+  }
+}

src/view/components/SelectionTab.svelte

@@ -7,7 +7,7 @@
    import { setting } from "../../modules/settings.js";
    import { moduleId, SETTINGS } from "../../constants.js";
    import { getContext } from "svelte";
-   import { getFlag } from "../../modules/helpers.js";
+   import { getFlag, tintImage } from "../../modules/helpers.js";
 
    function editObject(_, object) {
       object.document.sheet.render(true);
@@ -41,14 +41,17 @@
    async function updateThumbs() {
       for (const obj of selection) {
          const img = obj.document.texture?.src || obj.data.img;
-         logger.info(img);
          if (!(img in thumbs)) {
             const thumb = await ImageHelper.createThumbnail(img, {
                width: setting(SETTINGS.RESOLUTION),
                height: setting(SETTINGS.RESOLUTION),
             });
-            logger.info(thumb);
-            thumbs[img] = thumb.thumb;
+            if (obj.data.tint) {
+               const tint = await tintImage(thumb.thumb, obj.data.tint);
+               thumbs[img] = tint.url;
+            } else {
+               thumbs[img] = thumb.thumb;
+            }
          }
       }
    }

src/view/components/Variable.svelte

@@ -15,6 +15,7 @@
    function updateType(e) {
       variable.type = e.detail.id;
       variable = variable;
+      emitChange();
    }
 
    function emitChange(e) {