Fullscreen control not working properly when MapLibre exists within a shadow root

[dschep]

maplibre-gl-js version: 3.6.2

browser: Firefox & Chrome (probably all?)

Steps to Trigger Behavior

1. create a map with FullscreenControl within a custom element
2. click full screen button
3. notice that the button doesn't switch to "Exit Fullscreen" and doesn't work

Link to Demonstration

https://files.trailstash.net/maplibre-shadow-root-fs-bug/

Expected Behavior

can exit full screen the normal way

Actual Behavior

you can't

Probable fix

this is because window.document.fullscreenElement is set to the custom map-libre element, not the actual container of the map.

I haven't been able to setup the maplibre development environment to test this, but I'm fairly confident changing const fullscreenElement... to let fullscreenElement here and adding this after it will fix it:

while (fullscreenElement.shadowRoot) {
  fullscreenElement = fullscreenElement.shadowRoot.fullscreenElement;
}

while loop instead of a simple if in order to support maplibre being nested more than 1 shadow root deep.

I'm not sure if prefixed variants are necessary in this case, as custom elements / shadow DOM support are considerably newer than fullscreen support.

[HarelM]

I would recommend trying to set a local dev env. There are good instructions in this repo. Make sure to use the right node version. There isn't a lot to it, mainly npm i and npm run start.

[dschep]

I get build errors for some reason (also when doing npm start):

$ npm run build-dev

> [email protected] build-dev
> rollup --configPlugin @rollup/plugin-typescript -c --environment BUILD:dev

loaded rollup.config.ts with warnings
(!) Plugin typescript: @rollup/plugin-typescript TS2307: Cannot find module '../../../dist/maplibre-gl' or its corresponding type declarations.
test/integration/browser/browser.test.ts: (5:47)

5 import type {default as MapLibreGL, Map} from '../../../dist/maplibre-gl';                                                                                                                                                                                 
                                                ~~~~~~~~~~~~~~~~~~~~~~~~~~~

test/integration/render/run_render_tests.ts: (13:92)

13 import type {default as MapLibreGL, Map, CanvasSource, PointLike, StyleSpecification} from '../../../dist/maplibre-gl';                                                                                                                                   
                                                                                              ~~~~~~~~~~~~~~~~~~~~~~~~~~~

(node:349782) ExperimentalWarning: Importing JSON modules is an experimental feature and might change at any time
(Use `node --trace-warnings ...` to show where the warning was created)

src/index.ts, src/source/worker.ts → staging/maplibregl...                                                                                                                                                                                                   
{
  pluginCode: 'TS2307',
  message: "@rollup/plugin-typescript TS2307: Cannot find module '../../../dist/maplibre-gl' or its corresponding type declarations.",
  loc: {
    column: 47,
    line: 5,
    file: '/home/dschep/code/src/maplibre-gl-js/test/integration/browser/browser.test.ts'
  },
  frame: '\n' +
    "\x1B[7m5\x1B[0m import type {default as MapLibreGL, Map} from '../../../dist/maplibre-gl';\n" +
    '\x1B[7m \x1B[0m \x1B[91m                                              ~~~~~~~~~~~~~~~~~~~~~~~~~~~\x1B[0m\n',
  code: 'PLUGIN_WARNING',
  plugin: 'typescript'
}
[!] (plugin typescript) RollupError: @rollup/plugin-typescript TS2307: Cannot find module '../../../dist/maplibre-gl' or its corresponding type declarations.
test/integration/browser/browser.test.ts (5:47)

5 import type {default as MapLibreGL, Map} from '../../../dist/maplibre-gl';
                                                ~~~~~~~~~~~~~~~~~~~~~~~~~~~

    at Object.error (/home/dschep/code/src/maplibre-gl-js/node_modules/rollup/dist/shared/parseAst.js:279:30)
    at /home/dschep/code/src/maplibre-gl-js/node_modules/rollup/dist/shared/rollup.js:1031:32
    at async Promise.all (index 2)
    at PluginDriver.hookParallel (/home/dschep/code/src/maplibre-gl-js/node_modules/rollup/dist/shared/rollup.js:933:9)
    at /home/dschep/code/src/maplibre-gl-js/node_modules/rollup/dist/shared/rollup.js:19878:13
    at catchUnfinishedHookActions (/home/dschep/code/src/maplibre-gl-js/node_modules/rollup/dist/shared/rollup.js:19436:16)
    at rollupInternal (/home/dschep/code/src/maplibre-gl-js/node_modules/rollup/dist/shared/rollup.js:19875:5)
    at build (/home/dschep/code/src/maplibre-gl-js/node_modules/rollup/dist/bin/rollup:1541:20)
    at runRollup (/home/dschep/code/src/maplibre-gl-js/node_modules/rollup/dist/bin/rollup:1664:21)

[HarelM]

Probably one of my latest changes. Try running npm run build-dist.

[HarelM]

I probably need to move the generate-typings to the codegen part... I had some issues with a test I added that caused this I think. Sorry...

[dschep]

That seems to work. I'll try and get a PR for this up soon.