uicore-ts
Version:
UICore is a library to build native-like user interfaces using pure Typescript. No HTML is needed at all. Components are described as TS classes and all user interactions are handled explicitly. This library is strongly inspired by the UIKit framework tha
1,395 lines • 83.3 kB
JavaScript
"use strict";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var __async = (__this, __arguments, generator) => {
return new Promise((resolve, reject) => {
var fulfilled = (value) => {
try {
step(generator.next(value));
} catch (e) {
reject(e);
}
};
var rejected = (value) => {
try {
step(generator.throw(value));
} catch (e) {
reject(e);
}
};
var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
step((generator = generator.apply(__this, __arguments)).next());
});
};
var UIView_exports = {};
__export(UIView_exports, {
UIComponentView: () => UIComponentView,
UIView: () => UIView
});
module.exports = __toCommonJS(UIView_exports);
var import_ClientCheckers = require("./ClientCheckers");
var import_SizeConverter = __toESM(require("./SizeConverter"));
var import_UIColor = require("./UIColor");
var import_UICore = require("./UICore");
var import_UICoreExtensions = require("./UICoreExtensions");
var import_UIObject = require("./UIObject");
var import_UIPoint = require("./UIPoint");
var import_UIRectangle = require("./UIRectangle");
var import_UIViewController = require("./UIViewController");
if (!window.AutoLayout) {
window.AutoLayout = import_UIObject.nil;
}
function UIComponentView(target, context) {
console.log("Recording annotation UIComponentView on " + target.name);
import_UIObject.UIObject.recordAnnotation(UIComponentView, target);
}
const _UIView = class extends import_UIObject.UIObject {
constructor(elementID = "UIView" + _UIView.nextIndex, viewHTMLElement = null, elementType = null, initViewData) {
super();
this._nativeSelectionEnabled = import_UIObject.YES;
this._enabled = import_UIObject.YES;
this._backgroundColor = import_UIColor.UIColor.transparentColor;
this._controlEventTargets = {};
this.subviews = [];
this._isHidden = import_UIObject.NO;
this.pausesPointerEvents = import_UIObject.NO;
this.stopsPointerEventPropagation = import_UIObject.YES;
this.pointerDraggingPoint = new import_UIPoint.UIPoint(0, 0);
this._previousClientPoint = new import_UIPoint.UIPoint(0, 0);
this._isPointerDown = import_UIObject.NO;
this._pointerDragThreshold = 2;
this.ignoresTouches = import_UIObject.NO;
this.ignoresMouse = import_UIObject.NO;
this.core = import_UICore.UICore.main;
this.forceIntrinsicSizeZero = import_UIObject.NO;
this._scale = 1;
this.isInternalScaling = import_UIObject.YES;
this._isMovable = import_UIObject.NO;
this._isResizable = import_UIObject.NO;
this.resizingHandles = [];
this._isMoving = import_UIObject.NO;
this._isCBEditorTemporaryResizable = import_UIObject.NO;
this._isCBEditorTemporaryMovable = import_UIObject.NO;
this._intrinsicSizesCache = {};
this.controlEvent = _UIView.controlEvent;
_UIView._UIViewIndex = _UIView.nextIndex;
this._UIViewIndex = _UIView._UIViewIndex;
this._styleClasses = [];
this._initViewHTMLElement(elementID, viewHTMLElement, elementType);
this._constraints = [];
this._frameTransform = "";
this._initViewCSSSelectorsIfNeeded();
this._loadUIEvents();
this.setNeedsLayout();
}
static get nextIndex() {
return _UIView._UIViewIndex + 1;
}
static get pageHeight() {
const body = document.body;
const html = document.documentElement;
return Math.max(
body.scrollHeight,
body.offsetHeight,
html.clientHeight,
html.scrollHeight,
html.offsetHeight
);
}
static get pageWidth() {
const body = document.body;
const html = document.documentElement;
return Math.max(body.scrollWidth, body.offsetWidth, html.clientWidth, html.scrollWidth, html.offsetWidth);
}
centerInContainer() {
this.style.left = "50%";
this.style.top = "50%";
this.style.transform = "translateX(-50%) translateY(-50%)";
}
centerXInContainer() {
this.style.left = "50%";
this.style.transform = "translateX(-50%)";
}
centerYInContainer() {
this.style.top = "50%";
this.style.transform = "translateY(-50%)";
}
_initViewHTMLElement(elementID, viewHTMLElement, elementType) {
if (!(0, import_UIObject.IS)(elementType)) {
elementType = "div";
}
if (!(0, import_UIObject.IS)(viewHTMLElement)) {
this._viewHTMLElement = this.createElement(elementID, elementType);
this.style.position = "absolute";
this.style.margin = "0";
} else {
this._viewHTMLElement = viewHTMLElement;
}
if ((0, import_UIObject.IS)(elementID)) {
this.viewHTMLElement.id = elementID;
}
this.viewHTMLElement.obeyAutolayout = import_UIObject.YES;
this.viewHTMLElement.UIViewObject = this;
this.addStyleClass(this.styleClassName);
}
set nativeSelectionEnabled(selectable) {
this._nativeSelectionEnabled = selectable;
if (!selectable) {
this.style.cssText = this.style.cssText + " -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;";
} else {
this.style.cssText = this.style.cssText + " -webkit-touch-callout: text; -webkit-user-select: text; -khtml-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text;";
}
}
get nativeSelectionEnabled() {
return this._nativeSelectionEnabled;
}
get styleClassName() {
return "UICore_UIView_" + this.class.name;
}
_initViewCSSSelectorsIfNeeded() {
if (!this.class._areViewCSSSelectorsInitialized) {
this.initViewStyleSelectors();
this.class._areViewCSSSelectorsInitialized = import_UIObject.YES;
}
}
initViewStyleSelectors() {
}
initStyleSelector(selector, style) {
const styleRules = _UIView.getStyleRules(selector);
if (!styleRules) {
_UIView.createStyleSelector(selector, style);
}
}
createElement(elementID, elementType) {
let result = document.getElementById(elementID);
if (!result) {
result = document.createElement(elementType);
}
return result;
}
get viewHTMLElement() {
return this._viewHTMLElement;
}
get elementID() {
return this.viewHTMLElement.id;
}
setInnerHTML(key, defaultString, parameters) {
this._innerHTMLKey = key;
this._defaultInnerHTML = defaultString;
this._parameters = parameters;
const languageName = import_UICore.UICore.languageService.currentLanguageKey;
const result = import_UICore.UICore.languageService.stringForKey(key, languageName, defaultString, parameters);
this.innerHTML = result != null ? result : "";
}
_setInnerHTMLFromKeyIfPossible() {
if (this._innerHTMLKey && this._defaultInnerHTML) {
this.setInnerHTML(this._innerHTMLKey, this._defaultInnerHTML, this._parameters);
}
}
_setInnerHTMLFromLocalizedTextObjectIfPossible() {
if ((0, import_UIObject.IS)(this._localizedTextObject)) {
this.innerHTML = import_UICore.UICore.languageService.stringForCurrentLanguage(this._localizedTextObject);
}
}
get localizedTextObject() {
return this._localizedTextObject;
}
set localizedTextObject(localizedTextObject) {
this._localizedTextObject = localizedTextObject;
this._setInnerHTMLFromLocalizedTextObjectIfPossible();
}
get innerHTML() {
return this.viewHTMLElement.innerHTML;
}
set innerHTML(innerHTML) {
if (this.innerHTML != innerHTML) {
this.viewHTMLElement.innerHTML = (0, import_UIObject.FIRST)(innerHTML, "");
}
}
set hoverText(hoverText) {
this.viewHTMLElement.setAttribute("title", hoverText);
}
get hoverText() {
var _a;
return (_a = this.viewHTMLElement.getAttribute("title")) != null ? _a : "";
}
get scrollSize() {
return new import_UIRectangle.UIRectangle(0, 0, this.viewHTMLElement.scrollHeight, this.viewHTMLElement.scrollWidth);
}
get dialogView() {
if (!(0, import_UIObject.IS)(this.superview)) {
return;
}
if (!this["_isAUIDialogView"]) {
return this.superview.dialogView;
}
return this;
}
get rootView() {
if ((0, import_UIObject.IS)(this.superview)) {
return this.superview.rootView;
}
return this;
}
set enabled(enabled) {
this._enabled = enabled;
this.updateContentForCurrentEnabledState();
}
get enabled() {
return this._enabled;
}
updateContentForCurrentEnabledState() {
this.hidden = !this.enabled;
this.userInteractionEnabled = this.enabled;
}
get tabIndex() {
return Number(this.viewHTMLElement.getAttribute("tabindex"));
}
set tabIndex(index) {
this.viewHTMLElement.setAttribute("tabindex", "" + index);
}
get propertyDescriptors() {
let result = [];
function isPlainObject(value) {
return value instanceof Object && Object.getPrototypeOf(value) === Object.prototype;
}
function isAnArray(value) {
return value instanceof Array && Object.getPrototypeOf(value) === Array.prototype;
}
this.withAllSuperviews.forEach((view) => {
const descriptorFromObject = function(object, pathRootObject = object, existingPathComponents = [], lookInArrays = import_UIObject.YES, depthLeft = 5) {
var _a, _b;
let resultDescriptor;
const subObjects = [];
const subArrays = [];
(0, import_UIObject.FIRST_OR_NIL)(object).forEach((value, key, stopLooping) => {
if (this == value) {
existingPathComponents.push(key);
resultDescriptor = { object: pathRootObject, name: existingPathComponents.join(".") };
stopLooping();
return;
}
if (isPlainObject(value) && !_UIViewPropertyKeys.contains(key) && !_UIViewControllerPropertyKeys.contains(key)) {
subObjects.push({ object: value, key });
}
if (lookInArrays && isAnArray(value) && !_UIViewPropertyKeys.contains(key) && !_UIViewControllerPropertyKeys.contains(key)) {
subArrays.push({ array: value, key });
}
});
if (!resultDescriptor && lookInArrays) {
subArrays.copy().forEach((value) => {
if (value.key.startsWith("_")) {
subArrays.removeElement(value);
subArrays.push(value);
}
});
subArrays.find(
(arrayObject) => arrayObject.array.find((value, index) => {
if (this == value) {
existingPathComponents.push(arrayObject.key + "." + index);
resultDescriptor = { object: pathRootObject, name: existingPathComponents.join(".") };
return import_UIObject.YES;
}
return import_UIObject.NO;
})
);
}
if (((_b = (_a = resultDescriptor == null ? void 0 : resultDescriptor.object) == null ? void 0 : _a.constructor) == null ? void 0 : _b.name) == "Object") {
var asd = 1;
}
const result2 = {
descriptor: resultDescriptor,
subObjects
};
return result2;
}.bind(this);
const viewControllerResult = descriptorFromObject(view.viewController);
if (viewControllerResult == null ? void 0 : viewControllerResult.descriptor) {
result.push(viewControllerResult.descriptor);
}
const viewResult = descriptorFromObject(view);
if (viewResult == null ? void 0 : viewResult.descriptor) {
result.push(viewResult.descriptor);
} else if (this.superview && this.superview == view) {
result.push({ object: view, key: "subviews." + view.subviews.indexOf(this) });
}
});
return result;
}
get styleClasses() {
return this._styleClasses;
}
set styleClasses(styleClasses) {
this._styleClasses = styleClasses;
}
hasStyleClass(styleClass) {
if (!(0, import_UIObject.IS)(styleClass)) {
return import_UIObject.NO;
}
const index = this.styleClasses.indexOf(styleClass);
if (index > -1) {
return import_UIObject.YES;
}
return import_UIObject.NO;
}
addStyleClass(styleClass) {
if (!(0, import_UIObject.IS)(styleClass)) {
return;
}
if (!this.hasStyleClass(styleClass)) {
this._styleClasses.push(styleClass);
}
}
removeStyleClass(styleClass) {
if (!(0, import_UIObject.IS)(styleClass)) {
return;
}
const index = this.styleClasses.indexOf(styleClass);
if (index > -1) {
this.styleClasses.splice(index, 1);
}
}
static findViewWithElementID(elementID) {
const viewHTMLElement = document.getElementById(elementID);
if ((0, import_UIObject.IS_NOT)(viewHTMLElement)) {
return;
}
return viewHTMLElement.UIView;
}
static createStyleSelector(selector, style) {
return;
}
static getStyleRules(selector) {
const getCssClasses = function() {
function normalize(str) {
if (!str) {
return "";
}
str = String(str).replace(/\s*([>~+])\s*/g, " $1 ");
return str.replace(/(\s+)/g, " ").trim();
}
function split(str, on) {
return str.split(on).map((x) => x.trim()).filter((x) => x);
}
function containsAny(selText, ors) {
return selText ? ors.some((x) => selText.indexOf(x) >= 0) : false;
}
return function(selector2) {
const logicalORs = split(normalize(selector2), ",");
const sheets = Array.from(window.document.styleSheets);
const ruleArrays = sheets.map((x) => Array.from(x.rules || x.cssRules || []));
const allRules = ruleArrays.reduce((all, x) => all.concat(x), []);
return allRules.filter((x) => containsAny(normalize(x.selectorText), logicalORs));
};
}();
return getCssClasses(selector);
}
get style() {
return this.viewHTMLElement.style;
}
get computedStyle() {
return getComputedStyle(this.viewHTMLElement);
}
get hidden() {
return this._isHidden;
}
set hidden(v) {
this._isHidden = v;
if (this._isHidden) {
this.style.visibility = "hidden";
} else {
this.style.visibility = "visible";
}
}
static set pageScale(scale) {
_UIView._pageScale = scale;
const zoom = scale;
const width = 100 / zoom;
const viewHTMLElement = import_UICore.UICore.main.rootViewController.view.viewHTMLElement;
viewHTMLElement.style.transformOrigin = "left top";
viewHTMLElement.style.transform = "scale(" + zoom + ")";
viewHTMLElement.style.width = width + "%";
}
static get pageScale() {
return _UIView._pageScale;
}
set scale(scale) {
var _a, _b;
this._scale = scale;
const zoom = scale;
const viewHTMLElement = this.viewHTMLElement;
viewHTMLElement.style.transformOrigin = "left top";
viewHTMLElement.style.transform = viewHTMLElement.style.transform.replace(
(_b = (_a = viewHTMLElement.style.transform.match(
new RegExp("scale\\(.*\\)", "g")
)) == null ? void 0 : _a.firstElement) != null ? _b : "",
""
) + "scale(" + zoom + ")";
if (this.isInternalScaling) {
this.setFrame(this.frame, this.frame.zIndex, import_UIObject.YES);
}
}
get scale() {
return this._scale;
}
calculateAndSetViewFrame() {
}
get frame() {
var _a, _b, _c, _d, _e, _f, _g, _h, _i;
let result = (_a = this._frame) == null ? void 0 : _a.copy();
if (!result) {
result = new import_UIRectangle.UIRectangle(
(_c = (_b = this._resizeObserverEntry) == null ? void 0 : _b.contentRect.left) != null ? _c : this.viewHTMLElement.offsetLeft,
(_e = (_d = this._resizeObserverEntry) == null ? void 0 : _d.contentRect.top) != null ? _e : this.viewHTMLElement.offsetTop,
(_g = (_f = this._resizeObserverEntry) == null ? void 0 : _f.contentRect.height) != null ? _g : this.viewHTMLElement.offsetHeight,
(_i = (_h = this._resizeObserverEntry) == null ? void 0 : _h.contentRect.width) != null ? _i : this.viewHTMLElement.offsetWidth
);
result.zIndex = 0;
}
return result;
}
set frame(rectangle) {
if ((0, import_UIObject.IS)(rectangle)) {
this.setFrame(rectangle, rectangle.zIndex);
}
}
setFrame(rectangle, zIndex = 0, performUncheckedLayout = import_UIObject.NO) {
const frame = this._frame || new import_UIRectangle.UIRectangle(import_UIObject.nil, import_UIObject.nil, import_UIObject.nil, import_UIObject.nil);
if (zIndex != void 0) {
rectangle.zIndex = zIndex;
}
this._frame = rectangle;
if (frame && frame != import_UIObject.nil && frame.isEqualTo(rectangle) && frame.zIndex == rectangle.zIndex && !performUncheckedLayout) {
return;
}
if (this.isInternalScaling) {
rectangle.scale(1 / this.scale);
}
_UIView._setAbsoluteSizeAndPosition(
this.viewHTMLElement,
rectangle.topLeft.x,
rectangle.topLeft.y,
rectangle.width,
rectangle.height,
rectangle.zIndex,
this.frameTransform
);
if (frame.height != rectangle.height || frame.width != rectangle.width || performUncheckedLayout) {
this.setNeedsLayout();
this.boundsDidChange(this.bounds);
}
}
get bounds() {
var _a, _b, _c, _d;
let result;
if ((0, import_UIObject.IS_NOT)(this._frame)) {
result = new import_UIRectangle.UIRectangle(
0,
0,
(_b = (_a = this._resizeObserverEntry) == null ? void 0 : _a.contentRect.height) != null ? _b : this.viewHTMLElement.offsetHeight,
(_d = (_c = this._resizeObserverEntry) == null ? void 0 : _c.contentRect.width) != null ? _d : this.viewHTMLElement.offsetWidth
);
} else {
result = this.frame.copy();
result.x = 0;
result.y = 0;
}
return result;
}
set bounds(rectangle) {
const frame = this.frame;
const newFrame = new import_UIRectangle.UIRectangle(frame.topLeft.x, frame.topLeft.y, rectangle.height, rectangle.width);
newFrame.zIndex = frame.zIndex;
this.frame = newFrame;
}
boundsDidChange(bounds) {
}
didResize(entry) {
this._resizeObserverEntry = entry;
this.setNeedsLayout();
this.boundsDidChange(new import_UIRectangle.UIRectangle(0, 0, entry.contentRect.height, entry.contentRect.width));
}
get frameTransform() {
return this._frameTransform;
}
set frameTransform(value) {
this._frameTransform = value;
this.setFrame(this.frame, this.frame.zIndex, import_UIObject.YES);
}
setPosition(left = import_UIObject.nil, right = import_UIObject.nil, bottom = import_UIObject.nil, top = import_UIObject.nil, height = import_UIObject.nil, width = import_UIObject.nil) {
const previousBounds = this.bounds;
this.setStyleProperty("left", left);
this.setStyleProperty("right", right);
this.setStyleProperty("bottom", bottom);
this.setStyleProperty("top", top);
this.setStyleProperty("height", height);
this.setStyleProperty("width", width);
const bounds = this.bounds;
if (bounds.height != previousBounds.height || bounds.width != previousBounds.width) {
this.setNeedsLayout();
this.boundsDidChange(bounds);
}
}
setSizes(height, width) {
const previousBounds = this.bounds;
this.setStyleProperty("height", height);
this.setStyleProperty("width", width);
const bounds = this.bounds;
if (bounds.height != previousBounds.height || bounds.width != previousBounds.width) {
this.setNeedsLayout();
this.boundsDidChange(bounds);
}
}
setMinSizes(height, width) {
const previousBounds = this.bounds;
this.setStyleProperty("minHeight", height);
this.setStyleProperty("minWidth", width);
const bounds = this.bounds;
if (bounds.height != previousBounds.height || bounds.width != previousBounds.width) {
this.setNeedsLayout();
this.boundsDidChange(bounds);
}
}
setMaxSizes(height, width) {
const previousBounds = this.bounds;
this.setStyleProperty("maxHeight", height);
this.setStyleProperty("maxWidth", width);
const bounds = this.bounds;
if (bounds.height != previousBounds.height || bounds.width != previousBounds.width) {
this.setNeedsLayout();
this.boundsDidChange(bounds);
}
}
setMargin(margin) {
const previousBounds = this.bounds;
this.setStyleProperty("margin", margin);
const bounds = this.bounds;
if (bounds.height != previousBounds.height || bounds.width != previousBounds.width) {
this.setNeedsLayout();
this.boundsDidChange(bounds);
}
}
setMargins(left, right, bottom, top) {
const previousBounds = this.bounds;
this.setStyleProperty("marginLeft", left);
this.setStyleProperty("marginRight", right);
this.setStyleProperty("marginBottom", bottom);
this.setStyleProperty("marginTop", top);
const bounds = this.bounds;
if (bounds.height != previousBounds.height || bounds.width != previousBounds.width) {
this.setNeedsLayout();
this.boundsDidChange(bounds);
}
}
setPadding(padding) {
const previousBounds = this.bounds;
this.setStyleProperty("padding", padding);
const bounds = this.bounds;
if (bounds.height != previousBounds.height || bounds.width != previousBounds.width) {
this.setNeedsLayout();
this.boundsDidChange(bounds);
}
}
setPaddings(left, right, bottom, top) {
const previousBounds = this.bounds;
this.setStyleProperty("paddingLeft", left);
this.setStyleProperty("paddingRight", right);
this.setStyleProperty("paddingBottom", bottom);
this.setStyleProperty("paddingTop", top);
const bounds = this.bounds;
if (bounds.height != previousBounds.height || bounds.width != previousBounds.width) {
this.setNeedsLayout();
this.boundsDidChange(bounds);
}
}
setBorder(radius = import_UIObject.nil, width = 1, color = import_UIColor.UIColor.blackColor, style = "solid") {
this.setStyleProperty("borderStyle", style);
this.setStyleProperty("borderRadius", radius);
this.setStyleProperty("borderColor", color.stringValue);
this.setStyleProperty("borderWidth", width);
}
setStyleProperty(propertyName, value) {
try {
if ((0, import_UIObject.IS_NIL)(value)) {
return;
}
if ((0, import_UIObject.IS_DEFINED)(value) && value.isANumber) {
value = "" + value.integerValue + "px";
}
this.style[propertyName] = value;
} catch (exception) {
console.log(exception);
}
}
get userInteractionEnabled() {
return this.style.pointerEvents != "none";
}
set userInteractionEnabled(userInteractionEnabled) {
if (userInteractionEnabled) {
this.style.pointerEvents = "";
} else {
this.style.pointerEvents = "none";
}
}
get backgroundColor() {
return this._backgroundColor;
}
set backgroundColor(backgroundColor) {
this._backgroundColor = backgroundColor;
this.style.backgroundColor = backgroundColor.stringValue;
}
get alpha() {
return 1 * this.style.opacity;
}
set alpha(alpha) {
this.style.opacity = "" + alpha;
}
static animateViewOrViewsWithDurationDelayAndFunction(viewOrViews, duration, delay, timingStyle = "cubic-bezier(0.25,0.1,0.25,1)", transformFunction, transitioncompletionFunction) {
function callTransitioncompletionFunction() {
(transitioncompletionFunction || import_UIObject.nil)();
viewOrViews.forEach((view) => {
if (view instanceof _UIView) {
view.animationDidFinish();
}
});
}
if (import_ClientCheckers.IS_FIREFOX) {
new import_UIObject.UIObject().performFunctionWithDelay(delay + duration, callTransitioncompletionFunction);
}
if (!(viewOrViews instanceof Array)) {
viewOrViews = [viewOrViews];
}
const transitionStyles = [];
const transitionDurations = [];
const transitionDelays = [];
const transitionTimings = [];
function isUIView(view) {
return (0, import_UIObject.IS)(view.viewHTMLElement);
}
for (var i = 0; i < viewOrViews.length; i++) {
let view = viewOrViews[i];
if (isUIView(view)) {
view = view.viewHTMLElement;
}
view.addEventListener("transitionend", transitionDidFinish, true);
transitionStyles.push(view.style.transition);
transitionDurations.push(view.style.transitionDuration);
transitionDelays.push(view.style.transitionDelay);
transitionTimings.push(view.style.transitionTimingFunction);
view.style.transition = "all";
view.style.transitionDuration = "" + duration + "s";
view.style.transitionDelay = "" + delay + "s";
view.style.transitionTimingFunction = timingStyle;
}
transformFunction();
const transitionObject = {
"finishImmediately": finishTransitionImmediately,
"didFinish": transitionDidFinishManually,
"views": viewOrViews,
"registrationTime": Date.now()
};
function finishTransitionImmediately() {
for (var i2 = 0; i2 < viewOrViews.length; i2++) {
let view = viewOrViews[i2];
if (isUIView(view)) {
view = view.viewHTMLElement;
}
view.style.transition = "all";
view.style.transitionDuration = "" + duration + "s";
view.style.transitionDelay = "" + delay + "s";
view.style.transition = transitionStyles[i2];
view.style.transitionDuration = transitionDurations[i2];
view.style.transitionDelay = transitionDelays[i2];
view.style.transitionTimingFunction = transitionTimings[i2];
}
}
function transitionDidFinish(event) {
let view = event.srcElement;
if (!view) {
return;
}
if (isUIView(view)) {
view = view.viewHTMLElement;
}
view.style.transition = transitionStyles[i];
view.style.transitionDuration = transitionDurations[i];
view.style.transitionDelay = transitionDelays[i];
view.style.transitionTimingFunction = transitionTimings[i];
callTransitioncompletionFunction();
view.removeEventListener("transitionend", transitionDidFinish, true);
}
function transitionDidFinishManually() {
for (let i2 = 0; i2 < viewOrViews.length; i2++) {
let view = viewOrViews[i2];
if (isUIView(view)) {
view = view.viewHTMLElement;
}
view.style.transition = transitionStyles[i2];
view.style.transitionDuration = transitionDurations[i2];
view.style.transitionDelay = transitionDelays[i2];
view.style.transitionTimingFunction = transitionTimings[i2];
view.removeEventListener("transitionend", transitionDidFinish, true);
}
}
return transitionObject;
}
animationDidFinish() {
}
static _setAbsoluteSizeAndPosition(element, left, top, width, height, zIndex = 0, frameTransform = "") {
var _a, _b;
if (!(0, import_UIObject.IS)(element) || !element.obeyAutolayout && !element.getAttribute("obeyAutolayout")) {
return;
}
if ((0, import_UIObject.IS)(height)) {
height = height.integerValue + "px";
}
if ((0, import_UIObject.IS)(width)) {
width = width.integerValue + "px";
}
frameTransform = "translate3d(" + left.integerValue + "px, " + top.integerValue + "px, 0px)" + frameTransform;
const style = element.style;
if (element.UIView) {
frameTransform = frameTransform + ((_b = (_a = style.transform.match(
new RegExp("scale\\(.*\\)", "g")
)) == null ? void 0 : _a.firstElement) != null ? _b : "");
}
if ((0, import_UIObject.IS_NIL)(height)) {
height = "unset";
}
if ((0, import_UIObject.IS_NIL)(width)) {
width = "unset";
}
let zIndexString = "" + zIndex;
if ((0, import_UIObject.IS_NIL)(zIndex)) {
zIndexString = "unset";
}
style.transform = frameTransform;
style.height = height;
style.width = width;
style.zIndex = zIndexString;
}
static performAutoLayout(parentElement, visualFormatArray, constraintsArray) {
const view = new AutoLayout.View();
if ((0, import_UIObject.IS)(visualFormatArray) && (0, import_UIObject.IS)(visualFormatArray.length)) {
view.addConstraints(AutoLayout.VisualFormat.parse(visualFormatArray, { extended: true }));
}
if ((0, import_UIObject.IS)(constraintsArray) && (0, import_UIObject.IS)(constraintsArray.length)) {
view.addConstraints(constraintsArray);
}
const elements = {};
for (var key in view.subViews) {
if (!view.subViews.hasOwnProperty(key)) {
continue;
}
var element = import_UIObject.nil;
try {
element = parentElement.querySelector("#" + key);
} catch (error) {
}
if (!(element && !element.obeyAutolayout && !element.getAttribute("obeyAutolayout")) && element) {
element.className += element.className ? " abs" : "abs";
elements[key] = element;
}
}
let parentUIView = import_UIObject.nil;
if (parentElement.UIView) {
parentUIView = parentElement.UIView;
}
const updateLayout = function() {
view.setSize(
parentElement ? parentElement.clientWidth : window.innerWidth,
parentElement ? parentElement.clientHeight : window.innerHeight
);
for (key in view.subViews) {
if (!view.subViews.hasOwnProperty(key)) {
continue;
}
const subView = view.subViews[key];
if (elements[key]) {
_UIView._setAbsoluteSizeAndPosition(
elements[key],
subView.left,
subView.top,
subView.width,
subView.height,
elements[key].UIView.frame.zIndex,
elements[key].UIView.frameTransform
);
}
}
parentUIView.didLayoutSubviews();
};
updateLayout();
return updateLayout;
}
static runFunctionBeforeNextFrame(step) {
if (import_ClientCheckers.IS_SAFARI) {
Promise.resolve().then(step);
} else {
window.requestAnimationFrame(step);
}
}
static scheduleLayoutViewsIfNeeded() {
_UIView.runFunctionBeforeNextFrame(_UIView.layoutViewsIfNeeded);
}
static layoutViewsIfNeeded() {
for (var i = 0; i < _UIView._viewsToLayout.length; i++) {
const view = _UIView._viewsToLayout[i];
view.layoutIfNeeded();
}
_UIView._viewsToLayout = [];
}
setNeedsLayout() {
if (this._shouldLayout) {
return;
}
this._shouldLayout = import_UIObject.YES;
_UIView._viewsToLayout.push(this);
this._intrinsicSizesCache = {};
if (_UIView._viewsToLayout.length == 1) {
_UIView.scheduleLayoutViewsIfNeeded();
}
}
get needsLayout() {
return this._shouldLayout;
}
layoutIfNeeded() {
if (!this._shouldLayout) {
return;
}
this._shouldLayout = import_UIObject.NO;
try {
this.layoutSubviews();
} catch (exception) {
console.log(exception);
}
}
layoutSubviews() {
var _a, _b;
this.willLayoutSubviews();
this._shouldLayout = import_UIObject.NO;
if (this.constraints.length) {
this._updateLayoutFunction = _UIView.performAutoLayout(this.viewHTMLElement, null, this.constraints);
}
(_a = this._updateLayoutFunction) == null ? void 0 : _a.call(this);
(_b = this.viewController) == null ? void 0 : _b.layoutViewSubviews();
this.applyClassesAndStyles();
for (let i = 0; i < this.subviews.length; i++) {
const subview = this.subviews[i];
subview.calculateAndSetViewFrame();
}
this.didLayoutSubviews();
}
applyClassesAndStyles() {
for (let i = 0; i < this.styleClasses.length; i++) {
const styleClass = this.styleClasses[i];
if (styleClass && !this.viewHTMLElement.classList.contains(styleClass)) {
this.viewHTMLElement.classList.add(styleClass);
}
}
}
willLayoutSubviews() {
var _a;
(_a = this.viewController) == null ? void 0 : _a.viewWillLayoutSubviews();
}
didLayoutSubviews() {
var _a;
(_a = this.viewController) == null ? void 0 : _a.viewDidLayoutSubviews();
}
get constraints() {
return this._constraints;
}
set constraints(constraints) {
this._constraints = constraints;
}
addConstraint(constraint) {
this.constraints.push(constraint);
}
addConstraintsWithVisualFormat(visualFormatArray) {
this.constraints = this.constraints.concat(AutoLayout.VisualFormat.parse(
visualFormatArray,
{ extended: true }
));
}
static constraintWithView(view, attribute, relation, toView, toAttribute, multiplier, constant, priority) {
let UIViewObject = import_UIObject.nil;
let viewID = null;
if (view) {
if (view.isKindOfClass && view.isKindOfClass(_UIView)) {
UIViewObject = view;
view = view.viewHTMLElement;
}
viewID = view.id;
}
let toUIViewObject = import_UIObject.nil;
let toViewID = null;
if (toView) {
if (toView.isKindOfClass && view.isKindOfClass(_UIView)) {
toUIViewObject = toView;
toView = toView.viewHTMLElement;
}
toViewID = toView.id;
}
const constraint = {
view1: viewID,
attr1: attribute,
relation,
view2: toViewID,
attr2: toAttribute,
multiplier,
constant,
priority
};
return constraint;
}
subviewWithID(viewID) {
let resultHTMLElement;
try {
resultHTMLElement = this.viewHTMLElement.querySelector("#" + viewID);
} catch (error) {
console.log(error);
}
if (resultHTMLElement && resultHTMLElement.UIView) {
return resultHTMLElement.UIView;
}
return;
}
rectangleContainingSubviews() {
const center = this.bounds.center;
let result = new import_UIRectangle.UIRectangle(center.x, center.y, 0, 0);
for (let i = 0; i < this.subviews.length; i++) {
const subview = this.subviews[i];
let frame = subview.frame;
const rectangleContainingSubviews = subview.rectangleContainingSubviews();
frame = frame.concatenateWithRectangle(rectangleContainingSubviews);
result = result.concatenateWithRectangle(frame);
}
return result;
}
hasSubview(view) {
if (!(0, import_UIObject.IS)(view)) {
return import_UIObject.NO;
}
for (let i = 0; i < this.subviews.length; i++) {
const subview = this.subviews[i];
if (subview == view) {
return import_UIObject.YES;
}
}
return import_UIObject.NO;
}
get viewBelowThisView() {
const result = (this.viewHTMLElement.previousElementSibling || {}).UIView;
return result;
}
get viewAboveThisView() {
const result = (this.viewHTMLElement.nextElementSibling || {}).UIView;
return result;
}
addSubview(view, aboveView) {
if (!this.hasSubview(view) && (0, import_UIObject.IS)(view)) {
view.willMoveToSuperview(this);
if ((0, import_UIObject.IS)(aboveView)) {
this.viewHTMLElement.insertBefore(view.viewHTMLElement, aboveView.viewHTMLElement.nextSibling);
this.subviews.insertElementAtIndex(this.subviews.indexOf(aboveView), view);
} else {
this.viewHTMLElement.appendChild(view.viewHTMLElement);
this.subviews.push(view);
}
view.core = this.core;
view.didMoveToSuperview(this);
if (this.superview && this.isMemberOfViewTree) {
view.broadcastEventInSubtree({
name: _UIView.broadcastEventName.AddedToViewTree,
parameters: void 0
});
}
this.setNeedsLayout();
}
}
addSubviews(views) {
views.forEach((view) => this.addSubview(view));
}
addedAsSubviewToView(view, aboveView) {
view == null ? void 0 : view.addSubview(this, aboveView);
return this;
}
moveToBottomOfSuperview() {
if ((0, import_UIObject.IS)(this.superview)) {
const bottomView = this.superview.subviews.firstElement;
if (bottomView == this) {
return;
}
this.superview.subviews.removeElement(this);
this.superview.subviews.insertElementAtIndex(0, this);
this.superview.viewHTMLElement.insertBefore(this.viewHTMLElement, bottomView.viewHTMLElement);
}
}
moveToTopOfSuperview() {
if ((0, import_UIObject.IS)(this.superview)) {
const topView = this.superview.subviews.lastElement;
if (topView == this) {
return;
}
this.superview.subviews.removeElement(this);
this.superview.subviews.push(this);
this.superview.viewHTMLElement.appendChild(this.viewHTMLElement);
}
}
removeFromSuperview() {
if ((0, import_UIObject.IS)(this.superview)) {
this.forEachViewInSubtree((view) => view.blur());
const index = this.superview.subviews.indexOf(this);
if (index > -1) {
this.superview.subviews.splice(index, 1);
this.superview.viewHTMLElement.removeChild(this.viewHTMLElement);
this.superview = void 0;
this.broadcastEventInSubtree({
name: _UIView.broadcastEventName.RemovedFromViewTree,
parameters: void 0
});
}
}
}
willAppear() {
}
willMoveToSuperview(superview) {
this._setInnerHTMLFromKeyIfPossible();
this._setInnerHTMLFromLocalizedTextObjectIfPossible();
}
didMoveToSuperview(superview) {
this.superview = superview;
}
wasAddedToViewTree() {
_UIView.resizeObserver.observe(this.viewHTMLElement);
}
wasRemovedFromViewTree() {
_UIView.resizeObserver.unobserve(this.viewHTMLElement);
}
get isMemberOfViewTree() {
let element = this.viewHTMLElement;
for (let i = 0; element; i = i) {
if (element.parentElement && element.parentElement == document.body) {
return import_UIObject.YES;
}
element = element.parentElement;
}
return import_UIObject.NO;
}
get withAllSuperviews() {
const result = [];
let view = this;
for (let i = 0; (0, import_UIObject.IS)(view); i = i) {
result.push(view);
view = view.superview;
}
return result;
}
get elementWithAllSuperviewElements() {
const result = [];
let view = this.viewHTMLElement;
for (let i = 0; (0, import_UIObject.IS)(view); i = i) {
if (!view) {
return result;
}
result.push(view);
view = view.parentElement;
}
return result;
}
setNeedsLayoutOnAllSuperviews() {
this.withAllSuperviews.reverse().everyElement.setNeedsLayout();
}
setNeedsLayoutUpToRootView() {
this.setNeedsLayoutOnAllSuperviews();
this.setNeedsLayout();
}
focus() {
this.viewHTMLElement.focus();
}
blur() {
this.viewHTMLElement.blur();
}
get isMovable() {
return this._isMovable;
}
set isMovable(isMovable) {
var _a;
if (isMovable) {
this.makeMovable();
} else {
(_a = this.makeNotMovable) == null ? void 0 : _a.call(this);
}
}
makeMovable(optionalParameters = {}) {
var _a;
if (this.isMovable) {
return;
}
const shouldMoveWithMouseEvent = (_a = optionalParameters.shouldMoveWithMouseEvent) != null ? _a : (sender, event) => (0, import_UIObject.IS)(event.altKey);
let viewValuesBeforeModifications = [];
let startPoint;
let views;
const movementFunction = (sender, event) => {
var _a2;
if (event instanceof MouseEvent && shouldMoveWithMouseEvent(sender, event)) {
if (!this._isMoving) {
startPoint = this.frame.min;
sender.pointerDraggingPoint = new import_UIPoint.UIPoint(0, 0);
views = sender.withAllSuperviews;
sender.forEachViewInSubtree((view) => {
view.sendControlEventForKey(_UIView.controlEvent.PointerCancel, event);
});
viewValuesBeforeModifications = views.everyElement.configureWithObject({
style: { cursor: "move" },
nativeSelectionEnabled: import_UIObject.NO,
pausesPointerEvents: import_UIObject.YES,
shouldCallPointerUpInside: () => __async(this, null, function* () {
return import_UIObject.NO;
})
});
this._isMoving = import_UIObject.YES;
}
sender.frame = sender.frame.rectangleWithX(startPoint.x + sender.pointerDraggingPoint.x).rectangleWithY(startPoint.y + sender.pointerDraggingPoint.y);
(_a2 = optionalParameters.viewDidMoveToPosition) == null ? void 0 : _a2.call(optionalParameters, this, import_UIObject.NO);
} else if (this._isMoving) {
movementStopFunction(sender, event);
}
};
const movementStopFunction = (sender, event) => {
var _a2;
if ((0, import_UIObject.IS_NIL)(event) || !this._isMoving) {
return;
}
views == null ? void 0 : views.forEach(
(view, index) => {
view.configureWithObject(viewValuesBeforeModifications[index]);
}
);
(_a2 = optionalParameters.viewDidMoveToPosition) == null ? void 0 : _a2.call(optionalParameters, this, import_UIObject.YES);
this._isMoving = import_UIObject.NO;
};
const cleanupFunction = () => {
if (!this.isMovable) {
return;
}
this.removeTargetForControlEvent(_UIView.controlEvent.PointerDrag, movementFunction);
this.removeTargetForControlEvents(
[_UIView.controlEvent.PointerUp, _UIView.controlEvent.PointerCancel],
movementStopFunction
);
this._isMovable = import_UIObject.NO;
this.makeNotMovable = void 0;
};
this.controlEventTargetAccumulator.PointerDrag = movementFunction;
this.controlEventTargetAccumulator.PointerUp.PointerCancel = movementStopFunction;
this._isMovable = import_UIObject.YES;
this.makeNotMovable = cleanupFunction;
}
get isResizable() {
return this._isResizable;
}
set isResizable(isResizable) {
var _a;
if (isResizable) {
this.makeResizable();
} else {
(_a = this.makeNotResizable) == null ? void 0 : _a.call(this);
}
}
makeResizable(optionalParameters = {}) {
var _a, _b, _c, _d, _e;
if (this.isResizable) {
return;
}
const overlayElement = (_a = optionalParameters.overlayElement) != null ? _a : this.viewHTMLElement;
const borderWidth = (0, import_UIObject.IF)(optionalParameters.borderWidth)((0, import_UIObject.RETURNER)(optionalParameters.borderWidth + "px")).ELSE((0, import_UIObject.RETURNER)(void 0)) || overlayElement.style.borderWidth || this.style.borderWidth || "5px";
const borderColor = (_c = (_b = optionalParameters.borderColor) == null ? void 0 : _b.stringValue) != null ? _c : import_UIColor.UIColor.transparentColor.stringValue;
const maxCornerSize = (_d = optionalParameters.maxCornerSize) != null ? _d : "10px";
const cornerSize = (_e = optionalParameters.cornerSize) != null ? _e : "5%";
let yOverflow = 0;
let xOverflow = 0;
const pointerUpFunction = () => {
var _a2;
yOverflow = 0;
xOverflow = 0;
(_a2 = optionalParameters.viewDidChangeToSize) == null ? void 0 : _a2.call(optionalParameters, this, import_UIObject.YES);
};
const frameWasChanged = () => {
var _a2;
const frame = this.frame;
if (this.style.minHeight) {
frame.height = [
frame.height,
(0, import_SizeConverter.default)(this.viewHTMLElement, this.style.minHeight)
].max();
}
if (this.style.maxHeight) {
frame.height = [
frame,
(0, import_SizeConverter.default)(this.viewHTMLElement, this.style.maxHeight)
].min();
}
yOverflow = yOverflow + this.frame.height - frame.height;
this.frame = frame;
(_a2 = optionalParameters.viewDidChangeToSize) == null ? void 0 : _a2.call(optionalParameters, this, import_UIObject.NO);
};
const PointerXDragFunction = (centeredOnPosition, sender, event) => {
if (event instanceof MouseEvent) {
const scaleX = this.viewHTMLElement.getBoundingClientRect().width / this.viewHTMLElement.offsetWidth;
const signMultiplier = 1 - 2 * centeredOnPosition;
let movementX = event.movementX / scaleX;
if (xOverflow * signMultiplier > 0 && 0 > movementX) {
xOverflow = (xOverflow + movementX / _UIView.pageScale).integerValue;
if (xOverflow >= 0) {
return;
}
movementX = xOverflow;
xOverflow = 0;
}
if (xOverflow > 0 && 0 < movementX && signMultiplier < 0) {
xOverflow = (xOverflow + signMultiplier * movementX / _UIView.pageScale).integerValue;
if (xOverflow >= 0) {
return;
}
movementX = xOverflow * signMultiplier;
xOverflow = 0;
}
const frame = this.frame;
const widthChange = signMultiplier * movementX / _UIView.pageScale;
let frameWidth = frame.width + widthChange;
if (this.style.minWidth) {
frameWidth = [
frameWidth,
(0, import_SizeConverter.default)(this.viewHTMLElement, this.style.minWidth),
0
].max();
}
if (this.style.maxWidth) {
frameWidth = [
frameWidth,
(0, import_SizeConverter.default)(this.viewHTMLElement, this.style.maxWidth)
].min();
}
xOverflow = (xOverflow + frame.width + widthChange - frameWidth).integerValue;
this.frame = frame.rectangleWithWidth(frameWidth, centeredOnPosition);
frameWasChanged();
}
};
const PointerYDragFunction = (centeredOnPosition, sender, event) => {
if (event instanceof MouseEvent) {
const scaleX = this.viewHTMLElement.getBoundingClientRect().width / this.viewHTMLElement.offsetWidth;
const signMultiplier = 1 - 2 * centeredOnPosition;
let movementY = event.movementY / scaleX;
if (yOverflow * signMultiplier > 0 && 0 > movementY) {
yOverflow = (yOverflow + movementY / _UIView.pageScale).integerValue;
if (yOverflow >= 0) {
return;
}
movementY = yOverflow;
yOverflow = 0;
}
if (yOverflow > 0 && 0 < movementY && signMultiplier < 0) {
yOverflow = (yOverflow + signMultiplier * movementY / _UIView.pageScale).integerValue;
if (yOverflow >= 0) {
return;
}
movementY = yOverflow * signMultiplier;
yOverflow = 0;
}
const frame = this.frame;
const heightChange = signMultiplier * movementY / _UIView.pageScale;
let frameHeight = frame.height + heightChange;
if (this.style.minHeight) {
frameHeight = [
frameHeight,
(0, import_SizeConverter.default)(this.viewHTMLElement, this.style.minHeight),
0
].max();
}
if (this.style.maxHeight) {
frameHeight = [
frameHeight,
(0, import_SizeConverter.default)(this.viewHTMLElement, this.style.maxHeight)
].min();
}
yOverflow = (yOverflow + frame.height + heightChange - frameHeight).integerValue;
this.frame = frame.rectangleWithHeight(frameHeight, centeredOnPosition);
frameWasChanged();
}
};
const leftEdge = new _UIView().configuredWithObject({
_viewHTMLElement: {
className: "leftEdge",
style: {
position: "absolute",
height: "100%",
width: borderWidth,
top: "0px",
left: "0px",
cursor: "col-resize",
backgroundColor: borderColor,
pointerEvents: "auto"
}
},
shouldCallPointerUpInside: () => __async(this, null, function* () {
return import_UIObject.YES;
}),
shouldCallPointerHover: () => __async(this, null, function* () {
return import_UIObject.YES;
}),
pausesPointerEvents: import_UIObject.YES
});
leftEdge.controlEventTargetAccumulator.PointerDrag = PointerXDragFunction.bind(this, 1);
leftEdge.controlEventTargetAccumulator.PointerUp = pointerUpFunction;
const rightEdge = new _UIView().configuredWithObject({
_viewHTMLElement: {
className: "rightEdge",
style: {
position: "absolute",
height: "100%",
width: borderWidth,
top: "0px",
right: "0px",
cursor: "col-resize",
backgroundColor: borderColor,
pointerEvents: "auto"
}
},
shouldCallPointerUpInside: () => __async(this, null, function* () {
return import_UIObject.YES;
}),
shouldCallPointerHover: () => __async(this, null, function* () {
return import_UIObject.YES;
}),
pausesPointerEvents: import_UIObject.YES
});
rightEdge.controlEventTargetAccumulator.PointerDrag = PointerXDragFunction.bind(this, 0);
rightEdge.controlEventTargetAccumulator.PointerUp = pointerUpFunction;
const bottomEdge = new _UIView().configuredWithObject({
_viewHTMLElement: {
className: "bottomEdge",
style: {
position: "absolute",
height: