feat: update modular,add mount and unmount action
This commit is contained in:
parent
6d87ad8433
commit
3ed8628dbb
@ -1,14 +1,27 @@
|
||||
import { Module, Color, Gravity, Group, layoutConfig, LayoutSpec, ModularPanel, Panel, scroller, text, vlayout, modal, hlayout, Text, ClassType, HLayout, View, VLayout, Provider, loge } from "doric";
|
||||
import { Module, Color, Gravity, Group, layoutConfig, LayoutSpec, ModularPanel, scroller, text, vlayout, hlayout, Text, HLayout, View, VLayout, Provider, stack, } from "doric";
|
||||
import { CounterPage } from "./Counter";
|
||||
|
||||
let moduleId = 0
|
||||
|
||||
class ReceivedMessage {
|
||||
received: string[] = []
|
||||
mounted: Record<string, boolean> = {}
|
||||
}
|
||||
|
||||
class SingleModule extends Module {
|
||||
myId = ++moduleId
|
||||
|
||||
onCreate() {
|
||||
super.onCreate()
|
||||
this.provider?.observe(ReceivedMessage).addObserver((state => {
|
||||
if (state?.mounted[this.name()] === false) {
|
||||
this.unmount()
|
||||
} else {
|
||||
this.mount()
|
||||
}
|
||||
}))
|
||||
}
|
||||
|
||||
name() {
|
||||
return `${this.constructor.name}#${this.myId}`
|
||||
}
|
||||
@ -46,6 +59,19 @@ class SingleModule extends Module {
|
||||
text: this.discription(),
|
||||
textColor: Color.WHITE,
|
||||
}),
|
||||
text({
|
||||
text: "Unmount",
|
||||
textSize: 12,
|
||||
textColor: Color.WHITE,
|
||||
onClick: () => {
|
||||
this.provider?.observe(ReceivedMessage)?.update(state => {
|
||||
if (state) {
|
||||
state.mounted[this.name()] = false
|
||||
}
|
||||
return state
|
||||
})
|
||||
}
|
||||
}),
|
||||
...this.buildExtraContent(),
|
||||
],
|
||||
{
|
||||
@ -340,6 +366,28 @@ class ScrollableHorizontalModule extends GroupModule {
|
||||
}
|
||||
|
||||
|
||||
class ResetModule extends SingleModule {
|
||||
discription() {
|
||||
return "This module reset all modules to mounted."
|
||||
}
|
||||
|
||||
buildExtraContent() {
|
||||
return [
|
||||
text({
|
||||
text: "Reset",
|
||||
textColor: Color.WHITE,
|
||||
onClick: () => {
|
||||
this.provider?.observe(ReceivedMessage).update(state => {
|
||||
if (state) {
|
||||
state.mounted = {}
|
||||
}
|
||||
return state
|
||||
})
|
||||
},
|
||||
})
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
@Entry
|
||||
class ModularDemo extends ModularPanel {
|
||||
@ -355,6 +403,7 @@ class ModularDemo extends ModularPanel {
|
||||
ScrollableVerticalModule,
|
||||
ScrollableHorizontalModule,
|
||||
CounterPage,
|
||||
ResetModule,
|
||||
]
|
||||
}
|
||||
setupShelf(root: Group) {
|
||||
|
@ -3655,7 +3655,9 @@ var __extends = (undefined && undefined.__extends) || (function () {
|
||||
var Module = /** @class */ (function (_super) {
|
||||
__extends(Module, _super);
|
||||
function Module() {
|
||||
return _super !== null && _super.apply(this, arguments) || this;
|
||||
var _this = _super !== null && _super.apply(this, arguments) || this;
|
||||
_this.unmounted = false;
|
||||
return _this;
|
||||
}
|
||||
Object.defineProperty(Module.prototype, "provider", {
|
||||
get: function () {
|
||||
@ -3668,13 +3670,68 @@ var Module = /** @class */ (function (_super) {
|
||||
enumerable: false,
|
||||
configurable: true
|
||||
});
|
||||
Module.prototype.mount = function () {
|
||||
var _a;
|
||||
if (this.unmounted) {
|
||||
this.unmounted = false;
|
||||
(_a = this.superPanel) === null || _a === void 0 ? void 0 : _a.onStructureChanged(this, true);
|
||||
this.onMounted();
|
||||
}
|
||||
};
|
||||
Module.prototype.unmount = function () {
|
||||
var _a;
|
||||
if (!this.unmounted) {
|
||||
this.unmounted = true;
|
||||
(_a = this.superPanel) === null || _a === void 0 ? void 0 : _a.onStructureChanged(this, false);
|
||||
this.onUnmounted();
|
||||
}
|
||||
};
|
||||
Object.defineProperty(Module.prototype, "mounted", {
|
||||
get: function () {
|
||||
return !this.unmounted;
|
||||
},
|
||||
enumerable: false,
|
||||
configurable: true
|
||||
});
|
||||
/**
|
||||
* Dispatch message to other modules.
|
||||
* @param message which is sent out
|
||||
*/
|
||||
Module.prototype.dispatchMessage = function (message) {
|
||||
var _a;
|
||||
(_a = this.superPanel) === null || _a === void 0 ? void 0 : _a.dispatchMessage(message);
|
||||
};
|
||||
/**
|
||||
* Dispatched messages can be received by override this method.
|
||||
* @param message recevied message
|
||||
*/
|
||||
Module.prototype.onMessage = function (message) { };
|
||||
/**
|
||||
* Called when this module is mounted
|
||||
*/
|
||||
Module.prototype.onMounted = function () { };
|
||||
/**
|
||||
* Called when this module is unmounted
|
||||
*/
|
||||
Module.prototype.onUnmounted = function () { };
|
||||
return Module;
|
||||
}(Panel));
|
||||
var VMModule = /** @class */ (function (_super) {
|
||||
__extends(VMModule, _super);
|
||||
function VMModule() {
|
||||
return _super !== null && _super.apply(this, arguments) || this;
|
||||
}
|
||||
VMModule.prototype.getViewModel = function () {
|
||||
return this.vm;
|
||||
};
|
||||
VMModule.prototype.build = function (root) {
|
||||
this.vh = new (this.getViewHolderClass());
|
||||
this.vm = new (this.getViewModelClass())(this.getState(), this.vh);
|
||||
this.vm.context = this.context;
|
||||
this.vm.attach(root);
|
||||
};
|
||||
return VMModule;
|
||||
}(Module));
|
||||
var ModularPanel = /** @class */ (function (_super) {
|
||||
__extends(ModularPanel, _super);
|
||||
function ModularPanel() {
|
||||
@ -3696,16 +3753,38 @@ var ModularPanel = /** @class */ (function (_super) {
|
||||
this.onMessage(message);
|
||||
}
|
||||
};
|
||||
Object.defineProperty(ModularPanel.prototype, "mountedModules", {
|
||||
get: function () {
|
||||
return this.modules.filter(function (e) { return !(e instanceof Module) || e.mounted; });
|
||||
},
|
||||
enumerable: false,
|
||||
configurable: true
|
||||
});
|
||||
ModularPanel.prototype.onMessage = function (message) {
|
||||
this.modules.forEach(function (e) {
|
||||
this.mountedModules.forEach(function (e) {
|
||||
if (e instanceof Module) {
|
||||
e.onMessage(message);
|
||||
}
|
||||
});
|
||||
};
|
||||
ModularPanel.prototype.onStructureChanged = function (module, mounted) {
|
||||
var _this = this;
|
||||
if (this.superPanel) {
|
||||
this.superPanel.onStructureChanged(module, mounted);
|
||||
}
|
||||
else {
|
||||
if (!!!this.scheduledRebuild) {
|
||||
this.scheduledRebuild = setTimeout(function () {
|
||||
_this.scheduledRebuild = undefined;
|
||||
_this.getRootView().children.length = 0;
|
||||
_this.build(_this.getRootView());
|
||||
}, 0);
|
||||
}
|
||||
}
|
||||
};
|
||||
ModularPanel.prototype.build = function (root) {
|
||||
var groupView = this.setupShelf(root);
|
||||
this.modules.forEach(function (e) {
|
||||
this.mountedModules.forEach(function (e) {
|
||||
Reflect.set(e, "__root__", groupView);
|
||||
e.build(groupView);
|
||||
});
|
||||
@ -3713,32 +3792,32 @@ var ModularPanel = /** @class */ (function (_super) {
|
||||
ModularPanel.prototype.onCreate = function () {
|
||||
var _this = this;
|
||||
_super.prototype.onCreate.call(this);
|
||||
this.modules.forEach(function (e) {
|
||||
this.mountedModules.forEach(function (e) {
|
||||
e.context = _this.context;
|
||||
e.onCreate();
|
||||
});
|
||||
};
|
||||
ModularPanel.prototype.onDestroy = function () {
|
||||
_super.prototype.onDestroy.call(this);
|
||||
this.modules.forEach(function (e) {
|
||||
this.mountedModules.forEach(function (e) {
|
||||
e.onDestroy();
|
||||
});
|
||||
};
|
||||
ModularPanel.prototype.onShow = function () {
|
||||
_super.prototype.onShow.call(this);
|
||||
this.modules.forEach(function (e) {
|
||||
this.mountedModules.forEach(function (e) {
|
||||
e.onShow();
|
||||
});
|
||||
};
|
||||
ModularPanel.prototype.onHidden = function () {
|
||||
_super.prototype.onHidden.call(this);
|
||||
this.modules.forEach(function (e) {
|
||||
this.mountedModules.forEach(function (e) {
|
||||
e.onHidden();
|
||||
});
|
||||
};
|
||||
ModularPanel.prototype.onRenderFinished = function () {
|
||||
_super.prototype.onRenderFinished.call(this);
|
||||
this.modules.forEach(function (e) {
|
||||
this.mountedModules.forEach(function (e) {
|
||||
e.onRenderFinished();
|
||||
});
|
||||
};
|
||||
@ -3792,6 +3871,7 @@ exports.TOP = TOP;
|
||||
exports.Text = Text;
|
||||
exports.TranslationAnimation = TranslationAnimation;
|
||||
exports.VLayout = VLayout;
|
||||
exports.VMModule = VMModule;
|
||||
exports.VMPanel = VMPanel;
|
||||
exports.View = View;
|
||||
exports.ViewComponent = ViewComponent;
|
||||
|
@ -2822,6 +2822,10 @@ class VMPanel extends Panel {
|
||||
}
|
||||
|
||||
class Module extends Panel {
|
||||
constructor() {
|
||||
super(...arguments);
|
||||
this.unmounted = false;
|
||||
}
|
||||
get provider() {
|
||||
var _a;
|
||||
return this.__provider || ((_a = this.superPanel) === null || _a === void 0 ? void 0 : _a.provider);
|
||||
@ -2829,11 +2833,57 @@ class Module extends Panel {
|
||||
set provider(provider) {
|
||||
this.__provider = provider;
|
||||
}
|
||||
mount() {
|
||||
var _a;
|
||||
if (this.unmounted) {
|
||||
this.unmounted = false;
|
||||
(_a = this.superPanel) === null || _a === void 0 ? void 0 : _a.onStructureChanged(this, true);
|
||||
this.onMounted();
|
||||
}
|
||||
}
|
||||
unmount() {
|
||||
var _a;
|
||||
if (!this.unmounted) {
|
||||
this.unmounted = true;
|
||||
(_a = this.superPanel) === null || _a === void 0 ? void 0 : _a.onStructureChanged(this, false);
|
||||
this.onUnmounted();
|
||||
}
|
||||
}
|
||||
get mounted() {
|
||||
return !this.unmounted;
|
||||
}
|
||||
/**
|
||||
* Dispatch message to other modules.
|
||||
* @param message which is sent out
|
||||
*/
|
||||
dispatchMessage(message) {
|
||||
var _a;
|
||||
(_a = this.superPanel) === null || _a === void 0 ? void 0 : _a.dispatchMessage(message);
|
||||
}
|
||||
/**
|
||||
* Dispatched messages can be received by override this method.
|
||||
* @param message recevied message
|
||||
*/
|
||||
onMessage(message) { }
|
||||
/**
|
||||
* Called when this module is mounted
|
||||
*/
|
||||
onMounted() { }
|
||||
/**
|
||||
* Called when this module is unmounted
|
||||
*/
|
||||
onUnmounted() { }
|
||||
}
|
||||
class VMModule extends Module {
|
||||
getViewModel() {
|
||||
return this.vm;
|
||||
}
|
||||
build(root) {
|
||||
this.vh = new (this.getViewHolderClass());
|
||||
this.vm = new (this.getViewModelClass())(this.getState(), this.vh);
|
||||
this.vm.context = this.context;
|
||||
this.vm.attach(root);
|
||||
}
|
||||
}
|
||||
class ModularPanel extends Module {
|
||||
constructor() {
|
||||
@ -2854,48 +2904,65 @@ class ModularPanel extends Module {
|
||||
this.onMessage(message);
|
||||
}
|
||||
}
|
||||
get mountedModules() {
|
||||
return this.modules.filter(e => !(e instanceof Module) || e.mounted);
|
||||
}
|
||||
onMessage(message) {
|
||||
this.modules.forEach(e => {
|
||||
this.mountedModules.forEach(e => {
|
||||
if (e instanceof Module) {
|
||||
e.onMessage(message);
|
||||
}
|
||||
});
|
||||
}
|
||||
onStructureChanged(module, mounted) {
|
||||
if (this.superPanel) {
|
||||
this.superPanel.onStructureChanged(module, mounted);
|
||||
}
|
||||
else {
|
||||
if (!!!this.scheduledRebuild) {
|
||||
this.scheduledRebuild = setTimeout(() => {
|
||||
this.scheduledRebuild = undefined;
|
||||
this.getRootView().children.length = 0;
|
||||
this.build(this.getRootView());
|
||||
}, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
build(root) {
|
||||
const groupView = this.setupShelf(root);
|
||||
this.modules.forEach(e => {
|
||||
this.mountedModules.forEach(e => {
|
||||
Reflect.set(e, "__root__", groupView);
|
||||
e.build(groupView);
|
||||
});
|
||||
}
|
||||
onCreate() {
|
||||
super.onCreate();
|
||||
this.modules.forEach(e => {
|
||||
this.mountedModules.forEach(e => {
|
||||
e.context = this.context;
|
||||
e.onCreate();
|
||||
});
|
||||
}
|
||||
onDestroy() {
|
||||
super.onDestroy();
|
||||
this.modules.forEach(e => {
|
||||
this.mountedModules.forEach(e => {
|
||||
e.onDestroy();
|
||||
});
|
||||
}
|
||||
onShow() {
|
||||
super.onShow();
|
||||
this.modules.forEach(e => {
|
||||
this.mountedModules.forEach(e => {
|
||||
e.onShow();
|
||||
});
|
||||
}
|
||||
onHidden() {
|
||||
super.onHidden();
|
||||
this.modules.forEach(e => {
|
||||
this.mountedModules.forEach(e => {
|
||||
e.onHidden();
|
||||
});
|
||||
}
|
||||
onRenderFinished() {
|
||||
super.onRenderFinished();
|
||||
this.modules.forEach(e => {
|
||||
this.mountedModules.forEach(e => {
|
||||
e.onRenderFinished();
|
||||
});
|
||||
}
|
||||
@ -2948,6 +3015,7 @@ exports.TOP = TOP;
|
||||
exports.Text = Text;
|
||||
exports.TranslationAnimation = TranslationAnimation;
|
||||
exports.VLayout = VLayout;
|
||||
exports.VMModule = VMModule;
|
||||
exports.VMPanel = VMPanel;
|
||||
exports.View = View;
|
||||
exports.ViewComponent = ViewComponent;
|
||||
|
@ -4343,6 +4343,10 @@ class VMPanel extends Panel {
|
||||
}
|
||||
|
||||
class Module extends Panel {
|
||||
constructor() {
|
||||
super(...arguments);
|
||||
this.unmounted = false;
|
||||
}
|
||||
get provider() {
|
||||
var _a;
|
||||
return this.__provider || ((_a = this.superPanel) === null || _a === void 0 ? void 0 : _a.provider);
|
||||
@ -4350,11 +4354,57 @@ class Module extends Panel {
|
||||
set provider(provider) {
|
||||
this.__provider = provider;
|
||||
}
|
||||
mount() {
|
||||
var _a;
|
||||
if (this.unmounted) {
|
||||
this.unmounted = false;
|
||||
(_a = this.superPanel) === null || _a === void 0 ? void 0 : _a.onStructureChanged(this, true);
|
||||
this.onMounted();
|
||||
}
|
||||
}
|
||||
unmount() {
|
||||
var _a;
|
||||
if (!this.unmounted) {
|
||||
this.unmounted = true;
|
||||
(_a = this.superPanel) === null || _a === void 0 ? void 0 : _a.onStructureChanged(this, false);
|
||||
this.onUnmounted();
|
||||
}
|
||||
}
|
||||
get mounted() {
|
||||
return !this.unmounted;
|
||||
}
|
||||
/**
|
||||
* Dispatch message to other modules.
|
||||
* @param message which is sent out
|
||||
*/
|
||||
dispatchMessage(message) {
|
||||
var _a;
|
||||
(_a = this.superPanel) === null || _a === void 0 ? void 0 : _a.dispatchMessage(message);
|
||||
}
|
||||
/**
|
||||
* Dispatched messages can be received by override this method.
|
||||
* @param message recevied message
|
||||
*/
|
||||
onMessage(message) { }
|
||||
/**
|
||||
* Called when this module is mounted
|
||||
*/
|
||||
onMounted() { }
|
||||
/**
|
||||
* Called when this module is unmounted
|
||||
*/
|
||||
onUnmounted() { }
|
||||
}
|
||||
class VMModule extends Module {
|
||||
getViewModel() {
|
||||
return this.vm;
|
||||
}
|
||||
build(root) {
|
||||
this.vh = new (this.getViewHolderClass());
|
||||
this.vm = new (this.getViewModelClass())(this.getState(), this.vh);
|
||||
this.vm.context = this.context;
|
||||
this.vm.attach(root);
|
||||
}
|
||||
}
|
||||
class ModularPanel extends Module {
|
||||
constructor() {
|
||||
@ -4375,48 +4425,65 @@ class ModularPanel extends Module {
|
||||
this.onMessage(message);
|
||||
}
|
||||
}
|
||||
get mountedModules() {
|
||||
return this.modules.filter(e => !(e instanceof Module) || e.mounted);
|
||||
}
|
||||
onMessage(message) {
|
||||
this.modules.forEach(e => {
|
||||
this.mountedModules.forEach(e => {
|
||||
if (e instanceof Module) {
|
||||
e.onMessage(message);
|
||||
}
|
||||
});
|
||||
}
|
||||
onStructureChanged(module, mounted) {
|
||||
if (this.superPanel) {
|
||||
this.superPanel.onStructureChanged(module, mounted);
|
||||
}
|
||||
else {
|
||||
if (!!!this.scheduledRebuild) {
|
||||
this.scheduledRebuild = setTimeout(() => {
|
||||
this.scheduledRebuild = undefined;
|
||||
this.getRootView().children.length = 0;
|
||||
this.build(this.getRootView());
|
||||
}, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
build(root) {
|
||||
const groupView = this.setupShelf(root);
|
||||
this.modules.forEach(e => {
|
||||
this.mountedModules.forEach(e => {
|
||||
Reflect.set(e, "__root__", groupView);
|
||||
e.build(groupView);
|
||||
});
|
||||
}
|
||||
onCreate() {
|
||||
super.onCreate();
|
||||
this.modules.forEach(e => {
|
||||
this.mountedModules.forEach(e => {
|
||||
e.context = this.context;
|
||||
e.onCreate();
|
||||
});
|
||||
}
|
||||
onDestroy() {
|
||||
super.onDestroy();
|
||||
this.modules.forEach(e => {
|
||||
this.mountedModules.forEach(e => {
|
||||
e.onDestroy();
|
||||
});
|
||||
}
|
||||
onShow() {
|
||||
super.onShow();
|
||||
this.modules.forEach(e => {
|
||||
this.mountedModules.forEach(e => {
|
||||
e.onShow();
|
||||
});
|
||||
}
|
||||
onHidden() {
|
||||
super.onHidden();
|
||||
this.modules.forEach(e => {
|
||||
this.mountedModules.forEach(e => {
|
||||
e.onHidden();
|
||||
});
|
||||
}
|
||||
onRenderFinished() {
|
||||
super.onRenderFinished();
|
||||
this.modules.forEach(e => {
|
||||
this.mountedModules.forEach(e => {
|
||||
e.onRenderFinished();
|
||||
});
|
||||
}
|
||||
@ -4710,6 +4777,7 @@ exports.TOP = TOP;
|
||||
exports.Text = Text;
|
||||
exports.TranslationAnimation = TranslationAnimation;
|
||||
exports.VLayout = VLayout;
|
||||
exports.VMModule = VMModule;
|
||||
exports.VMPanel = VMPanel;
|
||||
exports.View = View;
|
||||
exports.ViewComponent = ViewComponent;
|
||||
|
29
doric-js/index.d.ts
vendored
29
doric-js/index.d.ts
vendored
@ -1423,21 +1423,50 @@ declare module 'doric/lib/src/pattern/modular' {
|
||||
import { Panel } from "doric/lib/src/ui/panel";
|
||||
import { Group } from "doric/lib/src/ui/view";
|
||||
import { ClassType } from "doric/lib/src/util/types";
|
||||
import { ViewHolder, ViewModel } from "doric/lib/src/pattern/mvvm";
|
||||
import { Provider } from "doric/lib/src/pattern/provider";
|
||||
export abstract class Module extends Panel {
|
||||
superPanel?: ModularPanel;
|
||||
__provider?: Provider;
|
||||
get provider(): Provider | undefined;
|
||||
set provider(provider: Provider | undefined);
|
||||
mount(): void;
|
||||
unmount(): void;
|
||||
get mounted(): boolean;
|
||||
/**
|
||||
* Dispatch message to other modules.
|
||||
* @param message which is sent out
|
||||
*/
|
||||
dispatchMessage(message: any): void;
|
||||
/**
|
||||
* Dispatched messages can be received by override this method.
|
||||
* @param message recevied message
|
||||
*/
|
||||
onMessage(message: any): void;
|
||||
/**
|
||||
* Called when this module is mounted
|
||||
*/
|
||||
onMounted(): void;
|
||||
/**
|
||||
* Called when this module is unmounted
|
||||
*/
|
||||
onUnmounted(): void;
|
||||
}
|
||||
export abstract class VMModule<M extends Object, V extends ViewHolder> extends Module {
|
||||
abstract getViewModelClass(): ClassType<ViewModel<M, V>>;
|
||||
abstract getState(): M;
|
||||
abstract getViewHolderClass(): ClassType<V>;
|
||||
getViewModel(): ViewModel<M, V> | undefined;
|
||||
build(root: Group): void;
|
||||
}
|
||||
export abstract class ModularPanel extends Module {
|
||||
constructor();
|
||||
abstract setupModules(): ClassType<Panel>[];
|
||||
abstract setupShelf(root: Group): Group;
|
||||
dispatchMessage(message: any): void;
|
||||
get mountedModules(): Panel[];
|
||||
onMessage(message: any): void;
|
||||
onStructureChanged(module: Module, mounted: boolean): void;
|
||||
build(root: Group): void;
|
||||
onCreate(): void;
|
||||
onDestroy(): void;
|
||||
|
33
doric-js/lib/src/pattern/modular.d.ts
vendored
33
doric-js/lib/src/pattern/modular.d.ts
vendored
@ -1,22 +1,55 @@
|
||||
import { Panel } from "../ui/panel";
|
||||
import { Group } from "../ui/view";
|
||||
import { ClassType } from "../util/types";
|
||||
import { ViewHolder, ViewModel } from "./mvvm";
|
||||
import { Provider } from "./provider";
|
||||
export declare abstract class Module extends Panel {
|
||||
superPanel?: ModularPanel;
|
||||
__provider?: Provider;
|
||||
get provider(): Provider | undefined;
|
||||
set provider(provider: Provider | undefined);
|
||||
private unmounted;
|
||||
mount(): void;
|
||||
unmount(): void;
|
||||
get mounted(): boolean;
|
||||
/**
|
||||
* Dispatch message to other modules.
|
||||
* @param message which is sent out
|
||||
*/
|
||||
dispatchMessage(message: any): void;
|
||||
/**
|
||||
* Dispatched messages can be received by override this method.
|
||||
* @param message recevied message
|
||||
*/
|
||||
onMessage(message: any): void;
|
||||
/**
|
||||
* Called when this module is mounted
|
||||
*/
|
||||
onMounted(): void;
|
||||
/**
|
||||
* Called when this module is unmounted
|
||||
*/
|
||||
onUnmounted(): void;
|
||||
}
|
||||
export declare abstract class VMModule<M extends Object, V extends ViewHolder> extends Module {
|
||||
private vm?;
|
||||
private vh?;
|
||||
abstract getViewModelClass(): ClassType<ViewModel<M, V>>;
|
||||
abstract getState(): M;
|
||||
abstract getViewHolderClass(): ClassType<V>;
|
||||
getViewModel(): ViewModel<M, V> | undefined;
|
||||
build(root: Group): void;
|
||||
}
|
||||
export declare abstract class ModularPanel extends Module {
|
||||
private modules;
|
||||
private scheduledRebuild?;
|
||||
constructor();
|
||||
abstract setupModules(): ClassType<Panel>[];
|
||||
abstract setupShelf(root: Group): Group;
|
||||
dispatchMessage(message: any): void;
|
||||
get mountedModules(): Panel[];
|
||||
onMessage(message: any): void;
|
||||
onStructureChanged(module: Module, mounted: boolean): void;
|
||||
build(root: Group): void;
|
||||
onCreate(): void;
|
||||
onDestroy(): void;
|
||||
|
@ -1,5 +1,9 @@
|
||||
import { Panel } from "../ui/panel";
|
||||
export class Module extends Panel {
|
||||
constructor() {
|
||||
super(...arguments);
|
||||
this.unmounted = false;
|
||||
}
|
||||
get provider() {
|
||||
var _a;
|
||||
return this.__provider || ((_a = this.superPanel) === null || _a === void 0 ? void 0 : _a.provider);
|
||||
@ -7,11 +11,57 @@ export class Module extends Panel {
|
||||
set provider(provider) {
|
||||
this.__provider = provider;
|
||||
}
|
||||
mount() {
|
||||
var _a;
|
||||
if (this.unmounted) {
|
||||
this.unmounted = false;
|
||||
(_a = this.superPanel) === null || _a === void 0 ? void 0 : _a.onStructureChanged(this, true);
|
||||
this.onMounted();
|
||||
}
|
||||
}
|
||||
unmount() {
|
||||
var _a;
|
||||
if (!this.unmounted) {
|
||||
this.unmounted = true;
|
||||
(_a = this.superPanel) === null || _a === void 0 ? void 0 : _a.onStructureChanged(this, false);
|
||||
this.onUnmounted();
|
||||
}
|
||||
}
|
||||
get mounted() {
|
||||
return !this.unmounted;
|
||||
}
|
||||
/**
|
||||
* Dispatch message to other modules.
|
||||
* @param message which is sent out
|
||||
*/
|
||||
dispatchMessage(message) {
|
||||
var _a;
|
||||
(_a = this.superPanel) === null || _a === void 0 ? void 0 : _a.dispatchMessage(message);
|
||||
}
|
||||
/**
|
||||
* Dispatched messages can be received by override this method.
|
||||
* @param message recevied message
|
||||
*/
|
||||
onMessage(message) { }
|
||||
/**
|
||||
* Called when this module is mounted
|
||||
*/
|
||||
onMounted() { }
|
||||
/**
|
||||
* Called when this module is unmounted
|
||||
*/
|
||||
onUnmounted() { }
|
||||
}
|
||||
export class VMModule extends Module {
|
||||
getViewModel() {
|
||||
return this.vm;
|
||||
}
|
||||
build(root) {
|
||||
this.vh = new (this.getViewHolderClass());
|
||||
this.vm = new (this.getViewModelClass())(this.getState(), this.vh);
|
||||
this.vm.context = this.context;
|
||||
this.vm.attach(root);
|
||||
}
|
||||
}
|
||||
export class ModularPanel extends Module {
|
||||
constructor() {
|
||||
@ -32,48 +82,65 @@ export class ModularPanel extends Module {
|
||||
this.onMessage(message);
|
||||
}
|
||||
}
|
||||
get mountedModules() {
|
||||
return this.modules.filter(e => !(e instanceof Module) || e.mounted);
|
||||
}
|
||||
onMessage(message) {
|
||||
this.modules.forEach(e => {
|
||||
this.mountedModules.forEach(e => {
|
||||
if (e instanceof Module) {
|
||||
e.onMessage(message);
|
||||
}
|
||||
});
|
||||
}
|
||||
onStructureChanged(module, mounted) {
|
||||
if (this.superPanel) {
|
||||
this.superPanel.onStructureChanged(module, mounted);
|
||||
}
|
||||
else {
|
||||
if (!!!this.scheduledRebuild) {
|
||||
this.scheduledRebuild = setTimeout(() => {
|
||||
this.scheduledRebuild = undefined;
|
||||
this.getRootView().children.length = 0;
|
||||
this.build(this.getRootView());
|
||||
}, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
build(root) {
|
||||
const groupView = this.setupShelf(root);
|
||||
this.modules.forEach(e => {
|
||||
this.mountedModules.forEach(e => {
|
||||
Reflect.set(e, "__root__", groupView);
|
||||
e.build(groupView);
|
||||
});
|
||||
}
|
||||
onCreate() {
|
||||
super.onCreate();
|
||||
this.modules.forEach(e => {
|
||||
this.mountedModules.forEach(e => {
|
||||
e.context = this.context;
|
||||
e.onCreate();
|
||||
});
|
||||
}
|
||||
onDestroy() {
|
||||
super.onDestroy();
|
||||
this.modules.forEach(e => {
|
||||
this.mountedModules.forEach(e => {
|
||||
e.onDestroy();
|
||||
});
|
||||
}
|
||||
onShow() {
|
||||
super.onShow();
|
||||
this.modules.forEach(e => {
|
||||
this.mountedModules.forEach(e => {
|
||||
e.onShow();
|
||||
});
|
||||
}
|
||||
onHidden() {
|
||||
super.onHidden();
|
||||
this.modules.forEach(e => {
|
||||
this.mountedModules.forEach(e => {
|
||||
e.onHidden();
|
||||
});
|
||||
}
|
||||
onRenderFinished() {
|
||||
super.onRenderFinished();
|
||||
this.modules.forEach(e => {
|
||||
this.mountedModules.forEach(e => {
|
||||
e.onRenderFinished();
|
||||
});
|
||||
}
|
||||
|
@ -1,6 +1,7 @@
|
||||
import { Panel } from "../ui/panel"
|
||||
import { Group } from "../ui/view"
|
||||
import { ClassType } from "../util/types"
|
||||
import { ViewHolder, ViewModel } from "./mvvm"
|
||||
import { Provider } from "./provider"
|
||||
|
||||
export abstract class Module extends Panel {
|
||||
@ -16,15 +17,77 @@ export abstract class Module extends Panel {
|
||||
this.__provider = provider
|
||||
}
|
||||
|
||||
private unmounted = false
|
||||
|
||||
mount() {
|
||||
if (this.unmounted) {
|
||||
this.unmounted = false
|
||||
this.superPanel?.onStructureChanged(this, true)
|
||||
this.onMounted()
|
||||
}
|
||||
}
|
||||
|
||||
unmount() {
|
||||
if (!this.unmounted) {
|
||||
this.unmounted = true
|
||||
this.superPanel?.onStructureChanged(this, false)
|
||||
this.onUnmounted()
|
||||
}
|
||||
}
|
||||
|
||||
get mounted() {
|
||||
return !this.unmounted
|
||||
}
|
||||
|
||||
/**
|
||||
* Dispatch message to other modules.
|
||||
* @param message which is sent out
|
||||
*/
|
||||
dispatchMessage(message: any) {
|
||||
this.superPanel?.dispatchMessage(message)
|
||||
}
|
||||
|
||||
/**
|
||||
* Dispatched messages can be received by override this method.
|
||||
* @param message recevied message
|
||||
*/
|
||||
onMessage(message: any) { }
|
||||
|
||||
/**
|
||||
* Called when this module is mounted
|
||||
*/
|
||||
onMounted() { }
|
||||
|
||||
/**
|
||||
* Called when this module is unmounted
|
||||
*/
|
||||
onUnmounted() { }
|
||||
}
|
||||
|
||||
export abstract class VMModule<M extends Object, V extends ViewHolder> extends Module {
|
||||
private vm?: ViewModel<M, V>
|
||||
private vh?: V
|
||||
abstract getViewModelClass(): ClassType<ViewModel<M, V>>
|
||||
|
||||
abstract getState(): M
|
||||
|
||||
abstract getViewHolderClass(): ClassType<V>
|
||||
|
||||
getViewModel() {
|
||||
return this.vm
|
||||
}
|
||||
|
||||
build(root: Group): void {
|
||||
this.vh = new (this.getViewHolderClass())
|
||||
this.vm = new (this.getViewModelClass())(this.getState(), this.vh)
|
||||
this.vm.context = this.context
|
||||
this.vm.attach(root)
|
||||
}
|
||||
}
|
||||
|
||||
export abstract class ModularPanel extends Module {
|
||||
private modules: Panel[]
|
||||
private scheduledRebuild?: NodeJS.Timeout
|
||||
|
||||
constructor() {
|
||||
super()
|
||||
@ -49,18 +112,35 @@ export abstract class ModularPanel extends Module {
|
||||
}
|
||||
}
|
||||
|
||||
get mountedModules() {
|
||||
return this.modules.filter(e => !(e instanceof Module) || e.mounted)
|
||||
}
|
||||
|
||||
onMessage(message: any) {
|
||||
this.modules.forEach(e => {
|
||||
this.mountedModules.forEach(e => {
|
||||
if (e instanceof Module) {
|
||||
e.onMessage(message)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
onStructureChanged(module: Module, mounted: boolean) {
|
||||
if (this.superPanel) {
|
||||
this.superPanel.onStructureChanged(module, mounted)
|
||||
} else {
|
||||
if (!!!this.scheduledRebuild) {
|
||||
this.scheduledRebuild = setTimeout(() => {
|
||||
this.scheduledRebuild = undefined
|
||||
this.getRootView().children.length = 0
|
||||
this.build(this.getRootView())
|
||||
}, 0)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
build(root: Group) {
|
||||
const groupView = this.setupShelf(root)
|
||||
this.modules.forEach(e => {
|
||||
this.mountedModules.forEach(e => {
|
||||
Reflect.set(e, "__root__", groupView)
|
||||
e.build(groupView)
|
||||
})
|
||||
@ -68,7 +148,7 @@ export abstract class ModularPanel extends Module {
|
||||
|
||||
onCreate() {
|
||||
super.onCreate()
|
||||
this.modules.forEach(e => {
|
||||
this.mountedModules.forEach(e => {
|
||||
e.context = this.context
|
||||
e.onCreate()
|
||||
})
|
||||
@ -76,28 +156,28 @@ export abstract class ModularPanel extends Module {
|
||||
|
||||
onDestroy() {
|
||||
super.onDestroy()
|
||||
this.modules.forEach(e => {
|
||||
this.mountedModules.forEach(e => {
|
||||
e.onDestroy()
|
||||
})
|
||||
}
|
||||
|
||||
onShow() {
|
||||
super.onShow()
|
||||
this.modules.forEach(e => {
|
||||
this.mountedModules.forEach(e => {
|
||||
e.onShow()
|
||||
})
|
||||
}
|
||||
|
||||
onHidden() {
|
||||
super.onHidden()
|
||||
this.modules.forEach(e => {
|
||||
this.mountedModules.forEach(e => {
|
||||
e.onHidden()
|
||||
})
|
||||
}
|
||||
|
||||
onRenderFinished() {
|
||||
super.onRenderFinished()
|
||||
this.modules.forEach(e => {
|
||||
this.mountedModules.forEach(e => {
|
||||
e.onRenderFinished()
|
||||
})
|
||||
}
|
||||
|
82
doric-web/dist/index.js
vendored
82
doric-web/dist/index.js
vendored
@ -4397,6 +4397,10 @@ class VMPanel extends Panel {
|
||||
}
|
||||
|
||||
class Module extends Panel {
|
||||
constructor() {
|
||||
super(...arguments);
|
||||
this.unmounted = false;
|
||||
}
|
||||
get provider() {
|
||||
var _a;
|
||||
return this.__provider || ((_a = this.superPanel) === null || _a === void 0 ? void 0 : _a.provider);
|
||||
@ -4404,11 +4408,57 @@ class Module extends Panel {
|
||||
set provider(provider) {
|
||||
this.__provider = provider;
|
||||
}
|
||||
mount() {
|
||||
var _a;
|
||||
if (this.unmounted) {
|
||||
this.unmounted = false;
|
||||
(_a = this.superPanel) === null || _a === void 0 ? void 0 : _a.onStructureChanged(this, true);
|
||||
this.onMounted();
|
||||
}
|
||||
}
|
||||
unmount() {
|
||||
var _a;
|
||||
if (!this.unmounted) {
|
||||
this.unmounted = true;
|
||||
(_a = this.superPanel) === null || _a === void 0 ? void 0 : _a.onStructureChanged(this, false);
|
||||
this.onUnmounted();
|
||||
}
|
||||
}
|
||||
get mounted() {
|
||||
return !this.unmounted;
|
||||
}
|
||||
/**
|
||||
* Dispatch message to other modules.
|
||||
* @param message which is sent out
|
||||
*/
|
||||
dispatchMessage(message) {
|
||||
var _a;
|
||||
(_a = this.superPanel) === null || _a === void 0 ? void 0 : _a.dispatchMessage(message);
|
||||
}
|
||||
/**
|
||||
* Dispatched messages can be received by override this method.
|
||||
* @param message recevied message
|
||||
*/
|
||||
onMessage(message) { }
|
||||
/**
|
||||
* Called when this module is mounted
|
||||
*/
|
||||
onMounted() { }
|
||||
/**
|
||||
* Called when this module is unmounted
|
||||
*/
|
||||
onUnmounted() { }
|
||||
}
|
||||
class VMModule extends Module {
|
||||
getViewModel() {
|
||||
return this.vm;
|
||||
}
|
||||
build(root) {
|
||||
this.vh = new (this.getViewHolderClass());
|
||||
this.vm = new (this.getViewModelClass())(this.getState(), this.vh);
|
||||
this.vm.context = this.context;
|
||||
this.vm.attach(root);
|
||||
}
|
||||
}
|
||||
class ModularPanel extends Module {
|
||||
constructor() {
|
||||
@ -4429,48 +4479,65 @@ class ModularPanel extends Module {
|
||||
this.onMessage(message);
|
||||
}
|
||||
}
|
||||
get mountedModules() {
|
||||
return this.modules.filter(e => !(e instanceof Module) || e.mounted);
|
||||
}
|
||||
onMessage(message) {
|
||||
this.modules.forEach(e => {
|
||||
this.mountedModules.forEach(e => {
|
||||
if (e instanceof Module) {
|
||||
e.onMessage(message);
|
||||
}
|
||||
});
|
||||
}
|
||||
onStructureChanged(module, mounted) {
|
||||
if (this.superPanel) {
|
||||
this.superPanel.onStructureChanged(module, mounted);
|
||||
}
|
||||
else {
|
||||
if (!!!this.scheduledRebuild) {
|
||||
this.scheduledRebuild = setTimeout(() => {
|
||||
this.scheduledRebuild = undefined;
|
||||
this.getRootView().children.length = 0;
|
||||
this.build(this.getRootView());
|
||||
}, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
build(root) {
|
||||
const groupView = this.setupShelf(root);
|
||||
this.modules.forEach(e => {
|
||||
this.mountedModules.forEach(e => {
|
||||
Reflect.set(e, "__root__", groupView);
|
||||
e.build(groupView);
|
||||
});
|
||||
}
|
||||
onCreate() {
|
||||
super.onCreate();
|
||||
this.modules.forEach(e => {
|
||||
this.mountedModules.forEach(e => {
|
||||
e.context = this.context;
|
||||
e.onCreate();
|
||||
});
|
||||
}
|
||||
onDestroy() {
|
||||
super.onDestroy();
|
||||
this.modules.forEach(e => {
|
||||
this.mountedModules.forEach(e => {
|
||||
e.onDestroy();
|
||||
});
|
||||
}
|
||||
onShow() {
|
||||
super.onShow();
|
||||
this.modules.forEach(e => {
|
||||
this.mountedModules.forEach(e => {
|
||||
e.onShow();
|
||||
});
|
||||
}
|
||||
onHidden() {
|
||||
super.onHidden();
|
||||
this.modules.forEach(e => {
|
||||
this.mountedModules.forEach(e => {
|
||||
e.onHidden();
|
||||
});
|
||||
}
|
||||
onRenderFinished() {
|
||||
super.onRenderFinished();
|
||||
this.modules.forEach(e => {
|
||||
this.mountedModules.forEach(e => {
|
||||
e.onRenderFinished();
|
||||
});
|
||||
}
|
||||
@ -4523,6 +4590,7 @@ exports.TOP = TOP;
|
||||
exports.Text = Text;
|
||||
exports.TranslationAnimation = TranslationAnimation;
|
||||
exports.VLayout = VLayout;
|
||||
exports.VMModule = VMModule;
|
||||
exports.VMPanel = VMPanel;
|
||||
exports.View = View;
|
||||
exports.ViewComponent = ViewComponent;
|
||||
|
2
doric-web/dist/index.js.map
vendored
2
doric-web/dist/index.js.map
vendored
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user