@rocketshow/designer 1.42.0 → 1.46.0

package/fesm2022/rocketshow-designer.mjs

@@ -26,15 +26,16 @@ import * as i3$2 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import * as i11 from 'ngx-bootstrap/popover';
 import { PopoverModule } from 'ngx-bootstrap/popover';
-import * as i7 from 'ngx-sortablejs-plus';
-import { SortablejsModule } from 'ngx-sortablejs-plus';
 import * as i10 from 'ngx-bootstrap/typeahead';
 import { TypeaheadModule } from 'ngx-bootstrap/typeahead';
-import * as i4$1 from 'ngx-bootstrap-slider';
+import * as i3$3 from 'ngx-bootstrap-slider';
 import { NgxBootstrapSliderModule } from 'ngx-bootstrap-slider';
-import * as i8 from '@angular/common';
+import * as i9 from '@angular/common';
+import * as i7 from 'ngx-sortablejs-plus';
+import { SortablejsModule } from 'ngx-sortablejs-plus';
 import * as i5$1 from 'ngx-bootstrap/accordion';
 import { AccordionModule } from 'ngx-bootstrap/accordion';
+import { KEYS, TREE_ACTIONS, TreeModule } from '@ali-hm/angular-tree-component';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
@@ -1053,13 +1054,107 @@ class UuidService {
             }]
     }], () => [], null); })();
 
