@kieler/klighd-core
Version:
Core KLighD diagram visualization with Sprotty
171 lines • 12.5 kB
JavaScript
"use strict";
/*
* KIELER - Kiel Integrated Environment for Layout Eclipse RichClient
*
* http://rtsys.informatik.uni-kiel.de/kieler
*
* Copyright 2021-2022 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.OptionsRenderer = void 0;
/** @jsx html */
const inversify_1 = require("inversify");
const sprotty_1 = require("sprotty"); // eslint-disable-line @typescript-eslint/no-unused-vars
const di_symbols_1 = require("../di.symbols");
const actions_1 = require("./actions");
const option_inputs_1 = require("./components/option-inputs");
const option_models_1 = require("./option-models");
const render_options_registry_1 = require("./render-options-registry");
/** Renderer that is capable of rendering different option models to jsx. */
let OptionsRenderer = class OptionsRenderer {
/**
* Renders all diagram options that are provided by the server. This includes
* the synthesis and layout options as well as performable actions.
*/
renderServerOptions(options) {
return ((0, sprotty_1.html)("div", { "class-options": "true" },
options.actions.length === 0 ? ('') : ((0, sprotty_1.html)("div", { "class-options__section": "true" },
(0, sprotty_1.html)("h5", { "class-options__heading": "true" }, "Actions"),
(0, sprotty_1.html)("div", { "class-options__button-group": "true" }, this.renderActions(options.actions)))),
options.synthesisOptions.length === 0 ? ('') : ((0, sprotty_1.html)("div", { "class-options__section": "true" },
(0, sprotty_1.html)("h5", { "class-options__heading": "true" }, "Synthesis Options"),
this.renderSynthesisOptions(options.synthesisOptions, null))),
options.layoutOptions.length === 0 ? ('') : ((0, sprotty_1.html)("div", { "class-options__section": "true" },
(0, sprotty_1.html)("h5", { "class-options__heading": "true" }, "Layout Options"),
this.renderLayoutOptions(options.layoutOptions)))));
}
renderActions(actions) {
return actions.map((action) => ((0, sprotty_1.html)("button", { "class-options__button": "true", key: action.actionId, title: action.tooltipText, "on-click": this.handleActionClick.bind(this, action.actionId) }, action.displayedName)));
}
handleActionClick(actionId) {
this.actionDispatcher.dispatch(actions_1.PerformOptionsActionAction.create(actionId));
}
/**
* Renders all synthesis options that are part of a given category. Renders all
* synthesisOptions that belong to no category if the category is null.
*/
renderSynthesisOptions(synthesisOptions, category) {
return synthesisOptions
.filter((option) => { var _a; return ((_a = option.category) === null || _a === void 0 ? void 0 : _a.id) === (category === null || category === void 0 ? void 0 : category.id); })
.map((option) => {
switch (option.type) {
case option_models_1.TransformationOptionType.CHECK:
return ((0, sprotty_1.html)(option_inputs_1.CheckOption, { key: option.id, id: option.id, name: option.name, value: option.currentValue, description: option.description, onChange: this.handleSynthesisOptionChange.bind(this, option) }));
case option_models_1.TransformationOptionType.CHOICE:
return ((0, sprotty_1.html)(option_inputs_1.ChoiceOption, { key: option.id, id: option.id, name: option.name, value: option.currentValue, availableValues: option.values, description: option.description, onChange: this.handleSynthesisOptionChange.bind(this, option) }));
case option_models_1.TransformationOptionType.RANGE:
return ((0, sprotty_1.html)(option_inputs_1.RangeOption, { key: option.id, id: option.id, name: option.name, value: option.currentValue, minValue: option.range.first, maxValue: option.range.second, stepSize: option.stepSize, description: option.description, onChange: this.handleSynthesisOptionChange.bind(this, option), onInput: this.handleSynthesisOptionInput.bind(this, option) }));
case option_models_1.TransformationOptionType.TEXT:
return ((0, sprotty_1.html)(option_inputs_1.TextOption, { key: option.id, id: option.id, name: option.name, value: option.currentValue, description: option.description, onChange: this.handleSynthesisOptionChange.bind(this, option) }));
case option_models_1.TransformationOptionType.SEPARATOR:
return (0, sprotty_1.html)(option_inputs_1.SeparatorOption, { key: option.id, name: option.name });
case option_models_1.TransformationOptionType.CATEGORY:
return ((0, sprotty_1.html)(option_inputs_1.CategoryOption, { key: option.id, id: option.id, name: option.name, value: option.currentValue, description: option.description, onChange: this.handleSynthesisOptionChange.bind(this, option) }, !option.currentValue ? '' : this.renderSynthesisOptions(synthesisOptions, option)));
default:
console.error('Unsupported option type for option:', option.name);
return '';
}
});
}
/** Handler for synthesis options onChange. */
handleSynthesisOptionChange(option, newValue) {
this.actionDispatcher.dispatch(actions_1.SetSynthesisOptionsAction.create([Object.assign(Object.assign({}, option), { currentValue: newValue })]));
}
/** Handler for synthesis options onInput, e.g. while a slider is being dragged. */
handleSynthesisOptionInput(option, newValue) {
this.actionDispatcher.dispatch(actions_1.SetSynthesisOptionsAction.create([Object.assign(Object.assign({}, option), { currentValue: newValue })], false));
}
renderLayoutOptions(layoutOptions) {
return layoutOptions.map((option) => {
switch (option.type) {
case option_models_1.Type.INT:
case option_models_1.Type.DOUBLE:
return ((0, sprotty_1.html)(option_inputs_1.RangeOption, { key: option.optionId, id: option.optionId, name: option.name, value: option.currentValue, minValue: option.minValue, maxValue: option.maxValue, stepSize: option.type === option_models_1.Type.INT ? 1 : 0.01, description: option.description, onChange: this.handleLayoutOptionChange.bind(this, option), onInput: this.handleLayoutOptionInput.bind(this, option) }));
case option_models_1.Type.BOOLEAN:
return ((0, sprotty_1.html)(option_inputs_1.CheckOption, { key: option.optionId, id: option.optionId, name: option.name, value: option.currentValue, description: option.description, onChange: this.handleLayoutOptionChange.bind(this, option) }));
case option_models_1.Type.ENUM:
return ((0, sprotty_1.html)(option_inputs_1.ChoiceOption, { key: option.optionId, id: option.optionId, name: option.name, value: option.currentValue, availableValues: option.availableValues.k, availableValuesLabels: option.availableValues.v, description: option.description, onChange: this.handleLayoutOptionChange.bind(this, option) }));
default:
console.error('Unsupported option type for option:', option.name);
return '';
}
});
}
/** Handler for layout options onChange. */
handleLayoutOptionChange(option, newValue) {
this.actionDispatcher.dispatch(actions_1.SetLayoutOptionsAction.create([{ optionId: option.optionId, value: newValue }]));
}
/** Handler for layout options onInput, e.g. while a slider is being dragged. */
handleLayoutOptionInput(option, newValue) {
this.actionDispatcher.dispatch(actions_1.SetLayoutOptionsAction.create([{ optionId: option.optionId, value: newValue }], false));
}
/** Renders render options that are stored in the client. An example would be "show constraints" */
renderRenderOptions(renderOptions, debug, renderCategory) {
if (renderOptions.length === 0)
return '';
return renderOptions
.filter((option) => debug || !option.debug)
.filter((option) => option.renderCategory === (renderCategory === null || renderCategory === void 0 ? void 0 : renderCategory.id))
.map((option) => {
switch (option.type) {
case option_models_1.TransformationOptionType.CHECK:
return ((0, sprotty_1.html)(option_inputs_1.CheckOption, { key: option.id, id: option.id, name: option.name, value: option.currentValue, description: option.description, onChange: this.handleRenderOptionChange.bind(this, option) }));
case option_models_1.TransformationOptionType.RANGE:
return ((0, sprotty_1.html)(option_inputs_1.RangeOption, { key: option.id, id: option.id, name: option.name, value: option.currentValue, minValue: option.range.first, maxValue: option.range.second, stepSize: option.stepSize, description: option.description, onChange: this.handleRenderOptionChange.bind(this, option),
// Same as onChange
onInput: this.handleRenderOptionChange.bind(this, option) }));
case option_models_1.TransformationOptionType.CATEGORY:
return ((0, sprotty_1.html)(option_inputs_1.CategoryOption, { key: option.id, id: option.id, name: option.name, value: option.currentValue, description: option.description, onChange: this.handleRenderOptionChange.bind(this, option) }, !option.currentValue ? '' : this.renderRenderOptions(renderOptions, debug, option)));
case option_models_1.TransformationOptionType.CHOICE:
if (option.values) {
return ((0, sprotty_1.html)(option_inputs_1.ChoiceOption, { key: option.id, id: option.id, name: option.name, value: option.currentValue, availableValues: option.values, description: option.description, onChange: this.handleRenderOptionChange.bind(this, option) }));
}
console.error('No choice values for option:', option.name);
return '';
default:
console.error('Unsupported option type for option:', option.name);
return '';
}
});
}
/** Handler for render options onChange. */
handleRenderOptionChange(option, newValue) {
this.actionDispatcher.dispatch(actions_1.SetRenderOptionAction.create(option.id, newValue));
}
};
exports.OptionsRenderer = OptionsRenderer;
__decorate([
(0, inversify_1.inject)(sprotty_1.TYPES.IActionDispatcher),
__metadata("design:type", Object)
], OptionsRenderer.prototype, "actionDispatcher", void 0);
__decorate([
(0, inversify_1.inject)(di_symbols_1.DISymbol.RenderOptionsRegistry),
__metadata("design:type", render_options_registry_1.RenderOptionsRegistry
/**
* Renders all diagram options that are provided by the server. This includes
* the synthesis and layout options as well as performable actions.
*/
)
], OptionsRenderer.prototype, "renderOptionsRegistry", void 0);
exports.OptionsRenderer = OptionsRenderer = __decorate([
(0, inversify_1.injectable)()
], OptionsRenderer);
//# sourceMappingURL=options-renderer.js.map