make CSplitterLine be based on CRectangle

When it was based on CPolyline and using lineWidth (weight) we get semi
transparent pixels on the edges of the line. By using a rectangle and
relying on just the fill (and not on stroke) we get sharp pixels.

Signed-off-by: Dennis Francis <dennis.francis@collabora.com>
Change-Id: Icddb8e37cdb2e30ac9e7e11305bb2c534069b295

loleaflet/css/loleaflet.css

@@ -697,7 +697,7 @@ nav.spreadsheet-color-indicator ~ #sidebar-dock-wrapper {
 }
 
 .leaflet-canvas-container .splitters-data {
-	--stroke-color: #e0e0e0;
+	--color: #e0e0e0;
 	--opacity: 1;
 	--weight: 3;
 }

loleaflet/src/layer/tile/CanvasTileLayer.js

@@ -1545,9 +1545,9 @@ L.CanvasTileLayer = L.TileLayer.extend({
 			this._xSplitter = new CSplitterLine(
 				map, {
 					name: 'horiz-pane-splitter',
-					color: this._splittersStyleData.getPropValue('--stroke-color'),
-					opacity: this._splittersStyleData.getFloatPropValue('--opacity'),
-					weight: Math.round(
+					fillColor: this._splittersStyleData.getPropValue('--color'),
+					fillOpacity: this._splittersStyleData.getFloatPropValue('--opacity'),
+					thickness: Math.round(
 						this._splittersStyleData.getIntPropValue('--weight')
 						* this._painter._dpiScale),
 					isHoriz: true
@@ -1568,9 +1568,9 @@ L.CanvasTileLayer = L.TileLayer.extend({
 			this._ySplitter = new CSplitterLine(
 				map, {
 					name: 'vert-pane-splitter',
-					color: this._splittersStyleData.getPropValue('--stroke-color'),
-					opacity: this._splittersStyleData.getFloatPropValue('--opacity'),
-					weight: Math.round(
+					fillColor: this._splittersStyleData.getPropValue('--color'),
+					fillOpacity: this._splittersStyleData.getFloatPropValue('--opacity'),
+					thickness: Math.round(
 						this._splittersStyleData.getIntPropValue('--weight')
 						* this._painter._dpiScale),
 					isHoriz: false

loleaflet/src/layer/vector/CPath.ts

@@ -20,6 +20,7 @@ abstract class CPath {
 	interactive: boolean = true;
 	fixed: boolean = false; // CPath coordinates are the same as overlay section coordinates.
 	cursorType: string;
+	thickness: number = 2;
 
 	radius: number = 0;
 	radiusY: number = 0;
@@ -58,6 +59,7 @@ abstract class CPath {
 		this.fillOpacity = options.fillOpacity !== undefined ? options.fillOpacity : this.fillOpacity;
 		this.fillRule = options.fillRule !== undefined ? options.fillRule : this.fillRule;
 		this.cursorType = options.cursorType !== undefined ? options.cursorType : this.cursorType;
+		this.thickness = options.thickness !== undefined ? options.thickness : this.thickness;
 		this.interactive = options.interactive !== undefined ? options.interactive : this.interactive;
 		this.fixed = options.fixed !== undefined ? options.fixed : this.fixed;
 	}

loleaflet/src/layer/vector/CRectangle.ts

@@ -16,6 +16,9 @@ class CRectangle extends CPolygon {
 	}
 
 	private static boundsToPointSet(bounds: CBounds): CPointSet {
+		if (!bounds.isValid()) {
+			return new CPointSet();
+		}
 		return CPointSet.fromPointArray([bounds.getTopLeft(), bounds.getTopRight(), bounds.getBottomRight(), bounds.getBottomLeft(), bounds.getTopLeft()]);
 	}
 }

loleaflet/src/layer/vector/CSplitterLine.ts

@@ -4,7 +4,7 @@
  * CSplitterLine is a CRectangle to be used to show the splits when there are freeze-panes.
  */
 
-class CSplitterLine extends CPolyline {
+class CSplitterLine extends CRectangle {
 
 	private isHoriz: boolean = true; // splitter divides X axis (vertical line) ?
 	private map: any;
@@ -12,9 +12,12 @@ class CSplitterLine extends CPolyline {
 	private inactive: boolean;
 
 	constructor(map: any, options: any) {
-		super(new CPointSet(), options);
+		super(new CBounds(), options);
 
 		this.fixed = true;
+		this.stroke = false;
+		this.fill = true;
+		this.opacity = 0;
 
 		// Splitters should always be on top.
 		this.zIndex = Infinity;
@@ -25,30 +28,34 @@ class CSplitterLine extends CPolyline {
 		this.map = map;
 
 		// preserve original opacity.
-		this.origOpacity = this.opacity;
+		this.origOpacity = this.fillOpacity;
 
 		this.onPositionChange();
 	}
 
 	onPositionChange() {
-		var newPointSet = this.computePointSet();
-		this.opacity = this.inactive ? 0 : this.origOpacity;
-		this.setPointSet(newPointSet);
+		var newBounds = this.computeBounds();
+		this.fillOpacity = this.inactive ? 0 : this.origOpacity;
+		this.setBounds(newBounds);
 	}
 
-	private computePointSet(): CPointSet {
+	private computeBounds(): CBounds {
 		var docLayer = this.map._docLayer;
 		var mapSize = this.map.getPixelBoundsCore().getSize();
 		var splitPos = docLayer._painter.getSplitPos();
 
+		var thickdown = Math.floor(this.thickness / 2);
+		var thickup = Math.ceil(this.thickness / 2);
 		var start = new CPoint(
-			this.isHoriz ? splitPos.x : 0,
-			this.isHoriz ? 0 : splitPos.y)._round();
+			(this.isHoriz ? splitPos.x : 0) - thickdown,
+			(this.isHoriz ? 0 : splitPos.y) - thickdown)
+			._round();
 		var end = new CPoint(
-			this.isHoriz ? splitPos.x : mapSize.x,
-			this.isHoriz ? mapSize.y : splitPos.y)._round();
+			(this.isHoriz ? splitPos.x : mapSize.x) + thickup,
+			(this.isHoriz ? mapSize.y : splitPos.y) + thickup)
+			._round();
 
 		this.inactive = this.isHoriz ? !splitPos.x : !splitPos.y;
-		return CPointSet.fromPointArray([start, end]);
+		return new CBounds(start, end);
 	}
 }