Use CellSelectionHandle sections on mobile view.
Signed-off-by: Gökay Şatır <gokaysatir@collabora.com> Change-Id: I4409981e8de2fca6211236590f3096b765456ed6pull/9012/head
parent
ecdcc369d6
commit
a15e4e25e0
|
@ -132,6 +132,7 @@
|
||||||
/src/layer/SplitPanesContext.ts
|
/src/layer/SplitPanesContext.ts
|
||||||
/src/layer/tile/AutoFillMarkerSection.ts
|
/src/layer/tile/AutoFillMarkerSection.ts
|
||||||
/src/layer/tile/CellCursorSection.ts
|
/src/layer/tile/CellCursorSection.ts
|
||||||
|
/src/layer/tile/CellSelectionHandleSection.ts
|
||||||
/src/layer/tile/HTMLObjectSection.ts
|
/src/layer/tile/HTMLObjectSection.ts
|
||||||
/src/layer/tile/CalcValidityDropDownSection.ts
|
/src/layer/tile/CalcValidityDropDownSection.ts
|
||||||
/src/layer/tile/TextSelectionHandleSection.ts
|
/src/layer/tile/TextSelectionHandleSection.ts
|
||||||
|
|
|
@ -225,6 +225,7 @@ COOL_JS_LST =\
|
||||||
src/layer/tile/TilesSection.ts \
|
src/layer/tile/TilesSection.ts \
|
||||||
src/layer/tile/AutoFillMarkerSection.ts \
|
src/layer/tile/AutoFillMarkerSection.ts \
|
||||||
src/layer/tile/CellCursorSection.ts \
|
src/layer/tile/CellCursorSection.ts \
|
||||||
|
src/layer/tile/CellSelectionHandleSection.ts \
|
||||||
src/layer/tile/HTMLObjectSection.ts \
|
src/layer/tile/HTMLObjectSection.ts \
|
||||||
src/layer/tile/CalcValidityDropDownSection.ts \
|
src/layer/tile/CalcValidityDropDownSection.ts \
|
||||||
src/layer/tile/TextSelectionHandleSection.ts \
|
src/layer/tile/TextSelectionHandleSection.ts \
|
||||||
|
|
|
@ -416,7 +416,7 @@ class CanvasSectionObject {
|
||||||
|
|
||||||
/// Document objects only.
|
/// Document objects only.
|
||||||
public setPosition(x: number, y: number): void {
|
public setPosition(x: number, y: number): void {
|
||||||
if (this.documentObject !== true)
|
if (this.documentObject !== true || !this.containerObject)
|
||||||
return;
|
return;
|
||||||
|
|
||||||
x = Math.round(x);
|
x = Math.round(x);
|
||||||
|
|
|
@ -41,6 +41,7 @@ L.CSections.Scroll = { name: 'scroll' , zIndex: 8};
|
||||||
L.CSections.Comment = { name: 'comment' , zIndex: 9 }; // This class is for comment markers. It is a document object. One should change instance's name after initializing (there may be many instances of this class).
|
L.CSections.Comment = { name: 'comment' , zIndex: 9 }; // This class is for comment markers. It is a document object. One should change instance's name after initializing (there may be many instances of this class).
|
||||||
|
|
||||||
L.CSections.AutoFillMarker = { name: 'auto fill marker' , zIndex: 10};
|
L.CSections.AutoFillMarker = { name: 'auto fill marker' , zIndex: 10};
|
||||||
|
L.CSections.DefaultForDocumentObjects = { zIndex: 10 };
|
||||||
L.CSections.HTMLObject = { zIndex: 10 };
|
L.CSections.HTMLObject = { zIndex: 10 };
|
||||||
|
|
||||||
L.CSections.ContentControl = { name: 'content control' , zIndex: 11 };
|
L.CSections.ContentControl = { name: 'content control' , zIndex: 11 };
|
||||||
|
@ -94,7 +95,8 @@ L.CSections.AutoFillMarker.processingOrder = 1; // Calc.
|
||||||
L.CSections.AutoFillMarker.drawingOrder = 1; // Calc.
|
L.CSections.AutoFillMarker.drawingOrder = 1; // Calc.
|
||||||
L.CSections.HTMLObject.drawingOrder = 55; // Calc.
|
L.CSections.HTMLObject.drawingOrder = 55; // Calc.
|
||||||
L.CSections.HTMLObject.processingOrder = 1; // Calc.
|
L.CSections.HTMLObject.processingOrder = 1; // Calc.
|
||||||
|
L.CSections.DefaultForDocumentObjects.processingOrder = 10;
|
||||||
|
L.CSections.DefaultForDocumentObjects.drawingOrder = 10;
|
||||||
|
|
||||||
/* zIndex = 11 */
|
/* zIndex = 11 */
|
||||||
L.CSections.ContentControl.processingOrder = 1; // Writer.
|
L.CSections.ContentControl.processingOrder = 1; // Writer.
|
||||||
|
|
|
@ -959,27 +959,17 @@ L.CanvasTileLayer = L.Layer.extend({
|
||||||
this._selectionHandles.end = new app.definitions.textSelectionHandleSection('selection_end_handle', 30, 44, new app.definitions.simplePoint(0, 0), 'text-selection-handle-end', false);
|
this._selectionHandles.end = new app.definitions.textSelectionHandleSection('selection_end_handle', 30, 44, new app.definitions.simplePoint(0, 0), 'text-selection-handle-end', false);
|
||||||
this._selectionHandles.active = false;
|
this._selectionHandles.active = false;
|
||||||
|
|
||||||
|
// Cell selection handles (mobile & tablet).
|
||||||
|
this._cellSelectionHandleStart = new app.definitions.cellSelectionHandle('cell_selection_handle_start');
|
||||||
|
this._cellSelectionHandleEnd = new app.definitions.cellSelectionHandle('cell_selection_handle_end');
|
||||||
|
|
||||||
setTimeout(function() {
|
setTimeout(function() {
|
||||||
app.sectionContainer.addSection(this._map._docLayer._selectionHandles.start);
|
app.sectionContainer.addSection(this._map._docLayer._selectionHandles.start);
|
||||||
app.sectionContainer.addSection(this._map._docLayer._selectionHandles.end);
|
app.sectionContainer.addSection(this._map._docLayer._selectionHandles.end);
|
||||||
|
app.sectionContainer.addSection(this._map._docLayer._cellSelectionHandleStart);
|
||||||
|
app.sectionContainer.addSection(this._map._docLayer._cellSelectionHandleEnd);
|
||||||
}.bind(this), 400);
|
}.bind(this), 400);
|
||||||
|
|
||||||
this._cellResizeMarkerStart = L.marker(new L.LatLng(0, 0), {
|
|
||||||
icon: L.divIcon({
|
|
||||||
className: 'spreadsheet-cell-resize-marker',
|
|
||||||
iconSize: null
|
|
||||||
}),
|
|
||||||
draggable: true
|
|
||||||
});
|
|
||||||
|
|
||||||
this._cellResizeMarkerEnd = L.marker(new L.LatLng(0, 0), {
|
|
||||||
icon: L.divIcon({
|
|
||||||
className: 'spreadsheet-cell-resize-marker',
|
|
||||||
iconSize: null
|
|
||||||
}),
|
|
||||||
draggable: true
|
|
||||||
});
|
|
||||||
|
|
||||||
this._referenceMarkerStart = L.marker(new L.LatLng(0, 0), {
|
this._referenceMarkerStart = L.marker(new L.LatLng(0, 0), {
|
||||||
icon: L.divIcon({
|
icon: L.divIcon({
|
||||||
className: 'spreadsheet-cell-resize-marker',
|
className: 'spreadsheet-cell-resize-marker',
|
||||||
|
@ -4379,92 +4369,6 @@ L.CanvasTileLayer = L.Layer.extend({
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
// Update dragged text selection.
|
|
||||||
_onCellResizeMarkerDrag: function (e) {
|
|
||||||
if (e.type === 'dragstart') {
|
|
||||||
e.target.isDragged = true;
|
|
||||||
}
|
|
||||||
else if (e.type === 'drag') {
|
|
||||||
var event = e.originalEvent;
|
|
||||||
if (e.originalEvent.touches && e.originalEvent.touches.length > 0) {
|
|
||||||
event = e.originalEvent.touches[0];
|
|
||||||
}
|
|
||||||
if (!event.pageX && !event.pageY) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// handle scrolling
|
|
||||||
|
|
||||||
// This is rather hacky, but it seems to be the only way to make the
|
|
||||||
// marker follow the mouse cursor if the document is autoscrolled under
|
|
||||||
// us. (This can happen when we're changing the selection if the cursor
|
|
||||||
// moves somewhere that is considered off screen.)
|
|
||||||
|
|
||||||
// Onscreen position of the cursor, i.e. relative to the browser window
|
|
||||||
var boundingrect = e.target._icon.getBoundingClientRect();
|
|
||||||
var cursorPos = L.point(boundingrect.left, boundingrect.top);
|
|
||||||
var expectedPos = L.point(event.pageX, event.pageY).subtract(e.target.dragging._draggable.startOffset);
|
|
||||||
|
|
||||||
// Dragging the selection handles vertically more than one line on a touch
|
|
||||||
// device is more or less impossible without this hack.
|
|
||||||
if (!(typeof e.originalEvent.type === 'string' && e.originalEvent.type === 'touchmove')) {
|
|
||||||
// If the map has been scrolled, but the cursor hasn't been updated yet, then
|
|
||||||
// the current mouse position differs.
|
|
||||||
if (!expectedPos.equals(cursorPos)) {
|
|
||||||
var correction = expectedPos.subtract(cursorPos);
|
|
||||||
|
|
||||||
e.target.dragging._draggable._startPoint = e.target.dragging._draggable._startPoint.add(correction);
|
|
||||||
e.target.dragging._draggable._startPos = e.target.dragging._draggable._startPos.add(correction);
|
|
||||||
e.target.dragging._draggable._newPos = e.target.dragging._draggable._newPos.add(correction);
|
|
||||||
|
|
||||||
e.target.dragging._draggable._updatePosition();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
var containerPos = new L.Point(expectedPos.x - this._map._container.getBoundingClientRect().left,
|
|
||||||
expectedPos.y - this._map._container.getBoundingClientRect().top);
|
|
||||||
|
|
||||||
containerPos = containerPos.add(e.target.dragging._draggable.startOffset);
|
|
||||||
this._map.fire('handleautoscroll', {pos: containerPos, map: this._map});
|
|
||||||
}
|
|
||||||
else if (e.type === 'dragend') {
|
|
||||||
e.target.isDragged = false;
|
|
||||||
|
|
||||||
// handle scrolling
|
|
||||||
this._map.focus();
|
|
||||||
this._map.fire('scrollvelocity', {vx: 0, vy: 0});
|
|
||||||
}
|
|
||||||
|
|
||||||
// modify the mouse position - move to center of the marker
|
|
||||||
var aMousePosition = e.target.getLatLng();
|
|
||||||
aMousePosition = this._map.project(aMousePosition);
|
|
||||||
var size;
|
|
||||||
if (this._cellResizeMarkerStart === e.target) {
|
|
||||||
size = this._cellResizeMarkerStart._icon.getBoundingClientRect();
|
|
||||||
}
|
|
||||||
else if (this._cellResizeMarkerEnd === e.target) {
|
|
||||||
size = this._cellResizeMarkerEnd._icon.getBoundingClientRect();
|
|
||||||
}
|
|
||||||
|
|
||||||
aMousePosition = aMousePosition.add(new L.Point(size.width / 2, size.height / 2));
|
|
||||||
aMousePosition = this._map.unproject(aMousePosition);
|
|
||||||
aMousePosition = this._latLngToTwips(aMousePosition);
|
|
||||||
|
|
||||||
if (this._cellResizeMarkerStart === e.target) {
|
|
||||||
this._postSelectTextEvent('start', aMousePosition.x, aMousePosition.y);
|
|
||||||
if (e.type === 'dragend') {
|
|
||||||
this._onUpdateCellResizeMarkers();
|
|
||||||
window.IgnorePanning = undefined;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
else if (this._cellResizeMarkerEnd === e.target) {
|
|
||||||
this._postSelectTextEvent('end', aMousePosition.x, aMousePosition.y);
|
|
||||||
if (e.type === 'dragend') {
|
|
||||||
this._onUpdateCellResizeMarkers();
|
|
||||||
window.IgnorePanning = undefined;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
_onReferenceMarkerDrag: function(e) {
|
_onReferenceMarkerDrag: function(e) {
|
||||||
if (e.type === 'dragstart') {
|
if (e.type === 'dragstart') {
|
||||||
e.target.isDragged = true;
|
e.target.isDragged = true;
|
||||||
|
@ -4735,39 +4639,28 @@ L.CanvasTileLayer = L.Layer.extend({
|
||||||
_onUpdateCellResizeMarkers: function () {
|
_onUpdateCellResizeMarkers: function () {
|
||||||
var selectionOnDesktop = window.mode.isDesktop() && (this._cellSelectionArea || app.calc.cellCursorVisible);
|
var selectionOnDesktop = window.mode.isDesktop() && (this._cellSelectionArea || app.calc.cellCursorVisible);
|
||||||
|
|
||||||
if (!selectionOnDesktop &&
|
if (!selectionOnDesktop && (!this._cellCSelections.empty() || app.calc.cellCursorVisible)) {
|
||||||
(!this._cellCSelections.empty() || app.calc.cellCursorVisible)) {
|
|
||||||
if (this._isEmptyRectangle(this._cellSelectionArea) && !app.calc.cellCursorVisible) {
|
if (this._isEmptyRectangle(this._cellSelectionArea) && !app.calc.cellCursorVisible)
|
||||||
return;
|
return;
|
||||||
}
|
|
||||||
|
this._cellSelectionHandleStart.setShowSection(true);
|
||||||
|
this._cellSelectionHandleEnd.setShowSection(true);
|
||||||
|
|
||||||
let latLngCursor = this._simpleRectangleToLatLngBounds(app.calc.cellCursorRectangle.clone());
|
let latLngCursor = this._simpleRectangleToLatLngBounds(app.calc.cellCursorRectangle.clone());
|
||||||
|
|
||||||
var cellRectangle = this._cellSelectionArea ? this._cellSelectionArea : latLngCursor;
|
var cellRectangle = this._cellSelectionArea ? this._cellSelectionArea : latLngCursor;
|
||||||
|
|
||||||
if (!this._cellResizeMarkerStart.isDragged) {
|
const posStart = this._latLngToCorePixels(cellRectangle.getNorthWest());
|
||||||
this._map.addLayer(this._cellResizeMarkerStart);
|
const posEnd = this._latLngToCorePixels(cellRectangle.getSouthEast());
|
||||||
var posStart = this._map.project(cellRectangle.getNorthWest());
|
|
||||||
var sizeStart = this._cellResizeMarkerStart._icon.getBoundingClientRect();
|
const offset = this._cellSelectionHandleStart.sectionProperties.circleRadius;
|
||||||
posStart = posStart.subtract(new L.Point(sizeStart.width / 2, sizeStart.height / 2));
|
this._cellSelectionHandleStart.setPosition(posStart.x - offset, posStart.y - offset);
|
||||||
posStart = this._map.unproject(posStart);
|
this._cellSelectionHandleEnd.setPosition(posEnd.x - offset, posEnd.y - offset);
|
||||||
this._cellResizeMarkerStart.setLatLng(posStart);
|
|
||||||
}
|
|
||||||
if (!this._cellResizeMarkerEnd.isDragged) {
|
|
||||||
this._map.addLayer(this._cellResizeMarkerEnd);
|
|
||||||
var posEnd = this._map.project(cellRectangle.getSouthEast());
|
|
||||||
var sizeEnd = this._cellResizeMarkerEnd._icon.getBoundingClientRect();
|
|
||||||
posEnd = posEnd.subtract(new L.Point(sizeEnd.width / 2, sizeEnd.height / 2));
|
|
||||||
posEnd = this._map.unproject(posEnd);
|
|
||||||
this._cellResizeMarkerEnd.setLatLng(posEnd);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
else if (selectionOnDesktop) {
|
else {
|
||||||
this._map.removeLayer(this._cellResizeMarkerStart);
|
this._cellSelectionHandleStart.setShowSection(false);
|
||||||
this._map.removeLayer(this._cellResizeMarkerEnd);
|
this._cellSelectionHandleEnd.setShowSection(false);
|
||||||
} else {
|
|
||||||
this._map.removeLayer(this._cellResizeMarkerStart);
|
|
||||||
this._map.removeLayer(this._cellResizeMarkerEnd);
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -5500,8 +5393,6 @@ L.CanvasTileLayer = L.Layer.extend({
|
||||||
}
|
}
|
||||||
}, this);
|
}, this);
|
||||||
|
|
||||||
this._cellResizeMarkerStart.on('dragstart drag dragend', this._onCellResizeMarkerDrag, this);
|
|
||||||
this._cellResizeMarkerEnd.on('dragstart drag dragend', this._onCellResizeMarkerDrag, this);
|
|
||||||
this._referenceMarkerStart.on('dragstart drag dragend', this._onReferenceMarkerDrag, this);
|
this._referenceMarkerStart.on('dragstart drag dragend', this._onReferenceMarkerDrag, this);
|
||||||
this._referenceMarkerEnd.on('dragstart drag dragend', this._onReferenceMarkerDrag, this);
|
this._referenceMarkerEnd.on('dragstart drag dragend', this._onReferenceMarkerDrag, this);
|
||||||
|
|
||||||
|
|
|
@ -0,0 +1,98 @@
|
||||||
|
/* global Proxy _ */
|
||||||
|
/*
|
||||||
|
* 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/.
|
||||||
|
*/
|
||||||
|
|
||||||
|
class CellSelectionHandle extends CanvasSectionObject {
|
||||||
|
|
||||||
|
constructor (name: string) {
|
||||||
|
super({
|
||||||
|
name: name, // There will be multiple instances of this class. For the viewer's cursor, name will be owncellcursor. Others will have viewId-cellcursor.
|
||||||
|
anchor: [],
|
||||||
|
position: new Array<number>(0),
|
||||||
|
size: [10, 10],
|
||||||
|
expand: '',
|
||||||
|
showSection: false,
|
||||||
|
processingOrder: L.CSections.DefaultForDocumentObjects.processingOrder,
|
||||||
|
drawingOrder: L.CSections.DefaultForDocumentObjects.drawingOrder,
|
||||||
|
zIndex: L.CSections.DefaultForDocumentObjects.zIndex,
|
||||||
|
interactable: true,
|
||||||
|
sectionProperties: {},
|
||||||
|
});
|
||||||
|
|
||||||
|
this.sectionProperties.circleRadius = 10 * app.dpiScale;
|
||||||
|
this.size = [this.sectionProperties.circleRadius * 2, this.sectionProperties.circleRadius * 2];
|
||||||
|
|
||||||
|
this.documentObject = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
private onDragEnd(point: number[]) {
|
||||||
|
app.map.focus();
|
||||||
|
app.map.fire('scrollvelocity', {vx: 0, vy: 0});
|
||||||
|
|
||||||
|
const newPoint = new cool.SimplePoint(0, 0);
|
||||||
|
newPoint.pX = this.position[0] + point[0];
|
||||||
|
newPoint.pY = this.position[1] + point[1];
|
||||||
|
|
||||||
|
this.sharedOnDragAndEnd(newPoint);
|
||||||
|
app.map._docLayer._onUpdateCellResizeMarkers();
|
||||||
|
app.map.scrollingIsHandled = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
private sharedOnDragAndEnd(point: cool.SimplePoint) {
|
||||||
|
const type = this.name === 'cell_selection_handle_start' ? 'start' : 'end';
|
||||||
|
app.map._docLayer._postSelectTextEvent(type, point.x, point.y);
|
||||||
|
}
|
||||||
|
|
||||||
|
private onDrag(point: number[]) {
|
||||||
|
const newPoint = new cool.SimplePoint(0, 0);
|
||||||
|
newPoint.pX = this.position[0] + point[0];
|
||||||
|
newPoint.pY = this.position[1] + point[1];
|
||||||
|
|
||||||
|
app.map.fire('handleautoscroll', { pos: { x: 0, y: newPoint.cY }, map: app.map });
|
||||||
|
|
||||||
|
this.sharedOnDragAndEnd(newPoint);
|
||||||
|
}
|
||||||
|
|
||||||
|
public onDraw() {
|
||||||
|
this.context.strokeStyle = 'black';
|
||||||
|
this.context.lineWidth = 2;
|
||||||
|
|
||||||
|
this.context.beginPath();
|
||||||
|
this.context.arc(this.sectionProperties.circleRadius, this.sectionProperties.circleRadius, this.sectionProperties.circleRadius, 0, 2 * Math.PI);
|
||||||
|
if (this.containerObject.isDraggingSomething() && this.containerObject.targetSection === this.name)
|
||||||
|
this.context.fill();
|
||||||
|
else
|
||||||
|
this.context.stroke();
|
||||||
|
}
|
||||||
|
|
||||||
|
onMouseMove(point: number[], dragDistance: number[], e: MouseEvent): void {
|
||||||
|
e.stopPropagation();
|
||||||
|
if (this.containerObject.isDraggingSomething()) {
|
||||||
|
app.map.scrollingIsHandled = true;
|
||||||
|
this.stopPropagating();
|
||||||
|
this.onDrag(point);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onMouseDown(point: number[], e: MouseEvent): void {
|
||||||
|
e.stopPropagation();
|
||||||
|
this.stopPropagating();
|
||||||
|
}
|
||||||
|
|
||||||
|
onMouseUp(point: number[], e: MouseEvent): void {
|
||||||
|
e.stopPropagation();
|
||||||
|
if (this.containerObject.isDraggingSomething()) {
|
||||||
|
this.stopPropagating();
|
||||||
|
this.onDragEnd(point);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
app.definitions.cellSelectionHandle = CellSelectionHandle;
|
Loading…
Reference in New Issue