@kieler/klighd-core
Version:
Core KLighD diagram visualization with Sprotty
173 lines • 8.01 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
*/
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.QuickActionsBar = exports.SidebarPanel = void 0;
/** @jsx html */
const actions_1 = require("@kieler/klighd-interactive/lib/actions");
const inversify_1 = require("inversify");
const sprotty_1 = require("sprotty"); // eslint-disable-line @typescript-eslint/no-unused-vars
const sprotty_protocol_1 = require("sprotty-protocol");
const actions_2 = require("../actions/actions");
const bookmark_1 = require("../bookmarks/bookmark");
const di_symbols_1 = require("../di.symbols");
const feather_icons_snabbdom_1 = require("../feather-icons-snabbdom/feather-icons-snabbdom");
const actions_3 = require("../options/actions");
const render_options_registry_1 = require("../options/render-options-registry");
/**
* Abstract SidebarPanel that should be used as the base for a custom {@link ISidebarPanel}.
*
* This class simplifies the implementation around handling render updates.
*
*
* To use these quick actions you have to use the getQuickActions() method to get the quick actions.
* Furthermore you have to call the `assignQuickActions` method in update() and init().
* Also make sure you add the renderOptionsRegistry to the constructor init() via
* `this.renderOptionsRegistry.onChange(() => this.update())`
* Furthermore, add the html create method in the `render()` method via `<QuickActionsBar/>`
*/
let SidebarPanel = class SidebarPanel {
constructor() {
this._updateCallbacks = [];
this.position = 0;
}
onUpdate(callback) {
this._updateCallbacks.push(callback);
}
/** Call this method if you want to trigger a re-render and update the UI. */
update() {
for (const callback of this._updateCallbacks) {
callback();
}
}
/**
* This method inits the quick actions, if you want to use them for a panel.
*/
assignQuickActions() {
this.quickActions = [
{
key: 'center',
title: 'Center diagram',
iconId: 'maximize',
action: sprotty_protocol_1.CenterAction.create([], { animate: true }),
},
{
key: 'fit',
title: 'Fit to screen',
iconId: 'maximize-2',
action: this.renderOptionsRegistry.getValue(render_options_registry_1.ResizeToFit)
? undefined
: actions_2.KlighdFitToScreenAction.create(true),
state: this.renderOptionsRegistry.getValue(render_options_registry_1.ResizeToFit),
effect: () => {
this.actionDispatcher.dispatch(actions_3.SetRenderOptionAction.create(render_options_registry_1.ResizeToFit.ID, !this.renderOptionsRegistry.getValue(render_options_registry_1.ResizeToFit)));
this.update();
},
},
{
key: 'layout',
title: 'Layout diagram',
iconId: 'layout',
action: actions_2.RefreshLayoutAction.create(),
},
{
key: 'refresh',
title: 'Refresh diagram',
iconId: 'rotate-cw',
action: actions_1.RefreshDiagramAction.create(),
},
{
key: 'export',
title: 'Export as SVG',
iconId: 'save',
action: sprotty_1.RequestExportSvgAction.create(),
},
{
key: 'create-bookmark',
title: 'Bookmark',
iconId: 'bookmark',
action: bookmark_1.CreateBookmarkAction.create(),
},
{
key: 'pin-sidebar',
title: this.renderOptionsRegistry.getValueOrDefault(render_options_registry_1.PinSidebarOption) ? 'Unpin Sidebar' : 'Pin Sidebar',
iconId: this.renderOptionsRegistry.getValueOrDefault(render_options_registry_1.PinSidebarOption) ? 'lock' : 'unlock',
action: actions_3.SetRenderOptionAction.create(render_options_registry_1.PinSidebarOption.ID, !this.renderOptionsRegistry.getValueOrDefault(render_options_registry_1.PinSidebarOption)),
state: this.renderOptionsRegistry.getValue(render_options_registry_1.PinSidebarOption),
effect: () => {
this.actionDispatcher.dispatch(actions_3.SetRenderOptionAction.create(render_options_registry_1.PinSidebarOption.ID, !this.renderOptionsRegistry.getValue(render_options_registry_1.PinSidebarOption)));
this.update();
},
},
];
}
/**
* Gets all available quick actions so tab panels can inherit it.
* @returns The available quick actions so other classes can inherit it.
*/
getQuickActions() {
return this.quickActions;
}
/**
* Handles the click on one quickaction element.
* @param type The quickaction to handle.
*/
handleQuickActionClick(type) {
var _a;
const action = (_a = this.getQuickActions().find((a) => a.key === type)) === null || _a === void 0 ? void 0 : _a.action;
if (!action)
return;
this.actionDispatcher.dispatch(action);
}
};
exports.SidebarPanel = SidebarPanel;
__decorate([
(0, inversify_1.inject)(di_symbols_1.DISymbol.RenderOptionsRegistry),
__metadata("design:type", render_options_registry_1.RenderOptionsRegistry)
], SidebarPanel.prototype, "renderOptionsRegistry", void 0);
__decorate([
(0, inversify_1.inject)(sprotty_1.TYPES.IActionDispatcher),
__metadata("design:type", Object)
], SidebarPanel.prototype, "actionDispatcher", void 0);
exports.SidebarPanel = SidebarPanel = __decorate([
(0, inversify_1.injectable)()
], SidebarPanel);
/**
* This method creates the quick actions bar as a resuable component.
*/
function QuickActionsBar(props) {
return ((0, sprotty_1.html)("div", { "class-options__section": "true" },
(0, sprotty_1.html)("h5", { "class-options__heading": "true" }, "Quick Actions"),
(0, sprotty_1.html)("div", { "class-options__button-group": "true" }, props.quickActions.map((action) => ((0, sprotty_1.html)("button", { title: action.title, "class-options__icon-button": "true", "class-sidebar__enabled-button": !!action.state, "on-click": () => {
if (action.effect) {
action.effect.apply(props.thisSidebarPanel);
}
props.onChange(action.key);
} },
(0, sprotty_1.html)(feather_icons_snabbdom_1.FeatherIcon, { iconId: action.iconId })))))));
}
exports.QuickActionsBar = QuickActionsBar;
//# sourceMappingURL=sidebar-panel.js.map