Develop Reference

renderAll() not working in fabric.js

I have six floors of a building drawn on a canvas with fabric.js. In order to show only one floor, I do this:
building.selectFloor = function(floorId){
for (var i = 0; i < floors.length; i++){
if (floorId == floors[i].name){
floors[i].visible = true;
}else{
floors[i].visible = false;
}
}
canvas.renderAll();
};
But nothing changes - all floors are still visible. The floors set to visible = false don't disappear until renderAll() is called later on a window resize:
$(window).resize(setSize);
setSize();
function setSize(){
viewportWidth = $(window).width();
viewportHeight = $(window).height();
$appContainer.css({ "width": viewportWidth, "height": viewportHeight});
canvas.setDimensions({ width: viewportWidth, height: viewportHeight });
if (canvas.building){
canvas.building.center();
canvas.building.scaleX = canvas.building.scaleY = (viewportWidth + viewportHeight) / (1920 + 1080);
canvas.renderAll();
}
}
but then they do disappear. Why is one renderAll() working, and the other not? I've tried wrapping the non-functioning renderAll() in a window.timeOut to see if a delay helps, but no luck.

Ok - so I figured it out in the end: building is a group which appears to be getting cached by some internal fabric magic, and the cached version is being rendered instead of the updated version. To render the updated version you have to do this
canvas.building.set('dirty', true);
canvas.renderAll();
Hope that helps someone on down the line.
EDIT
Turns out there's an easier solution still:
canvas.building.objectCaching = false

There is a new version that changed the format to:
canvas.requestRenderAll();

This worked for me in later versions:
// for one canvas
myCanvas.objectCaching = false;
// for all canvas
fabric.Object.prototype.objectCaching = false;
// in both case it still needs to be re-rendered
myCanvas.renderAll();
ps: using version 4.2.0

You have to update (at least in the new version) object properties with object.set({...}) or set object.dirty = true in order to make the cache system recognize the change in the object properties. Disabling cache might not be the best idea, it has been included for a reason. canvas.requestRenderAll(); then works as intended.

How do I detect the number of clicks in Internet Explorer 10+

