Stacking contexts for layers, overlays, and controls

2018-11-19 09:47:51 -07:00
parent 5d14666376
commit 898c349fbf
18 changed files with 113 additions and 42 deletions
--- a/rendering/cases/icon-symbol-svg/expected.png
+++ b/rendering/cases/icon-symbol-svg/expected.png
--- a/rendering/cases/layer-vectortile-rotate-vector/expected.png
+++ b/rendering/cases/layer-vectortile-rotate-vector/expected.png
--- a/rendering/cases/layer-vectortile-rotate/expected.png
+++ b/rendering/cases/layer-vectortile-rotate/expected.png
--- a/rendering/cases/layer-vectortile-simple/expected.png
+++ b/rendering/cases/layer-vectortile-simple/expected.png
--- a/rendering/cases/layer-vectortile-simple/main.js
+++ b/rendering/cases/layer-vectortile-simple/main.js
@@ -25,5 +25,5 @@ new Map({

 render({
  message: 'Vector tile layer renders',
-  tolerance: 0.02
+  tolerance: 0.01
 });
--- a/rendering/cases/linestring-style-css-filter/index.html
+++ b/rendering/cases/linestring-style-css-filter/index.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
  <head>
+    <link rel="stylesheet" href="/ol/ol.css" type="text/css">
    <style>
      html, body {
        margin: 0;
@@ -15,6 +16,9 @@
      .bw {
        filter: grayscale(100%);
      }
+      .ol-control {
+        display: none;
+      }
    </style>
  </head>
  <body>
--- a/rendering/cases/linestring-style-rotation/expected.png
+++ b/rendering/cases/linestring-style-rotation/expected.png
--- a/rendering/cases/linestring-style-rotation/main.js
+++ b/rendering/cases/linestring-style-rotation/main.js
@@ -67,4 +67,4 @@ new Map({
  })
 });

-render({tolerance: 0.02});
+render({tolerance: 0.01});
--- a/rendering/cases/rotated-view/expected.png
+++ b/rendering/cases/rotated-view/expected.png
--- a/rendering/cases/rotated-view/index.html
+++ b/rendering/cases/rotated-view/index.html
@@ -1,22 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <style>
-      html, body {
-        margin: 0;
-        padding: 0;
-        width: 100%;
-        height: 100%;
-      }
-      #map {
-        width: 100%;
-        height: 100%;
-      }
-    </style>
-  </head>
-  <body>
-    <div id="map"></div>
-    <script src="main.js"></script>
-  </body>
-  </script>
-</html>
--- a/rendering/cases/stacking/expected.png
+++ b/rendering/cases/stacking/expected.png
--- a/rendering/cases/stacking/main.js
+++ b/rendering/cases/stacking/main.js
@@ -0,0 +1,82 @@
+/**
+ * Demonstrate stacking with z-index.  Layers and controls
+ * can be ordered with z-index, but controls always appear
+ * above layers.
+ */
+
+import Map from '../../../src/ol/Map.js';
+import View from '../../../src/ol/View.js';
+import Layer from '../../../src/ol/layer/Layer.js';
+import Control from '../../../src/ol/control/Control.js';
+import SourceState from '../../../src/ol/source/State.js';
+
+class Element extends Layer {
+  constructor(options, style) {
+    super(options);
+
+    const element = document.createElement('div');
+    element.style.position = 'absolute';
+    Object.assign(element.style, style);
+
+    this.element = element;
+  }
+
+  getSourceState() {
+    return SourceState.READY;
+  }
+
+  render() {
+    return this.element;
+  }
+}
+
+// elements for stacked controls
+const element1 = document.createElement('div');
+const style1 = element1.style;
+style1.position = 'absolute';
+style1.background = 'blue';
+style1.width = '25%';
+style1.height = '50%';
+style1.zIndex = '1';
+
+const element2 = document.createElement('div');
+const style2 = element2.style;
+style2.position = 'absolute';
+style2.background = 'orange';
+style2.width = '75%';
+style2.height = '25%';
+style2.zIndex = '-1';
+
+new Map({
+  target: 'map',
+  layers: [
+    new Element({
+      zIndex: 200
+    }, {
+      background: 'red',
+      width: '50%',
+      height: '100%'
+    }),
+    new Element({
+      zIndex: -200
+    }, {
+      background: 'green',
+      width: '100%',
+      height: '50%'
+    })
+  ],
+  controls: [
+    new Control({
+      element: element1
+    }),
+    new Control({
+      element: element2
+    })
+  ],
+  view: new View({
+    center: [0, 0],
+    zoom: 0
+  })
+});
+
+render();
--- a/rendering/cases/text-style/expected.png
+++ b/rendering/cases/text-style/expected.png
--- a/rendering/cases/text-style/main.js
+++ b/rendering/cases/text-style/main.js
@@ -120,4 +120,4 @@ new Map({
  })
 });

-render({tolerance: 0.05});
+render({tolerance: 0.02});