+class CachedFixturePixel {
+}
+
+class FixturePixelGroupResolveService {
+    matchNumberRule(value, ruleRaw) {
+        const rule = ruleRaw.trim().toLowerCase();
+        // comparisons: <=5, >=5, =5
+        const m = rule.match(/^(<=|>=|=)\s*(-?\d+)$/);
+        if (m) {
+            const op = m[1];
+            const n = Number(m[2]);
+            if (op === '<=')
+                return value <= n;
+            if (op === '>=')
+                return value >= n;
+            return value === n;
+        }
+        // even / odd
+        if (rule === 'even')
+            return value % 2 === 0;
+        if (rule === 'odd')
+            return Math.abs(value % 2) === 1;
+        // 3n, 3n+1, 3n+2, etc.
+        const mn = rule.match(/^(\d+)n(?:\+(\d+))?$/);
+        if (mn) {
+            const base = Number(mn[1]); // e.g. 3
+            const rem = Number(mn[2] ?? '0'); // e.g. 1
+            // handle negative values reasonably too
+            const mod = ((value % base) + base) % base;
+            return mod === ((rem % base) + base) % base;
+        }
+        // If you want, you can treat a plain number as "=number"
+        const asNum = Number(rule);
+        if (!Number.isNaN(asNum))
+            return value === asNum;
+        throw new Error(`Unknown numeric rule: "${ruleRaw}"`);
+    }
+    matchesAllConstraints(p, def) {
+        // AND across present fields
+        if (def.x && !def.x.every((rule) => this.matchNumberRule(p.x, rule)))
+            return false;
+        if (def.y && !def.y.every((rule) => this.matchNumberRule(p.y, rule)))
+            return false;
+        if (def.z && !def.z.every((rule) => this.matchNumberRule(p.z, rule)))
+            return false;
+        if (def.name) {
+            // Interpret each entry as a regex; AND across them (change to "some" if you want OR)
+            const ok = def.name.every((pattern) => {
+                const re = new RegExp(pattern);
+                return re.test(p.key);
+            });
+            if (!ok)
+                return false;
+        }
+        return true;
+    }
+    resolveGroupPixels(group, pixelGroups, allPixels) {
+        const def = pixelGroups[group];
+        if (!def)
+            return []; // unknown group
+        // 1) "all"
+        if (def === 'all')
+            return allPixels.slice();
+        // 2) explicit keys
+        if (Array.isArray(def)) {
+            const wanted = new Set(def);
+            return allPixels.filter((p) => wanted.has(p.key));
+        }
+        // 3) constraints object
+        return allPixels.filter((p) => this.matchesAllConstraints(p, def));
+    }
+    getPixelsForKeyOrGroup(profile, allPixelKeys, keyOrGroup) {
+        let result = [];
+        // search for a key first
+        const pixel = allPixelKeys.find((p) => p.key === keyOrGroup);
+        if (pixel)
+            return [pixel];
+        // search for a group
+        if (profile.matrix.pixelGroups[keyOrGroup]) {
+            result.push(...this.resolveGroupPixels(keyOrGroup, profile.matrix.pixelGroups, allPixelKeys));
+        }
+        return result;
+    }
+    static { this.ɵfac = function FixturePixelGroupResolveService_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || FixturePixelGroupResolveService)(); }; }
+    static { this.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: FixturePixelGroupResolveService, factory: FixturePixelGroupResolveService.ɵfac, providedIn: 'root' }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FixturePixelGroupResolveService, [{
+        type: Injectable,
+        args: [{
+                providedIn: 'root',
+            }]
+    }], null, null); })();
+
 class FixtureService {
-    constructor(http, projectService, translateService, toastrService, uuidService) {
+    constructor(http, projectService, translateService, toastrService, uuidService, fixturePixelGroupResolveService) {
         this.http = http;
         this.projectService = projectService;
         this.translateService = translateService;
         this.toastrService = toastrService;
         this.uuidService = uuidService;
+        this.fixturePixelGroupResolveService = fixturePixelGroupResolveService;
         this.cachedFixtures = [];
         // is the side-tab settings currently selected?
         this.settingsSelection = false;
@@ -1077,7 +1172,7 @@ class FixtureService {
     }
     getCachedFixtureByUuid(uuid, pixelKey) {
         for (const fixture of this.cachedFixtures) {
-            if (this.fixtureUuidAndPixelKeyEquals(fixture.fixture.uuid, uuid, fixture.pixelKey, pixelKey)) {
+            if (this.fixtureUuidAndPixelKeyEquals(fixture.fixture.uuid, uuid, fixture.pixel?.key, pixelKey)) {
                 return fixture;
             }
         }
@@ -1086,7 +1181,7 @@ class FixtureService {
             return undefined;
         }
         for (const fixture of this.cachedFixtures) {
-            if (!fixture.pixelKey && fixture.fixture.uuid === uuid) {
+            if (!fixture.pixel && fixture.fixture.uuid === uuid) {
                 return fixture;
             }
         }
@@ -1323,131 +1418,250 @@ class FixtureService {
         channels.push(cachedFixtureChannel);
     }
     alphanumericSort(a, b) {
-        return a.localeCompare(b, undefined, { numeric: true, sensitivity: 'base' });
+        return a.key.localeCompare(b.key, undefined, { numeric: true, sensitivity: 'base' });
+    }
+    evenlySpacedPosCm(index, count, size) {
+        if (count <= 0)
+            return 0;
+        if (index < 0 || index >= count)
+            return 0;
+        if (count === 1)
+            return size / 2;
+        const step = size / (count + 1); // equal edge margins
+        const pos = (index + 1) * step; // center position
+        return pos;
+    }
+    createPixel(key, x, y, z, profile) {
+        let pixel = new CachedFixturePixel();
+        if (key) {
+            pixel.key = key;
+        }
+        else {
+            // no key available. generate a unique one based on the dimensions
+            pixel.key = 'Pixel ' + (x + 1) + '-' + (y + 1) + '-' + (z + 1);
+        }
+        pixel.x = x;
+        pixel.y = y;
+        pixel.z = z;
+        // calculate the position of the beam, based on the physical dimensions
+        // dimensions in mm
+        const widthCm = profile.physical.dimensions[0] / 10;
+        const heightCm = profile.physical.dimensions[1] / 10;
+        const depthCm = profile.physical.dimensions[2] / 10;
+        let maxX = 0;
+        let maxY = 0;
+        let maxZ = 0;
+        if (profile.matrix.pixelCount) {
+            maxX = profile.matrix.pixelCount[0];
+            maxY = profile.matrix.pixelCount[1];
+            maxZ = profile.matrix.pixelCount[2];
+        }
+        else {
+            maxX = profile.matrix.pixelKeys.length;
+            maxY = profile.matrix.pixelKeys[0].length;
+            maxZ = profile.matrix.pixelKeys[0][0].length;
+        }
+        // distribute the pixels with even spacing
+        pixel.positionX = this.evenlySpacedPosCm(x, maxX, widthCm) - widthCm / 2;
+        pixel.positionY = this.evenlySpacedPosCm(y, maxY, heightCm) - heightCm / 2;
+        pixel.positionZ = this.evenlySpacedPosCm(z, maxZ, depthCm) - depthCm / 2;
+        return pixel;
     }
     getAllPixelKeys(profile) {
         let result = [];
-        if (!profile.matrix.pixelKeys) {
+        if (!profile.matrix || !profile.matrix.pixelKeys) {
             return result;
         }
-        for (let pixelKeyX of profile.matrix.pixelKeys) {
-            for (let pixelKeyY of pixelKeyX) {
-                for (let pixelKeyZ of pixelKeyY) {
-                    if (pixelKeyZ) {
-                        result.push(pixelKeyZ);
+        for (let x = 0; x < profile.matrix.pixelKeys.length; x++) {
+            for (let y = 0; y < profile.matrix.pixelKeys[x].length; y++) {
+                for (let z = 0; z < profile.matrix.pixelKeys[x][y].length; z++) {
+                    const pixelKey = profile.matrix.pixelKeys[x][y][z];
+                    if (pixelKey) {
+                        result.push(this.createPixel(pixelKey, x, y, z, profile));
                     }
                 }
             }
         }
         return result;
     }
-    getAllPixelGroups(profile) {
+    getAllPixelsInGroups(profile, allPixelKeys) {
         let result = [];
-        if (!profile.matrix.pixelGroups) {
+        if (!profile.matrix || !profile.matrix.pixelGroups) {
             return result;
         }
         for (const property of Object.keys(profile.matrix.pixelGroups)) {
-            result.push(property);
+            result.concat(this.fixturePixelGroupResolveService.resolveGroupPixels(property, profile.matrix.pixelGroups, allPixelKeys));
         }
         return result;
     }
-    getPixelKeysInOrder(profile, repeatFor) {
+    // get pixels in order for a specific channel repeatFor
+    getPixelsInOrder(profile, repeatFor) {
+        let allPixelKeys = this.getAllPixelKeys(profile);
         let result = [];
-        // could contain just a single string (e.g. 'eachPixelABC') or
+        // could contain different things
         if (repeatFor.length > 1) {
-            // an array of pixel (groups)
-            result = repeatFor;
+            // an array of pixel keys or groups
+            for (let entry of repeatFor) {
+                result = result.concat(this.fixturePixelGroupResolveService.getPixelsForKeyOrGroup(profile, allPixelKeys, entry));
+            }
         }
         else if (repeatFor.length === 0) {
             return result;
         }
         else if (repeatFor[0] === 'eachPixelABC') {
             // Gets computed into an alphanumerically sorted list of all pixelKeys
-            if (profile.matrix.pixelCount.length === 3) {
+            if (profile.matrix.pixelKeys) {
+                result = result.concat(allPixelKeys);
+                result.sort(this.alphanumericSort);
+                result.sort((a, b) => a.key.localeCompare(b.key, undefined, { numeric: true, sensitivity: 'base' }));
+            }
+            else if (profile.matrix.pixelCount.length === 3) {
                 for (let x = 0; x < profile.matrix.pixelCount[0]; x++) {
                     for (let y = 0; y < profile.matrix.pixelCount[1]; y++) {
                         for (let z = 0; z < profile.matrix.pixelCount[2]; z++) {
-                            result.push('Pixel ' + (x + 1) + '-' + (y + 1) + '-' + (z + 1));
+                            result.push(this.createPixel(null, x, y, z, profile));
                         }
                     }
                 }
             }
-            else {
-                result = result.concat(this.getAllPixelKeys(profile));
-            }
-            result.sort(this.alphanumericSort);
         }
         else if (repeatFor[0] === 'eachPixelGroup') {
             // Gets computed into an array of all pixel group keys, ordered by appearance in the JSON file
-            result = result.concat(this.getAllPixelGroups(profile));
+            result = result.concat(this.getAllPixelsInGroups(profile, allPixelKeys));
         }
         else if (repeatFor[0] === 'eachPixelXYZ') {
-            for (let x = 0; x < profile.matrix.pixelKeys.length; x++) {
-                for (let y = 0; y < profile.matrix.pixelKeys[x].length; y++) {
-                    for (let z = 0; z < profile.matrix.pixelKeys[x][y].length; z++) {
-                        const pixel = profile.matrix.pixelKeys[x][y][z];
-                        if (pixel) {
-                            result.push(pixel);
+            if (profile.matrix.pixelKeys) {
+                for (let x = 0; x < profile.matrix.pixelKeys.length; x++) {
+                    for (let y = 0; y < profile.matrix.pixelKeys[x].length; y++) {
+                        for (let z = 0; z < profile.matrix.pixelKeys[x][y].length; z++) {
+                            const pixel = profile.matrix.pixelKeys[x][y][z];
+                            if (pixel) {
+                                result.push(this.createPixel(pixel, x, y, z, profile));
+                            }
+                        }
+                    }
+                }
+            }
+            else if (profile.matrix.pixelCount.length === 3) {
+                for (let x = 0; x < profile.matrix.pixelCount[0]; x++) {
+                    for (let y = 0; y < profile.matrix.pixelCount[1]; y++) {
+                        for (let z = 0; z < profile.matrix.pixelCount[2]; z++) {
+                            result.push(this.createPixel(null, x, y, z, profile));
                         }
                     }
                 }
             }
         }
         else if (repeatFor[0] === 'eachPixelXZY') {
-            for (let x = 0; x < profile.matrix.pixelKeys.length; x++) {
-                for (let z = 0; z < profile.matrix.pixelKeys[x][0].length; z++) {
-                    for (let y = 0; y < profile.matrix.pixelKeys[x].length; y++) {
-                        const pixel = profile.matrix.pixelKeys[x][y][z];
-                        if (pixel) {
-                            result.push(pixel);
+            if (profile.matrix.pixelKeys) {
+                for (let x = 0; x < profile.matrix.pixelKeys.length; x++) {
+                    for (let z = 0; z < profile.matrix.pixelKeys[x][0].length; z++) {
+                        for (let y = 0; y < profile.matrix.pixelKeys[x].length; y++) {
+                            const pixel = profile.matrix.pixelKeys[x][y][z];
+                            if (pixel) {
+                                result.push(this.createPixel(pixel, x, y, z, profile));
+                            }
+                        }
+                    }
+                }
+            }
+            else if (profile.matrix.pixelCount.length === 3) {
+                for (let x = 0; x < profile.matrix.pixelCount[0]; x++) {
+                    for (let z = 0; z < profile.matrix.pixelCount[2]; z++) {
+                        for (let y = 0; y < profile.matrix.pixelCount[1]; y++) {
+                            result.push(this.createPixel(null, x, y, z, profile));
                         }
                     }
                 }
             }
         }
         else if (repeatFor[0] === 'eachPixelYXZ') {
-            for (let y = 0; y < profile.matrix.pixelKeys[0].length; y++) {
-                for (let x = 0; x < profile.matrix.pixelKeys.length; x++) {
-                    for (let z = 0; z < profile.matrix.pixelKeys[x][y].length; z++) {
-                        const pixel = profile.matrix.pixelKeys[x][y][z];
-                        if (pixel) {
-                            result.push(pixel);
+            if (profile.matrix.pixelKeys) {
+                for (let y = 0; y < profile.matrix.pixelKeys[0].length; y++) {
+                    for (let x = 0; x < profile.matrix.pixelKeys.length; x++) {
+                        for (let z = 0; z < profile.matrix.pixelKeys[x][y].length; z++) {
+                            const pixel = profile.matrix.pixelKeys[x][y][z];
+                            if (pixel) {
+                                result.push(this.createPixel(pixel, x, y, z, profile));
+                            }
+                        }
+                    }
+                }
+            }
+            else if (profile.matrix.pixelCount.length === 3) {
+                for (let y = 0; y < profile.matrix.pixelCount[1]; y++) {
+                    for (let x = 0; x < profile.matrix.pixelCount[0]; x++) {
+                        for (let z = 0; z < profile.matrix.pixelCount[2]; z++) {
+                            result.push(this.createPixel(null, x, y, z, profile));
                         }
                     }
                 }
             }
         }
         else if (repeatFor[0] === 'eachPixelYZX') {
-            for (let y = 0; y < profile.matrix.pixelKeys[0].length; y++) {
-                for (let z = 0; z < profile.matrix.pixelKeys[0][y].length; z++) {
-                    for (let x = 0; x < profile.matrix.pixelKeys.length; x++) {
-                        const pixel = profile.matrix.pixelKeys[x][y][z];
-                        if (pixel) {
-                            result.push(pixel);
+            if (profile.matrix.pixelKeys) {
+                for (let y = 0; y < profile.matrix.pixelKeys[0].length; y++) {
+                    for (let z = 0; z < profile.matrix.pixelKeys[0][y].length; z++) {
+                        for (let x = 0; x < profile.matrix.pixelKeys.length; x++) {
+                            const pixel = profile.matrix.pixelKeys[x][y][z];
+                            if (pixel) {
+                                result.push(this.createPixel(pixel, x, y, z, profile));
+                            }
+                        }
+                    }
+                }
+            }
+            else if (profile.matrix.pixelCount.length === 3) {
+                for (let y = 0; y < profile.matrix.pixelCount[1]; y++) {
+                    for (let z = 0; z < profile.matrix.pixelCount[2]; z++) {
+                        for (let x = 0; x < profile.matrix.pixelCount[0]; x++) {
+                            result.push(this.createPixel(null, x, y, z, profile));
                         }
                     }
                 }
             }
         }
         else if (repeatFor[0] === 'eachPixelZXY') {
-            for (let z = 0; z < profile.matrix.pixelKeys[0][0].length; z++) {
-                for (let x = 0; x < profile.matrix.pixelKeys.length; x++) {
-                    for (let y = 0; y < profile.matrix.pixelKeys[x].length; y++) {
-                        const pixel = profile.matrix.pixelKeys[x][y][z];
-                        if (pixel) {
-                            result.push(pixel);
+            if (profile.matrix.pixelKeys) {
+                for (let z = 0; z < profile.matrix.pixelKeys[0][0].length; z++) {
+                    for (let x = 0; x < profile.matrix.pixelKeys.length; x++) {
+                        for (let y = 0; y < profile.matrix.pixelKeys[x].length; y++) {
+                            const pixel = profile.matrix.pixelKeys[x][y][z];
+                            if (pixel) {
+                                result.push(this.createPixel(pixel, x, y, z, profile));
+                            }
+                        }
+                    }
+                }
+            }
+            else if (profile.matrix.pixelCount.length === 3) {
+                for (let z = 0; z < profile.matrix.pixelCount[2]; z++) {
+                    for (let x = 0; x < profile.matrix.pixelCount[0]; x++) {
+                        for (let y = 0; y < profile.matrix.pixelCount[1]; y++) {
+                            result.push(this.createPixel(null, x, y, z, profile));
                         }
                     }
                 }
             }
         }
         else if (repeatFor[0] === 'eachPixelZYX') {
-            for (let z = 0; z < profile.matrix.pixelKeys[0][0].length; z++) {
-                for (let y = 0; y < profile.matrix.pixelKeys[0].length; y++) {
-                    for (let x = 0; x < profile.matrix.pixelKeys.length; x++) {
-                        const pixel = profile.matrix.pixelKeys[x][y][z];
-                        if (pixel) {
-                            result.push(pixel);
+            if (profile.matrix.pixelKeys) {
+                for (let z = 0; z < profile.matrix.pixelKeys[0][0].length; z++) {
+                    for (let y = 0; y < profile.matrix.pixelKeys[0].length; y++) {
+                        for (let x = 0; x < profile.matrix.pixelKeys.length; x++) {
+                            const pixel = profile.matrix.pixelKeys[x][y][z];
+                            if (pixel) {
+                                result.push(this.createPixel(pixel, x, y, z, profile));
+                            }
+                        }
+                    }
+                }
+            }
+            else if (profile.matrix.pixelCount.length === 3) {
+                for (let z = 0; z < profile.matrix.pixelCount[2]; z++) {
+                    for (let y = 0; y < profile.matrix.pixelCount[1]; y++) {
+                        for (let x = 0; x < profile.matrix.pixelCount[0]; x++) {
+                            result.push(this.createPixel(null, x, y, z, profile));
                         }
                     }
                 }
@@ -1497,6 +1711,8 @@ class FixtureService {
     }
     getCachedChannels(profile, mode, pixelKey) {
         const channels = [];
+        const allPixelKeys = this.getAllPixelKeys(profile);
+        const allPixelsInGroups = this.getAllPixelsInGroups(profile, allPixelKeys);
         if (!mode) {
             return channels;
         }
@@ -1508,18 +1724,19 @@ class FixtureService {
                 for (const availableChannelName of Object.keys(profile.availableChannels)) {
                     if (channel.name === availableChannelName) {
                         const availableChannel = profile.availableChannels[availableChannelName];
+                        channelFound = true;
                         this.addCachedChannel(channels, availableChannel, availableChannelName, null, profile);
                     }
                 }
                 // check the template channels, if not found in the available channels
                 if (!channelFound) {
                     for (const templateChannelName of Object.keys(profile.templateChannels)) {
-                        let existingPixelKeys = this.getAllPixelKeys(profile).concat(this.getAllPixelGroups(profile));
+                        let existingPixelKeys = allPixelKeys.concat(allPixelsInGroups);
                         for (const existingPixelKey of existingPixelKeys) {
-                            const channelName = this.getChannelNameWithPixelKey(templateChannelName, existingPixelKey);
+                            const channelName = this.getChannelNameWithPixelKey(templateChannelName, existingPixelKey.key);
                             if (channel.name === channelName) {
                                 const templateChannel = profile.templateChannels[templateChannelName];
-                                this.addCachedChannel(channels, templateChannel, channelName, existingPixelKey, profile);
+                                this.addCachedChannel(channels, templateChannel, channelName, existingPixelKey.key, profile);
                             }
                         }
                     }
@@ -1527,17 +1744,17 @@ class FixtureService {
             }
             else {
                 // reference a channel through a pixel matrix
-                const availablePixelKeys = this.getPixelKeysInOrder(profile, channel.repeatFor);
+                const availablePixels = this.getPixelsInOrder(profile, channel.repeatFor);
                 if (channel.channelOrder === 'perPixel') {
                     // each channel for each pixel
-                    for (const availablePixelKey of availablePixelKeys) {
-                        if (availablePixelKey === pixelKey) {
+                    for (const availablePixel of availablePixels) {
+                        if (availablePixel.key === pixelKey) {
                             for (const modeTemplateChannelName of channel.templateChannels) {
                                 for (const templateChannelName of Object.keys(profile.templateChannels)) {
                                     // don't check the fine channels. only add the coarse channel.
                                     if (modeTemplateChannelName === templateChannelName) {
                                         const templateChannel = profile.templateChannels[templateChannelName];
-                                        this.addCachedChannel(channels, templateChannel, templateChannelName, availablePixelKey, profile);
+                                        this.addCachedChannel(channels, templateChannel, templateChannelName, availablePixel.key, profile);
                                     }
                                 }
                             }
@@ -1547,13 +1764,13 @@ class FixtureService {
                 else if (channel.channelOrder === 'perChannel') {
                     // each pixel for each channel
                     for (const modeTemplateChannelName of channel.templateChannels) {
-                        for (const availablePixelKey of availablePixelKeys) {
-                            if (availablePixelKey === pixelKey) {
+                        for (const availablePixel of availablePixels) {
+                            if (availablePixel.key === pixelKey) {
                                 for (const templateChannelName of Object.keys(profile.templateChannels)) {
                                     // don't check the fine channels. only add the coarse channel.
                                     if (modeTemplateChannelName === templateChannelName) {
                                         const templateChannel = profile.templateChannels[templateChannelName];
-                                        this.addCachedChannel(channels, templateChannel, templateChannelName, availablePixelKey, profile);
+                                        this.addCachedChannel(channels, templateChannel, templateChannelName, availablePixel.key, profile);
                                     }
                                 }
                             }
@@ -1564,17 +1781,20 @@ class FixtureService {
         }
         return channels;
     }
-    fixtureGetUniquePixelKeys(fixture) {
-        let pixelKeys = new Set();
+    // get all used pixels for all channels in the currently used fixture mode
+    fixtureGetUniquePixels(fixture) {
+        let pixels = [];
         let profile = this.getProfileByUuid(fixture.profileUuid);
         let mode = this.getModeByFixture(profile, fixture);
         // add the unique pixel keys
         for (let channel of mode.channels) {
-            this.getPixelKeysInOrder(profile, channel.repeatFor).forEach((str) => {
-                pixelKeys.add(str);
+            this.getPixelsInOrder(profile, channel.repeatFor).forEach((pixel) => {
+                if (pixels.filter((p) => p.key === pixel.key).length === 0) {
+                    pixels.push(pixel);
+                }
             });
         }
-        return Array.from(pixelKeys);
+        return pixels;
     }
     // does the fixture have a general channel without reference to specific pixel keys in the current mode?
     fixtureHasGeneralChannel(fixture) {
@@ -1582,7 +1802,7 @@ class FixtureService {
         let mode = this.getModeByFixture(profile, fixture);
         // add the unique pixel keys
         for (let channel of mode.channels) {
-            if (this.getPixelKeysInOrder(profile, channel.repeatFor).length === 0) {
+            if (this.getPixelsInOrder(profile, channel.repeatFor).length === 0) {
                 return true;
             }
         }
@@ -1601,14 +1821,14 @@ class FixtureService {
                 cachedFixture.channels = this.getCachedChannels(cachedFixture.profile, cachedFixture.mode, null);
                 this.cachedFixtures.push(cachedFixture);
             }
-            const pixelKeys = this.fixtureGetUniquePixelKeys(fixture);
-            for (let pixelKey of pixelKeys) {
+            const pixels = this.fixtureGetUniquePixels(fixture);
+            for (let pixel of pixels) {
                 const cachedFixture = new CachedFixture();
                 cachedFixture.fixture = fixture;
-                cachedFixture.pixelKey = pixelKey;
+                cachedFixture.pixel = pixel;
                 cachedFixture.profile = this.getProfileByUuid(fixture.profileUuid);
                 cachedFixture.mode = this.getModeByFixture(cachedFixture.profile, fixture);
-                cachedFixture.channels = this.getCachedChannels(cachedFixture.profile, cachedFixture.mode, pixelKey);
+                cachedFixture.channels = this.getCachedChannels(cachedFixture.profile, cachedFixture.mode, pixel.key);
                 this.cachedFixtures.push(cachedFixture);
             }
         }
@@ -1721,7 +1941,7 @@ class FixtureService {
             });
         }
     }
-    static { this.ɵfac = function FixtureService_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || FixtureService)(i0.ɵɵinject(i1.HttpClient), i0.ɵɵinject(ProjectService), i0.ɵɵinject(i4.TranslateService), i0.ɵɵinject(i3$1.ToastrService), i0.ɵɵinject(UuidService)); }; }
+    static { this.ɵfac = function FixtureService_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || FixtureService)(i0.ɵɵinject(i1.HttpClient), i0.ɵɵinject(ProjectService), i0.ɵɵinject(i4.TranslateService), i0.ɵɵinject(i3$1.ToastrService), i0.ɵɵinject(UuidService), i0.ɵɵinject(FixturePixelGroupResolveService)); }; }
     static { this.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: FixtureService, factory: FixtureService.ɵfac, providedIn: 'root' }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FixtureService, [{
@@ -1729,7 +1949,7 @@ class FixtureService {
         args: [{
                 providedIn: 'root',
             }]
-    }], () => [{ type: i1.HttpClient }, { type: ProjectService }, { type: i4.TranslateService }, { type: i3$1.ToastrService }, { type: UuidService }], null); })();
+    }], () => [{ type: i1.HttpClient }, { type: ProjectService }, { type: i4.TranslateService }, { type: i3$1.ToastrService }, { type: UuidService }, { type: FixturePixelGroupResolveService }], null); })();
 
 class PreviewMeshService {
     constructor() {
@@ -1831,7 +2051,11 @@ class ConfigService {
     }], () => [], null); })();
 
 class EffectService {
-    constructor() { }
+    constructor() {
+        // The effects are currently being edited
+        this.effectsOpen = false;
+        this.effectsOpenChanged = new Subject();
+    }
     static { this.ɵfac = function EffectService_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || EffectService)(); }; }
     static { this.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: EffectService, factory: EffectService.ɵfac, providedIn: 'root' }); }
 }
@@ -1937,12 +2161,12 @@ class PresetService {
                     this.selectedPreset.fixtures.push(presetFixture);
                 }
             }
-            const pixelKeys = this.fixtureService.fixtureGetUniquePixelKeys(fixture);
-            for (const pixelKey of pixelKeys) {
-                if (!this.fixtureIsSelected(fixture, pixelKey)) {
+            const pixels = this.fixtureService.fixtureGetUniquePixels(fixture);
+            for (const pixel of pixels) {
+                if (!this.fixtureIsSelected(fixture, pixel.key)) {
                     const presetFixture = new PresetFixture();
                     presetFixture.fixtureUuid = fixture.uuid;
-                    presetFixture.pixelKey = pixelKey;
+                    presetFixture.pixelKey = pixel.key;
                     this.selectedPreset.fixtures.push(presetFixture);
                 }
             }
@@ -1954,13 +2178,24 @@ class PresetService {
         }
         this.selectedPreset.fixtures = [];
     }
+    presetFixtueEquals(fixture1, fixture2) {
+        return (fixture1.fixtureUuid === fixture2.fixtureUuid &&
+            ((!fixture2.pixelKey && !fixture1.pixelKey) || fixture2.pixelKey === fixture1.pixelKey));
+    }
     removeDeletedFixtures() {
         // after changing the configuration in the fixture pool, we might need to
         // delete some fixtures
         for (const preset of this.projectService.project.presets) {
             for (let i = preset.fixtures.length - 1; i >= 0; i--) {
-                const presetFixture = this.fixtureService.getFixtureByUuid(preset.fixtures[i].fixtureUuid);
-                if (!presetFixture) {
+                const presetFixture = preset.fixtures[i];
+                let found = false;
+                for (let projectFixture of this.projectService.project.presetFixtures) {
+                    if (this.presetFixtueEquals(presetFixture, projectFixture)) {
+                        found = true;
+                        break;
+                    }
+                }
+                if (!found) {
                     preset.fixtures.splice(i, 1);
                 }
             }
@@ -2191,11 +2426,10 @@ class PresetService {
             // loop over the project fixtures to keep the order
             for (let projectFixture of this.projectService.project.presetFixtures) {
                 for (const presetFixture of this.selectedPreset.fixtures) {
-                    if (projectFixture.fixtureUuid === presetFixture.fixtureUuid &&
-                        ((!projectFixture.pixelKey && !presetFixture.pixelKey) || projectFixture.pixelKey === presetFixture.pixelKey)) {
+                    if (this.presetFixtueEquals(presetFixture, projectFixture)) {
                         const fixture = this.fixtureService.getCachedFixtureByUuid(presetFixture.fixtureUuid, presetFixture.pixelKey);
                         if (fixture.profile.uuid === profile.uuid) {
-                            const exists = modeAndPixelKeys.some((item) => (item.mode === fixture.mode && !item.pixelKey && !fixture.pixelKey) || item.pixelKey === fixture.pixelKey);
+                            const exists = modeAndPixelKeys.some((item) => (item.mode === fixture.mode && !item.pixelKey && !fixture.pixel?.key) || item.pixelKey === fixture.pixel?.key);
                             if (!exists) {
                                 modeAndPixelKeys.push({
                                     mode: fixture.mode,
@@ -2423,12 +2657,13 @@ class SceneService {
     }], () => [{ type: UuidService }, { type: EffectService }, { type: PresetService }, { type: ProjectService }], null); })();
 
 class TimelineService {
-    constructor(sceneService, presetService, projectService, http, configService) {
+    constructor(sceneService, presetService, projectService, http, configService, ngZone) {
         this.sceneService = sceneService;
         this.presetService = presetService;
         this.projectService = projectService;
         this.http = http;
         this.configService = configService;
+        this.ngZone = ngZone;
         this.playState = 'paused';
         this.zoom = 0;
         this.timelineClicking = false;
@@ -2519,9 +2754,12 @@ class TimelineService {
     }
     startTimeUpdater() {
         this.stopTimeUpdater();
-        const timeUpdater = timer(0, 40);
-        this.timeUpdateSubscription = timeUpdater.subscribe(() => {
-            this.updateCurrentTime();
+        // Avoid triggering change detection with each animation frame -> run outside zone
+        this.ngZone.runOutsideAngular(() => {
+            const timeUpdater = timer(0, 40);
+            this.timeUpdateSubscription = timeUpdater.subscribe(() => {
+                this.updateCurrentTime();
+            });
         });
     }
     stopTimeUpdater() {
@@ -3116,7 +3354,7 @@ class TimelineService {
         this.waveSurferReady.next();
         this.applyZoom(0);
     }
-    static { this.ɵfac = function TimelineService_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TimelineService)(i0.ɵɵinject(SceneService), i0.ɵɵinject(PresetService), i0.ɵɵinject(ProjectService), i0.ɵɵinject(i1.HttpClient), i0.ɵɵinject(ConfigService)); }; }
+    static { this.ɵfac = function TimelineService_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TimelineService)(i0.ɵɵinject(SceneService), i0.ɵɵinject(PresetService), i0.ɵɵinject(ProjectService), i0.ɵɵinject(i1.HttpClient), i0.ɵɵinject(ConfigService), i0.ɵɵinject(i0.NgZone)); }; }
     static { this.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: TimelineService, factory: TimelineService.ɵfac, providedIn: 'root' }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TimelineService, [{
@@ -3124,7 +3362,7 @@ class TimelineService {
         args: [{
                 providedIn: 'root',
             }]
-    }], () => [{ type: SceneService }, { type: PresetService }, { type: ProjectService }, { type: i1.HttpClient }, { type: ConfigService }], null); })();
+    }], () => [{ type: SceneService }, { type: PresetService }, { type: ProjectService }, { type: i1.HttpClient }, { type: ConfigService }, { type: i0.NgZone }], null); })();
 
 class PreviewService {
     constructor(presetService, fixtureService, sceneService, timelineService, projectService) {
@@ -3134,6 +3372,8 @@ class PreviewService {
         this.timelineService = timelineService;
         this.projectService = projectService;
         this.doUpdateFixtureSetup = new Subject();
+        this.doUpdateStageAndPositions = new Subject();
+        this.stageAndPositionsDirty = true;
         this.stageMeshes = [];
         this.stageMaterial = new THREE.MeshStandardMaterial({
             color: 0x0d0d0d,
@@ -3145,8 +3385,12 @@ class PreviewService {
             emissive: 0x0d0d0d,
         });
         this.fixtureSelectedMaterial = new THREE.MeshLambertMaterial({
-            color: 0xff00ff,
-            emissive: 0xff00ff,
+            color: 0x660066,
+            emissive: 0xaa00aa,
+            emissiveIntensity: 0.000000000000000000001,
+        });
+        this.updateStageAndPositionsSubscription = this.doUpdateStageAndPositions.subscribe(() => {
+            this.stageAndPositionsDirty = true;
         });
     }
     getAlreadyCalculatedFixture(fixtures, fixtureIndex) {
@@ -3155,7 +3399,9 @@ class PreviewService {
         for (let i = 0; i < fixtureIndex; i++) {
             const calculatedFixture = fixtures[i];
             if (calculatedFixture.fixture.dmxUniverseUuid === fixtures[fixtureIndex].fixture.dmxUniverseUuid &&
-                calculatedFixture.fixture.dmxFirstChannel === fixtures[fixtureIndex].fixture.dmxFirstChannel) {
+                calculatedFixture.fixture.dmxFirstChannel === fixtures[fixtureIndex].fixture.dmxFirstChannel &&
+                ((!calculatedFixture.pixel?.key && !fixtures[fixtureIndex].pixel?.key) ||
+                    calculatedFixture.pixel?.key === fixtures[fixtureIndex].pixel?.key)) {
                 return calculatedFixture;
             }
         }
@@ -3479,7 +3725,7 @@ class PreviewService {
                 }
                 for (const preset of presets) {
                     // search for this fixture in the preset and get it's preset-specific index (for chasing effects)
-                    const fixtureIndex = this.getFixtureIndex(preset.preset, cachedFixture.fixture.uuid, cachedFixture.pixelKey);
+                    const fixtureIndex = this.getFixtureIndex(preset.preset, cachedFixture.fixture.uuid, cachedFixture.pixel?.key);
                     if (fixtureIndex >= 0) {
                         // this fixture is also in the preset -> mix the required values (overwrite existing values,
                         // if set multiple times)
@@ -3590,7 +3836,7 @@ class PreviewService {
     }], () => [{ type: PresetService }, { type: FixtureService }, { type: SceneService }, { type: TimelineService }, { type: ProjectService }], null); })();
 
 class Fixture3d {
-    constructor(fixtureService, previewService, fixture, scene, hasSpotLight = false) {
+    constructor(fixtureService, previewService, fixture, scene, fixtureGroup, hasSpotLight = false, hasBulb = false) {
         this.fixtureService = fixtureService;
         this.previewService = previewService;
         this.pointLightMaxIntensity = 2;
@@ -3601,10 +3847,17 @@ class Fixture3d {
         this.dimmer = 0;
         this.isSelected = false;
         this.isLoaded = false;
+        // spotlight
         this.hasSpotLight = false;
+        // glowing bulb
+        this.hasBulb = false;
+        this.bulbSphereRadius = 3;
+        this.blackColor = new THREE.Color(0x000000);
         this.fixture = fixture;
         this.scene = scene;
+        this.fixtureGroup = fixtureGroup;
         this.hasSpotLight = hasSpotLight;
+        this.hasBulb = hasBulb;
         // evaluate, various capabilities of this fixture
         for (const cachedChannel of this.fixture.channels) {
             if (cachedChannel.channel) {
@@ -3706,6 +3959,15 @@ class Fixture3d {
             spotLightTarget.position.set(0, -10, 0);
             this.createSpotLightBeam();
         }
+        if (this.hasBulb) {
+            const bulbGeo = new THREE.SphereGeometry(this.bulbSphereRadius * 1.12, 64, 64);
+            this.bulbMaterial = new THREE.MeshLambertMaterial({
+                color: 0xff00ff,
+                emissive: 0xff00ff,
+            });
+            this.bulbSphere = new THREE.Mesh(bulbGeo, this.bulbMaterial);
+            this.fixtureGroup.add(this.bulbSphere);
+        }
     }
     getCapabilityInValue(channel, value) {
         for (const capability of channel.capabilities) {
@@ -3716,6 +3978,44 @@ class Fixture3d {
         }
         return undefined;
     }
+    updatePosition(object) {
+        // the offset position (e.g. for single beams inside a fixture)
+        if (object) {
+            object.position.set(this.fixture.pixel ? this.fixture.pixel.positionX : 0, this.fixture.pixel ? this.fixture.pixel.positionY : 0, this.fixture.pixel ? this.fixture.pixel.positionZ : 0);
+        }
+        if (this.hasBulb) {
+            this.bulbSphere.position.set(this.fixture.pixel ? this.fixture.pixel.positionX : 0, (this.fixture.pixel ? this.fixture.pixel.positionY : 0) - 15 + this.bulbSphereRadius / 2, this.fixture.pixel ? this.fixture.pixel.positionZ : 0);
+        }
+        switch (this.fixture.fixture.positioning) {
+            case Positioning.topFront: {
+                this.fixtureGroup.rotation.x = THREE.MathUtils.degToRad(0);
+                this.fixtureGroup.position.set(this.fixture.fixture.positionX, this.fixture.fixture.positionY - 13, this.fixture.fixture.positionZ);
+                break;
+            }
+            case Positioning.bottomFront: {
+                this.fixtureGroup.rotation.x = THREE.MathUtils.degToRad(180);
+                this.fixtureGroup.position.set(this.fixture.fixture.positionX, this.fixture.fixture.positionY + 13, this.fixture.fixture.positionZ);
+                break;
+            }
+            case Positioning.topBack: {
+                this.fixtureGroup.rotation.x = THREE.MathUtils.degToRad(0);
+                this.fixtureGroup.position.set(this.fixture.fixture.positionX, this.fixture.fixture.positionY - 13, this.fixture.fixture.positionZ);
+                break;
+            }
+            case Positioning.bottomBack: {
+                this.fixtureGroup.rotation.x = THREE.MathUtils.degToRad(180);
+                this.fixtureGroup.position.set(this.fixture.fixture.positionX, this.fixture.fixture.positionY + 13, this.fixture.fixture.positionZ);
+                break;
+            }
+            case Positioning.manual: {
+                this.fixtureGroup.position.set(this.fixture.fixture.positionX, this.fixture.fixture.positionY, this.fixture.fixture.positionZ);
+                this.fixtureGroup.rotation.x = THREE.MathUtils.degToRad(this.fixture.fixture.rotationX);
+                this.fixtureGroup.rotation.y = THREE.MathUtils.degToRad(this.fixture.fixture.rotationY);
+                this.fixtureGroup.rotation.z = THREE.MathUtils.degToRad(this.fixture.fixture.rotationZ);
+                break;
+            }
+        }
+    }
     // Apply the properties of the base fixture to the preview
     updatePreview(channelValues, masterDimmerValue) {
         // Apply default settings
@@ -3793,37 +4093,11 @@ class Fixture3d {
             this.spotLight.intensity = this.spotLightLightMaxIntensity * this.dimmer;
             this.spotLightBeam.material.uniforms.spotPosition.value = this.spotlightGroup.position;
         }
-    }
-    updatePosition(object) {
-        // Update the position
-        switch (this.fixture.fixture.positioning) {
-            case Positioning.topFront: {
-                object.rotation.x = THREE.MathUtils.degToRad(0);
-                object.position.set(this.fixture.fixture.positionX, this.fixture.fixture.positionY - 13, this.fixture.fixture.positionZ);
-                break;
-            }
-            case Positioning.bottomFront: {
-                object.rotation.x = THREE.MathUtils.degToRad(180);
-                object.position.set(this.fixture.fixture.positionX, this.fixture.fixture.positionY + 13, this.fixture.fixture.positionZ);
-                break;
-            }
-            case Positioning.topBack: {
-                object.rotation.x = THREE.MathUtils.degToRad(0);
-                object.position.set(this.fixture.fixture.positionX, this.fixture.fixture.positionY - 13, this.fixture.fixture.positionZ);
-                break;
-            }
-            case Positioning.bottomBack: {
-                object.rotation.x = THREE.MathUtils.degToRad(180);
-                object.position.set(this.fixture.fixture.positionX, this.fixture.fixture.positionY + 13, this.fixture.fixture.positionZ);
-                break;
-            }
-            case Positioning.manual: {
-                object.position.set(this.fixture.fixture.positionX, this.fixture.fixture.positionY, this.fixture.fixture.positionZ);
-                object.rotation.x = THREE.MathUtils.degToRad(this.fixture.fixture.rotationX);
-                object.rotation.y = THREE.MathUtils.degToRad(this.fixture.fixture.rotationY);
-                object.rotation.z = THREE.MathUtils.degToRad(this.fixture.fixture.rotationZ);
-                break;
-            }
+        if (this.hasBulb) {
+            // Normalize 0–255 → 0–1
+            const intensity = Math.max(this.colorRed, this.colorGreen, this.colorBlue) / 255;
+            this.bulbMaterial.color.copy(color.clone().lerp(this.blackColor, intensity));
+            this.bulbMaterial.emissive.copy(color.clone().lerp(this.blackColor, intensity));
         }
     }
     createSpotLightBeam() {
@@ -3843,12 +4117,15 @@ class Fixture3d {
         if (this.hasSpotLight) {
             this.spotlightMaterial.dispose();
         }
+        if (this.hasBulb) {
+            this.bulbMaterial.dispose();
+        }
     }
 }
 
 class ColorChanger3d extends Fixture3d {
-    constructor(fixtureService, previewService, previewMeshService, fixture, scene) {
-        super(fixtureService, previewService, fixture, scene, true);
+    constructor(fixtureService, previewService, previewMeshService, fixture, scene, fixtureGroup, hasSpotLight = true, hasBulb = false) {
+        super(fixtureService, previewService, fixture, scene, fixtureGroup, hasSpotLight, hasBulb);
         this.fixtureService = fixtureService;
         this.previewService = previewService;
         this.objectGroup = new THREE.Object3D();
@@ -3862,18 +4139,26 @@ class ColorChanger3d extends Fixture3d {
     createObjects() {
         super.createObjects();
         this.mesh.material = this.previewService.fixtureMaterial;
-        this.objectGroup.add(this.spotlightGroup);
+        if (this.hasSpotLight) {
+            this.objectGroup.add(this.spotlightGroup);
+        }
         this.objectGroup.add(this.mesh);
         this.objectGroup.scale.multiplyScalar(9);
-        this.scene.add(this.objectGroup);
+        this.fixtureGroup.add(this.objectGroup);
         this.isLoaded = true;
+        this.updatePosition();
+    }
+    updatePosition() {
+        if (!this.isLoaded) {
+            return;
+        }
+        super.updatePosition(this.objectGroup);
     }
     updatePreview(channelValues, masterDimmerValue) {
         if (!this.isLoaded) {
             return;
         }
         super.updatePreview(channelValues, masterDimmerValue);
-        this.updatePosition(this.objectGroup);
         // Update the material
         if (this.lastSelected !== this.isSelected) {
             if (this.isSelected) {
@@ -3895,8 +4180,8 @@ class ColorChanger3d extends Fixture3d {
 }
 
 class MovingHead3d extends Fixture3d {
-    constructor(fixtureService, previewService, previewMeshService, fixture, scene) {
-        super(fixtureService, previewService, fixture, scene, true);
+    constructor(fixtureService, previewService, previewMeshService, fixture, scene, fixtureGroup) {
+        super(fixtureService, previewService, fixture, scene, fixtureGroup, true, true);
         this.fixtureService = fixtureService;
         this.previewService = previewService;
         this.headGroup = new THREE.Object3D();
@@ -3937,15 +4222,21 @@ class MovingHead3d extends Fixture3d {
         this.socket.position.set(0, 1.2, 0);
         // A moving head has about 32 cm in width
         this.objectGroup.scale.multiplyScalar(9);
-        this.scene.add(this.objectGroup);
+        this.fixtureGroup.add(this.objectGroup);
         this.isLoaded = true;
+        this.updatePosition();
+    }
+    updatePosition() {
+        if (!this.isLoaded) {
+            return;
+        }
+        super.updatePosition(this.objectGroup);
     }
     updatePreview(channelValues, masterDimmerValue) {
         if (!this.isLoaded) {
             return;
         }
         super.updatePreview(channelValues, masterDimmerValue);
-        this.updatePosition(this.objectGroup);
         // Apply default settings
         let panStart = 0;
         let panEnd = 255;
@@ -4004,17 +4295,20 @@ class MovingHead3d extends Fixture3d {
     }
 }
 
-const _c0$6 = ["canvas"];
+const _c0$7 = ["canvas"];
 class PreviewComponent {
-    constructor(fixtureService, previewMeshService, animationService, previewService, timelineService, projectService) {
+    constructor(fixtureService, previewMeshService, animationService, previewService, timelineService, projectService, ngZone) {
         this.fixtureService = fixtureService;
         this.previewMeshService = previewMeshService;
         this.animationService = animationService;
         this.previewService = previewService;
         this.timelineService = timelineService;
         this.projectService = projectService;
+        this.ngZone = ngZone;
         this.scene = new THREE.Scene();
         this.fixtures3d = [];
+        // grouping fixture (pixels) into the same fixture to being able to properly rotate around the center
+        this.fixtureGroups = new Map();
         this.previewService.doUpdateFixtureSetup.subscribe(() => {
             this.syncFixtures();
         });
@@ -4030,18 +4324,40 @@ class PreviewComponent {
             fixture3d.destroy();
         }
         this.fixtures3d = [];
+        // destroy all groups
+        this.fixtureGroups.clear();
         // add all fixtures from the project
+        const fixture3dMap = {
+            [FixtureCategory['Moving Head']]: MovingHead3d,
+            [FixtureCategory['Color Changer']]: ColorChanger3d,
+            [FixtureCategory['Blinder']]: ColorChanger3d,
+        };
+        // TODO group fixtures of the same UUID but with differen pixels into the same fixture to ensure
+        // rotation is aligned
         for (const fixture of this.fixtureService.cachedFixtures) {
-            switch (fixture.profile.categories[0]) {
-                case FixtureCategory['Moving Head']:
-                    this.fixtures3d.push(new MovingHead3d(this.fixtureService, this.previewService, this.previewMeshService, fixture, this.scene));
-                    break;
-                case FixtureCategory['Color Changer']:
-                    this.fixtures3d.push(new ColorChanger3d(this.fixtureService, this.previewService, this.previewMeshService, fixture, this.scene));
-                    break;
-                case FixtureCategory['Blinder']:
-                    this.fixtures3d.push(new ColorChanger3d(this.fixtureService, this.previewService, this.previewMeshService, fixture, this.scene));
-                    break;
+            const category = fixture.profile.categories.find((c) => fixture3dMap[c]);
+            const uuid = fixture.fixture.uuid;
+            let fixtureGroup = this.fixtureGroups.get(uuid);
+            if (!fixtureGroup) {
+                fixtureGroup = new THREE.Group();
+                fixtureGroup.name = `fixture-${uuid}`;
+                this.scene.add(fixtureGroup);
+                this.fixtureGroups.set(uuid, fixtureGroup);
+            }
+            if (category) {
+                const Fixture3dClass = fixture3dMap[category];
+                if (Fixture3dClass === ColorChanger3d) {
+                    const isPixelBar = fixture.profile.categories?.[0] === FixtureCategory['Pixel Bar'];
+                    const fixture3d = new ColorChanger3d(this.fixtureService, this.previewService, this.previewMeshService, fixture, this.scene, fixtureGroup, !isPixelBar, isPixelBar);
+                    this.fixtures3d.push(fixture3d);
+                }
+                else {
+                    const fixture3d = new Fixture3dClass(this.fixtureService, this.previewService, this.previewMeshService, fixture, this.scene, fixtureGroup);
+                    this.fixtures3d.push(fixture3d);
+                }
+            }
+            else {
+                console.warn(`No supported category found for fixture`);
             }
         }
     }
@@ -4052,22 +4368,28 @@ class PreviewComponent {
         this.renderer.render(this.scene, this.camera);
     }
     updateStagePosition(positioning, xMin, xMax, yMin, yMax, zMin, zMax) {
-        let positionCount = 0; // Number of fixtures in the same position
-        let positionIndex = 1;
+        let positionCount = 0; // number of fixtures in the same position (only counting one pixel)
+        let positionIndex = 0;
+        let lastFixtureUuid = undefined; // skip new positioning if it's just a new pixel inside the same fixture
         this.projectService.project.presetFixtures.forEach((element, index) => {
             const fixture = this.fixtureService.getFixtureByUuid(element.fixtureUuid);
-            if (fixture.positioning === positioning) {
+            if (fixture.positioning === positioning && element.fixtureUuid != lastFixtureUuid) {
                 positionCount++;
             }
+            lastFixtureUuid = element.fixtureUuid;
         });
+        lastFixtureUuid = undefined;
         this.projectService.project.presetFixtures.forEach((element, index) => {
             const fixture = this.fixtureService.getFixtureByUuid(element.fixtureUuid);
             if (fixture.positioning === positioning) {
+                if (element.fixtureUuid != lastFixtureUuid) {
+                    positionIndex++;
+                }
                 fixture.positionX = xMin + ((xMax - xMin) / (positionCount + 1)) * positionIndex;
                 fixture.positionY = yMin + ((yMax - yMin) / (positionCount + 1)) * positionIndex;
                 fixture.positionZ = zMin + ((zMax - zMin) / (positionCount + 1)) * positionIndex;
-                positionIndex++;
             }
+            lastFixtureUuid = element.fixtureUuid;
         });
     }
     animate(timeMillis) {
@@ -4090,6 +4412,10 @@ class PreviewComponent {
         const presets = this.previewService.getPresets(timeMillis);
         const calculatedFixtures = this.previewService.getChannelValues(timeMillis, presets);
         for (const fixture3d of this.fixtures3d) {
+            // Update the fixture positions
+            if (this.previewService.stageAndPositionsDirty) {
+                fixture3d.updatePosition();
+            }
             // Update the fixture properties
             fixture3d.updatePreview(calculatedFixtures.get(fixture3d.fixture) || [], this.projectService.project.masterDimmerValue);
             // Select the fixture, if required
@@ -4097,11 +4423,12 @@ class PreviewComponent {
                 fixture3d.isSelected = this.fixtureService.settingsFixtureIsSelected(fixture3d.fixture.fixture);
             }
             else {
-                fixture3d.isSelected = this.previewService.fixtureIsSelected(fixture3d.fixture.fixture.uuid, fixture3d.fixture.pixelKey, presets);
+                fixture3d.isSelected = this.previewService.fixtureIsSelected(fixture3d.fixture.fixture.uuid, fixture3d.fixture.pixel?.key, presets);
             }
         }
         // Render the scene
         this.render();
+        this.previewService.stageAndPositionsDirty = false;
         requestAnimationFrame(this.animate.bind(this));
     }
     getAspectRatio() {
@@ -4174,11 +4501,14 @@ class PreviewComponent {
         this.setupControls();
         this.setupScene();
         this.onResize();
-        this.animate(null);
+        // Avoid triggering change detection with each animation frame -> run outside zone
+        this.ngZone.runOutsideAngular(() => {
+            this.animate(null);
+        });
     }
-    static { this.ɵfac = function PreviewComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PreviewComponent)(i0.ɵɵdirectiveInject(FixtureService), i0.ɵɵdirectiveInject(PreviewMeshService), i0.ɵɵdirectiveInject(AnimationService), i0.ɵɵdirectiveInject(PreviewService), i0.ɵɵdirectiveInject(TimelineService), i0.ɵɵdirectiveInject(ProjectService)); }; }
+    static { this.ɵfac = function PreviewComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PreviewComponent)(i0.ɵɵdirectiveInject(FixtureService), i0.ɵɵdirectiveInject(PreviewMeshService), i0.ɵɵdirectiveInject(AnimationService), i0.ɵɵdirectiveInject(PreviewService), i0.ɵɵdirectiveInject(TimelineService), i0.ɵɵdirectiveInject(ProjectService), i0.ɵɵdirectiveInject(i0.NgZone)); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PreviewComponent, selectors: [["lib-app-preview"]], viewQuery: function PreviewComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$6, 5);
+            i0.ɵɵviewQuery(_c0$7, 5);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.canvasRef = _t.first);
@@ -4191,7 +4521,7 @@ class PreviewComponent {
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PreviewComponent, [{
         type: Component,
         args: [{ selector: 'lib-app-preview', standalone: false, template: "<div class=\"h-100\" #canvas style=\"overflow: hidden\"></div>\n" }]
-    }], () => [{ type: FixtureService }, { type: PreviewMeshService }, { type: AnimationService }, { type: PreviewService }, { type: TimelineService }, { type: ProjectService }], { canvasRef: [{
+    }], () => [{ type: FixtureService }, { type: PreviewMeshService }, { type: AnimationService }, { type: PreviewService }, { type: TimelineService }, { type: ProjectService }, { type: i0.NgZone }], { canvasRef: [{
             type: ViewChild,
             args: ['canvas']
         }], onResize: [{
@@ -4336,11 +4666,11 @@ class ProjectLoadService {
                 projectFixture.fixtureUuid = fixture.uuid;
                 this.projectService.project.presetFixtures.push(projectFixture);
             }
-            const pixelKeys = this.fixtureService.fixtureGetUniquePixelKeys(fixture);
-            for (let pixelKey of pixelKeys) {
+            const pixels = this.fixtureService.fixtureGetUniquePixels(fixture);
+            for (let pixelKey of pixels) {
                 const projectFixture = new PresetFixture();
                 projectFixture.fixtureUuid = fixture.uuid;
-                projectFixture.pixelKey = pixelKey;
+                projectFixture.pixelKey = pixelKey.key;
                 this.projectService.project.presetFixtures.push(projectFixture);
             }
         }
@@ -4352,11 +4682,11 @@ class ProjectLoadService {
                     presetFixture.fixtureUuid = fixtureUuid;
                     preset.fixtures.push(presetFixture);
                 }
-                const pixelKeys = this.fixtureService.fixtureGetUniquePixelKeys(fixture);
-                for (let pixelKey of pixelKeys) {
+                const pixels = this.fixtureService.fixtureGetUniquePixels(fixture);
+                for (let pixel of pixels) {
                     const presetFixture = new PresetFixture();
                     presetFixture.fixtureUuid = fixtureUuid;
-                    presetFixture.pixelKey = pixelKey;
+                    presetFixture.pixelKey = pixel.key;
                     preset.fixtures.push(presetFixture);
                 }
             }
@@ -5252,49 +5582,46 @@ function FixturePoolComponent_For_49_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 52);
     i0.ɵɵlistener("click", function FixturePoolComponent_For_49_Template_div_click_0_listener() { const fixture_r6 = i0.ɵɵrestoreView(_r5).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.selectFixture(fixture_r6)); });
-    i0.ɵɵelementStart(1, "div", 5)(2, "div", 53);
-    i0.ɵɵelement(3, "i", 54);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 55)(5, "p", 46);
-    i0.ɵɵelement(6, "span");
-    i0.ɵɵtext(7);
+    i0.ɵɵelementStart(1, "div", 5)(2, "div", 53)(3, "p", 46);
+    i0.ɵɵelement(4, "span");
+    i0.ɵɵtext(5);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(8, "div", 56)(9, "a", 48);
-    i0.ɵɵlistener("click", function FixturePoolComponent_For_49_Template_a_click_9_listener() { const fixture_r6 = i0.ɵɵrestoreView(_r5).$implicit; const ctx_r2 = i0.ɵɵnextContext(); ctx_r2.removeFixture(fixture_r6); return i0.ɵɵresetView(false); });
-    i0.ɵɵelement(10, "i", 57);
+    i0.ɵɵelementStart(6, "div", 54)(7, "a", 48);
+    i0.ɵɵlistener("click", function FixturePoolComponent_For_49_Template_a_click_7_listener() { const fixture_r6 = i0.ɵɵrestoreView(_r5).$implicit; const ctx_r2 = i0.ɵɵnextContext(); ctx_r2.removeFixture(fixture_r6); return i0.ɵɵresetView(false); });
+    i0.ɵɵelement(8, "i", 55);
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
     const fixture_r6 = ctx.$implicit;
     const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵclassProp("active", fixture_r6 == ctx_r2.selectedFixture);
-    i0.ɵɵadvance(6);
+    i0.ɵɵadvance(4);
     i0.ɵɵclassMap(i0.ɵɵinterpolate1("icon-", ctx_r2.fixtureService.getFixtureIconClass(ctx_r2.fixtureService.getProfileByUuid(fixture_r6.profileUuid)), " mr-1"));
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1("", fixture_r6.name, " ");
 } }
 function FixturePoolComponent_For_67_Template(rf, ctx) { if (rf & 1) {
     const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 58);
+    i0.ɵɵelementStart(0, "div", 56);
     i0.ɵɵlistener("mousedown", function FixturePoolComponent_For_67_Template_div_mousedown_0_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.channelMouseDown($event)); })("mouseover", function FixturePoolComponent_For_67_Template_div_mouseover_0_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.channelMouseOver($event)); });
-    i0.ɵɵelementStart(1, "div", 59)(2, "div", 60)(3, "small");
+    i0.ɵɵelementStart(1, "div", 57)(2, "div", 58)(3, "small");
     i0.ɵɵtext(4, "\u00A0");
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
-    const ɵ$index_161_r8 = ctx.$index;
+    const ɵ$index_157_r8 = ctx.$index;
     const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵclassProp("dmx-channel-occupied", ctx_r2.channelOccupied(ɵ$index_161_r8))("dmx-channel-occupied-start", ctx_r2.channelOccupiedStart(ɵ$index_161_r8))("dmx-channel-occupied-end", ctx_r2.channelOccupiedEnd(ɵ$index_161_r8))("dmx-channel-selected", ctx_r2.channelSelected(ɵ$index_161_r8))("dmx-channel-overlapped", ctx_r2.channelOverlapped(ɵ$index_161_r8));
-    i0.ɵɵproperty("popover", i0.ɵɵinterpolate(ɵ$index_161_r8 + 1));
-    i0.ɵɵattribute("data-index", ɵ$index_161_r8);
+    i0.ɵɵclassProp("dmx-channel-occupied", ctx_r2.channelOccupied(ɵ$index_157_r8))("dmx-channel-occupied-start", ctx_r2.channelOccupiedStart(ɵ$index_157_r8))("dmx-channel-occupied-end", ctx_r2.channelOccupiedEnd(ɵ$index_157_r8))("dmx-channel-selected", ctx_r2.channelSelected(ɵ$index_157_r8))("dmx-channel-overlapped", ctx_r2.channelOverlapped(ɵ$index_157_r8));
+    i0.ɵɵproperty("popover", i0.ɵɵinterpolate(ɵ$index_157_r8 + 1));
+    i0.ɵɵattribute("data-index", ɵ$index_157_r8);
     i0.ɵɵadvance();
     i0.ɵɵclassProp("dmx-channel-text-visible", ctx_r2.showChannelNumbers);
-    i0.ɵɵattribute("data-index", ɵ$index_161_r8);
+    i0.ɵɵattribute("data-index", ɵ$index_157_r8);
     i0.ɵɵadvance();
-    i0.ɵɵattribute("data-index", ɵ$index_161_r8);
+    i0.ɵɵattribute("data-index", ɵ$index_157_r8);
     i0.ɵɵadvance();
-    i0.ɵɵattribute("data-index", ɵ$index_161_r8);
+    i0.ɵɵattribute("data-index", ɵ$index_157_r8);
 } }
 function FixturePoolComponent_Conditional_69_For_14_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "option", 66);
+    i0.ɵɵelementStart(0, "option", 64);
     i0.ɵɵtext(1);
     i0.ɵɵpipe(2, "translate");
     i0.ɵɵelementEnd();
@@ -5306,43 +5633,43 @@ function FixturePoolComponent_Conditional_69_For_14_Template(rf, ctx) { if (rf &
     i0.ɵɵtextInterpolate3(" ", mode_r10.name, " - ", ctx_r2.fixtureService.getModeChannelCount(ctx_r2.selectedFixtureProfile, mode_r10), " ", i0.ɵɵpipeBind1(2, 4, "designer.fixture-pool.channels"), " ");
 } }
 function FixturePoolComponent_Conditional_69_For_22_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "option", 66);
+    i0.ɵɵelementStart(0, "option", 64);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ɵ$index_211_r11 = ctx.$index;
-    i0.ɵɵproperty("ngValue", ɵ$index_211_r11);
+    const ɵ$index_207_r11 = ctx.$index;
+    i0.ɵɵproperty("ngValue", ɵ$index_207_r11);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ɵ$index_211_r11 + 1, " ");
+    i0.ɵɵtextInterpolate1(" ", ɵ$index_207_r11 + 1, " ");
 } }
 function FixturePoolComponent_Conditional_69_Template(rf, ctx) { if (rf & 1) {
     const _r9 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div")(1, "div", 20)(2, "label", 61);
+    i0.ɵɵelementStart(0, "div")(1, "div", 20)(2, "label", 59);
     i0.ɵɵtext(3);
     i0.ɵɵpipe(4, "translate");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "div", 62)(6, "input", 63);
+    i0.ɵɵelementStart(5, "div", 60)(6, "input", 61);
     i0.ɵɵtwoWayListener("ngModelChange", function FixturePoolComponent_Conditional_69_Template_input_ngModelChange_6_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r2 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r2.selectedFixture.name, $event) || (ctx_r2.selectedFixture.name = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(7, "div", 20)(8, "label", 64);
+    i0.ɵɵelementStart(7, "div", 20)(8, "label", 62);
     i0.ɵɵtext(9);
     i0.ɵɵpipe(10, "translate");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(11, "div", 62)(12, "select", 65);
+    i0.ɵɵelementStart(11, "div", 60)(12, "select", 63);
     i0.ɵɵlistener("ngModelChange", function FixturePoolComponent_Conditional_69_Template_select_ngModelChange_12_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.selectedFixture.modeShortName = $event); });
-    i0.ɵɵrepeaterCreate(13, FixturePoolComponent_Conditional_69_For_14_Template, 3, 6, "option", 66, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵrepeaterCreate(13, FixturePoolComponent_Conditional_69_For_14_Template, 3, 6, "option", 64, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(15, "div", 20)(16, "label", 64);
+    i0.ɵɵelementStart(15, "div", 20)(16, "label", 62);
     i0.ɵɵtext(17);
     i0.ɵɵpipe(18, "translate");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(19, "div", 62)(20, "select", 65);
+    i0.ɵɵelementStart(19, "div", 60)(20, "select", 63);
     i0.ɵɵlistener("ngModelChange", function FixturePoolComponent_Conditional_69_Template_select_ngModelChange_20_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.selectedFixture.dmxFirstChannel = $event); });
-    i0.ɵɵrepeaterCreate(21, FixturePoolComponent_Conditional_69_For_22_Template, 2, 2, "option", 66, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵrepeaterCreate(21, FixturePoolComponent_Conditional_69_For_22_Template, 2, 2, "option", 64, i0.ɵɵrepeaterTrackByIndex);
     i0.ɵɵelementEnd()()();
     i0.ɵɵelementStart(23, "div", 20);
-    i0.ɵɵelement(24, "label", 64);
-    i0.ɵɵelementStart(25, "div", 62)(26, "button", 42);
+    i0.ɵɵelement(24, "label", 62);
+    i0.ɵɵelementStart(25, "div", 60)(26, "button", 42);
     i0.ɵɵlistener("click", function FixturePoolComponent_Conditional_69_Template_button_click_26_listener() { i0.ɵɵrestoreView(_r9); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.addCopy(ctx_r2.selectedFixture)); });
     i0.ɵɵtext(27);
     i0.ɵɵpipe(28, "translate");
@@ -5384,7 +5711,7 @@ class FixturePoolComponent {
         this.dmxChannels = [];
         this.showChannelNumbers = false;
         this.onClose = new Subject();
-        this.fixturePool = [...this.projectService.project.fixtures];
+        this.fixturePool = structuredClone(this.projectService.project.fixtures);
         if (this.fixturePool.length > 0) {
             this.selectFixture(this.fixturePool[0]);
         }
@@ -5604,12 +5931,11 @@ class FixturePoolComponent {
                 return;
             }
         }
-        this.projectService.project.fixtures = this.fixturePool;
-        // remove deleted fixtures from preset fixtures
+        // remove deleted fixtures/pixel keys from preset fixtures
         for (let i = this.projectService.project.presetFixtures.length - 1; i >= 0; i--) {
             let found = false;
             const presetFixture = this.projectService.project.presetFixtures[i];
-            for (let fixture of this.projectService.project.fixtures) {
+            for (let fixture of this.fixturePool) {
                 if (presetFixture.fixtureUuid === fixture.uuid) {
                     found = true;
                     break;
@@ -5619,8 +5945,23 @@ class FixturePoolComponent {
                 this.projectService.project.presetFixtures.splice(i, 1);
             }
         }
-        // add the new fixtures to the preset fixtures
-        for (let fixture of this.projectService.project.fixtures) {
+        // If a mode is changed, we need to re-add the fixture to make sure, all pixel keys
+        // are removed/added
+        for (let projectFixture of this.projectService.project.fixtures) {
+            for (let poolFixture of this.fixturePool) {
+                if (poolFixture.profileUuid === projectFixture.profileUuid && poolFixture.modeShortName != projectFixture.modeShortName) {
+                    // the mode has changed -> remove it from the presetfixtures
+                    for (let i = this.projectService.project.presetFixtures.length - 1; i >= 0; i--) {
+                        const presetFixture = this.projectService.project.presetFixtures[i];
+                        if (presetFixture.fixtureUuid === poolFixture.uuid) {
+                            this.projectService.project.presetFixtures.splice(i, 1);
+                        }
+                    }
+                }
+            }
+        }
+        // add the new fixtures/pixel keys to the preset fixtures
+        for (let fixture of this.fixturePool) {
             let found = false;
             for (let presetFixture of this.projectService.project.presetFixtures) {
                 if (presetFixture.fixtureUuid === fixture.uuid) {
@@ -5634,15 +5975,16 @@ class FixturePoolComponent {
                     presetFixture.fixtureUuid = fixture.uuid;
                     this.projectService.project.presetFixtures.push(presetFixture);
                 }
-                const pixelKeys = this.fixtureService.fixtureGetUniquePixelKeys(fixture);
-                for (let pixelKey of pixelKeys) {
+                const pixels = this.fixtureService.fixtureGetUniquePixels(fixture);
+                for (let pixel of pixels) {
                     const presetFixture = new PresetFixture();
                     presetFixture.fixtureUuid = fixture.uuid;
-                    presetFixture.pixelKey = pixelKey;
+                    presetFixture.pixelKey = pixel.key;
                     this.projectService.project.presetFixtures.push(presetFixture);
                 }
             }
         }
+        this.projectService.project.fixtures = this.fixturePool;
         this.fixtureService.updateCachedFixtures();
         this.presetService.removeDeletedFixtures();
         this.previewService.updateFixtureSetup();
@@ -5693,7 +6035,7 @@ class FixturePoolComponent {
     static { this.ɵfac = function FixturePoolComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || FixturePoolComponent)(i0.ɵɵdirectiveInject(i1$1.BsModalRef), i0.ɵɵdirectiveInject(FixtureService), i0.ɵɵdirectiveInject(UuidService), i0.ɵɵdirectiveInject(ProjectService), i0.ɵɵdirectiveInject(PreviewService), i0.ɵɵdirectiveInject(i4.TranslateService), i0.ɵɵdirectiveInject(i3$1.ToastrService), i0.ɵɵdirectiveInject(PresetService), i0.ɵɵdirectiveInject(ConfigService), i0.ɵɵdirectiveInject(i1$1.BsModalService)); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FixturePoolComponent, selectors: [["lib-app-fixture-pool"]], hostBindings: function FixturePoolComponent_HostBindings(rf, ctx) { if (rf & 1) {
             i0.ɵɵlistener("mouseup", function FixturePoolComponent_mouseup_HostBindingHandler($event) { return ctx.mouseUp($event); }, i0.ɵɵresolveWindow)("keydown.enter", function FixturePoolComponent_keydown_enter_HostBindingHandler($event) { return ctx.handleKeyboardEvent($event); }, i0.ɵɵresolveDocument);
-        } }, standalone: false, decls: 77, vars: 35, consts: [[1, "modal-header"], [1, "modal-title", "pull-left"], ["type", "button", "aria-label", "Close", 1, "close", "pull-right", 3, "click"], ["aria-hidden", "true"], [1, "modal-body"], [1, "row"], [1, "col-6"], ["type", "text", "id", "searchSet", 1, "form-control", "input-block", "mb-3", 3, "input", "placeholder"], [1, "card", "border-secondary", "w-100", 2, "height", "200px"], [1, "card-body", "p-0", "w-100"], [1, "list-group", "list-group-flush", "w-100"], [1, "list-group-item", "flex-column", "align-items-start", "d-flex"], [1, "list-group-item"], [1, "d-inline-block", "mb-0", "mt-2"], ["href", "https://open-fixture-library.org/", "target", "_blank"], ["href", "https://open-fixture-library.org/fixture-editor", "target", "_blank", "role", "button", 1, "mt-2", "btn", "btn-secondary", "btn-sm", "float-right"], ["aria-hidden", "true", 1, "fa", "fa-file-o"], ["type", "button", "role", "button", 1, "mr-2", "mt-2", "btn", "btn-secondary", "btn-sm", "float-right", 3, "disabled"], ["type", "button", "role", "button", 1, "btn", "btn-secondary", 3, "click"], ["aria-hidden", "true", 1, "fa", "fa-plus"], [1, "form-group", "row"], [1, "col-lg-4", "col-form-label"], [1, "col-lg-8"], [1, "custom-select"], [1, "card", "border-secondary", 2, "height", "235px"], [1, "card-body", "p-0"], [1, "list-group", "list-group-flush", 3, "sortablejs"], [1, "list-group-item", 2, "cursor", "pointer", 3, "active"], [1, "row", "mt-3"], [1, "col"], ["id", "myTab", "role", "tablist", 1, "nav", "nav-tabs", "mb-4"], [1, "nav-item"], ["id", "sets-tab", "data-toggle", "tab", "href", "#dmx", "role", "tab", 1, "nav-link", "active"], ["aria-hidden", "true", 1, "icon-ola"], ["id", "compositions-tab", "data-toggle", "tab", "href", "#settings", "role", "tab", 1, "nav-link"], ["aria-hidden", "true", 1, "fa", "fa-cog"], ["id", "myTabContent", 1, "tab-content"], ["id", "dmx", "role", "tabpanel", 1, "tab-pane", "show", "active"], ["placement", "top", "triggers", "mouseenter:mouseleave", 1, "dmx-channel", 3, "dmx-channel-occupied", "dmx-channel-occupied-start", "dmx-channel-occupied-end", "dmx-channel-selected", "dmx-channel-overlapped", "popover"], ["id", "settings", "role", "tabpanel", 1, "tab-pane"], [1, "modal-footer"], ["href", "#", "role", "button", 1, "mr-3", "my-auto", 3, "click"], ["type", "button", 1, "btn", "btn-primary", 3, "click"], [1, "mb-0", "mx-auto"], [1, "fa", "fa-spinner", "fa-pulse", "fa-fw"], [1, "col-10", "col-auto", "my-auto", "pl-2"], [1, "mb-0"], [1, "col-2", "my-auto"], ["href", "#", "role", "button", 1, "btn", "btn-primary", "btn-sm", "float-right", 3, "click"], ["type", "button", "role", "button", 1, "mr-2", "mt-2", "btn", "btn-secondary", "btn-sm", "float-right", 3, "click", "disabled"], ["aria-hidden", "true", 1, "fa", "fa-spinner", "fa-pulse", "fa-fw"], ["aria-hidden", "true", 1, "fa", "fa-download", "fa-fw"], [1, "list-group-item", 2, "cursor", "pointer", 3, "click"], [1, "col-auto", "list-sort-handle", "my-auto", 2, "cursor", "move", "cursor", "-webkit-grabbing"], ["aria-hidden", "true", 1, "fa", "fa-bars"], [1, "col-auto", "flex-grow", "pl-0", "my-auto"], [1, "col-auto", "my-auto"], ["aria-hidden", "true", 1, "fa", "fa-minus"], ["placement", "top", "triggers", "mouseenter:mouseleave", 1, "dmx-channel", 3, "mousedown", "mouseover", "popover"], [1, "d-flex", "w-100", "dmx-channel-text"], [1, "m-auto", 2, "font-size", "11px"], ["for", "fixtureName", 1, "col-lg-3", "col-form-label"], [1, "col-lg-9"], ["type", "text", "maxlength", "200", "id", "fixtureName", 1, "form-control", 3, "ngModelChange", "ngModel"], [1, "col-lg-3", "col-form-label"], [1, "custom-select", 3, "ngModelChange", "ngModel"], [3, "ngValue"]], template: function FixturePoolComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, standalone: false, decls: 77, vars: 34, consts: [[1, "modal-header"], [1, "modal-title", "pull-left"], ["type", "button", "aria-label", "Close", 1, "close", "pull-right", 3, "click"], ["aria-hidden", "true"], [1, "modal-body"], [1, "row"], [1, "col-6"], ["type", "text", "id", "searchSet", 1, "form-control", "input-block", "mb-3", 3, "input", "placeholder"], [1, "card", "border-secondary", "w-100", 2, "height", "200px"], [1, "card-body", "p-0", "w-100"], [1, "list-group", "list-group-flush", "w-100"], [1, "list-group-item", "flex-column", "align-items-start", "d-flex"], [1, "list-group-item"], [1, "d-inline-block", "mb-0", "mt-2"], ["href", "https://open-fixture-library.org/", "target", "_blank"], ["href", "https://open-fixture-library.org/fixture-editor", "target", "_blank", "role", "button", 1, "mt-2", "btn", "btn-secondary", "btn-sm", "float-right"], ["aria-hidden", "true", 1, "fa", "fa-file-o"], ["type", "button", "role", "button", 1, "mr-2", "mt-2", "btn", "btn-secondary", "btn-sm", "float-right", 3, "disabled"], ["type", "button", "role", "button", 1, "btn", "btn-secondary", 3, "click"], ["aria-hidden", "true", 1, "fa", "fa-plus"], [1, "form-group", "row"], [1, "col-lg-4", "col-form-label"], [1, "col-lg-8"], [1, "custom-select"], [1, "card", "border-secondary", 2, "height", "235px"], [1, "card-body", "p-0"], [1, "list-group", "list-group-flush"], [1, "list-group-item", 2, "cursor", "pointer", 3, "active"], [1, "row", "mt-3"], [1, "col"], ["id", "myTab", "role", "tablist", 1, "nav", "nav-tabs", "mb-4"], [1, "nav-item"], ["id", "sets-tab", "data-toggle", "tab", "href", "#dmx", "role", "tab", 1, "nav-link", "active"], ["aria-hidden", "true", 1, "icon-ola"], ["id", "compositions-tab", "data-toggle", "tab", "href", "#settings", "role", "tab", 1, "nav-link"], ["aria-hidden", "true", 1, "fa", "fa-cog"], ["id", "myTabContent", 1, "tab-content"], ["id", "dmx", "role", "tabpanel", 1, "tab-pane", "show", "active"], ["placement", "top", "triggers", "mouseenter:mouseleave", 1, "dmx-channel", 3, "dmx-channel-occupied", "dmx-channel-occupied-start", "dmx-channel-occupied-end", "dmx-channel-selected", "dmx-channel-overlapped", "popover"], ["id", "settings", "role", "tabpanel", 1, "tab-pane"], [1, "modal-footer"], ["href", "#", "role", "button", 1, "mr-3", "my-auto", 3, "click"], ["type", "button", 1, "btn", "btn-primary", 3, "click"], [1, "mb-0", "mx-auto"], [1, "fa", "fa-spinner", "fa-pulse", "fa-fw"], [1, "col-10", "col-auto", "my-auto", "pl-2"], [1, "mb-0"], [1, "col-2", "my-auto"], ["href", "#", "role", "button", 1, "btn", "btn-primary", "btn-sm", "float-right", 3, "click"], ["type", "button", "role", "button", 1, "mr-2", "mt-2", "btn", "btn-secondary", "btn-sm", "float-right", 3, "click", "disabled"], ["aria-hidden", "true", 1, "fa", "fa-spinner", "fa-pulse", "fa-fw"], ["aria-hidden", "true", 1, "fa", "fa-download", "fa-fw"], [1, "list-group-item", 2, "cursor", "pointer", 3, "click"], [1, "col-auto", "flex-grow", "pl-0", "my-auto"], [1, "col-auto", "my-auto"], ["aria-hidden", "true", 1, "fa", "fa-minus"], ["placement", "top", "triggers", "mouseenter:mouseleave", 1, "dmx-channel", 3, "mousedown", "mouseover", "popover"], [1, "d-flex", "w-100", "dmx-channel-text"], [1, "m-auto", 2, "font-size", "11px"], ["for", "fixtureName", 1, "col-lg-3", "col-form-label"], [1, "col-lg-9"], ["type", "text", "maxlength", "200", "id", "fixtureName", 1, "form-control", 3, "ngModelChange", "ngModel"], [1, "col-lg-3", "col-form-label"], [1, "custom-select", 3, "ngModelChange", "ngModel"], [3, "ngValue"]], template: function FixturePoolComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "h4", 1);
             i0.ɵɵtext(2);
             i0.ɵɵpipe(3, "translate");
@@ -5738,7 +6080,7 @@ class FixturePoolComponent {
             i0.ɵɵtext(44, "Universe 1");
             i0.ɵɵelementEnd()()()()()();
             i0.ɵɵelementStart(45, "div", 24)(46, "div", 25)(47, "div", 26);
-            i0.ɵɵrepeaterCreate(48, FixturePoolComponent_For_49_Template, 11, 6, "div", 27, i0.ɵɵrepeaterTrackByIdentity);
+            i0.ɵɵrepeaterCreate(48, FixturePoolComponent_For_49_Template, 9, 6, "div", 27, i0.ɵɵrepeaterTrackByIdentity);
             i0.ɵɵelementEnd()()()()();
             i0.ɵɵelementStart(50, "div", 28)(51, "div", 29)(52, "ul", 30)(53, "li", 31)(54, "a", 32);
             i0.ɵɵelement(55, "i", 33);
@@ -5751,7 +6093,7 @@ class FixturePoolComponent {
             i0.ɵɵpipe(62, "translate");
             i0.ɵɵelementEnd()()();
             i0.ɵɵelementStart(63, "div", 36)(64, "div", 37)(65, "div");
-            i0.ɵɵrepeaterCreate(66, FixturePoolComponent_For_67_Template, 5, 18, "div", 38, i0.ɵɵrepeaterTrackByIdentity);
+            i0.ɵɵrepeaterCreate(66, FixturePoolComponent_For_67_Template, 5, 18, "div", 38, i0.ɵɵrepeaterTrackByIndex);
             i0.ɵɵelementEnd()();
             i0.ɵɵelementStart(68, "div", 39);
             i0.ɵɵconditionalCreate(69, FixturePoolComponent_Conditional_69_Template, 29, 15, "div");
@@ -5768,42 +6110,40 @@ class FixturePoolComponent {
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
             i0.ɵɵadvance(2);
-            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(3, 14, "designer.fixture-pool.title"));
+            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(3, 13, "designer.fixture-pool.title"));
             i0.ɵɵadvance(8);
-            i0.ɵɵproperty("placeholder", i0.ɵɵinterpolate(i0.ɵɵpipeBind1(11, 16, "designer.fixture-pool.search-profiles")));
+            i0.ɵɵproperty("placeholder", i0.ɵɵinterpolate(i0.ɵɵpipeBind1(11, 15, "designer.fixture-pool.search-profiles")));
             i0.ɵɵadvance(5);
             i0.ɵɵconditional(ctx.loadingProfiles ? 15 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵrepeater(i0.ɵɵpipeBind2(18, 18, ctx.filteredProfiles, "uuid"));
+            i0.ɵɵrepeater(i0.ɵɵpipeBind2(18, 17, ctx.filteredProfiles, "uuid"));
             i0.ɵɵadvance(10);
-            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(27, 21, "designer.fixture-pool.add-profile"), " ");
+            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(27, 20, "designer.fixture-pool.add-profile"), " ");
             i0.ɵɵadvance(2);
             i0.ɵɵconditional(ctx.configService.localProfiles ? 28 : -1);
             i0.ɵɵadvance(6);
-            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(35, 23, "designer.fixture-pool.create-fixture-from-profile-file"), " ");
+            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(35, 22, "designer.fixture-pool.create-fixture-from-profile-file"), " ");
             i0.ɵɵadvance(5);
-            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(40, 25, "designer.fixture-pool.universe"));
-            i0.ɵɵadvance(8);
-            i0.ɵɵproperty("sortablejs", ctx.fixturePool);
-            i0.ɵɵadvance();
+            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(40, 24, "designer.fixture-pool.universe"));
+            i0.ɵɵadvance(9);
             i0.ɵɵrepeater(ctx.fixturePool);
             i0.ɵɵadvance(8);
-            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(57, 27, "designer.fixture-pool.dmx"), " ");
+            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(57, 26, "designer.fixture-pool.dmx"), " ");
             i0.ɵɵadvance(5);
-            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(62, 29, "designer.fixture-pool.settings"), " ");
+            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(62, 28, "designer.fixture-pool.settings"), " ");
             i0.ɵɵadvance(5);
             i0.ɵɵrepeater(ctx.dmxChannels);
             i0.ɵɵadvance(3);
             i0.ɵɵconditional(ctx.selectedFixture && ctx.selectedFixtureProfile ? 69 : -1);
             i0.ɵɵadvance(3);
-            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(73, 31, "designer.misc.cancel"), " ");
+            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(73, 30, "designer.misc.cancel"), " ");
             i0.ɵɵadvance(3);
-            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(76, 33, "designer.misc.ok"));
-        } }, dependencies: [i3$2.NgSelectOption, i3$2.ɵNgSelectMultipleOption, i3$2.DefaultValueAccessor, i3$2.SelectControlValueAccessor, i3$2.NgControlStatus, i3$2.MaxLengthValidator, i3$2.NgModel, i11.PopoverDirective, i7.SortablejsDirective, i4.TranslatePipe, ArraySortPipe], styles: [".list-group-item[_ngcontent-%COMP%]{padding:.3rem 1.25rem}.dmx-channel[_ngcontent-%COMP%]{display:flex;float:left;width:28px;border:1px solid white;margin-left:-1px;margin-bottom:-1px;padding-bottom:2px}.dmx-channel-occupied[_ngcontent-%COMP%]{background-color:#63462e;border-left:none;border-right:none;cursor:move}.dmx-channel-occupied-start[_ngcontent-%COMP%]{border-left:1px solid white;border-top-left-radius:8px;border-bottom-left-radius:8px}.dmx-channel-occupied-end[_ngcontent-%COMP%]{border-right:1px solid white;border-top-right-radius:8px;border-bottom-right-radius:8px}.dmx-channel-selected[_ngcontent-%COMP%]{background-color:#fd7e14}.dmx-channel-overlapped[_ngcontent-%COMP%]{background-color:red;border:1px solid red;cursor:move}.card[_ngcontent-%COMP%]{overflow:auto}"] }); }
+            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(76, 32, "designer.misc.ok"));
+        } }, dependencies: [i3$2.NgSelectOption, i3$2.ɵNgSelectMultipleOption, i3$2.DefaultValueAccessor, i3$2.SelectControlValueAccessor, i3$2.NgControlStatus, i3$2.MaxLengthValidator, i3$2.NgModel, i11.PopoverDirective, i4.TranslatePipe, ArraySortPipe], styles: [".list-group-item[_ngcontent-%COMP%]{padding:.3rem 1.25rem}.dmx-channel[_ngcontent-%COMP%]{display:flex;float:left;width:28px;border:1px solid white;margin-left:-1px;margin-bottom:-1px;padding-bottom:2px}.dmx-channel-occupied[_ngcontent-%COMP%]{background-color:#63462e;border-left:none;border-right:none;cursor:move}.dmx-channel-occupied-start[_ngcontent-%COMP%]{border-left:1px solid white;border-top-left-radius:8px;border-bottom-left-radius:8px}.dmx-channel-occupied-end[_ngcontent-%COMP%]{border-right:1px solid white;border-top-right-radius:8px;border-bottom-right-radius:8px}.dmx-channel-selected[_ngcontent-%COMP%]{background-color:#fd7e14}.dmx-channel-overlapped[_ngcontent-%COMP%]{background-color:red;border:1px solid red;cursor:move}.card[_ngcontent-%COMP%]{overflow:auto}"] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FixturePoolComponent, [{
         type: Component,
-        args: [{ selector: 'lib-app-fixture-pool', standalone: false, template: "<div class=\"modal-header\">\n  <h4 class=\"modal-title pull-left\">{{ 'designer.fixture-pool.title' | translate }}</h4>\n  <button type=\"button\" class=\"close pull-right\" aria-label=\"Close\" (click)=\"cancel(); (false)\">\n    <span aria-hidden=\"true\">&times;</span>\n  </button>\n</div>\n<div class=\"modal-body\">\n  <div class=\"row\">\n    <div class=\"col-6\">\n      <!-- Search for profiles -->\n      <input\n        type=\"text\"\n        class=\"form-control input-block mb-3\"\n        id=\"searchSet\"\n        placeholder=\"{{ 'designer.fixture-pool.search-profiles' | translate }}\"\n        (input)=\"searchExpression = $event.target.value; filterProfiles()\"\n      />\n\n      <!-- Profiles -->\n      <div class=\"card border-secondary w-100\" style=\"height: 200px\">\n        <div class=\"card-body p-0 w-100\">\n          <div class=\"list-group list-group-flush w-100\">\n            @if (loadingProfiles) {\n            <a class=\"list-group-item flex-column align-items-start d-flex\">\n              <p class=\"mb-0 mx-auto\">\n                <i class=\"fa fa-spinner fa-pulse fa-fw\"></i>\n              </p>\n            </a>\n            } @for (profile of filteredProfiles | sort : 'uuid'; track profile) {\n            <div class=\"list-group-item\">\n              <div class=\"row\">\n                <div class=\"col-10 col-auto my-auto pl-2\">\n                  <p class=\"mb-0\">\n                    <span class=\"icon-{{ fixtureService.getFixtureIconClass(profile) }} mr-1\"></span> {{ profile.manufacturerName }} -\n                    {{ profile.name }}\n                  </p>\n                </div>\n                <div class=\"col-2 my-auto\">\n                  <a class=\"btn btn-primary btn-sm float-right\" href=\"#\" role=\"button\" (click)=\"addFixture(profile); (false)\">\n                    <i class=\"fa fa-plus\" aria-hidden=\"true\"></i>\n                  </a>\n                </div>\n              </div>\n            </div>\n            }\n          </div>\n        </div>\n      </div>\n      <div>\n        <p class=\"d-inline-block mb-0 mt-2\">\n          Powered by the <a href=\"https://open-fixture-library.org/\" target=\"_blank\">Open Fixture Library</a>\n        </p>\n        <a\n          class=\"mt-2 btn btn-secondary btn-sm float-right\"\n          href=\"https://open-fixture-library.org/fixture-editor\"\n          target=\"_blank\"\n          role=\"button\"\n        >\n          <i class=\"fa fa-file-o\" aria-hidden=\"true\"></i> {{ 'designer.fixture-pool.add-profile' | translate }}\n        </a>\n        @if (configService.localProfiles) {\n        <button\n          type=\"button\"\n          class=\"mr-2 mt-2 btn btn-secondary btn-sm float-right\"\n          (click)=\"updateProfiles(); (false)\"\n          [disabled]=\"updatingProfiles\"\n          role=\"button\"\n        >\n          @if (updatingProfiles) {\n          <i class=\"fa fa-spinner fa-pulse fa-fw\" aria-hidden=\"true\"></i>\n          } @if (!updatingProfiles) {\n          <i class=\"fa fa-download fa-fw\" aria-hidden=\"true\"></i>\n          }\n          {{ 'designer.fixture-pool.update-profiles' | translate }}\n        </button>\n        }\n      </div>\n    </div>\n    <div class=\"col-6\">\n      <div class=\"row\">\n        <!-- Add fixture from local profile -->\n        <div class=\"col-6\">\n          <button type=\"button\" class=\"btn btn-secondary\" (click)=\"createFixtureFromProfileFile()\" role=\"button\">\n            <i class=\"fa fa-plus\" aria-hidden=\"true\"></i> {{ 'designer.fixture-pool.create-fixture-from-profile-file' | translate }}\n          </button>\n        </div>\n\n        <!-- Universe -->\n        <div class=\"col-6\">\n          <div class=\"form-group row\">\n            <label class=\"col-lg-4 col-form-label\">{{ 'designer.fixture-pool.universe' | translate }}</label>\n            <div class=\"col-lg-8\">\n              <select class=\"custom-select\">\n                <option>Universe 1</option>\n              </select>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Fixtures -->\n      <div class=\"card border-secondary\" style=\"height: 235px\">\n        <div class=\"card-body p-0\">\n          <div class=\"list-group list-group-flush\" [sortablejs]=\"fixturePool\">\n            @for (fixture of fixturePool; track fixture) {\n            <div\n              class=\"list-group-item\"\n              [class.active]=\"fixture == selectedFixture\"\n              (click)=\"selectFixture(fixture)\"\n              style=\"cursor: pointer\"\n            >\n              <div class=\"row\">\n                <div class=\"col-auto list-sort-handle my-auto\" style=\"cursor: move; cursor: -webkit-grabbing\">\n                  <i class=\"fa fa-bars\" aria-hidden=\"true\"></i>\n                </div>\n                <div class=\"col-auto flex-grow pl-0 my-auto\">\n                  <p class=\"mb-0\">\n                    <span class=\"icon-{{ fixtureService.getFixtureIconClass(fixtureService.getProfileByUuid(fixture.profileUuid)) }} mr-1\">\n                    </span\n                    >{{ fixture.name }}\n                  </p>\n                </div>\n                <div class=\"col-auto my-auto\">\n                  <a class=\"btn btn-primary btn-sm float-right\" href=\"#\" role=\"button\" (click)=\"removeFixture(fixture); (false)\">\n                    <i class=\"fa fa-minus\" aria-hidden=\"true\"></i>\n                  </a>\n                </div>\n              </div>\n            </div>\n            }\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"row mt-3\">\n    <div class=\"col\">\n      <!-- Tab navigation -->\n      <ul class=\"nav nav-tabs mb-4\" id=\"myTab\" role=\"tablist\">\n        <li class=\"nav-item\">\n          <a class=\"nav-link active\" id=\"sets-tab\" data-toggle=\"tab\" href=\"#dmx\" role=\"tab\">\n            <i class=\"icon-ola\" aria-hidden=\"true\"></i> {{ 'designer.fixture-pool.dmx' | translate }}\n          </a>\n        </li>\n        <li class=\"nav-item\">\n          <a class=\"nav-link\" id=\"compositions-tab\" data-toggle=\"tab\" href=\"#settings\" role=\"tab\">\n            <i class=\"fa fa-cog\" aria-hidden=\"true\"></i> {{ 'designer.fixture-pool.settings' | translate }}\n          </a>\n        </li>\n      </ul>\n\n      <!-- Tab content -->\n      <div class=\"tab-content\" id=\"myTabContent\">\n        <!-- DMX universe overview-->\n        <div class=\"tab-pane show active\" id=\"dmx\" role=\"tabpanel\">\n          <!-- Show all channel numbers -->\n          <!-- <div class=\"form-group row\">\n            <div class=\"col-auto flex-grow\"></div>\n            <div class=\"col-lg-3 d-flex\">\n              <div class=\"form-check my-auto ml-auto\">\n                <input type=\"checkbox\" class=\"form-check-input\" id=\"showChannelNumbers\" [ngModel]=\"showChannelNumbers\"\n                  (ngModelChange)=\"showChannelNumbers = $event\">\n                <label class=\"form-check-label\" for=\"showChannelNumbers\">Show channels</label>\n              </div>\n            </div>\n          </div> -->\n\n          <!-- List of DMX channels -->\n          <div>\n            @for (channel of dmxChannels; track channel; let i = $index) {\n            <div\n              class=\"dmx-channel\"\n              [class.dmx-channel-occupied]=\"channelOccupied(i)\"\n              [class.dmx-channel-occupied-start]=\"channelOccupiedStart(i)\"\n              [class.dmx-channel-occupied-end]=\"channelOccupiedEnd(i)\"\n              [class.dmx-channel-selected]=\"channelSelected(i)\"\n              [class.dmx-channel-overlapped]=\"channelOverlapped(i)\"\n              (mousedown)=\"channelMouseDown($event)\"\n              (mouseover)=\"channelMouseOver($event)\"\n              [attr.data-index]=\"i\"\n              popover=\"{{ i + 1 }}\"\n              placement=\"top\"\n              triggers=\"mouseenter:mouseleave\"\n            >\n              <div class=\"d-flex w-100 dmx-channel-text\" [attr.data-index]=\"i\" [class.dmx-channel-text-visible]=\"showChannelNumbers\">\n                <div class=\"m-auto\" style=\"font-size: 11px\" [attr.data-index]=\"i\"><small [attr.data-index]=\"i\">&nbsp;</small></div>\n              </div>\n            </div>\n            }\n          </div>\n        </div>\n\n        <!-- Fixture settings -->\n        <div class=\"tab-pane\" id=\"settings\" role=\"tabpanel\">\n          @if (selectedFixture && selectedFixtureProfile) {\n          <div>\n            <div class=\"form-group row\">\n              <label class=\"col-lg-3 col-form-label\" for=\"fixtureName\">{{ 'designer.fixture-pool.fixture-name' | translate }}</label>\n              <div class=\"col-lg-9\">\n                <input type=\"text\" class=\"form-control\" [(ngModel)]=\"selectedFixture.name\" maxlength=\"200\" id=\"fixtureName\" />\n              </div>\n            </div>\n            <div class=\"form-group row\">\n              <label class=\"col-lg-3 col-form-label\">{{ 'designer.fixture-pool.mode' | translate }}</label>\n              <div class=\"col-lg-9\">\n                <select\n                  class=\"custom-select\"\n                  [ngModel]=\"selectedFixture.modeShortName\"\n                  (ngModelChange)=\"selectedFixture.modeShortName = $event\"\n                >\n                  @for (mode of selectedFixtureProfile.modes; track mode) {\n                  <option [ngValue]=\"mode.shortName || mode.name\">\n                    {{ mode.name }}\n                    - {{ fixtureService.getModeChannelCount(selectedFixtureProfile, mode) }}\n                    {{ 'designer.fixture-pool.channels' | translate }}\n                  </option>\n                  }\n                </select>\n              </div>\n            </div>\n            <div class=\"form-group row\">\n              <label class=\"col-lg-3 col-form-label\">{{ 'designer.fixture-pool.first-channel' | translate }}</label>\n              <div class=\"col-lg-9\">\n                <select\n                  class=\"custom-select\"\n                  [ngModel]=\"selectedFixture.dmxFirstChannel\"\n                  (ngModelChange)=\"selectedFixture.dmxFirstChannel = $event\"\n                >\n                  @for (channel of dmxChannels; track channel; let i = $index) {\n                  <option [ngValue]=\"i\">\n                    {{ i + 1 }}\n                  </option>\n                  }\n                </select>\n              </div>\n            </div>\n            <div class=\"form-group row\">\n              <label class=\"col-lg-3 col-form-label\"></label>\n              <div class=\"col-lg-9\">\n                <button type=\"button\" class=\"btn btn-primary\" (click)=\"addCopy(selectedFixture)\">\n                  {{ 'designer.fixture.add-copy' | translate }}\n                </button>\n              </div>\n            </div>\n          </div>\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n<div class=\"modal-footer\">\n  <a class=\"mr-3 my-auto\" href=\"#\" role=\"button\" (click)=\"cancel(); (false)\">\n    {{ 'designer.misc.cancel' | translate }}\n  </a>\n  <button type=\"button\" class=\"btn btn-primary\" (click)=\"ok()\">{{ 'designer.misc.ok' | translate }}</button>\n</div>\n", styles: [".list-group-item{padding:.3rem 1.25rem}.dmx-channel{display:flex;float:left;width:28px;border:1px solid white;margin-left:-1px;margin-bottom:-1px;padding-bottom:2px}.dmx-channel-occupied{background-color:#63462e;border-left:none;border-right:none;cursor:move}.dmx-channel-occupied-start{border-left:1px solid white;border-top-left-radius:8px;border-bottom-left-radius:8px}.dmx-channel-occupied-end{border-right:1px solid white;border-top-right-radius:8px;border-bottom-right-radius:8px}.dmx-channel-selected{background-color:#fd7e14}.dmx-channel-overlapped{background-color:red;border:1px solid red;cursor:move}.card{overflow:auto}\n"] }]
+        args: [{ selector: 'lib-app-fixture-pool', standalone: false, template: "<div class=\"modal-header\">\n  <h4 class=\"modal-title pull-left\">{{ 'designer.fixture-pool.title' | translate }}</h4>\n  <button type=\"button\" class=\"close pull-right\" aria-label=\"Close\" (click)=\"cancel(); (false)\">\n    <span aria-hidden=\"true\">&times;</span>\n  </button>\n</div>\n<div class=\"modal-body\">\n  <div class=\"row\">\n    <div class=\"col-6\">\n      <!-- Search for profiles -->\n      <input\n        type=\"text\"\n        class=\"form-control input-block mb-3\"\n        id=\"searchSet\"\n        placeholder=\"{{ 'designer.fixture-pool.search-profiles' | translate }}\"\n        (input)=\"searchExpression = $event.target.value; filterProfiles()\"\n      />\n\n      <!-- Profiles -->\n      <div class=\"card border-secondary w-100\" style=\"height: 200px\">\n        <div class=\"card-body p-0 w-100\">\n          <div class=\"list-group list-group-flush w-100\">\n            @if (loadingProfiles) {\n            <a class=\"list-group-item flex-column align-items-start d-flex\">\n              <p class=\"mb-0 mx-auto\">\n                <i class=\"fa fa-spinner fa-pulse fa-fw\"></i>\n              </p>\n            </a>\n            } @for (profile of filteredProfiles | sort : 'uuid'; track profile) {\n            <div class=\"list-group-item\">\n              <div class=\"row\">\n                <div class=\"col-10 col-auto my-auto pl-2\">\n                  <p class=\"mb-0\">\n                    <span class=\"icon-{{ fixtureService.getFixtureIconClass(profile) }} mr-1\"></span> {{ profile.manufacturerName }} -\n                    {{ profile.name }}\n                  </p>\n                </div>\n                <div class=\"col-2 my-auto\">\n                  <a class=\"btn btn-primary btn-sm float-right\" href=\"#\" role=\"button\" (click)=\"addFixture(profile); (false)\">\n                    <i class=\"fa fa-plus\" aria-hidden=\"true\"></i>\n                  </a>\n                </div>\n              </div>\n            </div>\n            }\n          </div>\n        </div>\n      </div>\n      <div>\n        <p class=\"d-inline-block mb-0 mt-2\">\n          Powered by the <a href=\"https://open-fixture-library.org/\" target=\"_blank\">Open Fixture Library</a>\n        </p>\n        <a\n          class=\"mt-2 btn btn-secondary btn-sm float-right\"\n          href=\"https://open-fixture-library.org/fixture-editor\"\n          target=\"_blank\"\n          role=\"button\"\n        >\n          <i class=\"fa fa-file-o\" aria-hidden=\"true\"></i> {{ 'designer.fixture-pool.add-profile' | translate }}\n        </a>\n        @if (configService.localProfiles) {\n        <button\n          type=\"button\"\n          class=\"mr-2 mt-2 btn btn-secondary btn-sm float-right\"\n          (click)=\"updateProfiles(); (false)\"\n          [disabled]=\"updatingProfiles\"\n          role=\"button\"\n        >\n          @if (updatingProfiles) {\n          <i class=\"fa fa-spinner fa-pulse fa-fw\" aria-hidden=\"true\"></i>\n          } @if (!updatingProfiles) {\n          <i class=\"fa fa-download fa-fw\" aria-hidden=\"true\"></i>\n          }\n          {{ 'designer.fixture-pool.update-profiles' | translate }}\n        </button>\n        }\n      </div>\n    </div>\n    <div class=\"col-6\">\n      <div class=\"row\">\n        <!-- Add fixture from local profile -->\n        <div class=\"col-6\">\n          <button type=\"button\" class=\"btn btn-secondary\" (click)=\"createFixtureFromProfileFile()\" role=\"button\">\n            <i class=\"fa fa-plus\" aria-hidden=\"true\"></i> {{ 'designer.fixture-pool.create-fixture-from-profile-file' | translate }}\n          </button>\n        </div>\n\n        <!-- Universe -->\n        <div class=\"col-6\">\n          <div class=\"form-group row\">\n            <label class=\"col-lg-4 col-form-label\">{{ 'designer.fixture-pool.universe' | translate }}</label>\n            <div class=\"col-lg-8\">\n              <select class=\"custom-select\">\n                <option>Universe 1</option>\n              </select>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Fixtures -->\n      <div class=\"card border-secondary\" style=\"height: 235px\">\n        <div class=\"card-body p-0\">\n          <!-- TODO sortablejs breaks sortable lists in base designer view, as soon as it disappears -->\n          <!-- Reproduce: select a fixture, deselect a fixture, open pool, close pool without changes, fixture is \"half\"-selected again -->\n          <!-- <div class=\"list-group list-group-flush\" [sortablejs]=\"fixturePool\"> -->\n          <div class=\"list-group list-group-flush\">\n            @for (fixture of fixturePool; track fixture) {\n            <div\n              class=\"list-group-item\"\n              [class.active]=\"fixture == selectedFixture\"\n              (click)=\"selectFixture(fixture)\"\n              style=\"cursor: pointer\"\n            >\n              <div class=\"row\">\n                <!-- <div class=\"col-auto list-sort-handle my-auto\" style=\"cursor: move; cursor: -webkit-grabbing\">\n                  <i class=\"fa fa-bars\" aria-hidden=\"true\"></i>\n                </div> -->\n                <div class=\"col-auto flex-grow pl-0 my-auto\">\n                  <p class=\"mb-0\">\n                    <span class=\"icon-{{ fixtureService.getFixtureIconClass(fixtureService.getProfileByUuid(fixture.profileUuid)) }} mr-1\">\n                    </span\n                    >{{ fixture.name }}\n                  </p>\n                </div>\n                <div class=\"col-auto my-auto\">\n                  <a class=\"btn btn-primary btn-sm float-right\" href=\"#\" role=\"button\" (click)=\"removeFixture(fixture); (false)\">\n                    <i class=\"fa fa-minus\" aria-hidden=\"true\"></i>\n                  </a>\n                </div>\n              </div>\n            </div>\n            }\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"row mt-3\">\n    <div class=\"col\">\n      <!-- Tab navigation -->\n      <ul class=\"nav nav-tabs mb-4\" id=\"myTab\" role=\"tablist\">\n        <li class=\"nav-item\">\n          <a class=\"nav-link active\" id=\"sets-tab\" data-toggle=\"tab\" href=\"#dmx\" role=\"tab\">\n            <i class=\"icon-ola\" aria-hidden=\"true\"></i> {{ 'designer.fixture-pool.dmx' | translate }}\n          </a>\n        </li>\n        <li class=\"nav-item\">\n          <a class=\"nav-link\" id=\"compositions-tab\" data-toggle=\"tab\" href=\"#settings\" role=\"tab\">\n            <i class=\"fa fa-cog\" aria-hidden=\"true\"></i> {{ 'designer.fixture-pool.settings' | translate }}\n          </a>\n        </li>\n      </ul>\n\n      <!-- Tab content -->\n      <div class=\"tab-content\" id=\"myTabContent\">\n        <!-- DMX universe overview-->\n        <div class=\"tab-pane show active\" id=\"dmx\" role=\"tabpanel\">\n          <!-- Show all channel numbers -->\n          <!-- <div class=\"form-group row\">\n            <div class=\"col-auto flex-grow\"></div>\n            <div class=\"col-lg-3 d-flex\">\n              <div class=\"form-check my-auto ml-auto\">\n                <input type=\"checkbox\" class=\"form-check-input\" id=\"showChannelNumbers\" [ngModel]=\"showChannelNumbers\"\n                  (ngModelChange)=\"showChannelNumbers = $event\">\n                <label class=\"form-check-label\" for=\"showChannelNumbers\">Show channels</label>\n              </div>\n            </div>\n          </div> -->\n\n          <!-- List of DMX channels -->\n          <div>\n            @for (channel of dmxChannels; track $index; let i = $index) {\n            <div\n              class=\"dmx-channel\"\n              [class.dmx-channel-occupied]=\"channelOccupied(i)\"\n              [class.dmx-channel-occupied-start]=\"channelOccupiedStart(i)\"\n              [class.dmx-channel-occupied-end]=\"channelOccupiedEnd(i)\"\n              [class.dmx-channel-selected]=\"channelSelected(i)\"\n              [class.dmx-channel-overlapped]=\"channelOverlapped(i)\"\n              (mousedown)=\"channelMouseDown($event)\"\n              (mouseover)=\"channelMouseOver($event)\"\n              [attr.data-index]=\"i\"\n              popover=\"{{ i + 1 }}\"\n              placement=\"top\"\n              triggers=\"mouseenter:mouseleave\"\n            >\n              <div class=\"d-flex w-100 dmx-channel-text\" [attr.data-index]=\"i\" [class.dmx-channel-text-visible]=\"showChannelNumbers\">\n                <div class=\"m-auto\" style=\"font-size: 11px\" [attr.data-index]=\"i\"><small [attr.data-index]=\"i\">&nbsp;</small></div>\n              </div>\n            </div>\n            }\n          </div>\n        </div>\n\n        <!-- Fixture settings -->\n        <div class=\"tab-pane\" id=\"settings\" role=\"tabpanel\">\n          @if (selectedFixture && selectedFixtureProfile) {\n          <div>\n            <div class=\"form-group row\">\n              <label class=\"col-lg-3 col-form-label\" for=\"fixtureName\">{{ 'designer.fixture-pool.fixture-name' | translate }}</label>\n              <div class=\"col-lg-9\">\n                <input type=\"text\" class=\"form-control\" [(ngModel)]=\"selectedFixture.name\" maxlength=\"200\" id=\"fixtureName\" />\n              </div>\n            </div>\n            <div class=\"form-group row\">\n              <label class=\"col-lg-3 col-form-label\">{{ 'designer.fixture-pool.mode' | translate }}</label>\n              <div class=\"col-lg-9\">\n                <select\n                  class=\"custom-select\"\n                  [ngModel]=\"selectedFixture.modeShortName\"\n                  (ngModelChange)=\"selectedFixture.modeShortName = $event\"\n                >\n                  @for (mode of selectedFixtureProfile.modes; track mode) {\n                  <option [ngValue]=\"mode.shortName || mode.name\">\n                    {{ mode.name }}\n                    - {{ fixtureService.getModeChannelCount(selectedFixtureProfile, mode) }}\n                    {{ 'designer.fixture-pool.channels' | translate }}\n                  </option>\n                  }\n                </select>\n              </div>\n            </div>\n            <div class=\"form-group row\">\n              <label class=\"col-lg-3 col-form-label\">{{ 'designer.fixture-pool.first-channel' | translate }}</label>\n              <div class=\"col-lg-9\">\n                <select\n                  class=\"custom-select\"\n                  [ngModel]=\"selectedFixture.dmxFirstChannel\"\n                  (ngModelChange)=\"selectedFixture.dmxFirstChannel = $event\"\n                >\n                  @for (channel of dmxChannels; track $index; let i = $index) {\n                  <option [ngValue]=\"i\">\n                    {{ i + 1 }}\n                  </option>\n                  }\n                </select>\n              </div>\n            </div>\n            <div class=\"form-group row\">\n              <label class=\"col-lg-3 col-form-label\"></label>\n              <div class=\"col-lg-9\">\n                <button type=\"button\" class=\"btn btn-primary\" (click)=\"addCopy(selectedFixture)\">\n                  {{ 'designer.fixture.add-copy' | translate }}\n                </button>\n              </div>\n            </div>\n          </div>\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n<div class=\"modal-footer\">\n  <a class=\"mr-3 my-auto\" href=\"#\" role=\"button\" (click)=\"cancel(); (false)\">\n    {{ 'designer.misc.cancel' | translate }}\n  </a>\n  <button type=\"button\" class=\"btn btn-primary\" (click)=\"ok()\">{{ 'designer.misc.ok' | translate }}</button>\n</div>\n", styles: [".list-group-item{padding:.3rem 1.25rem}.dmx-channel{display:flex;float:left;width:28px;border:1px solid white;margin-left:-1px;margin-bottom:-1px;padding-bottom:2px}.dmx-channel-occupied{background-color:#63462e;border-left:none;border-right:none;cursor:move}.dmx-channel-occupied-start{border-left:1px solid white;border-top-left-radius:8px;border-bottom-left-radius:8px}.dmx-channel-occupied-end{border-right:1px solid white;border-top-right-radius:8px;border-bottom-right-radius:8px}.dmx-channel-selected{background-color:#fd7e14}.dmx-channel-overlapped{background-color:red;border:1px solid red;cursor:move}.card{overflow:auto}\n"] }]
     }], () => [{ type: i1$1.BsModalRef }, { type: FixtureService }, { type: UuidService }, { type: ProjectService }, { type: PreviewService }, { type: i4.TranslateService }, { type: i3$1.ToastrService }, { type: PresetService }, { type: ConfigService }, { type: i1$1.BsModalService }], { mouseUp: [{
             type: HostListener,
             args: ['window:mouseup', ['$event']]
@@ -6940,7 +7280,7 @@ class TimelineGridComponent {
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TimelineGridComponent, { className: "TimelineGridComponent", filePath: "lib/timeline/timeline-grid/timeline-grid.component.ts", lineNumber: 11 }); })();
 
-const _c0$5 = ["waveWrapper"];
+const _c0$6 = ["waveWrapper"];
 const _c1 = ["waveElement"];
 function TimelineComponent_Conditional_6_For_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "option", 14);
@@ -7273,7 +7613,7 @@ class TimelineComponent {
     }
     static { this.ɵfac = function TimelineComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TimelineComponent)(i0.ɵɵdirectiveInject(TimelineService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i1$1.BsModalService), i0.ɵɵdirectiveInject(UuidService), i0.ɵɵdirectiveInject(ProjectService), i0.ɵɵdirectiveInject(HotkeyTargetExcludeService), i0.ɵɵdirectiveInject(WarningDialogService), i0.ɵɵdirectiveInject(i1.HttpClient), i0.ɵɵdirectiveInject(ConfigService), i0.ɵɵdirectiveInject(PresetService), i0.ɵɵdirectiveInject(IntroService)); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TimelineComponent, selectors: [["lib-app-timeline"]], viewQuery: function TimelineComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$5, 5);
+            i0.ɵɵviewQuery(_c0$6, 5);
             i0.ɵɵviewQuery(_c1, 5);
         } if (rf & 2) {
             let _t;
@@ -7312,7 +7652,7 @@ class TimelineComponent {
             i0.ɵɵconditional(ctx.timelineService.selectedComposition ? 11 : -1);
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.projectService.project.compositions.length == 0 ? 12 : -1);
-        } }, dependencies: [i3$2.NgSelectOption, i3$2.ɵNgSelectMultipleOption, i3$2.DefaultValueAccessor, i3$2.SelectControlValueAccessor, i3$2.NgControlStatus, i3$2.NgModel, i4$1.SliderComponent, i11.PopoverDirective, i4.TranslatePipe], encapsulation: 2 }); }
+        } }, dependencies: [i3$2.NgSelectOption, i3$2.ɵNgSelectMultipleOption, i3$2.DefaultValueAccessor, i3$2.SelectControlValueAccessor, i3$2.NgControlStatus, i3$2.NgModel, i3$3.SliderComponent, i11.PopoverDirective, i4.TranslatePipe], encapsulation: 2 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TimelineComponent, [{
         type: Component,
@@ -7900,7 +8240,7 @@ class FixtureCapabilityDimmerComponent {
             i0.ɵɵproperty("ngModel", ctx.getValueText() >= 0 ? ctx.getValueText() : 0);
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("value", ctx.getValue() >= 0 ? ctx.getValue() : 0)("orientation", "vertical")("reversed", true)("tooltip", "hide")("min", 0)("max", 1)("step", 0.001);
-        } }, dependencies: [i3$2.DefaultValueAccessor, i3$2.CheckboxControlValueAccessor, i3$2.NgControlStatus, i3$2.NgModel, i4$1.SliderComponent], encapsulation: 2 }); }
+        } }, dependencies: [i3$2.DefaultValueAccessor, i3$2.CheckboxControlValueAccessor, i3$2.NgControlStatus, i3$2.NgModel, i3$3.SliderComponent], encapsulation: 2 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FixtureCapabilityDimmerComponent, [{
         type: Component,
@@ -8011,7 +8351,7 @@ class FixtureCapabilityPanTiltComponent {
             i0.ɵɵproperty("ngModel", ctx.getValueTextTilt() >= 0 ? ctx.getValueTextTilt() : 0);
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("value", ctx.getValueTilt() >= 0 ? ctx.getValueTilt() : 0)("orientation", "vertical")("reversed", true)("tooltip", "hide")("min", 0)("max", 1)("step", 0.001);
-        } }, dependencies: [i3$2.DefaultValueAccessor, i3$2.CheckboxControlValueAccessor, i3$2.NgControlStatus, i3$2.NgModel, i4$1.SliderComponent, i4.TranslatePipe], encapsulation: 2 }); }
+        } }, dependencies: [i3$2.DefaultValueAccessor, i3$2.CheckboxControlValueAccessor, i3$2.NgControlStatus, i3$2.NgModel, i3$3.SliderComponent, i4.TranslatePipe], encapsulation: 2 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FixtureCapabilityPanTiltComponent, [{
         type: Component,
@@ -8050,7 +8390,7 @@ function FixtureCapabilityColorWheelComponent_Conditional_10_For_2_Template(rf,
 } }
 function FixtureCapabilityColorWheelComponent_Conditional_10_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 7);
-    i0.ɵɵrepeaterCreate(1, FixtureCapabilityColorWheelComponent_Conditional_10_For_2_Template, 2, 4, "div", 8, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵrepeaterCreate(1, FixtureCapabilityColorWheelComponent_Conditional_10_For_2_Template, 2, 4, "div", 8, i0.ɵɵrepeaterTrackByIndex);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -8204,11 +8544,11 @@ class FixtureCapabilityColorWheelComponent {
             i0.ɵɵconditional(ctx.showContainer ? 9 : -1);
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.wheel ? 10 : -1);
-        } }, dependencies: [i8.NgStyle, i3$2.CheckboxControlValueAccessor, i3$2.NgControlStatus, i3$2.NgModel, i4.TranslatePipe], styles: [".color[_ngcontent-%COMP%]{box-sizing:border-box;width:50px;height:50px;border:solid 1px #ced4da;cursor:pointer}.color-selected[_ngcontent-%COMP%]{border-width:3px;border-color:#fff}.color-selected-inner[_ngcontent-%COMP%]{border:solid 1px black;height:100%;width:100%}"] }); }
+        } }, dependencies: [i9.NgStyle, i3$2.CheckboxControlValueAccessor, i3$2.NgControlStatus, i3$2.NgModel, i4.TranslatePipe], styles: [".color[_ngcontent-%COMP%]{box-sizing:border-box;width:50px;height:50px;border:solid 1px #ced4da;cursor:pointer}.color-selected[_ngcontent-%COMP%]{border-width:3px;border-color:#fff}.color-selected-inner[_ngcontent-%COMP%]{border:solid 1px black;height:100%;width:100%}"] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FixtureCapabilityColorWheelComponent, [{
         type: Component,
-        args: [{ selector: 'lib-app-fixture-capability-color-wheel', standalone: false, template: "<div class=\"card border-secondary h-100\" [class.capability-deactivated]=\"getCurrentSlotNumber() == undefined\" style=\"min-height: 200px\">\n  <div class=\"card-header\">\n    <div class=\"my-auto\">\n      <div class=\"form-check\">\n        <input\n          type=\"checkbox\"\n          class=\"form-check-input\"\n          id=\"capabilityColorWheel{{ wheelIndex }}Active\"\n          [ngModel]=\"getCurrentSlotNumber() != undefined\"\n          (ngModelChange)=\"changeActive($event)\"\n        />\n        <label class=\"form-check-label\" for=\"capabilityColorWheel{{ wheelIndex }}Active\">\n          {{ 'designer.fixture.capability-color' | translate }}\n        </label>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"card-body h-100\">\n    @if (showContainer) {\n    <div>{{ _fixtureProfile.name }} - {{ _channel.name }}</div>\n    } @if (wheel) {\n    <div class=\"d-flex\" style=\"max-width: 240px; flex-wrap: wrap\">\n      @for (slot of slotCapabilities; track slot; let i = $index) {\n      <div\n        (click)=\"selectSlotNumber(slot.capability.slotNumber)\"\n        class=\"m-1 color\"\n        [class.color-selected]=\"slotCapabilityIsSelected(slot.capability.slotNumber)\"\n        [ngStyle]=\"getCapabilityColorStyle(slot)\"\n      >\n        @if (slotCapabilityIsSelected(slot.capability.slotNumber)) {\n        <div (click)=\"selectSlotNumber(slot.capability.slotNumber)\" class=\"color-selected-inner\"></div>\n        }\n      </div>\n      }\n    </div>\n    }\n  </div>\n</div>\n", styles: [".color{box-sizing:border-box;width:50px;height:50px;border:solid 1px #ced4da;cursor:pointer}.color-selected{border-width:3px;border-color:#fff}.color-selected-inner{border:solid 1px black;height:100%;width:100%}\n"] }]
+        args: [{ selector: 'lib-app-fixture-capability-color-wheel', standalone: false, template: "<div class=\"card border-secondary h-100\" [class.capability-deactivated]=\"getCurrentSlotNumber() == undefined\" style=\"min-height: 200px\">\n  <div class=\"card-header\">\n    <div class=\"my-auto\">\n      <div class=\"form-check\">\n        <input\n          type=\"checkbox\"\n          class=\"form-check-input\"\n          id=\"capabilityColorWheel{{ wheelIndex }}Active\"\n          [ngModel]=\"getCurrentSlotNumber() != undefined\"\n          (ngModelChange)=\"changeActive($event)\"\n        />\n        <label class=\"form-check-label\" for=\"capabilityColorWheel{{ wheelIndex }}Active\">\n          {{ 'designer.fixture.capability-color' | translate }}\n        </label>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"card-body h-100\">\n    @if (showContainer) {\n    <div>{{ _fixtureProfile.name }} - {{ _channel.name }}</div>\n    } @if (wheel) {\n    <div class=\"d-flex\" style=\"max-width: 240px; flex-wrap: wrap\">\n      @for (slot of slotCapabilities; track $index; let i = $index) {\n      <div\n        (click)=\"selectSlotNumber(slot.capability.slotNumber)\"\n        class=\"m-1 color\"\n        [class.color-selected]=\"slotCapabilityIsSelected(slot.capability.slotNumber)\"\n        [ngStyle]=\"getCapabilityColorStyle(slot)\"\n      >\n        @if (slotCapabilityIsSelected(slot.capability.slotNumber)) {\n        <div (click)=\"selectSlotNumber(slot.capability.slotNumber)\" class=\"color-selected-inner\"></div>\n        }\n      </div>\n      }\n    </div>\n    }\n  </div>\n</div>\n", styles: [".color{box-sizing:border-box;width:50px;height:50px;border:solid 1px #ced4da;cursor:pointer}.color-selected{border-width:3px;border-color:#fff}.color-selected-inner{border:solid 1px black;height:100%;width:100%}\n"] }]
     }], () => [{ type: PresetService }, { type: i0.ChangeDetectorRef }, { type: FixtureService }], { profile: [{
             type: Input
         }], channel: [{
@@ -8250,7 +8590,7 @@ function FixtureCapabilityComponent_Conditional_2_Template(rf, ctx) { if (rf & 1
     i0.ɵɵelementStart(0, "div", 4);
     i0.ɵɵconditionalCreate(1, FixtureCapabilityComponent_Conditional_2_Conditional_1_Template, 2, 0, "div", 5);
     i0.ɵɵconditionalCreate(2, FixtureCapabilityComponent_Conditional_2_Conditional_2_Template, 2, 0, "div", 5);
-    i0.ɵɵrepeaterCreate(3, FixtureCapabilityComponent_Conditional_2_For_4_Template, 2, 4, "div", 5, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵrepeaterCreate(3, FixtureCapabilityComponent_Conditional_2_For_4_Template, 2, 4, "div", 5, i0.ɵɵrepeaterTrackByIndex);
     i0.ɵɵpipe(5, "keyvalue");
     i0.ɵɵconditionalCreate(6, FixtureCapabilityComponent_Conditional_2_Conditional_6_Template, 2, 0, "div", 5);
     i0.ɵɵelementStart(7, "div", 6);
@@ -8391,11 +8731,11 @@ class FixtureCapabilityComponent {
             i0.ɵɵconditional(ctx.projectService.project.fixtures.length > 0 && ctx.presetService.selectedPreset && ctx.presetService.selectedPreset.fixtures.length == 0 ? 4 : -1);
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.projectService.project.fixtures.length > 0 && ctx.presetService.selectedPreset && ctx.presetService.selectedPreset.fixtures.length > 0 && !ctx.hasCapabilityColorOrColorWheel && !ctx.hasCapabilityPanTilt ? 5 : -1);
-        } }, dependencies: [FixtureCapabilityColorComponent, FixtureCapabilityDimmerComponent, FixtureCapabilityPanTiltComponent, FixtureCapabilityColorWheelComponent, i8.KeyValuePipe, i4.TranslatePipe], encapsulation: 2, changeDetection: 0 }); }
+        } }, dependencies: [FixtureCapabilityColorComponent, FixtureCapabilityDimmerComponent, FixtureCapabilityPanTiltComponent, FixtureCapabilityColorWheelComponent, i9.KeyValuePipe, i4.TranslatePipe], encapsulation: 2, changeDetection: 0 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FixtureCapabilityComponent, [{
         type: Component,
-        args: [{ selector: 'lib-app-fixture-capability', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"card border-secondary panel h-100\" [class.card-intro-active]=\"introService.showStep('capabilities')\">\n  <div class=\"card-body capability-container d-flex h-100\" style=\"overflow-y: hidden\">\n    <!-- h-100 needs to be applied in chrome to avoid performance issues with many layouts (reflows)\n    during sliding. But the class must not be applied e.g. in Safari, because the bottom margin is not correct\n    anymore afterwards. -->\n    @if (presetService.selectedPreset) {\n    <div class=\"row m-0 pl-3\" [class.h-100]=\"isChrome()\">\n      <!-- Dimmer -->\n      <!-- the height attribute is required to avoid performance issues with many layouts (reflows)\n        in Chrome during sliding -->\n      @if (hasCapabilityDimmer) {\n      <div class=\"col col-auto p-0 my-3 mr-3\" style=\"height: calc(100% - 2rem)\">\n        <lib-app-fixture-capability-dimmer></lib-app-fixture-capability-dimmer>\n      </div>\n      }\n      <!-- Color -->\n      <!-- Also show for color wheel fixtures to approx. the color -->\n      @if (hasCapabilityColorOrColorWheel) {\n      <div class=\"col col-auto p-0 my-3 mr-3\" style=\"height: calc(100% - 2rem)\">\n        <lib-app-fixture-capability-color></lib-app-fixture-capability-color>\n      </div>\n      }\n      <!-- Color wheels -->\n      @for (entry of colorWheelChannels | keyvalue; track entry; let i = $index) {\n      <div class=\"col col-auto p-0 my-3 mr-3\" style=\"height: calc(100% - 2rem)\">\n        <lib-app-fixture-capability-color-wheel\n          [profile]=\"entry.key\"\n          [channel]=\"entry.value\"\n          [wheelIndex]=\"i\"\n          [showContainer]=\"colorWheelChannels.size > 1\"\n        ></lib-app-fixture-capability-color-wheel>\n      </div>\n      }\n      <!-- Pan/Tilt -->\n      @if (hasCapabilityPanTilt) {\n      <div class=\"col col-auto p-0 my-3 mr-3\" style=\"height: calc(100% - 2rem)\">\n        <lib-app-fixture-capability-pan-tilt></lib-app-fixture-capability-pan-tilt>\n      </div>\n      }\n      <!-- Fix spacing at the end -->\n      <div class=\"col col-auto p-0 my-3 mr-3\">&nbsp;</div>\n    </div>\n    } @if (projectService.project.fixtures.length == 0) {\n    <div class=\"m-auto\">\n      <p class=\"m-auto\" style=\"color: #717171\">{{ 'designer.fixture.no-fixtures' | translate }}</p>\n    </div>\n    } @if ( projectService.project.fixtures.length > 0 && presetService.selectedPreset && presetService.selectedPreset.fixtures.length == 0\n    ) {\n    <div class=\"m-auto\">\n      <p class=\"m-auto\" style=\"color: #717171\">{{ 'designer.fixture.no-fixtures-selected' | translate }}</p>\n    </div>\n    } @if ( projectService.project.fixtures.length > 0 && presetService.selectedPreset && presetService.selectedPreset.fixtures.length > 0\n    && !hasCapabilityColorOrColorWheel && !hasCapabilityPanTilt ) {\n    <div class=\"m-auto\">\n      <p class=\"m-auto\" style=\"color: #717171\">{{ 'designer.fixture.no-capabilities-available' | translate }}</p>\n    </div>\n    }\n  </div>\n</div>\n" }]
+        args: [{ selector: 'lib-app-fixture-capability', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"card border-secondary panel h-100\" [class.card-intro-active]=\"introService.showStep('capabilities')\">\n  <div class=\"card-body capability-container d-flex h-100\" style=\"overflow-y: hidden\">\n    <!-- h-100 needs to be applied in chrome to avoid performance issues with many layouts (reflows)\n    during sliding. But the class must not be applied e.g. in Safari, because the bottom margin is not correct\n    anymore afterwards. -->\n    @if (presetService.selectedPreset) {\n    <div class=\"row m-0 pl-3\" [class.h-100]=\"isChrome()\">\n      <!-- Dimmer -->\n      <!-- the height attribute is required to avoid performance issues with many layouts (reflows)\n        in Chrome during sliding -->\n      @if (hasCapabilityDimmer) {\n      <div class=\"col col-auto p-0 my-3 mr-3\" style=\"height: calc(100% - 2rem)\">\n        <lib-app-fixture-capability-dimmer></lib-app-fixture-capability-dimmer>\n      </div>\n      }\n      <!-- Color -->\n      <!-- Also show for color wheel fixtures to approx. the color -->\n      @if (hasCapabilityColorOrColorWheel) {\n      <div class=\"col col-auto p-0 my-3 mr-3\" style=\"height: calc(100% - 2rem)\">\n        <lib-app-fixture-capability-color></lib-app-fixture-capability-color>\n      </div>\n      }\n      <!-- Color wheels -->\n      @for (entry of colorWheelChannels | keyvalue; track $index; let i = $index) {\n      <div class=\"col col-auto p-0 my-3 mr-3\" style=\"height: calc(100% - 2rem)\">\n        <lib-app-fixture-capability-color-wheel\n          [profile]=\"entry.key\"\n          [channel]=\"entry.value\"\n          [wheelIndex]=\"i\"\n          [showContainer]=\"colorWheelChannels.size > 1\"\n        ></lib-app-fixture-capability-color-wheel>\n      </div>\n      }\n      <!-- Pan/Tilt -->\n      @if (hasCapabilityPanTilt) {\n      <div class=\"col col-auto p-0 my-3 mr-3\" style=\"height: calc(100% - 2rem)\">\n        <lib-app-fixture-capability-pan-tilt></lib-app-fixture-capability-pan-tilt>\n      </div>\n      }\n      <!-- Fix spacing at the end -->\n      <div class=\"col col-auto p-0 my-3 mr-3\">&nbsp;</div>\n    </div>\n    } @if (projectService.project.fixtures.length == 0) {\n    <div class=\"m-auto\">\n      <p class=\"m-auto\" style=\"color: #717171\">{{ 'designer.fixture.no-fixtures' | translate }}</p>\n    </div>\n    } @if ( projectService.project.fixtures.length > 0 && presetService.selectedPreset && presetService.selectedPreset.fixtures.length == 0\n    ) {\n    <div class=\"m-auto\">\n      <p class=\"m-auto\" style=\"color: #717171\">{{ 'designer.fixture.no-fixtures-selected' | translate }}</p>\n    </div>\n    } @if ( projectService.project.fixtures.length > 0 && presetService.selectedPreset && presetService.selectedPreset.fixtures.length > 0\n    && !hasCapabilityColorOrColorWheel && !hasCapabilityPanTilt ) {\n    <div class=\"m-auto\">\n      <p class=\"m-auto\" style=\"color: #717171\">{{ 'designer.fixture.no-capabilities-available' | translate }}</p>\n    </div>\n    }\n  </div>\n</div>\n" }]
     }], () => [{ type: PresetService }, { type: FixtureService }, { type: i0.ChangeDetectorRef }, { type: ProjectService }, { type: IntroService }], null); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FixtureCapabilityComponent, { className: "FixtureCapabilityComponent", filePath: "lib/fixture/fixture-capability/fixture-capability.component.ts", lineNumber: 18 }); })();
 
@@ -8448,20 +8788,20 @@ function FixtureSettingsPositionComponent_Conditional_4_Conditional_19_Template(
     i0.ɵɵelementStart(35, "div", 11)(36, "div", 12);
     i0.ɵɵtext(37, "Y");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(38, "div", 13)(39, "mv-slider", 17);
-    i0.ɵɵlistener("change", function FixtureSettingsPositionComponent_Conditional_4_Conditional_19_Template_mv_slider_change_39_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.changeRotationManual("z", $event.newValue)); });
+    i0.ɵɵelementStart(38, "div", 13)(39, "mv-slider", 14);
+    i0.ɵɵlistener("change", function FixtureSettingsPositionComponent_Conditional_4_Conditional_19_Template_mv_slider_change_39_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.changeRotationManual("y", $event.newValue)); });
     i0.ɵɵelementEnd()();
     i0.ɵɵelementStart(40, "div", 15)(41, "input", 16);
-    i0.ɵɵlistener("ngModelChange", function FixtureSettingsPositionComponent_Conditional_4_Conditional_19_Template_input_ngModelChange_41_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.changeRotationManual("z", $event)); });
+    i0.ɵɵlistener("ngModelChange", function FixtureSettingsPositionComponent_Conditional_4_Conditional_19_Template_input_ngModelChange_41_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.changeRotationManual("y", $event)); });
     i0.ɵɵelementEnd()()();
     i0.ɵɵelementStart(42, "div", 11)(43, "div", 12);
     i0.ɵɵtext(44, "Z");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(45, "div", 13)(46, "mv-slider", 14);
-    i0.ɵɵlistener("change", function FixtureSettingsPositionComponent_Conditional_4_Conditional_19_Template_mv_slider_change_46_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.changeRotationManual("y", $event.newValue)); });
+    i0.ɵɵelementStart(45, "div", 13)(46, "mv-slider", 17);
+    i0.ɵɵlistener("change", function FixtureSettingsPositionComponent_Conditional_4_Conditional_19_Template_mv_slider_change_46_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.changeRotationManual("z", $event.newValue)); });
     i0.ɵɵelementEnd()();
     i0.ɵɵelementStart(47, "div", 15)(48, "input", 16);
-    i0.ɵɵlistener("ngModelChange", function FixtureSettingsPositionComponent_Conditional_4_Conditional_19_Template_input_ngModelChange_48_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.changeRotationManual("y", $event)); });
+    i0.ɵɵlistener("ngModelChange", function FixtureSettingsPositionComponent_Conditional_4_Conditional_19_Template_input_ngModelChange_48_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.changeRotationManual("z", $event)); });
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -8482,17 +8822,17 @@ function FixtureSettingsPositionComponent_Conditional_4_Conditional_19_Template(
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(27, 40, "designer.fixture.setting-rotation"));
     i0.ɵɵadvance(6);
-    i0.ɵɵproperty("tooltip", "hide")("value", ctx_r1.rotationX ? ctx_r1.rotationX : (ctx_r1.rotationMin + ctx_r1.rotationMax) / 2)("min", ctx_r1.rotationMin)("max", ctx_r1.rotationMax)("step", 1);
+    i0.ɵɵproperty("tooltip", "hide")("value", ctx_r1.rotationX ? ctx_r1.rotationX : 0)("min", ctx_r1.rotationMin)("max", ctx_r1.rotationMax)("step", 1);
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngModel", ctx_r1.rotationX);
     i0.ɵɵadvance(5);
-    i0.ɵɵproperty("tooltip", "hide")("value", ctx_r1.rotationZ ? ctx_r1.rotationZ : (ctx_r1.rotationMin + ctx_r1.rotationMax) / 2)("min", ctx_r1.rotationMin)("max", ctx_r1.rotationMax)("step", 1);
+    i0.ɵɵproperty("tooltip", "hide")("value", ctx_r1.rotationY ? ctx_r1.rotationY : 0)("min", ctx_r1.rotationMin)("max", ctx_r1.rotationMax)("step", 1);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngModel", ctx_r1.rotationZ);
+    i0.ɵɵproperty("ngModel", ctx_r1.rotationY);
     i0.ɵɵadvance(5);
-    i0.ɵɵproperty("tooltip", "hide")("value", ctx_r1.rotationY ? ctx_r1.rotationY : (ctx_r1.rotationMin + ctx_r1.rotationMax) / 2)("min", ctx_r1.rotationMin)("max", ctx_r1.rotationMax)("step", 1);
+    i0.ɵɵproperty("tooltip", "hide")("value", ctx_r1.rotationZ ? ctx_r1.rotationZ : 0)("min", ctx_r1.rotationMin)("max", ctx_r1.rotationMax)("step", 1);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngModel", ctx_r1.rotationY);
+    i0.ɵɵproperty("ngModel", ctx_r1.rotationZ);
 } }
 function FixtureSettingsPositionComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
