TASK: Image collage with randomly positioned images

DistributionPackages/Neos.Presentation/Resources/Private/Fusion/Main.ts

@@ -5,6 +5,7 @@ import intersect from "@alpinejs/intersect";
 import collapse from "@alpinejs/collapse";
 import clipboard from "@ryangjchandler/alpine-clipboard";
 import typewriter from "@marcreichel/alpine-typewriter";
+import ImageCollage from "./Organism/ImageCollage/ImageCollage";
 
 // @ts-ignore
 Alpine.plugin([
@@ -18,4 +19,6 @@ Alpine.plugin([
 
 window.Alpine = Alpine;
 
+Alpine.data('ImageCollage', ImageCollage);
+
 Alpine.start();

DistributionPackages/Neos.Presentation/Resources/Private/Fusion/Organism/ImageCollage/ImageCollage.fusion

@@ -0,0 +1,48 @@
+prototype(Neos.Presentation:Module.ImageCollage) < prototype(Neos.Fusion:Component) {
+
+    @styleguide {
+        title = "Image Collage"
+        props {
+            headline.text = 'Projects created with Neos CMS'
+            description.text = 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.'
+            squareIcons = Neos.Fusion:Array
+            images = Neos.Fusion:Map {
+                items = ${['allplan', 'berchtesgadener', 'heineken', 'hitachi', 'hoerbiger', 'hogast', 'kvh', 'siga', 't3n']}
+                itemName = 'item'
+                itemRenderer = Neos.Fusion:DataStructure {
+                    src = ${StaticResource.uri('Neos.Presentation', 'Public/Assets/Styleguide/cases/' + item + '.png')}
+                    alternativeText = ${'Case ' + props.item}
+                }
+            }
+        }
+    }
+
+    @propTypes {
+        headline = PropTypes:DataStructure
+        description = PropTypes:DataStructure
+        squareIcons = PropTypes:Array
+        images = PropTypes:Array {
+            type = PropTypes:DataStructure {
+                src = PropTypes:String
+                alternativeText = PropTypes:String
+            }
+        }
+    }
+
+    renderer = afx`
+      <Neos.Presentation:Background variant="gradient">
+        <Neos.Presentation:Spacing size y>
+          <div class="grid md:grid-cols-2 items-center">
+            <Neos.Presentation:Headline {...props.headline} display="headline-lg" />
+            <Neos.Presentation:Paragraph {...props.description} display="lead" />
+          </div>
+
+          <div class="image-collage relative h-[1400px]" x-data="ImageCollage">
+            <Neos.Fusion:Loop items={props.images}>
+              <img class="hidden absolute w-[128px] h-[160px]" src={item.src} alt={item.alternativeText} />
+            </Neos.Fusion:Loop>
+          </div>
+        </Neos.Presentation:Spacing>
+      </Neos.Presentation:Background>
+    `
+}

DistributionPackages/Neos.Presentation/Resources/Private/Fusion/Organism/ImageCollage/ImageCollage.ts

@@ -0,0 +1,54 @@
+export default () => ({
+    imgPoss: [],
+    imgRendered: [],
+    maxX: 0,
+    maxY: 0,
+    padding: 30,
+    placeImg(imageTag) {
+        const { random: r } = Math;
+        const x = r() * this.maxX;
+        const y = r() * this.maxY;
+
+        let imageSize = { x: imageTag.clientWidth, y: imageTag.clientHeight };
+
+        if (!this.isOverlap(x, y, imageSize)) {
+            imageTag.style.setProperty('left', x + 'px');
+            imageTag.style.setProperty('top', y + 'px');
+            imageTag.classList.remove('hidden');
+
+            this.imgPoss.push({ x, y });
+            this.imgRendered.push(imageTag);
+        }
+    },
+    isOverlap(x, y, imageSize) {
+        // return true if overlapping
+        for (const imgPos of this.imgPoss) {
+            if (
+                x > imgPos.x - imageSize.x &&
+                x < imgPos.x + imageSize.x &&
+                y > imgPos.y - imageSize.y &&
+                y < imgPos.y + imageSize.y
+            )
+                return true;
+        }
+        console.log({ x, y });
+        console.log(this.imgPoss);
+        return false;
+    },
+    initializeMaxValues($el) {
+        this.maxX = $el.clientWidth - 128;
+        this.maxY = $el.clientHeight - 160;
+    },
+    init() {
+        console.log('ImageCollage');
+        this.initializeMaxValues(this.$el);
+        let imageTags = this.$el.querySelectorAll('img');
+
+        for (let i = 0; i < imageTags.length; ++i) {
+            let image = imageTags[i];
+            while (!this.imgRendered.includes(image)) {
+                setInterval(this.placeImg(image), 10);
+            }
+        }
+    },
+});