Electron Application changes height permanently when minimizing/maximizing - window

This bug occurs when minimizing and maximizing the window of my application.
After every min-/maximizing the window becomes a few pixels shorter.
Here are images from before and after I repeated this process a few times.
Before &
After
Here is my code for creating the window:
app.on('ready', function(){
const display = electron.screen.getPrimaryDisplay();
const maxiSize = display.workAreaSize;
mainWindow = new BrowserWindow({resizable: false,
icon: "Media/Magnet_Icon.ico",
height: maxiSize.height,
width: maxiSize.width
});
mainWindow.loadURL(url.format({
pathname: path.join(__dirname, 'MagnetMain.html'),
protocol: 'file:',
slashes: true
}));
});
Any Ideas how to fix this?

Related

Trigger method in cypress

I'm using drag and drop to move the node in canvas here. Drag and drop is working, but moving the node in canvas caused an uncaught expression error. I'm not sure what the problem is; I used the same code to move the nodes in the previous scenarios, and it worked fine.
const dataTransfer = new DataTransfer();
cy.get('[alt="sourcenode"]').trigger("dragstart", {
dataTransfer,
});
cy.get('.canvas')
.trigger("drop", { dataTransfer })
.trigger("mousemove",{force:true})
.trigger("mouseup", {force:true })
.trigger("mousemove", {
clientX: 700,
clientY: 150,
screenX: 700,
screenY: 150,
pageX: 700,
pageY: 150,
force:true
})
.trigger("mouseup", { force: true });
cy.get('.sourcenode in canvas').trigger("mousemove");
cy.get('.sourcenode in canvas').trigger("mouseup");

Cypress: click and drag an image? mousedown & mousemove not working

I'm trying to test a gallery for the first time with Cypress but I'm having trouble trying to get the mouse events to work:
cy.get("img#front").should("be.visible");
cy.get("img#front")
.trigger("mousedown", { which: 1, pageX: 600, pageY: 100 })
.trigger("mousemove", { which: 1, pageX: -600, pageY: 100 })
.trigger("mouseup");
});
The image is visible on the page but when I do mouse down and mouse move on it nothing is happening. What I'm trying to do is press the mouse down and drag it left so the image changes to the next one in the gallery.
Using XY coordinates,
This is a simple example with the Cypress custom command, which I tried and it works for me,
* This reusable method is used to handle React drag and drop within cypress test.
*/
Cypress.Commands.add("dragAndDrop", (subject, target, dragIndex, dropIndex) => {
cy.get(subject).should("be.visible", { timeout: 2000 });
Cypress.log({
name: "DRAGNDROP",
message: `Dragging element ${subject} to ${target}`,
consoleProps: () => {
return {
subject: subject,
target: target
};
}
});
const BUTTON_INDEX = 0;
const SLOPPY_CLICK_THRESHOLD = 10;
cy.get(target).eq(dropIndex).then($target => {
let coordsDrop = $target[0].getBoundingClientRect();
cy.get(subject).eq(dragIndex).then(subject => {
const coordsDrag = subject[0].getBoundingClientRect();
cy.wrap(subject)
.trigger("mousedown", {
button: BUTTON_INDEX,
force: true
})
.trigger("mousemove", {
button: BUTTON_INDEX,
clientX: coordsDrag.x,
clientY: coordsDrag.y,
force: true
})
.wait(1000);
cy.get('body')
.trigger("mousemove", {
button: BUTTON_INDEX,
clientX: coordsDrop.x + SLOPPY_CLICK_THRESHOLD,
clientY: coordsDrop.y,
force: true
});
cy.get('body')
.trigger("mousemove", {
button: BUTTON_INDEX,
clientX: coordsDrop.x,
clientY: coordsDrop.y + SLOPPY_CLICK_THRESHOLD,
force: true
})
.wait(1000);
cy.get(target)
.trigger("mouseup");
});
});
});
in your cypress spec
cy.dragAndDrop(dragloc, droploc, 0, 0);
You can also try with a few changes
extracted from https://github.com/cypress-io/cypress/issues/3942
Click and drag within an image or canvas element has been the bane of my work-existence for a while. To be honest, I stumbled onto this post explicitly because I'm looking for something that will work in my current situation.
Do not be deterred, friend. I have a few examples that have worked for me in the past, hopefully this helps:
cy.get(".canvas-wrap > canvas")
.trigger("mousedown", 715, 155, {
button: 0,
force: true,
eventConstructor: "MouseEvent"
})
.trigger("mousemove", 100, 100, {
button: 0,
force: true,
eventConstructor: "MouseEvent"
})
.trigger("mouseup", 100, 100, {
button: 0,
force: true,
eventConstructor: "MouseEvent"
});
or
cy.get(".canvas-wrap")
.trigger("mousedown", 200, 200, { button: 0 })
.trigger("mousemove", { clientX: -250, clientY: -200 })
.trigger("mouseup", { force: true });
Anyway, I'd recommend experimenting with passing in button or event options, or just trying force: true and seeing if that gets you anywhere.
All the best

