@visactor/vrender-core 1.0.47-alpha.0 → 1.1.0-alpha.1

package/es/core/stage.d.ts

@@ -1,7 +1,11 @@
-import type { IAABBBounds, IBounds, IBoundsLike, IMatrix } from '@visactor/vutils';
-import type { IGraphicAttribute, IExportType, IStage, IStageParams, ILayer, IColor, IOption3D, ICamera, vec3, IDirectionLight, ITicker, IRenderService, IPickerService, IPluginService, ISyncHook, IDrawContext, IWindow, ILayerService, ITimeline, IOptimizeType, LayerMode, PickResult, IPlugin, IGraphicService, IRenderServiceDrawParams } from '../interface';
+import { type IAABBBounds, type IBounds, type IBoundsLike, type IMatrix } from '@visactor/vutils';
+import type { IGraphic, IExportType, IStage, IStageParams, ILayer, IColor, IOption3D, ICamera, vec3, IDirectionLight, ITicker, IRenderService, IPickerService, IPluginService, ISyncHook, IDrawContext, IWindow, ILayerService, ITimeline, IOptimizeType, LayerMode, PickResult, IPlugin, IGraphicService, IRenderServiceDrawParams } from '../interface';
 import type { Layer } from './layer';
 import { Group } from '../graphic/group';