I need to know how to detect the number of clicks on an HTML element. With Firefox and Chrome, I use the "event" object and check its "detail" property. With a "mousedown" handler, I only want to initiate a "drag" on an element (move it around the screen using CSS) on the FIRST click:
if (event.detail>1) return;
But Internet Exploder 11 (I assume the same for 10+) the
event.detail===5
on the first click. IE9 returns the "proper" value of 1.
The only thing I can think of is to use "setInterval()" to periodically (every .5 seconds or so) set a "global" value to =0, then increment that value on each "mousedown" and use that count instead of the "event.detail".
Ridiculous, methinks.
You can see this problem (until I fix it) at:
http://softmoon-webware.com/MasterColorPicker_instructions.php
The actual javascript code in question is in the file (the the very end):
http://softmoon-webware.com/color-pickers/SoftMoon-WebWare/MasterColorPicker2.js
After clicking on the input box on the left (that says try here), you should be able to "drag" the "picker panels" by their handles around the screen. No problem using a real browser, and even though IE9 is about maxxed out with the codebase (yes, it throws stack-overflow errors!) it will (or did before the last update that worked with the "FD-sliders" was implemented that started the stack overflow problems) allow dragging the panels. IE10+ only "highlights" (selects) the text under the curser, won't drag, again because of the "wrong" "event.detail" value. To be fair, nothing I can find on the Microsoft Developer Network pages says what the event.detail specs actually are (just "gives further info about the event..."), and the link to W3C pages don't seem to have specs for the "event.detail" property either.
Am I missing something here?
code extract from file:
for (var i=0, handle, panels=MasterColorPicker.panels; i<panels.length; i++) {
if (panels[i]===MasterColorPicker.mainPanel) continue;
if (panels[i].id==='MasterColorPicker_options') {
handle=panels[i].getElementsByTagName('header')[0]; // ↓ ↓ for drag, the first panel must be the largest and contain the other(s) in its margin
UniDOM.addEventHandler(handle, 'onmousedown', dragPanel, false, [MasterColorPicker.mainPanel, panels[i]]);
UniDOM.addEventHandler(handle, 'onmouseup', returnPanelsOn3, false, [MasterColorPicker.mainPanel, panels[i]]); }
else {
handle=panels[i].getElementsByTagName('h2')[0].getElementsByTagName('span')[0];
UniDOM.addEventHandler(handle, 'onmousedown', dragPanel, false, [panels[i]]);
UniDOM.addEventHandler(handle, 'onmouseup', returnPanelsOn3, false, [panels[i]]); }
UniDOM.addEventHandler(handle, 'oncontextmenu', abortContextMenu); }
UniDOM.addEventHandler(document.getElementById("MasterColorPicker_returnPanelsOn3"), 'onmouseup', returnPanelsOn3, false, panels);
function dragPanel(event, stickyPanels) { console.log("IE sucks: detail: "+event.detail);
event.stopPropagation();
event.preventDefault();
if (event.detail>1 || !MasterColorPicker.enablePanelDrag) return;
var stick=(event.shiftKey || event.button===2) && MasterColorPicker.enableStickyPanels && (UniDOM.MS_exploder!==9),
ttcn= (stick ? 'MCP_thumbtack' : ""),
CSS=getComputedStyle(stickyPanels[0], null),
mOff= (CSS.position==='fixed') ?
{x: (document.body.offsetWidth-event.clientX)-parseInt(CSS.right), y: event.clientY-parseInt(CSS.top)}
: UniDOM.getMouseOffset(stickyPanels[0], event),
dragHandle=event.currentTarget,
move=UniDOM.addEventHandler(document.body, 'onmousemove', function(event) {
var CSS=getComputedStyle(stickyPanels[0], null);
if (CSS.position==='fixed')
var b={w: document.body.offsetWidth, h: document.documentElement.clientHeight || window.innerHeight, x: 0, y: 0},
y=(event.clientY - mOff.y),
x=((b.w-event.clientX) - mOff.x);
else
var b=UniDOM.getElementOffset(stickyPanels[0].offsetParent, MasterColorPicker.dragBounder),
b={y: b.y, x: b.x, w: MasterColorPicker.dragBounder.offsetWidth, h: MasterColorPicker.dragBounder.offsetHeight},
m=UniDOM.getMouseOffset(stickyPanels[0].offsetParent, event),
y=m.y - (parseInt(CSS.marginTop) + mOff.y),
x=(b.w-m.x) - (stickyPanels[0].offsetWidth-mOff.x) + parseInt(CSS.marginRight);
y= (y<-b.y) ? (-b.y) : ( (y>(m=b.h-(stickyPanels[0].offsetHeight+parseInt(CSS.marginTop)+parseInt(CSS.marginBottom)+b.y))) ? m : y );
x= (x<-b.x) ? (-b.x) : ( (x>(m=b.w-(stickyPanels[0].offsetWidth+parseInt(CSS.marginLeft)+parseInt(CSS.marginRight)+b.x))) ? m : x );
for (i=0; i<stickyPanels.length; i++) {
stickyPanels[i].style.top= y + 'px';
stickyPanels[i].style.right= x + 'px'; }
event.stopPropagation();
event.preventDefault(); }
, true),
blockMenu=UniDOM.addEventHandler(document.body, 'oncontextmenu', abortContextMenu, true),
drop=UniDOM.addEventHandler(document.body, 'onmouseup', function(event) {
move.onmousemove.remove(); blockMenu.oncontextmenu.remove(); drop.onmouseup.remove();
event.stopPropagation();
event.preventDefault();
for (var i=0; i<stickyPanels.length; i++) {UniDOM.removeClass(stickyPanels[i], ['dragging', ttcn]);}
UniDOM.removeClass(document.body, ['MCP_drag', ttcn]);
if (stick) dragHandle.removeChild(MasterColorPicker.thumbtackImage);
try {MasterColorPicker.dataTarget.focus();} catch(e) {} }
, true);
for (var i=0; i<stickyPanels.length; i++) {
UniDOM.addClass(stickyPanels[i], ['dragging', ttcn]);
MasterColorPicker.setTopPanel(stickyPanels[i]); }
if (stick) {
mOff.x=stickyPanels[0].offsetWidth-mOff.x;
if (CSS.position==='fixed') {
mOff.y= -(parseInt(CSS.marginTop)-mOff.y);
var currentCN='floating', newCN='scrollable'; }
else {
mOff.y += parseInt(CSS.marginTop);
var currentCN='scrollable', newCN='floating'; }
while (--i>=0) {UniDOM.swapOutClass(stickyPanels[i], currentCN, newCN);}
dragHandle.appendChild(MasterColorPicker.thumbtackImage);
move.onmousemove.wrapper(event); }
UniDOM.addClass(document.body, ['MCP_drag', ttcn]); }
function returnPanelsOn3(event, stickyPanels) {
event.stopPropagation();
event.preventDefault();
if (event.detail!==3 || event.button!==0) return;
MasterColorPicker.returnPanelsHome(stickyPanels); }
function abortContextMenu(event) {event.preventDefault(); event.stopPropagation();}
MasterColorPicker.returnPanelsHome=function(stickyPanels) {
for (var i=0; i<stickyPanels.length; i++) {
stickyPanels[i].style.top= "";
stickyPanels[i].style.right= "";
UniDOM.removeClass(stickyPanels[i], ['scrollable', 'floating']); } }

