squarified 0.3.7 → 0.4.0

package/dist/plugin.mjs

@@ -0,0 +1,394 @@
+import { DEFAULT_MATRIX_LOC, PI_2, Schedule, createRoundBlock, definePlugin, easing, hashCode, isScrollWheelOrRightButtonOnMouseupAndDown, isWheelEvent, mixinWithParams, smoothFrame, stackMatrixTransform, stackMatrixTransformWithGraphAndLayer } from "./dom-event-DQ8OFrZa.mjs";
+
+//#region src/plugins/highlight.ts
+var Highlight = class extends Schedule {
+	reset() {
+		this.destory();
+		this.update();
+	}
+	get canvas() {
+		return this.render.canvas;
+	}
+	setZIndexForHighlight(zIndex = "-1") {
+		this.canvas.style.zIndex = zIndex;
+	}
+	init() {
+		this.setZIndexForHighlight();
+		this.canvas.style.position = "absolute";
+		this.canvas.style.pointerEvents = "none";
+	}
+};
+const ANIMATION_DURATION = 300;
+const HIGH_LIGHT_OPACITY = .3;
+const fill = {
+	desc: {
+		r: 255,
+		g: 255,
+		b: 255
+	},
+	mode: "rgb"
+};
+const presetHighlightPlugin = definePlugin({
+	name: "treemap:preset-highlight",
+	onLoad() {
+		const meta = this.getPluginMetadata("treemap:preset-highlight");
+		if (!meta) return;
+		if (!meta.highlight) meta.highlight = new Highlight(this.instance.to);
+	},
+	onDOMEventTriggered(name, _, module, { stateManager: state, matrix }) {
+		if (name === "mousemove") {
+			if (state.canTransition("MOVE")) {
+				const meta = this.getPluginMetadata("treemap:preset-highlight");
+				if (!module) {
+					meta.highlight?.reset();
+					meta.highlight?.update();
+					meta.highlight?.setZIndexForHighlight();
+					return;
+				}
+				const [x, y, w, h] = module.layout;
+				const effectiveRadius = Math.min(module.config.rectRadius, w / 4, h / 4);
+				smoothFrame((_$1, cleanup) => {
+					cleanup();
+					meta.highlight?.reset();
+					const mask = createRoundBlock(x, y, w, h, {
+						fill,
+						opacity: HIGH_LIGHT_OPACITY,
+						radius: effectiveRadius,
+						padding: 0
+					});
+					meta.highlight?.add(mask);
+					meta.highlight?.setZIndexForHighlight("1");
+					stackMatrixTransform(mask, matrix.e, matrix.f, matrix.a);
+					meta.highlight?.update();
+				}, { duration: ANIMATION_DURATION });
+			}
+		}
+	},
+	onResize() {
+		const meta = this.getPluginMetadata("treemap:preset-highlight");
+		if (!meta) return;
+		meta.highlight?.render.initOptions({ ...this.instance.render.options });
+		meta.highlight?.reset();
+		meta.highlight?.init();
+	},
+	onDispose() {
+		const meta = this.getPluginMetadata("treemap:preset-highlight");
+		if (meta && meta.highlight) {
+			meta.highlight.destory();
+			meta.highlight = null;
+		}
+	},
+	meta: { highlight: null }
+});
+
+//#endregion
+//#region src/plugins/drag.ts
+const presetDragElementPlugin = definePlugin({
+	name: "treemap:preset-drag-element",
+	onDOMEventTriggered(name, event, module, domEvent) {
+		const { stateManager: state, matrix, component } = domEvent;
+		switch (name) {
+			case "mousemove": {
+				if (state.isInState("DRAGGING")) domEvent.silent("click");
+				else domEvent.active("click");
+				const meta = getDragOptions.call(this);
+				if (!meta) return;
+				if (meta.dragOptions.x === 0 && meta.dragOptions.y === 0) {
+					state.transition("IDLE");
+					return;
+				}
+				state.transition("DRAGGING");
+				if (state.isInState("DRAGGING")) {
+					const highlight = getHighlightInstance.call(this);
+					smoothFrame((_, cleanup) => {
+						cleanup();
+						const { offsetX, offsetY } = event.native;
+						const drawX = offsetX - meta.dragOptions.x;
+						const drawY = offsetY - meta.dragOptions.y;
+						const lastX = meta.dragOptions.x;
+						const lastY = meta.dragOptions.y;
+						if (highlight?.highlight) {
+							highlight.highlight.reset();
+							highlight.highlight.setZIndexForHighlight();
+						}
+						matrix.translation(drawX, drawY);
+						meta.dragOptions.x = offsetX;
+						meta.dragOptions.y = offsetY;
+						meta.dragOptions.lastX = lastX;
+						meta.dragOptions.lastY = lastY;
+						component.cleanup();
+						component.draw(false, false);
+						stackMatrixTransformWithGraphAndLayer(component.elements, matrix.e, matrix.f, matrix.a);
+						component.update();
+						return true;
+					}, {
+						duration: ANIMATION_DURATION,
+						deps: [() => state.isInState("IDLE")]
+					});
+				}
+				break;
+			}
+			case "mouseup": {
+				if (state.isInState("PRESSED")) {
+					const meta = getDragOptions.call(this);
+					if (meta && meta.dragOptions) {
+						if (meta.dragOptions.x === meta.dragOptions.lastX && meta.dragOptions.y === meta.dragOptions.lastY) {
+							state.transition("IDLE");
+							return;
+						}
+					}
+				}
+				if (state.isInState("DRAGGING") && state.canTransition("IDLE")) {
+					const highlight = getHighlightInstance.call(this);
+					if (highlight && highlight.highlight) {
+						highlight.highlight.reset();
+						highlight.highlight.setZIndexForHighlight();
+					}
+					const meta = getDragOptions.call(this);
+					if (meta && meta.dragOptions) {
+						meta.dragOptions.x = 0;
+						meta.dragOptions.y = 0;
+						meta.dragOptions.lastX = 0;
+						meta.dragOptions.lastY = 0;
+						state.transition("IDLE");
+					}
+				}
+				break;
+			}
+			case "mousedown": {
+				if (isScrollWheelOrRightButtonOnMouseupAndDown(event.native)) return;
+				const meta = getDragOptions.call(this);
+				if (!meta) return;
+				meta.dragOptions.x = event.native.offsetX;
+				meta.dragOptions.y = event.native.offsetY;
+				meta.dragOptions.lastX = event.native.offsetX;
+				meta.dragOptions.lastY = event.native.offsetY;
+				state.transition("PRESSED");
+				break;
+			}
+		}
+	},
+	meta: { dragOptions: {
+		x: 0,
+		y: 0,
+		lastX: 0,
+		lastY: 0
+	} },
+	onResize({ matrix, stateManager: state }) {
+		matrix.create(DEFAULT_MATRIX_LOC);
+		state.reset();
+	}
+});
+function getHighlightInstance() {
+	return this.getPluginMetadata("treemap:preset-highlight");
+}
+function getDragOptions() {
+	const meta = this.getPluginMetadata("treemap:preset-drag-element");
+	return meta;
+}
+
+//#endregion
+//#region src/plugins/preset-color.ts
+const presetColorPlugin = definePlugin({
+	name: "treemap:preset-color",
+	onModuleInit(modules) {
+		const colorMappings = {};
+		for (let i = 0; i < modules.length; i++) {
+			const module = modules[i];
+			assignColorMappings(colorMappings, module, Math.abs(hashCode(module.node.id)) % PI_2, 0);
+		}
+		return { colorMappings };
+	}
+});
+function assignColorMappings(colorMappings, module, ancestorHue, depth) {
+	const hueOffset = Math.abs(hashCode(module.node.id)) % 60 - 30;
+	const hue = (ancestorHue + hueOffset) % 360;
+	const saturation = Math.max(75 - depth * 5, 40);
+	const baseLightness = 55 - depth * 3;
+	const color = adjustColorToComfortableForHumanEye(hue, saturation, baseLightness);
+	colorMappings[module.node.id] = color;
+	if (module.node.isCombinedNode && module.node.originalNodes) for (const combined of module.node.originalNodes) colorMappings[combined.id] = color;
+	if (module.children && module.children.length) {
+		const childCount = module.children.length;
+		for (let i = 0; i < childCount; i++) {
+			const childHueOffset = 40 * i / childCount;
+			const childHue = (hue + childHueOffset) % 360;
+			assignColorMappings(colorMappings, module.children[i], childHue, depth + 1);
+		}
+	}
+}
+function adjustColorToComfortableForHumanEye(hue, saturation, lightness) {
+	hue = (hue % 360 + 360) % 360;
+	saturation = Math.min(Math.max(saturation, 40), 85);
+	lightness = Math.min(Math.max(lightness, 35), 75);
+	if (hue >= 60 && hue <= 180) {
+		saturation = Math.max(saturation - 10, 40);
+		lightness = Math.min(lightness + 5, 75);
+	} else if (hue >= 200 && hue <= 280) lightness = Math.min(lightness + 8, 75);
+	else if (hue >= 0 && hue <= 30) saturation = Math.max(saturation - 5, 40);
+	return {
+		mode: "hsl",
+		desc: {
+			h: hue,
+			s: saturation,
+			l: lightness
+		}
+	};
+}
+
+//#endregion
+//#region src/plugins/wheel.ts
+function presetScalePlugin(options) {
+	return definePlugin({
+		name: "treemap:preset-scale",
+		onDOMEventTriggered(_, event, module, evt) {
+			if (isWheelEvent(event)) onWheel(this, event, evt);
+		},
+		meta: { scaleOptions: {
+			scale: 1,
+			minScale: options?.min || .1,
+			maxScale: options?.max || Infinity,
+			scaleFactor: .05
+		} },
+		onResize({ matrix, stateManager: state }) {
+			const meta = getScaleOptions.call(this);
+			if (meta) meta.scaleOptions.scale = 1;
+			matrix.create(DEFAULT_MATRIX_LOC);
+			state.reset();
+		}
+	});
+}
+function getScaleOptions() {
+	const meta = this.getPluginMetadata("treemap:preset-scale");
+	return meta;
+}
+function onWheel(pluginContext, event, { stateManager: state, component, matrix }) {
+	event.native.preventDefault();
+	const meta = getScaleOptions.call(pluginContext);
+	if (!meta) return;
+	const { scale, minScale, maxScale, scaleFactor } = meta.scaleOptions;
+	const delta = event.native.deltaY < 0 ? scaleFactor : -scaleFactor;
+	const newScale = Math.max(minScale, Math.min(maxScale, scale + delta));
+	if (newScale === scale) return;
+	state.transition("SCALING");
+	const mouseX = event.native.offsetX;
+	const mouseY = event.native.offsetY;
+	const scaleDiff = newScale / scale;
+	meta.scaleOptions.scale = newScale;
+	const highlight = getHighlightInstance.apply(pluginContext);
+	smoothFrame((_, cleanup) => {
+		cleanup();
+		if (highlight && highlight.highlight) {
+			highlight.highlight.reset();
+			highlight.highlight.setZIndexForHighlight();
+		}
+		matrix.scale(scaleDiff, scaleDiff);
+		matrix.e = mouseX - (mouseX - matrix.e) * scaleDiff;
+		matrix.f = mouseY - (mouseY - matrix.f) * scaleDiff;
+		component.cleanup();
+		const { width, height } = component.render.options;
+		component.layoutNodes = component.calculateLayoutNodes(component.data, {
+			w: width,
+			h: height,
+			x: 0,
+			y: 0
+		}, matrix.a);
+		component.draw(true, false);
+		stackMatrixTransformWithGraphAndLayer(component.elements, matrix.e, matrix.f, newScale);
+		component.update();
+		if (state.canTransition("IDLE")) state.transition("IDLE");
+		return true;
+	}, { duration: ANIMATION_DURATION });
+}
+
+//#endregion
+//#region src/plugins/zoomable.ts
+const MAX_SCALE_MULTIPLIER = 2;
+const presetZoomablePlugin = definePlugin({
+	name: "treemap:preset-zoomable",
+	onLoad(treemap, { stateManager: state, matrix }) {
+		return mixinWithParams(treemap, [{
+			name: "zoom",
+			fn: () => (id) => {
+				const meta = this.getPluginMetadata("treemap:preset-zoomable");
+				if (!meta || state.isInState("ZOOMING")) return;
+				const targetModule = this.resolveModuleById(id);
+				if (!targetModule) return;
+				meta.previousMatrixState = {
+					e: matrix.e,
+					f: matrix.f,
+					a: matrix.a,
+					d: matrix.d
+				};
+				const component = this.instance;
+				state.transition("ZOOMING");
+				const [nodeX, nodeY, nodeW, nodeH] = targetModule.layout;
+				const { width, height } = component.render.options;
+				const currentScale = matrix.a;
+				const scaleX = width / nodeW;
+				const scaleY = height / nodeH;
+				const fullScale = Math.min(scaleX, scaleY) * .9;
+				const targetScale = Math.min(fullScale, currentScale * MAX_SCALE_MULTIPLIER);
+				const scale = targetScale;
+				const nodeCenterX = nodeX + nodeW / 2;
+				const nodeCenterY = nodeY + nodeH / 2;
+				const viewCenterX = width / 2;
+				const viewCenterY = height / 2;
+				const targetE = viewCenterX - nodeCenterX * scale;
+				const targetF = viewCenterY - nodeCenterY * scale;
+				const scaleMeta = getScaleOptions.call(this);
+				if (scaleMeta) scaleMeta.scaleOptions.scale = scale;
+				const highlight = getHighlightInstance.call(this);
+				const dragMeta = getDragOptions.call(this);
+				if (dragMeta) {
+					dragMeta.dragOptions.x = 0;
+					dragMeta.dragOptions.y = 0;
+					dragMeta.dragOptions.lastX = 0;
+					dragMeta.dragOptions.lastY = 0;
+				}
+				const startMatrix = {
+					e: matrix.e,
+					f: matrix.f,
+					a: matrix.a,
+					d: matrix.d
+				};
+				smoothFrame((progress) => {
+					const easedProgress = easing.cubicInOut(progress);
+					const currentE = startMatrix.e + (targetE - startMatrix.e) * easedProgress;
+					const currentF = startMatrix.f + (targetF - startMatrix.f) * easedProgress;
+					const currentA = startMatrix.a + (scale - startMatrix.a) * easedProgress;
+					const currentD = startMatrix.d + (scale - startMatrix.d) * easedProgress;
+					matrix.create(DEFAULT_MATRIX_LOC);
+					matrix.e = currentE;
+					matrix.f = currentF;
+					matrix.a = currentA;
+					matrix.d = currentD;
+					if (highlight?.highlight) {
+						highlight.highlight.reset();
+						highlight.highlight.setZIndexForHighlight();
+					}
+					component.cleanup();
+					const { width: width$1, height: height$1 } = component.render.options;
+					component.layoutNodes = component.calculateLayoutNodes(component.data, {
+						w: width$1,
+						h: height$1,
+						x: 0,
+						y: 0
+					}, matrix.a);
+					component.draw(true, false);
+					stackMatrixTransformWithGraphAndLayer(component.elements, matrix.e, matrix.f, matrix.a);
+					component.update();
+				}, {
+					duration: ANIMATION_DURATION,
+					onStop: () => {
+						state.reset();
+					}
+				});
+			}
+		}]);
+	},
+	meta: { isZooming: false }
+});
+
+//#endregion
+export { presetColorPlugin, presetDragElementPlugin, presetHighlightPlugin, presetScalePlugin, presetZoomablePlugin };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "squarified",
-  "version": "0.3.7",
+  "version": "0.4.0",
   "description": "squarified tree map",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -10,6 +10,12 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.mjs",
       "require": "./dist/index.js"
