vccs 0.0.1 → 0.2.0

package/dist/es/types/event.mjs

@@ -0,0 +1,166 @@
+//#region src/types/event.ts
+var EventKeys = [
+	"dangerouslySetInnerHTML",
+	"onCopy",
+	"onCopyCapture",
+	"onCut",
+	"onCutCapture",
+	"onPaste",
+	"onPasteCapture",
+	"onCompositionEnd",
+	"onCompositionEndCapture",
+	"onCompositionStart",
+	"onCompositionStartCapture",
+	"onCompositionUpdate",
+	"onCompositionUpdateCapture",
+	"onFocus",
+	"onFocusCapture",
+	"onBlur",
+	"onBlurCapture",
+	"onChange",
+	"onChangeCapture",
+	"onBeforeInput",
+	"onBeforeInputCapture",
+	"onInput",
+	"onInputCapture",
+	"onReset",
+	"onResetCapture",
+	"onSubmit",
+	"onSubmitCapture",
+	"onInvalid",
+	"onInvalidCapture",
+	"onLoad",
+	"onLoadCapture",
+	"onError",
+	"onErrorCapture",
+	"onKeyDown",
+	"onKeyDownCapture",
+	"onKeyPress",
+	"onKeyPressCapture",
+	"onKeyUp",
+	"onKeyUpCapture",
+	"onAbort",
+	"onAbortCapture",
+	"onCanPlay",
+	"onCanPlayCapture",
+	"onCanPlayThrough",
+	"onCanPlayThroughCapture",
+	"onDurationChange",
+	"onDurationChangeCapture",
+	"onEmptied",
+	"onEmptiedCapture",
+	"onEncrypted",
+	"onEncryptedCapture",
+	"onEnded",
+	"onEndedCapture",
+	"onLoadedData",
+	"onLoadedDataCapture",
+	"onLoadedMetadata",
+	"onLoadedMetadataCapture",
+	"onLoadStart",
+	"onLoadStartCapture",
+	"onPause",
+	"onPauseCapture",
+	"onPlay",
+	"onPlayCapture",
+	"onPlaying",
+	"onPlayingCapture",
+	"onProgress",
+	"onProgressCapture",
+	"onRateChange",
+	"onRateChangeCapture",
+	"onSeeked",
+	"onSeekedCapture",
+	"onSeeking",
+	"onSeekingCapture",
+	"onStalled",
+	"onStalledCapture",
+	"onSuspend",
+	"onSuspendCapture",
+	"onTimeUpdate",
+	"onTimeUpdateCapture",
+	"onVolumeChange",
+	"onVolumeChangeCapture",
+	"onWaiting",
+	"onWaitingCapture",
+	"onAuxClick",
+	"onAuxClickCapture",
+	"onClick",
+	"onClickCapture",
+	"onContextMenu",
+	"onContextMenuCapture",
+	"onDoubleClick",
+	"onDoubleClickCapture",
+	"onDrag",
+	"onDragCapture",
+	"onDragEnd",
+	"onDragEndCapture",
+	"onDragEnter",
+	"onDragEnterCapture",
+	"onDragExit",
+	"onDragExitCapture",
+	"onDragLeave",
+	"onDragLeaveCapture",
+	"onDragOver",
+	"onDragOverCapture",
+	"onDragStart",
+	"onDragStartCapture",
+	"onDrop",
+	"onDropCapture",
+	"onMouseDown",
+	"onMouseDownCapture",
+	"onMouseEnter",
+	"onMouseLeave",
+	"onMouseMove",
+	"onMouseMoveCapture",
+	"onMouseOut",
+	"onMouseOutCapture",
+	"onMouseOver",
+	"onMouseOverCapture",
+	"onMouseUp",
+	"onMouseUpCapture",
+	"onSelect",
+	"onSelectCapture",
+	"onTouchCancel",
+	"onTouchCancelCapture",
+	"onTouchEnd",
+	"onTouchEndCapture",
+	"onTouchMove",
+	"onTouchMoveCapture",
+	"onTouchStart",
+	"onTouchStartCapture",
+	"onPointerDown",
+	"onPointerDownCapture",
+	"onPointerMove",
+	"onPointerMoveCapture",
+	"onPointerUp",
+	"onPointerUpCapture",
+	"onPointerCancel",
+	"onPointerCancelCapture",
+	"onPointerEnter",
+	"onPointerEnterCapture",
+	"onPointerLeave",
+	"onPointerLeaveCapture",
+	"onPointerOver",
+	"onPointerOverCapture",
+	"onPointerOut",
+	"onPointerOutCapture",
+	"onGotPointerCapture",
+	"onGotPointerCaptureCapture",
+	"onLostPointerCapture",
+	"onLostPointerCaptureCapture",
+	"onScroll",
+	"onScrollCapture",
+	"onWheel",
+	"onWheelCapture",
+	"onAnimationStart",
+	"onAnimationStartCapture",
+	"onAnimationEnd",
+	"onAnimationEndCapture",
+	"onAnimationIteration",
+	"onAnimationIterationCapture",
+	"onTransitionEnd",
+	"onTransitionEndCapture"
+];
+//#endregion
+export { EventKeys };

