Skip to content

Commit 8409c70

Browse files
bvarga91bvarga91
committed
cool ref: add base class for autofillsection and child classes
for cell autofill and table autofill sections. follow up after: 40e0f23 Signed-off-by: Balazs Varga <[email protected]> Change-Id: Ib0c6e5a06c663b8d43b4a3dc72bad1f373797baa
1 parent 40e0f23 commit 8409c70

File tree

8 files changed

+169
-245
lines changed

8 files changed

+169
-245
lines changed

‎browser/Makefile.am‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -318,7 +318,8 @@ COOL_JS_LST =\
318318
src/canvas/sections/DebugOverlaySection.ts \
319319
src/canvas/sections/PreloadMapSection.ts \
320320
src/canvas/sections/TilesSection.ts \
321-
src/canvas/sections/AutoFillMarkerSection.ts \
321+
src/canvas/sections/AutoFillBaseSection.ts \
322+
src/canvas/sections/CellFillMarkerSection.ts \
322323
src/canvas/sections/ImpressSelectionRectangle.ts \
323324
src/canvas/sections/TableFillMarkerSection.ts \
324325
src/canvas/sections/TableResizeMarkerSection.ts \

‎browser/src/canvas/CanvasSectionProps.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ app.CSections.Comment = { name: 'comment' , zIndex: 7 }; // This class is f
5151

5252
app.CSections.CellCursor = { name: 'OwnCellCursor' , zIndex: 5 };
5353
app.CSections.FocusCell = { name: 'focus cell' , zIndex: 5 };
54-
app.CSections.AutoFillMarker = { name: 'auto fill marker' , zIndex: 6 };
54+
app.CSections.CellFillMarker = { name: 'auto fill marker' , zIndex: 6 };
5555
app.CSections.TableFillMarker = { name: 'table fill marker' , zIndex: 6 };
5656
app.CSections.DefaultForDocumentObjects = { zIndex: 9 };
5757
app.CSections.HTMLObject = { zIndex: 9 };
@@ -83,7 +83,7 @@ app.CSections.Tiles.processingOrder = 60; // Writer & Impress & Calc.
8383
app.CSections.FocusCell.processingOrder = 61; // Calc.
8484
app.CSections.OtherViewCellCursor.processingOrder = 62; // Calc. Other views' cell cursors.
8585
app.CSections.CellCursor.processingOrder = 63; // Calc.
86-
app.CSections.AutoFillMarker.processingOrder = 64; // Calc.
86+
app.CSections.CellFillMarker.processingOrder = 64; // Calc.
8787
app.CSections.TableFillMarker.processingOrder = 65; // Calc.
8888
app.CSections.Overlays.processingOrder = 66; // Writer & Impress & Calc. This is bound to tiles.
8989
app.CSections.Debug.TilePixelGrid.processingOrder = 67; // Writer & Impress & Calc. This is bound to tiles.
@@ -109,7 +109,7 @@ app.CSections.FocusCell.drawingOrder = 91; // Calc.
109109
app.CSections.OtherViewCellCursor.drawingOrder = 92; // Calc.
110110
app.CSections.CellCursor.drawingOrder = 93; // Calc.
111111
app.CSections.TableFillMarker.drawingOrder = 94; // Calc.
112-
app.CSections.AutoFillMarker.drawingOrder = 95; // Calc.
112+
app.CSections.CellFillMarker.drawingOrder = 95; // Calc.
113113
app.CSections.RowGroup.drawingOrder = 100; // Calc.
114114
app.CSections.ColumnGroup.drawingOrder = 110; // Calc.
115115
app.CSections.CornerGroup.drawingOrder = 120; // Calc.

‎browser/src/canvas/sections/AutoFillMarkerSection.ts‎ renamed to ‎browser/src/canvas/sections/AutoFillBaseSection.ts‎

