Fetching of Style.pattern images #2135

ftoromanoff · 2023-07-10T09:30:54Z

Modification of style.pattern image fetching:

Based on the icon image fetching, we propose a similar approch for the style.pattern image fetching
This allow Style constructor to be cleaner.

src/Core/Style.js

src/Converter/Feature2Texture.js

src/Core/Label.js

jailln · 2023-10-16T08:24:01Z

src/Core/Label.js

-                style.applyToHTML(this.content, sprites);
+                style.applyToHTML(this.content)
+                    .then(() => {
+                        this.icon = this.content.getElementsByClassName('itowns-icon')[0];


I might be wrong but from my understanding we are not sure the icon element has been created in the dom when applyToHTML is resolved (because the domelement is created in a callback called when the icon is loaded. We might need to use another await in applyToHTML or return a promise that resolves with the domElement icon instead, WDYT?

What if i add a new event 'loaded' that will be send when the icon is loaded ?
and then catch the event in Label.js

style.applyToHTML(this.content) .then((icon) => { if (icon) { icon.addEventListener('loaded', () => { this.icon = this.content.getElementsByClassName('itowns-icon')[0]; }); } });

See last commit f145fb6

I think, I did find a way to do what you propose: see 502ad62.
What do you think @jailln ?

That's the idea but I think there is a simpler implementation (sorry I paste all the function but I think it's easier to understand this way). I've quickly tested it and it seems to work, can you test also + WDYT ?

async applyToHTML(domElement) { if (arguments.length > 1) { console.warn('Deprecated argument sprites. Sprites must be configured in style.'); } domElement.style.padding = `${this.text.padding}px`; domElement.style.maxWidth = `${this.text.wrap}em`; domElement.style.color = this.text.color; if (this.text.size > 0) { domElement.style.fontSize = `${this.text.size}px`; } domElement.style.fontFamily = this.text.font.join(','); domElement.style.textTransform = this.text.transform; domElement.style.letterSpacing = `${this.text.spacing}em`; domElement.style.textAlign = this.text.justify; domElement.style['white-space'] = 'pre-line'; if (this.text.haloWidth > 0) { domElement.style.setProperty('--text_stroke_display', 'block'); domElement.style.setProperty('--text_stroke_width', `${this.text.haloWidth}px`); domElement.style.setProperty('--text_stroke_color', this.text.haloColor); domElement.setAttribute('data-before', domElement.textContent); } if (!this.icon.source) { return; } const icon = document.createElement('img'); const addIcon = () => { const cIcon = icon.cloneNode(); cIcon.setAttribute('class', 'itowns-icon'); cIcon.width = icon.width * this.icon.size; cIcon.height = icon.height * this.icon.size; cIcon.style.color = this.icon.color; cIcon.style.opacity = this.icon.opacity; cIcon.style.position = 'absolute'; cIcon.style.top = '0'; cIcon.style.left = '0'; switch (this.icon.anchor) { // center by default case 'left': cIcon.style.top = `${-0.5 * cIcon.height}px`; break; case 'right': cIcon.style.top = `${-0.5 * cIcon.height}px`; cIcon.style.left = `${-cIcon.width}px`; break; case 'top': cIcon.style.left = `${-0.5 * cIcon.width}px`; break; case 'bottom': cIcon.style.top = `${-cIcon.height}px`; cIcon.style.left = `${-0.5 * cIcon.width}px`; break; case 'bottom-left': cIcon.style.top = `${-cIcon.height}px`; break; case 'bottom-right': cIcon.style.top = `${-cIcon.height}px`; cIcon.style.left = `${-cIcon.width}px`; break; case 'top-left': break; case 'top-right': cIcon.style.left = `${-cIcon.width}px`; break; case 'center': default: cIcon.style.top = `${-0.5 * cIcon.height}px`; cIcon.style.left = `${-0.5 * cIcon.width}px`; break; } cIcon.style['z-index'] = -1; domElement.appendChild(cIcon); return cIcon; }; const iconPromise = new Promise((resolve, reject) => { icon.onload = () => resolve(addIcon()); icon.onerror = err => reject(err); }); if (!this.icon.cropValues && !this.icon.color) { icon.src = this.icon.source; } else { const img = await loadImage(this.icon.source); const imgd = cropImage(img, this.icon.cropValues); const imgdColored = replaceWhitePxl(imgd, this.icon.color, this.icon.id || this.icon.source); canvas.getContext('2d').putImageData(imgdColored, 0, 0); icon.src = canvas.toDataURL('image/png'); } return iconPromise; }

I did so test and it seems that the test icon.complete is indeed not necessary.
I propose in the last commit some modification inspired by your code. I put out the addicon function from applyToHTML to prevent it being created many time and I fell like it makes the code a bit more readable (and from my point of view a bit more similare to applyToCanvasPolygon), WDYT ?

ok 👍 can you just update the doc of applyToHTML (especially the @returns please?)

src/Core/Style.js

src/Layer/LayerUpdateStrategy.js

src/Core/Style.js

src/Core/Label.js

src/Core/Style.js

…vision !need improvement!

src/Core/Style.js

jailln · 2023-10-20T15:18:20Z

src/Core/Label.js

-                style.applyToHTML(this.content, sprites);
+                style.applyToHTML(this.content)
+                    .then(() => {
+                        this.icon = this.content.getElementsByClassName('itowns-icon')[0];


That's the idea but I think there is a simpler implementation (sorry I paste all the function but I think it's easier to understand this way). I've quickly tested it and it seems to work, can you test also + WDYT ?

async applyToHTML(domElement) { if (arguments.length > 1) { console.warn('Deprecated argument sprites. Sprites must be configured in style.'); } domElement.style.padding = `${this.text.padding}px`; domElement.style.maxWidth = `${this.text.wrap}em`; domElement.style.color = this.text.color; if (this.text.size > 0) { domElement.style.fontSize = `${this.text.size}px`; } domElement.style.fontFamily = this.text.font.join(','); domElement.style.textTransform = this.text.transform; domElement.style.letterSpacing = `${this.text.spacing}em`; domElement.style.textAlign = this.text.justify; domElement.style['white-space'] = 'pre-line'; if (this.text.haloWidth > 0) { domElement.style.setProperty('--text_stroke_display', 'block'); domElement.style.setProperty('--text_stroke_width', `${this.text.haloWidth}px`); domElement.style.setProperty('--text_stroke_color', this.text.haloColor); domElement.setAttribute('data-before', domElement.textContent); } if (!this.icon.source) { return; } const icon = document.createElement('img'); const addIcon = () => { const cIcon = icon.cloneNode(); cIcon.setAttribute('class', 'itowns-icon'); cIcon.width = icon.width * this.icon.size; cIcon.height = icon.height * this.icon.size; cIcon.style.color = this.icon.color; cIcon.style.opacity = this.icon.opacity; cIcon.style.position = 'absolute'; cIcon.style.top = '0'; cIcon.style.left = '0'; switch (this.icon.anchor) { // center by default case 'left': cIcon.style.top = `${-0.5 * cIcon.height}px`; break; case 'right': cIcon.style.top = `${-0.5 * cIcon.height}px`; cIcon.style.left = `${-cIcon.width}px`; break; case 'top': cIcon.style.left = `${-0.5 * cIcon.width}px`; break; case 'bottom': cIcon.style.top = `${-cIcon.height}px`; cIcon.style.left = `${-0.5 * cIcon.width}px`; break; case 'bottom-left': cIcon.style.top = `${-cIcon.height}px`; break; case 'bottom-right': cIcon.style.top = `${-cIcon.height}px`; cIcon.style.left = `${-cIcon.width}px`; break; case 'top-left': break; case 'top-right': cIcon.style.left = `${-cIcon.width}px`; break; case 'center': default: cIcon.style.top = `${-0.5 * cIcon.height}px`; cIcon.style.left = `${-0.5 * cIcon.width}px`; break; } cIcon.style['z-index'] = -1; domElement.appendChild(cIcon); return cIcon; }; const iconPromise = new Promise((resolve, reject) => { icon.onload = () => resolve(addIcon()); icon.onerror = err => reject(err); }); if (!this.icon.cropValues && !this.icon.color) { icon.src = this.icon.source; } else { const img = await loadImage(this.icon.source); const imgd = cropImage(img, this.icon.cropValues); const imgdColored = replaceWhitePxl(imgd, this.icon.color, this.icon.id || this.icon.source); canvas.getContext('2d').putImageData(imgdColored, 0, 0); icon.src = canvas.toDataURL('image/png'); } return iconPromise; }

src/Core/Style.js

jailln · 2023-10-24T12:17:41Z

src/Core/Label.js

-                style.applyToHTML(this.content, sprites);
+                style.applyToHTML(this.content)
+                    .then(() => {
+                        this.icon = this.content.getElementsByClassName('itowns-icon')[0];


ok 👍 can you just update the doc of applyToHTML (especially the @returns please?)

ftoromanoff assigned gchoqueux Jul 10, 2023

ftoromanoff force-pushed the moveStylePattern branch 6 times, most recently from a7b9c74 to d69d5c2 Compare July 13, 2023 09:46

ftoromanoff force-pushed the moveStylePattern branch 22 times, most recently from 1c3f7cc to 1e46681 Compare July 21, 2023 12:25

ftoromanoff requested a review from gchoqueux July 21, 2023 14:05

mgermerie assigned ftoromanoff Aug 22, 2023

ftoromanoff force-pushed the moveStylePattern branch from e72f45b to a2da04a Compare September 5, 2023 09:16

ftoromanoff mentioned this pull request Sep 13, 2023

fix example Gpx 3d and functional test #2187

Merged

ftoromanoff force-pushed the moveStylePattern branch from a2da04a to 65055ec Compare September 15, 2023 09:24

jailln assigned Desplandis Sep 19, 2023

ftoromanoff force-pushed the moveStylePattern branch from 65055ec to 586f9fa Compare September 20, 2023 07:55

ftoromanoff requested review from jailln and Desplandis October 10, 2023 15:45

Desplandis assigned jailln Oct 11, 2023

jailln requested changes Oct 16, 2023

View reviewed changes

ftoromanoff force-pushed the moveStylePattern branch 2 times, most recently from e8da176 to 4b996ca Compare October 17, 2023 14:17

ftoromanoff mentioned this pull request Oct 18, 2023

[feat] Draw polygon edges into canevas using image pattern. #2210

Open

jailln reviewed Oct 18, 2023

View reviewed changes

src/Core/Style.js Outdated Show resolved Hide resolved

src/Core/Style.js Outdated Show resolved Hide resolved

src/Core/Style.js Outdated Show resolved Hide resolved

src/Core/Style.js Outdated Show resolved Hide resolved

jailln reviewed Oct 19, 2023

View reviewed changes

src/Core/Label.js Outdated Show resolved Hide resolved

src/Core/Style.js Outdated Show resolved Hide resolved

src/Core/Style.js Outdated Show resolved Hide resolved

jailln reviewed Oct 19, 2023

View reviewed changes

src/Core/Style.js Outdated Show resolved Hide resolved

ftoromanoff force-pushed the moveStylePattern branch from f145fb6 to 606cba5 Compare October 19, 2023 12:42

ftoromanoff mentioned this pull request Oct 20, 2023

[Bug - VectorTile] Data not diplaying correctly (at the same zoom level of the associated tile). #2214

Open

ftoromanoff force-pushed the moveStylePattern branch 3 times, most recently from 3cec734 to 5fc0047 Compare October 20, 2023 13:44

fix(VectorTile): loading texture on VectorTile when node.pendingSubdi…

884cf99

…vision !need improvement!

ftoromanoff force-pushed the moveStylePattern branch from 5fc0047 to 8869ae0 Compare October 23, 2023 08:14

ftoromanoff mentioned this pull request Oct 23, 2023

Fusion get style #2215

Merged

jailln reviewed Oct 24, 2023

View reviewed changes

refactor(Style): homogenize gestion fill.pattern between all existing

f045341

ftoromanoff force-pushed the moveStylePattern branch from fdf9691 to f045341 Compare October 25, 2023 09:02

jailln approved these changes Oct 25, 2023

View reviewed changes

ftoromanoff merged commit 396edfb into iTowns:master Oct 25, 2023
7 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fetching of Style.pattern images #2135

Fetching of Style.pattern images #2135

ftoromanoff commented Jul 10, 2023 •

edited

Loading

jailln Oct 16, 2023

ftoromanoff Oct 18, 2023 •

edited

Loading

ftoromanoff Oct 19, 2023

jailln Oct 20, 2023

ftoromanoff Oct 24, 2023

jailln Oct 24, 2023

ftoromanoff Oct 24, 2023

jailln Oct 20, 2023

jailln Oct 24, 2023

Fetching of Style.pattern images #2135

Fetching of Style.pattern images #2135

Conversation

ftoromanoff commented Jul 10, 2023 • edited Loading

Choose a reason for hiding this comment

ftoromanoff Oct 18, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ftoromanoff commented Jul 10, 2023 •

edited

Loading

ftoromanoff Oct 18, 2023 •

edited

Loading