@@ -8551,9 +8891,10 @@ function FixtureSettingsPositionComponent_Conditional_5_Template(rf, ctx) { if (
     i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(3, 1, "designer.fixture.no-fixtures-settings-selected"));
 } }
 class FixtureSettingsPositionComponent {
-    constructor(fixtureService, presetService) {
+    constructor(fixtureService, presetService, previewService) {
         this.fixtureService = fixtureService;
         this.presetService = presetService;
+        this.previewService = previewService;
         this.selectUndefinedOptionValue = undefined;
         this.selectedPositioning = undefined;
         this.positionX = 0;
@@ -8570,11 +8911,14 @@ class FixtureSettingsPositionComponent {
         this.rotationZ = 0;
         this.rotationMin = 0;
         this.rotationMax = 360;
-        presetService.fixtureSelectionSettingsChanged.subscribe(() => {
+        this.presetService.fixtureSelectionSettingsChanged.subscribe(() => {
             this.updateSelection();
         });
     }
     ngOnInit() { }
+    updated() {
+        this.previewService.doUpdateStageAndPositions.next();
+    }
     updateSelection() {
         // get all display values for the selected settings fixtures
         this.selectedPositioning = undefined;
@@ -8667,6 +9011,7 @@ class FixtureSettingsPositionComponent {
         for (const fixture of this.fixtureService.selectedSettingsFixtures) {
             fixture.positioning = positioning;
         }
+        this.updated();
     }
     changePositionManual(position, value) {
         if (isNaN(value)) {
@@ -8704,6 +9049,7 @@ class FixtureSettingsPositionComponent {
                 }
             }
         }
+        this.updated();
     }
     changeRotationManual(rotation, value) {
         if (isNaN(value) || value < this.rotationMin || value > this.rotationMax) {
@@ -8729,8 +9075,9 @@ class FixtureSettingsPositionComponent {
                 fixture.rotationZ = +value;
             }
         }
+        this.updated();
     }
-    static { this.ɵfac = function FixtureSettingsPositionComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || FixtureSettingsPositionComponent)(i0.ɵɵdirectiveInject(FixtureService), i0.ɵɵdirectiveInject(PresetService)); }; }
+    static { this.ɵfac = function FixtureSettingsPositionComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || FixtureSettingsPositionComponent)(i0.ɵɵdirectiveInject(FixtureService), i0.ɵɵdirectiveInject(PresetService), i0.ɵɵdirectiveInject(PreviewService)); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FixtureSettingsPositionComponent, selectors: [["lib-app-fixture-settings-position"]], standalone: false, decls: 6, vars: 5, consts: [[1, "card", "border-secondary", "h-100"], [1, "card-header"], [1, "card-body", "h-100"], [1, "card-body", "h-100", "d-flex"], [1, "mb-2", 2, "width", "140px", 3, "ngModelChange", "change", "ngModel"], [3, "ngValue"], ["value", "topFront"], ["value", "bottomFront"], ["value", "topBack"], ["value", "bottomBack"], ["value", "manual"], [1, "d-flex"], [1, "my-auto", 2, "width", "20px", "float", "left"], [1, "my-auto", 2, "float", "left"], [2, "width", "80px", 3, "change", "tooltip", "value", "min", "max", "step"], [1, "my-auto"], ["type", "text", 1, "slider-input", 3, "ngModelChange", "ngModel"], [2, "width", "80px", "height", "18px", 3, "change", "tooltip", "value", "min", "max", "step"], [1, "mt-2"], [1, "m-auto", 2, "color", "#717171"]], template: function FixtureSettingsPositionComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "div", 1);
             i0.ɵɵtext(2);
@@ -8746,13 +9093,13 @@ class FixtureSettingsPositionComponent {
             i0.ɵɵconditional(ctx.fixtureService.selectedSettingsFixtures.length > 0 ? 4 : -1);
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.fixtureService.selectedSettingsFixtures.length == 0 ? 5 : -1);
-        } }, dependencies: [i3$2.NgSelectOption, i3$2.ɵNgSelectMultipleOption, i3$2.DefaultValueAccessor, i3$2.SelectControlValueAccessor, i3$2.NgControlStatus, i3$2.NgModel, i4$1.SliderComponent, i4.TranslatePipe], encapsulation: 2 }); }
+        } }, dependencies: [i3$2.NgSelectOption, i3$2.ɵNgSelectMultipleOption, i3$2.DefaultValueAccessor, i3$2.SelectControlValueAccessor, i3$2.NgControlStatus, i3$2.NgModel, i3$3.SliderComponent, i4.TranslatePipe], encapsulation: 2 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FixtureSettingsPositionComponent, [{
         type: Component,
-        args: [{ selector: 'lib-app-fixture-settings-position', standalone: false, template: "<div class=\"card border-secondary h-100\">\n  <div class=\"card-header\">\n    {{ 'designer.fixture.setting-position-title' | translate }}\n  </div>\n\n  @if (fixtureService.selectedSettingsFixtures.length > 0) {\n  <div class=\"card-body h-100\">\n    <div>\n      <select class=\"mb-2\" style=\"width: 140px\" [(ngModel)]=\"selectedPositioning\" (change)=\"changePosition($event.target.value)\">\n        <option [ngValue]=\"selectUndefinedOptionValue\"></option>\n        <option value=\"topFront\">{{ 'designer.fixture.setting-position-front-top' | translate }}</option>\n        <option value=\"bottomFront\">{{ 'designer.fixture.setting-position-front-bottom' | translate }}</option>\n        <option value=\"topBack\">{{ 'designer.fixture.setting-position-back-top' | translate }}</option>\n        <option value=\"bottomBack\">{{ 'designer.fixture.setting-position-back-bottom' | translate }}</option>\n        <option value=\"manual\">{{ 'designer.fixture.setting-position-manual' | translate }}</option>\n      </select>\n    </div>\n    @if (selectedPositioning == 'manual') {\n    <div>\n      <div>{{ 'designer.fixture.setting-position' | translate }}</div>\n      <div class=\"d-flex\">\n        <div class=\"my-auto\" style=\"width: 20px; float: left\">X</div>\n        <div class=\"my-auto\" style=\"float: left\">\n          <mv-slider\n            style=\"width: 80px\"\n            [tooltip]=\"'hide'\"\n            [value]=\"positionX ? positionX : (positionXMax + positionXMin) / 2\"\n            [min]=\"positionXMin\"\n            [max]=\"positionXMax\"\n            [step]=\"1\"\n            (change)=\"changePositionManual('x', $event.newValue)\"\n          ></mv-slider>\n        </div>\n        <div class=\"my-auto\">\n          <input [ngModel]=\"positionX\" (ngModelChange)=\"changePositionManual('x', $event)\" type=\"text\" class=\"slider-input\" />\n        </div>\n      </div>\n      <div class=\"d-flex\">\n        <div class=\"my-auto\" style=\"width: 20px; float: left\">Y</div>\n        <div class=\"my-auto\" style=\"float: left\">\n          <mv-slider\n            style=\"width: 80px; height: 18px\"\n            [tooltip]=\"'hide'\"\n            [value]=\"positionZ ? positionZ : (positionZMax + positionZMin) / 2\"\n            [min]=\"positionZMin\"\n            [max]=\"positionZMax\"\n            [step]=\"1\"\n            (change)=\"changePositionManual('z', $event.newValue)\"\n          ></mv-slider>\n        </div>\n        <div class=\"my-auto\">\n          <input [ngModel]=\"positionZ\" (ngModelChange)=\"changePositionManual('z', $event)\" type=\"text\" class=\"slider-input\" />\n        </div>\n      </div>\n      <div class=\"d-flex\">\n        <div class=\"my-auto\" style=\"width: 20px; float: left\">Z</div>\n        <div class=\"my-auto\" style=\"float: left\">\n          <mv-slider\n            style=\"width: 80px\"\n            [tooltip]=\"'hide'\"\n            [value]=\"positionY ? positionY : (positionYMax + positionYMin) / 2\"\n            [min]=\"positionYMin\"\n            [max]=\"positionYMax\"\n            [step]=\"1\"\n            (change)=\"changePositionManual('y', $event.newValue)\"\n          ></mv-slider>\n        </div>\n        <div class=\"my-auto\">\n          <input [ngModel]=\"positionY\" (ngModelChange)=\"changePositionManual('y', $event)\" type=\"text\" class=\"slider-input\" />\n        </div>\n      </div>\n      <div class=\"mt-2\">{{ 'designer.fixture.setting-rotation' | translate }}</div>\n      <div class=\"d-flex\">\n        <div class=\"my-auto\" style=\"width: 20px; float: left\">X</div>\n        <div class=\"my-auto\" style=\"float: left\">\n          <mv-slider\n            style=\"width: 80px\"\n            [tooltip]=\"'hide'\"\n            [value]=\"rotationX ? rotationX : (rotationMin + rotationMax) / 2\"\n            [min]=\"rotationMin\"\n            [max]=\"rotationMax\"\n            [step]=\"1\"\n            (change)=\"changeRotationManual('x', $event.newValue)\"\n          ></mv-slider>\n        </div>\n        <div class=\"my-auto\">\n          <input [ngModel]=\"rotationX\" (ngModelChange)=\"changeRotationManual('x', $event)\" type=\"text\" class=\"slider-input\" />\n        </div>\n      </div>\n      <div class=\"d-flex\">\n        <div class=\"my-auto\" style=\"width: 20px; float: left\">Y</div>\n        <div class=\"my-auto\" style=\"float: left\">\n          <mv-slider\n            style=\"width: 80px; height: 18px\"\n            [tooltip]=\"'hide'\"\n            [value]=\"rotationZ ? rotationZ : (rotationMin + rotationMax) / 2\"\n            [min]=\"rotationMin\"\n            [max]=\"rotationMax\"\n            [step]=\"1\"\n            (change)=\"changeRotationManual('z', $event.newValue)\"\n          ></mv-slider>\n        </div>\n        <div class=\"my-auto\">\n          <input [ngModel]=\"rotationZ\" (ngModelChange)=\"changeRotationManual('z', $event)\" type=\"text\" class=\"slider-input\" />\n        </div>\n      </div>\n      <div class=\"d-flex\">\n        <div class=\"my-auto\" style=\"width: 20px; float: left\">Z</div>\n        <div class=\"my-auto\" style=\"float: left\">\n          <mv-slider\n            style=\"width: 80px\"\n            [tooltip]=\"'hide'\"\n            [value]=\"rotationY ? rotationY : (rotationMin + rotationMax) / 2\"\n            [min]=\"rotationMin\"\n            [max]=\"rotationMax\"\n            [step]=\"1\"\n            (change)=\"changeRotationManual('y', $event.newValue)\"\n          ></mv-slider>\n        </div>\n        <div class=\"my-auto\">\n          <input [ngModel]=\"rotationY\" (ngModelChange)=\"changeRotationManual('y', $event)\" type=\"text\" class=\"slider-input\" />\n        </div>\n      </div>\n    </div>\n    }\n  </div>\n  } @if (fixtureService.selectedSettingsFixtures.length == 0) {\n  <div class=\"card-body h-100 d-flex\">\n    <p class=\"m-auto\" style=\"color: #717171\">{{ 'designer.fixture.no-fixtures-settings-selected' | translate }}</p>\n  </div>\n  }\n</div>\n" }]
-    }], () => [{ type: FixtureService }, { type: PresetService }], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FixtureSettingsPositionComponent, { className: "FixtureSettingsPositionComponent", filePath: "lib/fixture/fixture-settings/fixture-settings-position/fixture-settings-position.component.ts", lineNumber: 12 }); })();
+        args: [{ selector: 'lib-app-fixture-settings-position', standalone: false, template: "<div class=\"card border-secondary h-100\">\n  <div class=\"card-header\">\n    {{ 'designer.fixture.setting-position-title' | translate }}\n  </div>\n\n  @if (fixtureService.selectedSettingsFixtures.length > 0) {\n  <div class=\"card-body h-100\">\n    <div>\n      <select class=\"mb-2\" style=\"width: 140px\" [(ngModel)]=\"selectedPositioning\" (change)=\"changePosition($event.target.value)\">\n        <option [ngValue]=\"selectUndefinedOptionValue\"></option>\n        <option value=\"topFront\">{{ 'designer.fixture.setting-position-front-top' | translate }}</option>\n        <option value=\"bottomFront\">{{ 'designer.fixture.setting-position-front-bottom' | translate }}</option>\n        <option value=\"topBack\">{{ 'designer.fixture.setting-position-back-top' | translate }}</option>\n        <option value=\"bottomBack\">{{ 'designer.fixture.setting-position-back-bottom' | translate }}</option>\n        <option value=\"manual\">{{ 'designer.fixture.setting-position-manual' | translate }}</option>\n      </select>\n    </div>\n    @if (selectedPositioning == 'manual') {\n    <div>\n      <div>{{ 'designer.fixture.setting-position' | translate }}</div>\n      <div class=\"d-flex\">\n        <div class=\"my-auto\" style=\"width: 20px; float: left\">X</div>\n        <div class=\"my-auto\" style=\"float: left\">\n          <mv-slider\n            style=\"width: 80px\"\n            [tooltip]=\"'hide'\"\n            [value]=\"positionX ? positionX : (positionXMax + positionXMin) / 2\"\n            [min]=\"positionXMin\"\n            [max]=\"positionXMax\"\n            [step]=\"1\"\n            (change)=\"changePositionManual('x', $event.newValue)\"\n          ></mv-slider>\n        </div>\n        <div class=\"my-auto\">\n          <input [ngModel]=\"positionX\" (ngModelChange)=\"changePositionManual('x', $event)\" type=\"text\" class=\"slider-input\" />\n        </div>\n      </div>\n      <div class=\"d-flex\">\n        <div class=\"my-auto\" style=\"width: 20px; float: left\">Y</div>\n        <div class=\"my-auto\" style=\"float: left\">\n          <mv-slider\n            style=\"width: 80px; height: 18px\"\n            [tooltip]=\"'hide'\"\n            [value]=\"positionZ ? positionZ : (positionZMax + positionZMin) / 2\"\n            [min]=\"positionZMin\"\n            [max]=\"positionZMax\"\n            [step]=\"1\"\n            (change)=\"changePositionManual('z', $event.newValue)\"\n          ></mv-slider>\n        </div>\n        <div class=\"my-auto\">\n          <input [ngModel]=\"positionZ\" (ngModelChange)=\"changePositionManual('z', $event)\" type=\"text\" class=\"slider-input\" />\n        </div>\n      </div>\n      <div class=\"d-flex\">\n        <div class=\"my-auto\" style=\"width: 20px; float: left\">Z</div>\n        <div class=\"my-auto\" style=\"float: left\">\n          <mv-slider\n            style=\"width: 80px\"\n            [tooltip]=\"'hide'\"\n            [value]=\"positionY ? positionY : (positionYMax + positionYMin) / 2\"\n            [min]=\"positionYMin\"\n            [max]=\"positionYMax\"\n            [step]=\"1\"\n            (change)=\"changePositionManual('y', $event.newValue)\"\n          ></mv-slider>\n        </div>\n        <div class=\"my-auto\">\n          <input [ngModel]=\"positionY\" (ngModelChange)=\"changePositionManual('y', $event)\" type=\"text\" class=\"slider-input\" />\n        </div>\n      </div>\n      <div class=\"mt-2\">{{ 'designer.fixture.setting-rotation' | translate }}</div>\n      <div class=\"d-flex\">\n        <div class=\"my-auto\" style=\"width: 20px; float: left\">X</div>\n        <div class=\"my-auto\" style=\"float: left\">\n          <mv-slider\n            style=\"width: 80px\"\n            [tooltip]=\"'hide'\"\n            [value]=\"rotationX ? rotationX : 0\"\n            [min]=\"rotationMin\"\n            [max]=\"rotationMax\"\n            [step]=\"1\"\n            (change)=\"changeRotationManual('x', $event.newValue)\"\n          ></mv-slider>\n        </div>\n        <div class=\"my-auto\">\n          <input [ngModel]=\"rotationX\" (ngModelChange)=\"changeRotationManual('x', $event)\" type=\"text\" class=\"slider-input\" />\n        </div>\n      </div>\n      <div class=\"d-flex\">\n        <div class=\"my-auto\" style=\"width: 20px; float: left\">Y</div>\n        <div class=\"my-auto\" style=\"float: left\">\n          <mv-slider\n            style=\"width: 80px\"\n            [tooltip]=\"'hide'\"\n            [value]=\"rotationY ? rotationY : 0\"\n            [min]=\"rotationMin\"\n            [max]=\"rotationMax\"\n            [step]=\"1\"\n            (change)=\"changeRotationManual('y', $event.newValue)\"\n          ></mv-slider>\n        </div>\n        <div class=\"my-auto\">\n          <input [ngModel]=\"rotationY\" (ngModelChange)=\"changeRotationManual('y', $event)\" type=\"text\" class=\"slider-input\" />\n        </div>\n      </div>\n      <div class=\"d-flex\">\n        <div class=\"my-auto\" style=\"width: 20px; float: left\">Z</div>\n        <div class=\"my-auto\" style=\"float: left\">\n          <mv-slider\n            style=\"width: 80px; height: 18px\"\n            [tooltip]=\"'hide'\"\n            [value]=\"rotationZ ? rotationZ : 0\"\n            [min]=\"rotationMin\"\n            [max]=\"rotationMax\"\n            [step]=\"1\"\n            (change)=\"changeRotationManual('z', $event.newValue)\"\n          ></mv-slider>\n        </div>\n        <div class=\"my-auto\">\n          <input [ngModel]=\"rotationZ\" (ngModelChange)=\"changeRotationManual('z', $event)\" type=\"text\" class=\"slider-input\" />\n        </div>\n      </div>\n    </div>\n    }\n  </div>\n  } @if (fixtureService.selectedSettingsFixtures.length == 0) {\n  <div class=\"card-body h-100 d-flex\">\n    <p class=\"m-auto\" style=\"color: #717171\">{{ 'designer.fixture.no-fixtures-settings-selected' | translate }}</p>\n  </div>\n  }\n</div>\n" }]
+    }], () => [{ type: FixtureService }, { type: PresetService }, { type: PreviewService }], null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FixtureSettingsPositionComponent, { className: "FixtureSettingsPositionComponent", filePath: "lib/fixture/fixture-settings/fixture-settings-position/fixture-settings-position.component.ts", lineNumber: 13 }); })();
 
 class FixtureSettingsStageComponent {
     constructor(projectService, previewService, changeDetectorRef) {
@@ -8764,6 +9111,7 @@ class FixtureSettingsStageComponent {
     update() {
         this.previewService.updateStage();
         this.changeDetectorRef.detectChanges();
+        this.previewService.doUpdateStageAndPositions.next();
     }
     static { this.ɵfac = function FixtureSettingsStageComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || FixtureSettingsStageComponent)(i0.ɵɵdirectiveInject(ProjectService), i0.ɵɵdirectiveInject(PreviewService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FixtureSettingsStageComponent, selectors: [["lib-app-fixture-settings-stage"]], standalone: false, decls: 65, vars: 57, consts: [[1, "card", "border-secondary", "h-100"], [1, "card-header"], [1, "card-body", "h-100"], [1, "d-flex"], [1, "my-auto", 2, "width", "120px", "float", "left"], [1, "my-auto", 2, "float", "left"], [2, "width", "140px", 3, "change", "tooltip", "value", "min", "max", "step"], [1, "my-auto"], ["type", "text", "readonly", "", 1, "slider-input-readonly", 3, "ngModelChange", "ngModel"], [1, "my-auto", "ml-1", 2, "color", "darkgray"]], template: function FixtureSettingsStageComponent_Template(rf, ctx) { if (rf & 1) {
@@ -8888,7 +9236,7 @@ class FixtureSettingsStageComponent {
             i0.ɵɵproperty("tooltip", "hide")("value", ctx.projectService.project.stagePillarWidthCm)("min", 1)("max", 200)("step", 5);
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngModel", ctx.projectService.project.stagePillarWidthCm);
-        } }, dependencies: [i3$2.DefaultValueAccessor, i3$2.NgControlStatus, i3$2.NgModel, i4$1.SliderComponent, i4.TranslatePipe], encapsulation: 2 }); }
+        } }, dependencies: [i3$2.DefaultValueAccessor, i3$2.NgControlStatus, i3$2.NgModel, i3$3.SliderComponent, i4.TranslatePipe], encapsulation: 2 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FixtureSettingsStageComponent, [{
         type: Component,
@@ -8934,7 +9282,7 @@ class FixtureSettingsComponent {
     }], () => [{ type: FixtureService }, { type: PresetService }], null); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FixtureSettingsComponent, { className: "FixtureSettingsComponent", filePath: "lib/fixture/fixture-settings/fixture-settings.component.ts", lineNumber: 11 }); })();
 
