I want to collapse a cell of MxGraph and it's children when clicked on an overlay
overlay2.addListener(mxEvent.CLICK, function (sender, evt3) {
console.log("evt3", evt3)
setVertexStatus(null);
var cell = evt3.getProperty("cell");
//this is the cell and it's children I need to collapse
})
any answer with example will help
Eventually figured out the solution.
created a function
function collapseSubtree(graph, cell, shouldCollapse) {
// Gets the subtree from cell downwards
var cells = [];
var i = 0;
graph.traverse(cell, true, function (vertex) {
console.log("cells", cells, cells.length);
if(i == 0){
cells.push(vertex);
}else{
cells.push(vertex);
}
i++;
return true;
});
graph.foldCells(shouldCollapse, true, cells);
}
called this function form onClick event of the overlay
collapseSubtree(graph, cell, true);
This can be used to expand or collapse
Related
I am using the Autodesk Viewer with the Edit2D extension and working on labels. The strange thing is that labels seem to leave a 'residue' when the polygon is hidden.
I have several polygons on the layer and the ability for the user to hide them. When they do that, this code does the hiding:
export function setRegionVisibility(
editor: Autodesk.Extensions.Edit2D,
region: RegionData,
geometry: SpaceGeometry,
visible: boolean
): void {
const shape = editor.defaultContext.layer.shapes.find(
(s) => s.id === region.itemIds[0]
);
if (shape == null) {
return;
}
// #ts-ignore
shape.visible = visible;
editor.defaultContext.layer.update();
return;
}
However, when a polygon is hidden, the label that was for it remains on the view. When I re-show the shape it gets a NEW label which moves with it, but the old one remains on the view and just stays in a static location regardless of the zooming or panning of the view.
I tried to manually hide it or remove it but nothing seems to work. This is how I tried to do that:
export function setRegionVisibility(
editor: Autodesk.Extensions.Edit2D,
region: RegionData,
geometry: SpaceGeometry,
// #ts-ignore
tagRule: Autodesk.Edit2D.ShapeLabelRule | undefined,
visible: boolean
): void {
const shape = editor.defaultContext.layer.shapes.find(
(s) => s.id === region.itemIds[0]
);
if (shape == null) {
return;
}
// #ts-ignore
shape.visible = visible;
let label: any;
for (let labelsKey in tagRule.labels) {
if (labelsKey === shape.id.toString()) {
label = tagRule.labels[labelsKey];
}
console.log(tagRule.labels);
}
if (label != null) {
label.visible = visible;
console.log(label);
label.dtor();
label.update();
label.layer.update();
}
editor.defaultContext.layer.update();
return;
}
Any idea how to make that ghost go away?
I have a pop up menu that appears when the users name is hovered over using onmouseeneter and the menu disapeers when onmouseleave is triggerd.
The problem i have is that on occasion the mouseleave is not triggered and the menu stays showing, which is ok but i require another check to see if mouse is within the div on mouse move. and also a click event to close the div if the click is outside of the div.
How can i check weather a click or a mousemove is within a div or not.
I have tried the following with no luck. allthough the code is fine i require another way.
<div id='overlay' class='overlay' style='display:none;'
onmouseover='showoverlay();' onmouseleave='removeoverlay();'> </div>
function showoverlay() {
var overlay=document.getElementById("overlay");
overlay.style.display="block";
overlay.style.zIndex="999";
overlay.style.opacity="1";
}
function removeoverlay() {
var overlay = document.getElementById("overlay");
overlay.style.opacity="0";
overlay.style.display="none"
overlay.style.zIndex="-999";
}
$(document).ready(function(){
$(document).mouse(function(e)
{
var subject = $("#overlay");
if(e.target.id != subject.attr('id') &&
!subject.has(e.target).length)
{
removeoverlay();
}
});
});
You can use is jQuery function like so:
$(function() {
$('ul').on('click', function (event) {
let target = $(event.target);
let handle = $(this).find('i');
let checkbox = $(this).find('input[type=checkbox]');
if (false === target.is(handle) && false === target.is(checkbox)) {
checkbox.prop('checked', !checkbox.prop('checked'));
}
});
});
I have used kendo sortable to drag and drop row to reorder.
javascript:
grid.table.kendoSortable({
filter: ">tbody >tr",
hint: function (element) {
var table = $('<table style="width: 600px;" class="k-grid k-widget"></table>'),
hint;
table.append(element.clone());
table.css("opacity", 0.7);
return table;
},
cursor: "move",
placeholder: function (element) {
return $('<tr colspan="4" class="placeholder"></tr>');
}
,
change: function (e) {
var skip = grid.dataSource.skip(),
oldIndex = e.oldIndex ,
newIndex = e.newIndex ,
data = grid.dataSource.data(),
dataItem = grid.dataSource.getByUid(e.item.data("uid"));
grid.dataSource.remove(dataItem);
grid.dataSource.insert(newIndex, dataItem);
}
});
I cant not scroll and drag at the same time. scrolling to working while dragging. How to solve it??
Last year or so, they've added a new setting: autoScroll which does the trick. See https://docs.telerik.com/kendo-ui/api/javascript/ui/sortable/configuration/autoscroll for the documentation.
Our elements are color coded so when a user selects one we just want to isolate it in the views (which works as expected) BUT we don't want it to change to the selection color - where can we control this?
Use selection event to find which object has been selected, cancel the selection and isolate the selected dbId, is this the behavior you are looking for?
AutodeskNamespace("Autodesk.ADN.Viewing.Extension");
Autodesk.ADN.Viewing.Extension.Basic = function (viewer, options) {
Autodesk.Viewing.Extension.call(this, viewer, options);
var _this = this;
_this.load = function () {
console.log('LOAD')
viewer.addEventListener(
Autodesk.Viewing.AGGREGATE_SELECTION_CHANGED_EVENT, function(e) {
//console.log(e)
if(e.selections.length) {
var dbId = e.selections[0].dbIdArray[0]
viewer.select([])
viewer.isolate(dbId)
}
})
return true;
};
_this.unload = function () {
Autodesk.Viewing.theExtensionManager.unregisterExtension(
"Autodesk.ADN.Viewing.Extension.Basic");
return true;
};
};
Autodesk.ADN.Viewing.Extension.Basic.prototype =
Object.create(Autodesk.Viewing.Extension.prototype);
Autodesk.ADN.Viewing.Extension.Basic.prototype.constructor =
Autodesk.ADN.Viewing.Extension.Basic;
Autodesk.Viewing.theExtensionManager.registerExtension(
"Autodesk.ADN.Viewing.Extension.Basic",
Autodesk.ADN.Viewing.Extension.Basic);
In case you want to keep the selection just not make it blue in the UI, you can change the selection material's opacity to see-through:
viewer.impl.selectionMaterialBase.opacity = 0;
viewer.impl.selectionMaterialTop.opacity = 0;
Now when you click on an object it won't turn blue.
So I wonder what it takes to make changes made by google apps script to a document reversible.
In particular I am working on a script that applies custom styles to selected elements from a document in Google Docs. It's not a hard thing to do. The problem is that the changes made by the script are not reflected in the history of the document and thus cannot be undone. There is no notion of a reversible editing session either as far as I can tell.
So is there a way to undo the changes made by a script?
function onOpen() {
DocumentApp.getUi()
.createMenu('Extras')
.addItem('Apply code style', 'applyCodeStyle')
.addToUi();
}
function applyCodeStyle() {
var selection = DocumentApp.getActiveDocument().getSelection();
if (selection) {
var elements = selection.getSelectedElements();
for (var i = 0; i < elements.length; i++) {
var element = elements[i];
// Only modify elements that can be edited as text; skip images and other non-text elements.
if (element.getElement().editAsText) {
var text = element.getElement().editAsText();
// Bold the selected part of the element, or the full element if it's completely selected.
if (element.isPartial()) {
text.setBold(element.getStartOffset(), element.getEndOffsetInclusive(), true);
} else {
text.setBold(true);
}
}
}
}
}
The closest I can imagine it to create a backup copy of your file in a specific folder every 5 minutes or so when you are modifying it so you have at least a copy of this doc version. Not ideal but it works...
Here is a piece of code that does it, starting from your code I just added the timer/copy stuff, you can try it by changing the folder ID.
EDIT : added a try/catch for first execution without error.
function applyCodeStyle() {
var selection = DocumentApp.getActiveDocument().getSelection();
try{
var x = new Date().getTime()/60000-new Date(Utilities.jsonParse(ScriptProperties.getProperty('lastBKP'))).getTime()/60000 ;
}catch(e){
ScriptProperties.setProperty('lastBKP', Utilities.jsonStringify(new Date()));
var x = 0
}
Logger.log(x+' minutes')
if (selection) {
if(x > 5){
var docId = DocumentApp.getActiveDocument().getId();
DriveApp.getFileById(docId).makeCopy(DriveApp.getFolderById('0B3qSFd3iikE3NWd5TmRZdjdmMEk')).setName('backup_of_'+DocumentApp.getActiveDocument().getName()+'_on_'+Utilities.formatDate(new Date(),'GMT','yyyy-MMM-dd-HH-mm'));
Logger.log("file copied because new Date().getTime()/3600-new Date(Utilities.jsonParse(ScriptProperties.getProperty('lastBKP'))).getTime()/3600 ="+x);
ScriptProperties.setProperty('lastBKP', Utilities.jsonStringify(new Date()));
}
var elements = selection.getSelectedElements();
for (var i = 0; i < elements.length; i++) {
var element = elements[i];
if (element.getElement().editAsText) {
var text = element.getElement().editAsText();
if (element.isPartial()) {
text.setBold(element.getStartOffset(), element.getEndOffsetInclusive(), true);
} else {
text.setBold(true);
}
}
}
}
}