package/dist/es/utils/ReduceCSSCalc.mjs

@@ -0,0 +1,114 @@
+import { isNan } from "./validate.mjs";
+//#region src/utils/ReduceCSSCalc.ts
+var MULTIPLY_OR_DIVIDE_REGEX = /(-?\d+(?:\.\d+)?[a-z%]*)([*/])(-?\d+(?:\.\d+)?[a-z%]*)/i;
+var ADD_OR_SUBTRACT_REGEX = /(-?\d+(?:\.\d+)?[a-z%]*)([+-])(-?\d+(?:\.\d+)?[a-z%]*)/i;
+var CSS_LENGTH_UNIT_REGEX = /^px|cm|vh|vw|em|rem|%|mm|in|pt|pc|ex|ch|vmin|vmax|Q$/;
+var NUM_SPLIT_REGEX = /(-?\d+(?:\.\d+)?)([a-z%]+)?/i;
+var CONVERSION_RATES = {
+	cm: 96 / 2.54,
+	mm: 96 / 25.4,
+	pt: 96 / 72,
+	pc: 96 / 6,
+	in: 96,
+	Q: 96 / (2.54 * 40),
+	px: 1
+};
+var FIXED_CSS_LENGTH_UNITS = Object.keys(CONVERSION_RATES);
+var STR_NAN = "NaN";
+function convertToPx(value, unit) {
+	return value * CONVERSION_RATES[unit];
+}
+var DecimalCSS = class DecimalCSS {
+	static parse(str) {
+		const [, numStr, unit] = NUM_SPLIT_REGEX.exec(str) ?? [];
+		return new DecimalCSS(parseFloat(numStr), unit ?? "");
+	}
+	constructor(num, unit) {
+		this.num = num;
+		this.unit = unit;
+		this.num = num;
+		this.unit = unit;
+		if (isNan(num)) this.unit = "";
+		if (unit !== "" && !CSS_LENGTH_UNIT_REGEX.test(unit)) {
+			this.num = NaN;
+			this.unit = "";
+		}
+		if (FIXED_CSS_LENGTH_UNITS.includes(unit)) {
+			this.num = convertToPx(num, unit);
+			this.unit = "px";
+		}
+	}
+	add(other) {
+		if (this.unit !== other.unit) return new DecimalCSS(NaN, "");
+		return new DecimalCSS(this.num + other.num, this.unit);
+	}
+	subtract(other) {
+		if (this.unit !== other.unit) return new DecimalCSS(NaN, "");
+		return new DecimalCSS(this.num - other.num, this.unit);
+	}
+	multiply(other) {
+		if (this.unit !== "" && other.unit !== "" && this.unit !== other.unit) return new DecimalCSS(NaN, "");
+		return new DecimalCSS(this.num * other.num, this.unit || other.unit);
+	}
+	divide(other) {
+		if (this.unit !== "" && other.unit !== "" && this.unit !== other.unit) return new DecimalCSS(NaN, "");
+		return new DecimalCSS(this.num / other.num, this.unit || other.unit);
+	}
+	toString() {
+		return `${this.num}${this.unit}`;
+	}
+	isNaN() {
+		return isNan(this.num);
+	}
+};
+function calculateArithmetic(expr) {
+	if (expr.includes(STR_NAN)) return STR_NAN;
+	let newExpr = expr;
+	while (newExpr.includes("*") || newExpr.includes("/")) {
+		const [, leftOperand, operator, rightOperand] = MULTIPLY_OR_DIVIDE_REGEX.exec(newExpr) ?? [];
+		const lTs = DecimalCSS.parse(leftOperand ?? "");
+		const rTs = DecimalCSS.parse(rightOperand ?? "");
+		const result = operator === "*" ? lTs.multiply(rTs) : lTs.divide(rTs);
+		if (result.isNaN()) return STR_NAN;
+		newExpr = newExpr.replace(MULTIPLY_OR_DIVIDE_REGEX, result.toString());
+	}
+	while (newExpr.includes("+") || /.-\d+(?:\.\d+)?/.test(newExpr)) {
+		const [, leftOperand, operator, rightOperand] = ADD_OR_SUBTRACT_REGEX.exec(newExpr) ?? [];
+		const lTs = DecimalCSS.parse(leftOperand ?? "");
+		const rTs = DecimalCSS.parse(rightOperand ?? "");
+		const result = operator === "+" ? lTs.add(rTs) : lTs.subtract(rTs);
+		if (result.isNaN()) return STR_NAN;
+		newExpr = newExpr.replace(ADD_OR_SUBTRACT_REGEX, result.toString());
+	}
+	return newExpr;
+}
+var PARENTHESES_REGEX = /\(([^()]*)\)/;
+function calculateParentheses(expr) {
+	let newExpr = expr;
+	let match;
+	while ((match = PARENTHESES_REGEX.exec(newExpr)) != null) {
+		const [, parentheticalExpression] = match;
+		newExpr = newExpr.replace(PARENTHESES_REGEX, calculateArithmetic(parentheticalExpression));
+	}
+	return newExpr;
+}
+function evaluateExpression(expression) {
+	let newExpr = expression.replace(/\s+/g, "");
+	newExpr = calculateParentheses(newExpr);
+	newExpr = calculateArithmetic(newExpr);
+	return newExpr;
+}
+function safeEvaluateExpression(expression) {
+	try {
+		return evaluateExpression(expression);
+	} catch {
+		return STR_NAN;
+	}
+}
+function reduceCSSCalc(expression) {
+	const result = safeEvaluateExpression(expression.slice(5, -1));
+	if (result === STR_NAN) return "";
+	return result;
+}
+//#endregion
+export { reduceCSSCalc };