Lines changed: 116 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
// @ts-strict-ignore
21
/* -*- js-indent-level: 8 -*- */
32

43
/*
@@ -12,21 +11,19 @@
1211
*/
1312
/* See CanvasSectionContainer.ts for explanations. */
1413

15-
16-
app.definitions.AutoFillMarkerSection =
17-
class AutoFillMarkerSection extends CanvasSectionObject {
18-
processingOrder: number = app.CSections.AutoFillMarker.processingOrder;
19-
drawingOrder: number = app.CSections.AutoFillMarker.drawingOrder;
20-
zIndex: number = app.CSections.AutoFillMarker.zIndex;
14+
class AutoFillBaseSection extends CanvasSectionObject {
15+
processingOrder: number = 0;
16+
drawingOrder: number = 0;
17+
zIndex: number = 0;
2118

2219
map: any;
2320
cursorBorderWidth: number = 2;
2421
selectionBorderWidth: number = 1;
2522

2623
_showSection: boolean = true; // Store the internal show/hide section through forced readonly hides...
2724

28-
constructor () {
29-
super(app.CSections.AutoFillMarker.name);
25+
constructor(name: string) {
26+
super(name);
3027
this.documentObject = true;
3128
this.map = window.L.Map.THIS;
3229
this.sectionProperties.docLayer = this.map._docLayer;
@@ -35,26 +32,41 @@ class AutoFillMarkerSection extends CanvasSectionObject {
3532

3633
this.sectionProperties.dragStartPosition = null;
3734

38-
var cursorStyle = getComputedStyle(this.sectionProperties.docLayer._cursorDataDiv);
39-
var selectionStyle = getComputedStyle(this.sectionProperties.docLayer._selectionsDataDiv);
35+
var cursorStyle = getComputedStyle(
36+
this.sectionProperties.docLayer._cursorDataDiv,
37+
);
38+
var selectionStyle = getComputedStyle(
39+
this.sectionProperties.docLayer._selectionsDataDiv,
40+
);
4041
var cursorColor = cursorStyle.getPropertyValue('border-top-color');
4142
this.backgroundColor = cursorColor ? cursorColor : this.backgroundColor;
42-
this.cursorBorderWidth = Math.round(window.devicePixelRatio * parseInt(cursorStyle.getPropertyValue('border-top-width')));
43-
this.selectionBorderWidth = Math.round(window.devicePixelRatio * parseInt(selectionStyle.getPropertyValue('border-top-width')));
43+
this.cursorBorderWidth = Math.round(
44+
window.devicePixelRatio *
45+
parseInt(cursorStyle.getPropertyValue('border-top-width')),
46+
);
47+
this.selectionBorderWidth = Math.round(
48+
window.devicePixelRatio *
49+
parseInt(selectionStyle.getPropertyValue('border-top-width')),
50+
);
4451
}
4552

46-
public onInitialize () {
53+
public onInitialize() {
4754
if ((<any>window).mode.isDesktop()) {
4855
this.size = [Math.round(6 * app.dpiScale), Math.round(6 * app.dpiScale)];
49-
}
50-
else {
51-
this.size = [Math.round(16 * app.dpiScale), Math.round(16 * app.dpiScale)];
56+
} else {
57+
this.size = [
58+
Math.round(16 * app.dpiScale),
59+
Math.round(16 * app.dpiScale),
60+
];
5261
}
5362

54-
app.events.on('updatepermission', this.showHideOnPermissionChange.bind(this));
63+
app.events.on(
64+
'updatepermission',
65+
this.showHideOnPermissionChange.bind(this),
66+
);
5567
}
5668

57-
private setMarkerPosition () {
69+
protected setMarkerPosition() {
5870
var center: number = 0;
5971
if (!(<any>window).mode.isDesktop()) {
6072
center = app.calc.cellCursorRectangle.pWidth * 0.5;
@@ -64,50 +76,59 @@ class AutoFillMarkerSection extends CanvasSectionObject {
6476
this.setShowSection(true);
6577

6678
if (this.sectionProperties.selectedAreaPoint !== null)
67-
position = [this.sectionProperties.selectedAreaPoint[0] - center, this.sectionProperties.selectedAreaPoint[1]];
79+
position = [
80+
this.sectionProperties.selectedAreaPoint[0] - center,
81+
this.sectionProperties.selectedAreaPoint[1],
82+
];
6883
else if (this.sectionProperties.cellCursorPoint !== null)
69-
position = [this.sectionProperties.cellCursorPoint[0] - center, this.sectionProperties.cellCursorPoint[1]];
70-
else
71-
this.setShowSection(false);
84+
position = [
85+
this.sectionProperties.cellCursorPoint[0] - center,
86+
this.sectionProperties.cellCursorPoint[1],
87+
];
88+
else this.setShowSection(false);
7289

7390
this.setPosition(position[0], position[1]);
7491
}
7592

76-
private calculatePositionFromPoint (point: Array<number>) {
77-
var calcPoint: Array<number>;
93+
private calculatePositionFromPoint(point: Array<number> | null) {
94+
var calcPoint: Array<number> | null;
7895
if (point === null) {
7996
calcPoint = null;
80-
}
81-
else {
82-
var translation = [Math.floor(this.size[0] * 0.5), Math.floor(this.size[1] * 0.5)];
97+
} else {
98+
var translation = [
99+
Math.floor(this.size[0] * 0.5),
100+
Math.floor(this.size[1] * 0.5),
101+
];
83102
calcPoint = [point[0] - translation[0], point[1] - translation[1]];
84103
}
85104
return calcPoint;
86105
}
87106

88107
// Give bottom right position of selected area, in core pixels. Call with null parameter when auto fill marker is not visible.
89-
public calculatePositionViaCellSelection (point: Array<number>) {
90-
this.sectionProperties.selectedAreaPoint = this.calculatePositionFromPoint(point);
91-
this.setMarkerPosition();
108+
public calculatePositionViaCellSelection(point: Array<number>) {
109+
this.sectionProperties.selectedAreaPoint =
110+
this.calculatePositionFromPoint(point);
111+
this.setMarkerPosition();
92112
}
93113

94114
// Give bottom right position of cell cursor, in core pixels. Call with null parameter when auto fill marker is not visible.
95-
public calculatePositionViaCellCursor (point: Array<number>) {
96-
this.sectionProperties.cellCursorPoint = this.calculatePositionFromPoint(point);
97-
this.setMarkerPosition();
115+
public calculatePositionViaCellCursor(point: Array<number>) {
116+
this.sectionProperties.cellCursorPoint =
117+
this.calculatePositionFromPoint(point);
118+
this.setMarkerPosition();
98119
}
99120

100121
// This is for enhancing contrast of the marker with the background
101122
// similar to what we have for cell cursors.
102-
private drawWhiteOuterBorders () {
123+
private drawWhiteOuterBorders() {
103124
this.context.strokeStyle = 'white';
104125
this.context.lineCap = 'square';
105126
this.context.lineWidth = 1;
106127

107128
var desktop: boolean = (<any>window).mode.isDesktop();
108-
var translation = desktop ?
109-
[this.size[0], this.size[1]] :
110-
[Math.floor(this.size[0] * 0.5), Math.floor(this.size[1] * 0.5)];
129+
var translation = desktop
130+
? [this.size[0], this.size[1]]
131+
: [Math.floor(this.size[0] * 0.5), Math.floor(this.size[1] * 0.5)];
111132
const adjustForRTL = app.map._docLayer.isCalcRTL();
112133
const transformX = (xcoord: number) => {
113134
return adjustForRTL ? this.size[0] - xcoord : xcoord;
@@ -116,14 +137,22 @@ class AutoFillMarkerSection extends CanvasSectionObject {
116137
// top white line
117138
this.context.beginPath();
118139
this.context.moveTo(transformX(-0.5), -0.5);
119-
var borderWidth = this.sectionProperties.selectedAreaPoint ? this.selectionBorderWidth : this.cursorBorderWidth;
120-
this.context.lineTo(transformX(this.size[0] + 0.5 - (desktop ? borderWidth : 0)), - 0.5);
140+
var borderWidth = this.sectionProperties.selectedAreaPoint
141+
? this.selectionBorderWidth
142+
: this.cursorBorderWidth;
143+
this.context.lineTo(
144+
transformX(this.size[0] + 0.5 - (desktop ? borderWidth : 0)),
145+
-0.5,
146+
);
121147
this.context.stroke();
122148

123149
if (!desktop) {
124150
this.context.beginPath();
125151
this.context.moveTo(transformX(this.size[0] - 0.5), -0.5);
126-
this.context.lineTo(transformX(this.size[0] - 0.5), translation[1] - 0.5 - borderWidth);
152+
this.context.lineTo(
153+
transformX(this.size[0] - 0.5),
154+
translation[1] - 0.5 - borderWidth,
155+
);
127156
this.context.stroke();
128157
}
129158

@@ -138,9 +167,8 @@ class AutoFillMarkerSection extends CanvasSectionObject {
138167
this.setShowSection(null);
139168
}
140169

141-
setShowSection(show: boolean) {
142-
if (show !== null)
143-
this._showSection = show;
170+
setShowSection(show: boolean | null) {
171+
if (show !== null) this._showSection = show;
144172

145173
if (app.map._permission === 'readonly') {
146174
super.setShowSection(false);
@@ -149,11 +177,13 @@ class AutoFillMarkerSection extends CanvasSectionObject {
149177
}
150178
}
151179

152-
public onDraw () {
180+
public onDraw() {
153181
this.drawWhiteOuterBorders();
154182
}
155183

156-
private getDocumentPositionFromLocal(point: cool.SimplePoint): cool.SimplePoint {
184+
protected getDocumentPositionFromLocal(
185+
point: cool.SimplePoint,
186+
): cool.SimplePoint {
157187
const p2 = point.clone();
158188
p2.pX += this.position[0];
159189
p2.pY += this.position[1];
@@ -167,53 +197,79 @@ class AutoFillMarkerSection extends CanvasSectionObject {
167197
return p2;
168198
}
169199

170-
private autoScroll(point: cool.SimplePoint) {
200+
protected autoScroll(point: cool.SimplePoint) {
171201
const viewedRectangle = app.activeDocument.activeView.viewedRectangle;
172202
const viewCenter = viewedRectangle.pCenter;
173-
const refX = point.pX > viewCenter[0] ? viewedRectangle.pX2 : viewedRectangle.pX1;
174-
const refY = point.pY > viewCenter[1] ? viewedRectangle.pY2 : viewedRectangle.pY1;
203+
const refX =
204+
point.pX > viewCenter[0] ? viewedRectangle.pX2 : viewedRectangle.pX1;
205+
const refY =
206+
point.pY > viewCenter[1] ? viewedRectangle.pY2 : viewedRectangle.pY1;
175207

176208
if (!app.isXVisibleInTheDisplayedArea(point.x))
177209
app.activeDocument.activeView.scroll(point.pX - refX, 0);
178210
else if (!app.isYVisibleInTheDisplayedArea(point.y))
179211
app.activeDocument.activeView.scroll(0, point.pY - refY);
180212
}
181213

182-
public onMouseMove (point: cool.SimplePoint, dragDistance: Array<number>, e: MouseEvent) {
183-
if (dragDistance === null || !this.sectionProperties.docLayer._cellAutoFillAreaPixels)
214+
public onMouseMove(
215+
point: cool.SimplePoint,
216+
dragDistance: Array<number>,
217+
e: MouseEvent,
218+
) {
219+
if (
220+
dragDistance === null ||
221+
!this.sectionProperties.docLayer._cellAutoFillAreaPixels
222+
)
184223
return; // No dragging or no event handling or auto fill marker is not visible.
185224

186225
const p2 = this.getDocumentPositionFromLocal(point);
187226
app.map._docLayer._postMouseEvent('move', p2.x, p2.y, 1, 1, 0);
188227

189-
if (!this.containerObject.isMouseInside() && this.containerObject.isDraggingSomething())
228+
if (
229+
!this.containerObject.isMouseInside() &&
230+
this.containerObject.isDraggingSomething()
231+
)
190232
this.autoScroll(this.getDocumentPositionFromLocal(point));
191233
}
192234

193-
public onMouseUp (point: cool.SimplePoint, e: MouseEvent) {
235+
public onMouseUp(point: cool.SimplePoint, e: MouseEvent) {
194236
const p2 = this.getDocumentPositionFromLocal(point);
195237
app.map._docLayer._postMouseEvent('buttonup', p2.x, p2.y, 1, 1, 0);
196238
}
197239

198-
public onMouseDown (point: cool.SimplePoint, e: MouseEvent) {
240+
public onMouseDown(point: cool.SimplePoint, e: MouseEvent) {
199241
// revert coordinates to global and fire event again with position in the center
200242
// inverse of convertPositionToCanvasLocale
201243
const p2 = this.getCenterRegardingDocument();
202244

203245
app.map._docLayer._postMouseEvent('buttondown', p2.x, p2.y, 1, 1, 0);
204246
}
205247

206-
public onMouseEnter () {
248+
public onMouseEnter() {
207249
this.context.canvas.style.cursor = 'crosshair';
208250
}
209251

210-
public onNewDocumentTopLeft () {
252+
public onNewDocumentTopLeft() {
211253
this.setMarkerPosition();
212254
}
213255

214-
public onDoubleClick (point: cool.SimplePoint, e: MouseEvent) {
256+
public onDoubleClick(point: cool.SimplePoint, e: MouseEvent) {
215257
const pos = this.getCenterRegardingDocument();
216-
this.sectionProperties.docLayer._postMouseEvent('buttondown', pos.x, pos.y, 2, 1, 0);
217-
this.sectionProperties.docLayer._postMouseEvent('buttonup', pos.x, pos.y, 2, 1, 0);
258+
this.sectionProperties.docLayer._postMouseEvent(
259+
'buttondown',
260+
pos.x,
261+
pos.y,
262+
2,
263+
1,
264+
0,
265+
);
266+
this.sectionProperties.docLayer._postMouseEvent(
267+
'buttonup',
268+
pos.x,
269+
pos.y,
270+
2,
271+
1,
272+
0,
273+
);
218274
}
219-
};
275+
}

‎browser/src/canvas/sections/CellFillMarkerSection.ts‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
/* -*- js-indent-level: 8 -*- */
2+
3+
/*
4+
* Copyright the Collabora Online contributors.
5+
*
6+
* SPDX-License-Identifier: MPL-2.0
7+
*
8+
* This Source Code Form is subject to the terms of the Mozilla Public
9+
* License, v. 2.0. If a copy of the MPL was not distributed with this
10+
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
11+
*/
12+
/* See CanvasSectionContainer.ts for explanations. */
13+
14+
app.definitions.CellFillMarkerSection = class CellFillMarkerSection extends (
15+
AutoFillBaseSection
16+
) {
17+
processingOrder: number = app.CSections.CellFillMarker.processingOrder;
18+
drawingOrder: number = app.CSections.CellFillMarker.drawingOrder;
19+
zIndex: number = app.CSections.CellFillMarker.zIndex;
20+
21+
constructor() {
22+
super(app.CSections.CellFillMarker.name);
23+
}
24+
};

0 commit comments

Comments
 (0)