haraldwolff
/
collabora-online
mirror of https://github.com/CollaboraOnline/online.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Control.Scroll.js: Move to typescript. 

Signed-off-by: Gökay Şatır <gokay.satir@collabora.com>
Change-Id: Iac7c15fa5ea1fb8fe78119ea28032017552d93d4
pull/1566/head
Gökay Şatır 2021-02-10 21:18:31 +03:00 committed by Gökay ŞATIR
parent 5c3cdcc5a4
commit 3d507fb3a5
12 changed files with 658 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -141,3 +141,4 @@ Makecache
# autoconf stuff
autogen.input
loleaflet/src/layer/tile/TilesSection.js
loleaflet/src/layer/tile/ScrollSection.js

1
loleaflet/Makefile.am
View File

@ -222,6 +222,7 @@ LOLEAFLET_JS =\
src/layer/tile/CanvasSectionProps.js \
src/layer/tile/CanvasSectionContainer.js \
src/layer/tile/TilesSection.js \
src/layer/tile/ScrollSection.js \
src/layer/vector/CanvasOverlay.js \
src/layer/tile/GridLayer.js \
src/layer/tile/TileLayer.js \

2
loleaflet/src/control/Control.Header.js
View File

@ -287,6 +287,7 @@ L.Control.Header = L.Class.extend({
}
};
this._map.wholeRowSelected = true; // This variable is set early, state change will set this again.
this._map.sendUnoCommand('.uno:SelectRow ', command);
},
@ -431,6 +432,7 @@ L.Control.Header = L.Class.extend({
}
};
this._map.wholeColumnSelected = true; // This variable is set early, state change will set this again.
this._map.sendUnoCommand('.uno:SelectColumn ', command);
},

1
loleaflet/src/control/Control.UIManager.js
View File