Nativescript plugin "nativescript-camera-plus": CanĀ“t set Picture Size (width and height)

Hello iam developing a nativescript app and im using the "nativescript-camera-plus" plugin (Plugin on Github: https://github.com/nstudio/nativescript-camera-plus), even setting the parameters (width and height) exactly as described in the Option Interfaces section:
cam.takePicture({ saveToGallery: true, confirm: false, keepAspectRatio: true, width: 1920, height: 1440 });
...the plugin takes the picture and saves it, taking as reference the screen resolution of the mobile device divided by 2. Example: If the screen resolution is 1920, the plugin divides by 2 and saves the photo in 960. I need it save the photo with the width and height size that I determined in the options (parameters) of the code. Can someone help me?
MY CODE:
exports.takePicFromCam = function (args) {
cam.requestCameraPermissions().then(function () {
if (!cam) {
cam = new CameraPlus();
}
cam.takePicture({ saveToGallery: true, confirm: false, keepAspectRatio: true, width: 1920, height: 1440 });
});
}
cam.on(CameraPlus.photoCapturedEvent, function (args) {
fromAsset(args.data)
.then(function (res) {
var preview = topmost().getViewById('testImagePickResult');
var picture = res;
var matrix = new android.graphics.Matrix();
matrix.postRotate(180);
var imagemfinal = android.graphics.Bitmap.createBitmap(picture.android, 0, 0, picture.android.getWidth(), picture.android.getHeight(), matrix, true);
preview.src = imagemfinal;
var novonomedafoto = new Date().getTime();
});
imagemsource = page.getViewById("testImagePickResult").imageSource;
const folderDest = fileSystemModule.knownFolders.currentApp();
const pathDest = fileSystemModule.path.join(folderDest.path, "photos/" + novonomedafoto + ".jpg");
const saved = imagemsource.saveToFile(pathDest, "jpg");
if (saved) {
console.log("Image saved successfully!");
}
});
exports.onNavigatingTo = onNavigatingTo;
The plugin do not write the file with the width & height you proposed but instead it just returns the resized image asset (data) that holds the Bitmap with your width & height spec.
data.getImageAsync((bitmap, error) => {
// Use `bitmap` (android.graphics.Bitmap)
});

Flickering when using Scrollify

I seem to be encountering issues when attempting to scroll between a regular scrollify panel and interstitialSection. I need to add the elements within the interstitialSection to the standardScrollElements as they need to be scrollable.
When you scroll quickly on a desktop there is flickering and when using a mobile it exhibits other issues like not enabling scrollify on scrolling. When you clear the 'StandardScrollElements' it stops the flickering but doesn't allow scrolling of the content on the slide mainly on mobile.
$.scrollify({
section: ".slide",
scrollbars: true,
easing: "easeOutExpo",
scrollSpeed: 800,
updateHash: false,
standardScrollElements: ".footer-content,.news",
interstitialSection: ".slide-content,.clients,footer",
before: function () {
},
after: function (i) {
$.scrollify.current().find("[data-animated]").each(function () {
var animClass = $(this).attr("data-animated");
$(this).addClass("animated");
$(this).addClass(animClass);
});
},
afterRender: function () {
$.scrollify.current().find("[data-animated]").each(function () {
var animClass = $(this).attr("data-animated");
$(this).addClass("animated");
$(this).addClass(animClass);
});
}
});

Kendo window disable maximize on double-click

Plunkr: http://plnkr.co/edit/LoMmQ3y4snPrELJz9ZSq?p=preview
Can anyone help me on how to disable maximization of the window by double-clicking on its title? I tried to disable the dblclick event with the following code, but it doesn't seem to work.
$(document).on('dblclick','.k-window-titlebar',function(e){
e.preventDefault();
console.log('dblclick');
return false;
});
// Window definition
var win = $("#win1").kendoWindow({
width: "300px",
height: "100px",
title: "Window 1",
actions: [],
**resizable: false**
}).data("kendoWindow");
resizable: false - Will prevent from maximizing the window.
This is not a nice solution but might work, try toggling back to the previous size:
// Window definition
var win = $("#win1").kendoWindow({
width: "300px",
height: "100px",
title: "Window 1",
actions: []
}).data("kendoWindow");
$(document).on('dblclick','.k-window-titlebar',function(e){
// Restore old size
win.toggleMaximization();
});
The following code worked for me:
// Window definition
var win = $("#win1").kendoWindow({
width: "300px",
height: "100px",
title: "Window 1",
actions: []
}).data("kendoWindow");
win.wrapper.children('.k-window-titlebar:first-child')
.dblclick(function (e) {
e.preventDefault();
return false;
});
Try this: http://plnkr.co/edit/kAhw2A?p=preview

Resources