@kieler/klighd-core
Version:
Core KLighD diagram visualization with Sprotty
78 lines • 4.91 kB
JavaScript
;
/*
* 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
*/
Object.defineProperty(exports, "__esModule", { value: true });
exports.CategoryOption = exports.SeparatorOption = exports.TextOption = exports.RangeOption = exports.ChoiceOption = exports.CheckOption = void 0;
const sprotty_1 = require("sprotty"); // eslint-disable-line @typescript-eslint/no-unused-vars
/** Render a labeled checkbox input. */
function CheckOption(props) {
var _a, _b;
return ((0, sprotty_1.html)("label", { htmlFor: props.id, title: (_a = props.description) !== null && _a !== void 0 ? _a : props.name },
(0, sprotty_1.html)("input", { "class-options__input": "true", type: "checkbox", title: (_b = props.description) !== null && _b !== void 0 ? _b : props.name, id: props.id, checked: props.value, "on-change": () => props.onChange(!props.value) }),
props.name));
}
exports.CheckOption = CheckOption;
/** Render a labeled group of radio inputs. */
function ChoiceOption(props) {
return ((0, sprotty_1.html)("div", { "class-options__input-container": "true" },
(0, sprotty_1.html)("legend", null, props.name),
props.availableValues.map((value, i) => {
var _a, _b, _c, _d, _e, _f, _g, _h;
return ((0, sprotty_1.html)("label", { key: value, htmlFor: (_b = (_a = props.availableValuesLabels) === null || _a === void 0 ? void 0 : _a[i]) !== null && _b !== void 0 ? _b : value, title: (_c = props.description) !== null && _c !== void 0 ? _c : props.name },
(0, sprotty_1.html)("input", { "class-options__input": "true", type: "radio", title: (_d = props.description) !== null && _d !== void 0 ? _d : props.name, id: (_f = (_e = props.availableValuesLabels) === null || _e === void 0 ? void 0 : _e[i]) !== null && _f !== void 0 ? _f : value, checked: props.value === value, "on-change": () => props.onChange(value) }), (_h = (_g = props.availableValuesLabels) === null || _g === void 0 ? void 0 : _g[i]) !== null && _h !== void 0 ? _h : value));
})));
}
exports.ChoiceOption = ChoiceOption;
/** Render a labeled range slider as input. */
function RangeOption(props) {
var _a, _b;
return ((0, sprotty_1.html)("div", { "class-options__column": "true" },
(0, sprotty_1.html)("label", { htmlFor: props.id, title: (_a = props.description) !== null && _a !== void 0 ? _a : props.name },
props.name,
": ",
props.value),
(0, sprotty_1.html)("input", { "class-options__input": "true", type: "range", title: (_b = props.description) !== null && _b !== void 0 ? _b : props.name, id: props.id, min: props.minValue, max: props.maxValue, attrs: { value: props.value }, step: props.stepSize, "on-change": (e) => props.onChange(e.target.value), "on-input": (e) => (props.onInput ? props.onInput(e.target.value) : undefined) })));
}
exports.RangeOption = RangeOption;
/** Renders a labeled text input. */
function TextOption(props) {
var _a, _b;
return ((0, sprotty_1.html)("div", { "class-options__column": "true" },
(0, sprotty_1.html)("label", { htmlFor: props.id, title: (_a = props.description) !== null && _a !== void 0 ? _a : props.name }, props.name),
(0, sprotty_1.html)("input", { "class-options__input": true, "options__text-field": "true", type: "text", title: (_b = props.description) !== null && _b !== void 0 ? _b : props.name, id: props.id, value: props.value, "on-change": (e) => props.onChange(e.target.value) })));
}
exports.TextOption = TextOption;
/** Renders a named separator. */
function SeparatorOption(props) {
return (0, sprotty_1.html)("span", { "class-options__separator": "true" }, props.name);
}
exports.SeparatorOption = SeparatorOption;
/** Renders a labeled options group. */
function CategoryOption(props, children) {
var _a;
function handleToggle(e) {
// The toggle event is also fired if the details are rendered default open.
// To prevent an infinite toggle loop, change is only called if the state has really changed.
if (e.target.open !== props.value)
props.onChange(e.target.open);
}
return ((0, sprotty_1.html)("details", { open: props.value, "class-options__category": "true", "on-toggle": handleToggle },
(0, sprotty_1.html)("summary", { title: (_a = props.description) !== null && _a !== void 0 ? _a : props.name }, props.name),
children));
}
exports.CategoryOption = CategoryOption;
//# sourceMappingURL=option-inputs.js.map