package/dist/es/utils/VueUtils.mjs

@@ -0,0 +1,39 @@
+import { FilteredElementKeyMap, SVGElementPropKeys } from "../cartesian/cartesian-grid/const.mjs";
+import { EventKeys } from "../types/event.mjs";
+//#region src/utils/VueUtils.ts
+/**
+* Checks if the property is valid to spread onto an SVG element or onto a specific component
+* @param {unknown} property property value currently being compared
+* @param {string} key property key currently being compared
+* @param {boolean} includeEvents if events are included in spreadable props
+* @param {boolean} svgElementType checks against map of SVG element types to attributes
+* @returns {boolean} is prop valid
+*/
+function isValidSpreadableProp(property, key, includeEvents, svgElementType) {
+	/**
+	* If the svg element type is explicitly included, check against the filtered element key map
+	* to determine if there are attributes that should only exist on that element type.
+	* @todo Add an internal cjs version of https://github.com/wooorm/svg-element-attributes for full coverage.
+	*/
+	const matchingElementTypeKeys = (svgElementType && FilteredElementKeyMap?.[svgElementType]) ?? [];
+	return key.startsWith("data-") || typeof property !== "function" && (svgElementType && matchingElementTypeKeys.includes(key) || SVGElementPropKeys.includes(key)) || includeEvents && EventKeys.includes(key);
+}
+function filterProps(props, includeEvents, svgElementType) {
+	if (!props || typeof props === "function" || typeof props === "boolean") return null;
+	const inputProps = props;
+	if (typeof inputProps !== "object" && typeof inputProps !== "function") return null;
+	const out = {};
+	/**
+	* Props are blindly spread onto SVG elements. This loop filters out properties that we don't want to spread.
+	* Items filtered out are as follows:
+	*   - functions in properties that are SVG attributes (functions are included when includeEvents is true)
+	*   - props that are SVG attributes but don't matched the passed svgElementType
+	*   - any prop that is not in SVGElementPropKeys (or in EventKeys if includeEvents is true)
+	*/
+	Object.keys(inputProps).forEach((key) => {
+		if (isValidSpreadableProp(inputProps?.[key], key, includeEvents, svgElementType)) out[key] = inputProps[key];
+	});
+	return out;
+}
+//#endregion
+export { filterProps };

package/dist/es/utils/attrs.mjs

