@tomino/dynamic-form-semantic-ui/dist/mjs/editor/editor_state.js

Semantic UI form renderer based on dynamic form generation

import * as tslib_1 from "tslib";
import { observable, computed, action } from 'mobx';
import { toJS } from '../common';
import { buildDataSet } from '@tomino/dynamic-form';
import { debounce } from '@tomino/toolbelt';
import { ProjectManager } from './project_manager';
import { prepareStores } from './form_store';
import { schemaSchema } from './common_schemas';
import { schemaDatasetToJS } from '../helpers';
import { white } from './themes/white';
import { black } from './themes/black';
let id = 0;
export class EditorState {
    constructor(componentCatalogue = null, editorCatalogue = null, handlers = {}, types = [], storage = null, theme = 'dark') {
        this.__id = id++;
        this.leftPanelConfig = [true, true];
        this.selectedDataSetTab = 'dataset';
        this.selectedSourcePath = null;
        this.tabSelection = {};
        this.help = '';
        this.dataVersion = 0;
        this.dataPreview = '';
        this.previewOpen = false;
        this.alert = null;
        this.authToken = null;
        this.auth = observable({ user: null });
        this.app = {};
        this._cachedProps = {};
        this._cachedChildProps = {};
        this.recomputeDataBounce = debounce(() => this.recomputeData(), 500);
        this.editorProps = [
            {
                group: 'Editor',
                control: 'Input',
                props: { value: { source: 'editorLabel' }, label: 'Label' }
            },
            {
                group: 'Editor',
                control: 'Checkbox',
                props: { checked: { source: 'locked' }, label: 'Locked' }
            }
        ];
        this.componentCatalogue = componentCatalogue;
        this.editorCatalogue = editorCatalogue;
        this.handlers = handlers;
        this.types = types;
        this.theme = theme === 'light' ? white : black;
        this.types = (types || []).concat({
            id: 'schema',
            name: 'Schema',
            description: 'Schema of the schema definition',
            schema: schemaSchema
        });
        this.buildProject = prepareStores(this);
        this.manager = new ProjectManager(storage, this.buildProject);
        if (handlers) {
            this.projectHandlers = Object.getOwnPropertyNames(handlers).sort();
        }
    }
    get dragItem() {
        return this._dragItem;
    }
    set dragItem(v) {
        this._dragItem = v;
    }
    async loadLastProject() {
        if (this.manager.storage) {
            this.project = await this.manager.loadLastProject();
        }
        return this.project;
    }
    get data() {
        if (!this.dataSource) {
            this.recomputeData();
        }
        this.dataVersion;
        return this.dataSource;
    }
    recomputeData() {
        const data = toJS(this.dataSource);
        const dataSet = schemaDatasetToJS(this.schema, false);
        try {
            this.dataSource = this.project ? buildDataSet(dataSet, data, false) : null;
        }
        catch (ex) {
            alert('Data is no longer valid, needed to remove temporary data');
            this.dataSource = this.project ? buildDataSet(dataSet, {}, false) : null;
        }
        this.dataVersion++;
    }
    highlight(highlighter, row, column, className, width = 1, clear = true) {
        if (clear && this.highlighter) {
            this.highlighter.clearHighlight();
        }
        this.highlighter = highlighter;
        this.highlighter.highlight(row, column, className, width);
    }
    highlightMultiple(highlighter, cells) {
        if (this.highlighter) {
            this.highlighter.clearHighlight();
        }
        this.highlighter = highlighter;
        this.highlighter.highlightMultiple(cells);
    }
    changeTab(from, to) {
        this.tabSelection[from] = {
            schema: this.project.state.selectedSchema,
            name: this.project.state.selectedSchemaName
        };
        if (this.tabSelection[to]) {
            this.project.state.setSchema(this.tabSelection[to].schema, this.tabSelection[to].name);
        }
        this.selectedDataSetTab = to;
    }
    cachedProps(element) {
        if (!element.props) {
            return [];
        }
        if (!this._cachedProps[element.control]) {
            this._cachedProps[element.control] = Object.keys(element.props).map(key => element.props[key].control);
        }
        return this._cachedProps[element.control];
    }
    cachedChildProps(element) {
        if (!element.childProps) {
            return [];
        }
        if (!this._cachedChildProps[element.control]) {
            this._cachedChildProps[element.control] = Object.keys(element.childProps).map(key => element.childProps[key].control);
        }
        return this._cachedChildProps[element.control];
    }
    load(project, saveLast = true) {
        this.project = this.manager.load(project, saveLast);
    }
    duplicateProject(name) {
        this.project = this.manager.duplicateProject(this.project, name);
    }
    createProject(name) {
        this.project = this.manager.createProject(name);
    }
}
EditorState.LAST = 'CORPIX_LAST_PROJECT';
tslib_1.__decorate([
    observable,
    tslib_1.__metadata("design:type", Array)
], EditorState.prototype, "projectHandlers", void 0);
tslib_1.__decorate([
    observable,
    tslib_1.__metadata("design:type", String)
], EditorState.prototype, "help", void 0);
tslib_1.__decorate([
    observable,
    tslib_1.__metadata("design:type", Object)
], EditorState.prototype, "dataVersion", void 0);
tslib_1.__decorate([
    observable,
    tslib_1.__metadata("design:type", Object)
], EditorState.prototype, "dataPreview", void 0);
tslib_1.__decorate([
    observable,
    tslib_1.__metadata("design:type", Object)
], EditorState.prototype, "previewOpen", void 0);
tslib_1.__decorate([
    observable.shallow,
    tslib_1.__metadata("design:type", Object)
], EditorState.prototype, "project", void 0);
tslib_1.__decorate([
    computed,
    tslib_1.__metadata("design:type", Object),
    tslib_1.__metadata("design:paramtypes", [])
], EditorState.prototype, "data", null);
tslib_1.__decorate([
    action,
    tslib_1.__metadata("design:type", Function),
    tslib_1.__metadata("design:paramtypes", []),
    tslib_1.__metadata("design:returntype", void 0)
], EditorState.prototype, "recomputeData", null);
//# sourceMappingURL=editor_state.js.map