+    },
+    "./package.json": "./package.json",
+    "./plugin": {
+      "types": "./dist/plugin.d.ts",
+      "import": "./dist/plugin.mjs",
+      "require": "./dist/plugin.js"
     }
   },
   "keywords": [
@@ -28,7 +34,7 @@
   "author": "Kanno",
   "license": "MIT",
   "devDependencies": {
-    "@types/js-yaml": "^4.0.9",
+    "@microsoft/api-extractor": "^7.52.3",
     "@types/markdown-it": "^14.1.2",
     "@types/node": "^22.7.4",
     "chokidar": "^4.0.3",
@@ -36,23 +42,31 @@
     "esbuild": "^0.24.0",
     "eslint": "^9.16.0",
     "eslint-config-kagura": "^3.0.1",
+    "gray-matter": "^4.0.3",
     "highlight.js": "^11.11.1",
-    "js-yaml": "^4.1.0",
     "markdown-it": "^14.1.0",
-    "rollup": "^4.40.0",
-    "rollup-plugin-dts": "^6.2.1",
-    "rollup-plugin-swc3": "^0.12.1",
+    "markdown-it-anchor": "^9.2.0",
+    "markdown-it-highlightjs": "^4.2.0",
+    "mermaid": "^11.6.0",
+    "rolldown": "1.0.0-beta.8",
     "tinyexec": "^0.3.2",
+    "tinyglobby": "^0.2.13",
     "tsx": "^4.19.2",
     "typescript": "^5.7.3",
-    "vite-bundle-analyzer": "^0.16.2"
+    "vite-bundle-analyzer": "^0.20.1",
+    "puppeteer": "^24.9.0"
   },
   "pnpm": {
     "overrides": {
       "esbuild": "0.24.0",
       "is-core-module": "npm:@nolyfill/is-core-module@^1",
       "safer-buffer": "npm:@nolyfill/safer-buffer@^1"
-    }
+    },
+    "onlyBuiltDependencies": [
+      "esbuild",
+      "dprint",
+      "rolldown"
+    ]
   },
-  "packageManager": "pnpm@9.4.0"
+  "packageManager": "pnpm@10.10.0+sha512.d615db246fe70f25dcfea6d8d73dee782ce23e2245e3c4f6f888249fb568149318637dca73c2c5c8ef2a4ca0d5657fb9567188bfab47f566d1ee6ce987815c39"
 }