pacem 0.21.0-dilmun → 0.21.0-gerasa

package/dist/css/pacem-dark-content.min.css

@@ -1,5 +1,5 @@
 /**
- * pacem v0.21.0-dilmun (https://js.pacem.it)
+ * pacem v0.21.0-gerasa (https://js.pacem.it)
  * Copyright 2022 Pacem (https://pacem.it)
  * Licensed under MIT
  */

package/dist/css/pacem-dark-shell.min.css

@@ -1,5 +1,5 @@
 /**
- * pacem v0.21.0-dilmun (https://js.pacem.it)
+ * pacem v0.21.0-gerasa (https://js.pacem.it)
  * Copyright 2022 Pacem (https://pacem.it)
  * Licensed under MIT
  */

package/dist/css/pacem-dark.min.css

@@ -1,5 +1,5 @@
 /**
- * pacem v0.21.0-dilmun (https://js.pacem.it)
+ * pacem v0.21.0-gerasa (https://js.pacem.it)
  * Copyright 2022 Pacem (https://pacem.it)
  * Licensed under MIT
  */

package/dist/css/pacem-light-content.min.css

@@ -1,5 +1,5 @@
 /**
- * pacem v0.21.0-dilmun (https://js.pacem.it)
+ * pacem v0.21.0-gerasa (https://js.pacem.it)
  * Copyright 2022 Pacem (https://pacem.it)
  * Licensed under MIT
  */

package/dist/css/pacem-light-shell.min.css

@@ -1,5 +1,5 @@
 /**
- * pacem v0.21.0-dilmun (https://js.pacem.it)
+ * pacem v0.21.0-gerasa (https://js.pacem.it)
  * Copyright 2022 Pacem (https://pacem.it)
  * Licensed under MIT
  */

package/dist/css/pacem-light.min.css

@@ -1,5 +1,5 @@
 /**
- * pacem v0.21.0-dilmun (https://js.pacem.it)
+ * pacem v0.21.0-gerasa (https://js.pacem.it)
  * Copyright 2022 Pacem (https://pacem.it)
  * Licensed under MIT
  */

package/dist/css/pacem-phousys-content.min.css

@@ -1,5 +1,5 @@
 /**
- * pacem v0.21.0-dilmun (https://js.pacem.it)
+ * pacem v0.21.0-gerasa (https://js.pacem.it)
  * Copyright 2022 Pacem (https://pacem.it)
  * Licensed under MIT
  */

package/dist/css/pacem-phousys-shell.min.css

@@ -1,5 +1,5 @@
 /**
- * pacem v0.21.0-dilmun (https://js.pacem.it)
+ * pacem v0.21.0-gerasa (https://js.pacem.it)
  * Copyright 2022 Pacem (https://pacem.it)
  * Licensed under MIT
  */

package/dist/css/pacem-phousys.min.css

@@ -1,5 +1,5 @@
 /**
- * pacem v0.21.0-dilmun (https://js.pacem.it)
+ * pacem v0.21.0-gerasa (https://js.pacem.it)
  * Copyright 2022 Pacem (https://pacem.it)
  * Licensed under MIT
  */

package/dist/js/azure-maps.d.ts

@@ -1,5 +1,5 @@
 /**
- * pacem v0.21.0-dilmun (https://js.pacem.it)
+ * pacem v0.21.0-gerasa (https://js.pacem.it)
  * Copyright 2022 Pacem (https://pacem.it)
  * Licensed under MIT
  */

package/dist/js/pacem-2d.d.ts

@@ -1,5 +1,5 @@
 /**
- * pacem v0.21.0-dilmun (https://js.pacem.it)
+ * pacem v0.21.0-gerasa (https://js.pacem.it)
  * Copyright 2022 Pacem (https://pacem.it)
  * Licensed under MIT
  */
