@refinitiv-ui/efx-grid 0.0.0-dev.12023565035.1

package/lib/zoom/es6/Zoom.js

@@ -0,0 +1,438 @@
+import { GridPlugin } from "../../tr-grid-util/es6/GridPlugin.js";
+import Ext from "../../tr-grid-util/es6/Ext.js";
+
+
+/** @typedef {Object} ZoomPlugin~Options
+* @description Available options describing `zoom` object specified in grid's option
+* @property {number=} zoomFactor=1 Default zoom level range from 0.6 to 2
+* @property {number=} step=0.1 Steps size of each zoom level
+* @property {boolean=} wheel=true If disabled, not allow wheel event to change zoom
+* @property {number=} maxFactor=2 Maximum zoom factor level
+* @property {number=} minFactor=0.5 Minimum zoom factor level
+* @property {Function=} zoomChanged=null Event handler when zoom factor is changed through the APIs or mouse wheel.
+*/
+
+/** @event ZoomPlugin#zoomChanged
+* @description Fired when zoom changed
+* @type {Object}
+* @property {number} zoomFactor Current zoom factor
+* @property {number} prevZoomFactor Previous zoom factor
+*/
+
+
+/** @constructor
+* @param {ZoomPlugin.Options=} options
+* @extends {GridPlugin}
+*/
+let ZoomPlugin = function (options) {
+	let t = this;
+
+	t._updateZoomedLayout = t._updateZoomedLayout.bind(t);
+	t._updateElementLayout = t._updateElementLayout.bind(t);
+	t._onWheel = t._onWheel.bind(t);
+
+	t._hosts = [];
+	t._elems = [];
+
+	if(options) {
+		t.config({ "zoom": options });
+	}
+};
+Ext.inherits(ZoomPlugin, GridPlugin);
+
+/** @type {number}
+* @private
+* @ignore
+*/
+ZoomPlugin.prototype._zoomFactor = 1;
+/** @type {number}
+* @private
+*/
+ZoomPlugin.prototype._maxFactor = 2;
+/** @type {number}
+* @private
+*/
+ZoomPlugin.prototype._minFactor = 0.5;
+/** @type {number}
+* @private
+*/
+ZoomPlugin.prototype._step = 0.25;
+/** @type {boolean}
+* @private
+*/
+ZoomPlugin.prototype._wheel = true;
+/** @type {!Array.<Element>}
+* @private
+*/
+ZoomPlugin.prototype._elems;
+
+/** Plugin can have multiple hosts/tables and share its states across those hosts/tables.
+* @public
+* @override
+* @return {boolean}
+*/
+ZoomPlugin.prototype.hasMultiTableSupport = function() {
+	return true;
+};
+/** @override */
+ZoomPlugin.prototype.getName = function () {
+	return "ZoomPlugin"; // Read Only
+};
+
+/** @override */
+ZoomPlugin.prototype.initialize = function (host, options) {
+	let t = this;
+	if (t._hosts.indexOf(host) >= 0) {
+		return;
+	}
+
+	t.config(options);
+
+	t._applyZoom(host);
+
+	t._hosts.push(host);
+
+	if(t._hosts.length === 1) {
+		host.listen("widthChanged", t._updateZoomedLayout); // Grid needs to be updated its zoomed layout
+	}
+
+	if (t._wheel) {
+		host.listen("wheel", t._onWheel);
+	}
+
+};
+
+/** @override */
+ZoomPlugin.prototype.unload = function (host) {
+	let t = this;
+	let at = t._hosts.indexOf(host);
+	if (at < 0) { return; }
+
+	if(t._hosts.length === 1) {
+		host.unlisten("widthChanged", t._updateZoomedLayout);
+	}
+	if (t._wheel) {
+		host.unlisten("wheel", t._onWheel);
+	}
+	t._hosts.splice(at, 1);
+};
+
+/** @public
+* @param {ZoomPlugin.Options=} options
+*/
+ZoomPlugin.prototype.config = function (options) {
+	if (!options) { return; }
+
+	let extOptions = options["zoom"];
+
+	if (!extOptions) {
+		return;
+	}
+	let t = this;
+
+	let val = extOptions["wheel"];
+	if (val != null) {
+		t._wheel = !!val;
+	}
+
+	val = extOptions["step"];
+	if (val != null) {
+		t._step = val;
+	}
+
+	val = extOptions["zoomFactor"];
+	if (val != null) {
+		t._zoomFactor = val;
+	}
+
+	val = extOptions["maxFactor"];
+	if (val != null) {
+		t._maxFactor = val;
+	}
+
+	val = extOptions["minFactor"];
+	if (val != null) {
+		t._minFactor = val;
+	}
+
+	this.addListener(extOptions, "zoomChanged");
+};
+
+/** @public
+* @param {Object=} gridOptions
+* @return {!Object}
+*/
+ZoomPlugin.prototype.getConfigObject = function (gridOptions) {
+	let obj = gridOptions || {};
+
+	let extOptions = obj.zoom;
+	if(!extOptions) {
+		extOptions = obj.zoom = {};
+	}
+
+	if(!this._wheel) {
+		extOptions.wheel = false;
+	}
+
+	if (this._step !== 0.25) {
+		extOptions.step = this._step;
+	}
+
+	if (this._zoomFactor !== 1) {
+		extOptions.zoomFactor = this._zoomFactor;
+	}
+
+	if (this._maxFactor !== 2) {
+		extOptions.maxFactor = this._maxFactor;
+	}
+
+	if (this._minFactor !== 0.5) {
+		extOptions.minFactor = this._minFactor;
+	}
+	return obj;
+};
+
+/** @public
+* @return {number}
+*/
+ZoomPlugin.prototype.getZoomFactor = function () {
+	return this._zoomFactor;
+};
+
+/** @public
+* @return {number} zoomFactor
+*/
+ZoomPlugin.prototype.zoomIn = function () {
+	let t = this;
+	t.zoomTo(t._zoomFactor + t._step);
+	return t._zoomFactor;
+};
+
+/** @public
+* @return {number} zoomFactor
+*/
+ZoomPlugin.prototype.zoomOut = function () {
+	let t = this;
+	t.zoomTo(t._zoomFactor - t._step);
+	return t._zoomFactor;
+};
+
+/** @public
+* @param {number=} factor
+* @return {number} factor
+*/
+ZoomPlugin.prototype.zoomTo = function (factor) {
+	let t = this;
+
+	if (!factor) { // 0, NaN, undefined, empty string, and null
+		factor = 1;
+	} else {
+		if (typeof factor != "number") {
+			factor = parseFloat(factor);
+		}
+		if (factor < t._minFactor) {
+			factor = t._minFactor;
+		} else if (factor > t._maxFactor) {
+			factor = t._maxFactor;
+		}
+	}
+
+	if (t._zoomFactor === factor) {
+		return factor;
+	}
+
+	let prevZoomFactor = t._zoomFactor;
+	t._zoomFactor = factor;
+
+	// TODO: Refactor the logic, so that the zoom styles are applied directly to the parent element, eliminating margin-right styling
+	let i;
+	for (i = t._elems.length; --i >= 0;) {
+		t._applyZoom(t._elems[i]);
+	}
+	for (i = t._hosts.length; --i >= 0;) {
+		t._applyZoom(t._hosts[i]); // Due to possible virtualization, all grids need to be updated
+	}
+
+	//trigger event
+	t._dispatch("zoomChanged", {
+		"zoomFactor": t._zoomFactor,
+		"prevZoomFactor": prevZoomFactor
+	});
+
+	return t._zoomFactor;
+};
+
+/** @public
+* @param {number} step
+*/
+ZoomPlugin.prototype.setStep = function (step) {
+	let s = step;
+	if (s != null) {
+		if (typeof s !== "number") {
+			s = parseFloat(s);
+		}
+		this._step = s;
+	}
+};
+
+/** @public
+* @function
+* @param {number=} zoomFactor
+* @return {number} zoomFactor
+*/
+ZoomPlugin.prototype.zoomDefault = ZoomPlugin.prototype.zoomTo;
+
+/** @public
+* @function
+* @param {Element} elem
+*/
+ZoomPlugin.prototype.addElement = function (elem) {
+	let t = this;
+	if (elem && t._elems.indexOf(elem) < 0) {
+		t._applyZoom(elem);
+		t._elems.push(elem);
+	}
+};
+
+/** @public
+* @function
+* @param {Element} elem
+* @returns {Element}
+*/
+ZoomPlugin.prototype.removeElement = function (elem) {
+	let t = this;
+	let at = t._elems.indexOf(elem);
+	if (at >= 0) {
+		t._elems.splice(at, 1);
+		t._clearZoomStyles(elem);
+	}
+	return elem;
+};
+
+/** @public
+*/
+ZoomPlugin.prototype.updateZoomedLayout = function() {
+	this._updateZoomedLayout();
+};
+
+/** @private
+* @param {Element|tr.Grid} obj
+*/
+ZoomPlugin.prototype._applyZoom = function (obj) {
+	let t = this;
+	let elem = (obj && obj.getElement) ? obj.getElement() : obj;
+	if(!elem) {
+		return;
+	}
+
+	// This type of css scale is most compatable options
+	// alternative css can be more promising but not the most copatable (like: zoom)
+	if (t._zoomFactor !== 1) {
+		elem.style["transform"] = "scale(" + t._zoomFactor + ")";
+		elem.style["transformOrigin"] = "0 0 0";
+		elem.style["overflow"] = "initial";
+	} else { // Clear
+		t._clearZoomStyles(elem);
+	}
+	t._updateElementLayout(elem);
+
+	if (obj instanceof Object) {
+		obj["zoomFactor"] =  t._zoomFactor; // Scroll event is fired
+	}
+};
+
+/** @private
+* @param {Element} elem
+*/
+ZoomPlugin.prototype._updateElementLayout = function (elem) {
+	let domStyle = /** @type{CSSStyleDeclaration} */(elem.style);
+	if(this._zoomFactor !== 1) {
+		// After scaling there is empty space between elem and it's parent
+		// So it needs to correct the transformation shift of an inline-element
+		domStyle["marginRight"] = elem.offsetWidth * (this._zoomFactor - 1) + "px";
+	} else {
+		domStyle["marginRight"] = "";
+	}
+};
+
+/** @private
+*/
+ZoomPlugin.prototype._updateZoomedLayout = function() {
+	let i, elem;
+	for(i = this._elems.length; --i >= 0;) {
+		elem = this._elems[i];
+		this._updateElementLayout(elem);
+	}
+	for(i = this._hosts.length; --i >= 0;) {
+		elem = this._hosts[i].getElement(); // Due to possible virtualization, all grids need to be updated
+		this._updateElementLayout(elem);
+	}
+};
+
+/** @private
+* @param {Element} elem
+*/
+ZoomPlugin.prototype._clearZoomStyles = function (elem) {
+	let domStyle = /** @type{CSSStyleDeclaration} */(elem.style);
+	domStyle["transform"] = "";
+	domStyle["transformOrigin"] = "";
+	domStyle["marginRight"] = "";
+	domStyle["overflow"] = "";
+};
+
+/** @public
+* @param {boolean=} bool
+*/
+ZoomPlugin.prototype.enableWheelToZoom = function (bool) {
+	let t = this;
+	bool = !!bool; // Force boolean
+	if (t._wheel !== bool) {
+		t._wheel = bool;
+		for (let i = t._hosts.length; --i >= 0;) {
+			if (bool) {
+				t._hosts[i].listen("wheel", t._onWheel);
+			} else {
+				t._hosts[i].unlisten("wheel", t._onWheel);
+			}
+		}
+	}
+};
+
+/** @private
+* @param {Event} e
+*/
+ZoomPlugin.prototype._onWheel = function (e) {
+	if (!e.ctrlKey || e.shiftKey || e.altKey) { return; } // Only handle Ctrl+wheel
+
+	let delta = e["deltaY"]; // Provided by WheelEvent >> https://developer.mozilla.org/en-US/docs/Web/API/WheelEvent
+	if (!delta) { return; }
+
+	e.preventDefault(); // Disable browser default zoom behaviour
+	if (delta > 0) {
+		this.zoomOut();
+	} else {
+		this.zoomIn();
+	}
+};
+
+/** @public
+* @return {Function} Mouse wheel logic that is attached to this instance
+*/
+ZoomPlugin.prototype.getDefaultMouseWheelLogic = function () {
+	return this._onWheel;
+};
+
+/** @public
+* @ignore
+* @return {!Object}
+*/
+ZoomPlugin.prototype._getEventHandlers = function() {
+	return {
+		"wheel": this._onWheel
+	};
+};
+
+
+
+export default ZoomPlugin;
+export { ZoomPlugin, ZoomPlugin as Zoom, ZoomPlugin as ZoomExtension };

