Develop Reference

i got this error multiple times on angular 6 until browser freeze

[Violation] Added non-passive event listener to a scroll-blocking
'touchstart' event. Consider marking event handler as 'passive' to
make the page more responsive
i am trying to use Tabulator in angular with success.but after a while the grid stop responding and then the browser, i am updating the grid content every 1 min using observable. aftr 4 times everything stucks with this issue....
//define table options
this.flatTableOptions = {
reactiveData: true,
data: this.currentTrafficServices,
columns: [
{
title: 'SERVICES',
field: 'displayName'
},
{
title: 'OCCURRENCES',
field: 'connectionQuantity'
},
{
title: 'STARTING FROM',
field: 'firstSeen',
mutator: this.milliToDate
},
{
title: 'LAST UPDATE',
field: 'lastSeen',
mutator: this.milliToDate
}
],
// persistentSort: true,
selectable: true,
layout: "fitColumns"
};
//create table
this.flatTable = new Tabulator('#tabulator-flat', this.flatTableOptions);
this.flatTable.redraw(true);
Does anybody know how to fix this? or should I give up on Tabulator with Angular?

That was a console warning rather than an error, it would have had no affect on your tables function, as #Shual mentions it is more to do with performance optimisation than functionality.
As of version v4.4 this behaviour has been optimised an you will no longer see these warnings in your console

how to run a background service in electron js?

How to implement background service using electron.
i'm having a trouble can anyone tell me how to start a background
service using electron which runs even after closing the app. i have
tried many solutions but all of them stop the service after closing
the app.

You can use tray. here is an example (source):
"use strict";
// [run the app]
// $ npm install electron
// $ ./node_modules/.bin/electron .
const {app, nativeImage, Tray, Menu, BrowserWindow} = require("electron");
let top = {}; // prevent gc to keep windows
app.once("ready", ev => {
top.win = new BrowserWindow({
width: 800, height: 600, center: true, minimizable: false, show: false,
webPreferences: {
nodeIntegration: false,
webSecurity: true,
sandbox: true,
},
});
top.win.loadURL("https://google.com/");
top.win.on("close", ev => {
//console.log(ev);
ev.sender.hide();
ev.preventDefault(); // prevent quit process
});
// empty image as transparent icon: it can click
// see: https://electron.atom.io/docs/api/tray/
top.tray = new Tray(nativeImage.createEmpty());
const menu = Menu.buildFromTemplate([
{label: "Actions", submenu: [
{label: "Open Google", click: (item, window, event) => {
//console.log(item, event);
top.win.show();
}},
]},
{type: "separator"},
{role: "quit"}, // "role": system prepared action menu
]);
top.tray.setToolTip("hello electrol");
//top.tray.setTitle("Tray Example"); // macOS only
top.tray.setContextMenu(menu);
// Option: some animated web site to tray icon image
// see: https://electron.atom.io/docs/tutorial/offscreen-rendering/
top.icons = new BrowserWindow({
show: false, webPreferences: {offscreen: true}});
top.icons.loadURL("https://trends.google.com/trends/hottrends/visualize");
top.icons.webContents.on("paint", (event, dirty, image) => {
if (top.tray) top.tray.setImage(image.resize({width: 16, height: 16}));
});
});
app.on("before-quit", ev => {
// BrowserWindow "close" event spawn after quit operation,
// it requires to clean up listeners for "close" event
top.win.removeAllListeners("close");
// release windows
top = null;
});

Yes, it is possible by using electron-process npm library.
ref :- https://www.npmjs.com/package/electron-process
First you will have to register the module which you want to run in background, just create simple background.html,
--background.html--
add below lines in script tag,
const background = require('electron-process').background;
background.registerModule(require('../main/snippets/SnippetsManager'));
In main process just create one browser window in which your background.html will run and keep it as hidden window,
--main.js--
app.once("ready", ev => {
service = new BrowserWindow({
width: 80, height: 60, center: true, minimizable: false, show: false,
webPreferences: {
nodeIntegration: false,
webSecurity: true,
sandbox: true,
},
});
service.loadURL("file://' + __dirname + '/background.html");
service.on("close", ev => {
ev.sender.hide();
ev.preventDefault(); // prevent quit process
});
});
Hope it helped,
Regards.

