add a dummy div to RCustom to allow for an insertion anchor (#297)

* add a dummy div to RCustom to allow for an insertion anchor

* update the changelog

* update the snaps

* prefer a nested div

CHANGELOG.md

@@ -5,6 +5,10 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+##
+
+-   Fix [#280](https://github.com/mmomtchev/rlayers/issues/280), `<RContol.RCustom>` cannot be used as anchor for inserting new elements
+
 ## [3.2.0] 2024-09-24
 
 -   Fixed `package-lock.json`

src/control/RCustom.tsx

@@ -35,8 +35,13 @@ export default class RCustom extends RControlBase<RControlProps, Record<string,
 
     render(): JSX.Element {
         return (
-            <div className={['ol-control', this.props.className].join(' ')} ref={this.targetRef}>
-                {this.props.children}
+            <div className='_rlayers_RCustomControl'>
+                <div
+                    className={['ol-control', this.props.className].join(' ')}
+                    ref={this.targetRef}
+                >
+                    {this.props.children}
+                </div>
             </div>
         );
     }

test/__snapshots__/RControl.test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<RControl> should render all the RControls 1`] = `"<div style="width: 100px; height: 100px;"><div class="_rlayers_RLayer"></div><div class="_rlayers_RLayer"></div><div class="ol-overviewmap example-overview"><div class="_rlayers_RLayer"></div></div><div class="ol-viewport" style="position: relative; overflow: hidden; width: 100%; height: 100%;"><div style="position: absolute; width: 100%; height: 100%; z-index: 0;" class="ol-unselectable ol-layers"></div><div style="position: absolute; z-index: 0; width: 100%; height: 100%; pointer-events: none;" class="ol-overlaycontainer"></div><div style="position: absolute; z-index: 0; width: 100%; height: 100%; pointer-events: none;" class="ol-overlaycontainer-stopevent"><div class="ol-control ol-layers-control" style="pointer-events: auto;"><span><button>=</button></span></div><div style="pointer-events: none;" class="ol-scale-line ol-unselectable"><div class="ol-scale-line-inner"></div></div><div style="pointer-events: auto;" class="ol-attribution ol-unselectable ol-control"><button type="button" aria-expanded="true" title="Attributions"><span class="ol-attribution-collapse">›</span></button><ul></ul></div><div style="pointer-events: auto;" class="ol-zoom ol-unselectable ol-control"><button class="ol-zoom-in" type="button" title="Zoom in">+</button><button class="ol-zoom-out" type="button" title="Zoom out">–</button></div><div style="pointer-events: auto;" class="ol-zoomslider ol-unselectable ol-control"><button type="button" class="ol-zoomslider-thumb ol-unselectable"></button></div><div class="ol-mouse-position" style="pointer-events: auto;">&nbsp;</div><div style="pointer-events: auto;" class="ol-zoom-extent ol-unselectable ol-control"><button type="button" title="Fit to extent">E</button></div><div class="ol-control example-RControl" style="pointer-events: auto;"><button>X</button></div><div style="pointer-events: auto;" class="ol-rotate ol-unselectable ol-control ol-hidden"><button class="ol-rotate-reset" type="button" title="Reset rotation"><span class="ol-compass">⇧</span></button></div><div style="pointer-events: auto;" class="ol-full-screen ol-unselectable ol-control ol-unsupported"><button title="Toggle full-screen" type="button" class="ol-full-screen-false">⤢</button></div><div style="pointer-events: auto;" class="example-fullscreen ol-unselectable ol-control ol-unsupported"><button title="Toggle full-screen" type="button" class="example-fullscreen-false">扩</button></div><div style="pointer-events: auto;" class="ol-overviewmap example-overview ol-unselectable ol-control"><div class="ol-overviewmap-map"><div class="ol-viewport" style="position: relative; overflow: hidden; width: 100%; height: 100%;"><div style="position: absolute; width: 100%; height: 100%; z-index: 0;" class="ol-unselectable ol-layers"></div><div style="position: absolute; z-index: 0; width: 100%; height: 100%; pointer-events: none;" class="ol-overlaycontainer"></div><div style="position: absolute; z-index: 0; width: 100%; height: 100%; pointer-events: none;" class="ol-overlaycontainer-stopevent"><div class="ol-overlay-container ol-selectable" style="position: absolute; pointer-events: auto; display: none;"><div class="ol-overviewmap-box" style="box-sizing: border-box;"></div></div></div></div></div><button type="button" title="Overview map"><span>‹</span></button></div></div></div></div>"`;
+exports[`<RControl> should render all the RControls 1`] = `"<div style="width: 100px; height: 100px;"><div class="_rlayers_RLayer"></div><div class="_rlayers_RLayer"></div><div class="_rlayers_RCustomControl"></div><div class="ol-overviewmap example-overview"><div class="_rlayers_RLayer"></div></div><div class="ol-viewport" style="position: relative; overflow: hidden; width: 100%; height: 100%;"><div style="position: absolute; width: 100%; height: 100%; z-index: 0;" class="ol-unselectable ol-layers"></div><div style="position: absolute; z-index: 0; width: 100%; height: 100%; pointer-events: none;" class="ol-overlaycontainer"></div><div style="position: absolute; z-index: 0; width: 100%; height: 100%; pointer-events: none;" class="ol-overlaycontainer-stopevent"><div class="ol-control ol-layers-control" style="pointer-events: auto;"><span><button>=</button></span></div><div style="pointer-events: none;" class="ol-scale-line ol-unselectable"><div class="ol-scale-line-inner"></div></div><div style="pointer-events: auto;" class="ol-attribution ol-unselectable ol-control"><button type="button" aria-expanded="true" title="Attributions"><span class="ol-attribution-collapse">›</span></button><ul></ul></div><div style="pointer-events: auto;" class="ol-zoom ol-unselectable ol-control"><button class="ol-zoom-in" type="button" title="Zoom in">+</button><button class="ol-zoom-out" type="button" title="Zoom out">–</button></div><div style="pointer-events: auto;" class="ol-zoomslider ol-unselectable ol-control"><button type="button" class="ol-zoomslider-thumb ol-unselectable"></button></div><div class="ol-mouse-position" style="pointer-events: auto;">&nbsp;</div><div style="pointer-events: auto;" class="ol-zoom-extent ol-unselectable ol-control"><button type="button" title="Fit to extent">E</button></div><div class="ol-control example-RControl" style="pointer-events: auto;"><button>X</button></div><div style="pointer-events: auto;" class="ol-rotate ol-unselectable ol-control ol-hidden"><button class="ol-rotate-reset" type="button" title="Reset rotation"><span class="ol-compass">⇧</span></button></div><div style="pointer-events: auto;" class="ol-full-screen ol-unselectable ol-control ol-unsupported"><button title="Toggle full-screen" type="button" class="ol-full-screen-false">⤢</button></div><div style="pointer-events: auto;" class="example-fullscreen ol-unselectable ol-control ol-unsupported"><button title="Toggle full-screen" type="button" class="example-fullscreen-false">扩</button></div><div style="pointer-events: auto;" class="ol-overviewmap example-overview ol-unselectable ol-control"><div class="ol-overviewmap-map"><div class="ol-viewport" style="position: relative; overflow: hidden; width: 100%; height: 100%;"><div style="position: absolute; width: 100%; height: 100%; z-index: 0;" class="ol-unselectable ol-layers"></div><div style="position: absolute; z-index: 0; width: 100%; height: 100%; pointer-events: none;" class="ol-overlaycontainer"></div><div style="position: absolute; z-index: 0; width: 100%; height: 100%; pointer-events: none;" class="ol-overlaycontainer-stopevent"><div class="ol-overlay-container ol-selectable" style="position: absolute; pointer-events: auto; display: none;"><div class="ol-overviewmap-box" style="box-sizing: border-box;"></div></div></div></div></div><button type="button" title="Overview map"><span>‹</span></button></div></div></div></div>"`;
 
-exports[`<RControl> should render all the RControls 2`] = `"<div style="width: 100px; height: 100px;"><div class="_rlayers_RLayer"></div><div class="_rlayers_RLayer"></div><div class="ol-overviewmap example-overview"><div class="_rlayers_RLayer"></div></div><div class="ol-viewport" style="position: relative; overflow: hidden; width: 100%; height: 100%;"><div style="position: absolute; width: 100%; height: 100%; z-index: 0;" class="ol-unselectable ol-layers"></div><div style="position: absolute; z-index: 0; width: 100%; height: 100%; pointer-events: none;" class="ol-overlaycontainer"></div><div style="position: absolute; z-index: 0; width: 100%; height: 100%; pointer-events: none;" class="ol-overlaycontainer-stopevent"><div class="ol-control ol-layers-control" style="pointer-events: auto;"><span><button>=</button></span></div><div style="pointer-events: none;" class="ol-scale-line ol-unselectable"><div class="ol-scale-line-inner"></div></div><div style="pointer-events: auto;" class="ol-attribution ol-unselectable ol-control ol-collapsed"><button type="button" aria-expanded="false" title="Attributions"><span class="ol-attribution-expand">i</span></button><ul></ul></div><div style="pointer-events: auto;" class="ol-zoom ol-unselectable ol-control"><button class="ol-zoom-in" type="button" title="Zoom in">+</button><button class="ol-zoom-out" type="button" title="Zoom out">–</button></div><div style="pointer-events: auto;" class="ol-zoomslider ol-unselectable ol-control"><button type="button" class="ol-zoomslider-thumb ol-unselectable"></button></div><div class="ol-mouse-position" style="pointer-events: auto;">&nbsp;</div><div style="pointer-events: auto;" class="ol-zoom-extent ol-unselectable ol-control"><button type="button" title="Fit to extent">E</button></div><div class="ol-control example-RControl" style="pointer-events: auto;"><button>X</button></div><div style="pointer-events: auto;" class="ol-rotate ol-unselectable ol-control ol-hidden"><button class="ol-rotate-reset" type="button" title="Reset rotation"><span class="ol-compass">⇧</span></button></div><div style="pointer-events: auto;" class="ol-full-screen ol-unselectable ol-control ol-unsupported"><button title="Toggle full-screen" type="button" class="ol-full-screen-false">⤢</button></div><div style="pointer-events: auto;" class="example-fullscreen ol-unselectable ol-control ol-unsupported"><button title="Toggle full-screen" type="button" class="example-fullscreen-false">扩</button></div><div style="pointer-events: auto;" class="ol-overviewmap example-overview ol-unselectable ol-control ol-collapsed"><div class="ol-overviewmap-map"><div class="ol-viewport" style="position: relative; overflow: hidden; width: 100%; height: 100%;"><div style="position: absolute; width: 100%; height: 100%; z-index: 0;" class="ol-unselectable ol-layers"></div><div style="position: absolute; z-index: 0; width: 100%; height: 100%; pointer-events: none;" class="ol-overlaycontainer"></div><div style="position: absolute; z-index: 0; width: 100%; height: 100%; pointer-events: none;" class="ol-overlaycontainer-stopevent"><div class="ol-overlay-container ol-selectable" style="position: absolute; pointer-events: auto; display: none;"><div class="ol-overviewmap-box" style="box-sizing: border-box;"></div></div></div></div></div><button type="button" title="Overview map"><span>›</span></button></div></div></div></div>"`;
+exports[`<RControl> should render all the RControls 2`] = `"<div style="width: 100px; height: 100px;"><div class="_rlayers_RLayer"></div><div class="_rlayers_RLayer"></div><div class="_rlayers_RCustomControl"></div><div class="ol-overviewmap example-overview"><div class="_rlayers_RLayer"></div></div><div class="ol-viewport" style="position: relative; overflow: hidden; width: 100%; height: 100%;"><div style="position: absolute; width: 100%; height: 100%; z-index: 0;" class="ol-unselectable ol-layers"></div><div style="position: absolute; z-index: 0; width: 100%; height: 100%; pointer-events: none;" class="ol-overlaycontainer"></div><div style="position: absolute; z-index: 0; width: 100%; height: 100%; pointer-events: none;" class="ol-overlaycontainer-stopevent"><div class="ol-control ol-layers-control" style="pointer-events: auto;"><span><button>=</button></span></div><div style="pointer-events: none;" class="ol-scale-line ol-unselectable"><div class="ol-scale-line-inner"></div></div><div style="pointer-events: auto;" class="ol-attribution ol-unselectable ol-control ol-collapsed"><button type="button" aria-expanded="false" title="Attributions"><span class="ol-attribution-expand">i</span></button><ul></ul></div><div style="pointer-events: auto;" class="ol-zoom ol-unselectable ol-control"><button class="ol-zoom-in" type="button" title="Zoom in">+</button><button class="ol-zoom-out" type="button" title="Zoom out">–</button></div><div style="pointer-events: auto;" class="ol-zoomslider ol-unselectable ol-control"><button type="button" class="ol-zoomslider-thumb ol-unselectable"></button></div><div class="ol-mouse-position" style="pointer-events: auto;">&nbsp;</div><div style="pointer-events: auto;" class="ol-zoom-extent ol-unselectable ol-control"><button type="button" title="Fit to extent">E</button></div><div class="ol-control example-RControl" style="pointer-events: auto;"><button>X</button></div><div style="pointer-events: auto;" class="ol-rotate ol-unselectable ol-control ol-hidden"><button class="ol-rotate-reset" type="button" title="Reset rotation"><span class="ol-compass">⇧</span></button></div><div style="pointer-events: auto;" class="ol-full-screen ol-unselectable ol-control ol-unsupported"><button title="Toggle full-screen" type="button" class="ol-full-screen-false">⤢</button></div><div style="pointer-events: auto;" class="example-fullscreen ol-unselectable ol-control ol-unsupported"><button title="Toggle full-screen" type="button" class="example-fullscreen-false">扩</button></div><div style="pointer-events: auto;" class="ol-overviewmap example-overview ol-unselectable ol-control ol-collapsed"><div class="ol-overviewmap-map"><div class="ol-viewport" style="position: relative; overflow: hidden; width: 100%; height: 100%;"><div style="position: absolute; width: 100%; height: 100%; z-index: 0;" class="ol-unselectable ol-layers"></div><div style="position: absolute; z-index: 0; width: 100%; height: 100%; pointer-events: none;" class="ol-overlaycontainer"></div><div style="position: absolute; z-index: 0; width: 100%; height: 100%; pointer-events: none;" class="ol-overlaycontainer-stopevent"><div class="ol-overlay-container ol-selectable" style="position: absolute; pointer-events: auto; display: none;"><div class="ol-overviewmap-box" style="box-sizing: border-box;"></div></div></div></div></div><button type="button" title="Overview map"><span>›</span></button></div></div></div></div>"`;
 
 exports[`<RControl> should render the layers RControl with a custom element 1`] = `"<div style="width: 100px; height: 100px;"><div class="_rlayers_RLayer"></div><div class="ol-viewport" style="position: relative; overflow: hidden; width: 100%; height: 100%;"><div style="position: absolute; width: 100%; height: 100%; z-index: 0;" class="ol-unselectable ol-layers"></div><div style="position: absolute; z-index: 0; width: 100%; height: 100%; pointer-events: none;" class="ol-overlaycontainer"></div><div style="position: absolute; z-index: 0; width: 100%; height: 100%; pointer-events: none;" class="ol-overlaycontainer-stopevent"><div style="pointer-events: auto;" class="ol-zoom ol-unselectable ol-control"><button class="ol-zoom-in" type="button" title="Zoom in">+</button><button class="ol-zoom-out" type="button" title="Zoom out">–</button></div><div style="pointer-events: auto;" class="ol-rotate ol-unselectable ol-control ol-hidden"><button class="ol-rotate-reset" type="button" title="Reset rotation"><span class="ol-compass">⇧</span></button></div><div style="pointer-events: auto;" class="ol-attribution ol-unselectable ol-control ol-collapsed"><button type="button" aria-expanded="false" title="Attributions"><span class="ol-attribution-expand">i</span></button><ul></ul></div><div class="ol-control ol-layers-control" style="pointer-events: auto;"><span><button>X</button></span></div></div></div></div>"`;