introduce content control in online

added unocommand to enter rich text in classic, NB and mobile
created a new section to draw rich text rectangles
handle the callback for content control

Signed-off-by: Rash419 <rashesh.padia@collabora.com>
Change-Id: If9912b3598729c26014519c4e1c3c65000b973a4

browser/Makefile.am

@@ -223,6 +223,7 @@ COOL_JS_LST =\
 	src/layer/tile/CanvasSectionProps.js \
 	src/layer/tile/CanvasSectionContainer.ts \
 	src/layer/tile/CommentSection.ts \
+	src/layer/tile/ContentControlSection.ts \
 	src/layer/tile/CommentListSection.ts \
 	src/layer/tile/TilesSection.ts \
 	src/layer/tile/AutoFillMarkerSection.ts \

browser/src/control/Control.Menubar.js

@@ -169,6 +169,7 @@ L.Control.Menubar = L.Control.extend({
 					{uno: '.uno:InsertIndexesEntry'},
 					{uno: '.uno:InsertAuthoritiesEntry'},
 					{uno: '.uno:InsertMultiIndex'}]},
+				{uno: '.uno:InsertContentControl'},
 			]},
 			{name: _UNO('.uno:FormatMenu', 'text'), id: 'format', type: 'menu', menu: [
 				{name: _UNO('.uno:FormatTextMenu', 'text'), type: 'menu', menu: [
@@ -1065,6 +1066,7 @@ L.Control.Menubar = L.Control.extend({
 						{uno: '.uno:InsertWJ'},
 						{uno: '.uno:InsertLRM'},
 						{uno: '.uno:InsertRLM'}]},
+					{name: _UNO('.uno:InsertContentControl', 'text'), uno: '.uno:InsertContentControl'},
 				]
 			},
 			spreadsheet : {

browser/src/control/Control.NotebookbarWriter.js

@@ -940,6 +940,22 @@ L.Control.NotebookbarWriter = L.Control.Notebookbar.extend({
 					}
 				],
 				'vertical': 'true'
+			},
+			{
+				'type': 'container',
+				'children': [
+					{
+						'type': 'toolbox',
+						'children': [
+							{
+								'type': 'toolitem',
+								'text': _UNO('.uno:InsertContentControl', 'text'),
+								'command': '.uno:InsertContentControl'
+							}
+						]
+					},
+				],
+				'vertical': 'true'
 			}
 		];
 

browser/src/layer/tile/CanvasSectionProps.js

@@ -32,6 +32,7 @@ L.CSections.Comment =				{ name: 'comment'			, zIndex: 9	}; // This class is for
 
 L.CSections.AutoFillMarker = 		{ name: 'auto fill marker'	, zIndex: 10};
 
+L.CSections.ContentControl =        { name: 'content control'   , zIndex: 11 };
 /* Processing and drawing orders are meaningful between sections with the same zIndex. */
 /* Processing order	: Important for locations and sizes of sections. */
 /* Drawing order	: Highest with the same zIndex will be drawn on top. */
@@ -82,3 +83,9 @@ L.CSections.Comment.drawingOrder =					1; // Writer & Imnpress & Calc.
 L.CSections.AutoFillMarker.processingOrder =		1; // Calc.
 
 L.CSections.AutoFillMarker.drawingOrder =			1; // Calc.
+
+
+/* zIndex = 11  */
+L.CSections.ContentControl.processingOrder =		1; // Writer.
+
+L.CSections.ContentControl.drawingOrder =			1; // Writer.

browser/src/layer/tile/CanvasTileLayer.js

@@ -1703,6 +1703,14 @@ L.CanvasTileLayer = L.Layer.extend({
 				this.coreDocBGColor = textMsg.substring('documentbackgroundcolor:'.length + 1).trim();
 				app.sectionContainer.setClearColor('#' + this.coreDocBGColor);
 			}
+		} else if (textMsg.startsWith('contentcontrol:')) {
+			//this._onContentControlMsg(textMsg);
+			textMsg = textMsg.substring('contentcontrol:'.length + 1);
+			if (!app.sectionContainer.doesSectionExist(L.CSections.ContentControl.name)) {
+				app.sectionContainer.addSection(new app.definitions.ContentControlSection());
+			}
+			var section = app.sectionContainer.getSectionWithName(L.CSections.ContentControl.name);
+			section.drawContentControl(JSON.parse(textMsg));
 		}
 		else if (textMsg.startsWith('infobar:')) {
 			obj = JSON.parse(textMsg.substring('infobar:'.length + 1));

browser/src/layer/tile/ContentControlSection.ts

@@ -0,0 +1,104 @@
+declare var L: any;
+declare var app: any;
+
+app.definitions.ContentControlSection =
+
+class ContentControlSection {
+    context: CanvasRenderingContext2D = null;
+    processingOrder: number = L.CSections.ContentControl.processingOrder;
+	drawingOrder: number = L.CSections.ContentControl.drawingOrder;
+	zIndex: number = L.CSections.ContentControl.zIndex;
+    name: string = L.CSections.ContentControl.name;
+	interactable: boolean = false;
+    documentObject: boolean = true;
+	sectionProperties: any = {};
+	myTopLeft: Array<number> = [0, 0];
+	position: Array<number> = [0, 0];
+	size: Array<number> = new Array(0);
+	expand: Array<string> = new Array(0);
+	anchor: Array<any> = new Array(0);
+
+	// Implemented by section container. Document objects only.
+	setPosition: (x: number, y: number) => void;
+
+	public onInitialize() {
+		this.sectionProperties.rectangles = [];
+	}
+
+	constructor() {
+		this.sectionProperties.rectangles = null;
+	}
+
+	drawContentControl(json: any) {
+		if (json.action === 'show')	{
+			//convert string to number coordinates
+			var matches = json.rectangles.match(/\d+/g);
+			this.sectionProperties.rectangles = [];
+			if (matches !== null) {
+				for (var i: number = 0; i < matches.length; i += 4) {
+					this.sectionProperties.rectangles.push([parseInt(matches[i]), parseInt(matches[i + 1]), parseInt(matches[i + 2]), parseInt(matches[i + 3])]);
+				}
+			}
+		} else if (json.action == 'hide') {
+			this.sectionProperties.rectangles = [];
+		}
+		app.sectionContainer.requestReDraw();
+	}
+
+	private setPositionAndSize () {
+		var rectangles = this.sectionProperties.rectangles;
+		var xMin: number = Infinity, yMin: number = Infinity, xMax: number = 0, yMax: number = 0;
+		for (var i = 0; i < rectangles.length; i++) {
+			if (rectangles[i][0] < xMin)
+				xMin = rectangles[i][0];
+
+			if (rectangles[i][1] < yMin)
+				yMin = rectangles[i][1];
+
+			if (rectangles[i][0] + rectangles[i][2] > xMax)
+				xMax = rectangles[i][0] + rectangles[i][2];
+
+			if (rectangles[i][1] + rectangles[i][3] > yMax)
+				yMax = rectangles[i][1] + rectangles[i][3];
+		}
+		// Rectangles are in twips. Convert them to core pixels.
+		var ratio: number = (app.tile.size.pixels[0] / app.tile.size.twips[0]);
+		xMin = Math.round(xMin * ratio);
+		yMin = Math.round(yMin * ratio);
+		xMax = Math.round(xMax * ratio);
+		yMax = Math.round(yMax * ratio);
+
+		this.setPosition(xMin, yMin); // This function is added by section container.
+		this.size = [xMax - xMin, yMax - yMin];
+		if (this.size[0] < 5)
+			this.size[0] = 5;
+	}
+
+	public onResize () {
+		this.setPositionAndSize();
+	}
+
+	public onDraw() {
+		var rectangles = this.sectionProperties.rectangles;
+
+		for (var i: number = 0; i < rectangles.length; i++) {
+			var xMin: number = rectangles[i][0];
+			var yMin: number = rectangles[i][1];
+			var xMax: number = rectangles[i][0] + rectangles[i][2];
+			var yMax: number = rectangles[i][1] + rectangles[i][3];
+
+			var ratio: number = (app.tile.size.pixels[0] / app.tile.size.twips[0]);
+			xMin = Math.round(xMin * ratio);
+			yMin = Math.round(yMin * ratio);
+			xMax = Math.round(xMax * ratio);
+			yMax = Math.round(yMax * ratio);
+
+			this.context.strokeStyle = '#000000';
+			this.context.strokeRect(xMin - this.position[0], yMin - this.position[1], xMax - xMin, yMax - yMin);
+		}
+	}
+
+	public onNewDocumentTopLeft () {
+		this.setPositionAndSize();
+	}
+};

browser/src/unocommands.js

@@ -492,6 +492,7 @@ var unoCommandsArray = {
 	'ZTestDialog':{spreadsheet:{menu:_('~Z-test...'),},},
 	'ZoomMinus':{global:{menu:_('Zoom Out'),},},
 	'ZoomPlus':{global:{menu:_('Zoom In'),},},
+	'InsertContentControl':{text:{menu:_('~Insert Rich Text'),},},
 };
 
 window._UNO = function(string, component, isContext) {

kit/ChildSession.cpp

@@ -3000,6 +3000,9 @@ void ChildSession::loKitCallback(const int type, const std::string& payload)
     case LOK_CALLBACK_DOCUMENT_BACKGROUND_COLOR:
         sendTextFrame("documentbackgroundcolor: " + payload);
         break;
+    case LOK_CALLBACK_CONTENT_CONTROL:
+        sendTextFrame("contentcontrol: " + payload);
+        break;
     case LOK_COMMAND_BLOCKED:
         {
 #if defined(ENABLE_FEATURE_LOCK) || defined(ENABLE_FEATURE_RESTRICTION)