Electron is not designed to run in background. If you are closing
application then it will terminate all processes related with it.
Electron is only used to provide GUI layer. After all it is hybrid application and it doesn't interact with core OS services to live
itself like background service.
Apart from this there are two options:
If you write a service with something else, say a node or .net application, then you probably could use Electron to interact with that service (via bundled Node accessing Windows APIs).
Create feature like system tray. Minimise application to system tray.
Ref Link

Codemirror autocomplete and auto closing brackets doesnt trigger change event

I have the following problem. I've written a server and client scripts for node js that work as live collaboration code editing. 2 or more people can code in the same instance of CodeMirror editor. Until i have enabled autocomplete feature and auto closing brackets it was working perfect, but after i did it messed up the work. When you use autocomplete list or when bracket or tag will be closed by module not by you manually it will not be recognized as change. I have inspected an object that CodeMirror instance is returning and it doesnt contain change that have been done automatically. its not even strictly problem for node js beacuse if you want lets say, send changes to server via ajax and save in a file, it wont happen beacuse its not present in change object. Anyone had similiar problem and can help?
client code:
var appCM = CodeMirror.fromTextArea(document.getElementById('app-cm'), {
mode: 'text/html',
theme: "monokai",
styleActiveLine: true,
lineNumbers: true,
matchBrackets: true,
indentUnit: 4,
indentWithTabs: true,
autoCloseTags: true,
autoCloseBrackets: true,
matchTags: false,
extraKeys: {
"Ctrl-Space": "autocomplete",
"Ctrl-Q": function(appCM) {
appCM.foldCode(appCM.getCursor());
}
},
foldGutter: true,
gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
readOnly: access
});
appCM.on('change', function(i, op) {
socket.emit('change', op);
});
socket.on('change', function(data) {
appCM.replaceRange(data.text, data.from, data.to);
});
server code:
socket.on('change', function(op) {
if(op.origin === '+input' || op.origin === 'paste' || op.origin === '+delete') {
clients.forEach(function(client) {
if(client !== socket)
client.emit('change', op);
});
};
});

You are explicitly filtering out changes whose origin isn't one of input/paste/delete. Why are you doing that? You'll need to propagate all changes if you want peers to stay in sync.

TIBlob passed through application-level event becomes NULL on the receiving end

I have a very simple app where the user selects an image from the iOS photo gallery.
The TIBlob passed to Titanium.Media.openPhotoGallery.success event is then passed to an application-level event.
The issue is that the TIBlob is NULL when the application level event is received.
Below is a complete code sample.
Titanium.UI.setBackgroundColor('#000');
var win = Ti.UI.createWindow({title: 'Camera Test', exitOnClose: true, fullscreen: true, backgroundColor: '#ffffff'});
var bt = Ti.UI.createButton({'title': 'Gallery', top: 10, width: 200, height: 50});
bt.addEventListener('click', function(e) {
Titanium.Media.openPhotoGallery({
success:function(event) {
if(event.mediaType == Ti.Media.MEDIA_TYPE_PHOTO) {
alert(event.media);
Ti.App.fireEvent('uploadImage', {image: event.media, source: 'gallery'});
}else {
alert('Image was not uploaded because the type was invalid.');
}
},
cancel:function() {
},
error:function(err) {
alert('Error selecting image from gallery: ' + err);
Ti.API.error(err);
},
allowEditing: false,
autohide: true,
mediaTypes:[Ti.Media.MEDIA_TYPE_PHOTO]
});
});
Ti.App.addEventListener('uploadImage', function(e) {
alert(e.image);
alert(e.source);
});
win.add(bt);
win.open();
Any suggestions?

