Hi,
How can I enable GuidedDragging for swimlanes nodes I need to implement
Guided Dragging (GuidedDragging) inside
Swim Lanes (swimlanes Layout)
Is GuidedDragging should be possible inside Lane.
What happens when you implement exactly what that sample does?
After implementing GuidedDragging in my diagram I am getting this kind of guideline on the center of 2 lanes I am using one pool and inside that pool two lanes
Model:
“{ “class”: “go.GraphLinksModel”,
“copiesArrays”: true,
“copiesArrayObjects”: true,
“linkFromPortIdProperty”: “fromPort”,
“linkToPortIdProperty”: “toPort”,
“modelData”: {“position”:“186.6328613281251 -77.5”},
“nodeDataArray”: [
{“category”:“Startevent”, “item”:“Start”, “key”:“key-start”, “loc”:“75.49999999999997 114.00000000000001”, “text”:“Start”, “eventType”:1, “eventDimension”:1, “group”:“Lane-0”},
{“category”:“Endevent”, “item”:“End”, “key”:“key-end”, “loc”:“475.4999999999999 114.00000000000004”, “text”:“End”, “eventType”:1, “eventDimension”:8, “group”:“Lane-0”},
{“key”:“501”, “text”:”", “isGroup”:“true”, “category”:“Pool”, “loc”:“1.5 0.5”},
{“category”:“Lane”, “text”:“Default Lane”, “color”:“white”, “isGroup”:true, “loc”:“1.5 0.5”, “group”:“501”, “key”:“Lane-0”, “size”:“1434 256”},
{“key”:131, “img”:"/Assets/images/DefaultProfile.png", “category”:“activity”, “text”:“Task”, “item”:“generic task”, “taskType”:0, “isTaskLinked”:true, “isIconUsed”:true, “loc”:“283.49999999999983 114.5”, “group”:“Lane-0”, “source”:"/Assets/images/Icons/Accelerator/database.png"},
{“category”:“Lane”, “text”:“New Lane”, “color”:“white”, “isGroup”:true, “loc”:“1.5 257.5”, “size”:“1435 257”, “group”:“501”, “key”:-6},
{“key”:-7, “category”:“activity”, “text”:“Task”, “item”:“generic task”, “taskType”:0, “loc”:“718.9999999999997 121.27499999999999”, “group”:“Lane-0”}
],
“linkDataArray”: [
{“points”:[]},
{“from”:131, “to”:“key-end”, “fromPort”:"", “toPort”:"", “points”:[343.4999999999999,114.5,353.4999999999999,114.5,392.99999999999994,114.5,392.99999999999994,114,432.5,114,452.5,114]},
{“from”:“key-start”, “to”:131, “fromPort”:"", “toPort”:"", “points”:[97,114,107,114,155.24999999999994,114,155.24999999999994,114.5,203.4999999999999,114.5,223.4999999999999,114.5]}
]}"
Ah, I see that the GuidedDraggingTool is showing alignments with the Groups, which I assume you do not want. We should extend that tool so that one can easily override the behavior of which nodes it decides to consider aligning to.
I can do that now, if you are willing to wait a while. Or you can just modify the tool for yourself.
ok walter can you please let me know how can i do that.
Which nodes do you want to align with, and which nodes do you not want to align with?
I need vertical guideline and horizontal guideline for my task when I drop any task on my model and try to arrange that task with my added task on the model so when I am implementing this in my layout it’s not working for me I am also sharing my code.
Mydiagram =
(go.Diagram, "DiagramDiv",
{
resizingTool: new LaneResizingTool(),
//contentAlignment: go.Spot.Center,
initialContentAlignment: go.Spot.Center,
//layout: (PoolLayout),
layout: $(go.LayeredDigraphLayout,
{
direction: 90,
isOngoing: false, // sets the postion of the node to current drag pos
layerSpacing: 15,
setsPortSpots: false,
//columnSpacing: 15,
isRouting: true,
isValidLayout: true,
isViewportSized: true,
aggressiveOption: go.LayeredDigraphLayout.AggressiveMore,
cycleRemoveOption: go.LayeredDigraphLayout.CycleDepthFirst,
initializeOption: go.LayeredDigraphLayout.InitDepthFirstOut,
layeringOption: go.LayeredDigraphLayout.LayerLongestPathSource,
packOption: go.LayeredDigraphLayout.PackAll
}),
allowHorizontalScroll: true,
nodeTemplateMap: nodeTemplateMap,
linkTemplateMap: linkTemplateMap,
groupTemplateMap: groupTemplateMap,
allowDrop: true, // accept drops from palette
"draggingTool.isGridSnapEnabled": true,
"dragSelectingTool.canStart": function () {
if (!this.isEnabled) return false;
var diagram = this.diagram;
if (diagram === null || !diagram.allowSelect) return false;
var e = diagram.lastInput;
// require left button & that it has moved far enough away from the mouse down point, so it isn't a click
if (!e.left) return false;
// don't include the following checks when this tool is running modally
if (diagram.currentTool !== this) {
if (!this.isBeyondDragSize()) return false;
// must wait for "delay" milliseconds before that tool can run
if (e.timestamp - diagram.firstInput.timestamp < this.delay) return false;
}
return true;
},
commandHandler: new DrawCommandHandler(), // defined in DrawCommandHandler.js
// default to having arrow keys move selected nodes
"commandHandler.arrowKeyBehavior": "move",
mouseDragOver: function (e) {
if (!e.diagram.selection.all(function (n) { return n instanceof go.Group; })) {
e.diagram.currentCursor = 'not-allowed';
}
},
mouseDrop: function (e) {
// when the selection is dropped in the diagram's background,
// make sure the selected Parts no longer belong to any Group
if (!e.diagram.selection.all(function (n) { return n instanceof go.Group; })) {
e.diagram.currentTool.doCancel();
}
},
linkingTool: new BPMNLinkingTool(), // defined in BPMNClasses.js
"SelectionMoved": relayoutDiagram, // defined below
"SelectionCopied": relayoutDiagram,
"ModelChanged": function (e) {
if (e.isTransactionFinished) {
// this records each Transaction as a JSON-format string
ModifiedBPMN()
myPaletteLevel1.requestUpdate();
}
},
draggingTool: new GuidedDraggingTool(),
"draggingTool.horizontalGuidelineColor": "blue",
"draggingTool.verticalGuidelineColor": "blue",
"draggingTool.centerGuidelineColor": "green",
"draggingTool.guidelineWidth": 1
});First, I hope you recognize that you customize the standard DraggingTool, and then you replace it with an instanceof GuidedDraggingTool.
Second, I still do not know which nodes you want to align the dragged node with. All of them other than the groups? All of the nodes that are in the same group? All of the nodes in the same pool?
Well, I’ll assume it’s the first case.
First, the updated extensions/GuidedDraggingTool.js:
"use strict";
/*
* Copyright (C) 1998-2020 by Northwoods Software Corporation. All Rights Reserved.
*/
/*
* This is an extension and not part of the main GoJS library.
* Note that the API for this class may change with any version, even point releases.
* If you intend to use an extension in production, you should copy the code to your own source directory.
* Extensions can be found in the GoJS kit under the extensions or extensionsTS folders.
* See the Extensions intro page (https://gojs.net/latest/intro/extensions.html) for more information.
*/
/**
* @constructor
* @extends DraggingTool
* @class
* This draggingTool class makes guidelines visible as the parts are dragged around a diagram
* when the selected part is nearly aligned with another part.
*/
function GuidedDraggingTool() {
go.DraggingTool.call(this);
// temporary parts for horizonal guidelines
var $ = go.GraphObject.make;
var partProperties = { layerName: "Tool", isInDocumentBounds: false };
var shapeProperties = { stroke: "gray", isGeometryPositioned: true };
/** @ignore */
this.guidelineHtop =
$(go.Part, partProperties,
$(go.Shape, shapeProperties, { geometryString: "M0 0 100 0" }));
/** @ignore */
this.guidelineHbottom =
$(go.Part, partProperties,
$(go.Shape, shapeProperties, { geometryString: "M0 0 100 0" }));
/** @ignore */
this.guidelineHcenter =
$(go.Part, partProperties,
$(go.Shape, shapeProperties, { geometryString: "M0 0 100 0" }));
// temporary parts for vertical guidelines
/** @ignore */
this.guidelineVleft =
$(go.Part, partProperties,
$(go.Shape, shapeProperties, { geometryString: "M0 0 0 100" }));
/** @ignore */
this.guidelineVright =
$(go.Part, partProperties,
$(go.Shape, shapeProperties, { geometryString: "M0 0 0 100" }));
/** @ignore */
this.guidelineVcenter =
$(go.Part, partProperties,
$(go.Shape, shapeProperties, { geometryString: "M0 0 0 100" }));
// properties that the programmer can modify
/** @type {number} */
this._guidelineSnapDistance = 6;
/** @type {boolean} */
this._isGuidelineEnabled = true;
/** @type {string} */
this._horizontalGuidelineColor = "gray";
/** @type {string} */
this._verticalGuidelineColor = "gray";
/** @type {string} */
this._centerGuidelineColor = "gray";
/** @type {number} */
this._guidelineWidth = 1;
/** @type {number} */
this._searchDistance = 1000;
/** @type {boolean} */
this._isGuidelineSnapEnabled = true;
}
go.Diagram.inherit(GuidedDraggingTool, go.DraggingTool);
/**
* Removes all of the guidelines from the grid.
* @this {GuidedDraggingTool}
*/
GuidedDraggingTool.prototype.clearGuidelines = function() {
this.diagram.remove(this.guidelineHbottom);
this.diagram.remove(this.guidelineHcenter);
this.diagram.remove(this.guidelineHtop);
this.diagram.remove(this.guidelineVleft);
this.diagram.remove(this.guidelineVright);
this.diagram.remove(this.guidelineVcenter);
}
/**
* Calls the base method from {@link DraggingTool#doDeactivate}
* and removes the guidelines from the graph.
* @this {GuidedDraggingTool}
*/
GuidedDraggingTool.prototype.doDeactivate = function() {
go.DraggingTool.prototype.doDeactivate.call(this);
// clear any guidelines when dragging is done
this.clearGuidelines();
};
GuidedDraggingTool.prototype.doDragOver = function(pt, obj) {
// clear all existing guidelines in case either show... method decides to show a guideline
this.clearGuidelines();
// gets the selected part
var partItr = (this.copiedParts || this.draggedParts).iterator;
if (partItr.next()) {
var part = partItr.key;
this.showHorizontalMatches(part, this.isGuidelineEnabled, false);
this.showVerticalMatches(part, this.isGuidelineEnabled, false);
}
}
/**
* On a mouse-up, snaps the selected part to the nearest guideline.
* If not snapping, the part remains at its position.
* This calls {@link #guidelineSnap}.
* @this {GuidedDraggingTool}
*/
GuidedDraggingTool.prototype.doDropOnto = function(pt, obj) {
this.clearGuidelines();
// gets the selected (perhaps copied) Part
var partItr = (this.copiedParts || this.draggedParts).iterator;
if (partItr.next()) {
var part = partItr.key;
// snaps only when the mouse is released without shift modifier
var e = this.diagram.lastInput;
var snap = this.isGuidelineSnapEnabled && !e.shift;
this.showHorizontalMatches(part, false, snap); // false means don't show guidelines
this.showVerticalMatches(part, false, snap);
}
}
/**
* When nodes are shifted due to being guided upon a drop, make sure all connected link routes are invalidated,
* since the node is likely to have moved a different amount than all its connected links in the regular
* operation of the DraggingTool.
* @this {GuidedDraggingTool}
*/
GuidedDraggingTool.prototype.invalidateLinks = function(node) {
if (node instanceof go.Node) node.invalidateConnectedLinks();
}
/**
* This predicate decides whether or not the given Part should guide the dragged part.
* @param {Part} part a stationary Part to which the dragged part might be aligned
* @param {Part} guidedpart the Part being dragged
*/
GuidedDraggingTool.prototype.isGuiding = function(part, guidedpart) {
return part instanceof go.Part &&
!part.isSelected &&
!(part instanceof go.Link) &&
guidedpart instanceof go.Part &&
part.containingGroup === guidedpart.containingGroup &&
!part.layer.isTemporary;
}
/**
* This finds parts that are aligned near the selected part along horizontal lines. It compares the selected
* part to all parts within a rectangle approximately twice the {@link #searchDistance} wide.
* The guidelines appear when a part is aligned within a margin-of-error equal to {@link #guidelineSnapDistance}.
* The parameters used for {@link #guidelineSnap} are also set here.
* @this {GuidedDraggingTool}
* @param {Part} part
* @param {boolean} guideline if true, show guideline
* @param {boolean} snap if true, snap the part to where the guideline would be
*/
GuidedDraggingTool.prototype.showHorizontalMatches = function(part, guideline, snap) {
var objBounds = part.locationObject.getDocumentBounds();
var p0 = objBounds.y;
var p1 = objBounds.y + objBounds.height/2;
var p2 = objBounds.y + objBounds.height;
var marginOfError = this.guidelineSnapDistance;
var distance = this.searchDistance;
// compares with parts (or location objects) within narrow vertical area
var area = objBounds.copy();
area.inflate(distance, marginOfError + 1);
var tool = this;
var otherParts = this.diagram.findObjectsIn(area,
function(obj) { return obj.part; },
function(other) { return tool.isGuiding(other, part); },
true);
var bestDiff = marginOfError;
var bestPart = null;
var bestSpot;
var bestOtherSpot;
// horizontal line -- comparing y-values
otherParts.each(function(other) {
if (other === part) return; // ignore itself
var otherBounds = other.locationObject.getDocumentBounds();
var q0 = otherBounds.y;
var q1 = otherBounds.y + otherBounds.height/2;
var q2 = otherBounds.y + otherBounds.height;
// compare center with center of OTHER part
if (Math.abs(p1 - q1) < bestDiff) { bestDiff = Math.abs(p1 - q1); bestPart = other; bestSpot = go.Spot.Center; bestOtherSpot = go.Spot.Center; }
// compare top side with top and bottom sides of OTHER part
if (Math.abs(p0-q0) < bestDiff) { bestDiff = Math.abs(p0-q0); bestPart = other; bestSpot = go.Spot.Top; bestOtherSpot = go.Spot.Top; }
else if (Math.abs(p0-q2) < bestDiff) { bestDiff = Math.abs(p0-q2); bestPart = other; bestSpot = go.Spot.Top; bestOtherSpot = go.Spot.Bottom; }
// compare bottom side with top and bottom sides of OTHER part
if (Math.abs(p2-q0) < bestDiff) { bestDiff = Math.abs(p2-q0); bestPart = other; bestSpot = go.Spot.Bottom; bestOtherSpot = go.Spot.Top; }
else if (Math.abs(p2-q2) < bestDiff) { bestDiff = Math.abs(p2-q2); bestPart = other; bestSpot = go.Spot.Bottom; bestOtherSpot = go.Spot.Bottom; }
});
if (bestPart !== null) {
var offsetX = objBounds.x - part.actualBounds.x;
var offsetY = objBounds.y - part.actualBounds.y;
var bestBounds = bestPart.locationObject.getDocumentBounds();
// line extends from x0 to x2
var x0 = Math.min(objBounds.x, bestBounds.x) - 10;
var x2 = Math.max(objBounds.x + objBounds.width, bestBounds.x + bestBounds.width) + 10;
// find bestPart's desired Y
var bestPoint = new go.Point().setRectSpot(bestBounds, bestOtherSpot);
if (bestSpot === go.Spot.Center) {
if (snap) {
// call Part.move in order to automatically move member Parts of Groups
part.move(new go.Point(objBounds.x - offsetX, bestPoint.y - objBounds.height / 2 - offsetY));
this.invalidateLinks(part);
}
if (guideline) {
this.guidelineHcenter.position = new go.Point(x0, bestPoint.y);
this.guidelineHcenter.elt(0).width = x2 - x0;
this.diagram.add(this.guidelineHcenter);
}
} else if (bestSpot === go.Spot.Top) {
if (snap) {
part.move(new go.Point(objBounds.x - offsetX, bestPoint.y - offsetY));
this.invalidateLinks(part);
}
if (guideline) {
this.guidelineHtop.position = new go.Point(x0, bestPoint.y);
this.guidelineHtop.elt(0).width = x2 - x0;
this.diagram.add(this.guidelineHtop);
}
} else if (bestSpot === go.Spot.Bottom) {
if (snap) {
part.move(new go.Point(objBounds.x - offsetX, bestPoint.y - objBounds.height - offsetY));
this.invalidateLinks(part);
}
if (guideline) {
this.guidelineHbottom.position = new go.Point(x0, bestPoint.y);
this.guidelineHbottom.elt(0).width = x2 - x0;
this.diagram.add(this.guidelineHbottom);
}
}
}
}
/**
* This finds parts that are aligned near the selected part along vertical lines. It compares the selected
* part to all parts within a rectangle approximately twice the {@link #searchDistance} tall.
* The guidelines appear when a part is aligned within a margin-of-error equal to {@link #guidelineSnapDistance}.
* The parameters used for {@link #guidelineSnap} are also set here.
* @this {GuidedDraggingTool}
* @param {Part} part
* @param {boolean} guideline if true, show guideline
* @param {boolean} snap if true, don't show guidelines but just snap the part to where the guideline would be
*/
GuidedDraggingTool.prototype.showVerticalMatches = function(part, guideline, snap) {
var objBounds = part.locationObject.getDocumentBounds();
var p0 = objBounds.x;
var p1 = objBounds.x + objBounds.width/2;
var p2 = objBounds.x + objBounds.width;
var marginOfError = this.guidelineSnapDistance;
var distance = this.searchDistance;
// compares with parts within narrow vertical area
var area = objBounds.copy();
area.inflate(marginOfError + 1, distance);
var tool = this;
var otherParts = this.diagram.findObjectsIn(area,
function(obj) { return obj.part; },
function(other) { return tool.isGuiding(other, part); },
true);
var bestDiff = marginOfError;
var bestPart = null;
var bestSpot;
var bestOtherSpot;
// vertical line -- comparing x-values
otherParts.each(function(other) {
if (other === part) return; // ignore itself
var otherBounds = other.locationObject.getDocumentBounds();
var q0 = otherBounds.x;
var q1 = otherBounds.x + otherBounds.width/2;
var q2 = otherBounds.x + otherBounds.width;
// compare center with center of OTHER part
if (Math.abs(p1 - q1) < bestDiff) { bestDiff = Math.abs(p1 - q1); bestPart = other; bestSpot = go.Spot.Center; bestOtherSpot = go.Spot.Center; }
// compare left side with left and right sides of OTHER part
if (Math.abs(p0-q0) < bestDiff) { bestDiff = Math.abs(p0-q0); bestPart = other; bestSpot = go.Spot.Left; bestOtherSpot = go.Spot.Left; }
else if (Math.abs(p0-q2) < bestDiff) { bestDiff = Math.abs(p0-q2); bestPart = other; bestSpot = go.Spot.Left; bestOtherSpot = go.Spot.Right; }
// compare right side with left and right sides of OTHER part
if (Math.abs(p2-q0) < bestDiff) { bestDiff = Math.abs(p2-q0); bestPart = other; bestSpot = go.Spot.Right; bestOtherSpot = go.Spot.Left; }
else if (Math.abs(p2-q2) < bestDiff) { bestDiff = Math.abs(p2-q2); bestPart = other; bestSpot = go.Spot.Right; bestOtherSpot = go.Spot.Right; }
});
if (bestPart !== null) {
var offsetX = objBounds.x - part.actualBounds.x;
var offsetY = objBounds.y - part.actualBounds.y;
var bestBounds = bestPart.locationObject.getDocumentBounds();
// line extends from y0 to y2
var y0 = Math.min(objBounds.y, bestBounds.y) - 10;
var y2 = Math.max(objBounds.y + objBounds.height, bestBounds.y + bestBounds.height) + 10;
// find bestPart's desired X
var bestPoint = new go.Point().setRectSpot(bestBounds, bestOtherSpot);
if (bestSpot === go.Spot.Center) {
if (snap) {
// call Part.move in order to automatically move member Parts of Groups
part.move(new go.Point(bestPoint.x - objBounds.width / 2 - offsetX, objBounds.y - offsetY));
this.invalidateLinks(part);
}
if (guideline) {
this.guidelineVcenter.position = new go.Point(bestPoint.x, y0);
this.guidelineVcenter.elt(0).height = y2 - y0;
this.diagram.add(this.guidelineVcenter);
}
} else if (bestSpot === go.Spot.Left) {
if (snap) {
part.move(new go.Point(bestPoint.x - offsetX, objBounds.y - offsetY));
this.invalidateLinks(part);
}
if (guideline) {
this.guidelineVleft.position = new go.Point(bestPoint.x, y0);
this.guidelineVleft.elt(0).height = y2 - y0;
this.diagram.add(this.guidelineVleft);
}
} else if (bestSpot === go.Spot.Right) {
if (snap) {
part.move(new go.Point(bestPoint.x - objBounds.width - offsetX, objBounds.y - offsetY));
this.invalidateLinks(part);
}
if (guideline) {
this.guidelineVright.position = new go.Point(bestPoint.x, y0);
this.guidelineVright.elt(0).height = y2 - y0;
this.diagram.add(this.guidelineVright);
}
}
}
}
/**
* Gets or sets the margin of error for which guidelines show up.
* The default value is 6.
* Guidelines will show up when the aligned nods are ± 6px away from perfect alignment.
* @name GuidedDraggingTool#guidelineSnapDistance
* @function.
* @return {number}
*/
Object.defineProperty(GuidedDraggingTool.prototype, "guidelineSnapDistance", {
get: function() { return this._guidelineSnapDistance; },
set: function(val) {
if (typeof val !== "number" || isNaN(val) || val < 0) throw new Error("new value for GuidedDraggingTool.guidelineSnapDistance must be a non-negative number.");
if (this._guidelineSnapDistance !== val) {
this._guidelineSnapDistance = val;
}
}
});
/**
* Gets or sets whether the guidelines are enabled or disable.
* The default value is true.
* @name GuidedDraggingTool#isGuidelineEnabled
* @function.
* @return {boolean}
*/
Object.defineProperty(GuidedDraggingTool.prototype, "isGuidelineEnabled", {
get: function() { return this._isGuidelineEnabled; },
set: function(val) {
if (typeof val !== "boolean") throw new Error("new value for GuidedDraggingTool.isGuidelineEnabled must be a boolean value.");
if (this._isGuidelineEnabled !== val) {
this._isGuidelineEnabled = val;
}
}
});
/**
* Gets or sets the color of horizontal guidelines.
* The default value is "gray".
* @name GuidedDraggingTool#horizontalGuidelineColor
* @function.
* @return {string}
*/
Object.defineProperty(GuidedDraggingTool.prototype, "horizontalGuidelineColor", {
get: function() { return this._horizontalGuidelineColor; },
set: function(val) {
if (this._horizontalGuidelineColor !== val) {
this._horizontalGuidelineColor = val;
this.guidelineHbottom.elements.first().stroke = this._horizontalGuidelineColor;
this.guidelineHtop.elements.first().stroke = this._horizontalGuidelineColor;
}
}
});
/**
* Gets or sets the color of vertical guidelines.
* The default value is "gray".
* @name GuidedDraggingTool#verticalGuidelineColor
* @function.
* @return {string}
*/
Object.defineProperty(GuidedDraggingTool.prototype, "verticalGuidelineColor", {
get: function() { return this._verticalGuidelineColor; },
set: function(val) {
if (this._verticalGuidelineColor !== val) {
this._verticalGuidelineColor = val;
this.guidelineVleft.elements.first().stroke = this._verticalGuidelineColor;
this.guidelineVright.elements.first().stroke = this._verticalGuidelineColor;
}
}
});
/**
* Gets or sets the color of center guidelines.
* The default value is "gray".
* @name GuidedDraggingTool#centerGuidelineColor
* @function.
* @return {string}
*/
Object.defineProperty(GuidedDraggingTool.prototype, "centerGuidelineColor", {
get: function() { return this._centerGuidelineColor; },
set: function(val) {
if (this._centerGuidelineColor !== val) {
this._centerGuidelineColor = val;
this.guidelineVcenter.elements.first().stroke = this._centerGuidelineColor;
this.guidelineHcenter.elements.first().stroke = this._centerGuidelineColor;
}
}
});
/**
* Gets or sets the width guidelines.
* The default value is 1.
* @name GuidedDraggingTool#guidelineWidth
* @function.
* @return {number}
*/
Object.defineProperty(GuidedDraggingTool.prototype, "guidelineWidth", {
get: function() { return this._guidelineWidth; },
set: function(val) {
if (typeof val !== "number" || isNaN(val) || val < 0) throw new Error("New value for GuidedDraggingTool.guidelineWidth must be a non-negative number.");
if (this._guidelineWidth !== val) {
this._guidelineWidth = val;
this.guidelineVcenter.elements.first().strokeWidth = val;
this.guidelineHcenter.elements.first().strokeWidth = val;
this.guidelineVleft.elements.first().strokeWidth = val;
this.guidelineVright.elements.first().strokeWidth = val;
this.guidelineHbottom.elements.first().strokeWidth = val;
this.guidelineHtop.elements.first().strokeWidth = val;
}
}
});
/**
* Gets or sets the distance around the selected part to search for aligned parts.
* The default value is 1000.
* Set this to Infinity if you want to search the entire diagram no matter how far away.
* @name GuidedDraggingTool#searchDistance
* @function.
* @return {number}
*/
Object.defineProperty(GuidedDraggingTool.prototype, "searchDistance", {
get: function() { return this._searchDistance; },
set: function(val) {
if (typeof val !== "number" || isNaN(val) || val <= 0) throw new Error("new value for GuidedDraggingTool.searchDistance must be a positive number.");
if (this._searchDistance !== val) {
this._searchDistance = val;
}
}
});
/**
* Gets or sets whether snapping to guidelines is enabled.
* The default value is true.
* @name GuidedDraggingTool#isGuidelineSnapEnabled
* @function.
* @return {Boolean}
*/
Object.defineProperty(GuidedDraggingTool.prototype, "isGuidelineSnapEnabled", {
get: function() { return this._isGuidelineSnapEnabled; },
set: function(val) {
if (typeof val !== "boolean") throw new Error("new value for GuidedDraggingTool.isGuidelineSnapEnabled must be a boolean.");
if (this._isGuidelineSnapEnabled !== val) {
this._isGuidelineSnapEnabled = val;
}
}
});
Here’s a usage that overrides the new GuidedDraggingTool.isGuiding method:
$(go.Diagram, . . .,
{ . . .,
draggingTool: $(GuidedDraggingTool,
{
isGuiding: function(other, node) {
return !other.isSelected &&
!(other instanceof go.Group) &&
!(node instanceof go.Group) &&
!(other instanceof go.Link) &&
!other.layer.isTemporary;
}
}),
. . .
Hi walter its works for me but i am getting this error on console after i drag drop node on my lane
Error:
Uncaught TypeError: Cannot read property ‘bounds’ of null
at Yf.t.Oh (:3188:166)
at R.Ff (:3863:57)
at vi.t.Ff (:1212:494)
at P.t.Ff (:1358:441)
at GuidedDraggingTool.showVerticalMatches (GuidedDraggingTool.js:276)
at GuidedDraggingTool.doDragOver (GuidedDraggingTool.js:108)
at Ff (:703:15)
at GuidedDraggingTool.df.doSimulatedDragOver (:749:392)
at df.simulatedMouseMove (:738:293)
at df.doMouseMove (:727:154)
Could you please tell me how to reproduce that error?