@@ -102,6 +102,9 @@ declare namespace Pacem.Drawing {
     class DrawableEvent extends UI2DEvent<Drawable> {
         constructor(type: string, args: Drawable, originalEvent: MouseEvent | TouchEvent | KeyboardEvent, m: Matrix2D);
     }
+    class StageEvent extends UI2DEvent<Stage> {
+        constructor(type: string, args: Stage, originalEvent: MouseEvent | TouchEvent | KeyboardEvent, m?: Matrix2D);
+    }
 }
 declare namespace Pacem.Components.Drawing {
     interface Stage extends Pacem.Drawing.Stage {
@@ -330,11 +333,31 @@ declare namespace Pacem.Components.Drawing {
         propertyChangedCallback(name: string, old: any, val: any, first?: boolean): void;
     }
 }
+declare namespace Pacem.Components.Drawing {
+    class AdapterUtils {
+        static stageDispatch(stage: Pacem.Drawing.Stage, type: 'down' | 'up' | 'click' | 'over' | 'out' | 'move', evt: MouseEvent | TouchEvent): void;
+        /**
+         * Dispatches a UI event related to a `Drawable` and returns a boolean that tells if the event was prevented (true) or not (false).
+         * @param target The `Drawable` instance.
+         * @param type Short event type name.
+         * @param evt The original event.
+         */
+        static itemDispatch(target: Pacem.Drawing.Drawable, type: 'down' | 'up' | 'click' | 'over' | 'out', evt: MouseEvent | TouchEvent): boolean;
+        /**
+         * Dispatches a drag event related to a `Drawable` and returns a boolean that tells if the event was prevented (true) or not (false).
+         * @param target The `Drawable` instance.
+         * @param evt The `DragDropEvent` instance.
+         * @param offset The tracked offset.
+         */
+        static itemDispatch(target: Pacem.Drawing.Drawable, evt: Pacem.UI.DragDropEvent, offset: Point): boolean;
+    }
+}
 declare namespace Pacem.Components.Drawing {
     /** Implementation postponed. Focus on SVG adapter. */
     class PacemCanvasAdapterElement extends Pacem2DAdapterElement {
         #private;
         snapshot(stage: Pacem2DElement, backgroundColor?: string): PromiseLike<Blob>;
+        private _getScreenInverseMatrix;
         getTransformMatrix(scene: Pacem2DElement): Matrix2D;
         private _dragger;
         viewActivatedCallback(): void;
@@ -348,15 +371,12 @@ declare namespace Pacem.Components.Drawing {
         private _hitTarget;
         private _pointer;
         private _scopeEvent;
-        private _canvasOffset;
-        private _clickHandler;
         private _dragging;
         private _dragInitHandler;
         private _draggingHandler;
         private _dragEndHandler;
         private _mousemoveHandler;
-        private _touchstartHandler;
-        private _itemDispatch;
+        private _mouseDownUpHandler;
         private _draw;
         private _drawImage;
         private _drawText;
@@ -386,7 +406,6 @@ declare namespace Pacem.Components.Drawing {
         private _dragEndHandler;
         private _mousemoveHandler;
         private _mouseDownUpHandler;
-        private _itemDispatch;
         private _hasItems;
         private _disposeSvg;
         private _draw;

package/dist/js/pacem-2d.js

@@ -1,5 +1,5 @@
 /**
- * pacem v0.21.0-dilmun (https://js.pacem.it)
+ * pacem v0.21.0-gerasa (https://js.pacem.it)
  * Copyright 2022 Pacem (https://pacem.it)
  * Licensed under MIT
  */
@@ -81,6 +81,12 @@ var Pacem;
             }
         }
         Drawing.DrawableEvent = DrawableEvent;
+        class StageEvent extends UI2DEvent {
+            constructor(type, args, originalEvent, m = args.transformMatrix) {
+                super(type, { detail: args, bubbles: true, cancelable: true }, originalEvent, m);
+            }
+        }
+        Drawing.StageEvent = StageEvent;
     })(Drawing = Pacem.Drawing || (Pacem.Drawing = {}));
 })(Pacem || (Pacem = {}));
 (function (Pacem) {
@@ -1032,6 +1038,55 @@ var Pacem;
 })(Pacem || (Pacem = {}));
 /// <reference path="../types.ts" />
 var Pacem;