@@ -0,0 +1,69 @@
+import { isSsr } from "./validate.mjs";
+//#region src/utils/attrs.ts
+var stringCache = {
+	widthCache: {},
+	cacheCount: 0
+};
+var MAX_CACHE_NUM = 2e3;
+var SPAN_STYLE = {
+	position: "absolute",
+	top: "-20000px",
+	left: 0,
+	padding: 0,
+	margin: 0,
+	border: "none",
+	whiteSpace: "pre"
+};
+var MEASUREMENT_SPAN_ID = "v-charts_measurement_span";
+function removeInvalidKeys(obj) {
+	const copyObj = { ...obj };
+	Object.keys(copyObj).forEach((key) => {
+		if (!copyObj[key]) delete copyObj[key];
+	});
+	return copyObj;
+}
+function getStringSize(text, style = {}) {
+	if (text === void 0 || text === null || isSsr) return {
+		width: 0,
+		height: 0
+	};
+	const copyStyle = removeInvalidKeys(style);
+	const cacheKey = JSON.stringify({
+		text,
+		copyStyle
+	});
+	if (stringCache.widthCache[cacheKey]) return stringCache.widthCache[cacheKey];
+	try {
+		let measurementSpan = document.getElementById(MEASUREMENT_SPAN_ID);
+		if (!measurementSpan) {
+			measurementSpan = document.createElement("span");
+			measurementSpan.setAttribute("id", MEASUREMENT_SPAN_ID);
+			measurementSpan.setAttribute("aria-hidden", "true");
+			document.body.appendChild(measurementSpan);
+		}
+		const measurementSpanStyle = {
+			...SPAN_STYLE,
+			...copyStyle
+		};
+		Object.assign(measurementSpan.style, measurementSpanStyle);
+		measurementSpan.textContent = `${text}`;
+		const rect = measurementSpan.getBoundingClientRect();
+		const result = {
+			width: rect.width,
+			height: rect.height
+		};
+		stringCache.widthCache[cacheKey] = result;
+		if (++stringCache.cacheCount > MAX_CACHE_NUM) {
+			stringCache.cacheCount = 0;
+			stringCache.widthCache = {};
+		}
+		return result;
+	} catch {
+		return {
+			width: 0,
+			height: 0
+		};
+	}
+}
+//#endregion
+export { getStringSize };

package/dist/es/utils/cartesian.mjs

@@ -0,0 +1,54 @@
+import { isVisible } from "./validate.mjs";
+import { getEveryNthWithCondition } from "./tick.mjs";
+//#region src/utils/cartesian.ts
+/**
+* Normalizes the angle so that 0 <= angle < 180.
+* @param {number} angle Angle in degrees.
+* @return {number} the normalized angle with a value of at least 0 and never greater or equal to 180.
+*/
+function normalizeAngle(angle) {
+	return (angle % 180 + 180) % 180;
+}
+/**
+* Calculates the width of the largest horizontal line that fits inside a rectangle that is displayed at an angle.
+* @param {object} size Width and height of the text in a horizontal position.
+* @param {number} angle Angle in degrees in which the text is displayed.
+* @return {number} The width of the largest horizontal line that fits inside a rectangle that is displayed at an angle.
+*/
+function getAngledRectangleWidth({ width, height }, angle = 0) {
+	const angleRadians = normalizeAngle(angle) * Math.PI / 180;
+	const angleThreshold = Math.atan(height / width);
+	const angledWidth = angleRadians > angleThreshold && angleRadians < Math.PI - angleThreshold ? height / Math.sin(angleRadians) : width / Math.cos(angleRadians);
+	return Math.abs(angledWidth);
+}
+function getEquidistantTicks(sign, boundaries, getTickSize, ticks, minTickGap) {
+	const result = (ticks || []).slice();
+	const { start: initialStart, end } = boundaries;
+	let index = 0;
+	let stepsize = 1;
+	let start = initialStart;
+	while (stepsize <= result.length) {
+		const entry = ticks?.[index];
+		if (entry === void 0) return getEveryNthWithCondition(ticks, stepsize) ?? [];
+		const i = index;
+		let size;
+		const getSize = () => {
+			if (size === void 0) size = getTickSize(entry, i);
+			return size;
+		};
+		const tickCoord = entry.coordinate;
+		const isShow = index === 0 || isVisible(sign, tickCoord, getSize, start, end);
+		if (!isShow) {
+			index = 0;
+			start = initialStart;
+			stepsize += 1;
+		}
+		if (isShow) {
+			start = tickCoord + sign * (getSize() / 2 + minTickGap);
+			index += stepsize;
+		}
+	}
+	return [];
+}
+//#endregion
+export { getAngledRectangleWidth, getEquidistantTicks };