-const _c0$4 = ["curveGrid"];
+const _c0$5 = ["curveGrid"];
 function EffectCurveComponent_For_74_Template(rf, ctx) { if (rf & 1) {
     const _r2 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 25)(1, "input", 27);
@@ -9015,26 +9363,19 @@ class EffectCurveComponent {
     // whether the effect is currently being edited (open) or not
     set isSelected(value) {
         if (value) {
-            // start the update timer
-            if (!this.gridUpdateSubscription) {
-                this.gridUpdateSubscription = timer(0, 15).subscribe(() => {
-                    this.redraw();
-                });
-            }
+            this.startUpdateTimer();
         }
         else {
-            // stop the update timer
-            if (this.gridUpdateSubscription) {
-                this.gridUpdateSubscription.unsubscribe();
-                this.gridUpdateSubscription = undefined;
-            }
+            this.stopUpdateTimer();
         }
     }
-    constructor(presetService, animationService, fixtureService, translate) {
+    constructor(presetService, animationService, fixtureService, translate, effectService, ngZone) {
         this.presetService = presetService;
         this.animationService = animationService;
         this.fixtureService = fixtureService;
         this.translate = translate;
+        this.effectService = effectService;
+        this.ngZone = ngZone;
         this.lengthMillisMin = 20;
         this.lengthMillisMax = 8000;
         this.amplitudeMin = 0;
@@ -9055,6 +9396,17 @@ class EffectCurveComponent {
             this.updateCapabilitiesAndChannels();
         });
         this.updateCapabilitiesAndChannels();
+        this.effectsOpenChangedSubscription = this.effectService.effectsOpenChanged.subscribe(() => {
+            if (this.effectService.effectsOpen) {
+                this.startUpdateTimer();
+            }
+            else {
+                this.stopUpdateTimer();
+            }
+        });
+        if (this.effectService.effectsOpen) {
+            this.startUpdateTimer();
+        }
     }
     ngOnInit() {
         const canvas = this.curveGrid.nativeElement;
@@ -9063,6 +9415,26 @@ class EffectCurveComponent {
         this.maxHeight = canvas.height;
         this.redraw();
     }
+    ngOnDestroy() {
+        this.stopUpdateTimer();
+        this.effectsOpenChangedSubscription.unsubscribe();
+    }
+    startUpdateTimer() {
+        if (!this.gridUpdateSubscription) {
+            // Avoid triggering change detection with each animation frame -> run outside zone
+            this.ngZone.runOutsideAngular(() => {
+                this.gridUpdateSubscription = timer(0, 15).subscribe(() => {
+                    this.redraw();
+                });
+            });
+        }
+    }
+    stopUpdateTimer() {
+        if (this.gridUpdateSubscription) {
+            this.gridUpdateSubscription.unsubscribe();
+            this.gridUpdateSubscription = undefined;
+        }
+    }
     drawCurrentValue(currMillis, radius, lineWidth, durationMillis, maxHeight) {
         const currVal = 1 - this.curve.getValueAtMillis(currMillis);
         const x = (this.maxWidth * (currMillis % durationMillis)) / durationMillis;
@@ -9300,9 +9672,9 @@ class EffectCurveComponent {
             this.presetService.previewLive();
         }
     }
-    static { this.ɵfac = function EffectCurveComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || EffectCurveComponent)(i0.ɵɵdirectiveInject(PresetService), i0.ɵɵdirectiveInject(AnimationService), i0.ɵɵdirectiveInject(FixtureService), i0.ɵɵdirectiveInject(i4.TranslateService)); }; }
+    static { this.ɵfac = function EffectCurveComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || EffectCurveComponent)(i0.ɵɵdirectiveInject(PresetService), i0.ɵɵdirectiveInject(AnimationService), i0.ɵɵdirectiveInject(FixtureService), i0.ɵɵdirectiveInject(i4.TranslateService), i0.ɵɵdirectiveInject(EffectService), i0.ɵɵdirectiveInject(i0.NgZone)); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: EffectCurveComponent, selectors: [["lib-app-effect-curve"]], viewQuery: function EffectCurveComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$4, 7);
+            i0.ɵɵviewQuery(_c0$5, 7);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.curveGrid = _t.first);
@@ -9397,7 +9769,7 @@ class EffectCurveComponent {
             i0.ɵɵelement(69, "i", 21);
             i0.ɵɵelementEnd()()();
             i0.ɵɵelementStart(70, "div", 22)(71, "div", 23)(72, "div", 24);
-            i0.ɵɵrepeaterCreate(73, EffectCurveComponent_For_74_Template, 5, 8, "div", 25, i0.ɵɵrepeaterTrackByIdentity);
+            i0.ɵɵrepeaterCreate(73, EffectCurveComponent_For_74_Template, 5, 8, "div", 25, i0.ɵɵrepeaterTrackByIndex);
             i0.ɵɵelementEnd();
             i0.ɵɵelementStart(75, "div", 26);
             i0.ɵɵconditionalCreate(76, EffectCurveComponent_Conditional_76_Template, 4, 0, "div");
@@ -9470,12 +9842,12 @@ class EffectCurveComponent {
             i0.ɵɵconditional(ctx.availableProfiles.length > 1 ? 76 : -1);
             i0.ɵɵadvance();
             i0.ɵɵrepeater(i0.ɵɵpipeBind1(79, 81, ctx.availableChannels));
-        } }, dependencies: [i3$2.NgSelectOption, i3$2.ɵNgSelectMultipleOption, i3$2.DefaultValueAccessor, i3$2.CheckboxControlValueAccessor, i3$2.SelectControlValueAccessor, i3$2.NgControlStatus, i3$2.NgModel, i4$1.SliderComponent, i11.PopoverDirective, i8.AsyncPipe, i8.KeyValuePipe, i4.TranslatePipe], styles: [".curve-grid[_ngcontent-%COMP%]{background-color:#000;border:1px solid white}.applying-to[_ngcontent-%COMP%]{overflow-y:scroll;height:130px!important;background-color:#222;border:1px solid white;padding:.5rem}.applying-to[_ngcontent-%COMP%]   .form-check[_ngcontent-%COMP%]:last-child{margin-bottom:.5rem}"] }); }
+        } }, dependencies: [i3$2.NgSelectOption, i3$2.ɵNgSelectMultipleOption, i3$2.DefaultValueAccessor, i3$2.CheckboxControlValueAccessor, i3$2.SelectControlValueAccessor, i3$2.NgControlStatus, i3$2.NgModel, i3$3.SliderComponent, i11.PopoverDirective, i9.AsyncPipe, i9.KeyValuePipe, i4.TranslatePipe], styles: [".curve-grid[_ngcontent-%COMP%]{background-color:#000;border:1px solid white}.applying-to[_ngcontent-%COMP%]{overflow-y:scroll;height:130px!important;background-color:#222;border:1px solid white;padding:.5rem}.applying-to[_ngcontent-%COMP%]   .form-check[_ngcontent-%COMP%]:last-child{margin-bottom:.5rem}"] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(EffectCurveComponent, [{
         type: Component,
-        args: [{ selector: 'lib-app-effect-curve', standalone: false, template: "<div class=\"mr-3\" style=\"float: left\">\n  <div class=\"mb-2\">\n    <select\n      [ngModel]=\"curve.curveType\"\n      (ngModelChange)=\"curve.curveType = $event; presetService.previewLive()\"\n      style=\"width: 200px; height: 20px\"\n    >\n      <option [value]=\"'sine'\">\n        {{ 'designer.effect.curve-sine' | translate }}\n      </option>\n      <option [value]=\"'square'\">\n        {{ 'designer.effect.curve-square' | translate }}\n      </option>\n      <!-- <option [value]=\"'triangle'\">\n    {{ 'designer.effect.curve-triangle' | translate }}</option>\n    <option [value]=\"'sawtooth'\">\n    {{ 'designer.effect.curve-sawtooth' | translate }}</option>\n    <option [value]=\"'reverse-sawtooth'\">\n    {{ 'designer.effect.curve-reverse-sawtooth' | translate }}</option> -->\n    </select>\n  </div>\n  <div>\n    <canvas #curveGrid class=\"curve-grid\" width=\"200\" height=\"100\" viewBox=\"150 -75 4850 5150\" preserveAspectRatio=\"none\"></canvas>\n  </div>\n</div>\n\n<div class=\"mr-4\" style=\"float: left\">\n  <div class=\"d-flex\">\n    <div class=\"my-auto\" style=\"width: 100px; float: left\">\n      {{ 'designer.effect.curve-length' | translate }}\n    </div>\n    <div class=\"my-auto\" style=\"float: left\">\n      <mv-slider\n        (change)=\"redraw(); presetService.previewLive()\"\n        [(value)]=\"curve.lengthMillis\"\n        style=\"width: 80px\"\n        [tooltip]=\"'hide'\"\n        [value]=\"0\"\n        [min]=\"lengthMillisMin\"\n        [max]=\"lengthMillisMax\"\n        [step]=\"1\"\n      ></mv-slider>\n    </div>\n    <div class=\"my-auto\">\n      <input type=\"text\" class=\"slider-input\" [ngModel]=\"curve.lengthMillis\" (ngModelChange)=\"setLengthMillis($event); redraw()\" />\n    </div>\n    <div class=\"my-auto ml-1\">\n      {{ 'designer.misc.ms' | translate }}\n    </div>\n  </div>\n\n  <div class=\"d-flex\">\n    <div class=\"my-auto\" style=\"width: 100px; float: left\">\n      {{ 'designer.effect.curve-amplitude' | translate }}\n    </div>\n    <div class=\"my-auto\" style=\"float: left\">\n      <mv-slider\n        (change)=\"redraw(); presetService.previewLive()\"\n        [(value)]=\"curve.amplitude\"\n        style=\"width: 80px\"\n        [tooltip]=\"'hide'\"\n        [min]=\"amplitudeMin\"\n        [max]=\"amplitudeMax\"\n        [step]=\"0.01\"\n      ></mv-slider>\n    </div>\n    <div class=\"my-auto\">\n      <input type=\"text\" class=\"slider-input\" [ngModel]=\"curve.amplitude\" (ngModelChange)=\"setAmplitude($event); redraw()\" />\n    </div>\n  </div>\n\n  <div class=\"d-flex\">\n    <div class=\"my-auto\" style=\"width: 100px; float: left\">\n      {{ 'designer.effect.curve-position' | translate }}\n    </div>\n    <div class=\"my-auto\" style=\"float: left\">\n      <mv-slider\n        (change)=\"redraw(); presetService.previewLive()\"\n        [(value)]=\"curve.position\"\n        style=\"width: 80px; height: 18px\"\n        [tooltip]=\"'hide'\"\n        [min]=\"percentageMin\"\n        [max]=\"percentageMax\"\n        [step]=\"0.01\"\n      >\n      </mv-slider>\n    </div>\n    <div class=\"my-auto\">\n      <input type=\"text\" class=\"slider-input\" [ngModel]=\"curve.position\" (ngModelChange)=\"setPosition($event); redraw()\" />\n    </div>\n  </div>\n\n  <div class=\"d-flex\">\n    <div class=\"my-auto\" style=\"width: 100px; float: left\">\n      {{ 'designer.effect.curve-phase' | translate }}\n    </div>\n    <div class=\"my-auto\" style=\"float: left\">\n      <mv-slider\n        (change)=\"redraw(); presetService.previewLive()\"\n        [(value)]=\"curve.phaseMillis\"\n        style=\"width: 80px; height: 18px\"\n        [tooltip]=\"'hide'\"\n        [min]=\"phaseMillisMin\"\n        [max]=\"phaseMillisMax\"\n        [step]=\"1\"\n      ></mv-slider>\n    </div>\n    <div class=\"my-auto\">\n      <input type=\"text\" class=\"slider-input\" [ngModel]=\"curve.phaseMillis\" (ngModelChange)=\"setPhaseMillis($event); redraw()\" />\n    </div>\n    <div class=\"my-auto ml-1\">\n      {{ 'designer.misc.ms' | translate }}\n    </div>\n  </div>\n\n  <div class=\"d-flex\">\n    <div class=\"my-auto\" style=\"width: 100px; float: left\">\n      {{ 'designer.effect.curve-chase' | translate }}\n    </div>\n    <div class=\"my-auto\" style=\"float: left\">\n      <mv-slider\n        (change)=\"redraw(); presetService.previewLive()\"\n        [(value)]=\"curve.phasingMillis\"\n        style=\"width: 80px; height: 18px\"\n        [tooltip]=\"'hide'\"\n        [min]=\"phasingMillisMin\"\n        [max]=\"phasingMillisMax\"\n        [step]=\"1\"\n      ></mv-slider>\n    </div>\n    <div class=\"my-auto\">\n      <input type=\"text\" class=\"slider-input\" [ngModel]=\"curve.phasingMillis\" (ngModelChange)=\"setPhasingMillis($event); redraw()\" />\n    </div>\n    <div class=\"my-auto ml-1\">\n      {{ 'designer.misc.ms' | translate }}\n    </div>\n  </div>\n</div>\n\n<!-- Menu for the capabilities and channels-->\n<div class=\"col col-auto p-0\" style=\"margin-right: 1px; width: 50px; float: left\">\n  <div class=\"nav flex-column nav-pills\" id=\"v-pills-tab\" role=\"tablist\" aria-orientation=\"vertical\">\n    <a\n      class=\"nav-link px-3 active\"\n      id=\"v-pills-effect-capabilities-tab\"\n      popover=\"{{ 'designer.misc.capabilities' | translate }}\"\n      container=\"body\"\n      placement=\"right\"\n      triggers=\"mouseenter:mouseleave\"\n      data-toggle=\"pill\"\n      href=\"#v-pills-effect-capabilities-{{ curve?.uuid }}\"\n      role=\"tab\"\n      aria-controls=\"v-pills-capabilities\"\n      aria-selected=\"true\"\n    >\n      <i class=\"fa fa-bolt fa-fw\" aria-hidden=\"true\"></i>\n    </a>\n    <a\n      class=\"nav-link px-3\"\n      id=\"v-pills-effect-channels-tab\"\n      popover=\"{{ 'designer.misc.channels' | translate }}\"\n      container=\"body\"\n      placement=\"right\"\n      triggers=\"mouseenter:mouseleave\"\n      data-toggle=\"pill\"\n      href=\"#v-pills-effect-channels-{{ curve?.uuid }}\"\n      role=\"tab\"\n      aria-controls=\"v-pills-channels\"\n      aria-selected=\"false\"\n    >\n      <i class=\"fa fa-sliders fa-fw\" aria-hidden=\"true\"></i>\n    </a>\n  </div>\n</div>\n\n<div class=\"h-100\" class=\"applying-to\">\n  <div class=\"tab-content h-100\" id=\"v-pills-tabContent\">\n    <div class=\"tab-pane h-100 show active\" id=\"v-pills-effect-capabilities-{{ curve?.uuid }}\" role=\"tabpanel\">\n      <!-- Capabilities-->\n      @for (capability of availableCapabilities; track capability; let i = $index) {\n      <div class=\"form-check\">\n        <input\n          type=\"checkbox\"\n          class=\"form-check-input\"\n          id=\"capability_{{ curve?.uuid + '_' + i }}\"\n          [ngModel]=\"capabilityChecked(capability)\"\n          (change)=\"toggleCapability($event, capability)\"\n        />\n        <label class=\"form-check-label\" for=\"capability_{{ curve?.uuid + '_' + i }}\">{{ getCapabilityName(capability) | async }}</label>\n      </div>\n      }\n    </div>\n    <div class=\"tab-pane h-100 show\" id=\"v-pills-effect-channels-{{ curve?.uuid }}\" role=\"tabpanel\">\n      <!-- channels -->\n\n      <!-- profile selection -->\n      @if (availableProfiles.length > 1) {\n      <div>\n        @for (profile of availableProfiles; track profile; let i = $index) {\n        <div class=\"form-check\">\n          <input\n            type=\"checkbox\"\n            class=\"form-check-input\"\n            id=\"channel_profile_{{ curve?.uuid }}_{{ profile.uuid }}\"\n            [ngModel]=\"selectedProfiles.indexOf(profile) >= 0\"\n            (change)=\"changeProfileSelection($event, profile)\"\n          />\n          <label class=\"form-check-label\" for=\"channel_profile_{{ curve?.uuid }}_{{ profile.uuid }}\">{{ profile.name }}</label>\n        </div>\n        }\n        <hr class=\"my-1\" style=\"border-color: white\" />\n      </div>\n      }\n\n      <!-- channels -->\n      @for (entry of availableChannels | keyvalue; track entry; let i = $index) { @for (channel of entry.value; track channel; let j =\n      $index) {\n      <div class=\"form-check\">\n        <input\n          type=\"checkbox\"\n          class=\"form-check-input\"\n          id=\"channel_{{ curve?.uuid }}_{{ i }}_{{ j }}\"\n          [ngModel]=\"channelChecked(entry.key, channel)\"\n          (change)=\"toggleChannel($event, entry.key, channel)\"\n        />\n        <label class=\"form-check-label\" for=\"channel_{{ curve?.uuid }}_{{ i }}_{{ j }}\">{{\n          getChannelName(entry.key.name, channel.name)\n        }}</label>\n      </div>\n      } }\n    </div>\n  </div>\n</div>\n", styles: [".curve-grid{background-color:#000;border:1px solid white}.applying-to{overflow-y:scroll;height:130px!important;background-color:#222;border:1px solid white;padding:.5rem}.applying-to .form-check:last-child{margin-bottom:.5rem}\n"] }]
-    }], () => [{ type: PresetService }, { type: AnimationService }, { type: FixtureService }, { type: i4.TranslateService }], { curve: [{
+        args: [{ selector: 'lib-app-effect-curve', standalone: false, template: "<div class=\"mr-3\" style=\"float: left\">\n  <div class=\"mb-2\">\n    <select\n      [ngModel]=\"curve.curveType\"\n      (ngModelChange)=\"curve.curveType = $event; presetService.previewLive()\"\n      style=\"width: 200px; height: 20px\"\n    >\n      <option [value]=\"'sine'\">\n        {{ 'designer.effect.curve-sine' | translate }}\n      </option>\n      <option [value]=\"'square'\">\n        {{ 'designer.effect.curve-square' | translate }}\n      </option>\n      <!-- <option [value]=\"'triangle'\">\n    {{ 'designer.effect.curve-triangle' | translate }}</option>\n    <option [value]=\"'sawtooth'\">\n    {{ 'designer.effect.curve-sawtooth' | translate }}</option>\n    <option [value]=\"'reverse-sawtooth'\">\n    {{ 'designer.effect.curve-reverse-sawtooth' | translate }}</option> -->\n    </select>\n  </div>\n  <div>\n    <canvas #curveGrid class=\"curve-grid\" width=\"200\" height=\"100\" viewBox=\"150 -75 4850 5150\" preserveAspectRatio=\"none\"></canvas>\n  </div>\n</div>\n\n<div class=\"mr-4\" style=\"float: left\">\n  <div class=\"d-flex\">\n    <div class=\"my-auto\" style=\"width: 100px; float: left\">\n      {{ 'designer.effect.curve-length' | translate }}\n    </div>\n    <div class=\"my-auto\" style=\"float: left\">\n      <mv-slider\n        (change)=\"redraw(); presetService.previewLive()\"\n        [(value)]=\"curve.lengthMillis\"\n        style=\"width: 80px\"\n        [tooltip]=\"'hide'\"\n        [value]=\"0\"\n        [min]=\"lengthMillisMin\"\n        [max]=\"lengthMillisMax\"\n        [step]=\"1\"\n      ></mv-slider>\n    </div>\n    <div class=\"my-auto\">\n      <input type=\"text\" class=\"slider-input\" [ngModel]=\"curve.lengthMillis\" (ngModelChange)=\"setLengthMillis($event); redraw()\" />\n    </div>\n    <div class=\"my-auto ml-1\">\n      {{ 'designer.misc.ms' | translate }}\n    </div>\n  </div>\n\n  <div class=\"d-flex\">\n    <div class=\"my-auto\" style=\"width: 100px; float: left\">\n      {{ 'designer.effect.curve-amplitude' | translate }}\n    </div>\n    <div class=\"my-auto\" style=\"float: left\">\n      <mv-slider\n        (change)=\"redraw(); presetService.previewLive()\"\n        [(value)]=\"curve.amplitude\"\n        style=\"width: 80px\"\n        [tooltip]=\"'hide'\"\n        [min]=\"amplitudeMin\"\n        [max]=\"amplitudeMax\"\n        [step]=\"0.01\"\n      ></mv-slider>\n    </div>\n    <div class=\"my-auto\">\n      <input type=\"text\" class=\"slider-input\" [ngModel]=\"curve.amplitude\" (ngModelChange)=\"setAmplitude($event); redraw()\" />\n    </div>\n  </div>\n\n  <div class=\"d-flex\">\n    <div class=\"my-auto\" style=\"width: 100px; float: left\">\n      {{ 'designer.effect.curve-position' | translate }}\n    </div>\n    <div class=\"my-auto\" style=\"float: left\">\n      <mv-slider\n        (change)=\"redraw(); presetService.previewLive()\"\n        [(value)]=\"curve.position\"\n        style=\"width: 80px; height: 18px\"\n        [tooltip]=\"'hide'\"\n        [min]=\"percentageMin\"\n        [max]=\"percentageMax\"\n        [step]=\"0.01\"\n      >\n      </mv-slider>\n    </div>\n    <div class=\"my-auto\">\n      <input type=\"text\" class=\"slider-input\" [ngModel]=\"curve.position\" (ngModelChange)=\"setPosition($event); redraw()\" />\n    </div>\n  </div>\n\n  <div class=\"d-flex\">\n    <div class=\"my-auto\" style=\"width: 100px; float: left\">\n      {{ 'designer.effect.curve-phase' | translate }}\n    </div>\n    <div class=\"my-auto\" style=\"float: left\">\n      <mv-slider\n        (change)=\"redraw(); presetService.previewLive()\"\n        [(value)]=\"curve.phaseMillis\"\n        style=\"width: 80px; height: 18px\"\n        [tooltip]=\"'hide'\"\n        [min]=\"phaseMillisMin\"\n        [max]=\"phaseMillisMax\"\n        [step]=\"1\"\n      ></mv-slider>\n    </div>\n    <div class=\"my-auto\">\n      <input type=\"text\" class=\"slider-input\" [ngModel]=\"curve.phaseMillis\" (ngModelChange)=\"setPhaseMillis($event); redraw()\" />\n    </div>\n    <div class=\"my-auto ml-1\">\n      {{ 'designer.misc.ms' | translate }}\n    </div>\n  </div>\n\n  <div class=\"d-flex\">\n    <div class=\"my-auto\" style=\"width: 100px; float: left\">\n      {{ 'designer.effect.curve-chase' | translate }}\n    </div>\n    <div class=\"my-auto\" style=\"float: left\">\n      <mv-slider\n        (change)=\"redraw(); presetService.previewLive()\"\n        [(value)]=\"curve.phasingMillis\"\n        style=\"width: 80px; height: 18px\"\n        [tooltip]=\"'hide'\"\n        [min]=\"phasingMillisMin\"\n        [max]=\"phasingMillisMax\"\n        [step]=\"1\"\n      ></mv-slider>\n    </div>\n    <div class=\"my-auto\">\n      <input type=\"text\" class=\"slider-input\" [ngModel]=\"curve.phasingMillis\" (ngModelChange)=\"setPhasingMillis($event); redraw()\" />\n    </div>\n    <div class=\"my-auto ml-1\">\n      {{ 'designer.misc.ms' | translate }}\n    </div>\n  </div>\n</div>\n\n<!-- Menu for the capabilities and channels-->\n<div class=\"col col-auto p-0\" style=\"margin-right: 1px; width: 50px; float: left\">\n  <div class=\"nav flex-column nav-pills\" id=\"v-pills-tab\" role=\"tablist\" aria-orientation=\"vertical\">\n    <a\n      class=\"nav-link px-3 active\"\n      id=\"v-pills-effect-capabilities-tab\"\n      popover=\"{{ 'designer.misc.capabilities' | translate }}\"\n      container=\"body\"\n      placement=\"right\"\n      triggers=\"mouseenter:mouseleave\"\n      data-toggle=\"pill\"\n      href=\"#v-pills-effect-capabilities-{{ curve?.uuid }}\"\n      role=\"tab\"\n      aria-controls=\"v-pills-capabilities\"\n      aria-selected=\"true\"\n    >\n      <i class=\"fa fa-bolt fa-fw\" aria-hidden=\"true\"></i>\n    </a>\n    <a\n      class=\"nav-link px-3\"\n      id=\"v-pills-effect-channels-tab\"\n      popover=\"{{ 'designer.misc.channels' | translate }}\"\n      container=\"body\"\n      placement=\"right\"\n      triggers=\"mouseenter:mouseleave\"\n      data-toggle=\"pill\"\n      href=\"#v-pills-effect-channels-{{ curve?.uuid }}\"\n      role=\"tab\"\n      aria-controls=\"v-pills-channels\"\n      aria-selected=\"false\"\n    >\n      <i class=\"fa fa-sliders fa-fw\" aria-hidden=\"true\"></i>\n    </a>\n  </div>\n</div>\n\n<div class=\"h-100\" class=\"applying-to\">\n  <div class=\"tab-content h-100\" id=\"v-pills-tabContent\">\n    <div class=\"tab-pane h-100 show active\" id=\"v-pills-effect-capabilities-{{ curve?.uuid }}\" role=\"tabpanel\">\n      <!-- Capabilities-->\n      @for (capability of availableCapabilities; track $index; let i = $index) {\n      <div class=\"form-check\">\n        <input\n          type=\"checkbox\"\n          class=\"form-check-input\"\n          id=\"capability_{{ curve?.uuid + '_' + i }}\"\n          [ngModel]=\"capabilityChecked(capability)\"\n          (change)=\"toggleCapability($event, capability)\"\n        />\n        <label class=\"form-check-label\" for=\"capability_{{ curve?.uuid + '_' + i }}\">{{ getCapabilityName(capability) | async }}</label>\n      </div>\n      }\n    </div>\n    <div class=\"tab-pane h-100 show\" id=\"v-pills-effect-channels-{{ curve?.uuid }}\" role=\"tabpanel\">\n      <!-- channels -->\n\n      <!-- profile selection -->\n      @if (availableProfiles.length > 1) {\n      <div>\n        @for (profile of availableProfiles; track profile; let i = $index) {\n        <div class=\"form-check\">\n          <input\n            type=\"checkbox\"\n            class=\"form-check-input\"\n            id=\"channel_profile_{{ curve?.uuid }}_{{ profile.uuid }}\"\n            [ngModel]=\"selectedProfiles.indexOf(profile) >= 0\"\n            (change)=\"changeProfileSelection($event, profile)\"\n          />\n          <label class=\"form-check-label\" for=\"channel_profile_{{ curve?.uuid }}_{{ profile.uuid }}\">{{ profile.name }}</label>\n        </div>\n        }\n        <hr class=\"my-1\" style=\"border-color: white\" />\n      </div>\n      }\n\n      <!-- channels -->\n      @for (entry of availableChannels | keyvalue; track entry; let i = $index) { @for (channel of entry.value; track channel; let j =\n      $index) {\n      <div class=\"form-check\">\n        <input\n          type=\"checkbox\"\n          class=\"form-check-input\"\n          id=\"channel_{{ curve?.uuid }}_{{ i }}_{{ j }}\"\n          [ngModel]=\"channelChecked(entry.key, channel)\"\n          (change)=\"toggleChannel($event, entry.key, channel)\"\n        />\n        <label class=\"form-check-label\" for=\"channel_{{ curve?.uuid }}_{{ i }}_{{ j }}\">{{\n          getChannelName(entry.key.name, channel.name)\n        }}</label>\n      </div>\n      } }\n    </div>\n  </div>\n</div>\n", styles: [".curve-grid{background-color:#000;border:1px solid white}.applying-to{overflow-y:scroll;height:130px!important;background-color:#222;border:1px solid white;padding:.5rem}.applying-to .form-check:last-child{margin-bottom:.5rem}\n"] }]
+    }], () => [{ type: PresetService }, { type: AnimationService }, { type: FixtureService }, { type: i4.TranslateService }, { type: EffectService }, { type: i0.NgZone }], { curve: [{
             type: Input
         }], isSelected: [{
             type: Input
@@ -9483,9 +9855,9 @@ class EffectCurveComponent {
             type: ViewChild,
             args: ['curveGrid', { static: true }]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(EffectCurveComponent, { className: "EffectCurveComponent", filePath: "lib/effect/effect-curve/effect-curve.component.ts", lineNumber: 20 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(EffectCurveComponent, { className: "EffectCurveComponent", filePath: "lib/effect/effect-curve/effect-curve.component.ts", lineNumber: 21 }); })();
 
-const _c0$3 = ["panTiltGrid"];
+const _c0$4 = ["panTiltGrid"];
 class EffectPanTiltComponent {
     constructor() {
         this.points = [
@@ -9501,7 +9873,7 @@ class EffectPanTiltComponent {
     ngOnInit() { }
     static { this.ɵfac = function EffectPanTiltComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || EffectPanTiltComponent)(); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: EffectPanTiltComponent, selectors: [["lib-app-effect-pan-tilt"]], viewQuery: function EffectPanTiltComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$3, 5);
+            i0.ɵɵviewQuery(_c0$4, 5);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.panTiltGrid = _t.first);
@@ -9866,6 +10238,7 @@ class PresetSettingsComponent {
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PresetSettingsComponent, { className: "PresetSettingsComponent", filePath: "lib/preset/preset-settings/preset-settings.component.ts", lineNumber: 11 }); })();
 
+const _c0$3 = ["tree"];
 function PresetComponent_For_13_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 9);
@@ -9899,8 +10272,89 @@ class PresetComponent {
         this.projectService = projectService;
         this.introService = introService;
         this.modalService = modalService;
+        let actionMapping = {
+            mouse: {
+                click: (tree, node, $event) => {
+                    // block activation for folders (or any condition you want)
+                    if (node.data.isFolder) {
+                        // optional: make click expand/collapse instead
+                        TREE_ACTIONS.TOGGLE_EXPANDED(tree, node, $event);
+                        return;
+                    }
+                    TREE_ACTIONS.ACTIVATE(tree, node, $event);
+                },
+            },
+            keys: {
+                [KEYS.ENTER]: (tree, node, $event) => {
+                    if (!node.data.isFolder)
+                        TREE_ACTIONS.ACTIVATE(tree, node, $event);
+                },
+                [KEYS.SPACE]: (tree, node, $event) => {
+                    if (!node.data.isFolder)
+                        TREE_ACTIONS.ACTIVATE(tree, node, $event);
+                },
+            },
+        };
+        this.treeOptions = {
+            displayField: 'name',
+            isExpandedField: 'expanded',
+            idField: 'uuid',
+            hasChildrenField: 'nodes',
+            // actionMapping: {
+            //   mouse: {
+            //     dblClick: (tree, node, $event) => {
+            //       if (node.hasChildren) TREE_ACTIONS.TOGGLE_EXPANDED(tree, node, $event);
+            //     }
+            //   },
+            //   keys: {
+            //     [KEYS.ENTER]: (tree, node, $event) => {
+            //       node.expandAll();
+            //     }
+            //   }
+            // },
+            actionMapping: actionMapping,
+            nodeHeight: 23,
+            allowDrag: (node) => {
+                return true;
+            },
+            allowDrop: (node, target) => {
+                // only allow dropping into folders or to the root level
+                return !target.parent.data.id || target.parent.data.isFolder;
+            },
+            allowDragoverStyling: true,
+            levelPadding: 10,
+            useVirtualScroll: true,
+            animateExpand: true,
+            scrollOnActivate: true,
+            animateSpeed: 10,
+            animateAcceleration: 1.2,
+            scrollContainer: document.documentElement,
+        };
+        this.treeNodes = [
+            {
+                id: 1,
+                name: 'root1',
+                isFolder: true,
+                children: [
+                    { id: 2, name: 'child1', isFolder: false },
+                    { id: 3, name: 'child2', isFolder: false },
+                ],
+            },
+            {
+                id: 4,
+                name: 'root1',
+                isFolder: true,
+                children: [
+                    { id: 5, name: 'child1', isFolder: false },
+                    { id: 6, name: 'child2', isFolder: false },
+                ],
+            },
+        ];
     }
     ngOnInit() { }
+    onActivate(event) {
+        console.log(event);
+    }
     selectPreset(index) {
         this.projectService.project.previewPreset = true;
         this.presetService.selectPreset(index);
@@ -9948,7 +10402,12 @@ class PresetComponent {
         });
     }
     static { this.ɵfac = function PresetComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PresetComponent)(i0.ɵɵdirectiveInject(PresetService), i0.ɵɵdirectiveInject(SceneService), i0.ɵɵdirectiveInject(ProjectService), i0.ɵɵdirectiveInject(IntroService), i0.ɵɵdirectiveInject(i1$1.BsModalService)); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PresetComponent, selectors: [["lib-app-preset"]], standalone: false, decls: 14, vars: 6, consts: [[1, "card", "border-secondary", "h-100", "panel", "card-intro-preset", "card-intro-active"], [1, "card-header", "d-flex"], [1, "ml-auto"], ["href", "#", 1, "btn", "btn-secondary", "m-0,", "p-0", 3, "click"], ["aria-hidden", "true", 1, "fa", "fa-minus-circle", "fa-fw"], ["aria-hidden", "true", 1, "fa", "fa-plus-circle", "fa-fw"], [1, "card-body", "h-100", "p-0"], [1, "list-group", 3, "sortablejs"], [1, "list-group-item", 3, "active-light", "active", "inactive-list-item"], [1, "list-group-item", 3, "click"], [1, "row", "d-flex", 2, "cursor", "pointer"], [1, "col-auto", "list-sort-handle", "my-auto", 2, "cursor", "move", "cursor", "-webkit-grabbing"], ["aria-hidden", "true", 1, "fa", "fa-bars"], [1, "form-check"], ["type", "checkbox", "id", "active", 1, "form-check-input", 3, "ngModelChange", "click", "disabled", "ngModel"], [1, "my-auto", "ml-auto", "mr-2", "d-flex"], ["type", "button", 1, "btn", "btn-secondary", "btn-sm", "py-0", "px-1", 3, "click"]], template: function PresetComponent_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PresetComponent, selectors: [["lib-app-preset"]], viewQuery: function PresetComponent_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuery(_c0$3, 5);
+        } if (rf & 2) {
+            let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.tree = _t.first);
+        } }, standalone: false, decls: 14, vars: 6, consts: [[1, "card", "border-secondary", "h-100", "panel", "card-intro-preset", "card-intro-active"], [1, "card-header", "d-flex"], [1, "ml-auto"], ["href", "#", 1, "btn", "btn-secondary", "m-0,", "p-0", 3, "click"], ["aria-hidden", "true", 1, "fa", "fa-minus-circle", "fa-fw"], ["aria-hidden", "true", 1, "fa", "fa-plus-circle", "fa-fw"], [1, "card-body", "h-100", "p-0"], [1, "list-group", 3, "sortablejs"], [1, "list-group-item", 3, "active-light", "active", "inactive-list-item"], [1, "list-group-item", 3, "click"], [1, "row", "d-flex", 2, "cursor", "pointer"], [1, "col-auto", "list-sort-handle", "my-auto", 2, "cursor", "move", "cursor", "-webkit-grabbing"], ["aria-hidden", "true", 1, "fa", "fa-bars"], [1, "form-check"], ["type", "checkbox", "id", "active", 1, "form-check-input", 3, "ngModelChange", "click", "disabled", "ngModel"], [1, "my-auto", "ml-auto", "mr-2", "d-flex"], ["type", "button", 1, "btn", "btn-secondary", "btn-sm", "py-0", "px-1", 3, "click"]], template: function PresetComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div");
             i0.ɵɵtext(3);
             i0.ɵɵpipe(4, "translate");
@@ -9976,9 +10435,12 @@ class PresetComponent {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PresetComponent, [{
         type: Component,
-        args: [{ selector: 'lib-app-preset', standalone: false, template: "<div\n  class=\"card border-secondary h-100 panel card-intro-preset card-intro-active\"\n  [class.card-intro-active]=\"introService.showStep('presets')\"\n>\n  <div class=\"card-header d-flex\">\n    <div>\n      {{ 'designer.preset.title' | translate }}\n    </div>\n    <div class=\"ml-auto\">\n      <a href=\"#\" class=\"btn btn-secondary m-0, p-0\" (click)=\"removePreset(); (false)\"\n        ><i class=\"fa fa-minus-circle fa-fw\" aria-hidden=\"true\"></i\n      ></a>\n      <a href=\"#\" class=\"btn btn-secondary m-0, p-0\" (click)=\"addPreset(); (false)\"\n        ><i class=\"fa fa-plus-circle fa-fw\" aria-hidden=\"true\"></i\n      ></a>\n    </div>\n  </div>\n\n  <div class=\"card-body h-100 p-0\">\n    <!-- List of presets -->\n    <div class=\"list-group\" [sortablejs]=\"projectService.project.presets\">\n      @for (item of projectService.project.presets; track item; let i = $index) {\n      <div\n        class=\"list-group-item\"\n        (click)=\"selectPreset(i)\"\n        [class.active-light]=\"!projectService.project.previewPreset && item == presetService.selectedPreset\"\n        [class.active]=\"projectService.project.previewPreset && item == presetService.selectedPreset\"\n        [class.inactive-list-item]=\"!sceneService.presetIsSelected(item)\"\n      >\n        <div class=\"row d-flex\" style=\"cursor: pointer\">\n          <div class=\"col-auto list-sort-handle my-auto\" style=\"cursor: move; cursor: -webkit-grabbing\">\n            <i class=\"fa fa-bars\" aria-hidden=\"true\"></i>\n          </div>\n          <div class=\"form-check\">\n            <input\n              type=\"checkbox\"\n              [disabled]=\"!enableCheckbox()\"\n              class=\"form-check-input\"\n              id=\"active\"\n              [ngModel]=\"sceneService.presetIsSelected(item)\"\n              (ngModelChange)=\"activatePreset($event, i)\"\n              (click)=\"$event.stopPropagation()\"\n            />\n          </div>\n          <div>\n            {{ item.name }}\n          </div>\n          <div class=\"my-auto ml-auto mr-2 d-flex\">\n            <button type=\"button\" class=\"btn btn-secondary btn-sm py-0 px-1\" (click)=\"openSettings(item); (false)\">...</button>\n          </div>\n        </div>\n      </div>\n      }\n    </div>\n  </div>\n</div>\n" }]
-    }], () => [{ type: PresetService }, { type: SceneService }, { type: ProjectService }, { type: IntroService }, { type: i1$1.BsModalService }], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PresetComponent, { className: "PresetComponent", filePath: "lib/preset/preset.component.ts", lineNumber: 16 }); })();
+        args: [{ selector: 'lib-app-preset', standalone: false, template: "<div\n  class=\"card border-secondary h-100 panel card-intro-preset card-intro-active\"\n  [class.card-intro-active]=\"introService.showStep('presets')\"\n>\n  <div class=\"card-header d-flex\">\n    <div>\n      {{ 'designer.preset.title' | translate }}\n    </div>\n    <div class=\"ml-auto\">\n      <a href=\"#\" class=\"btn btn-secondary m-0, p-0\" (click)=\"removePreset(); (false)\"\n        ><i class=\"fa fa-minus-circle fa-fw\" aria-hidden=\"true\"></i\n      ></a>\n      <a href=\"#\" class=\"btn btn-secondary m-0, p-0\" (click)=\"addPreset(); (false)\"\n        ><i class=\"fa fa-plus-circle fa-fw\" aria-hidden=\"true\"></i\n      ></a>\n    </div>\n  </div>\n\n  <div class=\"card-body h-100 p-0\">\n    <!-- List of presets -->\n    <!-- <tree-root #tree [nodes]=\"treeNodes\" [options]=\"treeOptions\" (activate)=\"onActivate($event)\">\n      <ng-template #treeNodeTemplate let-node let-index=\"index\">\n        <span>{{ node.data.name }}</span>\n      </ng-template>\n    </tree-root> -->\n\n    <div class=\"list-group\" [sortablejs]=\"projectService.project.presets\">\n      @for (item of projectService.project.presets; track item; let i = $index) {\n      <div\n        class=\"list-group-item\"\n        (click)=\"selectPreset(i)\"\n        [class.active-light]=\"!projectService.project.previewPreset && item == presetService.selectedPreset\"\n        [class.active]=\"projectService.project.previewPreset && item == presetService.selectedPreset\"\n        [class.inactive-list-item]=\"!sceneService.presetIsSelected(item)\"\n      >\n        <div class=\"row d-flex\" style=\"cursor: pointer\">\n          <div class=\"col-auto list-sort-handle my-auto\" style=\"cursor: move; cursor: -webkit-grabbing\">\n            <i class=\"fa fa-bars\" aria-hidden=\"true\"></i>\n          </div>\n          <div class=\"form-check\">\n            <input\n              type=\"checkbox\"\n              [disabled]=\"!enableCheckbox()\"\n              class=\"form-check-input\"\n              id=\"active\"\n              [ngModel]=\"sceneService.presetIsSelected(item)\"\n              (ngModelChange)=\"activatePreset($event, i)\"\n              (click)=\"$event.stopPropagation()\"\n            />\n          </div>\n          <div>\n            {{ item.name }}\n          </div>\n          <div class=\"my-auto ml-auto mr-2 d-flex\">\n            <button type=\"button\" class=\"btn btn-secondary btn-sm py-0 px-1\" (click)=\"openSettings(item); (false)\">...</button>\n          </div>\n        </div>\n      </div>\n      }\n    </div>\n  </div>\n</div>\n" }]
+    }], () => [{ type: PresetService }, { type: SceneService }, { type: ProjectService }, { type: IntroService }, { type: i1$1.BsModalService }], { tree: [{
+            type: ViewChild,
+            args: ['tree']
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PresetComponent, { className: "PresetComponent", filePath: "lib/preset/preset.component.ts", lineNumber: 17 }); })();
 
 class MasterDimmerComponent {
     constructor(projectService, changeDetectorRef, presetService) {
@@ -10030,7 +10492,7 @@ class MasterDimmerComponent {
             i0.ɵɵproperty("value", ctx.projectService == null ? null : ctx.projectService.project == null ? null : ctx.projectService.project.masterDimmerValue)("orientation", "horizontal")("tooltip", "hide")("min", 0)("max", 1)("step", 0.001);
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngModel", ctx.getValue());
-        } }, dependencies: [i3$2.DefaultValueAccessor, i3$2.NgControlStatus, i3$2.NgModel, i4$1.SliderComponent], encapsulation: 2 }); }
+        } }, dependencies: [i3$2.DefaultValueAccessor, i3$2.NgControlStatus, i3$2.NgModel, i3$3.SliderComponent], encapsulation: 2 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MasterDimmerComponent, [{
         type: Component,
@@ -10382,7 +10844,7 @@ class FixtureCapabilityChannelComponent {
             i0.ɵɵconditional((ctx._channel.capabilities == null ? null : ctx._channel.capabilities.length) > 1 ? 9 : -1);
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.hasRange ? 10 : -1);
-        } }, dependencies: [i3$2.DefaultValueAccessor, i3$2.CheckboxControlValueAccessor, i3$2.RadioControlValueAccessor, i3$2.NgControlStatus, i3$2.NgModel, i4$1.SliderComponent, i11.PopoverDirective, i4.TranslatePipe], styles: [".color[_ngcontent-%COMP%]{display:inline-block;margin-left:5px;border-radius:50%;width:12px;height:12px;border:1px white solid;vertical-align:middle}"], changeDetection: 0 }); }
+        } }, dependencies: [i3$2.DefaultValueAccessor, i3$2.CheckboxControlValueAccessor, i3$2.RadioControlValueAccessor, i3$2.NgControlStatus, i3$2.NgModel, i3$3.SliderComponent, i11.PopoverDirective, i4.TranslatePipe], styles: [".color[_ngcontent-%COMP%]{display:inline-block;margin-left:5px;border-radius:50%;width:12px;height:12px;border:1px white solid;vertical-align:middle}"], changeDetection: 0 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FixtureCapabilityChannelComponent, [{
         type: Component,
@@ -10542,7 +11004,7 @@ class FixtureChannelComponent {
             i0.ɵɵconditional(ctx.projectService.project.fixtures.length == 0 ? 3 : -1);
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.projectService.project.fixtures.length > 0 && ctx.presetService.selectedPreset && ctx.presetService.selectedPreset.fixtures.length == 0 ? 4 : -1);
-        } }, dependencies: [i3$2.CheckboxControlValueAccessor, i3$2.NgControlStatus, i3$2.NgModel, FixtureCapabilityChannelComponent, i8.KeyValuePipe, i4.TranslatePipe], encapsulation: 2 }); }
+        } }, dependencies: [i3$2.CheckboxControlValueAccessor, i3$2.NgControlStatus, i3$2.NgModel, FixtureCapabilityChannelComponent, i9.KeyValuePipe, i4.TranslatePipe], encapsulation: 2 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FixtureChannelComponent, [{
         type: Component,
@@ -10633,7 +11095,7 @@ class IntroComponent {
             i0.ɵɵconditionalCreate(0, IntroComponent_Conditional_0_Template, 17, 13, "div", 0);
         } if (rf & 2) {
             i0.ɵɵconditional(ctx.introService.showIntro ? 0 : -1);
-        } }, dependencies: [i8.NgStyle, i4.TranslatePipe], styles: [".card[_ngcontent-%COMP%]{position:absolute;width:400px;height:350px!important;z-index:999999}"] }); }
+        } }, dependencies: [i9.NgStyle, i4.TranslatePipe], styles: [".card[_ngcontent-%COMP%]{position:absolute;width:400px;height:350px!important;z-index:999999}"] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(IntroComponent, [{
         type: Component,
@@ -10821,7 +11283,7 @@ class DesignerComponent {
     set dropzoneChunking(value) {
         this.configService.dropzoneChunking = value;
     }
-    constructor(translateService, projectService, configService, fixturePoolService, hotkeyTargetExcludeService, modalService, userService, userEnsureLoginService, projectLoadService, warningDialogService, errorDialogService, fixtureService, timelineService, introService) {
+    constructor(translateService, projectService, configService, fixturePoolService, hotkeyTargetExcludeService, modalService, userService, userEnsureLoginService, projectLoadService, warningDialogService, errorDialogService, fixtureService, timelineService, introService, effectService) {
         this.translateService = translateService;
         this.projectService = projectService;
         this.configService = configService;
@@ -10836,6 +11298,7 @@ class DesignerComponent {
         this.fixtureService = fixtureService;
         this.timelineService = timelineService;
         this.introService = introService;
+        this.effectService = effectService;
         // the size of the menu used in the designer
         this.designerMenuSizePx = 20;
         this.splitGutterSizePx = 13;
@@ -10950,6 +11413,13 @@ class DesignerComponent {
         else {
             this.fixtureService.settingsSelection = false;
         }
+        if (tab === 'effects') {
+            this.effectService.effectsOpen = true;
+        }
+        else {
+            this.effectService.effectsOpen = false;
+        }
+        this.effectService.effectsOpenChanged.next();
         this.currentTab = tab;
     }
     openFixturePool() {
@@ -11056,7 +11526,7 @@ class DesignerComponent {
         this.translateService.use(language);
         localStorage.setItem('language', language);
     }
-    static { this.ɵfac = function DesignerComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || DesignerComponent)(i0.ɵɵdirectiveInject(i4.TranslateService), i0.ɵɵdirectiveInject(ProjectService), i0.ɵɵdirectiveInject(ConfigService), i0.ɵɵdirectiveInject(FixturePoolService), i0.ɵɵdirectiveInject(HotkeyTargetExcludeService), i0.ɵɵdirectiveInject(i1$1.BsModalService), i0.ɵɵdirectiveInject(UserService), i0.ɵɵdirectiveInject(UserEnsureLoginService), i0.ɵɵdirectiveInject(ProjectLoadService), i0.ɵɵdirectiveInject(WarningDialogService), i0.ɵɵdirectiveInject(ErrorDialogService), i0.ɵɵdirectiveInject(FixtureService), i0.ɵɵdirectiveInject(TimelineService), i0.ɵɵdirectiveInject(IntroService)); }; }
+    static { this.ɵfac = function DesignerComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || DesignerComponent)(i0.ɵɵdirectiveInject(i4.TranslateService), i0.ɵɵdirectiveInject(ProjectService), i0.ɵɵdirectiveInject(ConfigService), i0.ɵɵdirectiveInject(FixturePoolService), i0.ɵɵdirectiveInject(HotkeyTargetExcludeService), i0.ɵɵdirectiveInject(i1$1.BsModalService), i0.ɵɵdirectiveInject(UserService), i0.ɵɵdirectiveInject(UserEnsureLoginService), i0.ɵɵdirectiveInject(ProjectLoadService), i0.ɵɵdirectiveInject(WarningDialogService), i0.ɵɵdirectiveInject(ErrorDialogService), i0.ɵɵdirectiveInject(FixtureService), i0.ɵɵdirectiveInject(TimelineService), i0.ɵɵdirectiveInject(IntroService), i0.ɵɵdirectiveInject(EffectService)); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DesignerComponent, selectors: [["lib-designer"]], viewQuery: function DesignerComponent_Query(rf, ctx) { if (rf & 1) {
             i0.ɵɵviewQuery(PreviewComponent, 5);
             i0.ɵɵviewQuery(TimelineComponent, 5);
@@ -11219,12 +11689,12 @@ class DesignerComponent {
             i0.ɵɵconditional(ctx.projectService.project ? 76 : -1);
             i0.ɵɵadvance(2);
             i0.ɵɵconditional(ctx.projectService.project ? 78 : -1);
-        } }, dependencies: [i3.RouterLinkActive, i8.NgStyle, i11.PopoverDirective, PreviewComponent, SceneComponent, TimelineComponent, FixtureComponent, FixtureCapabilityComponent, FixtureSettingsComponent, EffectComponent, PresetComponent, MasterDimmerComponent, FixtureChannelComponent, IntroComponent, i4.TranslatePipe], styles: [".modal-full{max-width:unset!important;margin:1.75rem!important}.modal{z-index:10001}#designer{font-size:14px}#designer .nav-link{cursor:pointer}#designer .dropdown-menu{z-index:100000}#designer .row{flex-wrap:unset}#designer .navbar-nav{flex-direction:row!important}#designer .navbar-expand-lg{flex-flow:row nowrap!important;justify-content:flex-start!important}#designer .navbar-expand-lg .navbar-nav .nav-link{padding-right:.5rem!important;padding-left:.5rem!important}#designer .list-group-item.active{color:#fff!important;background-color:#fd7e14!important;border-color:#fd7e14!important}#designer *:focus{outline:none}#designer select{font-size:.8rem;cursor:pointer}#designer input{font-size:.7rem;background-color:transparent;color:#fff;border:1px solid}#designer input,#designer select{border-color:#dee2e6}#designer .list-group-item{padding:.3rem 1.25rem;border-left:none;border-right:none}#designer .nav-pills .nav-link.active,#designer .nav-pills .show>.nav-link{background-color:#444}#designer .nav a,#designer .panel-title .btn-link{color:#fff!important}#designer .accordion-toggle .btn,#designer .accordion-toggle button{padding:0}#designer .card-body{overflow:auto;padding:.8rem}#designer .card-header{margin-bottom:0}#designer .card-header{padding:.4rem}#designer .panel-body{background-color:#303030}#designer .list-group-item.active-light{background-color:#906542;border-color:#906542}#designer .inactive-list-item{opacity:.3}#designer span.bigcheck-target{font-family:FontAwesome}#designer input[type=checkbox].bigcheck{position:relative;left:-999em}#designer input[type=checkbox].bigcheck+span.bigcheck-target:after{content:\"\\f096\"}#designer input[type=checkbox].bigcheck:checked+span.bigcheck-target:after{content:\"\\f046\"}#designer .gutter.gutter-horizontal{cursor:ew-resize}#designer .gutter.gutter-vertical{cursor:ns-resize}#designer .split-horizontal,#designer .gutter.gutter-horizontal{float:left}#designer .split-vertical,#designer .gutter.gutter-horizontal{height:100%}#designer .split{overflow-y:hidden;overflow-x:hidden}#designer .panel{background-color:transparent}#designer .slider{cursor:pointer}#designer .slider-horizontal .slider-track{height:2px!important;margin-top:-2px!important}#designer .slider-vertical .slider-track{width:2px!important;margin-left:4px!important}#designer .slider-track,#designer .slider-track-low,#designer .slider-track-high,#designer .slider-selection{background-color:#fff!important;border-radius:0!important;background-image:none!important;box-shadow:none!important}#designer .slider-handle{width:13px!important;height:13px!important;background-color:#fff!important;background-image:none!important;border:1px solid #303030}#designer .slider-vertical .slider-handle{margin-left:4px!important}#designer .slider-horizontal .slider-handle{margin-top:2px!important}#designer .slider-input{width:35px;margin-left:8px;text-align:center}#designer .slider-input-readonly{width:35px;margin-left:8px;text-align:center;color:#a9a9a9;border-color:gray}#designer .capability-container{padding:0;height:0}#designer accordion-group>div{border:none!important}#designer .popover{background-color:#fff}#designer .popover-body{color:#000}#designer .bs-popover-right .arrow:after,#designer .bs-popover-auto[x-placement^=right] .arrow:after{border-right-color:#fff}#designer .bs-popover-left .arrow:after,#designer .bs-popover-auto[x-placement^=left] .arrow:after{border-left-color:#fff}#designer .bs-popover-bottom .arrow:after,#designer .bs-popover-auto[x-placement^=bottom] .arrow:after{border-bottom-color:#fff}#designer .bs-popover-top .arrow:after,#designer .bs-popover-auto[x-placement^=top] .arrow:after{border-top-color:#fff}#designer .iro__wheel,#designer .iro__slider{cursor:pointer}#designer .pan-tilt-grid path{fill:none;stroke:#fff;stroke-width:10px}#designer .pan-tilt-grid circle{fill:#4682b4;stroke:#fff;stroke-width:3px}#designer .capability{overflow:visible}#designer .capability-deactivated{opacity:.4}#designer .wavesurfer-region{z-index:5!important}#designer .wavesurfer-region[data-region-selected=true]{z-index:6!important}#designer .wavesurfer-region[data-region-preset=true]{height:50%!important;top:50%!important}#designer .wavesurfer-region[data-region-name]:after{content:attr(data-region-name);margin-left:20px}#designer .wavesurfer-handle{width:10px!important;max-width:10px!important;border:1px solid #ddd;background:#0000001a;box-sizing:border-box;opacity:0;cursor:unset!important}#designer .wavesurfer-handle-end{margin-left:-10px}#designer .wavesurfer-region[data-region-selectable=true] .wavesurfer-handle{opacity:1;cursor:col-resize!important}#designer .wavesurfer-handle:before,#designer .wavesurfer-handle:after{content:\"\";display:block;position:absolute;z-index:1;border-top:1px solid #fff;border-bottom:1px solid #fff;height:4px;left:5%;right:5%;top:50%;transform:translateY(-50%)}#designer .wavesurfer-handle:before{margin-top:-3px}#designer timeline{overflow:scroll!important;overflow:-moz-scrollbars-none;-ms-overflow-style:none;scrollbar-width:none;cursor:s-resize}#designer timeline::-webkit-scrollbar{height:0!important}#designer cursor{top:-20px!important}#designer wave{border-right-color:#fd7e14!important;cursor:col-resize}#designer wave canvas{opacity:.2}\n"], encapsulation: 2 }); }
+        } }, dependencies: [i3.RouterLinkActive, i9.NgStyle, i11.PopoverDirective, PreviewComponent, SceneComponent, TimelineComponent, FixtureComponent, FixtureCapabilityComponent, FixtureSettingsComponent, EffectComponent, PresetComponent, MasterDimmerComponent, FixtureChannelComponent, IntroComponent, i4.TranslatePipe], styles: [".modal-full{max-width:unset!important;margin:1.75rem!important}.modal{z-index:10001}#designer{font-size:14px}#designer .nav-link{cursor:pointer}#designer .dropdown-menu{z-index:100000}#designer .row{flex-wrap:unset}#designer .navbar-nav{flex-direction:row!important}#designer .navbar-expand-lg{flex-flow:row nowrap!important;justify-content:flex-start!important}#designer .navbar-expand-lg .navbar-nav .nav-link{padding-right:.5rem!important;padding-left:.5rem!important}#designer .list-group-item.active{color:#fff!important;background-color:#fd7e14!important;border-color:#fd7e14!important}#designer *:focus{outline:none}#designer select{font-size:.8rem;cursor:pointer}#designer input{font-size:.7rem;background-color:transparent;color:#fff;border:1px solid}#designer input,#designer select{border-color:#dee2e6}#designer .list-group-item{padding:.3rem 1.25rem;border-left:none;border-right:none}#designer .nav-pills .nav-link.active,#designer .nav-pills .show>.nav-link{background-color:#444}#designer .nav a,#designer .panel-title .btn-link{color:#fff!important}#designer .accordion-toggle .btn,#designer .accordion-toggle button{padding:0}#designer .card-body{overflow:auto;padding:.8rem}#designer .card-header{margin-bottom:0}#designer .card-header{padding:.4rem}#designer .panel-body{background-color:#303030}#designer .list-group-item.active-light{background-color:#906542;border-color:#906542}#designer .inactive-list-item{opacity:.3}#designer span.bigcheck-target{font-family:FontAwesome}#designer input[type=checkbox].bigcheck{position:relative;left:-999em}#designer input[type=checkbox].bigcheck+span.bigcheck-target:after{content:\"\\f096\"}#designer input[type=checkbox].bigcheck:checked+span.bigcheck-target:after{content:\"\\f046\"}#designer .gutter.gutter-horizontal{cursor:ew-resize}#designer .gutter.gutter-vertical{cursor:ns-resize}#designer .split-horizontal,#designer .gutter.gutter-horizontal{float:left}#designer .split-vertical,#designer .gutter.gutter-horizontal{height:100%}#designer .split{overflow-y:hidden;overflow-x:hidden}#designer .panel{background-color:transparent}#designer .slider{cursor:pointer}#designer .slider-horizontal .slider-track{height:2px!important;margin-top:-2px!important}#designer .slider-vertical .slider-track{width:2px!important;margin-left:4px!important}#designer .slider-track,#designer .slider-track-low,#designer .slider-track-high,#designer .slider-selection{background-color:#fff!important;border-radius:0!important;background-image:none!important;box-shadow:none!important}#designer .slider-handle{width:13px!important;height:13px!important;background-color:#fff!important;background-image:none!important;border:1px solid #303030}#designer .slider-vertical .slider-handle{margin-left:4px!important}#designer .slider-horizontal .slider-handle{margin-top:2px!important}#designer .slider-input{width:35px;margin-left:8px;text-align:center}#designer .slider-input-readonly{width:35px;margin-left:8px;text-align:center;color:#a9a9a9;border-color:gray}#designer .capability-container{padding:0;height:0}#designer accordion-group>div{border:none!important}#designer .popover{background-color:#fff}#designer .popover-body{color:#000}#designer .bs-popover-right .arrow:after,#designer .bs-popover-auto[x-placement^=right] .arrow:after{border-right-color:#fff}#designer .bs-popover-left .arrow:after,#designer .bs-popover-auto[x-placement^=left] .arrow:after{border-left-color:#fff}#designer .bs-popover-bottom .arrow:after,#designer .bs-popover-auto[x-placement^=bottom] .arrow:after{border-bottom-color:#fff}#designer .bs-popover-top .arrow:after,#designer .bs-popover-auto[x-placement^=top] .arrow:after{border-top-color:#fff}#designer .iro__wheel,#designer .iro__slider{cursor:pointer}#designer .pan-tilt-grid path{fill:none;stroke:#fff;stroke-width:10px}#designer .pan-tilt-grid circle{fill:#4682b4;stroke:#fff;stroke-width:3px}#designer .capability{overflow:visible}#designer .capability-deactivated{opacity:.4}#designer .wavesurfer-region{z-index:5!important}#designer .wavesurfer-region[data-region-selected=true]{z-index:6!important}#designer .wavesurfer-region[data-region-preset=true]{height:50%!important;top:50%!important}#designer .wavesurfer-region[data-region-name]:after{content:attr(data-region-name);margin-left:20px}#designer .wavesurfer-handle{width:10px!important;max-width:10px!important;border:1px solid #ddd;background:#0000001a;box-sizing:border-box;opacity:0;cursor:unset!important}#designer .wavesurfer-handle-end{margin-left:-10px}#designer .wavesurfer-region[data-region-selectable=true] .wavesurfer-handle{opacity:1;cursor:col-resize!important}#designer .wavesurfer-handle:before,#designer .wavesurfer-handle:after{content:\"\";display:block;position:absolute;z-index:1;border-top:1px solid #fff;border-bottom:1px solid #fff;height:4px;left:5%;right:5%;top:50%;transform:translateY(-50%)}#designer .wavesurfer-handle:before{margin-top:-3px}#designer timeline{overflow:scroll!important;overflow:-moz-scrollbars-none;-ms-overflow-style:none;scrollbar-width:none;cursor:s-resize}#designer timeline::-webkit-scrollbar{height:0!important}#designer cursor{top:-20px!important}#designer wave{border-right-color:#fd7e14!important;cursor:col-resize}#designer wave canvas{opacity:.2}\n"], encapsulation: 2 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DesignerComponent, [{
         type: Component,
         args: [{ selector: 'lib-designer', encapsulation: ViewEncapsulation.None, standalone: false, template: "<!-- Wrap the whole component inside a div to encapsulate the CSS -->\n\n<!-- 100 % height minus the menu bar above and the gutter size of 13 px -->\n<!-- <div style=\"height: calc(100% - 33px)\"> -->\n<div id=\"designer\" [ngStyle]=\"{ height: 'calc(100% - ' + totalMenuHeightPx + 'px)' }\">\n  <!-- Navigation -->\n  <nav\n    class=\"navbar navbar-expand-lg navbar-light bg-light border-secondary\"\n    style=\"border-bottom: 1px solid #444; height: 20px; z-index: 9999\"\n  >\n    <!-- Menu buttons -->\n    <ul class=\"navbar-nav mr-auto\">\n      <li class=\"nav-item dropdown\">\n        <a class=\"nav-link dropdown-toggle\" href=\"#\" id=\"fileDropdown\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\n          {{ 'designer.navigation.project' | translate }}\n        </a>\n        <div class=\"dropdown-menu\" aria-labelledby=\"fileDropdown\">\n          <a class=\"dropdown-item d-none d-md-block\" href=\"#\" (click)=\"projectNew(); (false)\"\n            ><i class=\"fa fa-fw fa-file-o\" aria-hidden=\"true\"></i> {{ 'designer.navigation.project-new' | translate }}</a\n          >\n          <a class=\"dropdown-item\" href=\"#\" (click)=\"projectOpen(); (false)\"\n            ><i class=\"fa fa-fw fa-folder-open-o\" aria-hidden=\"true\"></i> {{ 'designer.navigation.project-open' | translate }}</a\n          >\n          <a class=\"dropdown-item d-none d-md-block\" href=\"#\" (click)=\"projectSave(); (false)\"\n            ><i class=\"fa fa-fw fa-floppy-o\" aria-hidden=\"true\"></i> {{ 'designer.navigation.project-save' | translate }}</a\n          >\n          <a class=\"dropdown-item d-none d-md-block\" href=\"#\" (click)=\"projectSaveAs(); (false)\"\n            ><i class=\"fa fa-fw fa-floppy-o\" aria-hidden=\"true\"></i> {{ 'designer.navigation.project-save-as' | translate }}</a\n          >\n          <a class=\"dropdown-item d-none d-md-block\" href=\"#\" (click)=\"projectImport(); (false)\"\n            ><i class=\"fa fa-fw fa-download\" aria-hidden=\"true\"></i> {{ 'designer.navigation.project-import' | translate }}</a\n          >\n          <a class=\"dropdown-item d-none d-md-block\" href=\"#\" (click)=\"projectExport(); (false)\"\n            ><i class=\"fa fa-fw fa-external-link\" aria-hidden=\"true\"></i> {{ 'designer.navigation.project-export' | translate }}</a\n          >\n        </div>\n      </li>\n      <li class=\"nav-item dropdown d-none d-md-block\">\n        <a\n          class=\"nav-link dropdown-toggle\"\n          href=\"#\"\n          id=\"settingsDropdown\"\n          data-toggle=\"dropdown\"\n          aria-haspopup=\"true\"\n          aria-expanded=\"false\"\n        >\n          {{ 'designer.navigation.settings' | translate }}\n        </a>\n        <div class=\"dropdown-menu\" aria-labelledby=\"settingsDropdown\">\n          <a class=\"dropdown-item\" href=\"#\" (click)=\"openFixturePool(); (false)\">{{ 'designer.navigation.fixture-pool' | translate }}</a>\n          <!-- <a class=\"dropdown-item\" href=\"#\">{{ 'designer.navigation.stage' | translate }}</a> -->\n        </div>\n      </li>\n      <li class=\"nav-item dropdown d-none d-md-block\">\n        <a\n          class=\"nav-link dropdown-toggle\"\n          href=\"#\"\n          id=\"settingsDropdown\"\n          data-toggle=\"dropdown\"\n          aria-haspopup=\"true\"\n          aria-expanded=\"false\"\n        >\n          {{ 'designer.navigation.help' | translate }}\n        </a>\n        <div class=\"dropdown-menu\" aria-labelledby=\"settingsDropdown\">\n          <a class=\"dropdown-item\" href=\"#\" (click)=\"introService.reset(); (false)\">{{ 'designer.navigation.reset-intro' | translate }}</a>\n          <a class=\"dropdown-item\" href=\"https://rocketshow.net/support/\" target=\"_blank\">{{\n            'designer.navigation.support' | translate\n          }}</a>\n        </div>\n      </li>\n    </ul>\n\n    <ul class=\"navbar-nav\">\n      @if (configService.shareAvailable) {\n      <li class=\"nav-item d-none d-md-flex\" data-toggle=\"collapse\">\n        <a class=\"nav-link text-primary\" (click)=\"projectShare(); (false)\" routerLinkActive=\"active\"\n          ><i class=\"fa fa-share-alt\" aria-hidden=\"true\"></i> {{ 'designer.navigation.project-share' | translate }}</a\n        >\n      </li>\n      } @if (configService.languageSwitch) {\n      <li class=\"nav-item dropdown\">\n        <a class=\"nav-link dropdown-toggle\" href=\"#\" id=\"settingsDropdown\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\"\n          ><i class=\"fa fa-globe\" aria-hidden=\"true\"></i>\n          {{ 'designer.misc.language' | translate }}\n        </a>\n        <div class=\"dropdown-menu dropdown-menu-right\" aria-labelledby=\"settingsDropdown\">\n          <a class=\"dropdown-item\" href=\"#\" (click)=\"switchLanguage('en'); (false)\" target=\"_blank\">English</a>\n          <a class=\"dropdown-item\" href=\"#\" (click)=\"switchLanguage('de'); (false)\" target=\"_blank\">Deutsch</a>\n        </div>\n      </li>\n      } @if (configService.loginAvailable && !userService.isLoggedIn()) {\n      <li class=\"nav-item\" data-toggle=\"collapse\">\n        <a class=\"nav-link\" (click)=\"userRegister(); (false)\" routerLinkActive=\"active\"\n          ><i class=\"fa fa-user\" aria-hidden=\"true\"></i> {{ 'designer.navigation.login' | translate }}</a\n        >\n      </li>\n      } @if (configService.loginAvailable && userService.isLoggedIn()) {\n      <li class=\"nav-item dropdown\">\n        <a class=\"nav-link dropdown-toggle\" href=\"#\" id=\"settingsDropdown\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\"\n          ><i class=\"fa fa-user\" aria-hidden=\"true\"></i>\n          {{ userService.username }}\n        </a>\n        <div class=\"dropdown-menu dropdown-menu-right\" aria-labelledby=\"settingsDropdown\">\n          <a class=\"dropdown-item\" href=\"#\" (click)=\"userService.logout(); (false)\" target=\"_blank\"\n            ><i class=\"fa fa-sign-out\" aria-hidden=\"true\"></i> {{ 'designer.navigation.logout' | translate }}</a\n          >\n        </div>\n      </li>\n      }\n    </ul>\n  </nav>\n\n  <!-- The main content for larger screens -->\n  <div class=\"h-100 d-none d-md-block\">\n    <div id=\"row1\" class=\"split split-vertical clearfix pt-3 pl-3\">\n      <!-- Scenes -->\n      <div id=\"scenes\" class=\"split split-horizontal h-100\">\n        @if (projectService.project) {\n        <lib-app-scene></lib-app-scene>\n        }\n      </div>\n\n      <!-- Presets -->\n      <div id=\"presets\" class=\"split split-horizontal h-100\">\n        @if (projectService.project) {\n        <lib-app-preset></lib-app-preset>\n        }\n      </div>\n\n      <!-- 3D preview -->\n      <div id=\"preview\" class=\"split split-horizontal h-100 pr-3\">\n        @if (projectService.project) {\n        <div class=\"card border-secondary h-100\" [class.card-intro-active]=\"introService.showStep('preview')\">\n          <div class=\"card-body p-0 h-100\">\n            <lib-app-preview class=\"h-100\"></lib-app-preview>\n          </div>\n        </div>\n        }\n      </div>\n    </div>\n\n    <div id=\"row2\" class=\"split split-vertical clearfix px-3 d-flex\" style=\"flex-direction: row\">\n      <!-- Menu for the capabilities, channels, effects and settings -->\n      @if (projectService.project) {\n      <div class=\"col col-auto p-0\" style=\"margin-right: -1px\">\n        <div class=\"nav flex-column nav-pills\" id=\"v-pills-tab\" role=\"tablist\" aria-orientation=\"vertical\">\n          <a\n            class=\"nav-link px-3 active\"\n            (click)=\"openTab('capabilities')\"\n            id=\"v-pills-capabilities-tab\"\n            popover=\"{{ 'designer.misc.capabilities' | translate }}\"\n            container=\"body\"\n            placement=\"right\"\n            triggers=\"mouseenter:mouseleave\"\n            data-toggle=\"pill\"\n            href=\"#v-pills-capabilities\"\n            role=\"tab\"\n            aria-controls=\"v-pills-capabilities\"\n            aria-selected=\"true\"\n          >\n            <i class=\"fa fa-bolt fa-fw\" aria-hidden=\"true\"></i>\n          </a>\n          <a\n            class=\"nav-link px-3\"\n            (click)=\"openTab('channels')\"\n            id=\"v-pills-channels-tab\"\n            popover=\"{{ 'designer.misc.channels' | translate }}\"\n            container=\"body\"\n            placement=\"right\"\n            triggers=\"mouseenter:mouseleave\"\n            data-toggle=\"pill\"\n            href=\"#v-pills-channels\"\n            role=\"tab\"\n            aria-controls=\"v-pills-channels\"\n            aria-selected=\"false\"\n          >\n            <i class=\"fa fa-sliders fa-fw\" aria-hidden=\"true\"></i>\n          </a>\n          <a\n            class=\"nav-link px-3\"\n            (click)=\"openTab('effects')\"\n            id=\"v-pills-effects-tab\"\n            popover=\"{{ 'designer.misc.effects' | translate }}\"\n            container=\"body\"\n            placement=\"right\"\n            triggers=\"mouseenter:mouseleave\"\n            data-toggle=\"pill\"\n            href=\"#v-pills-effects\"\n            role=\"tab\"\n            aria-controls=\"v-pills-effects\"\n            aria-selected=\"false\"\n          >\n            <i class=\"fa fa-magic fa-fw\" aria-hidden=\"true\"></i>\n          </a>\n          <a\n            class=\"nav-link px-3\"\n            (click)=\"openTab('settings')\"\n            id=\"v-pills-settings-tab\"\n            popover=\"{{ 'designer.misc.settings' | translate }}\"\n            container=\"body\"\n            placement=\"right\"\n            triggers=\"mouseenter:mouseleave\"\n            data-toggle=\"pill\"\n            href=\"#v-pills-settings\"\n            role=\"tab\"\n            aria-controls=\"v-pills-settings\"\n            aria-selected=\"false\"\n            style=\"border-top: 1px solid #444\"\n          >\n            <i class=\"fa fa-cog fa-fw\" aria-hidden=\"true\"></i>\n          </a>\n        </div>\n      </div>\n      }\n\n      <div id=\"capabilities\" class=\"split split-horizontal h-100\" style=\"padding-left: 1rem\">\n        @if (projectService.project) {\n        <div class=\"row h-100\">\n          <!-- Content for the capabilities, channels, effects and settings -->\n          <div class=\"col pl-0 h-100\">\n            <div class=\"tab-content h-100\" id=\"v-pills-tabContent\">\n              <div class=\"tab-pane h-100 show active\" id=\"v-pills-capabilities\" role=\"tabpanel\">\n                <lib-app-fixture-capability></lib-app-fixture-capability>\n              </div>\n              <div class=\"tab-pane h-100 show\" id=\"v-pills-channels\" role=\"tabpanel\">\n                <lib-app-fixture-channel></lib-app-fixture-channel>\n              </div>\n              <div class=\"tab-pane h-100\" id=\"v-pills-effects\" role=\"tabpanel\" aria-labelledby=\"v-pills-profile-tab\">\n                <lib-app-effect></lib-app-effect>\n              </div>\n              <div class=\"tab-pane h-100\" id=\"v-pills-settings\" role=\"tabpanel\" aria-labelledby=\"v-pills-home-tab\">\n                <lib-app-fixture-settings></lib-app-fixture-settings>\n              </div>\n            </div>\n          </div>\n        </div>\n        }\n      </div>\n\n      <!-- Fixtures -->\n      <div id=\"fixtures\" class=\"split split-horizontal h-100\">\n        @if (projectService.project) {\n        <lib-app-fixture></lib-app-fixture>\n        }\n      </div>\n\n      <!-- Master dimmer -->\n      <div id=\"masterDimmer\" class=\"split split-horizontal h-100\">\n        @if (projectService.project) {\n        <lib-app-master-dimmer></lib-app-master-dimmer>\n        }\n      </div>\n    </div>\n\n    <!-- Timeline -->\n    <div id=\"row3\" class=\"split split-vertical clearfix px-3 pb-3\" style=\"padding-bottom: 20px\">\n      @if (projectService.project) {\n      <lib-app-timeline></lib-app-timeline>\n      }\n    </div>\n  </div>\n\n  <!-- The components for small screens -->\n  <div class=\"d-md-none p-3\">\n    <div>\n      @if (projectService.project) {\n      <lib-app-master-dimmer></lib-app-master-dimmer>\n      }\n    </div>\n\n    <div class=\"mt-3\">\n      @if (projectService.project) {\n      <lib-app-scene></lib-app-scene>\n      }\n    </div>\n  </div>\n</div>\n\n<lib-app-intro class=\"d-none d-md-flex\"></lib-app-intro>\n", styles: [".modal-full{max-width:unset!important;margin:1.75rem!important}.modal{z-index:10001}#designer{font-size:14px}#designer .nav-link{cursor:pointer}#designer .dropdown-menu{z-index:100000}#designer .row{flex-wrap:unset}#designer .navbar-nav{flex-direction:row!important}#designer .navbar-expand-lg{flex-flow:row nowrap!important;justify-content:flex-start!important}#designer .navbar-expand-lg .navbar-nav .nav-link{padding-right:.5rem!important;padding-left:.5rem!important}#designer .list-group-item.active{color:#fff!important;background-color:#fd7e14!important;border-color:#fd7e14!important}#designer *:focus{outline:none}#designer select{font-size:.8rem;cursor:pointer}#designer input{font-size:.7rem;background-color:transparent;color:#fff;border:1px solid}#designer input,#designer select{border-color:#dee2e6}#designer .list-group-item{padding:.3rem 1.25rem;border-left:none;border-right:none}#designer .nav-pills .nav-link.active,#designer .nav-pills .show>.nav-link{background-color:#444}#designer .nav a,#designer .panel-title .btn-link{color:#fff!important}#designer .accordion-toggle .btn,#designer .accordion-toggle button{padding:0}#designer .card-body{overflow:auto;padding:.8rem}#designer .card-header{margin-bottom:0}#designer .card-header{padding:.4rem}#designer .panel-body{background-color:#303030}#designer .list-group-item.active-light{background-color:#906542;border-color:#906542}#designer .inactive-list-item{opacity:.3}#designer span.bigcheck-target{font-family:FontAwesome}#designer input[type=checkbox].bigcheck{position:relative;left:-999em}#designer input[type=checkbox].bigcheck+span.bigcheck-target:after{content:\"\\f096\"}#designer input[type=checkbox].bigcheck:checked+span.bigcheck-target:after{content:\"\\f046\"}#designer .gutter.gutter-horizontal{cursor:ew-resize}#designer .gutter.gutter-vertical{cursor:ns-resize}#designer .split-horizontal,#designer .gutter.gutter-horizontal{float:left}#designer .split-vertical,#designer .gutter.gutter-horizontal{height:100%}#designer .split{overflow-y:hidden;overflow-x:hidden}#designer .panel{background-color:transparent}#designer .slider{cursor:pointer}#designer .slider-horizontal .slider-track{height:2px!important;margin-top:-2px!important}#designer .slider-vertical .slider-track{width:2px!important;margin-left:4px!important}#designer .slider-track,#designer .slider-track-low,#designer .slider-track-high,#designer .slider-selection{background-color:#fff!important;border-radius:0!important;background-image:none!important;box-shadow:none!important}#designer .slider-handle{width:13px!important;height:13px!important;background-color:#fff!important;background-image:none!important;border:1px solid #303030}#designer .slider-vertical .slider-handle{margin-left:4px!important}#designer .slider-horizontal .slider-handle{margin-top:2px!important}#designer .slider-input{width:35px;margin-left:8px;text-align:center}#designer .slider-input-readonly{width:35px;margin-left:8px;text-align:center;color:#a9a9a9;border-color:gray}#designer .capability-container{padding:0;height:0}#designer accordion-group>div{border:none!important}#designer .popover{background-color:#fff}#designer .popover-body{color:#000}#designer .bs-popover-right .arrow:after,#designer .bs-popover-auto[x-placement^=right] .arrow:after{border-right-color:#fff}#designer .bs-popover-left .arrow:after,#designer .bs-popover-auto[x-placement^=left] .arrow:after{border-left-color:#fff}#designer .bs-popover-bottom .arrow:after,#designer .bs-popover-auto[x-placement^=bottom] .arrow:after{border-bottom-color:#fff}#designer .bs-popover-top .arrow:after,#designer .bs-popover-auto[x-placement^=top] .arrow:after{border-top-color:#fff}#designer .iro__wheel,#designer .iro__slider{cursor:pointer}#designer .pan-tilt-grid path{fill:none;stroke:#fff;stroke-width:10px}#designer .pan-tilt-grid circle{fill:#4682b4;stroke:#fff;stroke-width:3px}#designer .capability{overflow:visible}#designer .capability-deactivated{opacity:.4}#designer .wavesurfer-region{z-index:5!important}#designer .wavesurfer-region[data-region-selected=true]{z-index:6!important}#designer .wavesurfer-region[data-region-preset=true]{height:50%!important;top:50%!important}#designer .wavesurfer-region[data-region-name]:after{content:attr(data-region-name);margin-left:20px}#designer .wavesurfer-handle{width:10px!important;max-width:10px!important;border:1px solid #ddd;background:#0000001a;box-sizing:border-box;opacity:0;cursor:unset!important}#designer .wavesurfer-handle-end{margin-left:-10px}#designer .wavesurfer-region[data-region-selectable=true] .wavesurfer-handle{opacity:1;cursor:col-resize!important}#designer .wavesurfer-handle:before,#designer .wavesurfer-handle:after{content:\"\";display:block;position:absolute;z-index:1;border-top:1px solid #fff;border-bottom:1px solid #fff;height:4px;left:5%;right:5%;top:50%;transform:translateY(-50%)}#designer .wavesurfer-handle:before{margin-top:-3px}#designer timeline{overflow:scroll!important;overflow:-moz-scrollbars-none;-ms-overflow-style:none;scrollbar-width:none;cursor:s-resize}#designer timeline::-webkit-scrollbar{height:0!important}#designer cursor{top:-20px!important}#designer wave{border-right-color:#fd7e14!important;cursor:col-resize}#designer wave canvas{opacity:.2}\n"] }]
-    }], () => [{ type: i4.TranslateService }, { type: ProjectService }, { type: ConfigService }, { type: FixturePoolService }, { type: HotkeyTargetExcludeService }, { type: i1$1.BsModalService }, { type: UserService }, { type: UserEnsureLoginService }, { type: ProjectLoadService }, { type: WarningDialogService }, { type: ErrorDialogService }, { type: FixtureService }, { type: TimelineService }, { type: IntroService }], { menuHeightPx: [{
+    }], () => [{ type: i4.TranslateService }, { type: ProjectService }, { type: ConfigService }, { type: FixturePoolService }, { type: HotkeyTargetExcludeService }, { type: i1$1.BsModalService }, { type: UserService }, { type: UserEnsureLoginService }, { type: ProjectLoadService }, { type: WarningDialogService }, { type: ErrorDialogService }, { type: FixtureService }, { type: TimelineService }, { type: IntroService }, { type: EffectService }], { menuHeightPx: [{
             type: Input
         }], externalCompositionsAvailable: [{
             type: Input
@@ -11260,7 +11730,7 @@ class DesignerComponent {
             type: HostListener,
             args: ['document:keydown', ['$event']]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(DesignerComponent, { className: "DesignerComponent", filePath: "lib/designer.component.ts", lineNumber: 34 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(DesignerComponent, { className: "DesignerComponent", filePath: "lib/designer.component.ts", lineNumber: 35 }); })();
 
 class DesignerModule {
     static { this.ɵfac = function DesignerModule_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || DesignerModule)(); }; }
@@ -11278,7 +11748,8 @@ class DesignerModule {
             DropzoneModule,
             ToastrModule.forRoot({
                 newestOnTop: true,
-            })] }); }
+            }),
+            TreeModule] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DesignerModule, [{
         type: NgModule,
@@ -11339,6 +11810,7 @@ class DesignerModule {
                     ToastrModule.forRoot({
                         newestOnTop: true,
                     }),
+                    TreeModule,
                 ],
                 providers: [provideHttpClient(withInterceptorsFromDi())],
             }]
@@ -11389,7 +11861,7 @@ class DesignerModule {
         PopoverModule,
         TypeaheadModule,
         SortablejsModule,
-        DropzoneModule, i3$1.ToastrModule], exports: [DesignerComponent] }); })();
+        DropzoneModule, i3$1.ToastrModule, TreeModule], exports: [DesignerComponent] }); })();
 
 /*
  * Public API Surface of designer