console logging nativeFontFaces in pdfDocument returns undefined - pdf

Currently creating a project with pdf viewing using pdfjs library.
Version Used: "pdfjs-dist": "2.2.228".
I had pdfs with "corrupted" fonts and not loading text on pdf.
I wanted to catch when font has problems but had the following problem where I cannot access the object that indicated font error.
const loadingTask = getDocument({
cMapPacked: true,
cMapUrl: `${window['srcUrl']}assets/cmaps/`,
url,
});
loadingTask.promise.then(pdfDocument => {
pdfDocument.getData().then((data) => {
this.pdfBlob = new Blob([data], { type: 'application/pdf' });
this.pdfBlobUrl = window.URL.createObjectURL(this.pdfBlob);
this.emit('file-blob-created', this.pdfBlob, this.pdfBlobUrl);
});
this.pdfDocument = pdfDocument;
this.pdfViewer.setDocument(pdfDocument);
console.log("log1", this.pdfDocument._transport.fontLoader);
console.log("log2", this.pdfDocument._transport.fontLoader.nativeFontFaces);
console.log("log3", this.pdfDocument._transport.fontLoader.nativeFontFaces[0]);
console.log("ERROR FONT: ", this.pdfDocument._transport.fontLoader.nativeFontFaces.some(i => i.status === "error"))
log1 returns the following
GenericFontLoader {docId: 'd0', nativeFontFaces: Array(0), styleElement: null, loadingContext: {…}, _onUnsupportedFeature: ƒ, …}
docId: "d0"
isFontLoadingAPISupported: true
loadTestFontId: 0
loadingContext: {requests: Array(0), nextRequestId: 0}
nativeFontFaces: Array(3)
0: FontFace
ascentOverride: "normal"
descentOverride: "normal"
display: "auto"
family: "g_d0_f1"
featureSettings: "normal"
lineGapOverride: "normal"
loaded: (...)
sizeAdjust: "100%"
status: "error"
stretch: "normal"
style: "normal"
unicodeRange: "U+0-10FFFF"
variant: "normal"
weight: "normal"
[[Prototype]]: FontFace
1: FontFace {family: 'g_d0_f2', style: 'normal', weight: 'normal', stretch: 'normal', unicodeRange: 'U+0-10FFFF', …}
2: FontFace {family: 'g_d0_f3', style: 'normal', weight: 'normal', stretch: 'normal', unicodeRange: 'U+0-10FFFF', …}
length: 3
[[Prototype]]: Array(0)
styleElement: null
_onUnsupportedFeature: ƒ ()
isSyncFontLoadingSupported: (...)
_loadTestFont: (...)
[[Prototype]]: BaseFontLoader
However log2 returns [] and log3 returns undefined.
Why does this happen?
I want to be able to access status in FontFaces to show alert when status is error (status: "error").

Related

Adding data to line chart (chart.js with Vue.js) results in 'too much recursion' error

I'm using chart.js with vue.js. I have a line-chart and I want to add data (later automatically by SSE). I modified another sample, but the error remains the same. It 'crashes' in the call to this.moonData.push (or this.testData.datasets[0].data.push). It must have to do with the ref() of moonData. When I use just the non-ref version, the push succeeds, but the chart isn't updated. BTW, pushing labels succeeds
I'm using chart.js#3.7.0, vue#3.2.29
In Firefox:
Uncaught InternalError: too much recursion
get reactivity.esm-bundler.js:406
toRaw reactivity.esm-bundler.js:927
key reactivity.esm-bundler.js:398
value helpers.segment.js:1554
key reactivity.esm-bundler.js:398
value helpers.segment.js:1554
key reactivity.esm-bundler.js:398
value helpers.segment.js:1554
in chrome:
runtime-core.esm-bundler.js?5c40:218 Uncaught RangeError: Maximum call stack size exceeded
at Object.get (reactivity.esm-bundler.js?a1e9:406:1)
at toRaw (reactivity.esm-bundler.js?a1e9:927:1)
at Proxy.instrumentations.<computed> (reactivity.esm-bundler.js?a1e9:398:1)
at Proxy.value (helpers.segment.js?dd3d:1554:1)
at Proxy.instrumentations.<computed> (reactivity.esm-bundler.js?a1e9:398:1)
at Proxy.value (helpers.segment.js?dd3d:1554:1)
at Proxy.instrumentations.<computed> (reactivity.esm-bundler.js?a1e9:398:1)
at Proxy.value (helpers.segment.js?dd3d:1554:1)
at Proxy.instrumentations.<computed> (reactivity.esm-bundler.js?a1e9:398:1)
at Proxy.value (helpers.segment.js?dd3d:1554:1)
export default defineComponent({
// name: "PlanetChart",
setup() {
let moonData = ref<number[]>([]);
const testData = computed<ChartData<"line">>(() => ({
labels: ["Mercury", "Venus", "Earth", "Mars", "Jupiter", "Saturn", "Uranus", "Neptune"],
datasets: [
{
label: "Number of Moons",
data: moonData.value,
backgroundColor: "rgba(54,73,93,.5)",
borderColor: "#36495d",
borderWidth: 3,
},
{
label: "Planetary Mass (relative to the Sun x 10^-6)",
data: [0.166, 2.081, 3.003, 0.323, 954.792, 285.886, 43.662, 51.514],
backgroundColor: "rgba(71, 183,132,.5)",
borderColor: "#47b784",
borderWidth: 3,
},
],
}));
const options = ref<ChartOptions<"line">>({
elements: {
line: {
tension: 0,
fill: false,
},
},
scales: {
yAxes: {
ticks: {
padding: 25,
stepSize: 50,
},
},
},
});
return {
testData,
options,
moonData,
};
},
mounted() {
const ctx = document.getElementById("my-planet-chart") as HTMLCanvasElement;
console.log("Found context: ", ctx);
let c = new Chart(ctx, {
type: "line",
data: this.testData,
options: this.options,
});
console.log("Created chart: ", c);
},
methods: {
AddData() {
console.log("Appending data...");
this.moonData.push(Math.round(Math.random() * 1000));
console.log("moonData: ", this.moonData.length);
// this.testData.datasets[0].data.push(Math.round(Math.random() * 1000));
console.log("moonData: ", this.testData.datasets[0].data);
},
},
});
Any ideas?
I had exactly the same problem yesterday. Got it working using a shallowRef instead of a ref.

PhantomJS doesn't run .create()

Hardware - Macbook Pro 2019 - Catalina 10.15.5
using Visual Studio Code
In my project we have the following issue;
On a Linux machine it is working, on a Windows machine it is working, on my machine is NOT working.
The code that is not working is this one.
phantom.create().then(function (ph) {
ph.createPage().then(function (page) {
page.property('paperSize', {
format: 'A4',
orientation: 'portrait',
margin: '0'
}).then(function () {
it is crashing on the phantom.create() function.
I tried to do variations, to see the objects getting built, like,
ph = phantom.create();
console.log('after the phantom create ');
console.log(ph);
console.log('this is the ph **');
(async function (ph) {
page = ph.createPage().then(
function (page) {
page.property('paperSize', {
format: 'A4',
orientation: 'portrait',
margin: '0'
Still crashing.
Using wait and async
(async function() {
ph = await phantom.create();
page = await instance.createPage();
ph.createPage().then(function (page) {
page = page;
page.property('paperSize', {
format: 'A4',
orientation: 'portrait',
margin: '0'
}).
In terminal when I do:
Node > require('phantom').create()
I get the following
> require('phantom').create()
Promise {
Phantom {
logger:
{ info: [Function],
debug: [Function],
error: [Function],
warn: [Function] },
process:
ChildProcess {
domain: [Domain],
_events: [Object],
_eventsCount: 2,
_maxListeners: undefined,
_closesNeeded: 3,
_closesGot: 0,
connected: false,
signalCode: null,
exitCode: null,
killed: false,
spawnfile: '/usr/local/lib/node_modules/phantomjs/lib/phantom/bin/phantomjs',
_handle: [Process],
spawnargs: [Array],
pid: 14804,
stdin: [Socket],
stdout: [Socket],
stderr: [Socket],
stdio: [Array] },
commands: Map {},
events: Map {},
heartBeatId:
Timeout {
_called: false,
_idleTimeout: 100,
_idlePrev: [TimersList],
_idleNext: [TimersList],
_idleStart: 3640,
_onTimeout: [Function: bound heartBeat],
_timerArgs: undefined,
_repeat: 100,
_destroyed: false,
domain: [Domain],
[Symbol(asyncId)]: 40,
[Symbol(triggerAsyncId)]: 6 } },
domain:
Domain {
domain: null,
_events:
{ removeListener: [Function: updateExceptionCapture],
newListener: [Function: updateExceptionCapture],
error: [Function: debugDomainError] },
_eventsCount: 3,
_maxListeners: undefined,
members: [] } }
When I use the debugger it's crashing on line
ph = phantom.create();
and resume debugger and then pause it's stuck on async_hooks.js - line const fn = function(asyncId) giving an enless loop until I get a timeout.
function emitHookFactory(symbol, name) {
// Called from native. The asyncId stack handling is taken care of there
// before this is called.
// eslint-disable-next-line func-style
const fn = function(asyncId) {
active_hooks.call_depth += 1;
// Use a single try/catch for all hook to avoid setting up one per
// iteration.
try {
for (var i = 0; i < active_hooks.array.length; i++) {
if (typeof active_hooks.array[i][symbol] === 'function') {
active_hooks.array[i][symbol](asyncId);
}
}
I also tried changing the launch.json and adding
"skipFiles": [
"inspector_async_hook.js",
"async_hooks.js",
"node_internals/**/*.js"
],
Still stucks on async_hooks.js though.
Any ideas what might be the reason?
Should I change to a Windows machine?
I'm installing a VM in the meantime.

dojox CheckedMultiSelect get checked value returns undefine

Please see below for the example. Console logs an array with "undefined" objects when checking the items from the dropdown. What is the correct way to get an array of checked items?
http://jsfiddle.net/4L3sksmt/4/
require(['dojox/form/CheckedMultiSelect'],function(CheckedMultiSelect){
var groupCheckedMultiSelect = new CheckedMultiSelect ({
id: "groupChkMultiSelect",
dropDown: true,
multiple: true,
label: "Group",
onChange: function(evt){
console.log(evt);//output = undefined
}
}, 'GroupDiv');
groupCheckedMultiSelect.addOption({'label':'One'});
groupCheckedMultiSelect.addOption({'label':'Two'});
groupCheckedMultiSelect.addOption({'label':'Three'});
groupCheckedMultiSelect.addOption({'label':'Four'});
groupCheckedMultiSelect.addOption({'label':'Five'});
groupCheckedMultiSelect.startup();
});
The undefined values are returned because you are not setting the value for the options. The correct format for options are { label : 'One', value: 1 }. Below code should be working now.
require(['dojox/form/CheckedMultiSelect'],function(CheckedMultiSelect){
var groupCheckedMultiSelect = new CheckedMultiSelect ({
id: "groupChkMultiSelect",
dropDown: true,
multiple: true,
label: "Group",
onChange: function(evt){
console.log(evt);//output = undefined
}
}, 'GroupDiv');
groupCheckedMultiSelect.addOption({'label':'One', value: 1});
groupCheckedMultiSelect.addOption({'label':'Two', value: 2});
groupCheckedMultiSelect.addOption({'label':'Three', value: 3});
groupCheckedMultiSelect.addOption({'label':'Four', value: 4});
groupCheckedMultiSelect.addOption({'label':'Five', value: 5});
groupCheckedMultiSelect.startup();
});

Using createDelegate in extjs

Here is my first try to pass user defined arguments to a handler function in extjs(4.0.1) in IE9. I have the below code, but it throws up an error stating that SCRIPT438: Object doesn't support property or method 'createDelegate'. I'm not sure what I'm doing wrong. Please help.
Js file:
Ext.onReady(function() {
var appendBooleanOrInsertionIndex = 0;
var myButtonHandler = function(item,a, b, arg){
alert(a + " "+ b);
};
var myButton = new Ext.Button({
id : 'myButton',
//renderTo : 'mybutton',
text : 'Save',
handler : myButtonHandler.createDelegate(this, ['Hi', 'Kart'], appendBooleanOrInsertionIndex),
scope : this
});
});
Ext stopped adding logic to native class prototypes in Ext 4. Use Ext.Function.bind or Ext.Function.pass.
the corrected code is as below:
Ext.onReady(function() {
var myButtonHandler = function(a, b){//alert("-->");
alert(a + " "+ b);
};
Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
width: 800,
height: 300,
layout: 'column',
title: 'Container Panel',
//html: 'parent panel',
items: [
{
xtype: 'button',
id: 'mbutton',
text : 'My Button',
handler : Ext.Function.pass(myButtonHandler, ['Hi', 'Kart!!!!'])
}
]
});
});

Adding CSV upload browse button to Ext.Action

I am trying to create a CSV File upload on GeoExt Map App.
I need to place the upload function within the Ext.Action, so that I can add it to the toolbar of the GeoExt Panel. I am trying to implement this example. Here is my code,
action = new Ext.Action({
text: "Upload Excel",
control: Ext.create('Ext.form.Panel', {
title: 'Upload a CSV File',
width: 400,
bodyPadding: 10,
frame: true,
renderTo: Ext.getBody(),
items: [{
xtype: 'filefield',
name: 'csv',
fieldLabel: 'CSV Upload',
labelWidth: 50,
msgTarget: 'side',
allowBlank: false,
buttonText: 'Select CSV File'
}],
buttons: [{
text: 'Upload',
handler: function () {
var form = this.up('form')
.getForm();
if (form.isValid()) {
form.submit({
url: 'file-upload.py',
waitMsg: 'Uploading the CSV File...',
success: function (fp, o) {
Ext.Msg.alert('Success', 'Your csv file "' + o.result.file + '" has been uploaded.');
}
});
}
}
}]
}),
map: map,
// button options
tooltip: "Upload CSV File",
// check item options
group: "newTool"
});
actions["upCSV"] = action;
toolbarItems.push(new Ext.button.Button(action));
Firebug keeps giving me this error,
TypeError: b[d.xtype || e] is not a constructor
Am I declaring the function incorrectly within the Ext.Action?
You can't directly push the action into a toolbar since an Ext.Action is not a type of Ext.Component. An Ext.Action is basically a means of creating an abstraction layer which can be reused multiple times. Here you need to do the following:
toolbarItems.push(new Ext.button.Button(action));
From the documentation:
Actions let you share handlers, configuration options and UI updates
across any components that support the Action interface (primarily
Ext.toolbar.Toolbar, Ext.button.Button and Ext.menu.Menu components)