@kieler/klighd-core
Version:
Core KLighD diagram visualization with Sprotty
127 lines • 7.88 kB
JavaScript
"use strict";
/*
* KIELER - Kiel Integrated Environment for Layout Eclipse RichClient
*
* http://rtsys.informatik.uni-kiel.de/kieler
*
* Copyright 2021-2024 by
* + Kiel University
* + Department of Computer Science
* + Real-Time and Embedded Systems Group
*
* This program and the accompanying materials are made available under the
* terms of the Eclipse Public License 2.0 which is available at
* http://www.eclipse.org/legal/epl-2.0.
*
* SPDX-License-Identifier: EPL-2.0
*/
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.GeneralPanel = void 0;
/** @jsx html */
const inversify_1 = require("inversify");
const sprotty_1 = require("sprotty"); // eslint-disable-line @typescript-eslint/no-unused-vars
const actions_1 = require("@kieler/klighd-interactive/lib/actions");
const di_symbols_1 = require("../di.symbols");
const feather_icons_snabbdom_1 = require("../feather-icons-snabbdom/feather-icons-snabbdom");
const preferences_registry_1 = require("../preferences-registry");
const sidebar_1 = require("../sidebar");
const actions_2 = require("../syntheses/actions");
const syntheses_registry_1 = require("../syntheses/syntheses-registry");
const actions_3 = require("./actions");
const option_inputs_1 = require("./components/option-inputs");
const synthesis_picker_1 = require("./components/synthesis-picker");
const options_renderer_1 = require("./options-renderer");
const render_options_registry_1 = require("./render-options-registry");
const sidebar_panel_1 = require("../sidebar/sidebar-panel");
/**
* Sidebar panel that displays general diagram configurations,
* such as quick actions, changing the synthesis or preferences.
*/
let GeneralPanel = class GeneralPanel extends sidebar_1.SidebarPanel {
constructor() {
super(...arguments);
// Sets this panel at the second position
// hierarchy is: first elem has the lowest number. so the last one got the highest
this.position = 0; // --> middle position (at the moment)
}
init() {
// Subscribe to different registry changes to make this panel reactive
this.synthesesRegistry.onChange(() => this.update());
this.preferencesRegistry.onChange(() => this.update());
this.renderOptionsRegistry.onChange(() => this.update());
this.assignQuickActions();
}
get id() {
return 'general-panel';
}
get title() {
return 'General';
}
update() {
super.assignQuickActions();
super.update();
}
render() {
return ((0, sprotty_1.html)("div", null,
(0, sprotty_1.html)(sidebar_panel_1.QuickActionsBar, { quickActions: this.getQuickActions(), onChange: this.handleQuickActionClick.bind(this), thisSidebarPanel: this }),
(0, sprotty_1.html)("div", { "class-options__section": "true" },
(0, sprotty_1.html)("h5", { "class-options__heading": "true" }, "Synthesis"),
(0, sprotty_1.html)(synthesis_picker_1.SynthesisPicker, { currentId: this.synthesesRegistry.currentSynthesisID, syntheses: this.synthesesRegistry.syntheses, onChange: this.handleSynthesisPickerChange.bind(this) })),
(0, sprotty_1.html)("div", { "class-options__section": "true" },
(0, sprotty_1.html)("h5", { "class-options__heading": "true" }, "Render Options"),
this.optionsRenderer.renderRenderOptions(this.renderOptionsRegistry.allRenderOptions, this.renderOptionsRegistry.getValue(render_options_registry_1.DebugOptions))),
(0, sprotty_1.html)("div", { "class-options__section": "true" },
(0, sprotty_1.html)("h5", { "class-options__heading": "true" }, "Preferences"),
(0, sprotty_1.html)(option_inputs_1.CheckOption, { id: preferences_registry_1.ShouldSelectDiagramOption.ID, name: preferences_registry_1.ShouldSelectDiagramOption.NAME, value: this.preferencesRegistry.getValue(preferences_registry_1.ShouldSelectDiagramOption), onChange: this.handlePreferenceChange.bind(this, preferences_registry_1.ShouldSelectDiagramOption.ID) }),
(0, sprotty_1.html)(option_inputs_1.CheckOption, { id: preferences_registry_1.ShouldSelectTextOption.ID, name: preferences_registry_1.ShouldSelectTextOption.NAME, value: this.preferencesRegistry.getValue(preferences_registry_1.ShouldSelectTextOption), onChange: this.handlePreferenceChange.bind(this, preferences_registry_1.ShouldSelectTextOption.ID) }),
this.renderOptionsRegistry.getValue(render_options_registry_1.DebugOptions) ? ((0, sprotty_1.html)(option_inputs_1.CheckOption, { id: preferences_registry_1.IncrementalDiagramGeneratorOption.ID, name: preferences_registry_1.IncrementalDiagramGeneratorOption.NAME, value: this.preferencesRegistry.getValue(preferences_registry_1.IncrementalDiagramGeneratorOption), onChange: this.handlePreferenceChange.bind(this, preferences_registry_1.IncrementalDiagramGeneratorOption.ID) })) : (''),
this.renderOptionsRegistry.getValue(render_options_registry_1.DebugOptions) ? ((0, sprotty_1.html)(option_inputs_1.CheckOption, { id: preferences_registry_1.ClientLayoutOption.ID, name: preferences_registry_1.ClientLayoutOption.NAME, value: this.preferencesRegistry.getValue(preferences_registry_1.ClientLayoutOption), onChange: this.handlePreferenceChange.bind(this, preferences_registry_1.ClientLayoutOption.ID) })) : (''))));
}
handleSynthesisPickerChange(newId) {
this.actionDispatcher.dispatch(actions_2.SetSynthesisAction.create(newId));
}
handlePreferenceChange(key, newValue) {
this.actionDispatcher.dispatch(actions_3.SetPreferencesAction.create([{ id: key, value: newValue }]));
if (key === preferences_registry_1.ClientLayoutOption.ID) {
this.actionDispatcher.dispatch(actions_1.RefreshDiagramAction.create({
needsClientLayout: newValue,
needsServerLayout: !newValue,
}));
}
}
get icon() {
return (0, sprotty_1.html)(feather_icons_snabbdom_1.FeatherIcon, { iconId: 'settings' });
}
};
exports.GeneralPanel = GeneralPanel;
__decorate([
(0, inversify_1.inject)(di_symbols_1.DISymbol.SynthesesRegistry),
__metadata("design:type", syntheses_registry_1.SynthesesRegistry)
], GeneralPanel.prototype, "synthesesRegistry", void 0);
__decorate([
(0, inversify_1.inject)(di_symbols_1.DISymbol.PreferencesRegistry),
__metadata("design:type", preferences_registry_1.PreferencesRegistry)
], GeneralPanel.prototype, "preferencesRegistry", void 0);
__decorate([
(0, inversify_1.inject)(di_symbols_1.DISymbol.OptionsRenderer),
__metadata("design:type", options_renderer_1.OptionsRenderer)
], GeneralPanel.prototype, "optionsRenderer", void 0);
__decorate([
(0, inversify_1.postConstruct)(),
__metadata("design:type", Function),
__metadata("design:paramtypes", []),
__metadata("design:returntype", void 0)
], GeneralPanel.prototype, "init", null);
exports.GeneralPanel = GeneralPanel = __decorate([
(0, inversify_1.injectable)()
], GeneralPanel);
//# sourceMappingURL=general-panel.js.map