@kieler/klighd-core
Version:
Core KLighD diagram visualization with Sprotty
197 lines • 10.1 kB
JavaScript
;
/** @jsx html */
/*
* KIELER - Kiel Integrated Environment for Layout Eclipse RichClient
*
* http://rtsys.informatik.uni-kiel.de/kieler
*
* Copyright 2021-2023 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.BookmarkPanel = void 0;
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 feather_icons_snabbdom_1 = require("../feather-icons-snabbdom/feather-icons-snabbdom");
const sidebar_1 = require("../sidebar");
const bookmark_registry_1 = require("./bookmark-registry");
const bookmark_1 = require("./bookmark");
/* global document, KeyboardEvent, navigator */
/**
* Sidebar panel that displays previously set bookmarks
*/
let BookmarkPanel = class BookmarkPanel extends sidebar_1.SidebarPanel {
constructor() {
super(...arguments);
// sets the bookmarkpanel at the bottom
// hierarchy is: first elem has the lowest number. so the last one got the highest
this.position = 10; // --> last position (at the moment)
}
init() {
// Subscribe to different registry changes to make this panel reactive
this.bookmarkRegistry.onChange(() => this.update());
}
get id() {
return 'bookmark-panel';
}
get title() {
return 'Bookmarks';
}
get icon() {
return (0, sprotty_1.html)(feather_icons_snabbdom_1.FeatherIcon, { iconId: 'bookmark' });
}
render() {
return ((0, sprotty_1.html)("div", null,
(0, sprotty_1.html)("div", null,
(0, sprotty_1.html)("button", { title: "Create new Bookmark", "class-options__icon-button": "true", "on-click": () => this.newBookmark() },
(0, sprotty_1.html)(feather_icons_snabbdom_1.FeatherIcon, { iconId: 'bookmark' })),
(0, sprotty_1.html)("button", { title: "Load from Clipboard", "class-options__icon-button": "true", "on-click": () => this.handleBookmarkPast() },
(0, sprotty_1.html)(feather_icons_snabbdom_1.FeatherIcon, { iconId: 'upload' }))),
this.renderBookmarkList()));
}
renderBookmarkList() {
return (0, sprotty_1.html)("div", null, this.bookmarkRegistry.bookmarks.map((bookmark) => this.renderBookmarkEntry(bookmark)));
}
renderBookmarkEntry(bookmark) {
var _a, _b;
return ((0, sprotty_1.html)("div", { key: bookmark.bookmarkIndex },
(0, sprotty_1.html)("fieldset", null,
(0, sprotty_1.html)("legend", null, (_a = bookmark.name) !== null && _a !== void 0 ? _a : `Bookmark ${bookmark.bookmarkIndex}`),
(0, sprotty_1.html)("button", { title: "Goto", "class-options__icon-button": "true", "on-click": () => this.handleBookmarkGoto(bookmark) },
(0, sprotty_1.html)(feather_icons_snabbdom_1.FeatherIcon, { iconId: 'map-pin' })),
(0, sprotty_1.html)("button", { title: "Save to Clipboard", "class-options__icon-button": "true", "on-click": () => this.handleBookmarkCopy(bookmark) },
(0, sprotty_1.html)(feather_icons_snabbdom_1.FeatherIcon, { iconId: 'download' })),
(0, sprotty_1.html)("button", { title: "Delete Bookmark", "class-options__icon-button": "true", "on-click": () => this.deleteBookmark(bookmark) },
(0, sprotty_1.html)(feather_icons_snabbdom_1.FeatherIcon, { iconId: 'trash-2' })),
(0, sprotty_1.html)("button", { id: bookmark.editId, title: "Edit Bookmark Name", "class-options__icon-button": "true", "on-click": () => this.startBookmarkNameEdit(bookmark) },
(0, sprotty_1.html)(feather_icons_snabbdom_1.FeatherIcon, { iconId: 'edit-3' })),
(0, sprotty_1.html)("span", { id: bookmark.saveId, "class-options__hidden": "true" },
(0, sprotty_1.html)("button", { title: "Save Bookmark Name", "class-options__icon-button": "true", "on-click": () => this.saveBookmarkName(bookmark) },
(0, sprotty_1.html)(feather_icons_snabbdom_1.FeatherIcon, { iconId: 'check' })),
(0, sprotty_1.html)("input", { type: "text", value: (_b = bookmark.name) !== null && _b !== void 0 ? _b : '', placeholder: "Enter Bookmark Name", "on-keypress": (event) => this.inputSaveBookmarkName(bookmark, event) })))));
}
handleBookmarkGoto(bookmark) {
this.actionDispatcher.dispatch(bookmark_1.GoToBookmarkAction.create(bookmark));
}
newBookmark() {
this.actionDispatcher.dispatch(bookmark_1.CreateBookmarkAction.create());
}
deleteBookmark(bookmark) {
if (bookmark.bookmarkIndex !== undefined) {
this.actionDispatcher.dispatch(bookmark_1.DeleteBookmarkAction.create(bookmark.bookmarkIndex));
}
}
loadBookmark(bookmarkString) {
const bookmark = JSON.parse(bookmarkString);
if (bookmark_1.Bookmark.isBookmark(bookmark)) {
bookmark.clone = bookmark_1.Bookmark.prototype.clone;
this.actionDispatcher.dispatch(bookmark_1.AddBookmarkAction.create(bookmark.clone()));
}
else {
console.log('Clipboard does not contain a valid Bookmark');
}
}
startBookmarkNameEdit(bookmark) {
var _a;
(_a = document.getElementById(bookmark.editId)) === null || _a === void 0 ? void 0 : _a.classList.toggle('options__hidden', true);
const save = document.getElementById(bookmark.saveId);
save === null || save === void 0 ? void 0 : save.classList.toggle('options__hidden', false);
save === null || save === void 0 ? void 0 : save.getElementsByTagName('input')[0].focus();
}
inputSaveBookmarkName(bookmark, event) {
if (event.key === 'Enter') {
this.saveBookmarkName(bookmark);
}
}
saveBookmarkName(bookmark) {
var _a, _b;
(_a = document.getElementById(bookmark.editId)) === null || _a === void 0 ? void 0 : _a.classList.toggle('options__hidden', false);
const save = document.getElementById(bookmark.saveId);
if (save && bookmark.bookmarkIndex !== undefined) {
save.classList.toggle('options__hidden', true);
const newName = (_b = save.getElementsByTagName('input')[0].value) !== null && _b !== void 0 ? _b : undefined;
this.actionDispatcher.dispatch(bookmark_1.RenameBookmarkAction.create(bookmark.bookmarkIndex, newName));
}
}
handleBookmarkPast() {
if (navigator.clipboard) {
navigator.clipboard.readText().then((value) => this.loadBookmark(value), (err) => console.error("Couldn't load Bookmark from clipboards", err));
}
else {
const textarea = document.createElement('textarea');
document.body.appendChild(textarea);
textarea.focus();
textarea.select();
try {
const successful = document.execCommand('paste');
if (!successful) {
console.log('Failed to past text from clipboard');
}
else {
this.loadBookmark(textarea.value);
}
}
catch (err) {
console.log('Unable paste text from clipboard');
}
document.body.removeChild(textarea);
}
}
handleBookmarkCopy(bookmark) {
const bookmarkString = JSON.stringify(bookmark.clone());
if (navigator.clipboard) {
navigator.clipboard.writeText(bookmarkString).then(() => {
/* noop */
}, (err) => console.error("Couldn't save Bookmark to clipboard", err));
}
else {
const textarea = document.createElement('textarea');
textarea.value = bookmarkString;
document.body.appendChild(textarea);
textarea.focus();
textarea.select();
try {
const successful = document.execCommand('copy');
if (!successful)
console.log('Failed to copy text to clipboard');
}
catch (err) {
console.log('Unable to copy text to clipboard');
}
document.body.removeChild(textarea);
}
}
};
exports.BookmarkPanel = BookmarkPanel;
__decorate([
(0, inversify_1.inject)(di_symbols_1.DISymbol.BookmarkRegistry),
__metadata("design:type", bookmark_registry_1.BookmarkRegistry)
], BookmarkPanel.prototype, "bookmarkRegistry", void 0);
__decorate([
(0, inversify_1.postConstruct)(),
__metadata("design:type", Function),
__metadata("design:paramtypes", []),
__metadata("design:returntype", void 0)
], BookmarkPanel.prototype, "init", null);
exports.BookmarkPanel = BookmarkPanel = __decorate([
(0, inversify_1.injectable)()
], BookmarkPanel);
//# sourceMappingURL=bookmark-panel.js.map