Skip to content
Snippets Groups Projects
Commit 03b87172 authored by Maximilian Giller's avatar Maximilian Giller :squid:
Browse files

Removed unused components

parent 4e19db35
No related branches found
No related tags found
1 merge request!2Implemented editor in the react framework
Pipeline #56919 passed
Showing
with 0 additions and 1200 deletions
import React from "react";
import * as Interactions from "../interactions";
import { Graph } from "../structures/graph/graph";
import { loadGraphJson } from "../../../datasets";
import { NodeDetails } from "./nodedetails";
......@@ -74,8 +73,6 @@ export class Editor extends React.PureComponent<propTypes, stateTypes> {
graphWidth: 1000,
};
Interactions.initInteractions();
// Load initial space
this.loadSpace("space");
}
......
import jQuery from "jquery";
import { listAllSpaces, saveGraphJson } from "../../datasets";
import { SPACE } from "../../config";
import { Editor } from "./components/editor";
/**
* Initiates all the handlers for button presses and input changes.
*/
export function initInteractions() {
jQuery("button#clear-collection").on("click", () => {
Editor.globalState.clearSelectedItems();
});
jQuery("button#import-space-btn").on("click", () =>
importSpaceFromInterface()
);
loadSpacesList();
}
function loadSpacesList() {
var selectContainer = jQuery("#space-id-select");
selectContainer.empty();
listAllSpaces().then((spaces) => {
spaces.forEach((space) => {
var selectedTxt = "";
if (space === SPACE) {
selectedTxt = "selected ";
}
var child =
"<option " +
selectedTxt +
'value="' +
space +
'">' +
space +
"</option>";
selectContainer.append(child);
});
});
selectContainer.val(SPACE);
}
function importSpaceFromInterface() {
var json = undefined;
try {
console.log(jQuery("#import-space-area").val());
json = JSON.parse(jQuery("#import-space-area").val());
} catch (e) {
console.log(e);
alert('"Space JSON" not valid. Check console for details.');
return;
}
var spaceName = jQuery("#import-space-name-text").val();
if (spaceName.length == 0) {
alert('"Space Name" cannot be empty.');
return;
}
saveGraphJson(spaceName, json)
.then(() => {
loadSpacesList();
alert("Space imported!");
})
.catch((ex) => {
console.log(ex);
alert(
"Something went wrong, could not import space. Check console for further details."
);
});
}
import jQuery from "jquery";
import { Editor } from "./components/editor";
const ID_TOOLBAR = "#toolbar";
const SAVE_BUTTON_ID = "div#ks-editor #toolbar-save";
const TOOL_SELECTED_CLASS = "selected";
export default class Toolbar {
constructor(tools) {
this.tools = Object.values(tools);
this.previousTool = undefined;
this.renderToolbar(this.tools);
// Special, intial treatment
jQuery(SAVE_BUTTON_ID).addClass("hidden");
}
setSelectedTool(tool) {
var selectedTool = jQuery(Toolbar.getToolIdTag(tool));
selectedTool.addClass(TOOL_SELECTED_CLASS);
if (this.previousTool !== undefined) {
var previousTool = jQuery(Toolbar.getToolIdTag(this.previousTool));
previousTool.removeClass(TOOL_SELECTED_CLASS);
}
this.previousTool = tool;
}
renderToolbar(tools) {
this.fillDomList(ID_TOOLBAR, tools, this.toolRenderer);
tools.forEach((tool) => {
this.toolClickEvent(tool);
});
}
static getToolIdTag(tool) {
return ID_TOOLBAR + "-" + tool.getKey();
}
static getToolId(tool) {
return Toolbar.getToolIdTag(tool).substr(1);
}
toolRenderer(tool) {
return (
'<button id="' +
Toolbar.getToolId(tool) +
'" title="' +
tool.getName() +
'"><img src="' +
tool.getIcon() +
'"></button>'
);
}
toolClickEvent(tool) {
jQuery("button" + Toolbar.getToolIdTag(tool)).on(
"click",
"",
tool,
(e) => {
var sameTool = Editor.globalState.tool === tool;
if (sameTool && tool.toggleBehaviour) {
Editor.globalState.setTool(Editor.globalState.previousTool);
} else {
Editor.globalState.setTool(e.data);
}
}
);
}
fillDomList(listId, items, itemRenderer) {
var listCont = jQuery(listId);
listCont.empty();
items.forEach((i) => listCont.append(itemRenderer(i)));
}
}
import Tool from "./tool";
import AddNodeIcon from "../../images/tools/addnode.png";
import { Editor } from "../components/editor";
export default class AddNodeTool extends Tool {
constructor(key) {
super("Add node", AddNodeIcon, key);
}
onBackgroundClick(event, positions) {
var node = {};
// Set position
node.fx = positions.graph.x;
node.fy = positions.graph.y;
node = Editor.globalState.addNode(node);
if (node === undefined) {
console.error("Couldn't add new node");
return;
}
Editor.globalState.setSelectedItem(node);
}
}
import Tool from "./tool";
import { CONTEXT } from "../state";
import { CollectMenu, COLLECTION_KEY } from "./menus/collectmenu";
import CollectIcon from "../../images/tools/collect.png";
import { Editor } from "../components/editor";
export default class CollectTool extends Tool {
constructor(key) {
super("Collect", CollectIcon, key, new CollectMenu());
}
onNodeClick(node) {
if (Editor.globalState.itemsContext !== CONTEXT.node) {
Editor.globalState.clearSelectedItems();
Editor.globalState.itemsContext = CONTEXT.node;
}
if (Editor.globalState.selectedItems.has(node)) {
Editor.globalState.removeSelectedItem(node);
} else {
Editor.globalState.addSelectedItem(node);
}
this.menu.value(COLLECTION_KEY, Editor.globalState.selectedItems);
}
onLinkClick(link) {
if (Editor.globalState.itemsContext !== CONTEXT.link) {
Editor.globalState.clearSelectedItems();
Editor.globalState.itemsContext = CONTEXT.link;
}
if (Editor.globalState.selectedItems.has(link)) {
Editor.globalState.removeSelectedItem(link);
} else {
Editor.globalState.addSelectedItem(link);
}
this.menu.value(COLLECTION_KEY, Editor.globalState.selectedItems);
}
onMenuChange(key, value) {
if (key === COLLECTION_KEY && value === undefined) {
Editor.globalState.clearSelectedItems();
this.menu.value(COLLECTION_KEY, []);
}
}
}
import Tool from "./tool";
import * as Graph from "../graph";
import ConnectIcon from "../../images/tools/connect.png";
import { Editor } from "../components/editor";
const KEEP_SOURCE_KEY_ID = 17;
export default class ConnectTool extends Tool {
constructor(key) {
super("Connect two nodes", ConnectIcon, key);
this.keepSource = false;
}
onNodeClick(node) {
// Is a first node selected?
if (
Editor.globalState.selectedItem === undefined ||
Editor.globalState.selectedItem.node === false
) {
Editor.globalState.setSelectedItem(node);
return;
}
// Add new link
var details = {};
var link = Editor.globalGraph.addLink(
Editor.globalState.selectedItem[Graph.NODE_ID],
node[Graph.NODE_ID],
details
);
if (link === undefined) {
console.error("Could not create new link");
return;
}
if (this.keepSource === false) {
// Deselect the current first node
// TODO: Returned object not yet converted to normal one
Editor.globalState.setSelectedItem(link);
}
}
onBackgroundClick(event, positions) {
Editor.globalState.setSelectedItem(undefined);
}
onKeyDown(key) {
if (key.keyCode === KEEP_SOURCE_KEY_ID) {
this.keepSource = true;
}
}
onKeyUp(key) {
if (key.keyCode === KEEP_SOURCE_KEY_ID) {
this.keepSource = false;
}
}
}
import Tool from "./tool";
import * as Graph from "../graph";
import jquery from "jquery";
import ToolMenu from "./menus/toolmenu";
import DeleteIcon from "../../images/tools/delete.png";
import { Editor } from "../components/editor";
const BOX_SELECT_LAYER_ID = "#box-select-layer";
const BOX_SELECT_ID_WH = "box-select";
const SELECT_BOX_SELECTOR = BOX_SELECT_LAYER_ID + " #" + BOX_SELECT_ID_WH;
/**
* Only one instance of this should exist, since box-delete has to work on a global scale.
*/
var deleteToolInstance = undefined; // Used for box delete
export default class DeleteTool extends Tool {
constructor(key) {
super("Delete", DeleteIcon, key, new ToolMenu());
this.setupBoxSelect();
this.isActive = false;
if (deleteToolInstance === undefined) {
deleteToolInstance = this;
}
}
onBoxSelect(left, bottom, top, right) {
// Filter out selected nodes
const selectedNodes = [];
const tl = Editor.globalRenderer.screen2GraphCoords(left, top);
const br = Editor.globalRenderer.screen2GraphCoords(right, bottom);
Editor.globalGraph.data[Graph.GRAPH_NODES].forEach((node) => {
if (
tl.x < node.x &&
node.x < br.x &&
br.y > node.y &&
node.y > tl.y
) {
selectedNodes.push(node);
}
});
// Was anything even selected?
if (selectedNodes.length <= 0) {
return;
}
// Ask for confirmation to delete
var nodeNames = selectedNodes.map((n) => n[Graph.NODE_LABEL]);
//! Problem: If browser is not actually showing the alerts, it always returns false!
var shouldDelete = confirm(
"Are you sure you want to delete all these nodes?\n\n" +
nodeNames.join("\n")
);
// Delete if confirmed
if (shouldDelete) {
var nodeIds = selectedNodes.map((n) => n[Graph.NODE_ID]);
Editor.globalGraph.deleteNodes(nodeIds);
}
}
onNodeClick(node) {
Editor.globalGraph.deleteNode(node[Graph.NODE_ID]);
if (Editor.globalState.selectedItem == node) {
Editor.globalState.setSelectedItem(undefined);
}
}
onLinkClick(link) {
Editor.globalGraph.deleteLink(
link[Graph.LINK_SOURCE][Graph.NODE_ID],
link[Graph.LINK_TARGET][Graph.NODE_ID]
);
if (Editor.globalState.selectedItem == link) {
Editor.globalState.setSelectedItem(undefined);
}
}
setupBoxSelect() {
window.addEventListener("load", () => {
// Source: https://github.com/vasturiano/force-graph/issues/151#issuecomment-735850938
// forceGraph element is the element provided to the Force Graph Library
jquery("#2d-graph").on("pointerdown", this.boxSelectOnPointerDown);
jquery("#2d-graph").on("pointermove", this.boxSelectOnPointerMove);
jquery("#2d-graph").on("pointerup", this.boxSelectOnPointerUp);
});
}
boxSelectOnPointerDown(e) {
// Only do anything if delete tool is also active
if (
deleteToolInstance === undefined ||
deleteToolInstance.isActive == false
) {
return;
}
if (!e.shiftKey) {
return;
}
e.preventDefault();
this.boxSelect = document.createElement("div");
this.boxSelect.id = BOX_SELECT_ID_WH;
this.boxSelect.style.left = e.offsetX.toString() + "px";
this.boxSelect.style.top = e.offsetY.toString() + "px";
this.boxSelectStart = {
x: e.offsetX,
y: e.offsetY,
};
// app element is the element just above the forceGraph element.
jquery(BOX_SELECT_LAYER_ID).append(this.boxSelect);
}
boxSelectOnPointerMove(e) {
if (!this.boxSelect) {
return;
}
if (!e.shiftKey) {
jquery(SELECT_BOX_SELECTOR).remove();
return;
}
e.preventDefault();
if (e.offsetX < this.boxSelectStart.x) {
this.boxSelect.style.left = e.offsetX.toString() + "px";
this.boxSelect.style.width =
(this.boxSelectStart.x - e.offsetX).toString() + "px";
} else {
this.boxSelect.style.left = this.boxSelectStart.x.toString() + "px";
this.boxSelect.style.width =
(e.offsetX - this.boxSelectStart.x).toString() + "px";
}
if (e.offsetY < this.boxSelectStart.y) {
this.boxSelect.style.top = e.offsetY.toString() + "px";
this.boxSelect.style.height =
(this.boxSelectStart.y - e.offsetY).toString() + "px";
} else {
this.boxSelect.style.top = this.boxSelectStart.y.toString() + "px";
this.boxSelect.style.height =
(e.offsetY - this.boxSelectStart.y).toString() + "px";
}
}
boxSelectOnPointerUp(e) {
if (!this.boxSelect) {
return;
}
if (!e.shiftKey) {
jquery(SELECT_BOX_SELECTOR).remove();
return;
}
e.preventDefault();
let left, bottom, top, right;
if (e.offsetX < this.boxSelectStart.x) {
left = e.offsetX;
right = this.boxSelectStart.x;
} else {
left = this.boxSelectStart.x;
right = e.offsetX;
}
if (e.offsetY < this.boxSelectStart.y) {
top = e.offsetY;
bottom = this.boxSelectStart.y;
} else {
top = this.boxSelectStart.y;
bottom = e.offsetY;
}
this.boxSelect.remove();
deleteToolInstance.onBoxSelect(left, bottom, top, right);
}
}
import jQuery from "jquery";
import { Graph } from "../../graph";
import ToolMenu from "./toolmenu";
export const COLLECTION_KEY = "collection";
const SELECTED_ITEMS_ID = "#selected-items";
const CLEAR_BUTTON_ID = "#clear-collection";
const DOM_LIST_ITEM = "li";
export class CollectMenu extends ToolMenu {
constructor() {
super();
}
hookClearButton() {
// On button press: Notify tool about clearing and empty list
jQuery(CLEAR_BUTTON_ID).on("click", (e) => {
this.notifyTool(COLLECTION_KEY, undefined);
});
}
onMenuShow(initial) {
if (initial) {
this.hookClearButton();
}
}
afterSet(key, value) {
if (key === COLLECTION_KEY) {
this.fillDomList(SELECTED_ITEMS_ID, value, this.itemListRenderer);
}
}
itemListRenderer(item) {
return (
"<" +
DOM_LIST_ITEM +
">" +
Graph.toStr(item) +
"</" +
DOM_LIST_ITEM +
">"
);
}
fillDomList(listId, items, itemRenderer) {
var listCont = this.find(listId);
listCont.empty();
items.forEach((i) => listCont.append(itemRenderer(i)));
}
}
import { PLUGIN_PATH } from "../../../../config";
import * as Graph from "../../graph";
import { CONTEXT } from "../../state";
import ToolMenu from "./toolmenu";
const HIDDEN_CLASS = "hidden";
export const SELECTION_KEY = "selection";
const CONTEXT_NOTHING = "#nothing-selected";
const CONTEXT_NODE = "#node-selected";
const CONTEXT_LINK = "#link-selected";
const NODE_IMG_PREVIEW = "#node-image-preview";
const NODE_DETAIL_IMG_PREVIEW = "#node-detail-image-preview";
const NODE_NAME_ID = "#node-name";
const NODE_IMG_ID = "#node-image";
const NODE_DETAIL_IMG_ID = "#node-detail-image";
const NODE_DESC_ID = "#node-description";
const NODE_TYPE_ID = "#node-type";
const NODE_REF_ID = "#node-references";
const NODE_VIDEO_ID = "#node-video";
const NODE_MENU = [
NODE_NAME_ID,
NODE_IMG_ID,
NODE_DESC_ID,
NODE_TYPE_ID,
NODE_REF_ID,
NODE_VIDEO_ID,
NODE_DETAIL_IMG_ID,
];
const IMAGE_MENU = [NODE_IMG_ID, NODE_DETAIL_IMG_ID];
const IMAGE_FIELDS = [
{
uri: NODE_IMG_ID,
preview: NODE_IMG_PREVIEW,
},
{
uri: NODE_DETAIL_IMG_ID,
preview: NODE_DETAIL_IMG_PREVIEW,
},
];
const LINK_NAME_ID = "#link-name";
const LINK_MENU = [];
const MENU = [...NODE_MENU, ...LINK_MENU];
const ERROR_IMG_PATH = PLUGIN_PATH + "editor/images/onerror.png";
export class SelectMenu extends ToolMenu {
constructor() {
super();
this.context = undefined;
this.map = [
{ menu: NODE_NAME_ID, property: Graph.NODE_LABEL },
{ menu: NODE_IMG_ID, property: Graph.NODE_IMAGE },
{ menu: NODE_DESC_ID, property: Graph.NODE_DESCRIPTION },
{ menu: NODE_TYPE_ID, property: Graph.NODE_TYPE },
{ menu: NODE_REF_ID, property: Graph.NODE_REFERENCES },
{ menu: NODE_VIDEO_ID, property: Graph.NODE_VIDEO },
{ menu: NODE_DETAIL_IMG_ID, property: Graph.NODE_DETAIL_IMAGE },
];
this.hooked = false; // Can only hook menu events once, but have to do it later, when they are loaded
}
hookMenu() {
MENU.forEach((menu) => {
if (IMAGE_MENU.includes(menu)) {
return;
}
// Subscribes to change event for each menu element
this.find(menu).on("change", (e) => {
this.updateValue(menu, e.target.value);
});
});
// Special hooks for image, to update the shown image with every change
IMAGE_FIELDS.forEach((imageField) => {
// In case image can't be loaded, show message
this.find(imageField.preview).on("error", (e) => {
var img = this.find(e.target);
// Is source even set?
if (img.attr("src") === undefined || img.attr("src") === "") {
return;
}
// Show error message
this.setImagePreview(ERROR_IMG_PATH, imageField.preview);
// Maybe graph image should also be updated, but we might not want to overwrite previously saved images.
});
// Test images before updating them
this.find(imageField.uri).on("change", (e) => {
var imageSource = e.target.value;
// If source is empty, always apply it
if (imageSource === undefined || imageSource === "") {
this.updateValue(imageField.uri, imageSource);
this.setImagePreview(imageSource, imageField.preview);
return;
}
// Try loading the image and only apply it on success
var img = new Image();
img.addEventListener("load", () => {
this.updateValue(imageField.uri, imageSource);
this.setImagePreview(imageSource, imageField.preview);
});
img.addEventListener("error", () => {
this.setImagePreview(ERROR_IMG_PATH, imageField.preview);
});
img.src = this.getFullImageSource(imageSource);
});
});
}
updateValue(menu, newValue) {
var propertyKey = this.toProperty(menu);
var formatedValue = this.formatValue(propertyKey, newValue);
// Modify stored selection
this.values[SELECTION_KEY][propertyKey] = formatedValue;
// Notify tool
this.tool.onMenuChange(SELECTION_KEY, this.values[SELECTION_KEY]);
}
updateImagePreviews() {
IMAGE_FIELDS.forEach((imageField) => {
var uri = this.find(imageField.uri).val();
this.setImagePreview(uri, imageField.preview);
});
}
getFullImageSource(uri) {
if (uri === "") {
// Show default empty image
return "";
} else if (uri.includes("/")) {
// Is absolute URL
return uri;
} else {
// Is file name
return Graph.IMAGE_SRC + uri;
}
}
setImagePreview(uri, previewId) {
var previewImage = this.find(previewId);
previewImage.attr("src", this.getFullImageSource(uri));
}
formatValue(propertyKey, rawValue) {
var formattedValue = rawValue;
if (propertyKey === Graph.NODE_REFERENCES) {
// Explode to list of url-lines
formattedValue = rawValue
.split("\n") // Every line is it's own url
.filter((url) => url); // Remove empty entries
}
return formattedValue;
}
toProperty(menu) {
for (var i = 0; i < this.map.length; i++) {
if (this.map[i].menu === menu) {
return this.map[i].property;
}
}
return undefined;
}
toMenu(property) {
for (var i = 0; i < this.map.length; i++) {
if (this.map[i].property === property) {
return this.map[i].menu;
}
}
return undefined;
}
setContext(context) {
if (context === this.context) {
return; // Only do something if it changes
}
// Disable previous context
this.getDomToContext(this.context).addClass(HIDDEN_CLASS);
// Store and activate new context
this.context = context;
this.getDomToContext(this.context).removeClass(HIDDEN_CLASS);
}
getDomToContext(context) {
var id = CONTEXT_NOTHING;
if (context === CONTEXT.link) {
id = CONTEXT_LINK;
} else if (context === CONTEXT.node) {
id = CONTEXT_NODE;
}
return this.find(id);
}
afterSet(key, value) {
if (this.hooked !== true) {
this.hookMenu();
this.hooked = true;
}
if (key !== SELECTION_KEY) {
return;
}
if (value.node) {
this.fillNode(value);
this.setContext(CONTEXT.node);
} else if (value.link) {
this.fillLink(value);
this.setContext(CONTEXT.link);
} else {
this.setContext(CONTEXT.nothing);
}
}
fillNode(node) {
NODE_MENU.forEach((menu) => {
var propertyKey = this.toProperty(menu);
var value = node[propertyKey];
var formattedValue = undefined;
if (propertyKey === Graph.NODE_REFERENCES && Array.isArray(value)) {
formattedValue = value.join("\n");
} else {
formattedValue = value;
}
this.find(menu).val(formattedValue);
});
this.updateImagePreviews();
}
fillLink(link) {
this.find(LINK_NAME_ID).text(Graph.Graph.toStr(link));
LINK_MENU.forEach((menu) => {
this.find(menu).val(link[this.toProperty(menu)]);
});
}
}
import { SPACE } from "../../../../config";
import ToolMenu from "./toolmenu";
const LABEL_TOGGLE_ID = "#label-toggle";
const RESIMULATE_BUTTON_ID = "#reanimate-button";
const PHYSICS_DELAY_ID = "#stop-physics-delay";
const SPACE_SELECT_ID = "#space-id-select";
export const PHYSICS_DELAY_KEY = "delay";
export const RESIMULATE_KEY = "resimulate";
export const LABELS_KEY = "labels";
export class SettingsMenu extends ToolMenu {
constructor() {
super();
}
onMenuShow(initial) {
if (initial === false) {
return;
}
// Initial interface hooks
this.find(LABEL_TOGGLE_ID).on("change", (e) => {
this.notifyTool(LABELS_KEY, e.target.checked);
});
this.find(PHYSICS_DELAY_ID).on("change", (e) => {
this.notifyTool(PHYSICS_DELAY_KEY, e.target.value);
});
this.find(RESIMULATE_BUTTON_ID).on("click", () => {
this.notifyTool(RESIMULATE_KEY);
});
this.find(SPACE_SELECT_ID).on("click", (e) => {
var newSpace = e.target.value;
if (newSpace === SPACE) {
return;
}
alert("Unable to load space at the moment! Editor object not implemented yet. See settingsmenu.js for further details.");
// loadSpace(newSpace);
this.hide();
});
}
}
import jQuery from "jquery";
export default class ToolMenu {
constructor() {
this.warnings = false;
this.values = {};
this.initialShow = true;
}
loadTool(tool) {
this.tool = tool;
this.menuId = this.tool.getKey() + "-menu";
}
show() {
this.onMenuShow(this.initialShow);
this.initialShow = false;
this.getMenu().removeClass("hidden");
}
hide() {
this.getMenu().addClass("hidden");
this.onMenuHide();
}
onMenuShow(initial) {
if (this.warnings) {
console.warn('Method "onMenuShow" not implemented.');
}
}
onMenuHide() {
if (this.warnings) {
console.warn('Method "onMenuHide" not implemented.');
}
}
beforeGet(key) {
if (this.warnings) {
console.warn('Method "beforeGet" not implemented.');
}
}
afterSet(key, value) {
if (this.warnings) {
console.warn('Method "afterSet" not implemented.');
}
}
notifyTool(key, value) {
this.values[key] = value;
this.tool.onMenuChange(key, value);
}
value(key, newValue) {
// If key not defined
// (be it by giving no arguments, or giving it an undefined value)
// Return all values as dict.
if (key === undefined) {
return this.values;
}
// Is key valid?
// If not, create undefined entry
if (key in this.values == false) {
this.values[key] = undefined;
}
// If value not defined, returned specified value.
if (newValue === undefined) {
newValue = this.beforeGet(key);
if (newValue !== undefined) {
this.values[key] = newValue;
}
return this.values[key];
}
// If bot defined, store specified value.
else {
this.values[key] = newValue;
newValue = this.afterSet(key, newValue);
}
}
find(selector) {
return this.getMenu().find(selector);
}
getMenu() {
return jQuery("#tool-menu #" + this.menuId);
}
}
import Tool from "./tool";
import RedoIcon from "../../images/tools/delete.png";
import { Editor } from "../components/editor";
export default class RedoTool extends Tool {
constructor(key) {
super("Redo", RedoIcon, key);
}
onToolActivate() {
Editor.globalGraph.redo();
Editor.globalState.setTool(Editor.globalState.previousTool);
}
}
import Tool from "./tool";
import { saveGraphJson } from "../../../datasets";
import { SPACE } from "../../../config";
import SaveIcon from "../../images/tools/save.png";
import { Editor } from "../components/editor";
export default class SaveTool extends Tool {
constructor(key) {
super("Save", SaveIcon, key);
}
onToolActivate() {
saveGraphJson(SPACE, Editor.globalGraph.serialize());
Editor.globalGraph.saveChanges();
Editor.globalState.setTool(Editor.globalState.previousTool);
alert("Graph has been saved.");
}
}
import Tool from "./tool";
import * as SelectMenu from "./menus/selectmenu";
import SelectIcon from "../../images/tools/select.png";
import { Editor } from "../components/editor";
export default class SelectTool extends Tool {
constructor(key) {
super("Select", SelectIcon, key, new SelectMenu.SelectMenu());
}
onNodeClick(node) {
Editor.globalState.setSelectedItem(node);
this.menu.value(SelectMenu.SELECTION_KEY, node);
}
onLinkClick(link) {
Editor.globalState.setSelectedItem(link);
this.menu.value(SelectMenu.SELECTION_KEY, link);
}
onBackgroundClick(event, positions) {
Editor.globalState.setSelectedItem(undefined);
this.menu.value(SelectMenu.SELECTION_KEY, {});
}
onMenuChange(key, value) {
if (key === SelectMenu.SELECTION_KEY) {
Editor.globalGraph.changeDetails(value);
}
}
onToolActivate() {
if (Editor.globalState === undefined) {
return;
}
var newSelection = Editor.globalState.selectedItem;
if (newSelection === undefined) {
newSelection = {};
}
this.menu.value(SelectMenu.SELECTION_KEY, newSelection);
}
}
import {
SettingsMenu,
LABELS_KEY,
RESIMULATE_KEY,
PHYSICS_DELAY_KEY,
} from "./menus/settingsmenu";
import Tool from "./tool";
import SettingsIcon from "../../images/tools/settings.png";
import { Editor } from "../components/editor";
export default class SettingsTool extends Tool {
constructor(key) {
super("Settings", SettingsIcon, key, new SettingsMenu(), true);
}
onMenuChange(key, value) {
if (key === LABELS_KEY) {
Editor.globalState.setLabelVisibility(value);
} else if (key === RESIMULATE_KEY) {
Editor.globalGraph.restartSimulation();
} else if (key === PHYSICS_DELAY_KEY) {
Editor.globalGraph.physicsDelay = Number(value) * 1000; // Convert seconds to ms
}
}
}
export default class Tool {
constructor(name, icon, key, menu, toggleBehaviour = false) {
this.name = name;
this.icon = icon;
this.key = key;
this.warnings = false;
this.menu = menu;
this.toggleBehaviour = toggleBehaviour;
this.isActive = false;
if (this.menu !== undefined) {
this.menu.loadTool(this);
}
}
getName() {
return this.name;
}
getKey() {
return this.key;
}
getIcon() {
return this.icon;
}
onMenuChange(key, value) {
if (this.warnings) {
console.warn('Method "onMenuChange" not implemented.');
}
}
activateTool() {
this.isActive = true;
if (this.menu !== undefined) {
this.menu.show();
}
this.onToolActivate();
}
deactivateTool(nextTool) {
this.isActive = false;
this.onToolDeactivate(nextTool);
if (this.menu !== undefined) {
this.menu.hide();
}
}
onToolActivate() {
if (this.warnings) {
console.warn('Method "onToolActivate" not implemented.');
}
}
onToolDeactivate(nextTool) {
if (this.warnings) {
console.warn('Method "onToolDeactivate" not implemented.');
}
}
onNodeClick(node) {
if (this.warnings) {
console.warn('Method "onNodeClick" not implemented.');
}
}
onNodeDragEnd(node, translate) {
if (this.warnings) {
console.warn('Method "onNodeDragEnd" not implemented.');
}
}
onLinkClick(link) {
if (this.warnings) {
console.warn('Method "onLinkClick" not implemented.');
}
}
onKeyDown(key) {
if (this.warnings) {
console.warn('Method "onKeyDown" not implemented.');
}
}
onKeyUp(key) {
if (this.warnings) {
console.warn('Method "onKeyUp" not implemented.');
}
}
nodeCanvasObject(node, ctx, globalScale) {
if (this.warnings) {
console.warn('Method "nodeCanvasObject" not implemented.');
}
}
nodeCanvasObjectMode(node) {
if (this.warnings) {
console.warn('Method "nodeCanvasObjectMode" not implemented.');
}
}
linkCanvasObject(link, ctx, globalScale) {
if (this.warnings) {
console.warn('Method "linkCanvasObject" not implemented.');
}
}
linkCanvasObjectMode(link) {
if (this.warnings) {
console.warn('Method "linkCanvasObjectMode" not implemented.');
}
}
nodePointerAreaPaint(node, color, ctx) {
if (this.warnings) {
console.warn('Method "nodePointerAreaPaint" not implemented.');
}
}
linkWidth(link) {
if (this.warnings) {
console.warn('Method "linkWidth" not implemented.');
}
}
linkDirectionalParticles() {
if (this.warnings) {
console.warn('Method "linkDirectionalParticles" not implemented.');
}
}
linkDirectionalParticleWidth(link) {
if (this.warnings) {
console.warn(
'Method "linkDirectionalParticleWidth" not implemented.'
);
}
}
linkColor(link) {
if (this.warnings) {
console.warn(
'Method "linkColor" not implemented.'
);
}
}
nodeColor(node) {
if (this.warnings) {
console.warn(
'Method "nodeColor" not implemented.'
);
}
}
onBackgroundClick(event, positions) {
if (this.warnings) {
console.warn('Method "onBackgroundClick" not implemented.');
}
}
}
import Tool from "./tool";
import UndoIcon from "../../images/tools/undo.png";
import { Editor } from "../components/editor";
export default class UndoTool extends Tool {
constructor(key) {
super("Undo", UndoIcon, key);
}
onToolActivate() {
Editor.globalGraph.undo();
Editor.globalState.setTool(Editor.globalState.previousTool);
}
}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment