I want to highlight sentence on mouse hover on each word of that sentence in pdf document, i tried some way but i couldn't achieve this goal.
Is there any way to do this with pdftron?
I want to complete this event handler:
WebViewer({
path: '/assets/plugins/pdftron',
initialDoc: '/practical.pdf',
fullAPI: true,
disableLogs: true
}, document.getElementById('pdf'))
.then((instance) => {
const { PDFNet, docViewer } = instance;
const Tools = instance.Tools;
docViewer.on('mouseMove', (e) => {
console.log(e);
});
});
You may be able to use text extractor to get the text from the page and then iterate over it to find which part corresponds to the position of the mouse https://www.pdftron.com/documentation/web/guides/extraction/text-extract/#advanced-text-extraction-from-a-page-region
You'll probably need to convert the mouse coordinates to window coordinates https://www.pdftron.com/documentation/web/guides/coordinates/#converting-between-mouse-locations-and-window-coordinates, window coordinates to page coordinates https://www.pdftron.com/documentation/web/guides/coordinates/#converting-between-window-and-viewer-page-coordinates and finally page coordinates to PDF page coordinates https://www.pdftron.com/documentation/web/guides/coordinates/#converting-between-pdf-and-viewer-coordinates to compare with the values from text extractor
Related
In Wix, I have a text field in a repeater that is used for navigating to other dynamic pages. The link works, but there are two problems with that. First, I have to click two times, not double click, for functioning the link. Second, I want to make the text field act as a button link, I mean be able to right click on that and choose 'open in new tab'. How can I fix these problems in my code?
Here is the code
// Navigating to related dynaic page
import wixLocation from 'wix-location';
export function ndText_click(event) {
$w("#repeater1").onItemReady(($item, itemData, index) => {
$item("#nText").onClick((event) => {
let postTypeValue = itemData.pType
wixData.query("Collection1").eq("_id", itemData._id)
.find()
.then(results => {
let item = results.items[0];
let pIDValue = item.postId;
if (postTypeValue == "R") {
wixLocation.to('/re/' + postIDValue);
} else if (postTypeValue == "L") {
wixLocation.to('/lo/' + postIDValue);
}
})
});
})
}
I suggest trying to use a button instead of the text element. You can usually style the button so it looks the same as the text element you already have. Then instead of setting the onClick, try setting the button's link and target properties.
Is there any way we can position the borderless window in the file neutralino.config.json?
like : "borderless": { ...args }
or any other ways?
Now it just starts at somewhere random and cannot be moved
You can call Neutralino.window.move(x,y) in your javascript. (0,0) is the (leftmost,top) of the screen. You can find other window functions at https://neutralino.js.org/docs/api/window.
As an extension of your question, and like Klauss A's instinct suggests, you can call Neutralino.window.setDraggableRegion('id-of-element') where id-of-element is, as the name suggests, an id of an element in your html. Then, when you click and drag that element, Neutralino will automatically call Neutralino.window.move(x,y). setDraggableRegion() is not in the docs, but you can see it in the tutorial they made on YouTube, and it is still in the code.
The thing is, how Neutralino does this is by posting a message to the server, which adds quite a bit of delay, causing the drag to stutter. Here is the relevant code snippet in a prettified version of the neutralino.js file:
...
t.move = function(e, t) {
return r.request({
url: "window.move",
type: r.RequestType.POST,
isNativeMethod: !0,
data: {
x: e,
y: t
}
})
}, t.setDraggableRegion = function(e) {
return new Promise(((t, i) => {
let r = document.getElementById(e),
o = 0,
u = 0;
function s(e) {
return n(this, void 0, void 0, (function*() {
yield Neutralino.window.move(e.screenX - o, e.screenY - u)
}))
}
r || i(`Unable to find dom element: #${e}`), r.addEventListener("mousedown", (e => {
o = e.clientX, u = e.clientY, r.addEventListener("mousemove", s)
})), r.addEventListener("mouseup", (() => {
r.removeEventListener("mousemove", s)
})), t()
}))
}
...
I suspected this formulation of adding to the lag, since function* is a generator, and thus is inherently untrustworthy (citation needed). I re-wrote it in plain javascript, and reduced some of the lag. It still stutters, just not as much.
var dragging = false, posX, posY;
var draggableElement = document.getElementById('id-of-element');
draggableElement.onmousedown = function (e) {
posX = e.pageX, posY = e.pageY;
dragging = true;
}
draggableElement.onmouseup = function (e) {
dragging = false;
}
document.onmousemove = function (e) {
if (dragging) Neutralino.window.move(e.screenX - posX, e.screenY - posY);
}
I hope this helps. I was digging around in all this because the caption bar (aka, title bar) of the window is different from my system's color theme. I thought, "maybe I'll create my own title bar in HTML, with CSS styling to match my app." But due to the stuttering issues, I find it is better to have a natively-draggable title bar that doesn't match anything. I'm still digging around in the Neutralino C++ code to see if I could modify it and add a non-client rendering message handler (on Windows), to color the title bar the same as my app and still have nice smooth dragging. That way it would look "borderless" but still be movable.
I am having the same problem. My naive instinct is telling me that probably could be a way to create a custom element bar and use a function upon click& drag to move the window around.
Moving Windows in Neutralino is Quite Simple.
You can use the Neutralino.window API to move the windows.
Example:
Neutralino.window.move(x, y);
here x and y are the Coordinates on which our window will move to.
Note the this moves the window from the Top Left Corner of the window.
I have made this Neutralino Template - NeutralinoJS App With Custom Titlebar which might be useful if you are making a custom titlebar for your application.
I have a grid on this page. The last column is off screen to the right. I want to read the header cell text.
I saw this snippet at
https://pptr.dev/#?product=Puppeteer&version=v5.1.0&show=api-class-mouse
So I ran the code below in cucumber/puppeteer. There were no errors but nothing happened in the browser. So how do I scroll to the right using this feature or any other way.
I can't use querySelector... to get the header because the selectors don't exist until the column is visible. Please advise.
async function scrollRight() {
await this.page.mouse.wheel({ deltaX: 2500 })
}
Your scrollRight() function should have a part where the mouse hovers over the right column. In the linked example there is a page.mouse.move(x,y) which should be applied in your case as well.
To get the X Y coordinates of your column you can use elementHandle.boundingBox puppeteer function. With a simple formula you can position the cursor exactly to the center of the column.
E.g.:
async function scrollRight() {
const elem = await page.$('.last-column');
const boundingBox = await elem.boundingBox();
await page.mouse.move(
boundingBox.x + boundingBox.width / 2, // x
boundingBox.y + boundingBox.height / 2 // y
);
await page.mouse.wheel({ deltaX: 2500 });
}
To check visibility of the column you can use page.waitForSelector's visible: true option, which waits for the element to be visible, i.e. to not have display: none or visibility: hidden CSS properties. It defaults to false, so if it caused problems in your use case that it was not visible it may help.
await page.waitForSelector('.last-column', {
visible: true,
});
Every next search query starts with previous page height and index count.
What can I do to update the index count in cellRenderer and the height of the page on a new search query?
Next code help to avoid errors, but doesn't solve the problem:
cellRenderer = ({index, key, parent, style}) => {
const image = this.props.images.items[index];
if (!image) {
console.log('!image (empty image with index: ', index, 'style', style);
return;
}
Code: pastebin.com/FB7kzDb4
tl;dr You can fix your demo by doing the following:
// Clear any JIT measurements
cellMeasurerCache.clearAll();
// Reset the position cache
cellPositioner.reset({
columnCount: this.columnCount,
columnWidth: this.columnWidth,
spacer: this.spacer,
});
// Let Masonry know it needs to relayout
this.masonry.clearCellPositions();
Here is an example of me doing the same on the RV demo page. You can see it running here by clicking the "Reset List" button.
My question is similar to this one, but my chart has different colour for each series. What I want to achieve is to "highlight" a series to a certain colour (say, #0000FF) on mouseOver, and then revert back to its original colour at mouseOut. The solution provided in that question does not work here since the series have different colours to start with. An example of my situation is given here, where the solution suggested for the other question is to modify series event:
plotOptions: {
series: {
events: {
mouseOver: function() {
this.graph.attr('stroke', '#0000FF');
$report.html('Moused over: ' + this.name)
.css('color', 'green');
},
mouseOut: function() {
this.graph.attr('stroke', '#C0C0C0');
$report.html('Moused out')
.css('color', 'red');
}
}
}
},
Any help is appreciated.
When returning back to original color use this.color, see: http://jsfiddle.net/3bQne/275/