add comments

This commit is contained in:
Bowen Tan 2022-04-07 15:34:38 +08:00
parent 9efee4e512
commit 511fd33051
4 changed files with 19 additions and 14 deletions

View File

@ -8,7 +8,8 @@ import { StorageHandler } from '../types';
export class AppStorage { export class AppStorage {
app: Application; app: Application;
modules: Module[]; modules: Module[];
modulesWithId: Module[]; // modules that have {{$moduleId}}__
rawModules: Module[];
static AppLSKey = 'schema'; static AppLSKey = 'schema';
static ModulesLSKey = 'modules'; static ModulesLSKey = 'modules';
@ -19,15 +20,15 @@ export class AppStorage {
) { ) {
this.app = defaultApplication || EmptyAppSchema; this.app = defaultApplication || EmptyAppSchema;
this.modules = defaultModules?.map(removeModuleId) || []; this.modules = defaultModules?.map(removeModuleId) || [];
this.modulesWithId = defaultModules || []; this.rawModules = defaultModules || [];
makeObservable(this, { makeObservable(this, {
app: observable.shallow, app: observable.shallow,
modules: observable.shallow, modules: observable.shallow,
modulesWithId: observable.shallow, rawModules: observable.shallow,
setApp: action, setApp: action,
setModules: action, setModules: action,
setModulesWithId: action, setRawModules: action,
}); });
} }
@ -88,8 +89,8 @@ export class AppStorage {
draft[i].impl = components; draft[i].impl = components;
}); });
this.setModules(newModules); this.setModules(newModules);
const modulesWithId = newModules.map(addModuleId); const rawModules = newModules.map(addModuleId);
this.setModulesWithId(modulesWithId); this.setRawModules(rawModules);
this.saveModules(); this.saveModules();
break; break;
} }
@ -126,8 +127,8 @@ export class AppStorage {
}); });
this.setModules(newModules); this.setModules(newModules);
const modulesWithId = newModules.map(addModuleId); const rawModules = newModules.map(addModuleId);
this.setModulesWithId(modulesWithId); this.setRawModules(rawModules);
this.saveModules(); this.saveModules();
} }
@ -136,8 +137,9 @@ export class AppStorage {
} }
private saveModules() { private saveModules() {
// save rawModules rather than modules because rawModules have {{$moduleId}}__
this.storageHandler?.onSaveModules && this.storageHandler?.onSaveModules &&
this.storageHandler?.onSaveModules(this.modulesWithId); this.storageHandler?.onSaveModules(this.rawModules);
} }
setApp(app: Application) { setApp(app: Application) {
@ -148,7 +150,7 @@ export class AppStorage {
this.modules = modules; this.modules = modules;
} }
setModulesWithId(modules: Module[]) { setRawModules(modules: Module[]) {
this.modulesWithId = modules; this.rawModules = modules;
} }
} }

View File

@ -125,8 +125,8 @@ export class EditorStore {
return this.appStorage.modules; return this.appStorage.modules;
} }
get modulesWithId() { get rawModules() {
return this.appStorage.modulesWithId; return this.appStorage.rawModules;
} }
get selectedComponent() { get selectedComponent() {
@ -197,7 +197,7 @@ export class EditorStore {
// Remove old modules and re-register all modules, // Remove old modules and re-register all modules,
this.registry.unregisterAllModules(); this.registry.unregisterAllModules();
this.modulesWithId.forEach(m => { this.rawModules.forEach(m => {
const modules = createModule(m); const modules = createModule(m);
this.registry.registerModule(modules, true); this.registry.registerModule(modules, true);
}); });

View File

@ -19,6 +19,7 @@ const _ImplWrapper = React.forwardRef<HTMLDivElement, ImplWrapperProps>((props,
const handlerMap = useRef(globalHandlerMap.get(c.id)!); const handlerMap = useRef(globalHandlerMap.get(c.id)!);
const eleRef = useRef<HTMLElement>(); const eleRef = useRef<HTMLElement>();
const onRef = (ele: HTMLElement) => { const onRef = (ele: HTMLElement) => {
// If a component is in module, it should not have mask, so we needn't set it
if (!isInModule) { if (!isInModule) {
eleMap.set(c.id, ele); eleMap.set(c.id, ele);
} }
@ -26,6 +27,7 @@ const _ImplWrapper = React.forwardRef<HTMLDivElement, ImplWrapperProps>((props,
}; };
useEffect(() => { useEffect(() => {
// If a component is in module, it should not have mask, so we needn't set it
if (eleRef.current && !isInModule) { if (eleRef.current && !isInModule) {
eleMap.set(c.id, eleRef.current); eleMap.set(c.id, eleRef.current);
} }

View File

@ -146,6 +146,7 @@ const ModuleRendererContent = React.forwardRef<
}, [evalScope, handlers, moduleId, services.apiService, services.stateManager]); }, [evalScope, handlers, moduleId, services.apiService, services.stateManager]);
const result = useMemo(() => { const result = useMemo(() => {
// Must init components' state, otherwise store cannot listen these components' state changing
initStateAndMethod(services.registry, services.stateManager, evaledModuleTemplate); initStateAndMethod(services.registry, services.stateManager, evaledModuleTemplate);
const { childrenMap, topLevelComponents } = resolveChildrenMap(evaledModuleTemplate); const { childrenMap, topLevelComponents } = resolveChildrenMap(evaledModuleTemplate);
return topLevelComponents.map(c => { return topLevelComponents.map(c => {