Private/gokay/impress grid

browser/css/toolbar.css

@@ -1099,6 +1099,8 @@ button.leaflet-control-search-next
 .w2ui-icon.freezepanescolumn{ background: url('images/lc_freezepanescolumn.svg') no-repeat center; }
 .w2ui-icon.freezepanesrow{ background: url('images/lc_freezepanesrow.svg') no-repeat center; }
 .w2ui-icon.navigator{ background: url('images/lc_navigator.svg') no-repeat center; }
+.w2ui-icon.gridvisible{ background: url('images/lc_gridvisible.svg') no-repeat center; }
+.w2ui-icon.griduse{ background: url('images/lc_griduse.svg') no-repeat center; }
 
 .w2ui-icon.flipvertical { background: url('images/lc_flipvertical.svg') no-repeat center; }
 .w2ui-icon.fliphorizontal { background: url('images/lc_fliphorizontal.svg') no-repeat center; }

browser/src/app/GraphicSelectionMiddleware.ts

@@ -101,13 +101,11 @@ class GraphicSelection {
  // When a shape is selected, the rectangles of other shapes are also sent from the core side.
  // They are in twips units.
  static convertObjectRectangleTwipsToPixels() {
- const correction = 0.567; // Correction for impress case.
-
  if (this.extraInfo && this.extraInfo.ObjectRectangles) {
  for (let i = 0; i < this.extraInfo.ObjectRectangles.length; i++) {
  for (let j = 0; j < 4; j++)
  this.extraInfo.ObjectRectangles[i][j] *=
- app.twipsToPixels * correction;
+ app.twipsToPixels * app.impress.twipsCorrection;
  }
  }
  }

browser/src/canvas/sections/CellCursorSection.ts

@@ -84,7 +84,7 @@ class CellCursorSection extends CanvasSectionObject {
  }
 
  let x: number = 0;
- if (app.isCalcRTL()) {
+ if (app.calc.isRTL()) {
  const rightMost = this.containerObject.getDocumentAnchor()[0] + this.containerObject.getDocumentAnchorSection().size[0];
  x = rightMost - penX * 2 - app.calc.cellCursorRectangle.pWidth;
  }

browser/src/canvas/sections/CommentListSection.ts

@@ -1601,7 +1601,7 @@ export class CommentSection extends app.definitions.canvasSectionObject {
  private adjustCommentFileBasedView (comment: any): void {
  // Below calculations are the same with the ones we do while drawing tiles in fileBasedView.
  var partHeightTwips = this.sectionProperties.docLayer._partHeightTwips + this.sectionProperties.docLayer._spaceBetweenParts;
- var index = app.impress.partHashes.indexOf(String(comment.parthash));
+ var index = app.impress.getIndexFromSlideHash(comment.parthash);
  var yAddition = index * partHeightTwips;
  comment.yAddition = yAddition; // We'll use this while we save the new position of the comment.
 
@@ -1747,7 +1747,7 @@ export class CommentSection extends app.definitions.canvasSectionObject {
 
  if (selectedComment) {
  const posX = (this.sectionProperties.showSelectedBigger ?
- Math.round((document.getElementById('document-container').getBoundingClientRect().width - subList[i].sectionProperties.container.getBoundingClientRect().width)/2) : 
+ Math.round((document.getElementById('document-container').getBoundingClientRect().width - subList[i].sectionProperties.container.getBoundingClientRect().width)/2) :
  Math.round(actualPosition[0] / app.dpiScale) - this.sectionProperties.deflectionOfSelectedComment * (isRTL ? -1 : 1));
  (new L.PosAnimation()).run(subList[i].sectionProperties.container, {x: posX, y: Math.round(lastY / app.dpiScale)}, this.getAnimationDuration());
  }

browser/src/canvas/sections/CommentSection.ts

@@ -117,7 +117,7 @@ export class Comment extends CanvasSectionObject {
 
  if (this.sectionProperties.docLayer._docType === 'presentation' || this.sectionProperties.docLayer._docType === 'drawing') {
  this.sectionProperties.parthash = this.sectionProperties.data.parthash;
- this.sectionProperties.partIndex = app.impress.partHashes.indexOf(String(this.sectionProperties.parthash));
+ this.sectionProperties.partIndex = app.impress.getIndexFromSlideHash(this.sectionProperties.parthash);
  }
 
  this.sectionProperties.isHighlighted = false;
@@ -693,7 +693,7 @@ export class Comment extends CanvasSectionObject {
  }),
  draggable: true
  });
- if (app.impress.partHashes[this.sectionProperties.docLayer._selectedPart] === this.sectionProperties.data.parthash || app.file.fileBasedView)
+ if (app.impress.partList[this.sectionProperties.docLayer._selectedPart].hash === parseInt(this.sectionProperties.data.parthash) || app.file.fileBasedView)
  this.map.addLayer(this.sectionProperties.annotationMarker);
  }
  if (this.sectionProperties.data.rectangle != null) {

browser/src/canvas/sections/ShapeHandleScalingSubSection.ts

@@ -214,7 +214,10 @@ class ShapeHandleScalingSubSection extends CanvasSectionObject {
  e.stopPropagation();
  this.sectionProperties.parentHandlerSection.sectionProperties.svg.style.opacity = 0.5;
  this.moveHandlesOnDrag(point);
- this.sectionProperties.parentHandlerSection.checkObjectsBoundaries([this.position[0]], [this.position[1]]);
+
+ // Here we are checking a point, so the size 0. dragDistance is also 0 because we already set the new position (moveHandlesOnDrag).
+ this.sectionProperties.parentHandlerSection.checkHelperLinesAndSnapPoints([0, 0], this.position, [0, 0]);
+
  this.containerObject.requestReDraw();
  this.sectionProperties.parentHandlerSection.showSVG();
  }

browser/src/canvas/sections/ShapeHandlesSection.ts

@@ -751,14 +751,108 @@ class ShapeHandlesSection extends CanvasSectionObject {
  else this.sectionProperties.closestY = null;
  }
 
+ private cloneSelectedPartInfoForGridSnap() {
+ const selectedPart = Object.assign({}, app.impress.partList[app.map._docLayer._selectedPart]);
+ selectedPart.leftBorder *= app.impress.twipsCorrection;
+ selectedPart.upperBorder *= app.impress.twipsCorrection;
+ selectedPart.rightBorder *= app.impress.twipsCorrection;
+ selectedPart.lowerBorder *= app.impress.twipsCorrection;
+ selectedPart.gridCoarseWidth *= app.impress.twipsCorrection;
+ selectedPart.gridCoarseHeight *= app.impress.twipsCorrection;
+
+ return selectedPart;
+ }
+
+ private getInnerRecrangleForGridSnap(selectedPart: any) {
+ return new cool.SimpleRectangle(
+ selectedPart.leftBorder,
+ selectedPart.upperBorder,
+ (selectedPart.width - selectedPart.leftBorder - selectedPart.rightBorder),
+ (selectedPart.height - selectedPart.upperBorder - selectedPart.lowerBorder)
+ );
+ }
+
+ private getCornerPointsForGridSnap(size: number[], position: number[], dragDistance: number[]) {
+ return [
+ new cool.SimplePoint((position[0] + dragDistance[0]) * app.pixelsToTwips, (position[1] + dragDistance[1]) * app.pixelsToTwips),
+ new cool.SimplePoint((size[0] + position[0] + dragDistance[0]) * app.pixelsToTwips, (position[1] + dragDistance[1]) * app.pixelsToTwips),
+ new cool.SimplePoint((position[0] + dragDistance[0]) * app.pixelsToTwips, (size[1] + position[1] + dragDistance[1]) * app.pixelsToTwips),
+ new cool.SimplePoint((size[0] + position[0] + dragDistance[0]) * app.pixelsToTwips, (size[1] + position[1] + dragDistance[1]) * app.pixelsToTwips),
+ ];
+ }
+
+ private findClosestGridPoint(size: number[], position: number[], dragDistance: number[]) {
+ // First rule of snap-to-grid: If you enable snap-to-grid, you have to snap.
+
+ const selectedPart = this.cloneSelectedPartInfoForGridSnap();
+
+ // The 4 corners of selected object's rectangle.
+ const checkList = this.getCornerPointsForGridSnap(size, position, dragDistance);
+
+ // The rectangle that is shaped by the page margins.
+ const innerRectangle = this.getInnerRecrangleForGridSnap(selectedPart);
+
+ const gapX = selectedPart.gridCoarseWidth / (selectedPart.innerSpacesX > 0 ? selectedPart.innerSpacesX : 1);
+ const gapY = selectedPart.gridCoarseHeight / (selectedPart.innerSpacesY > 0 ? selectedPart.innerSpacesY : 1);
+
+ let minX = 100000;
+ let minY = 100000;
+ for (let i = 0; i < 1; i++) {
+ if (innerRectangle.containsPoint(checkList[i].toArray())) {
+
+ const countX = Math.round((checkList[i].x - innerRectangle.x1) / gapX);
+ const countY = Math.round((checkList[i].y - innerRectangle.y1) / gapY);
+
+ const diffX = Math.abs(checkList[i].x - innerRectangle.x1 - gapX * countX);
+ const diffY = Math.abs(checkList[i].y - innerRectangle.y1 - gapY * countY);
+
+ if (diffX < minX) {
+ minX = diffX;
+ this.sectionProperties.closestX = innerRectangle.x1 + (countX * gapX);
+ this.sectionProperties.pickedIndexX = [1, 3].includes(i) ? 0 : 1; // Do we substract width or not.
+ }
+ if (diffY < minY) {
+ minY = diffY;
+ this.sectionProperties.closestY = innerRectangle.y1 + (countY * gapY);
+ this.sectionProperties.pickedIndexY = [2, 3].includes(i) ? 0 : 1; // Do we substract height or not.
+ }
+ }
+ }
+
+ this.sectionProperties.closestX *= app.twipsToPixels;
+ this.sectionProperties.closestY *= app.twipsToPixels;
+ }
+
  public checkObjectsBoundaries(xListToCheck: number[], yListToCheck: number[]) {
  if (app.map._docLayer._docType === 'presentation') {
  this.findClosestX(xListToCheck);
  this.findClosestY(yListToCheck);
- this.containerObject.requestReDraw();
  }
  }
 
+ public checkHelperLinesAndSnapPoints(size: number[], position: number[], dragDistance: number[]) {
+ /*
+ We will first check if grid-snap is enabled and if we are close to a grid point.
+ If there is a grid point to snap to, then we'll ignore helper lines.
+ Because core side doesn't know about our helper lines, and it'll ignore them if it can snap to a grid point.
+ */
+
+ this.sectionProperties.closestX = null;
+ this.sectionProperties.closestY = null;
+
+ if (app.map.stateChangeHandler.getItemValue('.uno:GridUse') === 'true') {
+ this.findClosestGridPoint(size, position, dragDistance)
+ }
+ else {
+ this.checkObjectsBoundaries(
+ [position[0] + dragDistance[0], position[0] + dragDistance[0] + size[0]],
+ [position[1] + dragDistance[1], position[1] + dragDistance[1] + size[1]]
+ );
+ }
+
+ this.containerObject.requestReDraw();
+ }
+
  onMouseMove(position: number[], dragDistance: number[]) {
  if (this.containerObject.isDraggingSomething() && this.sectionProperties.svg) {
  (window as any).IgnorePanning = true;
@@ -767,10 +861,7 @@ class ShapeHandlesSection extends CanvasSectionObject {
  this.sectionProperties.svg.style.top = String((this.myTopLeft[1] + dragDistance[1]) / app.dpiScale) + 'px';
  this.sectionProperties.svg.style.opacity = 0.5;
  this.sectionProperties.lastDragDistance = [dragDistance[0], dragDistance[1]];
- this.checkObjectsBoundaries(
- [this.position[0] + dragDistance[0], this.position[0] + dragDistance[0] + this.size[0]],
- [this.position[1] + dragDistance[1], this.position[1] + dragDistance[1] + this.size[1]]
- );
+ this.checkHelperLinesAndSnapPoints(this.size, this.position, dragDistance);
 
  this.showSVG();
  }
@@ -874,10 +965,15 @@ class ShapeHandlesSection extends CanvasSectionObject {
  this.context.restore();
  }
 
+ private anythingToDraw(): boolean {
+ return this.sectionProperties.closestX !== null ||
+ this.sectionProperties.closestY !== null;
+ }
+
  public onDraw() {
  if (!this.showSection || !this.isVisible)
  this.hideSVG();
- else if (this.sectionProperties.closestX !== null || this.sectionProperties.closestY !== null) {
+ else if (this.anythingToDraw()) {
  this.drawGuides();
  }
  }

browser/src/control/Control.Menubar.js

@@ -441,6 +441,9 @@ L.Control.Menubar = L.Control.extend({
  {name: _UNO('.uno:ZoomMinus', 'presentation'), id: 'zoomout', type: 'action'},
  {name: _('Reset zoom'), id: 'zoomreset', type: 'action'},
  ]).concat([
+ {type: 'separator'},
+ {uno: '.uno:GridVisible', name: _UNO('.uno:GridVisible')},
+ {uno: '.uno:GridUse', name: _UNO('.uno:GridUse')},
  {type: 'separator'},
  {name: _('Toggle UI Mode'), id: 'toggleuimode', type: 'action'},
  {name: _('Show Ruler'), id: 'showruler', type: 'action'},
@@ -594,6 +597,9 @@ L.Control.Menubar = L.Control.extend({
  {name: _UNO('.uno:ZoomMinus', 'presentation'), id: 'zoomout', type: 'action'},
  {name: _('Reset zoom'), id: 'zoomreset', type: 'action'},
  ]).concat([
+ {type: 'separator'},
+ {uno: '.uno:GridVisible', name: _UNO('.uno:GridVisible')},
+ {uno: '.uno:GridUse', name: _UNO('.uno:GridUse')},
  {type: 'separator'},
  {name: _('Toggle UI Mode'), id: 'toggleuimode', type: 'action'},
  {name: _('Dark Mode'), id: 'toggledarktheme', type: 'action'},
@@ -1789,12 +1795,12 @@ L.Control.Menubar = L.Control.extend({
  $(aItem).text(_('Use Tabbed view'));
  }
  } else if (id === 'showslide') {
- if (!self._map._docLayer.isHiddenSlide(self._map.getCurrentPartNumber()))
+ if (!app.impress.isSlideHidden(self._map.getCurrentPartNumber()))
  $(aItem).hide();
  else
  $(aItem).show();
  } else if (id === 'hideslide') {
- if (self._map._docLayer.isHiddenSlide(self._map.getCurrentPartNumber()))
+ if (app.impress.isSlideHidden(self._map.getCurrentPartNumber()))
  $(aItem).hide();
  else
  $(aItem).show();

browser/src/control/Control.Notebookbar.js

@@ -447,12 +447,12 @@ L.Control.Notebookbar = L.Control.extend({
  },
 
  onSlideHideToggle: function() {
- if (!this.map._docLayer.isHiddenSlide(this.map.getCurrentPartNumber()))
+ if (!app.impress.isSlideHidden(this.map.getCurrentPartNumber()))
  $('#showslide').hide();
  else
  $('#showslide').show();
 
- if (this.map._docLayer.isHiddenSlide(this.map.getCurrentPartNumber()))
+ if (app.impress.isSlideHidden(this.map.getCurrentPartNumber()))
  $('#hideslide').hide();
  else
  $('#hideslide').show();

browser/src/control/Control.NotebookbarBuilder.js

@@ -121,7 +121,6 @@ L.Control.NotebookbarBuilder = L.Control.JSDialogBuilder.extend({
 
  /*Draw Home Tab*/
  this._toolitemHandlers['.uno:ObjectAlign'] = function() {};
- this._toolitemHandlers['.uno:GridVisible'] = function() {};
 
  /*Graphic Tab*/
  this._toolitemHandlers['.uno:Crop'] = function() {};

browser/src/control/Control.NotebookbarDraw.js

@@ -406,6 +406,26 @@ L.Control.NotebookbarDraw = L.Control.NotebookbarImpress.extend({
  'text': _('Collapse Tabs'),
  'accessibility': { focusBack: true, combination: 'CU', de: null }
  },
+ {
+ 'type': 'toolbox',
+ 'children': [
+ {
+ 'id': 'home-grid-visible',
+ 'type': 'toolitem',
+ 'text': _UNO('.uno:GridVisible'),
+ 'command': '.uno:GridVisible',
+ 'accessibility': { focusBack: true, combination: 'GV', de: null }
+ },
+ {
+ 'id': 'home-grid-use',
+ 'type': 'toolitem',
+ 'text': _UNO('.uno:GridUse'),
+ 'command': '.uno:GridUse',
+ 'accessibility': { focusBack: true, combination: 'GU', de: null }
+ }
+ ],
+ 'vertical': 'true'
+ },
  {
  'id':'toggledarktheme',
  'type': 'bigcustomtoolitem',

browser/src/control/Control.NotebookbarImpress.js

@@ -468,6 +468,26 @@ L.Control.NotebookbarImpress = L.Control.NotebookbarWriter.extend({
  'command': '.uno:SlideMasterPage',
  'accessibility': { focusBack: true, combination: 'MP', de: null }
  },
+ {
+ 'type': 'toolbox',
+ 'children': [
+ {
+ 'id': 'home-grid-visible',
+ 'type': 'toolitem',
+ 'text': _('Show Grid'),
+ 'command': '.uno:GridVisible',
+ 'accessibility': { focusBack: true, combination: 'GV', de: null }
+ },
+ {
+ 'id': 'home-grid-use',
+ 'type': 'toolitem',
+ 'text': _('Snap to Grid'),
+ 'command': '.uno:GridUse',
+ 'accessibility': { focusBack: true, combination: 'GU', de: null }
+ }
+ ],
+ 'vertical': 'true'
+ },
  {
  'id':'toggledarktheme',
  'class': 'unotoggledarktheme',