Improve readability of rendering test

rendering/cases/rtl-text-align/main.js

@@ -10,176 +10,79 @@ import VectorLayer from '../../../src/ol/layer/Vector.js';
 import VectorSource from '../../../src/ol/source/Vector.js';
 import View from '../../../src/ol/View.js';
 
-const vectorSource = new VectorSource();
+const vectorSource = new VectorSource({
-let feature;
+  features: [
-
+    // Latin - end (right)
-// Latin - end (right)
+    new Feature({
-feature = new Feature({
+      geometry: new Point([-10, 50]),
-  geometry: new Point([-10, 50]),
-});
-feature.setStyle(
-  new Style({
-    text: new Text({
       text: 'Latin',
-      font: '24px Ubuntu',
       textAlign: 'end',
-      fill: new Fill({
-        color: 'black',
-      }),
-      stroke: new Stroke({
-        color: 'white',
-      }),
     }),
-    image: new CircleStyle({
-      radius: 10,
-      fill: new Fill({
-        color: 'cyan',
-      }),
-    }),
-  })
-);
-vectorSource.addFeature(feature);
 
-// Hebrew - start (right)
+    // Hebrew - start (right)
-feature = new Feature({
+    new Feature({
-  geometry: new Point([-10, 0]),
+      geometry: new Point([-10, 0]),
-});
-feature.setStyle(
-  new Style({
-    text: new Text({
       text: 'עִברִית',
-      font: '24px Ubuntu',
       textAlign: 'start',
-      fill: new Fill({
-        color: 'black',
-      }),
-      stroke: new Stroke({
-        color: 'white',
-      }),
     }),
-    image: new CircleStyle({
-      radius: 10,
-      fill: new Fill({
-        color: 'cyan',
-      }),
-    }),
-  })
-);
-vectorSource.addFeature(feature);
 
-// Arabic - start (right)
+    // Arabic - start (right)
-feature = new Feature({
+    new Feature({
-  geometry: new Point([-10, -50]),
+      geometry: new Point([-10, -50]),
-});
-feature.setStyle(
-  new Style({
-    text: new Text({
       text: 'عربى',
-      font: '24px Ubuntu',
       textAlign: 'start',
-      fill: new Fill({
-        color: 'black',
-      }),
-      stroke: new Stroke({
-        color: 'white',
-      }),
     }),
-    image: new CircleStyle({
-      radius: 10,
-      fill: new Fill({
-        color: 'cyan',
-      }),
-    }),
-  })
-);
-vectorSource.addFeature(feature);
 
-// Latin - start (left)
+    // Latin - start (left)
-feature = new Feature({
+    new Feature({
-  geometry: new Point([10, 50]),
+      geometry: new Point([10, 50]),
-});
-feature.setStyle(
-  new Style({
-    text: new Text({
       text: 'Latin',
-      font: '24px Ubuntu',
       textAlign: 'start',
-      fill: new Fill({
-        color: 'black',
-      }),
-      stroke: new Stroke({
-        color: 'white',
-      }),
     }),
-    image: new CircleStyle({
-      radius: 10,
-      fill: new Fill({
-        color: 'cyan',
-      }),
-    }),
-  })
-);
-vectorSource.addFeature(feature);
 
-// Hebrew - end (left)
+    // Hebrew - end (left)
-feature = new Feature({
+    new Feature({
-  geometry: new Point([10, 0]),
+      geometry: new Point([10, 0]),
-});
-feature.setStyle(
-  new Style({
-    text: new Text({
       text: 'עִברִית',
-      font: '24px Ubuntu',
       textAlign: 'end',
-      fill: new Fill({
-        color: 'black',
-      }),
-      stroke: new Stroke({
-        color: 'white',
-      }),
     }),
-    image: new CircleStyle({
-      radius: 10,
-      fill: new Fill({
-        color: 'cyan',
-      }),
-    }),
-  })
-);
-vectorSource.addFeature(feature);
 
-// Arabic - end (left)
+    // Arabic - end (left)
-feature = new Feature({
+    new Feature({
-  geometry: new Point([10, -50]),
+      geometry: new Point([10, -50]),
-});
-feature.setStyle(
-  new Style({
-    text: new Text({
       text: 'عربى',
       font: '24px Ubuntu',
       textAlign: 'end',
-      fill: new Fill({
-        color: 'black',
-      }),
-      stroke: new Stroke({
-        color: 'white',
-      }),
     }),
-    image: new CircleStyle({
+  ],
-      radius: 10,
+});
-      fill: new Fill({
-        color: 'cyan',
-      }),
-    }),
-  })
-);
-vectorSource.addFeature(feature);
 
 new Map({
   pixelRatio: 1,
   layers: [
     new VectorLayer({
       source: vectorSource,
+      style: function (feature) {
+        return new Style({
+          text: new Text({
+            text: feature.get('text'),
+            font: '24px Ubuntu',
+            textAlign: feature.get('textAlign'),
+            fill: new Fill({
+              color: 'black',
+            }),
+            stroke: new Stroke({
+              color: 'white',
+            }),
+          }),
+          image: new CircleStyle({
+            radius: 10,
+            fill: new Fill({
+              color: 'cyan',
+            }),
+          }),
+        });
+      },
     }),
   ],
   target: 'map',