My Material has a envMap. I call Material.toJSON() to save it to localStorage.
There is an error reported ,saying
Texture.js:124 Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(HTMLImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap)'.
I debugged it, found the image is an array which is not the correct type.
Here is my question,how can I save my material with an envMap property correctly?
[Update]: I've posted this as an issue which you can reference here.
I just ran into this problem as well. I fixed it by modifying the THREE.js source as follows.
In the getDataURL function inside of toJSON, there is a section that assigns meta.images[ img ] paths to the data URLs of your envMap.
Here's my fix [starts at line 22134, rev 79]:
if ( meta.images[ image.uuid ] === undefined ) {
/* ADD THIS PART */
if (image instanceof Array && image.length > 1) {
meta.images[ image.uuid ] = {
uuid: image.uuid,
url: image.map((val) => { getDataURL(val) })
};
} else {
meta.images[ image.uuid ] = {
uuid: image.uuid,
url: getDataURL( image )
};
}
}
Related
I am attempting to use a global beforeeach() algorithm defined in support/e2e to filter tests. This code works.
beforeEach(function () {
var testSuite = new Array();
testSuite = (Cypress.env('suites'));
if (!testSuite) {
return;
}
const testName = Cypress.mocha.getRunner().test.fullTitle().toLowerCase();
let matches = testSuite.some((value) => {
return (testName.includes(value))
});
if (!matches) {
this.skip();
}
return;
})
However, when using in conjunction with cypress-failed-log, tests that are skipped because of the prior algorithm are failing with this error:
TypeError: Cannot read properties of undefined (reading 'message')
Because this error occurred during a `after each` hook we are skipping all of the remaining tests.
at Context.onFailed (webpack:///./node_modules/cypress-failed-log/src/index.js:136:0)
This is what my plug in looks like. It works independent of the sorting algorithm and fails with the same message even if I only leave just the failed:required line and remove the code that uses the message object.
on('task', {
failed: require('cypress-failed-log/src/failed')()
,
log(message) {
console.log(message)
return null
},
table(message) {
console.table(message)
return null
}
})
Goal
Hello, I wish to gather custom property values for a window object of a page using cy.window().
Issue
When using cy.log() jointly with JSON.stringify(), it presents that it does have properties with values; however, when using lodash _.has(), does not have these properties and thereby no value because these properties are not found.
Code
The following Cypress custom command using cy.window() gathers custom window's property
export function cmdCypressWindow($propName: string) {
cy.window()
.its($propName)
.then(($propValue: Cypress.AUTWindow) => {
cy.log('props names:', JSON.stringify(Object.getOwnPropertyNames($propValue), null, 2));
cy.log('props values:', JSON.stringify($propValue, null, 2));
cy.log('VERSION prop:', _.has($propValue, 'VERSION'));
cy.log('HOST prop:', _.has($propValue, 'HOST'));
cy.log('VERSION value:', _.get($propValue, 'VERSION'));
cy.log('HOST value:', _.get($propValue, 'HOST'));
});
}
Passed in for parameter $propName value 'ACT', because I am expecting the page's window object to contain window.ACT["VERSION"].
Using the example code, the log output shows that the page's window does contain property ACT["VERSION"].
However, when accessing this window object, listed properties are unavailable and undefined:
window
- its .ACT
log props names:, [ "__esModule", "VERSION", "HOST", "RulesList", "RulesAddEdit", "AppsList", "AppsOAuth", "AppsAdd" ]
log props values:, { "VERSION": "0.2.11", "HOST": "radmin" }
log VERSION prop:, false
log HOST prop:, false
log VERSION value:
log HOST value:
How do I resolve this? Thank you, all feedback is very much appreciated.
Found part of the solution here:
TypeScript: Find Key / Value in Object (list comprehension?)
Modified the function:
export function cmdCypressWindow($propName: string) {
cy.window()
.its($propName)
.then(($propValue: Cypress.AUTWindow) => {
const actValues: Record<string, string> = {};
Object.keys($propValue).forEach(key => {
// #ts-ignore
if (typeof $propValue[key] !== 'function') {
// #ts-ignore
actValues[key as string] = $propValue[key];
}
});
cy.log(`window.${$propName}`, JSON.stringify(actValues, null, 2));
cy.wrap(actValues);
});
}
Results show that I was able to acquire values from window object:
log props names:, [ "__esModule", "VERSION", "HOST", "RulesList", "RulesAddEdit", "AppsList", "AppsOAuth", "AppsAdd" ]
log window.ACT, { "VERSION": "0.2.11", "HOST": "radmin" }
wrap {version: 0.2.11, host: radmin}
Using the Simple Upload Adapter, according to the CKEditor 5 documentation upon a successful image upload, the server should return either:
This for a single image:
{
default: 'http://example.com/images/image–default-size.png'
}
Or this for multiple (i.e. for the srcset attribute)
{
default: 'http://example.com/images/image–default-size.png',
'160': 'http://example.com/images/image–size-160.image.png',
'500': 'http://example.com/images/image–size-500.image.png',
'1000': 'http://example.com/images/image–size-1000.image.png',
'1052': 'http://example.com/images/image–default-size.png'
}
For starters the documentation is incorrect as per this SO post, so I'm not surprised this doesn't work. But does anyone know what response format CKEditor 5 is expecting for it to correctly insert/build the srcset attribute? It does take the default key but seems to ignore the others!
Inside of the _initListeners function of the upload adapter you will find that the Promise only resolves with the following:
resolve( {
default: response.url
} );
The solution - change the Promise to resolve the following:
resolve( response.urls );
Note, in this example the response object may have either keys url or urls.
I ended up using the following as I ignore null keys in my server responses.
if ( response.hasOwnProperty( 'url' ) ) {
resolve( {
default: response.url
} );
} else if ( response.hasOwnProperty( 'urls' ) ) {
resolve( response.urls );
}
As a sidenote, if you've read through the other SO post I referred to, I would also recommend removing this (see commented section):
if ( !response /** || !response.uploaded */ ) {
return reject( response && response.error && response.error.message ? response.error.message : genericError );
}
I'm not a fan of using arbitrary flags in response, if the upload failed then I would rather see a HTTP status code indicating it, I can't see any reason why we need to return 200 and { "uploaded" : false }
I use FilePond to show previously uploaded images with the load functionality. The files are visible, however I don't get a preview (which I get when uploading a file).
Should it be possible to show previews for files through load?
files: [{
source: " . $profile->profileImage->id . ",
options: {
type: 'local',
}
}],
First you have to install and register File Poster and File Preview plugins and here is the example of how to register it in your code:
import * as FilePond from 'filepond';
import FilePondPluginImagePreview from 'filepond-plugin-image-preview';
import FilePondPluginFilePoster from 'filepond-plugin-file-poster';
FilePond.registerPlugin(
FilePondPluginImagePreview,
FilePondPluginFilePoster,
);
then You have to set the server.load property to your server endpoint and add a metadata property to your files object which is the link to your image on the server:
const pond = FilePond.create(document.querySelector('file'));
pond.server = {
url: '127.0.0.1:3000/',
process: 'upload-file',
revert: null,
// this is the property you should set in order to render your file using Poster plugin
load: 'get-file/',
restore: null,
fetch: null
};
pond.files = [
{
source: iconId,
options: {
type: 'local',
metadata: {
poster: '127.0.0.1:3000/images/test.jpeg'
}
}
}
];
the source property is the variable you want to send to your end point which in my case I wanted to send to /get-file/{imageDbId}.
In this case it does not matter what your endpoint in the load property returns but my guess is, we have to return a file object.
I can't figure out why Jasmine is claiming that the function I'm spying on isn't being called, especially since it is logging in buildLinksObj when called through and not calling when I remove .and.callThrough() I feel like I've written similar code a bunch of times before without any problem. I'm using Jasmine 2.9
The error message I'm getting is:
1) addToLinks should call buildLinksObj if its given an object with children
it should add the personalized links to PageApp.meta.analytics.links
Expected spy buildLinksObj to have been called.
at UserContext.<anonymous> (http://localhost:9877webpack:///tests/specs/common/FetchPersonalContent.spec.js:854:0 <- tests/app-mcom.js:104553:48)
Here's the except of my code:
FetchPersonalContent.js
const buildLinksObj = (responseObj = {}, targetObj, PageApp) => {
console.log('it logs in buildLinksObj') // This is logging!
}
const addToLinks = (responseArr, personalizedLinks) => {
responseArr.forEach((media) => {
const type = media.type;
const typeObj = media[type];
buildLinksObj(typeObj, personalizedLinks, PageApp);
if (typeObj && typeObj.children) {
console.log('has children!')
console.log('typeObj.children is: ', typeObj.children);
typeObj.children.forEach((child) => {
console.log('has a child')
buildLinksObj(child, personalizedLinks, PageApp);
console.log('buildLinksObj was definitely called. what the heck?')
});
}
});
}
export {buildLinksObj, addToLinks, FetchPersonalContent as default,
};
FetchPersonalContent.spec.js
import * as FetchPersonalContent from '../../../src/FetchPersonalContent'; // my path is definitely correct
describe('it should add the personalized links to PageApp.meta.analytics.links', () => {
it('addToLinks should call buildLinksObj if its given an object with children ', () => {
spyOn(FetchPersonalContent, 'buildLinksObj').and.callThrough();
FetchPersonalContent.addToLinks([{
"personalId": 30718,
"type": "carousel",
"carousel": {}
}], {});
expect(FetchPersonalContent.buildLinksObj).toHaveBeenCalled();
});
});
I'd really appreciate any help!
I have a feeling FetchPersonalContent.buildLinksObj in the spec file is not pointing to the same instance as buildLinksObj in the FetchPersonalContent.js file.
Why is export {FetchPersonalContent as default} required? I am assuming you have shared the complete content of FetchPersonalContent.js in your question.
Possible solutions:
You can try removing FetchPersonalContent from the export statement.
Or
Instead of
export {buildLinksObj, addToLinks, FetchPersonalContent as default,
};
You can directly export the constants in FetchPersonalContent.js file.