opensource/galaxy
3
0
Fork 0
mirror of https://github.com/galaxyproject/galaxy.git synced 2026-10-25 00:12:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

Replace jQuery usage in connector.js

Browse Source
This commit is contained in:
mvdbeek
2022-08-18 10:18:46 +02:00
parent 18e4c007ef
commit d86b3554bc
1 changed files with 21 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/Workflow/Editor/modules/connector.js
+21 -12
View File
@@ -1,4 +1,3 @@
import $ from "jquery";
import * as d3 from "d3";
import { Toast } from "ui/toast";
@@ -13,9 +12,17 @@ const ribbonOuterSingle = 6;
const ribbonInnerMultiple = 1;
const ribbonOuterMultiple = 3;
function offset(element) {
const rect = element.getBoundingClientRect();
return {
top: rect.top + window.scrollY,
left: rect.left + window.scrollX,
};
}
class Connector {
constructor(manager = {}, outputHandle = null, inputHandle = null) {
this.manager = manager;
constructor(canvasManager = {}, outputHandle = null, inputHandle = null) {
this.manager = canvasManager;
this.dragging = false;
this.innerClass = "ribbon-inner";
this.canvas = document.createElement("div");
@@ -64,26 +71,28 @@ class Connector {
if (!outputHandle || !inputHandle) {
return;
}
const canvas_container = $("#canvas-container");
const canvasZoom = this.manager.canvasZoom;
if (this.dragging) {
this.canvas.style.zIndex = zIndex;
}
const relativeLeft = (e) => ($(e).offset().left - canvas_container.offset().left) / canvasZoom;
const relativeTop = (e) => ($(e).offset().top - canvas_container.offset().top) / canvasZoom;
if (!outputHandle || !inputHandle) {
return;
}
// Set handle ids, used in test cases
this.canvas.setAttribute("output-handle-id", outputHandle.element.getAttribute("id"));
this.canvas.setAttribute("input-handle-id", inputHandle.element.getAttribute("id"));
// Find the position of each handle
let start_x = relativeLeft(outputHandle.element) + handleMarginX;
let start_y = relativeTop(outputHandle.element) + 0.5 * $(outputHandle.element).height();
let end_x = relativeLeft(inputHandle.element) + handleMarginX;
let end_y = relativeTop(inputHandle.element) + 0.5 * $(inputHandle.element).height();
const canvasContainer = document.getElementById("canvas-container");
const canvasZoom = this.manager.canvasZoom;
const relativeLeft = (e) => (offset(e).left - offset(canvasContainer).left) / canvasZoom + handleMarginX;
const relativeTop = (e) =>
(offset(e).top - offset(canvasContainer).top) / canvasZoom + 0.5 * inputHandle.element.offsetHeight;
let start_x = relativeLeft(outputHandle.element);
let start_y = relativeTop(outputHandle.element);
let end_x = relativeLeft(inputHandle.element);
let end_y = relativeTop(inputHandle.element);
// Calculate canvas area
const canvas_min_x = Math.min(start_x, end_x);