+import { type IStageFactoryDeps } from '../factory';
+import { type SharedStateScope } from '../graphic/state/shared-state-scope';
+import { StateBatchScheduler } from '../graphic/state/state-batch-scheduler';
+import { type IDeferredStateOwnerConfig, type IStatePerfConfig, type IStatePerfSnapshot } from '../graphic/state/state-perf-monitor';
 type IStageState = 'rendering' | 'normal';
 export declare class Stage extends Group implements IStage {
     parent: IStage | null;
@@ -38,12 +42,14 @@ export declare class Stage extends Group implements IStage {
     set height(h: number);
     get dpr(): number;
     set dpr(r: number);
-    get background(): IGraphicAttribute['background'] | IColor;
-    set background(b: IGraphicAttribute['background'] | IColor);
+    get background(): string | IColor;
+    set background(b: string | IColor);
     get defaultLayer(): ILayer;
     protected _ticker: ITicker;
     autoRender: boolean;
     autoRefresh: boolean;
+    statePerfConfig?: IStatePerfConfig;
+    deferredStateConfig?: IDeferredStateOwnerConfig;
     _enableLayout: boolean;
     htmlAttribute: boolean | string | any;
     reactAttribute: boolean | string | any;
@@ -53,6 +59,8 @@ export declare class Stage extends Group implements IStage {
     private readonly global;
     readonly renderService: IRenderService;
     protected pickerService?: IPickerService;
+    private readonly windowFactory;
+    private readonly pickerServiceFactory;
     readonly pluginService: IPluginService;
     readonly layerService: ILayerService;
     readonly graphicService: IGraphicService;
@@ -68,14 +76,15 @@ export declare class Stage extends Group implements IStage {
     protected interactiveLayer?: ILayer;
     protected supportInteractiveLayer: boolean;
     protected timeline: ITimeline;
+    rootSharedStateScope?: SharedStateScope<Record<string, any>>;
+    protected _pendingSharedStateRefreshGraphics?: Set<IGraphic>;
+    protected _stateBatchScheduler: StateBatchScheduler;
     params: Partial<IStageParams>;
     protected tickedBeforeRender: boolean;
     readonly rafId: number;
     get ticker(): ITicker;
     set ticker(ticker: ITicker);
-    protected syncBackgroundImage(background: IGraphicAttribute['background'] | IColor): void;
-    protected isImageBackgroundSource(source: any): boolean;
-    constructor(params?: Partial<IStageParams>);
+    constructor(params?: Partial<IStageParams>, deps?: IStageFactoryDeps);
     initAnimate(params: Partial<IStageParams>): void;
     startAnimate(): void;
     pauseRender(sr?: number): void;
@@ -146,6 +155,9 @@ export declare class Stage extends Group implements IStage {
     render(layers?: ILayer[], params?: Partial<IDrawContext>): void;
     protected combineLayersToWindow(): void;
     renderNextFrame(layers?: ILayer[], force?: boolean): void;
+    scheduleStateBatch(graphics: IGraphic[], targetStates: string[]): void;
+    getStatePerfSnapshot(): IStatePerfSnapshot;
+    resetStatePerfSnapshot(): void;
     _doRenderInThisFrame(): void;
     protected renderLayerList(layerList: ILayer[], params?: Partial<IDrawContext>): void;
     resizeWindow(w: number, h: number, rerender?: boolean): void;

package/es/core/stage.js

@@ -1,20 +1,18 @@
-import { Bounds, Point, isBase64, isObject, isValidUrl } from "@visactor/vutils";
+import { Bounds, Point, isString } from "@visactor/vutils";
 
-import { VWindow } from "./window";
+import { DefaultWindow } from "./window";
 
 import { EventSystem } from "../event";
 
-import { container } from "../container";
-
-import { RenderService } from "../render/constants";
-
 import { Group } from "../graphic/group";
 
 import { Theme } from "../graphic/theme";
 
-import { PickerService } from "../picker/constants";
+import { DefaultGlobalPickerService } from "../picker/global-picker-service";
 
-import { PluginService } from "../plugins/constants";
+import { DefaultRenderService } from "../render/render-service";
+
+import { DefaultPluginService } from "../plugins/plugin-service";
 
 import { AutoRenderPlugin } from "../plugins/builtin-plugin/auto-render-plugin";
 
@@ -26,15 +24,23 @@ import { DirtyBoundsPlugin } from "../plugins/builtin-plugin/dirty-bounds-plugin
 
 import { SyncHook } from "../tapable";
 
-import { LayerService } from "./constants";
-
 import { application } from "../application";
 
 import { isBrowserEnv } from "../env-check";
 
 import { Factory } from "../factory";
 
-import { GraphicService } from "../graphic";
+import { DefaultLayerService } from "./layer-service";
+
+import { DefaultGraphicService } from "../graphic/graphic-service/graphic-service";
+
+import { createRootSharedStateScope, setRootSharedStateScopeThemeDefinitions } from "../graphic/state/shared-state-scope";
+
+import { flushStageSharedStateRefresh, markScopeActiveDescendantsDirty } from "../graphic/state/shared-state-refresh";
+
+import { StateBatchScheduler } from "../graphic/state/state-batch-scheduler";
+
+import { ensureStageStatePerfMonitor } from "../graphic/state/state-perf-monitor";
 
 const DefaultConfig = {
     WIDTH: 500,
@@ -100,7 +106,7 @@ export class Stage extends Group {
         return null !== (_a = this._background) && void 0 !== _a ? _a : DefaultConfig.BACKGROUND;
     }
     set background(b) {
-        this._background = b, this.syncBackgroundImage(b);
+        this._background = b;
     }
     get defaultLayer() {
         return this.at(0);
@@ -115,20 +121,8 @@ export class Stage extends Group {
         ticker.bindStage(this), this._ticker && this._ticker.removeListener("tick", this.afterTickCb), 
         ticker.addTimeline(this.timeline), this._ticker = ticker, this._ticker.on("tick", this.afterTickCb);
     }
-    syncBackgroundImage(background) {
-        var _a;
-        const source = null !== (_a = null == background ? void 0 : background.background) && void 0 !== _a ? _a : background;
-        this.backgroundImg = !1, this.isImageBackgroundSource(source) && this.loadImage(source, !0);
-    }
-    isImageBackgroundSource(source) {
-        if (!source) return !1;
-        if ("string" == typeof source) return source.startsWith("<svg") || isValidUrl(source) || source.includes("/") || isBase64(source);
-        if (!isObject(source)) return !1;
-        const gradientSource = source;
-        return "string" != typeof gradientSource.gradient || !Array.isArray(gradientSource.stops);
-    }
-    constructor(params = {}) {
-        var _a, _b;
+    constructor(params = {}, deps = {}) {
+        var _a, _b, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y;
         super({}), this.tickedBeforeRender = !0, this._onVisibleChange = visible => {
             if (!(this._skipRender < 0)) if (visible) {
                 if (this.dirtyBounds) {
@@ -138,7 +132,7 @@ export class Stage extends Group {
                 this._skipRender > 1 && this.renderNextFrame(), this._skipRender = 0;
             } else this._skipRender = 1;
         }, this.beforeRender = stage => {
-            this._beforeRenderList.forEach((cb => cb(stage)));
+            flushStageSharedStateRefresh(this), this._beforeRenderList.forEach((cb => cb(stage)));
         }, this.afterClearScreen = drawParams => {
             this._afterClearScreen && this._afterClearScreen(drawParams);
         }, this.afterClearRect = drawParams => {
@@ -153,24 +147,35 @@ export class Stage extends Group {
             afterRender: new SyncHook([ "stage" ]),
             afterClearScreen: new SyncHook([ "stage" ]),
             afterClearRect: new SyncHook([ "stage" ])
-        }, this.global = application.global, !this.global.env && isBrowserEnv() && this.global.setEnv("browser"), 
-        this.window = container.get(VWindow), this.renderService = container.get(RenderService), 
-        this.pluginService = container.get(PluginService), this.layerService = container.get(LayerService), 
-        this.graphicService = container.get(GraphicService), this.pluginService.active(this, params), 
+        }, this.global = null !== (_a = deps.global) && void 0 !== _a ? _a : application.global, 
+        !this.global.env && isBrowserEnv() && this.global.setEnv("browser"), this.windowFactory = null !== (_d = null !== (_b = deps.windowFactory) && void 0 !== _b ? _b : application.windowFactory) && void 0 !== _d ? _d : () => new DefaultWindow(this.global), 
+        this.pickerServiceFactory = null !== (_e = deps.pickerServiceFactory) && void 0 !== _e ? _e : deps.pickerService ? () => deps.pickerService : null !== (_f = application.pickerServiceFactory) && void 0 !== _f ? _f : () => new DefaultGlobalPickerService, 
+        this.window = null !== (_g = deps.window) && void 0 !== _g ? _g : this.windowFactory(), 
+        this.renderService = null !== (_l = null !== (_k = null !== (_h = deps.renderService) && void 0 !== _h ? _h : null === (_j = application.renderServiceFactory) || void 0 === _j ? void 0 : _j.call(application)) && void 0 !== _k ? _k : application.renderService) && void 0 !== _l ? _l : new DefaultRenderService, 
+        this.pluginService = null !== (_q = null !== (_p = null !== (_m = deps.pluginService) && void 0 !== _m ? _m : null === (_o = application.pluginServiceFactory) || void 0 === _o ? void 0 : _o.call(application)) && void 0 !== _p ? _p : application.pluginService) && void 0 !== _q ? _q : new DefaultPluginService, 
+        this.layerService = null !== (_s = null !== (_r = deps.layerService) && void 0 !== _r ? _r : application.layerService) && void 0 !== _s ? _s : new DefaultLayerService(this.global), 
+        this.graphicService = null !== (_u = null !== (_t = deps.graphicService) && void 0 !== _t ? _t : application.graphicService) && void 0 !== _u ? _u : new DefaultGraphicService, 
+        this.pickerService = deps.pickerService, this.pluginService.active(this, params), 
         this._beforeRenderList = [], this._afterRenderList = [], this.window.create({
             width: params.width,
             height: params.height,
             viewBox: params.viewBox,
             container: params.container,
             dpr: params.dpr || this.global.devicePixelRatio,
-            canvasControled: !1 !== params.canvasControled,
+            canvasControled: null !== (_v = params.canvasControled) && void 0 !== _v ? _v : !params.canvas,
             title: params.title || "",
             canvas: params.canvas
-        }), this.state = "normal", this.renderCount = 0, this.tryInitEventSystem(), this._background = null !== (_a = params.background) && void 0 !== _a ? _a : DefaultConfig.BACKGROUND, 
-        this.appendChild(this.layerService.createLayer(this, {
+        }), this.state = "normal", this.renderCount = 0, this.tryInitEventSystem(), this._background = null !== (_w = params.background) && void 0 !== _w ? _w : DefaultConfig.BACKGROUND, 
+        this.stage = this, this.appendChild(this.layerService.createLayer(this, {
             main: !0
-        })), this.nextFrameRenderLayerSet = new Set, this.willNextFrameRender = !1, this.stage = this, 
-        this.renderStyle = params.renderStyle, params.autoRender && this.enableAutoRender(), 
+        })), this.nextFrameRenderLayerSet = new Set, this.willNextFrameRender = !1, ensureStageStatePerfMonitor(this), 
+        this._stateBatchScheduler = new StateBatchScheduler(this, ensureStageStatePerfMonitor(this)), 
+        this.rootSharedStateScope = createRootSharedStateScope(this, null === (_x = this.theme) || void 0 === _x ? void 0 : _x.stateDefinitions), 
+        this.theme.onStateDefinitionsChange = () => {
+            var _a;
+            this.rootSharedStateScope && (setRootSharedStateScopeThemeDefinitions(this.rootSharedStateScope, null === (_a = this.theme) || void 0 === _a ? void 0 : _a.stateDefinitions), 
+            markScopeActiveDescendantsDirty(this.rootSharedStateScope, this));
+        }, this.renderStyle = params.renderStyle, params.autoRender && this.enableAutoRender(), 
         params.autoRefresh && this.enableAutoRefresh(), !1 === params.disableDirtyBounds && this.enableDirtyBounds(), 
         params.enableHtmlAttribute && this.enableHtmlAttribute(params.enableHtmlAttribute), 
         params.ReactDOM && this.enableReactAttribute(params.ReactDOM), params.enableLayout && this.enableLayout(), 
@@ -180,8 +185,9 @@ export class Stage extends Group {
         this._afterClearScreen = params.afterClearScreen, this._afterClearRect = params.afterClearRect, 
         this.supportInteractiveLayer = !1 !== params.interactiveLayer, params.optimize || (params.optimize = {
             tickRenderMode: "effect"
-        }), this.optmize(params.optimize), params.background && this.syncBackgroundImage(this._background), 
-        this.initAnimate(params), this.rafId = null !== (_b = params.rafId) && void 0 !== _b ? _b : Math.floor(6 * Math.random());
+        }), this.optmize(params.optimize), params.background && isString(this._background) && this._background.includes("/") && this.setAttributes({
+            background: this._background
+        }), this.initAnimate(params), this.rafId = null !== (_y = params.rafId) && void 0 !== _y ? _y : Math.floor(6 * Math.random());
     }
     initAnimate(params) {
         var _a;
@@ -426,6 +432,15 @@ export class Stage extends Group {
             this._doRenderInThisFrame(), this.willNextFrameRender = !1;
         })));
     }
+    scheduleStateBatch(graphics, targetStates) {
+        this._stateBatchScheduler.schedule(graphics, targetStates);
+    }
+    getStatePerfSnapshot() {
+        return ensureStageStatePerfMonitor(this).getSnapshot();
+    }
+    resetStatePerfSnapshot() {
+        ensureStageStatePerfMonitor(this).reset();
+    }
     _doRenderInThisFrame() {
         if ("released" === this.releaseStatus) return;
         this.startAnimate();
@@ -510,16 +525,17 @@ export class Stage extends Group {
         throw new Error("暂不支持");
     }
     release() {
-        var _a, _b, _d;
-        super.release(), this.hooks.beforeRender.unTap("constructor", this.beforeRender), 
-        this.hooks.afterRender.unTap("constructor", this.afterRender), this.eventSystem && this.eventSystem.release(), 
-        this.layerService.releaseStage(this), this.pluginService.release(), this.forEach((layer => {
+        var _a, _b, _d, _e;
+        null === (_a = this._stateBatchScheduler) || void 0 === _a || _a.release(), super.release(), 
+        this.hooks.beforeRender.unTap("constructor", this.beforeRender), this.hooks.afterRender.unTap("constructor", this.afterRender), 
+        this.eventSystem && this.eventSystem.release(), this.layerService.releaseStage(this), 
+        this.pluginService.release(), this.forEach((layer => {
             layer.release();
         })), this.interactiveLayer && (this.interactiveLayer.forEachChildren((item => {
             item.setStage && item.setStage(null, null), this.interactiveLayer.removeChild(item);
-        })), this.interactiveLayer.release()), this.window.release(), null === (_a = this._ticker) || void 0 === _a || _a.remTimeline(null == this ? void 0 : this.timeline), 
-        null === (_b = this._ticker) || void 0 === _b || _b.removeListener("tick", this.afterTickCb), 
-        this.params.ticker || null === (_d = this._ticker) || void 0 === _d || _d.release(), 
+        })), this.interactiveLayer.release()), this.window.release(), null === (_b = this._ticker) || void 0 === _b || _b.remTimeline(null == this ? void 0 : this.timeline), 
+        null === (_d = this._ticker) || void 0 === _d || _d.removeListener("tick", this.afterTickCb), 
+        this.params.ticker || null === (_e = this._ticker) || void 0 === _e || _e.release(), 
         this.renderService.renderTreeRoots = [];
     }
     setStage(stage) {}
@@ -544,7 +560,7 @@ export class Stage extends Group {
     }
     renderToNewWindow(fullImage = !0, viewBox) {
         if ("released" === this.releaseStatus) return;
-        const window = container.get(VWindow), x1 = viewBox ? -viewBox.x1 : 0, y1 = viewBox ? -viewBox.y1 : 0, x2 = viewBox ? viewBox.x2 : this.viewWidth, y2 = viewBox ? viewBox.y2 : this.viewHeight, width = viewBox ? viewBox.width() : this.viewWidth, height = viewBox ? viewBox.height() : this.viewHeight;
+        const window = this.windowFactory(), x1 = viewBox ? -viewBox.x1 : 0, y1 = viewBox ? -viewBox.y1 : 0, x2 = viewBox ? viewBox.x2 : this.viewWidth, y2 = viewBox ? viewBox.y2 : this.viewHeight, width = viewBox ? viewBox.width() : this.viewWidth, height = viewBox ? viewBox.height() : this.viewHeight;
         return window.create({
             viewBox: {
                 x1: x1,
@@ -582,11 +598,11 @@ export class Stage extends Group {
         this._eventSystem && this._eventSystem.resumeTriggerEvent();
     }
     getPickerService() {
-        return this.pickerService || (this.pickerService = container.get(PickerService)), 
+        return this.pickerService || (this.pickerService = this.pickerServiceFactory()), 
         this.pickerService;
     }
     reInit() {
         this.renderService.reInit(), this.pickerService.reInit();
     }
 }
-//# sourceMappingURL=stage.js.map
+//# sourceMappingURL=stage.js.map