The Appcelerator Guides say that objects passed through and event must be JSON-serializable https://wiki.appcelerator.org/display/guides/Event+Handling#EventHandling-Firingevents. A TiBlob is not serializable, so I think the blog is not making it through the event.
If this really is a very simple app, I would suggest changing that to a function call instead of firing an event and the blob will be preserved. However, if this absolutely needs to be an event, you could pass event.media.nativePath instead and then read a blob out of that when you actually need to do something with it.

Extjs: Tree, Selecting node after creating the tree

I have a simple TreePanel. I would like to select a particular node upon loading it. The nodes are from a remote file (json).
The tree is loading as expected. However, the node is not being selected. Firebug shows node as undefined. This perhaps because of the async property. But, I an unable to configure this other wise, or specify the node be selected.
Any suggestions welcomed, and thank you.
LeftMenuTree = new Ext.tree.TreePanel({
renderTo: 'TreeMenu',
collapsible: false,
height: 450,
border: false,
userArrows: true,
animate: true,
autoScroll: true,
id: 'testtest',
dataUrl: fileName,
root: {
nodeType: 'async',
iconCls:'home-icon',
expanded:true,
text: rootText
},
listeners: {
"click": {
fn: onPoseClick,
scope: this
}
},
"afterrender": {
fn: setNode,
scope: this
}
});
function setNode(){
alert (SelectedNode);
if (SelectedNode == "Orders"){
var treepanel = Ext.getCmp('testtest');
var node = treepanel.getNodeById("PendingItems");
node.select();
}
}

I use this code in the TreeGrid to select a node
_I.treeGrid.getSelectionModel().select(_I.treeGrid.getRootNode());
I haven't tried this in a TreePanel but since the TreeGrid is based on it I'll just assume this works. I used the load event of the loader to plugin similar code after the XHR request was done, so try to write your setNode function like this:
var loader = LeftMenuTree.getLoader();
loader.on("load", setNode);
function setNode(){
alert (SelectedNode);
if (SelectedNode == "Orders"){
var treepanel = Ext.getCmp('testtest');
treepanel.getSelectionModel().select(treepanel.getNodeById("PendingItems"));
}
}

this work for me...
var loader = Ext.getCmp('testtest').getLoader();
loader.on("load", function(a,b,c){
b.findChild("id",1, true).select(); // can find by any parameter in the json
});

I have documented a way to accomplish something very similar here:
http://www.sourcepole.ch/2010/9/28/understanding-what-s-going-on-in-extjs
what you'll need to make sure is that the node that you are selecting is visible. You can accomplish that by traversing the tree and node.expand()ing all the nodes parents (from the root down).

This is because the node isn't really selectable until the tree has been rendered. Try adding your node selection to an event listener listening for the render event.

If you're using a recent enough version of ExtJS then I find using ViewModels and the Selection config far easier for this kind of thing.
Something like:
LeftMenuTree = new Ext.tree.TreePanel({
renderTo: 'TreeMenu',
collapsible: false,
height: 450,
border: false,
userArrows: true,
animate: true,
autoScroll: true,
id: 'testtest',
dataUrl: fileName,
bind: {
Selection: '{SelectedNode}'
},
root: {
nodeType: 'async',
iconCls:'home-icon',
expanded:true,
text: rootText
},
listeners: {
"click": {
fn: onPoseClick,
scope: this
}
"afterrender": {
fn: setNode,
scope: this
}
});
(You'll need to either have a ViewModel set up in the TreePanel or the owning view)
Then assuming you're using a ViewController and setNode is a member:
setNode: function(){
var nodeToSelect = // code to find the node object here
this.getViewModel().set('Selection', nodeToSelect);
}
The nice thing about the ViewModel approach is that it seems to just handle all of the rendering / data loading issues automatically.