second attempt on containment logic using StrongComposite

dist/index.html

@@ -55,5 +55,5 @@
         })
     }
     </script>
-<script type="text/javascript" src="libqmock-f9d9d4e1044c6d17783e.js"></script></body>
+<script type="text/javascript" src="libqmock-52ed7d8dac60fff9f68a.js"></script></body>
 </html>

lib/App.js

@@ -7,10 +7,9 @@ export default function createApp( canvasContainerId, width, height ) {
 
     canvas.installEditPolicy(new draw2d.policy.canvas.CanvasPolicy({
         onMouseDown: function(canvas) {
-            const selection = canvas.getSelection()
-
-            if (selection) {
-                selection.each(function (i, figure) { figure.toFront() } )
+            const selectedFigure = canvas.getPrimarySelection()
+            if (selectedFigure && selectedFigure !== canvas.getFigures().last()) {
+                canvas.getPrimarySelection().toFront()
             }
         }
     }))

lib/draw2d/shape/composite/Container.js

@@ -0,0 +1,59 @@
+import draw2d from '@sarhanalaa/draw2d'
+
+/**
+ *
+ */
+const Container = draw2d.shape.composite.StrongComposite.extend({
+    assignFigure: function (figure) {
+        this.assignedFigures.add(figure)
+        figure.setComposite(this)
+        return this
+    },
+
+    unassignFigure: function (figure) {
+        this.assignedFigures.remove(figure)
+        figure.setComposite(null)
+        return this
+    },
+
+    onDragLeave: function(figure) {
+        this.unassignFigure(figure)
+    },
+
+    onCatch: function (droppedFigure, x, y, shiftKey, ctrlKey) {
+        if (droppedFigure.getComposite()) {
+            return
+        }
+
+        if (this.getBoundingBox().contains(droppedFigure.getBoundingBox())) {
+            this.assignFigure(droppedFigure)
+        }
+    },
+
+    setPosition: function (x, y) {
+        let oldX = this.x
+        let oldY = this.y
+
+        this._super(x, y)
+
+        let dx = this.x - oldX
+        let dy = this.y - oldY
+
+        if (dx === 0 && dy === 0) {
+          return this
+        }
+
+        this.assignedFigures.each(function (i, figure) {
+            figure.translate(dx, dy)
+        })
+
+        return this
+    },
+
+    toFront: function(figure) {
+        this._super(figure)
+    }
+
+})
+
+export default Container

lib/elements/Window.js

@@ -1,5 +1,5 @@
 import draw2d from '@sarhanalaa/draw2d'
-import StrongRaft from '../draw2d/shape/composite/StrongRaft'
+import Container from '../draw2d/shape/composite/Container'
 
 const titleLabelEditor = new draw2d.ui.LabelInplaceEditor()
 
@@ -10,33 +10,25 @@ const createWindow = ({
     titleBarBgColor = '#999',
     width = 640,
 }) => {
-    const window = new StrongRaft({
+    const window = new Container({
+        bgColor: 'rgba(255, 255, 255, .5)',
         stroke: 1,
         width,
         height
     })
 
-    const titleBar = new draw2d.shape.basic.Rectangle({
+    const titleBarLabel = new draw2d.shape.basic.Label({
         bgColor: titleBarBgColor,
+        text: title,
+        fontColor: titleBarColor,
         stroke: 0,
         height: 24,
         width
     })
 
-    const titleBarLabel = new draw2d.shape.basic.Label({
-        text: title,
-        fontColor: titleBarColor,
-        stroke: 0
-    })
-
-    window.add(titleBar, new draw2d.layout.locator.XYRelPortLocator(0, 0))
-    window.add(titleBarLabel, new draw2d.layout.locator.XYRelPortLocator(0, 0))
-
-    window.on('change:dimension', (_, { value: { width } }) => {
-        titleBar.setDimension(width, titleBar.getHeight());
-    })
+    window.add(titleBarLabel, new draw2d.layout.locator.XYAbsPortLocator(0, 0))
 
-    titleBar.on('dblclick', () => { titleLabelEditor.start(titleBarLabel) })
+    window.on('dblclick', () => { titleLabelEditor.start(titleBarLabel) })
 
     return window
 }