@aurigma/design-atoms
Version:
Design Atoms is a part of Customer's Canvas SDK which allows for manipulating individual design elements through your code.
1,035 lines • 83.2 kB
JavaScript
var __values = (this && this.__values) || function(o) {
var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
if (m) return m.call(o);
if (o && typeof o.length === "number") return {
next: function () {
if (o && i >= o.length) o = void 0;
return { value: o && o[i++], done: !o };
}
};
throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
};
var __read = (this && this.__read) || function (o, n) {
var m = typeof Symbol === "function" && o[Symbol.iterator];
if (!m) return o;
var i = m.call(o), r, ar = [], e;
try {
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
}
catch (error) { e = { error: error }; }
finally {
try {
if (r && !r.done && (m = i["return"])) m.call(i);
}
finally { if (e) throw e.error; }
}
return ar;
};
var __spread = (this && this.__spread) || function () {
for (var ar = [], i = 0; i < arguments.length; i++) ar = ar.concat(__read(arguments[i]));
return ar;
};
import { EventWithSenderArg } from "@aurigma/design-atoms-model/EventObject";
import { ScrollBarsStyle } from "./ScrollBarsStyle";
import { ViewportAlignment } from "./ViewportAlignment";
import { ZoomMode } from "./ZoomMode";
import { ZoomQuality } from "./ZoomQuality";
import { UpdateStatus } from "../UpdateStatus";
import { ViewerClientSideOptions } from "./ViewerClientSideOptions";
import { Utils, Cursor } from "../Utils/Common";
import { PointF, normalizeAngle } from "@aurigma/design-atoms-model/Math";
import { StandardIntervalCheckLoop } from "./StandardIntervalCheckLoop";
import Environment from "@aurigma/design-atoms-model/Utils/Environment";
import { RulersConfigUnit, getUnitScale } from "./Interfaces";
import { CoordinatesConvertUtils } from "../Utils/CoordinatesConvertUtils";
var ZoomParams = /** @class */ (function () {
function ZoomParams() {
}
return ZoomParams;
}());
export { ZoomParams };
var TouchFlags = /** @class */ (function () {
function TouchFlags() {
}
return TouchFlags;
}());
export { TouchFlags };
var BaseViewer = /** @class */ (function () {
function BaseViewer(_zone) {
var _this = this;
if (_zone === void 0) { _zone = null; }
this._zone = _zone;
this._contentElements = [];
this._rulerBorderWidth = 1;
this._rulerDivision = 5;
this._ignoreDocumentClickOnce = false;
this._documentClickEvent = new EventWithSenderArg();
this._clickEvent = new EventWithSenderArg();
this._mouseDownEvent = new EventWithSenderArg();
this._mouseMoveEvent = new EventWithSenderArg();
this._mouseUpEvent = new EventWithSenderArg();
this._workspaceDoubleClickEvent = new EventWithSenderArg();
this._workspaceClickEvent = new EventWithSenderArg();
this._workspaceChangedEvent = new EventWithSenderArg();
this._workspaceMouseDownEvent = new EventWithSenderArg();
this._workspaceMouseUpEvent = new EventWithSenderArg();
this._workspaceMouseMoveEvent = new EventWithSenderArg();
this._statusChangedEvent = new EventWithSenderArg();
this._pinchStartEvent = new EventWithSenderArg();
this._pinchStopEvent = new EventWithSenderArg();
this._scrolledEvent = new EventWithSenderArg();
this._onresizeEvent = new EventWithSenderArg();
this._zoomedEvent = new EventWithSenderArg();
this._invokingCallbackRequestEvent = new EventWithSenderArg(); //TODO: delete
this._intervalCheckLoop = StandardIntervalCheckLoop;
this._contentAngle = 0;
this._rulersOnHover = function (e) {
// used to draw slide bars just when somebody move mouse over content but don't hold some object
// and don't use setCapture
if (!_this.rulerEnabled)
return;
var topSlideBar = _this._rulers.topSlideBar;
var leftSlideBar = _this._rulers.leftSlideBar;
var viewerLocation = CoordinatesConvertUtils.getElementPageCoord(_this._viewerElement);
var x = e.page.x - viewerLocation.left;
var y = e.page.y - viewerLocation.top;
topSlideBar.style.left = x + "px";
leftSlideBar.style.top = y + "px";
};
this._backColor = "#FFFFFF";
this._maxZoom = 16;
this._minZoom = 0.05;
this._screenXDpi = 72;
this._screenYDpi = 72;
this._scrollBarsStyle = ScrollBarsStyle.auto;
this._scrollBarWidth = 17;
this._scrollingPosition = new PointF(0, 0);
this._viewportAlignment = ViewportAlignment.leftTop;
this._zoom = 1;
this._zoomMode = ZoomMode.none,
this._zoomQuality = ZoomQuality.shrinkHighStretchLow,
this._bestFitWhiteSpacePc = 0,
this._stateFieldId = "";
this._needUpdateViewport = false;
this._msTouchActionInitialValue = "";
this._toolTip = "";
this._accessKey = "";
this._tabIndex = "";
this._callbackArgs = "";
this._callbackContext = 0;
this._status = UpdateStatus.ready;
this._exceptionDescription = "";
this._returnValue = "";
this._clientSideOptions = new ViewerClientSideOptions(this);
this._delayedRefreshTimeout = 1000;
this._refreshTimer = null;
this._contentElements = [];
//Specify whether we need to refresh the image.
this._needToRefresh = false;
this._rulerEnabled = false;
this._rulerWidth = 13;
this._rulerScale = 1; // to translate points to inches for example.
this._rulerOffsetX = 0;
this._rulerOffsetY = 0;
this._rulersOnScrollDelegate = null;
this._rulersOnZoomDelegate = null;
this._activeAjax = 0;
this._pinchZoomEnabled = true;
this._holderBounds = null;
this._contentCtxDimension = {};
this._holderElement = null;
this._touchFlags = new TouchFlags();
this._rulers = {};
this._bodyCursor = null;
}
Object.defineProperty(BaseViewer.prototype, "element", {
get: function () {
return this._viewerElement;
},
enumerable: true,
configurable: true
});
Object.defineProperty(BaseViewer.prototype, "id", {
get: function () {
return this._viewerElement.id;
},
enumerable: true,
configurable: true
});
Object.defineProperty(BaseViewer.prototype, "contentAngle", {
get: function () {
return this._contentAngle;
},
set: function (value) {
if (value == null || value === this._contentAngle)
return;
this._contentAngle = normalizeAngle(value);
var translate = "(0, 0)";
if (this._contentAngle === 90) {
translate = "(0px, -100%)";
}
else if (this._contentAngle === 180) {
translate = "(-100%, -100%)";
}
else if (this._contentAngle === 270) {
translate = "(-100%, 0px)";
}
this._contentCtx.style.transform = "rotate(" + this._contentAngle + "deg) translate" + translate;
this._contentCtx.style.transformOrigin = "left top";
this._updateViewport();
this._canvas.setZoom(this.zoom, undefined, { force: true });
this._canvas.updateSelection();
this._canvas.redraw();
},
enumerable: true,
configurable: true
});
Object.defineProperty(BaseViewer.prototype, "holderBounds", {
get: function () {
return this._getElementBounds(this.element);
},
enumerable: true,
configurable: true
});
Object.defineProperty(BaseViewer.prototype, "contentWidth", {
get: function () {
/// <summary>Gets a value that represents the width of the control's content taking into account its horizontal resolution and zoom value.</summary>
/// <value type="Number">The width of the control's content.</value>
/// <remarks><para>This property corresponds to <see cref="P:Aurigma.AjaxControls.BaseViewer.ContentWidth">BaseViewer.ContentWidth</see> server-side member.</para></remarks>
return this._holderBounds.width;
},
enumerable: true,
configurable: true
});
Object.defineProperty(BaseViewer.prototype, "width", {
get: function () {
/// <summary>Gets the width (in pixels) of the control area.</summary>
/// <value type="Number">The width of the control area.</value>
/// <remarks><para>This property corresponds to <see cref="P:Aurigma.AjaxControls.BaseViewer.Width">BaseViewer.Width</see> server-side member.</para></remarks>
return this._holderBounds.offsetWidth;
},
enumerable: true,
configurable: true
});
Object.defineProperty(BaseViewer.prototype, "contentHeight", {
get: function () {
/// <summary>Gets a value that represents the height of the control's content taking into account its vertical resolution and zoom value.</summary>
/// <value type="Number">The height of the control's content.</value>
/// <remarks><para>This property corresponds to <see cref="P:Aurigma.AjaxControls.BaseViewer.ContentHeight">BaseViewer.ContentHeight</see> server-side member.</para></remarks>
return this._holderBounds.height;
},
enumerable: true,
configurable: true
});
Object.defineProperty(BaseViewer.prototype, "height", {
get: function () {
/// <summary>Gets the height (in pixels) of the control area.</summary>
/// <value type="Number">The height of the control area.</value>
/// <remarks><para>This property corresponds to <see cref="P:Aurigma.AjaxControls.BaseViewer.Height">BaseViewer.Height</see> server-side member.</para></remarks>
return this._holderBounds.offsetHeight;
},
enumerable: true,
configurable: true
});
BaseViewer.prototype._notifySizeChanged = function () {
this._onResize(null, false);
};
BaseViewer.prototype._renderContent = function (sb) {
return sb;
};
Object.defineProperty(BaseViewer.prototype, "hasContent", {
get: function () {
return true;
},
enumerable: true,
configurable: true
});
BaseViewer.prototype._render = function () {
var wsize = "width:" + this.contentWidth + "px;height:" + this.contentHeight + "px;";
var sb = "";
sb += "\u003cdiv id=\"cvContent\" style=\"position:absolute; overflow: hidden; box-sizing: content-box; -webkit-box-sizing: content-box; -moz-box-sizing: content-box;";
// todo: remove
// only for debug
sb += "display: none;";
if (this.hasContent)
sb += wsize;
else
sb += "display:none;";
var vl = this.getViewportLocation();
sb += "left:" + vl.x + "px;top:" + vl.y + "px";
sb += "\"\u003e";
sb = this._renderContent(sb);
// close content.
sb += "\u003c/div\u003e";
sb += "\u003c/div\u003e";
return sb;
};
BaseViewer.prototype._clearElement = function (el) {
while (el.firstChild)
el.removeChild(el.firstChild);
};
BaseViewer.prototype._rulersOnScroll = function () {
if (!this._touchFlags.pinchStarted)
this._updateRulersStyle();
};
BaseViewer.prototype._rulersOnZoom = function () {
if (!this._touchFlags.pinchStarted) {
this._drawRulers();
this._updateRulersStyle();
this._canvas.updateViewport();
}
};
BaseViewer.prototype._initializeRulers = function () {
// create Rulers.
var el = this.element.parentNode;
var doc = el.ownerDocument;
var rulersStyle = "z-index: 2; -webkit-transform: translate3d(0px, 0px, 0px); -moz-transform: translate3d(0px, 0px, 0px)";
var topRuller = doc.createElement("div");
topRuller.setAttribute("style", rulersStyle);
var fullTopRuller = doc.createElement("div");
var leftRuller = doc.createElement("div");
leftRuller.setAttribute("style", rulersStyle);
var fullLeftRuller = doc.createElement("div");
var whiteRect = doc.createElement("div");
whiteRect.style.zIndex = "2";
var topSlideBar = doc.createElement("div");
var leftSlideBar = doc.createElement("div");
this._rulers.topRuller = topRuller;
this._rulers.leftRuller = leftRuller;
this._rulers.fullTopRuller = fullTopRuller;
this._rulers.fullLeftRuller = fullLeftRuller;
this._rulers.whiteRect = whiteRect;
this._rulers.topSlideBar = topSlideBar;
this._rulers.leftSlideBar = leftSlideBar;
var id = this.element.id;
topRuller.id = id + "_TopRuler";
fullTopRuller.id = id + "_FullTopRuler";
leftRuller.id = id + "_LeftRuler";
fullLeftRuller.id = id + "_FullLeftRuler";
whiteRect.id = id + "_WhiteRect";
topSlideBar.id = id + "_TopSlideBar";
leftSlideBar.id = id + "_LeftSlideBar";
fullTopRuller = topRuller.appendChild(fullTopRuller);
fullLeftRuller = leftRuller.appendChild(fullLeftRuller);
topSlideBar = topRuller.appendChild(topSlideBar);
leftSlideBar = leftRuller.appendChild(leftSlideBar);
topRuller = el.appendChild(topRuller);
leftRuller = el.appendChild(leftRuller);
whiteRect = el.appendChild(whiteRect);
topRuller.style.position =
fullTopRuller.style.position =
leftRuller.style.position =
fullLeftRuller.style.position =
whiteRect.style.position =
topSlideBar.style.position =
leftSlideBar.style.position = "absolute";
leftSlideBar.style.width = topSlideBar.style.height = this.rulerWidth + "px";
leftSlideBar.style.height = topSlideBar.style.width = "1px";
leftSlideBar.style.backgroundColor = topSlideBar.style.backgroundColor = "#ff0000";
leftSlideBar.style.overflow = topSlideBar.style.overflow = "hidden";
leftSlideBar.style.webkitTransform = topSlideBar.style.webkitTransform = "translate3d(0, 0, 0)";
topRuller.style.overflow =
leftRuller.style.overflow =
whiteRect.style.overflow = "hidden";
topRuller.style.visibility =
leftRuller.style.visibility =
whiteRect.style.visibility = "hidden";
whiteRect.style.backgroundColor = "#909090";
el.style.position = "relative";
this._drawRulers();
this._updateRulersStyle();
if (!this._rulersOnScrollDelegate) {
this._rulersOnScrollDelegate = this._rulersOnScroll.bind(this);
this.add_scrolled(this._rulersOnScrollDelegate);
}
if (!this._rulersOnZoomDelegate) {
this._rulersOnZoomDelegate = this._rulersOnZoom.bind(this);
this.add_zoomed(this._rulersOnZoomDelegate);
}
};
BaseViewer.prototype._disposeRulers = function () {
if (this._rulersOnScrollDelegate) {
this.remove_scrolled(this._rulersOnScrollDelegate);
this._rulersOnScrollDelegate = null;
}
if (this._rulersOnZoomDelegate) {
this.remove_zoomed(this._rulersOnZoomDelegate);
this._rulersOnZoomDelegate = null;
}
};
BaseViewer.prototype._updateRulersStyle = function () {
// Set ruler style.
var leftRuller = this._rulers.leftRuller;
var topRuller = this._rulers.topRuller;
var fullLeftRuller = this._rulers.fullLeftRuller;
var fullTopRuller = this._rulers.fullTopRuller;
var whiteRect = this._rulers.whiteRect;
var width = this.width;
var hight = this.height;
var contentWidth = this.contentWidth;
var contentHeight = this.contentHeight;
var scrollBarWidth = this.scrollBarWidth;
var leftRullerStyle = leftRuller.style;
var topRullerStyle = topRuller.style;
var fullTopRullerStyle = fullTopRuller.style;
var fullLeftRullerStyle = fullLeftRuller.style;
var whiteRectStyle = whiteRect.style;
if (!this._rulerEnabled) {
topRullerStyle.width = topRullerStyle.height = leftRullerStyle.width = leftRullerStyle.height =
topRullerStyle.borderWidth = leftRullerStyle.borderWidth = whiteRectStyle.width =
whiteRectStyle.height = "0px";
leftRullerStyle.visibility = topRullerStyle.visibility = whiteRectStyle.visibility = "hidden";
}
else {
leftRullerStyle.visibility = topRullerStyle.visibility = whiteRectStyle.visibility = "inherit";
leftRullerStyle.backgroundColor = topRullerStyle.backgroundColor = "#ffffff";
leftRullerStyle.borderRight = topRullerStyle.borderBottom = this._rulerBorderWidth + "px solid black";
var sbAlways = this.scrollBarsStyle == ScrollBarsStyle.always;
var sbAuto = this.scrollBarsStyle == ScrollBarsStyle.auto;
var isThisScrollBar = sbAlways || (sbAuto && (contentHeight > hight - this.rulerWidth));
var isThatScrollBar = sbAlways || (sbAuto && (contentWidth > width - this.rulerWidth));
isThisScrollBar =
isThisScrollBar ||
(isThatScrollBar && sbAuto && (contentHeight > hight - this.rulerWidth - scrollBarWidth));
isThatScrollBar =
isThatScrollBar ||
(isThisScrollBar && sbAuto && (contentWidth > width - this.rulerWidth - scrollBarWidth));
var rw = isThisScrollBar ? width - scrollBarWidth : width;
var rh = isThatScrollBar ? hight - scrollBarWidth : hight;
topRullerStyle.width = rw + "px";
leftRullerStyle.height = rh + "px";
fullTopRullerStyle.height = topRullerStyle.height = whiteRect.style.height = this._rulerWidth + "px";
fullLeftRullerStyle.width = leftRullerStyle.width = whiteRect.style.width = this._rulerWidth + "px";
// to get clear scroll we need rulers positioned in top-left corner.
topRullerStyle.top = leftRullerStyle.top = topRullerStyle.left = leftRullerStyle.left =
whiteRect.style.top = whiteRect.style.left = "0px";
var sp = this.scrollingPosition;
fullTopRullerStyle.left = -sp.x + "px";
fullLeftRullerStyle.top = -sp.y + "px";
}
};
BaseViewer.prototype._setRulersConfig = function (config) {
if (config === null || config === void 0 ? void 0 : config.enabled) {
var scale = getUnitScale(config);
this._rulerEnabled = true;
this._rulerOffsetX = -1 * config.origin.X / scale;
this._rulerOffsetY = -1 * config.origin.Y / scale;
this._rulerScale = scale;
this._rulerDivision = config.unit === RulersConfigUnit.Inch ? 4 : 5;
}
else {
this._rulerEnabled = false;
}
this._notifySizeChanged();
};
BaseViewer.prototype._drawRulers = function () {
if (!this._rulerEnabled || this._baseRulersOffset == null)
return;
var doc = this.element.parentNode.ownerDocument;
var fullLeftRuler = this._rulers.fullLeftRuller;
var fullTopRuler = this._rulers.fullTopRuller;
var axes = [
{
controlLength: this.width,
contentLength: this.contentWidth,
viewportLocation: this.getViewportLocation().x,
factor: this.zoom * this.actualSizeHorizontalScale,
ruler: fullTopRuler,
startWorkspaceLocation: null,
endWorkspaceLocation: null,
rulerPixelLength: null,
origin: null
},
{
controlLength: this.height,
contentLength: this.contentHeight,
viewportLocation: this.getViewportLocation().y,
factor: this.zoom * this.actualSizeHorizontalScale,
ruler: fullLeftRuler,
startWorkspaceLocation: null,
endWorkspaceLocation: null,
rulerPixelLength: null,
origin: null
}
];
var rulerOffsets = [this.rulerOffsetX + this._baseRulersOffset.x, this.rulerOffsetY + this._baseRulersOffset.y];
var sw = this.scrollBarWidth;
var sbAlways = this.scrollBarsStyle == ScrollBarsStyle.always;
var sbAuto = this.scrollBarsStyle == ScrollBarsStyle.auto;
var rulerScale = this.rulerScale;
for (var i = 0; i < axes.length; i++) {
axes[i].origin = axes[i].viewportLocation + rulerOffsets[i] * axes[i].factor;
var isThisScrollBar = sbAlways ||
(sbAuto && (axes[1 - i].contentLength > axes[1 - i].controlLength - this.rulerWidth));
var isThatScrollBar = sbAlways ||
(sbAuto && (axes[i].contentLength > axes[i].controlLength - this.rulerWidth));
isThisScrollBar =
isThisScrollBar ||
(isThatScrollBar &&
sbAuto &&
(axes[1 - i].contentLength > axes[1 - i].controlLength - this.rulerWidth - sw));
isThatScrollBar =
isThatScrollBar ||
(isThisScrollBar &&
sbAuto &&
(axes[i].contentLength > axes[i].controlLength - this.rulerWidth - sw));
if (isThatScrollBar)
axes[i].rulerPixelLength = Math.max(axes[i].contentLength + this.rulerWidth, axes[i].controlLength - (isThisScrollBar ? sw : 0));
else
axes[i].rulerPixelLength =
(isThisScrollBar) ? axes[i].controlLength - sw : axes[i].controlLength;
axes[i].startWorkspaceLocation = -axes[i].origin;
axes[i].endWorkspaceLocation = axes[i].startWorkspaceLocation + axes[i].rulerPixelLength;
axes[i].startWorkspaceLocation /= axes[i].factor;
axes[i].endWorkspaceLocation /= axes[i].factor;
axes[i].startWorkspaceLocation *= rulerScale;
axes[i].endWorkspaceLocation *= rulerScale;
// generate division.
var maxCutLength = 80; // pixels;
var minCutLength = 4; // pixels;
var currentDivision = 1;
var tmp = (maxCutLength / axes[i].factor) * rulerScale;
var size = 1;
while (tmp > 10) {
tmp /= 10;
size *= 10;
}
if (tmp > 5) {
size = 5 * size;
currentDivision = this._rulerDivision;
}
else if (tmp > 2) {
size = 2 * size;
currentDivision = 2;
}
// generate first fragmentation (with numbers);
var cuts = [{ location: 0, index: 0 }];
var cur = 0;
while (cur < axes[i].endWorkspaceLocation) {
cur += size;
cuts.push({ location: cur, index: 0 });
}
cur = 0;
while (cur > axes[i].startWorkspaceLocation) {
cur -= size;
cuts.push({ location: cur, index: 0 });
}
// clear elements.
this._clearElement(axes[i].ruler);
// draw text.
var j;
for (j = 0; j < cuts.length; j++) {
var txt = doc.createElement("span");
var labelText = Math.abs(Math.round(cuts[j].location)).toString();
txt.innerHTML = (i == 1) ? labelText.split('').join('<br/>') : labelText;
txt.style.position = "absolute";
txt.style.fontSize = "9px";
txt.style.margin = "0px";
txt.style.padding = "0px";
txt.style.fontFamily = "Tahoma, Verdana, Arial;";
txt.style.backgroundColor = "#ffffff";
var offset = Math.round(cuts[j].location * axes[i].factor / rulerScale + axes[i].origin);
txt.style.top = (i == 0) ? "-1px" : offset + 2 + "px";
txt.style.left = (i == 1) ? "2px" : offset + 2 + "px";
axes[i].ruler.appendChild(txt);
}
// create other cuts.
var currentIndex = 1;
var divs = {
1: { newDiv: this._rulerDivision, fractions: 2 },
2: { newDiv: 1, fractions: 2 }
};
divs[this._rulerDivision] = { newDiv: 1, fractions: this._rulerDivision };
var c = divs[currentDivision];
var newSize = size / c.fractions;
while (newSize * axes[i].factor / rulerScale > minCutLength) {
var l = cuts.length - 1;
while (l >= 0) {
for (var k = 0; k < c.fractions - 1; k++)
cuts.push({ index: currentIndex, location: cuts[l].location + newSize * (k + 1) });
l--;
}
currentIndex++;
c = divs[c.newDiv];
newSize = newSize / c.fractions;
}
var j;
for (j = 0; j < cuts.length; j++) {
var cut = doc.createElement("div");
cut.style.position = "absolute";
cut.style.overflow = "hidden";
cut.style.backgroundColor = "#000000";
cut.style.padding = "0px";
cut.style.margin = "0px";
var offset = Math.round(cuts[j].location * axes[i].factor / rulerScale +
axes[i].origin /* + this.rulerWidth*/);
var rw = this.rulerWidth;
var cutWidth = Math.max(Math.ceil(rw / Math.pow(2, cuts[j].index)), 2);
cut.style.width = (i == 0) ? "1px" : cutWidth + "px";
cut.style.height = (i == 1) ? "1px" : cutWidth + "px";
cut.style.top = (i == 0) ? (rw - cutWidth) + "px" : offset + "px";
cut.style.left = (i == 1) ? (rw - cutWidth) + "px" : offset + "px";
cut.style.webkitTransform = "translate3d(0, 0, 0)";
axes[i].ruler.appendChild(cut);
}
}
};
BaseViewer.prototype._generateCssWithPrefixes = function (prefixes, value) {
var retVal = {};
for (var i in prefixes)
retVal[prefixes[i] + "transition"] = value;
return retVal;
};
BaseViewer.prototype._getPageZoom = function () {
return screen.deviceXDPI / screen.logicalXDPI;
};
BaseViewer.prototype.getActualScrollPosition = function () {
var holder = this.element;
var scrollLeft = holder.scrollLeft, scrollTop = holder.scrollTop;
return new PointF(scrollLeft, scrollTop);
};
BaseViewer.prototype.getViewportLocation = function () {
var rulerWidth = this.actualRulerWidth;
var elementBounds = this._holderBounds;
var viewAreaWidth = elementBounds.width - rulerWidth;
var viewAreaHeight = elementBounds.height - rulerWidth;
var swapSides = this._contentAngle === 90 || this._contentAngle === 270;
var contentWidth = swapSides ? this.contentHeight : this.contentWidth;
var contentHeight = swapSides ? this.contentWidth : this.contentHeight;
var x, y;
switch (this._viewportAlignment) {
case ViewportAlignment.centerBottom:
case ViewportAlignment.centerCenter:
case ViewportAlignment.centerTop:
x = Math.floor((viewAreaWidth - contentWidth) / 2);
break;
case ViewportAlignment.leftBottom:
case ViewportAlignment.leftCenter:
case ViewportAlignment.leftTop:
x = 0;
break;
case ViewportAlignment.rightBottom:
case ViewportAlignment.rightCenter:
case ViewportAlignment.rightTop:
x = viewAreaWidth - contentWidth;
break;
}
;
switch (this._viewportAlignment) {
case ViewportAlignment.centerCenter:
case ViewportAlignment.leftCenter:
case ViewportAlignment.rightCenter:
y = Math.floor((viewAreaHeight - contentHeight) / 2);
break;
case ViewportAlignment.centerTop:
case ViewportAlignment.leftTop:
case ViewportAlignment.rightTop:
y = 0;
break;
case ViewportAlignment.centerBottom:
case ViewportAlignment.leftBottom:
case ViewportAlignment.rightBottom:
y = viewAreaHeight - contentHeight;
break;
}
;
return new PointF(Math.max(rulerWidth, x + rulerWidth), Math.max(rulerWidth, y + rulerWidth));
};
BaseViewer.prototype.ignoreDocumentClickOnce = function () {
this._ignoreDocumentClickOnce = true;
};
BaseViewer.prototype._onDocumentClick = function (e) {
if (this._ignoreDocumentClickOnce === true) {
this._ignoreDocumentClickOnce = false;
return;
}
this._documentClickEvent.notify(this, e);
};
BaseViewer.prototype._makeInactive = function (domElement) {
/// <param name="e" domElement="true" />
domElement.ondrag = function () {
return false;
};
domElement.unselectable = "on";
};
BaseViewer.prototype._makeInactiveAll = function () {
var el = this._contentElements;
for (var i = 0; i < el.length; i++)
this._makeInactive(el[i]);
};
BaseViewer.prototype._resizeContentElements = function () {
var contentWidth = this.contentWidth;
var contentHeight = this.contentHeight;
var el = this._contentElements;
for (var i = 0; i < el.length; i++) {
el[i].style.width = contentWidth + "px";
el[i].style.height = contentHeight + "px";
if (el[i].tagName == "IMG") {
el[i].width = contentWidth;
el[i].height = contentHeight;
}
}
this._contentCtxDimension.width = contentWidth;
this._contentCtxDimension.height = contentHeight;
this._holderBounds = this._getElementBounds(this.element);
};
BaseViewer.prototype._getElementBounds = function (element) {
//when the element is placed in the hidden element ("display: none" style)
//then clientWidth, clientHeight, offsetWidth, offsetHeight, offsetTop, offsetLeft are 0
var hiddenElements = [];
//var jElement = this._jquery(element);
//remove display:none style from parent elements
while (element.length > 0 && element != document) {
if (element.style.display == "none") {
hiddenElements.push({
element: element,
display: element.style.display,
visibility: element.style.visibility
});
element.style.visibility = "hidden";
element.style.display = "block";
}
element = element.parent();
}
//get element properties
var width = element.clientWidth;
var height = element.clientHeight;
var offsetHeight = element.offsetHeight;
var offsetWidth = element.offsetWidth;
var offsetTop = element.offsetTop;
var offsetLeft = element.offsetLeft;
//restore display:none style
for (var i = 0; i < hiddenElements.length; i++) {
var hiddenElementBound = hiddenElements[i];
hiddenElementBound.element[0].style.visibility = hiddenElementBound.visibility;
hiddenElementBound.element[0].style.display = hiddenElementBound.display;
}
return {
"width": width,
"height": height,
"offsetWidth": offsetWidth,
"offsetHeight": offsetHeight,
"offsetTop": offsetTop,
"offsetLeft": offsetLeft
};
};
BaseViewer.prototype._isManyTouches = function (event) {
if (Environment.IsTouchDevice()) {
var originalEvent = event.originalEvent || event;
if (window.navigator.pointerEnabled) {
if (!this._touchFlags.multiTouch && originalEvent.isPrimary === false)
this._touchFlags.multiTouch = true;
if (this._touchFlags.multiTouch)
return true;
}
else {
if (typeof originalEvent.touches === "object" &&
originalEvent.touches !== null &&
typeof originalEvent.touches.length === "number" &&
originalEvent.touches.length > 1) {
return true;
}
}
}
return false;
};
BaseViewer.prototype._onTouch = function (e) {
this._touchFlags.startZoom = this.zoom;
this._touchFlags.multiTouch = e.gesture.touches.length > 1;
};
BaseViewer.prototype._onPinch = function (e, skipScrollToGestureCenter) {
e.gesture.preventDefault();
e.preventDefault();
this._touchFlags.multiTouch = e.gesture.touches.length > 1;
if (!this._touchFlags.pinchStarted) {
this._touchFlags.pinchStarted = true;
this._pinchStartEvent.notify(this);
}
if (this.pinchZoomEnabled) {
var zoom = this._touchFlags.startZoom * e.gesture.scale;
var zoomParams = new ZoomParams();
if (skipScrollToGestureCenter)
zoomParams.skipZoomToCenter = true;
else {
zoomParams.centerPageX = e.gesture.center.pageX;
zoomParams.centerPageY = e.gesture.center.pageY;
}
this.setZoom(zoom, zoomParams);
}
};
BaseViewer.prototype._onRelease = function (e) {
this._touchFlags.multiTouch = false;
if (this._touchFlags.pinchStarted) {
this._touchFlags.pinchStarted = false;
this._pinchStopEvent.notify(this);
}
};
BaseViewer.prototype.initialize = function (intervalCheckLoop) {
if (intervalCheckLoop === void 0) { intervalCheckLoop = null; }
if (intervalCheckLoop != null)
this._intervalCheckLoop = intervalCheckLoop;
var style = document.createElement("style");
style.id = "aurigmaStyles";
style.type = "text/css";
style.innerHTML = ".aurigmaNoSelect {" +
"-webkit-user-select: none;" +
"-moz-user-select: none;" +
"-ms-user-select: none;" +
"user-select: none;" +
"}";
document.getElementsByTagName("head")[0].appendChild(style);
//super.initialize();
var holderElement = this.element;
this._holderBounds = this._getElementBounds(holderElement);
this._holderElement = holderElement;
var html = this._render();
//console.log(`initialize html`, html);
//console.log(`initialize html element`, this.element);
//console.log(`initialize html element style bg`, this.element.style.background);
holderElement.innerHTML = html;
this._makeInactive(holderElement);
var contentElement = holderElement.querySelectorAll("#cvContent");
this._contentElements.push(this._contentCtx = contentElement[0]);
this._addSetCapture(holderElement);
//Init scrolling position
var sp = this._scrollingPosition;
this._scrollInitialized = true;
holderElement.scrollLeft = sp.x;
holderElement.scrollTop = sp.y;
this._initializeRulers();
//mouse/touch events handling
document.addEventListener("click", Utils.createBoundedWrapper(this, this._onDocumentClick));
this._holderElement.addEventListener("scroll", Utils.createBoundedWrapper(this, this._onScroll));
this._holderElement.addEventListener("contextmenu", function (e) { e.preventDefault(); });
this._contentCtxDimension =
{
width: this.contentWidth,
height: this.contentHeight
};
this._updateViewport();
this._updateViewportAlignment();
this._updateRulersStyle();
this._startIntervalCheckLoop();
};
BaseViewer.prototype._startIntervalCheckLoop = function () {
var _this = this;
this._intervalCheckLoop.start({ checkFunction: function () {
var bounds = _this._getElementBounds(_this.element);
if (bounds.width > 0 && bounds.width !== _this._holderBounds.width || bounds.height > 0 && bounds.height !== _this._holderBounds.height)
return true;
return false;
},
onChange: function () {
var bounds = _this._getElementBounds(_this.element);
_this._holderBounds = bounds;
_this._onResize(_this, false);
} });
};
BaseViewer.prototype.setIntervalCheckLoop = function (intervalCheckLoop) {
if (intervalCheckLoop == null)
return;
this._intervalCheckLoop = intervalCheckLoop;
this._startIntervalCheckLoop();
};
Object.defineProperty(BaseViewer.prototype, "_pointerEvents", {
get: function () {
var pointerStartEvents = "mousedown";
var pointerMoveEvents = "mousemove";
var pointerUpEvents = "mouseup";
var pointerCancel = "";
if (Environment.IsTouchDevice()) {
if (window.navigator.pointerEnabled) {
pointerStartEvents = "pointerdown";
pointerMoveEvents = "pointermove";
pointerUpEvents = "pointerup";
pointerCancel = "pointerCancel";
}
else {
pointerStartEvents = "mousedown touchstart";
pointerMoveEvents = "mousemove touchmove";
pointerUpEvents = "mouseup touchend";
pointerCancel = "touchcancel";
}
}
return {
start: pointerStartEvents,
move: pointerMoveEvents,
up: pointerUpEvents,
cancel: pointerCancel
};
},
enumerable: true,
configurable: true
});
BaseViewer.prototype._onScroll = function (e) {
if (this._scrollInitialized) {
this._scrollInitialized = false;
return;
}
this._scrollingPosition = this.getActualScrollPosition();
this._canvas.onScroll();
//Raise a client event.
this._scrolledEvent.notify(this);
};
BaseViewer.prototype._onResize = function (sender, updateButtonGroup) {
this._updateViewport(true);
this._updateViewportAlignment();
this._updateRulersStyle();
this._scrollingPosition = this.getActualScrollPosition();
this._onresizeEvent.notify(this);
};
BaseViewer.prototype._updateViewport = function (ignoreZoomConfigRestrictions) {
if (ignoreZoomConfigRestrictions === void 0) { ignoreZoomConfigRestrictions = false; }
if (!this.hasContent)
return;
var mode = this.zoomMode;
var calculatedZoom = this.calculateZoomByZoomMode(mode);
if (calculatedZoom == null || calculatedZoom < 0)
return;
if (ignoreZoomConfigRestrictions)
this._zoom = calculatedZoom;
else
this._zoom = Math.min(Math.max(calculatedZoom, this.minZoom), this.getMaxZoom());
this._resizeContentElements();
var vl = this.getViewportLocation();
this._contentCtx.style.left = vl.x + "px";
this._contentCtx.style.top = vl.y + "px";
//Raise the client event
this._zoomedEvent.notify(this);
};
BaseViewer.prototype._addSetCapture = function (holderElement) {
//polyfill for setCapture/releaseCapture
var viewerElement = this._viewerElement;
if (HTMLElement) {
var element = HTMLElement.prototype;
var mouseEventNames_1 = ["click", "mousedown", "mouseup", "mousemove", "mouseover", "mouseout"];
var captureElement_1 = null;
element.setCapture = function () {
var e_1, _a;
//It is incorrect implementation in the general case due to the fact that holderElement inherits preventing of selection,
//but there is not use cases that sensetive to it now.
document.querySelector("body").classList.add("aurigmaNoSelect");
captureElement_1 = this;
try {
for (var mouseEventNames_2 = __values(mouseEventNames_1), mouseEventNames_2_1 = mouseEventNames_2.next(); !mouseEventNames_2_1.done; mouseEventNames_2_1 = mouseEventNames_2.next()) {
var eventName = mouseEventNames_2_1.value;
window.addEventListener(eventName, handleCapturedEvent_1, true);
}
}
catch (e_1_1) { e_1 = { error: e_1_1 }; }
finally {
try {
if (mouseEventNames_2_1 && !mouseEventNames_2_1.done && (_a = mouseEventNames_2.return)) _a.call(mouseEventNames_2);
}
finally { if (e_1) throw e_1.error; }
}
};
var originalReleaseCapture_1 = element.releaseCapture;
element.releaseCapture = function () {
var e_2, _a;
document.querySelector("body").classList.remove("aurigmaNoSelect");
if (originalReleaseCapture_1 != null)
originalReleaseCapture_1.call(this);
try {
for (var mouseEventNames_3 = __values(mouseEventNames_1), mouseEventNames_3_1 = mouseEventNames_3.next(); !mouseEventNames_3_1.done; mouseEventNames_3_1 = mouseEventNames_3.next()) {
var eventName = mouseEventNames_3_1.value;
window.removeEventListener(eventName, handleCapturedEvent_1, true);
}
}
catch (e_2_1) { e_2 = { error: e_2_1 }; }
finally {
try {
if (mouseEventNames_3_1 && !mouseEventNames_3_1.done && (_a = mouseEventNames_3.return)) _a.call(mouseEventNames_3);
}
finally { if (e_2) throw e_2.error; }
}
captureElement_1 = null;
};
var handleCapturedEvent_1 = function (event) {
window.removeEventListener(event.type, handleCapturedEvent_1, true);
var eventPath = event.path || event.composedPath();
if (captureElement_1 != null && (viewerElement == null || !eventPath.some(function (element) { return element.id === viewerElement.id; })))
captureElement_1.dispatchEvent(cloneMouseEvent_1(event));
window.addEventListener(event.type, handleCapturedEvent_1, true);
};
// Not intended to be used with subclasses of MouseEvent
var cloneMouseEvent_1 = function (event) {
var eventToDispatch;
if (document.createEvent) { // IE prevents the use of new MouseEvent(ev.type, ev)
eventToDispatch = document.createEvent('MouseEvent');
eventToDispatch.initMouseEvent(event.type, event.bubbles, event.cancelable, event.view, event.detail, event.screenX, event.screenY, event.clientX, event.clientY, event.ctrlKey, event.altKey, event.shiftKey, event.metaKey, event.button, event.relatedTarget);
}
else {
eventToDispatch = new MouseEvent(event.type, event);
}
var buttonsValue = event.buttons;
if (eventToDispatch.buttons !== buttonsValue)
Object.defineProperty(eventToDispatch, "buttons", { get: function () { return buttonsValue; } });
return eventToDispatch;
};
}
};
BaseViewer.prototype._zoomToPagePoint = function (zoom, pageX, pageY, ignoreZoomConfigRestrictions) {
if (ignoreZoomConfigRestrictions === void 0) { ignoreZoomConfigRestrictions = false; }
var workspacePt = CoordinatesConvertUtils.pageToWorkspacePoint(new PointF(pageX, pageY), this, true);
this._zoomToWorkspacePoint(zoom, workspacePt, ignoreZoomConfigRestrictions);
};
BaseViewer.prototype._zoomToWorkspacePoint = function (zoom, workspacePt, ignoreZoomConfigRestrictions) {
if (ignoreZoomConfigRestrictions === void 0) { ignoreZoomConfigRestrictions = false; }
this._setZoom(zoom, ignoreZoomConfigRestrictions);
var contentPt = CoordinatesConvertUtils.workspaceToContentPoint(workspacePt, this);
var rulerWidth = this.rulerEnabled ? this._rulerWidth : 0;
var scroll = new PointF(Math.round(contentPt.x - ((this._holderBounds.width - rulerWidth) / 2)), Math.round(contentPt.y - ((this._holderBounds.height - rulerWidth) / 2)));
this.scrollingPosition = scroll;
};
BaseViewer.prototype._updateViewportAlignment = function () {
var vl = this.getViewportLocation();
this._contentCtx.style.left = vl.x + "px";
this._contentCtx.style.top = vl.y + "px";
};
Object.defineProperty(BaseViewer.prototype, "scrollingSize", {
get: function () {
/// <summary>Gets a scroll bar length (in other words, the right-bottom point of the image fragment which is out of the visible area).</summary>
var holder = this.element;
var w = holder.scrollWidth - holder.clientWidth;
var h = holder.scrollHeight - holder.clientHeight;
if (w < 0)
w = 0;
if (h < 0)
h = 0;
return new PointF(Math.round(w), Math.round(h));
},
enumerable: true,
configurable: true
});
Object.defineProperty(BaseViewer.prototype, "contentCtx", {
get: function () {
/// <value domElement="true" />
/// <exclude />
return this._contentCtx;
},
enumerable: true,
configurable: true
});
Object.defineProperty(BaseViewer.prototype, "clientSideOptions", {
get: function () {
/// <value type="ViewerClientSideOptions"><see cref="T:J:ViewerClientSideOptions" /> class instance which provides an access to properties which configure automatic postback for individual events.</value>
/// <summary>Gets values which configure automatic postback for individual events.</summary>
/// <remarks><para>Automatic postback can be enabled for all events with the <see cref="P:J:BaseViewer.autoPostBack" /> property. However if you want to disable automatic postback for certain events (e.g. <see cref="E:J:BaseViewer.zoomed" />) and enable it for the other ones (e.g. <see cref="E:J:BaseViewer.workspaceClick" />), you can use this property. It exposes a boolean property for each event. </para><para>This property makes sense only if <see cref="P:J:BaseViewer.autoPostBack" /> is <b>false</b>. If it is <b>true</b>, postback occurs regardless of values of properties of the <see cref="T:J:ViewerClientSideOptions" /> object.</para><para>This property corresponds to <see cref="P:Aurigma.AjaxControls.BaseViewer.ClientSideOptions">BaseViewer.ClientSideOptions</see> server-side member.</para></remarks>
return this._clientSideOptions;
},
enumerable: true,
configurable: true
});
Object.defineProperty(BaseViewer.prototype, "zoomConfig", {
get: function () {
//console.log("not implemented");
return null;
},
enumerable: true,
configurable: true
});
BaseViewer.prototype.setCursor = function (v, onBody) {
if (onBody === void 0) { onBody = false; }
/// <value type="Cursor" />
this._getElementForCursor().style.cursor = Utils.c