@ -62,7 +62,6 @@ L.Control.UIManager = L.Control.extend({
setupToolbar(this.map);
this.map.addControl(L.control.documentNameInput());
this.map.addControl(L.control.scroll());
this.map.addControl(L.control.alertDialog());
this.mobileWizard = L.control.mobileWizard();
this.map.addControl(this.mobileWizard);

23
loleaflet/src/layer/tile/CalcTileLayer.js
View File

@ -853,6 +853,26 @@ L.CalcTileLayer = L.CanvasTileLayer.extend({
}
},
_onRowColSelCount: function (state) {
if (state.trim() !== '') {
var rowCount = parseInt(state.split(', ')[0].trim().split(' ')[0].replace(',', '').replace(',', ''));
var columnCount = parseInt(state.split(', ')[1].trim().split(' ')[0].replace(',', '').replace(',', ''));
if (rowCount > 1000000)
this._map.wholeColumnSelected = true;
else
this._map.wholeColumnSelected = false;
if (columnCount === 1024)
this._map.wholeRowSelected = true;
else
this._map.wholeRowSelected = false;
}
else {
this._map.wholeColumnSelected = false;
this._map.wholeRowSelected = false;
}
},
_onCommandStateChanged: function (e) {
if (e.commandName === '.uno:FreezePanesColumn') {
@ -861,6 +881,9 @@ L.CalcTileLayer = L.CanvasTileLayer.extend({
else if (e.commandName === '.uno:FreezePanesRow') {
this._onSplitStateChanged(e, false /* isSplitCol */);
}
else if (e.commandName === '.uno:RowColSelCount') {
this._onRowColSelCount(e.state.replace('Selected:', '').replace('row', '').replace('column', '').replace('s', ''));
}
},
_onSplitStateChanged: function (e, isSplitCol) {

25
loleaflet/src/layer/tile/CanvasSectionContainer.ts
View File

@ -134,7 +134,7 @@ class CanvasSectionObject {
onClick: Function; // Parameters: Point [x, y], e (native event object)
onDoubleClick: Function; // Parameters: Point [x, y], e (native event object)
onContextMenu: Function;
onMouseWheel: Function; // Parameters: Point [x, y], DeltaY, e (native event object)
onMouseWheel: Function; // Parameters: Point [x, y], Delta [X, Y], e (native event object)
onLongPress: Function; // Parameters: Point [x, y], e (native event object)
onMultiTouchStart: Function; // Parameters: e (native event object)
onMultiTouchMove: Function; // Parameters: Point [x, y], DragDistance [x, y], e (native event object)
@ -464,10 +464,10 @@ class CanvasSectionContainer {
}
}
private propagateOnMouseWheel(section: CanvasSectionObject, position: Array<number>, deltaY: number, e: MouseEvent) {
private propagateOnMouseWheel(section: CanvasSectionObject, position: Array<number>, delta: Array<number>, e: MouseEvent) {
for (var i: number = section.boundsList.length - 1; i > -1; i--) {
if (section.boundsList[i].interactable)
section.boundsList[i].onMouseWheel(position, deltaY, e);
section.boundsList[i].onMouseWheel(position, delta, e);
if (section.boundsList[i].name === this.lowestPropagatedBoundSection)
break; // Stop propagation.
@ -506,14 +506,15 @@ class CanvasSectionContainer {
private onClick (e: MouseEvent) {
if (!this.draggingSomething) { // Prevent click event after dragging.
this.positionOnClick = this.convertPositionToCanvasLocale(e);
var s1 = this.findSectionContainingPoint(this.positionOnMouseDown);
var s2 = this.findSectionContainingPoint(this.positionOnMouseUp);
if (s1 && s2 && s1 == s2) { // Allow click event if only mouse was above same section while clicking.
var section: CanvasSectionObject = this.findSectionContainingPoint(this.positionOnClick);
if (section) { // "interactable" property is also checked inside function "findSectionContainingPoint".
this.propagateOnClick(section, this.convertPositionToSectionLocale(section, this.positionOnClick), e);
if (this.positionOnMouseDown !== null && this.positionOnMouseUp !== null) {
this.positionOnClick = this.convertPositionToCanvasLocale(e);
var s1 = this.findSectionContainingPoint(this.positionOnMouseDown);
var s2 = this.findSectionContainingPoint(this.positionOnMouseUp);
if (s1 && s2 && s1 == s2) { // Allow click event if only mouse was above same section while clicking.
var section: CanvasSectionObject = this.findSectionContainingPoint(this.positionOnClick);
if (section) { // "interactable" property is also checked inside function "findSectionContainingPoint".
this.propagateOnClick(section, this.convertPositionToSectionLocale(section, this.positionOnClick), e);
}
}
}
this.clearMousePositions(); // Drawing takes place after cleaning mouse positions. Sections should overcome this evil.
@ -635,7 +636,7 @@ class CanvasSectionContainer {
private onMouseWheel (e: WheelEvent) {
var point = this.convertPositionToCanvasLocale(e);
var delta = e.deltaY;
var delta: Array<number> = [e.deltaX, e.deltaY];
var section: CanvasSectionObject = this.findSectionContainingPoint(point);
if (section)
this.propagateOnMouseWheel(section, this.convertPositionToSectionLocale(section, point), delta, e);

7
loleaflet/src/layer/tile/CanvasSectionProps.js
View File

@ -25,6 +25,7 @@ L.CSections.ColumnGroup = { name: 'column group' , zIndex: 5 };
L.CSections.RowGroup = { name: 'row group' , zIndex: 5 };
L.CSections.CornerGroup = { name: 'corner group' , zIndex: 5 };
L.CSections.Scroll = { name: 'scroll' , zIndex: 10};
/* Processing and drawing orders are meaningful between sections with the same zIndex. */
/* Processing order : Important for locations and sizes of sections. */
@ -60,3 +61,9 @@ L.CSections.ColumnHeader.drawingOrder = 15; // Calc.
/* zIndex = 6 and goes on. */
/* zIndex = 10 */
L.CSections.Scroll.processingOrder = 1; // Writer & Impress & Calc
L.CSections.Scroll.drawingOrder = 1; // Writer & Impress & Calc

30
loleaflet/src/layer/tile/CanvasTileLayer.js
View File

@ -59,25 +59,24 @@ L.TileSectionManager = L.Class.extend({
this._splitPos = splitPanesContext ?
splitPanesContext.getSplitPos() : new L.Point(0, 0);
this._updatesRunning = false;
this._mirrorMapEventsToCanvasSectionContainer();
this._mirrorEventsFromSourceToCanvasSectionContainer(document.getElementById('map'));
},
// Map and TilesSection overlap entirely. Map is above tiles section. In order to handle events in tiles section, we need to mirror them from map.
_mirrorMapEventsToCanvasSectionContainer: function () {
var mapElement = document.getElementById('map');
_mirrorEventsFromSourceToCanvasSectionContainer: function (sourceElement) {
var that = this;
mapElement.addEventListener('mousemove', function (e) { that._sectionContainer.onMouseMove(e); });
mapElement.addEventListener('mousedown', function (e) { that._sectionContainer.onMouseDown(e); });
mapElement.addEventListener('mouseup', function (e) { that._sectionContainer.onMouseUp(e); });
mapElement.addEventListener('click', function (e) { that._sectionContainer.onClick(e); });
mapElement.addEventListener('dblclick', function (e) { that._sectionContainer.onDoubleClick(e); });
mapElement.addEventListener('contextmenu', function (e) { that._sectionContainer.onContextMenu(e); });
mapElement.addEventListener('wheel', function (e) { that._sectionContainer.onMouseWheel(e); });
mapElement.addEventListener('mouseleave', function (e) { that._sectionContainer.onMouseLeave(e); });
mapElement.addEventListener('touchstart', function (e) { that._sectionContainer.onTouchStart(e); });
mapElement.addEventListener('touchmove', function (e) { that._sectionContainer.onTouchMove(e); });
mapElement.addEventListener('touchend', function (e) { that._sectionContainer.onTouchEnd(e); });
mapElement.addEventListener('touchcancel', function (e) { that._sectionContainer.onTouchCancel(e); });
sourceElement.addEventListener('mousemove', function (e) { that._sectionContainer.onMouseMove(e); }, true);
sourceElement.addEventListener('mousedown', function (e) { that._sectionContainer.onMouseDown(e); }, true);
sourceElement.addEventListener('mouseup', function (e) { that._sectionContainer.onMouseUp(e); }, true);
sourceElement.addEventListener('click', function (e) { that._sectionContainer.onClick(e); }, true);
sourceElement.addEventListener('dblclick', function (e) { that._sectionContainer.onDoubleClick(e); }, true);
sourceElement.addEventListener('contextmenu', function (e) { that._sectionContainer.onContextMenu(e); }, true);
sourceElement.addEventListener('wheel', function (e) { that._sectionContainer.onMouseWheel(e); }, true);
sourceElement.addEventListener('mouseleave', function (e) { that._sectionContainer.onMouseLeave(e); }, true);
sourceElement.addEventListener('touchstart', function (e) { that._sectionContainer.onTouchStart(e); }, true);
sourceElement.addEventListener('touchmove', function (e) { that._sectionContainer.onTouchMove(e); }, true);
sourceElement.addEventListener('touchend', function (e) { that._sectionContainer.onTouchEnd(e); }, true);
sourceElement.addEventListener('touchcancel', function (e) { that._sectionContainer.onTouchCancel(e); }, true);
},
startUpdates: function () {
@ -483,6 +482,7 @@ L.CanvasTileLayer = L.TileLayer.extend({
this._painter._addTilesSection();
this._painter._sectionContainer.getSectionWithName('tiles').onResize();
this._painter._addOverlaySection();
this._painter._sectionContainer.addSection(L.getNewScrollSection());
// For mobile/tablet the hammerjs swipe handler already uses a requestAnimationFrame to fire move/drag events
// Using L.TileSectionManager's own requestAnimationFrame loop to do the updates in that case does not perform well.

584
loleaflet/src/layer/tile/ScrollSection.ts 100644
View File

@ -0,0 +1,584 @@
/* eslint-disable */
/* See CanvasSectionContainer.ts for explanations. */
// We are using typescript without modules and compile files individually for now. Typescript needs to know about global definitions.
// We will keep below definitions until we use tsconfig.json.
declare var L: any;
class ScrollSection {
context: CanvasRenderingContext2D = null;
myTopLeft: Array<number> = null;
documentTopLeft: Array<number> = null;
containerObject: any = null;
dpiScale: number = null;
name: string = null;
backgroundColor: string = null;
borderColor: string = null;
boundToSection: string = L.CSections.Tiles.name;
anchor: Array<string> = new Array(0);
position: Array<number> = new Array(0);
size: Array<number> = new Array(0);
expand: Array<string> = new Array(0);
isLocated: boolean = false;
processingOrder: number = null;
drawingOrder: number = null;
zIndex: number = null;
interactable: boolean = true;
sectionProperties: any = {};
stopPropagating: Function; // Implemented by container.
map: any;
autoScrollTimer: any;
constructor () {
this.name = L.CSections.Scroll.name;
this.anchor = ['top', 'right'];
this.position = [0, 0];
this.size = [30 * window.devicePixelRatio, 0];
this.expand = ['bottom'];
this.processingOrder = L.CSections.Scroll.processingOrder;
this.drawingOrder = L.CSections.Scroll.drawingOrder;
this.zIndex = L.CSections.Scroll.zIndex;
this.map = L.Map.THIS;
this.map.on('scrollto', this.onScrollTo, this);
this.map.on('scrollby', this.onScrollBy, this);
this.map.on('scrollvelocity', this.onScrollVelocity, this);
this.map.on('handleautoscroll', this.onHandleAutoScroll, this);
this.map.on('docsize', this.onUpdateSize, this);
this.map.on('updatescrolloffset', this.onUpdateScrollOffset, this);
}
public onInitialize () {
this.sectionProperties.mapPane = (<HTMLElement>(document.querySelectorAll('.leaflet-map-pane')[0]));
this.sectionProperties.defaultCursorStyle = this.sectionProperties.mapPane.style.cursor;
this.sectionProperties.documentWidth = 0;
this.sectionProperties.documentHeight = 0;
this.sectionProperties.documentTopMax = Infinity;
this.sectionProperties.documentRightMax = Infinity;
this.sectionProperties.previousDragDistance = null;
this.sectionProperties.usableThickness = 20 * this.dpiScale;
this.sectionProperties.scrollBarThickness = 6 * this.dpiScale;
this.sectionProperties.edgeOffset = 10 * this.dpiScale;
this.sectionProperties.drawVerticalScrollBar = false;
this.sectionProperties.drawHorizontalScrollBar = false;
this.sectionProperties.clickScrollVertical = false; // true when user presses on the scroll bar drawing.
this.sectionProperties.clickScrollHorizontal = false;
this.sectionProperties.mouseIsOnVerticalScrollBar = false;
this.sectionProperties.mouseIsOnHorizontalScrollBar = false;
this.sectionProperties.minimumScrollSize = 80 * this.dpiScale;
this.sectionProperties.circleSliderRadius = 24 * this.dpiScale; // Radius of the mobile vertical circular slider.
this.sectionProperties.arrowCornerLength = 10 * this.dpiScale; // Corner length of the arrows inside circular slider.
// Opacity.
this.sectionProperties.alphaWhenVisible = 0.5; // Scroll bar is visible but not being used.
this.sectionProperties.alphaWhenBeingUsed = 0.8; // Scroll bar is being used.
this.sectionProperties.yOffset = 0;
this.sectionProperties.xOffset = 0;
this.sectionProperties.horizontalScrollRightOffset = this.sectionProperties.usableThickness * 2; // To prevent overlapping of the scroll bars.
}
public onScrollTo (e: any) {
// Triggered by the document (e.g. search result out of the viewing area).
this.map.scrollTop(e.y, {});
this.map.scrollLeft(e.x, {});
}
public onScrollBy (e: any) {
e.y *= (-1);
var y = '+=' + e.y;
if (e.y < 0) {
y = '-=' + Math.abs(e.y);
}
e.x *= (-1);
var x = '+=' + e.x;
if (e.x < 0) {
x = '-=' + Math.abs(e.x);
}
this.onScrollTo({x: x, y: y});
}
public onScrollVelocity (e: any) {
if (e.vx === 0 && e.vy === 0) {
clearInterval(this.autoScrollTimer);
this.autoScrollTimer = null;
this.map.isAutoScrolling = false;
} else {
clearInterval(this.autoScrollTimer);
this.map.isAutoScrolling = true;
this.autoScrollTimer = setInterval(L.bind(function() {
this.onScrollBy({x: e.vx, y: e.vy});
}, this), 100);
}
}
public onHandleAutoScroll (e :any) {
var vx = 0;
var vy = 0;
if (e.pos.y > e.map._size.y - 50) {
vy = 50;
} else if (e.pos.y < 50) {
vy = -50;
}
if (e.pos.x > e.map._size.x - 50) {
vx = 50;
} else if (e.pos.x < 50) {
vx = -50;
}
this.onScrollVelocity({vx: vx, vy: vy});
}
public onUpdateSize (e: any) {
// we need to avoid precision issues in comparison (in the end values are pixels)
var newDocWidth = Math.ceil(e.x);
var newDocHeight = Math.ceil(e.y);
// Don't get them through L.DomUtil.getStyle because precision is no more than 6 digits
this.sectionProperties.documentWidth = Math.round(newDocWidth * this.dpiScale);
this.sectionProperties.documentHeight = Math.round(newDocHeight * this.dpiScale);
}
private getVerticalScrollLength () :number {
if (this.map._docLayer._docType !== 'spreadsheet') {
return this.size[1];
}
else {
var splitPanesContext: any = this.map.getSplitPanesContext();
var splitPos: any = splitPanesContext.getSplitPos().clone();
splitPos.y *= this.dpiScale;
this.sectionProperties.yOffset = splitPos.y;
return this.size[1] - splitPos.y;
}
}
private calculateVerticalScrollSize (scrollLength: number) :number {
var scrollSize = scrollLength * scrollLength / this.sectionProperties.documentHeight;
if (scrollSize > this.sectionProperties.minimumScrollSize) {
return scrollSize;
}
else {
return this.sectionProperties.minimumScrollSize;
}
}
public getVerticalScrollProperties () :any {
var result: any = {};
result.scrollLength = this.getVerticalScrollLength(); // The length of the railway that the scroll bar moves on up & down.
result.scrollSize = this.calculateVerticalScrollSize(result.scrollLength);
result.scrollableLength = result.scrollLength - result.scrollSize;
result.scrollableHeight = this.sectionProperties.documentHeight - this.size[1];
result.ratio = result.scrollableHeight / result.scrollableLength; // 1px scrolling = xpx document height.
result.startY = this.documentTopLeft[1] / result.ratio + this.sectionProperties.scrollBarThickness * 0.5 + this.sectionProperties.yOffset;
this.sectionProperties.documentTopMax = result.scrollableHeight; // When documentTopLeft[1] value is equal to this value, it means whole document is visible.
return result;
}
private getHorizontalScrollLength () :number {
if (this.map._docLayer._docType !== 'spreadsheet') {
return this.size[0] - this.sectionProperties.horizontalScrollRightOffset;
}
else {
var splitPanesContext: any = this.map.getSplitPanesContext();
var splitPos: any = splitPanesContext.getSplitPos().clone();
splitPos.x *= this.dpiScale;
this.sectionProperties.xOffset = splitPos.x;
return this.size[0] - splitPos.x - this.sectionProperties.horizontalScrollRightOffset;
}
}
private calculateHorizontalScrollSize (scrollLength: number) :number {
var scrollSize = scrollLength * scrollLength / this.sectionProperties.documentWidth;
if (scrollSize > this.sectionProperties.minimumScrollSize) {
return scrollSize;
}
else {
return this.sectionProperties.minimumScrollSize;
}
}
public getHorizontalScrollProperties () :any {
var result: any = {};
result.scrollLength = this.getHorizontalScrollLength(); // The length of the railway that the scroll bar moves on up & down.
result.scrollSize = this.calculateHorizontalScrollSize(result.scrollLength); // Width of the scroll bar.
result.scrollableLength = result.scrollLength - result.scrollSize;
result.scrollableWidth = this.sectionProperties.documentWidth - this.size[0];
result.ratio = result.scrollableWidth / result.scrollableLength;
result.startX = this.documentTopLeft[0] / result.ratio + this.sectionProperties.scrollBarThickness * 0.5 + this.sectionProperties.xOffset;
this.sectionProperties.documentRightMax = result.scrollableWidth;
return result;
}
public onUpdateScrollOffset () {
if (this.map._docLayer._docType === 'spreadsheet')
this.map._docLayer.refreshViewData();
}
private DrawVerticalScrollBarMobile () {
var scrollProps: any = this.getVerticalScrollProperties();
this.context.globalAlpha = this.sectionProperties.clickScrollVertical ? this.sectionProperties.alphaWhenBeingUsed: this.sectionProperties.alphaWhenVisible;
this.context.strokeStyle = '#7E8182';
this.context.fillStyle = 'white';
var circleStartY = scrollProps.startY + this.sectionProperties.circleSliderRadius;
var circleStartX = this.size[0] - this.sectionProperties.circleSliderRadius * 0.5;
this.context.beginPath();
this.context.arc(circleStartX, circleStartY, this.sectionProperties.circleSliderRadius, 0, Math.PI * 2, true);
this.context.fill();
this.context.stroke();
this.context.fillStyle = '#7E8182';
this.context.beginPath();
var x: number = circleStartX - this.sectionProperties.arrowCornerLength * 0.5;
var y: number = circleStartY - 5 * this.dpiScale;
this.context.moveTo(x, y);
x += this.sectionProperties.arrowCornerLength;
this.context.lineTo(x, y);
x -= this.sectionProperties.arrowCornerLength * 0.5;
y -= Math.sin(Math.PI / 3) * this.sectionProperties.arrowCornerLength;
this.context.lineTo(x, y);
x -= this.sectionProperties.arrowCornerLength * 0.5;
y += Math.sin(Math.PI / 3) * this.sectionProperties.arrowCornerLength;
this.context.lineTo(x, y);
this.context.fill();
x = circleStartX - this.sectionProperties.arrowCornerLength * 0.5;
y = circleStartY + 5 * this.dpiScale;
this.context.moveTo(x, y);
x += this.sectionProperties.arrowCornerLength;
this.context.lineTo(x, y);
x -= this.sectionProperties.arrowCornerLength * 0.5;
y += Math.sin(Math.PI / 3) * this.sectionProperties.arrowCornerLength;
this.context.lineTo(x, y);
x -= this.sectionProperties.arrowCornerLength * 0.5;
y -= Math.sin(Math.PI / 3) * this.sectionProperties.arrowCornerLength;
this.context.lineTo(x, y);
this.context.fill();
this.context.globalAlpha = 1.0;
}
private drawVerticalScrollBar () {
var scrollProps: any = this.getVerticalScrollProperties();
this.context.globalAlpha = this.sectionProperties.clickScrollVertical ? this.sectionProperties.alphaWhenBeingUsed: this.sectionProperties.alphaWhenVisible;
this.context.fillStyle = '#7E8182';
var startX = this.size[0] - this.sectionProperties.scrollBarThickness - this.sectionProperties.edgeOffset;
var centerX = this.size[0] - this.sectionProperties.edgeOffset - this.sectionProperties.scrollBarThickness * 0.5;
var centerY = scrollProps.startY;
var radius = this.sectionProperties.scrollBarThickness * 0.5;
this.context.beginPath();
this.context.arc(centerX, centerY, radius, 0, Math.PI, true);
this.context.fill();
this.context.fillRect(startX, scrollProps.startY, this.sectionProperties.scrollBarThickness, scrollProps.scrollSize - this.sectionProperties.scrollBarThickness);
centerY += scrollProps.scrollSize - this.sectionProperties.scrollBarThickness;
this.context.beginPath();
this.context.arc(centerX, centerY, radius, 0, Math.PI, false);
this.context.fill();
this.context.globalAlpha = 1.0;
}
private drawHorizontalScrollBar () {
var scrollProps: any = this.getHorizontalScrollProperties();
this.context.globalAlpha = this.sectionProperties.clickScrollHorizontal ? this.sectionProperties.alphaWhenBeingUsed: this.sectionProperties.alphaWhenVisible;
this.context.fillStyle = '#7E8182';
var startY = this.size[1] - this.sectionProperties.scrollBarThickness - this.sectionProperties.edgeOffset;
var centerX = scrollProps.startX;
var centerY = this.size[1] - this.sectionProperties.edgeOffset - this.sectionProperties.scrollBarThickness * 0.5;
var radius = this.sectionProperties.scrollBarThickness * 0.5;
this.context.beginPath();
this.context.arc(centerX, centerY, radius, Math.PI * 0.5, Math.PI * 1.5, false);
this.context.fill();
this.context.fillRect(scrollProps.startX, startY, scrollProps.scrollSize - this.sectionProperties.scrollBarThickness, this.sectionProperties.scrollBarThickness);
centerX += scrollProps.scrollSize - this.sectionProperties.scrollBarThickness;
this.context.beginPath();
this.context.arc(centerX, centerY, radius, Math.PI * 0.5, Math.PI * 1.5, true);
this.context.fill();
this.context.globalAlpha = 1.0;
}
public onDraw () {
if (this.sectionProperties.drawVerticalScrollBar && (this.sectionProperties.clickScrollVertical || this.documentTopLeft[1] >= 0)) {
if ((<any>window).mode.isMobile())
this.DrawVerticalScrollBarMobile();
else
this.drawVerticalScrollBar();
}
if (this.sectionProperties.drawHorizontalScrollBar && this.documentTopLeft[0] >= 0) {
this.drawHorizontalScrollBar();
}
}
private hideVerticalScrollBar () {
if (this.sectionProperties.mouseIsOnVerticalScrollBar) {
this.sectionProperties.drawVerticalScrollBar = false;
this.sectionProperties.mouseIsOnVerticalScrollBar = false;
this.sectionProperties.mapPane.style.cursor = this.sectionProperties.defaultCursorStyle;
this.containerObject.requestReDraw();
}
}
private showVerticalScrollBar () {
if (!this.sectionProperties.mouseIsOnVerticalScrollBar) {
this.sectionProperties.drawVerticalScrollBar = true;
this.sectionProperties.mouseIsOnVerticalScrollBar = true;
this.sectionProperties.mapPane.style.cursor = 'pointer';
this.containerObject.requestReDraw();
}
}
private hideHorizontalScrollBar () {
if (this.sectionProperties.mouseIsOnHorizontalScrollBar) {
this.sectionProperties.drawHorizontalScrollBar = false;
this.sectionProperties.mouseIsOnHorizontalScrollBar = false;
this.sectionProperties.mapPane.style.cursor = this.sectionProperties.defaultCursorStyle;
this.containerObject.requestReDraw();
}
}
private showHorizontalScrollBar () {
if (!this.sectionProperties.mouseIsOnHorizontalScrollBar) {
this.sectionProperties.drawHorizontalScrollBar = true;
this.sectionProperties.mouseIsOnHorizontalScrollBar = true;
this.sectionProperties.mapPane.style.cursor = 'pointer';
this.containerObject.requestReDraw();
}
}
private isMouseOnScrollBar (point: Array<number>) {
if (this.documentTopLeft[1] >= 0) {
if (point[0] >= this.size[0] - this.sectionProperties.usableThickness) {
if (point[1] > this.sectionProperties.yOffset) {
this.showVerticalScrollBar();
}
else {
this.hideVerticalScrollBar();
}
}
else {
this.hideVerticalScrollBar();
}
}
if (this.documentTopLeft[0] >= 0) {
if (point[1] >= this.size[1] - this.sectionProperties.usableThickness) {
if (point[0] <= this.size[0] - this.sectionProperties.horizontalScrollRightOffset && point[0] >= this.sectionProperties.xOffset) {
this.showHorizontalScrollBar();
}
else {
this.hideHorizontalScrollBar();
}
}
else {
this.hideHorizontalScrollBar();
}
}
}
public onMouseLeave () {
this.sectionProperties.drawVerticalScrollBar = false;
this.sectionProperties.drawHorizontalScrollBar = false;
}
public scrollVerticalWithOffset (offset: number) {
if (this.documentTopLeft[1] + offset <= 0) { // We shouldn't scroll document to a negative y value.
if (this.documentTopLeft[1] > 0)
this.map.scrollTop(0, {});
}
else if (this.documentTopLeft[1] + offset >= this.sectionProperties.documentTopMax) // We should stop at the bottom of the document.
this.map.scrollTop(this.sectionProperties.documentTopMax / this.dpiScale, {});
else // Humph, everything is normal.
this.map.scroll(0, offset / this.dpiScale, {});
}
public scrollHorizontalWithOffset (offset: number) {
if (this.documentTopLeft[0] + offset <= 0){ // We shouldn't scroll document to a negative x value.
if (this.documentTopLeft[0] > 0)
this.map.scrollLeft(0, {});
}
else if (this.documentTopLeft[0] + offset >= this.sectionProperties.documentRightMax) // We should stop at the right edge of the document.
this.map.scrollLeft(this.sectionProperties.documentRightMax / this.dpiScale, {});
else // Humph, everything is normal.
this.map.scroll(offset / this.dpiScale, 0, {});
}
public onMouseMove (position: Array<number>, dragDistance: Array<number>, e: MouseEvent) {
if (this.sectionProperties.clickScrollVertical && this.containerObject.draggingSomething) {
if (!this.sectionProperties.previousDragDistance) {
this.sectionProperties.previousDragDistance = [0, 0];
}
if (!this.sectionProperties.drawVerticalScrollBar)
this.sectionProperties.drawVerticalScrollBar = true;
var scrollProps: any = this.getVerticalScrollProperties();
var diffY: number = dragDistance[1] - this.sectionProperties.previousDragDistance[1];
var actualDistance = scrollProps.ratio * diffY;
this.scrollVerticalWithOffset(actualDistance);
this.sectionProperties.previousDragDistance[1] = dragDistance[1];
e.stopPropagation(); // Don't propagate to map.
this.stopPropagating(); // Don't propagate to bound sections.
}
else if (this.sectionProperties.clickScrollHorizontal && this.containerObject.draggingSomething) {
if (!this.sectionProperties.previousDragDistance) {
this.sectionProperties.previousDragDistance = [0, 0];
}
if (!this.sectionProperties.drawHorizontalScrollBar)
this.sectionProperties.drawHorizontalScrollBar = true;
var scrollProps: any = this.getHorizontalScrollProperties();
var diffX: number = dragDistance[0] - this.sectionProperties.previousDragDistance[0];
var percentage: number = diffX / scrollProps.scrollLength;
var actualDistance = this.sectionProperties.documentWidth * percentage;
this.scrollHorizontalWithOffset(actualDistance);
this.sectionProperties.previousDragDistance[0] = dragDistance[0];
e.stopPropagation(); // Don't propagate to map.
this.stopPropagating(); // Don't propagate to bound sections.
}
else {
this.isMouseOnScrollBar(position);
}
}
public onMouseDown (point: Array<number>, e: MouseEvent) {
this.onMouseMove(point, null, e);
this.isMouseOnScrollBar(point);
if (this.documentTopLeft[1] >= 0) {
if (point[0] >= this.size[0] - this.sectionProperties.usableThickness) {
if (point[1] > this.sectionProperties.yOffset) {
this.sectionProperties.clickScrollVertical = true;
this.map.scrollingIsHandled = true;
e.stopPropagation(); // Don't propagate to map.
this.stopPropagating(); // Don't propagate to bound sections.
}
else {
this.sectionProperties.clickScrollVertical = false;
}
}
else {
this.sectionProperties.clickScrollVertical = false;
}
}
if (this.documentTopLeft[0] >= 0) {
if (point[1] >= this.size[1] - this.sectionProperties.usableThickness) {
if (point[0] >= this.sectionProperties.xOffset && point[0] <= this.size[0] - this.sectionProperties.horizontalScrollRightOffset) {
this.sectionProperties.clickScrollHorizontal = true;
this.map.scrollingIsHandled = true;
e.stopPropagation(); // Don't propagate to map.
this.stopPropagating(); // Don't propagate to bound sections.
}
else {
this.sectionProperties.clickScrollHorizontal = false;
}
}
else {
this.sectionProperties.clickScrollHorizontal = false;
}
}
}
public onMouseUp (point: Array<number>, e: MouseEvent) {
this.map.scrollingIsHandled = false;
if (this.sectionProperties.clickScrollVertical) {
e.stopPropagation(); // Don't propagate to map.
this.stopPropagating(); // Don't propagate to bound sections.
this.sectionProperties.clickScrollVertical = false;
}
if (this.sectionProperties.clickScrollHorizontal) {
e.stopPropagation(); // Don't propagate to map.
this.stopPropagating(); // Don't propagate to bound sections.
this.sectionProperties.clickScrollHorizontal = false;
}
this.sectionProperties.previousDragDistance = null;
this.onMouseMove(point, null, e);
}
private performVerticalScroll (delta: number) {
if (delta > 0)
this.scrollVerticalWithOffset(30);
else
this.scrollVerticalWithOffset(-30);
this.sectionProperties.drawVerticalScrollBar = true;
this.containerObject.requestReDraw();
this.sectionProperties.drawVerticalScrollBar = false;
this.sectionProperties.drawHorizontalScrollBar = false;
}
private performHorizontalScroll (delta: number) {
if (delta > 0)
this.scrollHorizontalWithOffset(30);
else
this.scrollHorizontalWithOffset(-30);
this.sectionProperties.drawHorizontalScrollBar = true;
this.containerObject.requestReDraw();
this.sectionProperties.drawVerticalScrollBar = false;
this.sectionProperties.drawHorizontalScrollBar = false;
}
public onMouseWheel (point: Array<number>, delta: Array<number>, e: MouseEvent) {
if (e.ctrlKey)
return;
if (Math.abs(delta[1]) > Math.abs(delta[0])) {
if (!e.shiftKey)
this.performVerticalScroll(delta[1]);
else
this.performHorizontalScroll(delta[1]);
}
else {
this.performHorizontalScroll(delta[0]);
}
}
public onMouseEnter () {}
public onClick () {}
public onDoubleClick () {}
public onContextMenu () {}
public onLongPress () {}
public onMultiTouchStart () {}
public onMultiTouchMove () {}
public onMultiTouchEnd () {}
public onResize () {}
public onNewDocumentTopLeft () {}
}
L.getNewScrollSection = function () {
return new ScrollSection();
}

11
loleaflet/src/layer/tile/TileLayer.js
View File

@ -1979,7 +1979,8 @@ L.TileLayer = L.GridLayer.extend({
center = center.subtract(this._map.getSize().divideBy(2));
center.x = Math.round(center.x < 0 ? 0 : center.x);
center.y = Math.round(center.y < 0 ? 0 : center.y);
this._map.fire('scrollto', {x: center.x, y: center.y});
if (!this._map.wholeColumnSelected && !this._map.wholeRowSelected)
this._map.fire('scrollto', {x: center.x, y: center.y});
}
}
}
@ -2375,7 +2376,7 @@ L.TileLayer = L.GridLayer.extend({
// / "beforeinput" events) and "up" for key releases (akin to the DOM
// "keyup" event).
//
// PageUp/PageDown are handled as special cases for spreadsheets - in
// PageUp/PageDown and select column & row are handled as special cases for spreadsheets - in
// addition of sending messages to loolwsd, they move the cell cursor around.
postKeyboardEvent: function(type, charCode, unoKeyCode) {
var winId = this._map.getWinId();
@ -2397,6 +2398,12 @@ L.TileLayer = L.GridLayer.extend({
}
this._cellCursorOnPgDn = new L.LatLngBounds(this._prevCellCursor.getSouthWest(), this._prevCellCursor.getNorthEast());
}
else if (unoKeyCode === 9476) { // Select whole column.
this._map.wholeColumnSelected = true;
}
else if (unoKeyCode === 5380) { // Select whole row.
this._map.wholeRowSelected = true;
}
}
this._sendClientZoom();

4
loleaflet/src/layer/tile/TilesSection.ts
View File

@ -23,7 +23,7 @@ class TilesSection {
processingOrder: number = null;
drawingOrder: number = null;
zIndex: number = null;
interactable: boolean = false;
interactable: boolean = true;
sectionProperties: any = {};
map: any;
offscreenCanvases: Array<any> = new Array(0);
@ -213,6 +213,7 @@ class TilesSection {
this.inZoomAnimation = setValue;
}
public onMouseWheel () {}
public onMouseMove () {}
public onMouseDown () {}
public onMouseUp () {}
@ -221,7 +222,6 @@ class TilesSection {
public onClick () {}
public onDoubleClick () {}
public onContextMenu () {}
public onMouseWheel () {}
public onLongPress () {}
public onMultiTouchStart () {}
public onMultiTouchMove () {}

2
loleaflet/src/map/handler/Map.TouchGesture.js
View File

@ -498,7 +498,7 @@ L.Map.TouchGesture = L.Handler.extend({
this._moving = true;
} else if (this._state === L.Map.TouchGesture.CURSOR) {
this._map._docLayer._postMouseEvent('move', mousePos.x, mousePos.y, 1, 1, 0);
} else {
} else if (this._map.scrollingIsHandled === false) {
this._map.dragging._draggable._onMove(this._constructFakeEvent(point, 'mousemove'));
}
},