Develop Reference

JointJs - Discarding the command in CommandManager.cmdBeforeAdd

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.

Redirect link on console output row to the callee of wrapper 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

How do I get a webcam working with AngularJS?

Previously I've put working webcam code into my application, but now it's not working when I updated to AngularJS v1.5.0. I am using webcam-directive which was working perfectly with v1.3.0.
Here is my code:
<webcam placeholder="selfiePlaceHolder"
on-stream="onStream(stream)"
on-access-denied="onError(err)" on-streaming="onSuccess(video)">
</webcam>
But now it's giving following error with AngularJS v1.5.0:
Uncaught Error: [$parse:isecdom] Referencing DOM nodes in Angular expressions is disallowed! Expression: onSuccess(video)
http://errors.angularjs.org/1.5.0/$parse/isecdom?p0=onSuccess(video)
I also tried to use a different solution with AngularJS ng-Camera but even its demo page is not working for me.
Note: I know the issue is that we can't access the DOM from the newer version of AngularJS, but the same code works with the older version. I need to know how to pass the "Video" DOM object to the controller.

I've found the solution to the problem. Two things need to be done:
First In HTML:
<webcam channel="channel"
on-streaming="onSuccess()"
on-error="onError(err)"
on-stream="onStream(stream)"></webcam>
Secondly, in the controller, you can access the DOM video with the following code:
$scope.onSuccess = function () {
// The video element contains the captured camera data
_video = $scope.channel.video;
$scope.$apply(function() {
$scope.patOpts.w = _video.width;
$scope.patOpts.h = _video.height;
//$scope.showDemos = true;
});
};
Here is a working example.

It is a potential error generally occurs when an expression tries to access a DOM node since it is restricted accessing to DOM nodes via expressions by AngularJS because it might cause to execute arbitrary Javascript code.
The $parse:isecdom error is related to an invoke to a function by event handler when an event handler which returns a DOM node, like below:
<button ng-click="myFunction()">Click</button>
$scope.myFunction = function() {
return DOM;
}
To fix this issue, avoid access to DOM nodes and avoid returning DOM nodes from event handlers. (Reference: https://docs.angularjs.org/error/$parse/isecdom)
Adding an explicit return might solve this issue as detailed here: CoffeeScript - Referencing DOM nodes in Angular expressions is disallowed

I was able to get webcam-directive working using the channel suggestion from the comment above, based on the example on the github page.
function MyController($scope) {
$scope.myChannel = {
// the fields below are all optional
videoHeight: 800,
videoWidth: 600,
video: null // Will reference the video element on success
};
}
In the onSuccess(on-streaming attr) and onStream(on-stream attr) callback the video property of myChannel was filled in with the video DOM element (and then it would obviously be available to everything else in the controller too). According to the comment in the example code though, you should wait to access it at least until onSuccess. Here is a working example

HammerJS event properties are undefined

I'm developing this small website : Website ; and I'm using HammerJS as a touch support library.
It seems to be responding to the events, and it recognizes the event.type property, but when I'm trying to get the event.direction or other related properties to the drag event nothing is output in the console ( I'm logging the results in the console ).
This is how I listen for the drag event "
Application.ApplicationController.prototype.Drag = function(selector, delay, callback) {
return $(selector).on('drag', _.debounce(function(event){
event.preventDefault();
return (typeof callback === 'function' && callback !== undefined) ? callback.apply( event, [ event ] ) : 'Argument : Invalid [ Function Required ]';
}, delay));
};
I'm calling it something like :
this.Drag(selector, delay, function(event) {
console.log(event.type, event.direction);
});
Could someone tell me what am I doing wrong in there or if I'm missing something ?
EDIT : I have just replaced the jQuery library : jquery.specialevents.hammer.js ; with the old jquery.hammer.js ; and it seems like now it's responding to all events and I get all the properties I should. Still I would like to know why isn't the one I tried to work with working ?
EDIT : I have found the underlying cause of my issue, my code depends on some libraries which I'm loading asynchronous with the Yepnope script loader, so somewhere along the way instead of loading all the libraries ( including the jquery plugin for hammer.js ), some of them are lost :) I have fixed that issue and now the events have the properties that they're supposed to.

Still I would like to know why isn't the one I tried to work with working ?
Understanding the difference between jquery.specialevent.hammer.js and jquery.hammer.js should help understand the problem. Damien, the creator of jquery.specialevent.hammer.js, explains why.
However Eight Media decided to create their own namespace in jQuery to
activate the events.
$("#element").hammer({ /* options */ }).on("tap", function(ev) {
console.log(ev);
});
So in the end they are not using the default
jQuery eventing system. That means my existing source code which used
jQuery mobile events has to be change. That’s why I decided to
implement the use of Hammer.JS with the jQuery special eventing API.
$("#element").on("tap", { /* options */ }, function(ev) {
console.log(ev);
});
I put jquery.specialevent.hammer.js onto my
Github where you can also find a demo. Maybe Eight Media accepts my
pull request and it will be part of Hammer.JS.

event.gesture.direction should get you what you are looking for.

"bwrap" is undefined

I have a class extending the old Ext.Panel class. I'm now trying to migrate my application with help of the migration guide provided by sencha. I'm using a modification of the ext3 "Portal"-Example.
When trying to load my application i get some "deprecated" and "breaking" errors with a good explaination. But there is one error, i can't fix. It says "portal.bwrap is undefined" as mentioned above, "portal" is a subclass of Ext.Panel. In ext3 there was a property "bwrap" in the new ext there is not. And it is not documented neither in the compatibility layer nor in the migration guide how to fix this in ext4.
Here are the two places where bwrap is used:
constructor : function(portal, cfg){
this.portal = portal;
Ext.dd.ScrollManager.register(portal.body);
Ext.ux.Portal.DropZone.superclass.constructor.call(this, portal.bwrap.dom, cfg);
portal.body.ddScrollConfig = this.ddScrollConfig;
},
[...]
getGrid : function(){
var box = this.portal.bwrap.getBox();
box.columnX = [];
this.portal.items.each(function(c){
box.columnX.push({x: c.el.getX(), w: c.el.getWidth()});
});
return box;
},
Any suggestions?

bwrap was a div that wrapped that panel body. It no longer exists. Without seeing the code I can't say what you should do, but chances are you should either refer to the main panel element or the body itself.
FYI the portal example is already ported to 4.