add auto fill popup UI

AutoFill popup has two options:
- Copy cells
- Fill series

Signed-off-by: Bayram Çiçek <bayram.cicek@collabora.com>
Change-Id: I08ad88afad1bb6bd2d746a9a8964f1b4446ae7c7

browser/Makefile.am

@@ -376,6 +376,7 @@ COOL_JS_LST =\
 	src/control/Control.Sidebar.js \
 	src/control/AutoCompletePopup.ts \
 	src/control/Control.Mention.ts \
+	src/control/Control.AutoFillOptions.ts \
 	src/control/Control.Zotero.js \
 	src/control/Search.js \
 	src/control/Permission.js \

browser/src/control/Control.AutoFillOptions.ts

@@ -0,0 +1,106 @@
+/* -*- js-indent-level: 8 -*- */
+/*
+ * Copyright the Collabora Online contributors.
+ *
+ * SPDX-License-Identifier: MPL-2.0
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+/*
+ * Control.AutoFillOptions - class for auto fill popup
+ */
+
+/* global app */
+
+class AutoFillOptions extends L.Control.AutoCompletePopup {
+	map: ReturnType<typeof L.map>;
+	newPopupData: PopupData;
+	firstChar: string;
+	users: any;
+	itemList: Array<any>;
+	data: MessageEvent<any>;
+	autoFillPopupPoint: Point;
+
+	constructor(map: ReturnType<typeof L.map>) {
+		super('autoFillPopup', map);
+	}
+
+	onAdd() {
+		this.newPopupData.isAutoCompletePopup = true;
+		this.map.on('openautofillpopup', this.openAutoFillPopup, this);
+		this.map.on('closementionpopup', this.closeMentionPopup, this);
+		this.map.on('sendautofilllocation', this.sendAutoFillLocation, this);
+		this.firstChar = null;
+		this.users = null;
+		this.itemList = null;
+	}
+
+	getAutoFillRectanglePosition(ev: FireEvent): Point {
+		var currPos = ev.data;
+		var origin = this.map.getPixelOrigin();
+		var panePos = this.map._getMapPanePos();
+		return new L.Point(
+			Math.round(currPos.x + panePos.x - origin.x),
+			Math.round(currPos.y + panePos.y - origin.y),
+		);
+	}
+
+	sendAutoFillLocation(ev: FireEvent) {
+		this.openAutoFillPopup({ data: ev.data });
+	}
+
+	getPopupEntries(): any[] {
+		const entries: any[] = [{ text: '', columns: [{ text: 'Copy cells' }], row: '' },
+		{ text: '', columns: [{ text: 'Fill series' }], row: '' }];
+		return entries;
+	}
+
+	openAutoFillPopup(ev: FireEvent): void {
+		const framePos = this.getAutoFillRectanglePosition(ev); // bottom-right position
+		const entries = this.getPopupEntries();
+		let data: PopupData;
+
+		if (entries.length > 0) {
+			const control = this.getTreeJSON();
+
+			if (L.DomUtil.get(this.popupId))
+				this.closeMentionPopup({ typingMention: true } as CloseMessageEvent);
+			data = this.newPopupData;
+			data.children[0].children[0] = control;
+			(data.children[0].children[0] as TreeWidget).entries = entries;
+		}
+
+		// add position
+		data.posx = framePos.x;
+		data.posy = framePos.y;
+		this.sendJSON(data);
+	}
+
+	closeMentionPopup(ev: CloseMessageEvent) {
+		// console.error('close closeMentionPopup');
+
+		super.closePopup();
+		if (!ev.typingMention) {
+			this.map._docLayer._typingMention = false;
+			this.map._docLayer._mentionText = [];
+		}
+	}
+
+	callback(objectType: any, eventType: any, object: any, index: number) {
+		// console.error("eventType: " + eventType);
+		if (eventType === 'close') {
+			// console.error('close callback');
+			this.closeMentionPopup({ typingMention: false } as CloseMessageEvent);
+		} else if (eventType === 'select' || eventType === 'activate') {
+			// console.error('select or activate triggered');
+		} else if (eventType === 'keydown') {
+			// console.error('keydown');
+		}
+		return false;
+	}
+}
+L.control.autofilloptions = function (map: any) {
+	return new AutoFillOptions(map);
+};

browser/src/control/Control.UIManager.js

@@ -220,6 +220,7 @@ L.Control.UIManager = L.Control.extend({
 			this.map.addControl(L.control.mobileWizardPopup());
 
 			this.map.mention = L.control.mention(this.map);
+			this.map.autofilloptions = L.control.autofilloptions(this.map);
 		}
 
 		setupToolbar(this.map);

browser/src/layer/tile/AutoFillMarkerSection.ts

@@ -208,6 +208,9 @@ class AutoFillMarkerSection extends CanvasSectionObject {
 			this.sectionProperties.docLayer._postMouseEvent('buttonup', pos.x, pos.y, 1, 1, 0);
 		}
 
+		// console.error("--- MOUSE UP");
+		this.map._docLayer.isFromAutoFill = true;
+
 		this.map.scrollingIsHandled = false;
 		this.stopPropagating();
 		e.stopPropagation();

browser/src/layer/tile/CalcTileLayer.js

@@ -92,6 +92,7 @@ L.CalcTileLayer = L.CanvasTileLayer.extend({
 		app.sectionContainer.addSection(new app.definitions.AutoFillMarkerSection());
 
 		this.insertMode = false;
+		this.isFromAutoFill = false;
 		this._resetInternalState();
 		this._sheetSwitch = new L.SheetSwitchViewRestore(map);
 	},

browser/src/layer/tile/CanvasTileLayer.js

@@ -3620,6 +3620,13 @@ L.CanvasTileLayer = L.Layer.extend({
 			var topLeftPixels = this._twipsToCorePixels(topLeftTwips);
 			var offsetPixels = this._twipsToCorePixels(offset);
 			this._cellAutoFillAreaPixels = L.LOUtil.createRectangle(topLeftPixels.x, topLeftPixels.y, offsetPixels.x, offsetPixels.y);
+
+			// if comes from onMouseUp event of browser/src/canvas/sections/AutoFillMarkerSection.ts
+			// open popup with location data
+			if (this._map._docLayer.isFromAutoFill) {
+				this._map.fire('sendautofilllocation', { data: topLeftPixels });
+				this._map._docLayer.isFromAutoFill = false;
+			}
 		}
 		else {
 			this._cellAutoFillAreaPixels = null;