In my JointJs application, I want to discard particular commands so that they are not added in the Undo/Redo stack.
I followed the exact same code snippet from the JointJs documentation like below:
var commandManager = new joint.dia.CommandManager({
graph: graph,
cmdBeforeAdd: function(cmdName, cell, graph, options) {
options = options || {};
return !options.ignoreCommandManager;
}
});
// ...
// Note that the last argument to set() is an options object that gets passed to the cmdBeforeAdd() function.
element.set({ 'z': 1 }, { ignoreCommandManager: true });
But when I look into the options object in the debug mode, it doesn't contain any property with the name ignoreCommandManager.
I have also tried the below call to set the z value but it didn't work either.
element.set('z', 1 , { ignoreCommandManager: true });
Any idea why the options object is missing this property to ignore the command, please?
Initially, It was failing in Firefox when I posted the question here. The cache was also disabled.
I tried in another browser (Chrome) today without introducing any new changes and it was working without any issues.
Related
Because I register a listener about the CELL_ADD to justify when I add two different types of edges, I deal with them in different ways.
But the problem is I failed to add the edge after I change my method to "add edge" action"
HERE IS MY FIRST successful version :
graph.insertEdge(parent, null, '', defiVertex, outVertex);
HERE IS MY WANTED NEW VERSION but failed:
edge.edge = true;
edge.type = AUTO_INSERT_EDGE;
graph.addEdge(edge);
THANK FOR HELP!!
Not sure what you are trying to do, but why don't you override the addListener function? In there, you can retrieve the changes, and if the name is mxTerminalChange you know you are adding/modifying an edge:
model.addListener(mx.mxEvent.CHANGE, function(sender, evt) {
var changes = evt.getProperty('edit').changes;
if (changes[i].constructor.name == "mxTerminalChange") {
// Manage the add of a new connection
...
}
});
I change another way to finish my problem which is use the vue data attribute to help me record the state of the two add edge situations: when the edge is add by code, this.isAutoAdd = true, when user create the edge, this.isAutoAdd=false,so when in the listener, I just need to determine whether "isAutoAdd" is false to call the change function.
I have written a decorator/wrapper for window.console so that I, among other nifty stuff, can disable stray console.log's in my production environment.
What i am experiencing is that my wrapper now appears as the source of the actual log command. This makes debugging through the console a bit of a hassle since clicking the link to the far right in the console only leads to my own output function.
The following code is a simplified version of the real script where i have removed some features like enabling/disabling and caching/flushing of rows that have been hidden.
//Save reference to original function
var oConsole = window.console;
//Create custom console output method
var wConsole = function (method) {
return function () {
if (!window.console[method].enabled) {
//Apply log command to original console method
oConsole[method].apply(oConsole, Array.from(arguments)); //This is the row i get linked to
}
};
};
//Create a new console object for overriding original functions
var overrides = {
o: oConsole,
log: wConsole("log"),
debug: wConsole("debug"),
info: wConsole("info"),
warn: wConsole("warn"),
error: wConsole("error")
}
//Using jQuery i create a new instance and extend my defined overrides onto the original version
window.console = $.extend({}, window.console, overrides);
console.log("test 123"); //This is the row i want to link to
When i click the link to the right...
...i get linked to this row.
Is there a way to make a function "transparent" in such a way that the link refers to the callee of my wrapper function instead?
The solution only needs to work in Google Chrome, since I perform the majority of my development there.
Chrome has an option to "blackbox" script files. While this seems to be mostly intended to ignore framework scripts while debugging (blackboxed scripts will be skipped when stepping through code) it will help with your case as well since it will not show as the source for console output.
Open DevTools
Go to settings (F1 or through the main menu)
Open the Blackboxing tab
Enable the checkbox
Add a pattern that matches the file with your console override
Be happy
Source: https://developers.google.com/web/tools/chrome-devtools/javascript/guides/blackbox-chrome-extension-scripts
I need a way to call many DHTMLX attach*() functions with certain defaults already set. This is just one example. If I can figure this one example out then I can apply it to all others.
DHTMLX has many functions similar to this: dhtmlXCellObject.prototype.attachToolbar(), attachTabbar(), attachRibbon(), etc... But for every single toolbar in my app there are certain settings I want to automatically apply like iconSize and iconPath.
dhtmlXCellObject.prototype.attachTheBetterToolbar = function (conf) {
// https://docs.dhtmlx.com/api__dhtmlxlayout_attachtoolbar.html
// dhtmlXToolbarObject.prototype.attachToolbar.call(this, conf); This throws: Cannot read property 'call' of undefined
this.attachToolbar.call(this, conf);
// I want these two settings below on every single toolbar in our app but
// I only want to have to set them once in here. Then throughout my
// entire application, we will only use attachTheBetterToolbar...
// layout.cells('a').attachTheBetterToolbar()
// window.attachTheBetterToolbar()
// accordian.attachTheBetterToolbar()
// tabbar.tabs('a').attachTheBetterToolbar()
// etc...
this.setIconSize(18);
this.setIconsPath(c3.iconPath);
};
The above code doesn't work (errors with: this.setIconSize is not a function) but I think you'll get the idea of what I'm trying to attempt. I'm reading all sorts of articles on JavaScript extend, apply, call, inheritance, etc... I feel like I'm close but something just isn't clicking.
I thought the ".call()" part would cause inheritance to happen like described here: https://stackoverflow.com/a/16058530/3112803 (the Variation 1 - Mixin -> Inheritance example)
This does what I need...
dhtmlXCellObject.prototype.attachTheBetterToolbar = function (conf) {
var tb = this.attachToolbar(conf);
// this.setIconset("awesome");
tb.setIconSize(18);
tb.setIconsPath(c3.iconPath);
return tb;
};
I am using extjs 3.4 and I want to make records to appear when I use getModifiedRecords.
dtl.store.getAt(i).markDirty();
This is what I did and when I console.log() it I can see
dirty:true and also
modified:{idStyle: "TEST-4", idStyleDtl: 2052, color: 6, colorNm: "BLACK", s1: 0, …}
It clearly shows it has been modified and there's dirty flag but when I do ojbStore.getModifiedRecords() it returns just empty [ ]. I don't understand why it won't return the modified records.. Is there any other condition I need to change?
Thanks
So lets start with solution(click X button and look into the console): FIDDLE
Now what happens here is that i manually call my own added function in store called markDirtyFix and pass it a record(which i want to mark as dirty) to put it in modified-records list. Actually it is a copied function afterEdit from store. I just commented fireEvent of update(because this forces request to be sent on update, and you want to make it dirty "only locally"):
afterEdit: function(record){
if(this.modified.indexOf(record) == -1){
this.modified.push(record);
}
this.fireEvent('update', this, record, Ext.data.Record.EDIT);//removed
},
So the miracle happens and store.getModifiedRecords() returns your record in array included.
Now talk about problem. So the problem is that markDirty() looks like this(from official docs):
markDirty: function(){
this.dirty = true;
if(!this.modified){
this.modified = {};
}
this.fields.each(function(f) {
this.modified[f.name] = this.data[f.name];
},this);
}
and here is not anything that would call afterEdit or something like this to make your records dirty on a store level(well as you see it becomes dirty only on a record level).
Maybe someone say it is meant to be used only on a record level but markDirty doc description says:
Marking a record dirty causes the phantom to be returned by Ext.data.Store.getModifiedRecords ..
So it should have worked(but didn't).
As of adding a paper-dropdown-menu to my Polymer web application I run into the following:
When clicking on the dropdown:
Uncaught TypeError
Polymer.Gestures.findOriginalTarget is not a function
after confirming, followed by:
Cannot set property 'right' of undefined
After confirming again the dropdown shows, albeit a bit out of shape.
What's the problem here ?
The findOriginalTarget does not seem to be set in your version of polymer. Polymer will probably be updated to support it. In the mean time, however, you can download new version of gestures that will add and replace this types of functions.
Download
https://raw.githubusercontent.com/Polymer/polymer/master/src/standard/gestures.html and put it in your polymer folder.
Open paper-dropdown-menu/paper-dropdown-menu.html and add < link rel="import" href="../polymer/gestures.html">
Alternatively, you can find _onTap line at paper-dropdown-menu/paper-dropdown-menu.html and replace function with:
_onTap: function(event) {
//if (Polymer.Gestures.findOriginalTarget(event) === this) {
// this.open();
//}
var targetElement = Polymer.dom(event).localTarget;
if(targetElement === this){
this.open();
}
},
This does work, but I did not test it with touch devices so I can't guarantee that (and I would appreciate feedback on this).
And lastly, if you don't care about _onTap event you could just set it to return false.