vccs 0.1.0 → 0.2.0

package/dist/es/utils/VueUtils.mjs

@@ -1,18 +1,39 @@
-import { FilteredElementKeyMap as e, SVGElementPropKeys as t } from "../cartesian/cartesian-grid/const.mjs";
-import { EventKeys as n } from "../types/event.mjs";
+import { FilteredElementKeyMap, SVGElementPropKeys } from "../cartesian/cartesian-grid/const.mjs";
+import { EventKeys } from "../types/event.mjs";
 //#region src/utils/VueUtils.ts
-function r(r, i, a, o) {
-	let s = (o && e?.[o]) ?? [];
-	return i.startsWith("data-") || typeof r != "function" && (o && s.includes(i) || t.includes(i)) || a && n.includes(i);
+/**
+* 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 i(e, t, n) {
-	if (!e || typeof e == "function" || typeof e == "boolean") return null;
-	let i = e;
-	if (typeof i != "object" && typeof i != "function") return null;
-	let a = {};
-	return Object.keys(i).forEach((e) => {
-		r(i?.[e], e, t, n) && (a[e] = i[e]);
-	}), a;
+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 { i as filterProps };
+export { filterProps };

package/dist/es/utils/attrs.mjs

@@ -1,9 +1,11 @@
-import { isSsr as e } from "./validate.mjs";
+import { isSsr } from "./validate.mjs";
 //#region src/utils/attrs.ts
-var t = {
+var stringCache = {
 	widthCache: {},
 	cacheCount: 0
-}, n = 2e3, r = {
+};
+var MAX_CACHE_NUM = 2e3;
+var SPAN_STYLE = {
 	position: "absolute",
 	top: "-20000px",
 	left: 0,
@@ -11,36 +13,51 @@ var t = {
 	margin: 0,
 	border: "none",
 	whiteSpace: "pre"
-}, i = "v-charts_measurement_span";
-function a(e) {
-	let t = { ...e };
-	return Object.keys(t).forEach((e) => {
-		t[e] || delete t[e];
-	}), t;
+};
+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 o(o, s = {}) {
-	if (o == null || e) return {
+function getStringSize(text, style = {}) {
+	if (text === void 0 || text === null || isSsr) return {
 		width: 0,
 		height: 0
 	};
-	let c = a(s), l = JSON.stringify({
-		text: o,
-		copyStyle: c
+	const copyStyle = removeInvalidKeys(style);
+	const cacheKey = JSON.stringify({
+		text,
+		copyStyle
 	});
-	if (t.widthCache[l]) return t.widthCache[l];
+	if (stringCache.widthCache[cacheKey]) return stringCache.widthCache[cacheKey];
 	try {
-		let e = document.getElementById(i);
-		e || (e = document.createElement("span"), e.setAttribute("id", i), e.setAttribute("aria-hidden", "true"), document.body.appendChild(e));
-		let a = {
-			...r,
-			...c
+		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(e.style, a), e.textContent = `${o}`;
-		let s = e.getBoundingClientRect(), u = {
-			width: s.width,
-			height: s.height
+		Object.assign(measurementSpan.style, measurementSpanStyle);
+		measurementSpan.textContent = `${text}`;
+		const rect = measurementSpan.getBoundingClientRect();
+		const result = {
+			width: rect.width,
+			height: rect.height
 		};
-		return t.widthCache[l] = u, ++t.cacheCount > n && (t.cacheCount = 0, t.widthCache = {}), u;
+		stringCache.widthCache[cacheKey] = result;
+		if (++stringCache.cacheCount > MAX_CACHE_NUM) {
+			stringCache.cacheCount = 0;
+			stringCache.widthCache = {};
+		}
+		return result;
 	} catch {
 		return {
 			width: 0,
@@ -49,4 +66,4 @@ function o(o, s = {}) {
 	}
 }
 //#endregion
-export { o as getStringSize };
+export { getStringSize };

package/dist/es/utils/cartesian.mjs

@@ -1,22 +1,54 @@
-import { isVisible as e } from "./validate.mjs";
-import { getEveryNthWithCondition as t } from "./tick.mjs";
+import { isVisible } from "./validate.mjs";
+import { getEveryNthWithCondition } from "./tick.mjs";
 //#region src/utils/cartesian.ts
-function n(e) {
-	return (e % 180 + 180) % 180;
+/**
+* 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;
 }
-function r({ width: e, height: t }, r = 0) {
-	let i = n(r) * Math.PI / 180, a = Math.atan(t / e), o = i > a && i < Math.PI - a ? t / Math.sin(i) : e / Math.cos(i);
-	return Math.abs(o);
+/**
+* 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 i(n, r, i, a, o) {
-	let s = (a || []).slice(), { start: c, end: l } = r, u = 0, d = 1, f = c;
-	for (; d <= s.length;) {
-		let r = a?.[u];
-		if (r === void 0) return t(a, d) ?? [];
-		let s = u, p, m = () => (p === void 0 && (p = i(r, s)), p), h = r.coordinate, g = u === 0 || e(n, h, m, f, l);
-		g || (u = 0, f = c, d += 1), g && (f = h + n * (m() / 2 + o), u += d);
+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 { r as getAngledRectangleWidth, i as getEquidistantTicks };
+export { getAngledRectangleWidth, getEquidistantTicks };