Just keep a count of how many times your mousedown handler has been called:
var clickCount = 0;
$('#myElement').on('mousedown', function(){
clickCount++;
if (clickCount > 1)
return;
[ ... ]
});

HighCharts: How to use reflow to allow auto-resize after changing size

In our Angular app we're using highcarts-ng for our HighCharts implementation.
Here is the Chart Maximize and Minimize function, which works:
function expandChartPanel() {
vm.chartMaxed = !vm.chartMaxed;
viewHeader = ScopeFactory.getScope('viewHeader');
highChart = ScopeFactory.getScope('highChart');
var chart = highChart.chartObject;
var highChartContainer = document.getElementById("highchart-container");
var highChartContainerWidth = document.getElementById('highchart-container').clientWidth;
var highChartContainerHeight = document.getElementById('highchart-container').clientHeight;
var windowWidth = window.innerWidth;
var windowHeight = window.innerHeight;
if (vm.chartMaxed) {
vs.savedWidth = highChartContainerWidth;
vs.savedHeight = highChartContainerHeight;
console.log('savedWidth = ', vs.savedWidth);
console.log('savedHeight = ', vs.savedHeight);
root.chartExpanded = true;
viewHeader.vh.chartExpanded = true;
highChart.highChartMax = true;
highChartContainerHeight = document.getElementById('highchart-container').clientHeight;
windowWidth = window.innerWidth;
windowHeight = window.innerHeight;
highChart.chartConfig.size.width = windowWidth;
highChart.chartConfig.size.height = windowHeight - 220;
chart.setSize(windowWidth, windowHeight - 220);
}
else {
root.chartExpanded = false;
viewHeader.vh.chartExpanded = false;
highChart.highChartMax = false;
highChart.chartConfig.size.width = vs.savedWidth;
highChart.chartConfig.size.height = vs.savedHeight;
chart.setSize(vs.savedWidth, vs.savedHeight);
}
highChart.restoreChartSize();
}
Here is the reflow function:
function restoreChartSize() {
console.log('restoreChartSize');
if (!vs.chartObject.reflowNow) {
vs.chartObject.reflowNow = vs.chartObject.reflowNow = function() {
this.containerHeight = this.options.chart.height || window.window.HighchartsAdapter.adapterRun(this.renderTo, 'height');
this.containerWidth = this.options.chart.width || window.window.HighchartsAdapter.adapterRun(this.renderTo, 'width');
this.setSize(this.containerWidth, this.containerHeight, true);
this.hasUserSize = null;
}
}
vs.chartObject.reflowNow();
}
This reflow function above, works perfectly in this jsFiddle, but not in our app.
The full Gist file of our HighChartsDirective file.
After clicking Maximize, the chart will expand to the full size of the browser window, but then after dragging to resize the browser window, I call the restoreChartSize function, which activates the reflow.
However the size of the chart does not go to auto-size 100% 100%, it goes back to the previous size of the chart :(
Before Maximize:
After the Maximize function:
Now after resizing the browser window:
window.onresize = function(event) {
console.log('window resizing...');
highChart = ScopeFactory.getScope('highChart');
highChart.restoreChartSize();
console.log('highChart.chartConfig = ', highChart.chartConfig);
};
^ back to the smaller static sizes, not auto-size 100%

You can do this by adding a new method to chart that will manually trigger the reflow like so:
chart.reflowNow = function(){
this.containerHeight = this.options.chart.height || window.window.HighchartsAdapter.adapterRun(this.renderTo, 'height');
this.containerWidth = this.options.chart.width || window.window.HighchartsAdapter.adapterRun(this.renderTo, 'width');
this.setSize(this.containerWidth, this.containerHeight, false);
this.hasUserSize = null;
}
Then whenever you want to get away from manual resizing using setSize() just call chart.reflow()
Here's an working example: jsFiddle
Reference taken from: github-issue
UPDATE for ng-highcharts users
For doing this when using ng-highcharts library, you can simply pull out the chart object in the controller that has highcharts-ng dependency and add the reflowNow function, like so:
var chart = this.chartConfig.getHighcharts();
chart.reflowreflowNow = function (){ ... }
This is also the recommended way to pull out chart to do custom jobs by author of ng-highcharts as noted here and this fiddle.

I ended up finding an alternative solution to be the only thing I could get working, and it actually was pretty simple and straight forward to do. In case anyone else is looking for a fix for this, here's links to the resources that were useful and solved the issue for me.
You can simply add this to your chart config object, at the same level as the config.series or config.options. The comment references info but the actual solution that worked for me uses $timeout with 0 seconds, here
*For using highcharts-ng obviously
http://plnkr.co/edit/14x7gfQAlHw12XZVhWm0?p=preview
$scope.chartConfigObject = {
// function to trigger reflow in bootstrap containers
// see: http://jsfiddle.net/pgbc988d/ and https://github.com/pablojim/highcharts-ng/issues/211
func: function(chart) {
$timeout(function() {
chart.reflow();
//The below is an event that will trigger all instances of charts to reflow
//$scope.$broadcast('highchartsng.reflow');
}, 0);
}
};

Show Window on largest screen using Adobe AIR

I'm building an Adobe AIR application in HTML/JavaScript that will use two windows, once of which will be display on the largest screen available (if available).
The code is as follows:
function showProjector(){
if(air.Screen.screens.length > 1) {
if(htmlLoader) {
// Projector is already shown
} else {
// Create a new window that will become the projector screen
var options = new air.NativeWindowInitOptions();
options.systemChrome = air.NativeWindowSystemChrome.NONE;
options.transparent = true;
options.type= air.NativeWindowType.LIGHTWEIGHT;
var htmlLoader = air.HTMLLoader.createRootWindow(false, options, false);
htmlLoader.window.nativeWindow.visible = true;
// Add content to new window
htmlLoader.load(new air.URLRequest('Projector.html'));
// Make the window appear on the biggest screen
htmlLoader.bounds = air.Screen.screens[1];
// Make it full screen
htmlLoader.stage.displayState = runtime.flash.display.StageDisplayState.FULL_SCREEN_INTERACTIVE;
}
} else {
// Show error that you need a projector screen
alert('You need a projector screen');
}
}
I've handled the parts checking if more than one screen is available and if the projector is already being displayed. But need to find out which is the biggest screen and make sure that the current window DOES not move to it, and the new htmlLoader one DOES move it to.
How can I do this?

Finding the largest screen:
var largestScreen = null;
for( var index = 0; index < Air.Screen.screens.length; ++index) {
var currentScreen = Air.Screen.screens[index];
if( largestScreen == null ){
largestScreen = currentScreen;
}
else{
//Defining largest screen as biggest total area.
var currentArea = currentScreen.bounds.width * currentScreen.bounds.height;
var largestArea = largestScreen.bounds.width * largestScreen.bounds.height;
if(currentArea > largestArea) {
largestScreen = currentScreen;
}
}
}
Setting the projector window to the largest screen needs to happen on creation
var htmlLoader = air.HTMLLoader.createRootWindow(false, options, false, largestScreen.bounds);
See reference:
flash.display.NativeWindow
flash.html.HTMLLoader
flash.display.Screen

white space appear after call phonegap camera function

In my app, everytime when I call the camera ( either take a picture or scan barcode), there will be a white space added to the bottom(tested on ios 7). It can grow by how many times I used the camera. Looks like the same height of the status bar.
The camera is just using native SDK, nothing else in the code.
CameraHelper.prototype.takeCameraImage = function(callback){
console.log("takeCameraImage");
navigator.camera.getPicture(onSuccess, onFail, { quality: 49,
destinationType: Camera.DestinationType.FILE_URI,
sourceType: navigator.camera.PictureSourceType.CAMERA,
correctOrientation: true,
targetWidth: 266,
targetHeight: 266
});
function onSuccess(imageURI) {
callback({imageURI: imageURI});
}
function onFail(message) {
callback({message: message});
}
};
what's the possible reason for it?

try this one, put this code in your MainViewController.m class
- (void)viewDidLayoutSubviews{
if ([self respondsToSelector:#selector(topLayoutGuide)]) // iOS 7 or above
{
CGFloat top = self.topLayoutGuide.length;
if(self.webView.frame.origin.y == 0){
// We only want to do this once, or if the view has somehow been "restored" by other code.
self.webView.frame = CGRectMake(self.webView.frame.origin.x, self.webView.frame.origin.y + top, self.webView.frame.size.width, self.webView.frame.size.height - top);
}
}
}

For the height try using self.view.frame.size.height - 20 (or what the status bar height is).

I had exactly the same problem on a cordorva app running on an iPhone on OS 7.1. It happens on calls to inAppBrowser, as well. None of the solutions suggested here worked for me.
However, what did work was to find this in MainViewController.m (starting on line 78 for me):
- (void)viewWillAppear:(BOOL)animated
{
// View defaults to full size. If you want to customize the view's size, or its subviews (e.g. webView),
// you can do so here.
if ([[[UIDevice currentDevice] systemVersion] floatValue] >= 7) {
CGRect viewBounds = [self.webView bounds];
viewBounds.origin.y = 20;
viewBounds.size.height = viewBounds.size.height - 20;
self.webView.frame = viewBounds;
}
[super viewWillAppear:animated];
}
Comment out the following line:
viewBounds.size.height = viewBounds.size.height - 20;
That fixed the compounding white space issue for me completely and I found no negative consequences.

use this code
static int score = 0;
- (void)viewWillAppear:(BOOL)animated
{
// View defaults to full size. If you want to customize the view's size, or its subviews (e.g. webView),
// you can do so here.
if ([[[UIDevice currentDevice] systemVersion] floatValue] >= 7) {
CGRect viewBounds = [self.webView bounds];
viewBounds.origin.y = 10;
//viewBounds.size.height = viewBounds.size.height - 18;
if (score==0) {
viewBounds.size.height = viewBounds.size.height - 18;
score=1;
}
self.webView.frame = viewBounds;
}
[super viewWillAppear:animated];
}