@rocketshow/designer 1.44.0 → 1.46.0

package/fesm2022/rocketshow-designer.mjs

@@ -28,7 +28,7 @@ import * as i11 from 'ngx-bootstrap/popover';
 import { PopoverModule } from 'ngx-bootstrap/popover';
 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 i9 from '@angular/common';
 import * as i7 from 'ngx-sortablejs-plus';
@@ -1054,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;
@@ -1078,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;
             }
         }
@@ -1087,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;
             }
         }
@@ -1324,40 +1418,92 @@ 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;
@@ -1365,22 +1511,23 @@ class FixtureService {
         else if (repeatFor[0] === 'eachPixelABC') {
             // Gets computed into an alphanumerically sorted list of all pixelKeys
             if (profile.matrix.pixelKeys) {
-                result = result.concat(this.getAllPixelKeys(profile));
+                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));
                         }
                     }
                 }
             }
-            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') {
             if (profile.matrix.pixelKeys) {
@@ -1389,7 +1536,7 @@ class FixtureService {
                         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);
+                                result.push(this.createPixel(pixel, x, y, z, profile));
                             }
                         }
                     }
@@ -1399,7 +1546,7 @@ class FixtureService {
                 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));
                         }
                     }
                 }
@@ -1412,7 +1559,7 @@ class FixtureService {
                         for (let y = 0; y < profile.matrix.pixelKeys[x].length; y++) {
                             const pixel = profile.matrix.pixelKeys[x][y][z];
                             if (pixel) {
-                                result.push(pixel);
+                                result.push(this.createPixel(pixel, x, y, z, profile));
                             }
                         }
                     }
@@ -1422,7 +1569,7 @@ class FixtureService {
                 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('Pixel ' + (x + 1) + '-' + (y + 1) + '-' + (z + 1));
+                            result.push(this.createPixel(null, x, y, z, profile));
                         }
                     }
                 }
@@ -1435,7 +1582,7 @@ class FixtureService {
                         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);
+                                result.push(this.createPixel(pixel, x, y, z, profile));
                             }
                         }
                     }
@@ -1445,7 +1592,7 @@ class FixtureService {
                 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('Pixel ' + (x + 1) + '-' + (y + 1) + '-' + (z + 1));
+                            result.push(this.createPixel(null, x, y, z, profile));
                         }
                     }
                 }
@@ -1458,7 +1605,7 @@ class FixtureService {
                         for (let x = 0; x < profile.matrix.pixelKeys.length; x++) {
                             const pixel = profile.matrix.pixelKeys[x][y][z];
                             if (pixel) {
-                                result.push(pixel);
+                                result.push(this.createPixel(pixel, x, y, z, profile));
                             }
                         }
                     }
@@ -1468,7 +1615,7 @@ class FixtureService {
                 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('Pixel ' + (x + 1) + '-' + (y + 1) + '-' + (z + 1));
+                            result.push(this.createPixel(null, x, y, z, profile));
                         }
                     }
                 }
@@ -1481,7 +1628,7 @@ class FixtureService {
                         for (let y = 0; y < profile.matrix.pixelKeys[x].length; y++) {
                             const pixel = profile.matrix.pixelKeys[x][y][z];
                             if (pixel) {
-                                result.push(pixel);
+                                result.push(this.createPixel(pixel, x, y, z, profile));
                             }
                         }
                     }
@@ -1491,7 +1638,7 @@ class FixtureService {
                 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('Pixel ' + (x + 1) + '-' + (y + 1) + '-' + (z + 1));
+                            result.push(this.createPixel(null, x, y, z, profile));
                         }
                     }
                 }
@@ -1504,7 +1651,7 @@ class FixtureService {
                         for (let x = 0; x < profile.matrix.pixelKeys.length; x++) {
                             const pixel = profile.matrix.pixelKeys[x][y][z];
                             if (pixel) {
-                                result.push(pixel);
+                                result.push(this.createPixel(pixel, x, y, z, profile));
                             }
                         }
                     }
@@ -1514,7 +1661,7 @@ class FixtureService {
                 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('Pixel ' + (x + 1) + '-' + (y + 1) + '-' + (z + 1));
+                            result.push(this.createPixel(null, x, y, z, profile));
                         }
                     }
                 }
@@ -1564,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;
         }
@@ -1575,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);
                             }
                         }
                     }
@@ -1594,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);
                                     }
                                 }
                             }
@@ -1614,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);
                                     }
                                 }
                             }
@@ -1631,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) {
@@ -1649,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;
             }
         }
@@ -1668,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);
             }
         }
@@ -1788,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, [{
@@ -1796,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() {
@@ -2008,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);
                 }
             }
@@ -2276,7 +2429,7 @@ class PresetService {
                     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,
@@ -3219,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,
@@ -3230,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) {
@@ -3240,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;
             }
         }
@@ -3564,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)
@@ -3675,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;
@@ -3686,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) {
@@ -3791,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) {
@@ -3801,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
@@ -3878,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() {
@@ -3928,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();
@@ -3947,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) {
@@ -3980,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();
@@ -4022,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;
@@ -4101,6 +4307,8 @@ class PreviewComponent {
         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();
         });
@@ -4116,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`);
             }
         }
     }
@@ -4138,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) {
@@ -4176,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
@@ -4183,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() {
@@ -4425,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);
             }
         }
@@ -4441,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);
                 }
             }
@@ -5734,11 +5975,11 @@ 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);
                 }
             }
@@ -7411,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,
@@ -7999,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,
@@ -8110,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,
@@ -8547,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);
@@ -8581,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();
@@ -8650,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;
@@ -8669,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;
@@ -8766,6 +9011,7 @@ class FixtureSettingsPositionComponent {
         for (const fixture of this.fixtureService.selectedSettingsFixtures) {
             fixture.positioning = positioning;
         }
+        this.updated();
     }
     changePositionManual(position, value) {
         if (isNaN(value)) {
@@ -8803,6 +9049,7 @@ class FixtureSettingsPositionComponent {
                 }
             }
         }
+        this.updated();
     }
     changeRotationManual(rotation, value) {
         if (isNaN(value) || value < this.rotationMin || value > this.rotationMax) {
@@ -8828,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);
@@ -8845,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) {
@@ -8863,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) {
@@ -8987,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,
@@ -9593,7 +9842,7 @@ 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, 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}"] }); }
+        } }, 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,
@@ -10243,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,
@@ -10595,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,