package/lib/zoom/es6/index.d.ts

@@ -0,0 +1 @@
+export * from "./Zoom";

package/lib/zoom/es6/index.js

@@ -0,0 +1 @@
+export * from "./Zoom.js";

package/package.json

@@ -0,0 +1,69 @@
+{
+	"name": "@refinitiv-ui/efx-grid",
+	"description": "Grid Components Library",
+	"author": "Refinitiv",
+	"license": "SEE LICENSE IN LICENSE",
+	"type": "module",
+	"main": "./lib/grid/index.js",
+	"module": "./lib/grid/index.js",
+	"types": "./lib/types/index.d.ts",
+	"homepage": "https://refinitiv.github.io/efx-grid",
+	"typesVersions": {
+		"*": {
+			"extensions": [
+				"lib/types/index.d.ts"
+			],
+			"column-selection-dialog": [
+				"lib/column-selection-dialog/lib/column-selection-dialog.d.ts"
+			],
+			"column-format-dialog": [
+				"lib/column-format-dialog/lib/column-format-dialog.d.ts"
+			],
+			"filter-dialog": [
+				"lib/filter-dialog/lib/filter-dialog.d.ts"
+			],
+			"grid": [
+				"lib/grid/lib/efx-grid.d.ts"
+			],
+			"utils": [
+				"lib/utils/index.d.ts"
+			],
+			"*": [
+				"lib/types/index.d.ts"
+			]
+		}
+	},
+	"exports": {
+		".": "./lib/grid/index.js",
+		"./themes/halo/dark": "./lib/grid/themes/halo/dark.js",
+		"./themes/halo/light": "./lib/grid/themes/halo/light.js",
+		"./themes/solar/charcoal": "./lib/grid/themes/solar/charcoal.js",
+		"./themes/solar/pearl": "./lib/grid/themes/solar/pearl.js",
+		"./column-format-dialog": "./lib/column-format-dialog/lib/column-format-dialog.js",
+		"./column-format-dialog/themes/halo/dark": "./lib/column-format-dialog/themes/halo/dark.js",
+		"./column-format-dialog/themes/halo/light": "./lib/column-format-dialog/themes/halo/light.js",
+		"./column-format-dialog/themes/solar/charcoal": "./lib/column-format-dialog/themes/solar/charcoal.js",
+		"./column-format-dialog/themes/solar/pearl": "./lib/column-format-dialog/themes/solar/pearl.js",
+		"./column-selection-dialog": "./lib/column-selection-dialog/lib/column-selection-dialog.js",
+		"./column-selection-dialog/themes/halo/dark": "./lib/column-selection-dialog/themes/halo/dark.js",
+		"./column-selection-dialog/themes/halo/light": "./lib/column-selection-dialog/themes/halo/light.js",
+		"./column-selection-dialog/themes/solar/charcoal": "./lib/column-selection-dialog/themes/solar/charcoal.js",
+		"./column-selection-dialog/themes/solar/pearl": "./lib/column-selection-dialog/themes/solar/pearl.js",
+		"./filter-dialog": "./lib/filter-dialog/lib/filter-dialog.js",
+		"./filter-dialog/themes/halo/dark": "./lib/filter-dialog/themes/halo/dark.js",
+		"./filter-dialog/themes/halo/light": "./lib/filter-dialog/themes/halo/light.js",
+		"./filter-dialog/themes/solar/charcoal": "./lib/filter-dialog/themes/solar/charcoal.js",
+		"./filter-dialog/themes/solar/pearl": "./lib/filter-dialog/themes/solar/pearl.js",
+		"./extensions": "./lib/index.js",
+		"./window-exporter": "./lib/window-exporter.js",
+		"./grid": "./lib/grid/lib/efx-grid.js",
+		"./formatters": "./lib/formatters/es6/index.js",
+		"./formatters/*": "./lib/formatters/es6/*.js",
+		"./utils": "./lib/utils/index.js",
+		"./types": "./lib/types/index.d.ts"
+	},
+	"publishConfig": {
+		"access": "public"
+	},
+	"version": "0.0.0-dev.12023565035.1"
+}