+(function (Pacem) {
+    var Components;
+    (function (Components) {
+        var Drawing;
+        (function (Drawing) {
+            class AdapterUtils {
+                static stageDispatch(stage, type, evt) {
+                    if (stage instanceof EventTarget) {
+                        stage.dispatchEvent(new Pacem.Drawing.StageEvent('stage' + type, stage, evt, stage.transformMatrix));
+                    }
+                }
+                static itemDispatch(target, type, offset) {
+                    if (!Pacem.Utils.isNull(target)) {
+                        var dragArgs, originalEvent, evtType;
+                        if (offset instanceof Event) {
+                            originalEvent = offset;
+                        }
+                        else {
+                            dragArgs = { item: target, offset: offset };
+                        }
+                        if (typeof type === 'string') {
+                            evtType = type;
+                        }
+                        else {
+                            evtType = type.type;
+                            originalEvent = type.originalEvent;
+                        }
+                        const m = target.stage.transformMatrix;
+                        const evt = () => offset instanceof Event ? new Pacem.Drawing.DrawableEvent(evtType, target, originalEvent, m) : new Pacem.Drawing.DragEvent(evtType, { detail: dragArgs, cancelable: evtType === Pacem.UI.DragDropEventType.Init || evtType === Pacem.UI.DragDropEventType.Drag }, originalEvent, m), itemevt = offset instanceof Event ? new Pacem.Drawing.DrawableEvent('item' + evtType, target, originalEvent, m) : new Pacem.Drawing.DragEvent('item' + evtType, { detail: dragArgs, cancelable: evtType === Pacem.UI.DragDropEventType.Init || evtType === Pacem.UI.DragDropEventType.Drag }, originalEvent, m);
+                        var prevent = false;
+                        if (target instanceof EventTarget) {
+                            const evnt = evt();
+                            target.dispatchEvent(evnt);
+                            prevent = evnt.defaultPrevented;
+                        }
+                        target.stage.dispatchEvent(itemevt);
+                        // was the event (in one of its forms) rejected?
+                        return prevent || itemevt.defaultPrevented;
+                    }
+                    return false;
+                }
+            }
+            Drawing.AdapterUtils = AdapterUtils;
+        })(Drawing = Components.Drawing || (Components.Drawing = {}));
+    })(Components = Pacem.Components || (Pacem.Components = {}));
+})(Pacem || (Pacem = {}));
+/// <reference path="../types.ts" />
+/// <reference path="utils.ts" />
+var Pacem;
 (function (Pacem) {
     var Components;
     (function (Components) {
@@ -1056,20 +1111,6 @@ var Pacem;
                     this._pointer = {
                         page: { x: 0, y: 0 }, screen: { x: 0, y: 0 }, client: { x: 0, y: 0 }
                     };
-                    this._canvasOffset = { x: 0, y: 0, width: 0, height: 0 };
-                    this._clickHandler = (evt) => {
-                        const canvas = evt.srcElement;
-                        const stage = GETVAR(canvas, CANVAS_SCENE_VAR);
-                        this.draw(stage);
-                        const currentHitTarget = this._hitTarget;
-                        if (!Pacem.Utils.isNull(currentHitTarget)) {
-                            const m = currentHitTarget.stage.transformMatrix;
-                            if (currentHitTarget instanceof Element) {
-                                currentHitTarget.dispatchEvent(new Pacem.Drawing.DrawableEvent('click', currentHitTarget, evt, m));
-                            }
-                            currentHitTarget.stage.dispatchEvent(new Pacem.Drawing.DrawableEvent('itemclick', currentHitTarget, evt, m));
-                        }
-                    };
                     this._dragInitHandler = (evt) => {
                         var _a;
                         const hitTarget = this._hitTarget;
@@ -1083,7 +1124,7 @@ var Pacem;
                             initialTransformMatrix: initialMatrix,
                             parentMatrix
                         };
-                        const reject = this._itemDispatch(drawable, evt, { x: 0, y: 0 });
+                        const reject = Drawing.AdapterUtils.itemDispatch(drawable, evt, { x: 0, y: 0 });
                         if (reject) {
                             // reject dragging
                             evt.preventDefault();
@@ -1108,14 +1149,15 @@ var Pacem;
                         //console.log(GETVAR(data.item, WORLD_MATRIX_VAR));
                         //console.log(data.initialTransformMatrix);
                         const stageTransformMatrix = data.item.stage.transformMatrix;
-                        const rejected = this._itemDispatch(data.item, evt, { x: screenOffset.x * stageTransformMatrix.a + stageTransformMatrix.e, y: screenOffset.y * stageTransformMatrix.d + stageTransformMatrix.f });
+                        const rejected = Drawing.AdapterUtils.itemDispatch(data.item, evt, { x: screenOffset.x * stageTransformMatrix.a + stageTransformMatrix.e, y: screenOffset.y * stageTransformMatrix.d + stageTransformMatrix.f });
                         if (!rejected) {
                             if (data.item instanceof Pacem.Components.Drawing.UiElement) {
                                 data.item.translateX = offset.x;
                                 data.item.translateY = offset.y;
                             }
                             else {
-                                Pacem.Utils.extend(data.item, { transformMatrix: Pacem.Matrix2D.translate(data.initialTransformMatrix, offset) });
+                                const init = data.initialTransformMatrix, actual = { a: init.a, b: init.b, c: init.c, d: init.d, e: offset.x, f: offset.y };
+                                Pacem.Utils.extend(data.item, { transformMatrix: actual });
                             }
                             // console.log(data.item.transformMatrix);
                         }
@@ -1123,7 +1165,7 @@ var Pacem;
                     this._dragEndHandler = (evt) => {
                         this._dragging = false;
                         const args = evt.detail, data = args.data, transform = data.item.transformMatrix;
-                        this._itemDispatch(data.item, evt, { x: transform.e, y: transform.f });
+                        Drawing.AdapterUtils.itemDispatch(data.item, evt, { x: transform.e, y: transform.f });
                     };
                     // #endregion
                     this._mousemoveHandler = (evt) => {
@@ -1132,12 +1174,25 @@ var Pacem;
                         const canvas = evt.srcElement;
                         const stage = GETVAR(canvas, CANVAS_SCENE_VAR);
                         this._requestDraw(stage);
+                        if (!this._dragging) {
+                            if (!Pacem.Utils.isNull(this._hitTarget)) {
+                                Drawing.AdapterUtils.stageDispatch(stage, 'move', evt);
+                            }
+                        }
                     };
-                    this._touchstartHandler = (evt) => {
-                        if (evt.touches.length === 1) {
-                            this._scopeEvent = evt;
-                            this._pointer = Pacem.CustomEventUtils.getEventCoordinates(evt);
-                            // this._modifiers = CustomEventUtils.getEventKeyModifiers(evt);
+                    this._mouseDownUpHandler = (evt) => {
+                        this._scopeEvent = evt;
+                        this._pointer = Pacem.CustomEventUtils.getEventCoordinates(evt);
+                        const canvas = evt.target;
+                        if (canvas instanceof HTMLCanvasElement) {
+                            const stage = GETVAR(canvas, CANVAS_SCENE_VAR), hitTarget = this._hitTarget;
+                            const type = evt.type.replace(/^(mouse|touch)/, ''), fineType = type === 'end' ? 'click' : type;
+                            if (!Pacem.Utils.isNull(hitTarget) && hitTarget.stage === stage) {
+                                Drawing.AdapterUtils.itemDispatch(this._hitTarget, fineType, evt);
+                            }
+                            else {
+                                Drawing.AdapterUtils.stageDispatch(stage, fineType, evt);
+                            }
                         }
                     };
                     this._scenes = new WeakMap();
@@ -1153,13 +1208,13 @@ var Pacem;
                         return Promise.resolve(null);
                     }
                 }
+                _getScreenInverseMatrix(m, offset) {
+                    return Pacem.Matrix2D.invert({ a: m.a, b: m.b, c: m.c, d: m.d, e: m.e + offset.x, f: m.f + offset.y });
+                }
                 getTransformMatrix(scene) {
                     const scenes = this._scenes;
                     if (scenes.has(scene)) {
-                        const m = scenes.get(scene).transformMatrix;
-                        if (!Pacem.Utils.isNull(m)) {
-                            return Pacem.Matrix2D.invert(m);
-                        }
+                        return scenes.get(scene).screenInverseMatrix;
                     }
                     return Pacem.Matrix2D.identity;
                 }
@@ -1196,7 +1251,7 @@ var Pacem;
                             const tuple = scenes.get(scene), ctx = tuple.context;
                             ctx.canvas.width = size.width;
                             ctx.canvas.height = size.height;
-                            this._canvasOffset = Pacem.Utils.offsetRect(ctx.canvas);
+                            const offset = tuple.offset = Pacem.Utils.offsetRect(ctx.canvas);
                             // transform matrix
                             const stage = { x: 0, y: 0, width: size.width, height: size.height }, aspectRatio = scene.aspectRatio, viewbox = scene.viewbox;
                             if (!Pacem.Utils.isNullOrEmpty(viewbox)) {
@@ -1226,6 +1281,7 @@ var Pacem;
                                 const mscale = Pacem.Rect.findTransform({ x: 0, y: 0, width: viewbox.width, height: viewbox.height }, stage, mode, align, valign);
                                 const m = Pacem.Matrix2D.translate(mscale, { x: -mscale.a * viewbox.x, y: -mscale.a * viewbox.y });
                                 tuple.transformMatrix = m;
+                                tuple.screenInverseMatrix = this._getScreenInverseMatrix(m, offset);
                             }
                             else {
                                 tuple.transformMatrix = Pacem.Matrix2D.identity;
@@ -1262,12 +1318,14 @@ var Pacem;
                     SETVAR(canvas, CANVAS_SCENE_VAR, scene);
                     const context = canvas.getContext('2d');
                     canvas.addEventListener('mousemove', this._mousemoveHandler, false);
-                    canvas.addEventListener('touchstart', this._touchstartHandler, { passive: true });
-                    canvas.addEventListener('touchmove', this._touchstartHandler, { passive: true });
-                    canvas.addEventListener('touchend', this._clickHandler, { passive: true });
-                    canvas.addEventListener('click', this._clickHandler, false);
+                    canvas.addEventListener('touchstart', this._mouseDownUpHandler, { passive: true });
+                    canvas.addEventListener('touchmove', this._mouseDownUpHandler, { passive: true });
+                    canvas.addEventListener('touchend', this._mouseDownUpHandler, { passive: true });
+                    canvas.addEventListener('click', this._mouseDownUpHandler, false);
+                    canvas.addEventListener('mousedown', this._mouseDownUpHandler, false);
+                    canvas.addEventListener('mouseup', this._mouseDownUpHandler, false);
                     stage.appendChild(canvas);
-                    scenes.set(scene, { context, transformMatrix: Pacem.Matrix2D.identity });
+                    scenes.set(scene, { context, transformMatrix: Pacem.Matrix2D.identity, offset: Pacem.Utils.offsetRect(canvas), screenInverseMatrix: Pacem.Matrix2D.identity });
                     if (!Pacem.Utils.isNull(dragger)) {
                         dragger.register(canvas);
                     }
@@ -1281,10 +1339,12 @@ var Pacem;
                         if (!Pacem.Utils.isNull(dragger)) {
                             dragger.unregister(canvas);
                         }
-                        canvas.removeEventListener('click', this._clickHandler, false);
-                        canvas.removeEventListener('touchend', this._clickHandler, false);
-                        canvas.removeEventListener('touchmove', this._touchstartHandler);
-                        canvas.removeEventListener('touchstart', this._touchstartHandler);
+                        canvas.removeEventListener('click', this._mouseDownUpHandler, false);
+                        canvas.removeEventListener('touchend', this._mouseDownUpHandler, false);
+                        canvas.removeEventListener('mousedown', this._mouseDownUpHandler, false);
+                        canvas.removeEventListener('mouseup', this._mouseDownUpHandler, false);
+                        // canvas.removeEventListener('touchmove', this._mouseDownUpHandler);
+                        canvas.removeEventListener('touchstart', this._mouseDownUpHandler);
                         canvas.removeEventListener('mousemove', this._mousemoveHandler, false);
                         // remove
                         canvas.remove();
@@ -1296,7 +1356,11 @@ var Pacem;
                     if (handles.has(scene)) {
                         cancelAnimationFrame(handles.get(scene));
                     }
-                    handles.set(scene, requestAnimationFrame(() => { this.draw(scene); }));
+                    const throttle = () => {
+                        this.draw(scene);
+                        return requestAnimationFrame(() => { });
+                    };
+                    handles.set(scene, throttle());
                 }
                 draw(scene) {
                     const scenes = this._scenes, handles = this._handles;
@@ -1331,7 +1395,7 @@ var Pacem;
                         const m = tuple.transformMatrix;
                         context.setTransform(m);
                         // hit test
-                        const pointer = this._pointer, offset = this._canvasOffset, point = { x: pointer.page.x - offset.x, y: pointer.page.y - offset.y };
+                        const pointer = this._pointer, offset = tuple.offset, point = { x: pointer.page.x - offset.x, y: pointer.page.y - offset.y };
                         // draw recursively
                         for (let drawable of items) {
                             this._draw(scene, context, drawable, m, point);
@@ -1356,36 +1420,6 @@ var Pacem;
                         // this._requestDraw(scene);
                     }
                 }
-                _itemDispatch(target, type, offset) {
-                    if (!Pacem.Utils.isNull(target)) {
-                        var dragArgs, originalEvent, evtType;
-                        if (offset instanceof Event) {
-                            originalEvent = offset;
-                        }
-                        else {
-                            dragArgs = { item: target, offset: offset };
-                        }
-                        if (typeof type === 'string') {
-                            evtType = type;
-                        }
-                        else {
-                            evtType = type.type;
-                            originalEvent = type.originalEvent;
-                        }
-                        const m = Pacem.Matrix2D.multiply({ a: 1, b: 0, c: 0, d: 1, e: -this._canvasOffset.x, f: -this._canvasOffset.y }, target.stage.transformMatrix);
-                        const evt = () => offset instanceof Event ? new Pacem.Drawing.DrawableEvent(evtType, target, originalEvent, m) : new Pacem.Drawing.DragEvent(evtType, { detail: dragArgs, cancelable: evtType === Pacem.UI.DragDropEventType.Init || evtType === Pacem.UI.DragDropEventType.Drag }, originalEvent, m), itemevt = offset instanceof Event ? new Pacem.Drawing.DrawableEvent('item' + evtType, target, originalEvent, m) : new Pacem.Drawing.DragEvent('item' + evtType, { detail: dragArgs, cancelable: evtType === Pacem.UI.DragDropEventType.Init || evtType === Pacem.UI.DragDropEventType.Drag }, originalEvent, m);
-                        var prevent = false;
-                        if (target instanceof EventTarget) {
-                            const evnt = evt();
-                            target.dispatchEvent(evnt);
-                            prevent = evnt.defaultPrevented;
-                        }
-                        target.stage.dispatchEvent(itemevt);
-                        // was the event (in one of its forms) rejected?
-                        return prevent || itemevt.defaultPrevented;
-                    }
-                    return false;
-                }
                 _draw(scene, ctx, item, transform, point) {
                     var _a;
                     (_a = item.stage) !== null && _a !== void 0 ? _a : (item.stage = scene);
@@ -1480,7 +1514,7 @@ var Pacem;
                         && !item.inert /* is hit-test visible? */
                         && !Pacem.Utils.isNull(point)) {
                         const bbox = ctx.measureText(item.text);
-                        const width = bbox.width, height = bbox.actualBoundingBoxAscent + bbox.actualBoundingBoxDescent, x = item.anchor.x - bbox.actualBoundingBoxLeft, y = item.anchor.y - bbox.actualBoundingBoxAscent;
+                        const width = bbox.width, height = bbox.actualBoundingBoxAscent + bbox.actualBoundingBoxDescent, x = Math.round(item.anchor.x - bbox.actualBoundingBoxLeft), y = Math.round(item.anchor.y - bbox.actualBoundingBoxAscent);
                         const path2D = new Path2D(`M ${x} ${y} h ${width} v ${height} H ${x} z`);
                         if (hasColor && ctx.isPointInPath(path2D, point.x, point.y)) {
                             // overwrite current hit-target (last one wins)
@@ -1605,13 +1639,15 @@ var Pacem;
         })(Drawing = Components.Drawing || (Components.Drawing = {}));
     })(Components = Pacem.Components || (Pacem.Components = {}));
 })(Pacem || (Pacem = {}));
+/// <reference path="../types.ts" />
+/// <reference path="utils.ts" />
 var Pacem;
 (function (Pacem) {
     var Components;
     (function (Components) {
         var Drawing;
         (function (Drawing) {
-            const SVG_NS = 'http://www.w3.org/2000/svg', DRAWABLE_VAR = 'pacem:drawable';
+            const SVG_NS = 'http://www.w3.org/2000/svg', DRAWABLE_VAR = 'pacem:2-svg-drawable', STAGE_VAR = 'pacem:2d-svg-stage', GETVAR = Pacem.CustomElementUtils.getAttachedPropertyValue, SETVAR = Pacem.CustomElementUtils.setAttachedPropertyValue, DELVAR = Pacem.CustomElementUtils.deleteAttachedPropertyValue;
             function fallback(v, f) {
                 return Pacem.Utils.isNull(v) ? f : v;
             }
@@ -1629,12 +1665,13 @@ var Pacem;
                     super(...arguments);
                     this._hitTarget = null;
                     this._dragInitHandler = (evt) => {
-                        const args = evt.detail, el = args.element, drawable = Pacem.CustomElementUtils.getAttachedPropertyValue(el, DRAWABLE_VAR), stageTransformMatrix = drawable.stage.transformMatrix, initialMatrix = drawable.transformMatrix;
+                        var _a;
+                        const args = evt.detail, el = args.element, drawable = GETVAR(el, DRAWABLE_VAR), stageTransformMatrix = drawable.stage.transformMatrix, initialMatrix = (_a = drawable.transformMatrix) !== null && _a !== void 0 ? _a : Pacem.Matrix2D.identity;
                         args.data = {
                             stageTransformMatrix, item: drawable,
                             initialTransformMatrix: initialMatrix
                         };
-                        const reject = this._itemDispatch(drawable, evt, { x: 0, y: 0 });
+                        const reject = Drawing.AdapterUtils.itemDispatch(drawable, evt, { x: 0, y: 0 });
                         if (reject) {
                             // reject dragging
                             evt.preventDefault();
@@ -1659,7 +1696,7 @@ var Pacem;
                         //console.log(`offset: ${offset.x},${offset.y}`);
                         //console.log(data.stageTransformMatrix);
                         //console.log(el.style.transform); console.log(data.initialTransformMatrix);
-                        const rejected = this._itemDispatch(data.item, evt, stageOffset);
+                        const rejected = Drawing.AdapterUtils.itemDispatch(data.item, evt, stageOffset);
                         if (!rejected) {
                             el.style.transform = `matrix(1,0,0,1,${offset.x},${offset.y})`;
                         }
@@ -1674,10 +1711,11 @@ var Pacem;
                             data.item.translateY = transform.f;
                         }
                         else {
-                            Pacem.Utils.extend(data.item, { transformMatrix: Pacem.Matrix2D.translate(data.initialTransformMatrix, offset) });
+                            const init = data.initialTransformMatrix, actual = { a: init.a, b: init.b, c: init.c, d: init.d, e: offset.x, f: offset.y };
+                            Pacem.Utils.extend(data.item, { transformMatrix: actual });
                         }
                         el.style.transform = '';
-                        this._itemDispatch(data.item, evt, { x: transform.e, y: transform.f });
+                        Drawing.AdapterUtils.itemDispatch(data.item, evt, { x: transform.e, y: transform.f });
                     };
                     this._mousemoveHandler = (evt) => {
                         var pt = Pacem.CustomEventUtils.getEventCoordinates(evt).client;
@@ -1685,32 +1723,47 @@ var Pacem;
                             // not dragging around
                             var d = null;
                             var el = document.elementsFromPoint(pt.x, pt.y).find(i => {
-                                d = Pacem.CustomElementUtils.getAttachedPropertyValue(i, DRAWABLE_VAR);
+                                d = GETVAR(i, DRAWABLE_VAR);
                                 return d && !d.inert;
                             });
                             var old = this._hitTarget, val = d;
                             if (Pacem.Utils.isNull(d && d.stage) || !this._scenes.has(d.stage) || d.inert) {
                                 val = null;
                             }
-                            this._hitTarget = val;
+                            const hitTarget = this._hitTarget = val;
                             if (val !== old) {
                                 if (!Pacem.Utils.isNull(old)) {
                                     this._dragger.unregister(this._items.get(old));
-                                    this._itemDispatch(old, 'out', evt);
+                                    Drawing.AdapterUtils.itemDispatch(old, 'out', evt);
                                 }
                                 if (!Pacem.Utils.isNull(val)) {
                                     if (val.draggable) {
                                         this._dragger.register(this._items.get(val));
                                     }
-                                    this._itemDispatch(val, 'over', evt);
+                                    Drawing.AdapterUtils.itemDispatch(val, 'over', evt);
+                                }
+                            }
+                            if (Pacem.Utils.isNull(hitTarget)) {
+                                // dispatch only if no hit target
+                                const svg = evt.currentTarget;
+                                const stage = GETVAR(svg, STAGE_VAR);
+                                if (!Pacem.Utils.isNull(stage)) {
+                                    Drawing.AdapterUtils.stageDispatch(stage, 'move', evt);
                                 }
                             }
                         }
                     };
                     this._mouseDownUpHandler = (evt) => {
-                        if (!Pacem.Utils.isNull(this._hitTarget)) {
+                        const svg = evt.currentTarget;
+                        if (svg instanceof SVGSVGElement) {
+                            const stage = GETVAR(svg, STAGE_VAR), hitTarget = this._hitTarget;
                             const type = evt.type.replace(/^mouse/, '');
-                            this._itemDispatch(this._hitTarget, type, evt);
+                            if (!Pacem.Utils.isNull(hitTarget) && hitTarget.stage === stage) {
+                                Drawing.AdapterUtils.itemDispatch(this._hitTarget, type, evt);
+                            }
+                            else {
+                                Drawing.AdapterUtils.stageDispatch(stage, type, evt);
+                            }
                         }
                     };
                     this._scenes = new WeakMap();
@@ -1791,6 +1844,7 @@ var Pacem;
                     stage.innerHTML = '';
                     this._items = new WeakMap();
                     var svg = document.createElementNS(SVG_NS, 'svg');
+                    SETVAR(svg, STAGE_VAR, scene);
                     stage.appendChild(svg);
                     scenes.set(scene, svg);
                     const options = { passive: false, capture: true };
@@ -1811,6 +1865,7 @@ var Pacem;
                         svg.removeEventListener('mousedown', this._mouseDownUpHandler);
                         svg.removeEventListener('mouseup', this._mouseDownUpHandler);
                         // remove
+                        DELVAR(svg, STAGE_VAR);
                         svg.remove();
                         scenes.delete(scene);
                     }
@@ -1853,42 +1908,13 @@ var Pacem;
                     }
                     this._draw(scene, parent, items || [], flow, deepRedraw);
                 }
-                _itemDispatch(target, type, offset) {
-                    if (!Pacem.Utils.isNull(target)) {
-                        var dragArgs, originalEvent, evtType;
-                        if (offset instanceof Event) {
-                            originalEvent = offset;
-                        }
-                        else {
-                            dragArgs = { item: target, offset: offset };
-                        }
-                        if (typeof type === 'string') {
-                            evtType = type;
-                        }
-                        else {
-                            evtType = type.type;
-                            originalEvent = type.originalEvent;
-                        }
-                        const m = target.stage.transformMatrix;
-                        const evt = () => offset instanceof Event ? new Pacem.Drawing.DrawableEvent(evtType, target, originalEvent, m) : new Pacem.Drawing.DragEvent(evtType, { detail: dragArgs, cancelable: evtType === Pacem.UI.DragDropEventType.Init || evtType === Pacem.UI.DragDropEventType.Drag }, originalEvent, m), itemevt = offset instanceof Event ? new Pacem.Drawing.DrawableEvent('item' + evtType, target, originalEvent, m) : new Pacem.Drawing.DragEvent('item' + evtType, { detail: dragArgs, cancelable: evtType === Pacem.UI.DragDropEventType.Init || evtType === Pacem.UI.DragDropEventType.Drag }, originalEvent, m);
-                        var prevent = false;
-                        if (target instanceof EventTarget) {
-                            const evnt = evt();
-                            target.dispatchEvent(evnt);
-                            prevent = evnt.defaultPrevented;
-                        }
-                        target.stage.dispatchEvent(itemevt);
-                        // was the event (in one of its forms) rejected?
-                        return prevent || itemevt.defaultPrevented;
-                    }
-                    return false;
-                }
                 _hasItems(object) {
                     return Pacem.Drawing.isGroup(object);
                 }
                 _disposeSvg(el) {
                     if (!Pacem.Utils.isNull(el)) {
-                        var drawable = Pacem.CustomElementUtils.getAttachedPropertyValue(el, DRAWABLE_VAR);
+                        var drawable = GETVAR(el, DRAWABLE_VAR);
+                        DELVAR(el, DRAWABLE_VAR);
                         this._items.delete(drawable);
                     }
                 }
@@ -1906,7 +1932,7 @@ var Pacem;
                             let el;
                             if (!dict.has(item)) {
                                 el = this._buildSVGElement(item);
-                                Pacem.CustomElementUtils.setAttachedPropertyValue(el, DRAWABLE_VAR, item);
+                                SETVAR(el, DRAWABLE_VAR, item);
                                 this._disposeSvg(replaceChildAt(parent, el, j));
                                 dict.set(item, el);
                             }