@visactor/vrender-core 1.1.12 → 1.1.13

package/dist/index.es.js

@@ -1336,13 +1336,14 @@ class FederatedEvent {
         }
     }
     preventDefault() {
+        var _a;
         try {
             if (this.nativeEvent instanceof Event && this.nativeEvent.cancelable) {
                 this.nativeEvent.preventDefault();
             }
         }
         catch (err) {
-            this.nativeEvent.preventDefault &&
+            ((_a = this.nativeEvent) === null || _a === void 0 ? void 0 : _a.preventDefault) &&
                 isFunction(this.nativeEvent.preventDefault) &&
                 this.nativeEvent.preventDefault();
         }
@@ -1515,6 +1516,43 @@ class CustomEvent extends FederatedEvent {
     }
 }
 
+class InputSource {
+    constructor() {
+        this.listeners = {};
+        this.source = {
+            on: (type, listener) => {
+                var _a;
+                this.listeners[type] = ((_a = this.listeners[type]) !== null && _a !== void 0 ? _a : []).concat(listener);
+            },
+            off: (type, listener) => {
+                const list = this.listeners[type];
+                if (list) {
+                    this.listeners[type] = list.filter(fn => fn !== listener);
+                }
+            }
+        };
+    }
+    emit(type, event, valid) {
+        const list = this.listeners[type];
+        if (!list) {
+            return;
+        }
+        const originalType = event.type;
+        event.type = type;
+        try {
+            for (let i = 0; i < list.length && valid(); i++) {
+                list[i](event);
+            }
+        }
+        finally {
+            event.type = originalType;
+        }
+    }
+    clear() {
+        this.listeners = {};
+    }
+}
+
 const WILDCARD = '*';
 
 const clock = typeof performance === 'object' && performance.now ? performance : Date;
@@ -1524,6 +1562,16 @@ function isMouseLike(pointerType) {
     return pointerType === 'mouse' || pointerType === 'pen';
 }
 const DEFAULT_CLICK_INTERVAL = 200;
+const TOUCH_INPUT_TYPES = {
+    pointerdown: 'touchstart',
+    pointermove: 'touchmove',
+    pointerup: 'touchend'
+};
+const MOUSE_INPUT_TYPES = {
+    pointerdown: 'mousedown',
+    pointermove: 'mousemove',
+    pointerup: 'mouseup'
+};
 class EventManager {
     constructor(root, config) {
         this.dispatch = new EventEmitter();
@@ -1533,12 +1581,26 @@ class EventManager {
             trackingData: {}
         };
         this.eventPool = new Map();
+        this.canvasInput = new InputSource();
+        this.windowInput = new InputSource();
+        this.input = { canvas: this.canvasInput.source, window: this.windowInput.source };
+        this.currentGeneration = 0;
+        this.terminalDepth = 0;
+        this.inputValid = () => !!this.rootTarget &&
+            (this.terminalDepth > 0 || !this.currentTracking || this.currentTracking.generation === this.currentGeneration);
+        this.onPointerCancel = (from) => {
+            if (from instanceof FederatedPointerEvent) {
+                this.cancelPointer(from.pointerId);
+            }
+        };
         this.onPointerDown = (from, target) => {
             if (!(from instanceof FederatedPointerEvent)) {
                 Logger.getInstance().warn('EventManager cannot map a non-pointer event as a pointer event');
                 return;
             }
             const e = this.createPointerEvent(from, from.type, target);
+            const trackingData = this.trackingData(from.pointerId);
+            trackingData.pressTargetsByButton[from.button] = e.composedPath();
             this.dispatchEvent(e, 'pointerdown');
             if (e.pointerType === 'touch') {
                 this.dispatchEvent(e, 'touchstart');
@@ -1547,8 +1609,6 @@ class EventManager {
                 const isRightButton = e.button === 2;
                 this.dispatchEvent(e, isRightButton ? 'rightdown' : 'mousedown');
             }
-            const trackingData = this.trackingData(from.pointerId);
-            trackingData.pressTargetsByButton[from.button] = e.composedPath();
             this.freeEvent(e);
         };
         this.onPointerMove = (from, target) => {
@@ -1591,13 +1651,13 @@ class EventManager {
                     this.dispatchEvent(overEvent, 'mouseover');
                 }
                 let overTargetAncestor = outTarget === null || outTarget === void 0 ? void 0 : outTarget.parent;
-                while (overTargetAncestor && overTargetAncestor !== this.rootTarget.parent) {
+                while (this.inputValid() && overTargetAncestor && overTargetAncestor !== this.rootTarget.parent) {
                     if (overTargetAncestor === e.target) {
                         break;
                     }
                     overTargetAncestor = overTargetAncestor.parent;
                 }
-                const didPointerEnter = !overTargetAncestor || overTargetAncestor === this.rootTarget.parent;
+                const didPointerEnter = this.inputValid() && (!overTargetAncestor || overTargetAncestor === this.rootTarget.parent);
                 if (didPointerEnter) {
                     const enterEvent = this.clonePointerEvent(e, 'pointerenter');
                     enterEvent.eventPhase = enterEvent.AT_TARGET;
@@ -1608,7 +1668,10 @@ class EventManager {
                         outTargetAncestors.add(ancestor);
                         ancestor = ancestor.parent;
                     }
-                    while (currentTarget && currentTarget !== outTarget && currentTarget !== this.rootTarget.parent) {
+                    while (this.inputValid() &&
+                        currentTarget &&
+                        currentTarget !== outTarget &&
+                        currentTarget !== this.rootTarget.parent) {
                         if (!outTargetAncestors.has(currentTarget)) {
                             enterEvent.currentTarget = currentTarget;
                             this.notifyTarget(enterEvent);
@@ -1627,12 +1690,14 @@ class EventManager {
             if (e.pointerType === 'touch') {
                 this[propagationMethod](e, 'touchmove');
             }
-            if (isMouse) {
+            if (isMouse && this.inputValid()) {
                 this[propagationMethod](e, 'mousemove');
                 this.cursorTarget = e.target;
                 this.cursor = ((_b = (_a = e.target) === null || _a === void 0 ? void 0 : _a.attribute) === null || _b === void 0 ? void 0 : _b.cursor) || this.rootTarget.getCursor();
             }
-            trackingData.overTargets = e.composedPath();
+            if (this.inputValid()) {
+                trackingData.overTargets = e.composedPath();
+            }
             this.freeEvent(e);
         };
         this.onPointerOver = (from, target) => {
@@ -1648,13 +1713,13 @@ class EventManager {
             if (isMouse) {
                 this.dispatchEvent(e, 'mouseover');
             }
-            if (e.pointerType === 'mouse') {
+            if (e.pointerType === 'mouse' && this.inputValid()) {
                 this.cursorTarget = e.target;
                 this.cursor = ((_b = (_a = e.target) === null || _a === void 0 ? void 0 : _a.attribute) === null || _b === void 0 ? void 0 : _b.cursor) || this.rootTarget.getCursor();
             }
             const enterEvent = this.clonePointerEvent(e, 'pointerenter');
             enterEvent.eventPhase = enterEvent.AT_TARGET;
-            while (enterEvent.target && enterEvent.target !== this.rootTarget.parent) {
+            while (this.inputValid() && enterEvent.target && enterEvent.target !== this.rootTarget.parent) {
                 enterEvent.currentTarget = enterEvent.target;
                 this.notifyTarget(enterEvent);
                 if (isMouse) {
@@ -1662,7 +1727,9 @@ class EventManager {
                 }
                 enterEvent.target = enterEvent.target.parent;
             }
-            trackingData.overTargets = e.composedPath();
+            if (this.inputValid()) {
+                trackingData.overTargets = e.composedPath();
+            }
             this.freeEvent(e);
             this.freeEvent(enterEvent);
         };
@@ -1682,7 +1749,7 @@ class EventManager {
                 }
                 const leaveEvent = this.createPointerEvent(from, 'pointerleave', outTarget || undefined);
                 leaveEvent.eventPhase = leaveEvent.AT_TARGET;
-                while (leaveEvent.target && leaveEvent.target !== this.rootTarget.parent) {
+                while (this.inputValid() && leaveEvent.target && leaveEvent.target !== this.rootTarget.parent) {
                     leaveEvent.currentTarget = leaveEvent.target;
                     this.notifyTarget(leaveEvent);
                     if (isMouse) {
@@ -1705,6 +1772,9 @@ class EventManager {
             }
             const now = clock.now();
             const e = this.createPointerEvent(from, from.type, target);
+            const trackingData = this.trackingData(from.pointerId);
+            trackingData.ending = trackingData.pressTargetsByButton[from.button];
+            delete trackingData.pressTargetsByButton[from.button];
             this.dispatchEvent(e, 'pointerup');
             if (e.pointerType === 'touch') {
                 this.dispatchEvent(e, 'touchend');
@@ -1713,8 +1783,7 @@ class EventManager {
                 const isRightButton = e.button === 2;
                 this.dispatchEvent(e, isRightButton ? 'rightup' : 'mouseup');
             }
-            const trackingData = this.trackingData(from.pointerId);
-            const pressTarget = this.findMountedTarget(trackingData.pressTargetsByButton[from.button]);
+            const pressTarget = this.findMountedTarget(trackingData.ending);
             let clickTarget = pressTarget;
             if (pressTarget && !e.composedPath().includes(pressTarget)) {
                 let currentTarget = pressTarget;
@@ -1733,7 +1802,8 @@ class EventManager {
                 delete trackingData.pressTargetsByButton[from.button];
                 clickTarget = currentTarget;
             }
-            if (clickTarget) {
+            this.emitPointerInput(e, 'pointerup');
+            if (clickTarget && this.inputValid()) {
                 const clickEvent = this.clonePointerEvent(e, 'click');
                 clickEvent.target = clickTarget;
                 clickEvent.path = [];
@@ -1758,17 +1828,22 @@ class EventManager {
                 clickEvent.detail = clickHistory.clickCount;
                 if (isMouseLike(clickEvent.pointerType)) {
                     this.dispatchEvent(clickEvent, 'click');
+                    this.emitInput(clickEvent, 'click');
                     if (clickHistory.clickCount === 2) {
                         this.dispatchEvent(clickEvent, 'dblclick');
+                        this.emitInput(clickEvent, 'dblclick');
                     }
                 }
                 else if (clickEvent.pointerType === 'touch' && this._config.supportsTouchEvents) {
                     this.dispatchEvent(clickEvent, 'tap');
+                    this.emitInput(clickEvent, 'tap');
                     if (clickHistory.clickCount === 2) {
                         this.dispatchEvent(clickEvent, 'dbltap');
+                        this.emitInput(clickEvent, 'dbltap');
                     }
                 }
                 this.dispatchEvent(clickEvent, 'pointertap');
+                this.emitInput(clickEvent, 'pointertap');
                 this.freeEvent(clickEvent);
             }
             this.freeEvent(e);
@@ -1779,7 +1854,9 @@ class EventManager {
                 return;
             }
             const trackingData = this.trackingData(from.pointerId);
-            const pressTarget = this.findMountedTarget(trackingData.pressTargetsByButton[from.button]);
+            trackingData.ending = trackingData.pressTargetsByButton[from.button];
+            delete trackingData.pressTargetsByButton[from.button];
+            const pressTarget = this.findMountedTarget(trackingData.ending);
             const e = this.createPointerEvent(from, from.type, target);
             if (pressTarget) {
                 let currentTarget = pressTarget;
@@ -1796,6 +1873,7 @@ class EventManager {
                 }
                 delete trackingData.pressTargetsByButton[from.button];
             }
+            this.emitPointerInput(e, 'pointerup');
             this.freeEvent(e);
         };
         this.onWheel = (from, target) => {
@@ -1817,8 +1895,159 @@ class EventManager {
         this.addEventMapping('pointerover', this.onPointerOver);
         this.addEventMapping('pointerup', this.onPointerUp);
         this.addEventMapping('pointerupoutside', this.onPointerUpOutside);
+        this.addEventMapping('pointercancel', this.onPointerCancel);
         this.addEventMapping('wheel', this.onWheel);
     }
+    hasPointer(id) {
+        const data = this.mappingState.trackingData[id];
+        if (!data) {
+            return false;
+        }
+        if (data.inside || data.ending) {
+            return true;
+        }
+        for (const button in data.pressTargetsByButton) {
+            if (data.pressTargetsByButton[button]) {
+                return true;
+            }
+        }
+        return false;
+    }
+    cancelAllPointers() {
+        for (const id in this.mappingState.trackingData) {
+            this.cancelPointer(Number(id));
+        }
+    }
+    cancelPointer(id) {
+        var _a;
+        if (!this.rootTarget || !this.hasPointer(id)) {
+            return;
+        }
+        const data = this.trackingData(id);
+        let press = data.ending;
+        for (const button in data.pressTargetsByButton) {
+            press = data.pressTargetsByButton[button];
+            break;
+        }
+        const over = data.overTargets;
+        const inside = data.inside;
+        data.generation++;
+        data.pressTargetsByButton = {};
+        data.clicksByButton = {};
+        data.ending = undefined;
+        data.inside = false;
+        data.overTargets = [];
+        if (this.dispatchingEvent instanceof FederatedPointerEvent && this.dispatchingEvent.pointerId === id) {
+            this.dispatchingEvent.stopImmediatePropagation();
+        }
+        const event = this.allocateEvent(FederatedPointerEvent);
+        event.type = 'pointercancel';
+        event.pointerId = id;
+        event.pointerType = data.pointerType;
+        event.button = data.button;
+        event.nativeEvent = null;
+        event.canvas.x = data.canvasX;
+        event.canvas.y = data.canvasY;
+        event.viewport.x = data.viewX;
+        event.viewport.y = data.viewY;
+        event.target = (_a = this.findMountedTarget(press)) !== null && _a !== void 0 ? _a : this.findMountedTarget(over);
+        this.terminalDepth++;
+        try {
+            this.dispatchEvent(event);
+            if (event.pointerType === 'touch') {
+                this.dispatchEvent(event, 'touchcancel');
+            }
+            this.windowInput.emit('pointercancel', event, this.inputValid);
+            if (event.pointerType === 'touch') {
+                this.windowInput.emit('touchcancel', event, this.inputValid);
+            }
+            if (inside) {
+                this.canvasInput.emit('pointercancel', event, this.inputValid);
+                if (event.pointerType === 'touch') {
+                    this.canvasInput.emit('touchcancel', event, this.inputValid);
+                }
+                this.emitBoundary(event, false);
+            }
+            if ((over === null || over === void 0 ? void 0 : over.length) && this.rootTarget) {
+                event.target = this.findMountedTarget(over);
+                event.path = [];
+                this.dispatchEvent(event, 'pointerout');
+                if (isMouseLike(event.pointerType)) {
+                    this.dispatchEvent(event, 'mouseout');
+                }
+                event.eventPhase = event.AT_TARGET;
+                while (event.target && this.rootTarget) {
+                    event.currentTarget = event.target;
+                    this.notifyTarget(event, 'pointerleave');
+                    if (isMouseLike(event.pointerType)) {
+                        this.notifyTarget(event, 'mouseleave');
+                    }
+                    event.target = event.target.parent;
+                }
+            }
+        }
+        finally {
+            this.terminalDepth--;
+            this.freeEvent(event);
+            this.cursorTarget = null;
+            this.cursor = '';
+        }
+    }
+    emitBoundary(event, inside) {
+        this.canvasInput.emit(inside ? 'pointerover' : 'pointerout', event, this.inputValid);
+        this.canvasInput.emit(inside ? 'pointerenter' : 'pointerleave', event, this.inputValid);
+        if (isMouseLike(event.pointerType)) {
+            this.canvasInput.emit(inside ? 'mouseover' : 'mouseout', event, this.inputValid);
+            this.canvasInput.emit(inside ? 'mouseenter' : 'mouseleave', event, this.inputValid);
+        }
+    }
+    emitInput(event, type = event.type) {
+        if (!this.inputValid()) {
+            return;
+        }
+        this.windowInput.emit(type, event, this.inputValid);
+        if (!this.inputValid()) {
+            return;
+        }
+        const data = event instanceof FederatedPointerEvent ? this.trackingData(event.pointerId) : undefined;
+        if (data && data.previousInside !== data.inside) {
+            data.previousInside = data.inside;
+            this.emitBoundary(event, data.inside);
+        }
+        if (!data || data.inside) {
+            this.canvasInput.emit(type, event, this.inputValid);
+        }
+    }
+    emitPointerInput(event, type = event.type) {
+        if (!this.inputValid()) {
+            return;
+        }
+        if (type === 'pointerover' || type === 'pointerout' || type === 'pointerleave') {
+            const data = this.trackingData(event.pointerId);
+            if (data.previousInside !== data.inside) {
+                data.previousInside = data.inside;
+                this.emitBoundary(event, data.inside);
+            }
+            return;
+        }
+        this.emitInput(event, type);
+        if (event.pointerType === 'touch') {
+            const alias = TOUCH_INPUT_TYPES[type];
+            if (alias) {
+                this.emitInput(event, alias);
+            }
+        }
+        else if (isMouseLike(event.pointerType)) {
+            const alias = event.button === 2 && type === 'pointerdown'
+                ? 'rightdown'
+                : event.button === 2 && type === 'pointerup'
+                    ? 'rightup'
+                    : MOUSE_INPUT_TYPES[type];
+            if (alias) {
+                this.emitInput(event, alias);
+            }
+        }
+    }
     addEventMapping(type, fn) {
         if (!this.mappingTable[type]) {
             this.mappingTable[type] = [];
@@ -1830,41 +2059,90 @@ class EventManager {
         this.mappingTable[type].sort((a, b) => a.priority - b.priority);
     }
     dispatchEvent(e, type) {
+        if (!this.inputValid()) {
+            return;
+        }
+        const previous = this.dispatchingEvent;
+        this.dispatchingEvent = e;
         e.propagationStopped = false;
         e.propagationImmediatelyStopped = false;
-        this.propagate(e, type);
-        this.dispatch.emit(type || e.type, e);
+        try {
+            this.propagate(e, type);
+            if (this.inputValid()) {
+                this.dispatch.emit(type || e.type, e);
+            }
+        }
+        finally {
+            this.dispatchingEvent = previous;
+        }
     }
-    mapEvent(e) {
-        var _a, _b, _c, _d, _e, _f, _g;
+    mapEvent(e, inViewport = true) {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
         if (!this.rootTarget) {
             return;
         }
-        const mappers = this.mappingTable[e.type];
-        let target;
-        const cacheKey = `${e.canvasX}-${e.canvasY}`;
-        if (((_a = this._prePointTargetCache) === null || _a === void 0 ? void 0 : _a[cacheKey]) &&
-            ((_c = (_b = this._prePointTargetCache) === null || _b === void 0 ? void 0 : _b[cacheKey]) === null || _c === void 0 ? void 0 : _c.stage) &&
-            ((_e = (_d = this._prePointTargetCache) === null || _d === void 0 ? void 0 : _d[cacheKey]) === null || _e === void 0 ? void 0 : _e.stage.renderCount) ===
-                ((_f = this._prePointTargetCache) === null || _f === void 0 ? void 0 : _f.stageRenderCount)) {
-            target = this._prePointTargetCache[cacheKey];
-        }
-        else {
-            target = this.pickTarget(e.viewX, e.viewY, e);
-            if (!e.pickParams) {
-                this._prePointTargetCache = {
-                    [cacheKey]: target,
-                    stageRenderCount: (_g = target === null || target === void 0 ? void 0 : target.stage.renderCount) !== null && _g !== void 0 ? _g : -1
-                };
+        const previous = this.currentTracking;
+        const generation = this.currentGeneration;
+        const tracking = e instanceof FederatedPointerEvent ? this.trackingData(e.pointerId) : undefined;
+        this.currentTracking = tracking;
+        this.currentGeneration = (_a = tracking === null || tracking === void 0 ? void 0 : tracking.generation) !== null && _a !== void 0 ? _a : 0;
+        if (tracking) {
+            tracking.previousInside = tracking.inside;
+            tracking.inside = inViewport;
+            tracking.pointerType = e.pointerType;
+            tracking.button = e.button;
+            tracking.canvasX = e.canvasX;
+            tracking.canvasY = e.canvasY;
+            tracking.viewX = e.viewX;
+            tracking.viewY = e.viewY;
+        }
+        const type = e.type === 'pointerup' && !inViewport ? 'pointerupoutside' : e.type;
+        const mappers = this.mappingTable[type];
+        try {
+            let target;
+            const cacheKey = `${e.canvasX}-${e.canvasY}`;
+            if (!inViewport) {
+                target = null;
             }
-        }
-        if (mappers) {
-            for (let i = 0, j = mappers.length; i < j; i++) {
-                mappers[i].fn(e, target);
+            else if (((_b = this._prePointTargetCache) === null || _b === void 0 ? void 0 : _b[cacheKey]) &&
+                ((_d = (_c = this._prePointTargetCache) === null || _c === void 0 ? void 0 : _c[cacheKey]) === null || _d === void 0 ? void 0 : _d.stage) &&
+                ((_f = (_e = this._prePointTargetCache) === null || _e === void 0 ? void 0 : _e[cacheKey]) === null || _f === void 0 ? void 0 : _f.stage.renderCount) ===
+                    ((_g = this._prePointTargetCache) === null || _g === void 0 ? void 0 : _g.stageRenderCount)) {
+                target = this._prePointTargetCache[cacheKey];
+            }
+            else {
+                target = this.pickTarget(e.viewX, e.viewY, e);
+                if (!e.pickParams) {
+                    this._prePointTargetCache = {
+                        [cacheKey]: target,
+                        stageRenderCount: (_h = target === null || target === void 0 ? void 0 : target.stage.renderCount) !== null && _h !== void 0 ? _h : -1
+                    };
+                }
+            }
+            if (mappers) {
+                for (let i = 0, j = mappers.length; i < j && this.inputValid(); i++) {
+                    mappers[i].fn(e, target);
+                }
+            }
+            else {
+                Logger.getInstance().warn(`[EventManager]: Event mapping not defined for ${e.type}`);
+            }
+            if (e instanceof FederatedPointerEvent &&
+                type !== 'pointerup' &&
+                type !== 'pointerupoutside' &&
+                type !== 'pointercancel') {
+                this.emitPointerInput(e);
+            }
+            else if (e instanceof FederatedWheelEvent) {
+                this.emitInput(e);
             }
         }
-        else {
-            Logger.getInstance().warn(`[EventManager]: Event mapping not defined for ${e.type}`);
+        finally {
+            if (tracking) {
+                tracking.ending = undefined;
+            }
+            this.currentTracking = previous;
+            this.currentGeneration = generation;
         }
     }
     propagate(e, type) {
@@ -1908,13 +2186,17 @@ class EventManager {
         return propagationPath;
     }
     notifyTarget(e, type) {
+        if (!this.inputValid()) {
+            e.stopImmediatePropagation();
+            return;
+        }
         if (this.pauseNotify) {
             return;
         }
         type = type !== null && type !== void 0 ? type : e.type;
         const key = e.eventPhase === e.CAPTURING_PHASE || e.eventPhase === e.AT_TARGET ? `${type}capture` : type;
         this.notifyListeners(e, key);
-        if (e.eventPhase === e.AT_TARGET) {
+        if (e.eventPhase === e.AT_TARGET && this.inputValid() && !e.propagationImmediatelyStopped) {
             this.notifyListeners(e, type);
         }
     }
@@ -1941,7 +2223,7 @@ class EventManager {
         this.copyData(from, event);
         event.nativeEvent = from.nativeEvent;
         event.originalEvent = from;
-        if (target) {
+        if (target !== undefined) {
             event.target = target;
         }
         else {
@@ -2030,6 +2312,9 @@ class EventManager {
     trackingData(id) {
         if (!this.mappingState.trackingData[id]) {
             this.mappingState.trackingData[id] = {
+                generation: 0,
+                inside: false,
+                previousInside: false,
                 pressTargetsByButton: {},
                 clicksByButton: {},
                 overTarget: null
@@ -2052,6 +2337,11 @@ class EventManager {
     }
     freeEvent(event) {
         var _a;
+        event.nativeEvent = null;
+        event.originalEvent = null;
+        if (!this.rootTarget) {
+            return;
+        }
         if (event.manager !== this) {
             throw new Error('It is illegal to free an event not managed by this EventManager!');
         }
@@ -2069,6 +2359,9 @@ class EventManager {
         (_a = this.eventPool.get(constructor)) === null || _a === void 0 ? void 0 : _a.push(event);
     }
     notifyListeners(e, type) {
+        if (!this.inputValid() || !e.currentTarget) {
+            return;
+        }
         const events = e.currentTarget._events;
         const listeners = events[type];
         if (listeners) {
@@ -2079,7 +2372,7 @@ class EventManager {
                 listeners.fn.call(listeners.context, e);
             }
             else {
-                for (let i = 0, j = listeners.length; i < j && !e.propagationImmediatelyStopped; i++) {
+                for (let i = 0, j = listeners.length; i < j && this.inputValid() && !e.propagationImmediatelyStopped; i++) {
                     if (listeners[i].once) {
                         e.currentTarget.removeEventListener(type, listeners[i].fn, { once: true });
                     }
@@ -2087,9 +2380,14 @@ class EventManager {
                 }
             }
         }
-        this.emitDelegation(e, type);
+        if (this.inputValid()) {
+            this.emitDelegation(e, type);
+        }
     }
     emitDelegation(e, type) {
+        if (!this.inputValid() || !e.currentTarget) {
+            return;
+        }
         const events = e.currentTarget._events;
         const listeners = events[WILDCARD];
         if (listeners) {
@@ -2097,7 +2395,7 @@ class EventManager {
                 listeners.fn.call(listeners.context, e, type);
             }
             else {
-                for (let i = 0, j = listeners.length; i < j && !e.propagationImmediatelyStopped; i++) {
+                for (let i = 0, j = listeners.length; i < j && this.inputValid() && !e.propagationImmediatelyStopped; i++) {
                     listeners[i].fn.call(listeners[i].context, e, type);
                 }
             }
@@ -2124,11 +2422,15 @@ class EventManager {
         return target;
     }
     release() {
+        var _a;
         this.dispatch.removeAllListeners();
         this.eventPool.clear();
         this.rootTarget = null;
         this.mappingTable = null;
-        this.mappingState = null;
+        this.mappingState = { trackingData: {} };
+        this.canvasInput.clear();
+        this.windowInput.clear();
+        (_a = this.dispatchingEvent) === null || _a === void 0 ? void 0 : _a.stopImmediatePropagation();
         this.cursorTarget = null;
     }
 }
@@ -2162,70 +2464,15 @@ const TOUCH_TO_POINTER = {
 class EventSystem {
     constructor(params) {
         this.resolution = 1;
-        this.onPointerDown = (nativeEvent) => {
-            if (this.supportsTouchEvents && nativeEvent.pointerType === 'touch') {
-                return;
-            }
-            const events = this.normalizeToPointerData(nativeEvent);
-            if (this.autoPreventDefault && events[0].isNormalized) {
-                const cancelable = nativeEvent.cancelable || !('cancelable' in nativeEvent);
-                if (cancelable) {
-                    nativeEvent.preventDefault();
-                }
-            }
-            for (let i = 0, j = events.length; i < j; i++) {
-                const nativeEvent = events[i];
-                const federatedEvent = this.bootstrapEvent(this.rootPointerEvent, nativeEvent);
-                this.manager.mapEvent(federatedEvent);
-            }
-            this.setCursor(this.manager.cursor, this.manager.cursorTarget);
-            this.rootPointerEvent.nativeEvent = null;
-        };
-        this.onPointerMove = (nativeEvent) => {
-            if (this.supportsTouchEvents && nativeEvent.pointerType === 'touch') {
-                return;
-            }
-            if (this.isEventOutsideOfTargetElement(nativeEvent)) {
-                return;
-            }
-            const normalizedEvents = this.normalizeToPointerData(nativeEvent);
-            for (let i = 0, j = normalizedEvents.length; i < j; i++) {
-                const event = this.bootstrapEvent(this.rootPointerEvent, normalizedEvents[i]);
-                this.manager.mapEvent(event);
-            }
-            this.setCursor(this.manager.cursor, this.manager.cursorTarget);
-            this.rootPointerEvent.nativeEvent = null;
-        };
-        this.onPointerUp = (nativeEvent) => {
-            if (this.supportsTouchEvents && nativeEvent.pointerType === 'touch') {
-                return;
-            }
-            const outside = this.isEventOutsideOfTargetViewPort(nativeEvent) ? 'outside' : '';
-            const normalizedEvents = this.normalizeToPointerData(nativeEvent);
-            for (let i = 0, j = normalizedEvents.length; i < j; i++) {
-                const event = this.bootstrapEvent(this.rootPointerEvent, normalizedEvents[i]);
-                event.type += outside;
-                this.manager.mapEvent(event);
-            }
-            this.setCursor(this.manager.cursor, this.manager.cursorTarget);
-            this.rootPointerEvent.nativeEvent = null;
-        };
-        this.onPointerOverOut = (nativeEvent) => {
-            if (this.supportsTouchEvents && nativeEvent.pointerType === 'touch') {
-                return;
-            }
-            const normalizedEvents = this.normalizeToPointerData(nativeEvent);
-            for (let i = 0, j = normalizedEvents.length; i < j; i++) {
-                const event = this.bootstrapEvent(this.rootPointerEvent, normalizedEvents[i]);
-                this.manager.mapEvent(event);
-            }
-            this.setCursor(this.manager.cursor, this.manager.cursorTarget);
-            this.rootPointerEvent.nativeEvent = null;
-        };
-        this.onWheel = (nativeEvent) => {
-            const wheelEvent = this.normalizeWheelEvent(nativeEvent);
-            this.manager.mapEvent(wheelEvent);
-        };
+        this.released = false;
+        this.processingInput = false;
+        this.onPointerDown = (event) => this.handleNativeEvent(event);
+        this.onPointerMove = (event) => this.handleNativeEvent(event);
+        this.onPointerUp = (event) => this.handleNativeEvent(event);
+        this.onPointerCancel = (event) => this.handleNativeEvent(event);
+        this.onPointerOverOut = (event) => this.handleNativeEvent(event);
+        this.onWheel = (event) => this.handleNativeEvent(event);
+        this.onBlur = () => this.cancelAllPointers();
         const { targetElement, resolution, rootNode, global, autoPreventDefault = false, clickInterval, supportsTouchEvents = global.supportsTouchEvents, supportsPointerEvents = global.supportsPointerEvents } = params;
         this.manager = new EventManager(rootNode, {
             clickInterval,
@@ -2244,15 +2491,25 @@ class EventSystem {
             default: 'inherit',
             pointer: 'pointer'
         };
+        this.useNativeEvents = params.useNativeEvents !== false;
         this.resolution = resolution;
         this.setTargetElement(targetElement);
     }
     release() {
-        this.removeEvents();
-        this.manager && this.manager.release();
-        this.domElement = null;
-        this.manager = null;
-        this.globalObj = null;
+        if (this.released) {
+            return;
+        }
+        this.released = true;
+        this.pendingInputs = undefined;
+        try {
+            this.manager.cancelAllPointers();
+        }
+        finally {
+            this.removeEvents();
+            this.manager.release();
+            this.domElement = null;
+            this.globalObj = null;
+        }
     }
     setCursor(mode, target) {
         if (!target && !this.manager.rootTarget.window._handler.canvas.controled) {
@@ -2282,13 +2539,118 @@ class EventSystem {
             domElement.style.cursor = mode;
         }
     }
+    get input() {
+        return this.manager.input;
+    }
+    handleNativeEvent(event, options) {
+        var _a;
+        if (this.released) {
+            return;
+        }
+        if (this.processingInput) {
+            ((_a = this.pendingInputs) !== null && _a !== void 0 ? _a : (this.pendingInputs = [])).push({
+                event,
+                options: options && {
+                    canvasPoint: { x: options.canvasPoint.x, y: options.canvasPoint.y },
+                    inViewport: options.inViewport
+                }
+            });
+            return;
+        }
+        this.processingInput = true;
+        try {
+            this.processInput(event, options);
+            this.drainInputQueue();
+        }
+        finally {
+            this.processingInput = false;
+            this.pendingInputs = undefined;
+            this.rootPointerEvent.nativeEvent = null;
+            this.rootWheelEvent.nativeEvent = null;
+        }
+    }
+    cancelPointer(pointerId) {
+        this.cancelInput(pointerId);
+    }
+    cancelAllPointers() {
+        this.cancelInput();
+    }
+    cancelInput(pointerId) {
+        if (this.released) {
+            return;
+        }
+        const processing = this.processingInput;
+        this.processingInput = true;
+        try {
+            if (pointerId === undefined) {
+                this.manager.cancelAllPointers();
+            }
+            else {
+                this.manager.cancelPointer(pointerId);
+            }
+            if (!processing) {
+                this.drainInputQueue();
+            }
+        }
+        finally {
+            this.processingInput = processing;
+            if (!processing) {
+                this.pendingInputs = undefined;
+                this.rootPointerEvent.nativeEvent = null;
+                this.rootWheelEvent.nativeEvent = null;
+            }
+        }
+    }
+    drainInputQueue() {
+        var _a;
+        while (!this.released && ((_a = this.pendingInputs) === null || _a === void 0 ? void 0 : _a.length)) {
+            const next = this.pendingInputs.shift();
+            this.processInput(next.event, next.options);
+        }
+    }
+    processInput(nativeEvent, options) {
+        var _a, _b, _c;
+        if (!options && this.supportsTouchEvents && nativeEvent.pointerType === 'touch') {
+            return;
+        }
+        if (nativeEvent.type === 'wheel') {
+            const event = this.normalizeWheelEvent(nativeEvent, options === null || options === void 0 ? void 0 : options.canvasPoint);
+            if ((_a = options === null || options === void 0 ? void 0 : options.inViewport) !== null && _a !== void 0 ? _a : !this.isEventOutsideOfTargetViewPort(nativeEvent, event)) {
+                this.manager.mapEvent(event);
+            }
+            return;
+        }
+        const events = this.normalizeToPointerData(nativeEvent);
+        if (this.autoPreventDefault && ((_b = events[0]) === null || _b === void 0 ? void 0 : _b.isNormalized) && nativeEvent.cancelable) {
+            nativeEvent.preventDefault();
+        }
+        for (let i = 0; i < events.length && !this.released; i++) {
+            const event = this.bootstrapEvent(this.rootPointerEvent, events[i], options === null || options === void 0 ? void 0 : options.canvasPoint);
+            event.nativeEvent = nativeEvent;
+            if (event.type === 'pointercancel') {
+                this.manager.cancelPointer(event.pointerId);
+                continue;
+            }
+            const inside = event.type !== 'pointerout' &&
+                event.type !== 'pointerleave' &&
+                ((_c = options === null || options === void 0 ? void 0 : options.inViewport) !== null && _c !== void 0 ? _c : !this.isEventOutsideOfTargetViewPort(nativeEvent, event));
+            if (!inside && (event.type === 'pointerdown' || !this.manager.hasPointer(event.pointerId))) {
+                continue;
+            }
+            this.manager.mapEvent(event, inside);
+        }
+        if (!options && !this.released) {
+            this.setCursor(this.manager.cursor, this.manager.cursorTarget);
+        }
+    }
     setTargetElement(element) {
         this.removeEvents();
         this.domElement = element;
         this.addEvents();
     }
     addEvents() {
-        if (this.eventsAdded || !this.domElement) {
+        var _a, _b, _c;
+        if (!this.useNativeEvents || this.eventsAdded || !this.domElement) {
             return;
         }
         const { globalObj, domElement } = this;
@@ -2296,10 +2658,12 @@ class EventSystem {
             if (globalObj.getDocument()) {
                 globalObj.addEventListener('pointermove', this.onPointerMove, true);
                 globalObj.addEventListener('pointerup', this.onPointerUp, true);
+                globalObj.addEventListener('pointercancel', this.onPointerCancel, true);
             }
             else {
                 domElement.addEventListener('pointermove', this.onPointerMove, true);
                 domElement.addEventListener('pointerup', this.onPointerUp, true);
+                domElement.addEventListener('pointercancel', this.onPointerCancel, true);
             }
             domElement.addEventListener('pointerdown', this.onPointerDown, true);
             domElement.addEventListener('pointerleave', this.onPointerOverOut, true);
@@ -2321,26 +2685,32 @@ class EventSystem {
         if (this.supportsTouchEvents) {
             domElement.addEventListener('touchstart', this.onPointerDown, true);
             domElement.addEventListener('touchend', this.onPointerUp, true);
-            domElement.addEventListener('touchmove', this.onPointerMove, true);
+            domElement.addEventListener('touchcancel', this.onPointerCancel, true);
+            domElement.addEventListener('touchmove', this.onPointerMove, { capture: true, passive: false });
         }
         domElement.addEventListener('wheel', this.onWheel, {
             capture: true
         });
+        (_c = (_b = (_a = globalObj.getDocument) === null || _a === void 0 ? void 0 : _a.call(globalObj)) === null || _b === void 0 ? void 0 : _b.defaultView) === null || _c === void 0 ? void 0 : _c.addEventListener('blur', this.onBlur);
         this.eventsAdded = true;
     }
     removeEvents() {
+        var _a, _b, _c;
         if (!this.eventsAdded || !this.domElement) {
             return;
         }
         const { globalObj, domElement } = this;
+        (_c = (_b = (_a = globalObj.getDocument) === null || _a === void 0 ? void 0 : _a.call(globalObj)) === null || _b === void 0 ? void 0 : _b.defaultView) === null || _c === void 0 ? void 0 : _c.removeEventListener('blur', this.onBlur);
         if (this.supportsPointerEvents) {
             if (globalObj.getDocument()) {
                 globalObj.removeEventListener('pointermove', this.onPointerMove, true);
                 globalObj.removeEventListener('pointerup', this.onPointerUp, true);
+                globalObj.removeEventListener('pointercancel', this.onPointerCancel, true);
             }
             else {
                 domElement.removeEventListener('pointermove', this.onPointerMove, true);
                 domElement.removeEventListener('pointerup', this.onPointerUp, true);
+                domElement.removeEventListener('pointercancel', this.onPointerCancel, true);
             }
             domElement.removeEventListener('pointerdown', this.onPointerDown, true);
             domElement.removeEventListener('pointerleave', this.onPointerOverOut, true);
@@ -2362,6 +2732,7 @@ class EventSystem {
         if (this.supportsTouchEvents) {
             domElement.removeEventListener('touchstart', this.onPointerDown, true);
             domElement.removeEventListener('touchend', this.onPointerUp, true);
+            domElement.removeEventListener('touchcancel', this.onPointerCancel, true);
             domElement.removeEventListener('touchmove', this.onPointerMove, true);
         }
         domElement.removeEventListener('wheel', this.onWheel, true);
@@ -2492,14 +2863,14 @@ class EventSystem {
         }
         return normalizedEvents;
     }
-    normalizeWheelEvent(nativeEvent) {
+    normalizeWheelEvent(nativeEvent, canvasPoint) {
         const event = this.rootWheelEvent;
         this.transferMouseData(event, nativeEvent);
         event.deltaMode = nativeEvent.deltaMode;
         event.deltaX = nativeEvent.deltaX;
         event.deltaY = nativeEvent.deltaY;
         event.deltaZ = nativeEvent.deltaZ;
-        const { x: canvasX, y: canvasY } = this.mapToCanvasPoint(nativeEvent);
+        const { x: canvasX, y: canvasY } = canvasPoint !== null && canvasPoint !== void 0 ? canvasPoint : this.mapToCanvasPoint(nativeEvent);
         event.canvas.x = canvasX;
         event.canvas.y = canvasY;
         event.global.x = canvasX;
@@ -2513,7 +2884,7 @@ class EventSystem {
         event.type = nativeEvent.type;
         return event;
     }
-    bootstrapEvent(event, nativeEvent) {
+    bootstrapEvent(event, nativeEvent, canvasPoint) {
         event.originalEvent = null;
         event.nativeEvent = nativeEvent;
         event.pointerId = nativeEvent.pointerId;
@@ -2527,7 +2898,7 @@ class EventSystem {
         event.tiltY = nativeEvent.tiltY;
         event.twist = nativeEvent.twist;
         this.transferMouseData(event, nativeEvent);
-        const { x: canvasX, y: canvasY } = this.mapToCanvasPoint(nativeEvent);
+        const { x: canvasX, y: canvasY } = canvasPoint !== null && canvasPoint !== void 0 ? canvasPoint : this.mapToCanvasPoint(nativeEvent);
         event.canvas.x = canvasX;
         event.canvas.y = canvasY;
         event.global.x = canvasX;
@@ -2568,12 +2939,12 @@ class EventSystem {
         event.page.y = nativeEvent.pageY;
         event.relatedTarget = null;
     }
-    isEventOutsideOfTargetViewPort(nativeEvent) {
+    isEventOutsideOfTargetViewPort(nativeEvent, event) {
         if (this.isEventOutsideOfTargetElement(nativeEvent)) {
             return true;
         }
         if (this.domElement.getViewBox) {
-            const p = this.mapToViewportPoint(this.mapToCanvasPoint(nativeEvent));
+            const p = event.viewport;
             const b = this.domElement.getViewBox();
             const w = b.width();
             const h = b.height();
@@ -19958,7 +20329,7 @@ class Stage extends Group {
         this.pickerServiceFactory =
             (_e = deps.pickerServiceFactory) !== null && _e !== void 0 ? _e : (deps.pickerService
                 ? () => deps.pickerService
-                : (_f = application.pickerServiceFactory) !== null && _f !== void 0 ? _f : (() => new DefaultGlobalPickerService()));
+                : ((_f = application.pickerServiceFactory) !== null && _f !== void 0 ? _f : (() => new DefaultGlobalPickerService())));
         this.window = (_g = deps.window) !== null && _g !== void 0 ? _g : this.windowFactory();
         this.renderService =
             (_l = (_k = (_h = deps.renderService) !== null && _h !== void 0 ? _h : (_j = application.renderServiceFactory) === null || _j === void 0 ? void 0 : _j.call(application)) !== null && _k !== void 0 ? _k : application.renderService) !== null && _l !== void 0 ? _l : new DefaultRenderService();
@@ -20344,6 +20715,9 @@ class Stage extends Group {
             canvasId
         });
         this.appendChild(layer);
+        if (this.interactiveLayer && layer !== this.interactiveLayer) {
+            this.appendChild(this.interactiveLayer);
+        }
         return layer;
     }
     sortLayer(cb) {
@@ -20353,6 +20727,9 @@ class Stage extends Group {
         children.forEach(c => {
             this.appendChild(c);
         });
+        if (this.interactiveLayer) {
+            this.appendChild(this.interactiveLayer);
+        }
     }
     removeLayer(ILayerId) {
         return this.removeChild(this.findChildByUid(ILayerId));
@@ -20362,12 +20739,18 @@ class Stage extends Group {
             return;
         }
         if (this.supportInteractiveLayer && !this.interactiveLayer) {
-            this.interactiveLayer = this.createLayer();
+            this.interactiveLayer = this.createLayer(undefined, this.params.interactiveLayerMode);
             this.interactiveLayer.name = '_builtin_interactive';
             this.interactiveLayer.attribute.pickable = false;
             this.nextFrameRenderLayerSet.add(this.interactiveLayer);
         }
     }
+    prepareRenderLayers() {
+        if (this.params.interactiveLayerMode === 'virtual') {
+            this.tryInitInteractiveLayer();
+        }
+        this.layerService.prepareStageLayer(this);
+    }
     clearViewBox(color) {
         this.window.clearViewBox(color);
     }
@@ -20375,14 +20758,18 @@ class Stage extends Group {
         if (this.releaseStatus === 'released') {
             return;
         }
+        if (this.params.requestRender) {
+            this.params.requestRender();
+            return;
+        }
         this.startAnimate();
         const state = this.state;
         this.state = 'rendering';
-        this.layerService.prepareStageLayer(this);
         if (!this._skipRender) {
             this.lastRenderparams = params;
             this.hooks.beforeRender.call(this);
             if (!this._skipRender) {
+                this.prepareRenderLayers();
                 this.renderLayerList(this.children);
                 this.combineLayersToWindow();
                 this.nextFrameRenderLayerSet.clear();
@@ -20408,6 +20795,15 @@ class Stage extends Group {
         return;
     }
     renderNextFrame(layers, force) {
+        if (this.releaseStatus === 'released') {
+            return;
+        }
+        if (this.params.requestRender) {
+            if (this.state !== 'rendering') {
+                this.params.requestRender();
+            }
+            return;
+        }
         if (this.nextFrameRenderLayerSet.size !== this.childrenCount) {
             (layers || this).forEach((layer) => {
                 this.nextFrameRenderLayerSet.add(layer);
@@ -20435,10 +20831,10 @@ class Stage extends Group {
         this.startAnimate();
         const state = this.state;
         this.state = 'rendering';
-        this.layerService.prepareStageLayer(this);
         if (this.nextFrameRenderLayerSet.size && !this._skipRender) {
             this.hooks.beforeRender.call(this);
             if (!this._skipRender) {
+                this.prepareRenderLayers();
                 this.renderLayerList(Array.from(this.nextFrameRenderLayerSet.values()), this.lastRenderparams || {});
                 this.combineLayersToWindow();
                 this.nextFrameRenderLayerSet.clear();
@@ -20605,20 +21001,35 @@ class Stage extends Group {
         const layer = this.children.filter(layer => layer.name === name);
         return layer[0];
     }
-    renderTo(window) {
+    renderTo(window, _params, options) {
         if (this.releaseStatus === 'released') {
             return;
         }
-        this.forEachChildren((layer, i) => {
-            layer.drawTo(window, {
-                renderService: this.renderService,
-                viewBox: window.getViewBox(),
-                transMatrix: window.getViewBoxTransform(),
-                background: layer === this.defaultLayer ? this.background : undefined,
-                clear: i === 0,
-                updateBounds: !!(this.dirtyBounds && !this.dirtyBounds.empty())
+        const state = this.state;
+        this.state = 'rendering';
+        try {
+            if (this.params.requestRender) {
+                this.hooks.beforeRender.call(this);
+            }
+            this.prepareRenderLayers();
+            this.forEachChildren((layer, i) => {
+                var _a, _b;
+                layer.drawTo(window, {
+                    renderService: this.renderService,
+                    viewBox: (_a = options === null || options === void 0 ? void 0 : options.viewBox) !== null && _a !== void 0 ? _a : window.getViewBox(),
+                    transMatrix: (_b = options === null || options === void 0 ? void 0 : options.transMatrix) !== null && _b !== void 0 ? _b : window.getViewBoxTransform(),
+                    background: layer === this.defaultLayer ? this.background : undefined,
+                    clear: i === 0 && (options === null || options === void 0 ? void 0 : options.clear) !== false,
+                    updateBounds: !!(this.dirtyBounds && !this.dirtyBounds.empty())
+                });
             });
-        });
+            if (this.params.requestRender) {
+                this.hooks.afterRender.call(this);
+            }
+        }
+        finally {
+            this.state = state;
+        }
     }
     renderToNewWindow(fullImage = true, viewBox) {
         if (this.releaseStatus === 'released') {
@@ -20675,6 +21086,9 @@ class Stage extends Group {
         return this._cursor;
     }
     eventPointTransform(e) {
+        if (e instanceof FederatedMouseEvent) {
+            return { x: e.viewX, y: e.viewY };
+        }
         const point = this.global.mapToCanvasPoint(e, this.window);
         return this.stage.window.pointTransform(point.x, point.y);
     }
@@ -21868,9 +22282,60 @@ class CanvasLayerHandlerContribution {
     }
 }
 
+class EmptyLayerHandlerContribution {
+    constructor() {
+        this.offscreen = false;
+        this.type = 'virtual';
+        this.global = application.global;
+    }
+    setDpr(dpr) {
+        return;
+    }
+    init(layer, window, params) {
+        this.layer = layer;
+        this.window = window;
+        if (params.main) {
+            throw new Error('virtual layer不能作为main layer');
+        }
+        this.main = false;
+        this.canvas = null;
+        this.context = null;
+    }
+    resize(w, h) {
+        return;
+    }
+    resizeView(w, h) {
+        return;
+    }
+    render(group, params, userParams) {
+        this.mainHandler.render(group, params, Object.assign(Object.assign({}, userParams), { clear: false }));
+        return;
+    }
+    merge(layerHandlers) {
+        return;
+    }
+    prepare(dirtyBounds, params) {
+        return;
+    }
+    drawTo(target, group, params) {
+        var _a;
+        const context = target.getContext();
+        params.renderService.render(group, Object.assign(Object.assign({ context }, params), { clear: params.clear ? (_a = params.background) !== null && _a !== void 0 ? _a : '#fff' : undefined }));
+        return;
+    }
+    getContext() {
+        return null;
+    }
+    release() {
+        return;
+    }
+}
+
 function bindLayerHandlerModules({ bind }) {
     bind(CanvasLayerHandlerContribution).toSelf();
+    bind(EmptyLayerHandlerContribution).toSelf();
     bind(StaticLayerHandlerContribution).toService(CanvasLayerHandlerContribution);
+    bind(VirtualLayerHandlerContribution).toService(EmptyLayerHandlerContribution);
 }
 
 function load$1(container) {
@@ -23708,12 +24173,24 @@ class InteractiveDrawItemInterceptorContribution {
             this.processing = true;
             const { context } = drawContext;
             context.highPerformanceSave();
-            context.setTransformFromMatrix(baseGraphic.parent.globalTransMatrix, true);
-            baseGraphic.isContainer
-                ? drawContribution.renderGroup(baseGraphic, drawContext, baseGraphic.parent.globalTransMatrix)
-                : drawContribution.renderItem(baseGraphic, drawContext);
-            context.highPerformanceRestore();
-            this.processing = false;
+            const parent = baseGraphic.parent.globalTransMatrix;
+            const matrix = matrixAllocate.allocateByObj(parent);
+            if (drawContext.transMatrix) {
+                const outer = drawContext.transMatrix;
+                matrix.setValue(outer.a, outer.b, outer.c, outer.d, outer.e, outer.f);
+                matrix.multiply(parent.a, parent.b, parent.c, parent.d, parent.e, parent.f);
+            }
+            try {
+                context.setTransformFromMatrix(matrix, true);
+                baseGraphic.isContainer
+                    ? drawContribution.renderGroup(baseGraphic, drawContext, matrix)
+                    : drawContribution.renderItem(baseGraphic, drawContext);
+            }
+            finally {
+                context.highPerformanceRestore();
+                matrixAllocate.free(matrix);
+                this.processing = false;
+            }
             return true;
         }
         return false;