From ed618d8033bdf87775f9dc789b1a2d17e3ff9653 Mon Sep 17 00:00:00 2001 From: kanno <812137533@qq.com> Date: Sun, 2 Jun 2024 17:46:17 +0800 Subject: [PATCH] feat: remove foamtree --- package.json | 1 - src/client/application.tsx | 2 - src/client/components/tree-map.tsx | 228 ----------------------------- src/client/third.d.ts | 143 ------------------ yarn.lock | 8 - 5 files changed, 382 deletions(-) delete mode 100644 src/client/components/tree-map.tsx delete mode 100644 src/client/third.d.ts diff --git a/package.json b/package.json index 027dd56..99998d6 100644 --- a/package.json +++ b/package.json @@ -26,7 +26,6 @@ "lint": "eslint . --fix" }, "devDependencies": { - "@carrotsearch/foamtree": "^3.5.1", "@iconify-json/ph": "^1.1.12", "@jridgewell/source-map": "^0.3.6", "@jridgewell/trace-mapping": "^0.3.25", diff --git a/src/client/application.tsx b/src/client/application.tsx index 3d863f5..513e1c0 100644 --- a/src/client/application.tsx +++ b/src/client/application.tsx @@ -8,7 +8,6 @@ import { ApplicationProvider, TreemapProvider } from './context' import { Sidebar, SidebarProvider } from './components/side-bar' import { Treemap } from './components/treemap' import type { PaintEvent, SquarifiedModule, TreemapInstance } from './components/treemap' -import { TreeMap } from './components/tree-map' import { convertBytes } from './shared' interface ModuleSizeProps { @@ -56,7 +55,6 @@ export function App() { setTooltipVisible(!s)} /> treeMapRef.current = instance} onMousemove={handleMousemove} /> - {/* treeMapRef.current = instance} /> */} {tooltipContent?.node && ( <> diff --git a/src/client/components/tree-map.tsx b/src/client/components/tree-map.tsx deleted file mode 100644 index 411ae49..0000000 --- a/src/client/components/tree-map.tsx +++ /dev/null @@ -1,228 +0,0 @@ -import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef } from 'react' -import stylex from '@stylexjs/stylex' -import { FoamTree } from '@carrotsearch/foamtree' -import type { FoamContext, FoamDataObject, FoamEventObject } from '@carrotsearch/foamtree' -import { noop } from 'foxact/noop' -import { useApplicationContext } from '../context' -import type { Module, Sizes } from '../interface' -import { convertBytes, hashCode } from '../shared' -import { Text } from './text' - -type FoamGroup = Omit & { isAsset?: boolean } - -const styles = stylex.create({ - container: { - height: '100%', - width: '100%', - position: 'relative' - } -}) - -interface VisibleFoam extends Module { - weight: number -} - -function travseVisibleModule(analyzeModule: Module, sizes: Sizes, topLayer: boolean): VisibleFoam { - if (topLayer) { - analyzeModule.groups = sizes === 'statSize' ? analyzeModule.stats : analyzeModule.source - } - if (Array.isArray(analyzeModule.groups)) { - analyzeModule.groups = analyzeModule.groups.map(module => travseVisibleModule(module, sizes, false)) - } - return { ...analyzeModule, weight: analyzeModule[sizes] } -} - -// We using keyword `isAsset` to judge the group root -function findGroupRoot(group: FoamGroup, foamContext: FoamContext): FoamGroup { - if (group.isAsset) return group - while (!group.isAsset) { - const prop = foamContext.get<{ parent: Module }>('hierarchy', group)! - return findGroupRoot(prop.parent, foamContext) - } - return group -} - -function getChunkNamePart(chunkLabel: string, chunkNamePartIndex: number) { - return chunkLabel.split(/[^a-z0-9]/iu)[chunkNamePartIndex] || chunkLabel -} - -export function ModuleSize(props: { module: FoamDataObject; sizes: Sizes; checkedSizes: Sizes }) { - const { module, sizes, checkedSizes } = props - if (!module[sizes]) return null - return ( - - {checkedSizes === sizes ? {sizes} : {sizes}} : - {convertBytes(module[sizes])} - - ) -} - -export type TreeMapComponent = { - zoom: (to: FoamDataObject) => void - check: (to: FoamDataObject) => FoamDataObject | void -} - -export interface TreeMapProps { - onGroupHover?(group: FoamDataObject | null): void -} - -export const TreeMap = forwardRef(function TreeMap({ onGroupHover = noop }, ref) { - const { analyzeModule, sizes, scence } = useApplicationContext() - const containerRef = useRef(null) - const foamTreeInstance = useRef(null) - const zoomOutDisabled = useRef(false) - - const check = (group?: FoamDataObject) => { - const instance = foamTreeInstance.current - if (instance === null) { - return - } - while (group && !instance.get('state', group)?.revealed) { - group = instance.get('hierarchy', group)?.parent - } - return group - } - - useImperativeHandle(ref, () => ({ - zoom(group?: FoamDataObject) { - zoomOutDisabled.current = false - group = check(group) - if (group) { - foamTreeInstance.current?.zoom(group) - } - }, - check - })) - - const visibleChunks = useMemo( - () => analyzeModule.filter((v) => scence.has(v.label)).map((module) => travseVisibleModule(module, sizes, true)), - [analyzeModule, sizes, scence] - ) - - const chunkNamePartIndex = useMemo(() => { - const splitChunkNames = visibleChunks.map((chunk) => chunk.label.split(/[^a-z0-9]/iu)) - const longestSplitName = Math.max(...splitChunkNames.map((parts) => parts.length)) - const namePart = { - index: 0, - votes: 0 - } - for (let i = longestSplitName - 1; i >= 0; i--) { - const identifierVotes = { - name: 0, - hash: 0, - ext: 0 - } - let lastChunkPart = '' - for (const splitChunkName of splitChunkNames) { - const part = splitChunkName[i] - if (part === undefined || part === '') { - continue - } - if (part === lastChunkPart) { - identifierVotes.ext++ - } else if (/[a-z]/u.test(part) && /[0-9]/u.test(part) && part.length === lastChunkPart.length) { - identifierVotes.hash++ - } else if (/^[a-z]+$/iu.test(part) || /^[0-9]+$/u.test(part)) { - identifierVotes.name++ - } - lastChunkPart = part - } - if (identifierVotes.name >= namePart.votes) { - namePart.index = i - namePart.votes = identifierVotes.name - } - } - return namePart.index - }, [visibleChunks]) - - const resize = () => { - if (!foamTreeInstance.current) return - foamTreeInstance.current.resize() - } - - useEffect(() => { - const handleGroupHover = (event: FoamEventObject) => { - const { group } = event - onGroupHover?.(group) - } - if (!foamTreeInstance.current && containerRef.current) { - foamTreeInstance.current = new FoamTree({ - element: containerRef.current, - layout: 'squarified', - stacking: 'flattened', - pixelRatio: window.devicePixelRatio || 1, - maxGroups: Infinity, - maxGroupLevelsDrawn: Infinity, - maxGroupLabelLevelsDrawn: Infinity, - maxGroupLevelsAttached: Infinity, - wireframeLabelDrawing: 'always', - groupMinDiameter: 0, - groupLabelVerticalPadding: 0.2, - rolloutDuration: 0, - pullbackDuration: 0, - fadeDuration: 0, - groupExposureZoomMargin: 0.2, - zoomMouseWheelDuration: 300, - openCloseDuration: 200, - dataObject: { - groups: visibleChunks - }, - titleBarDecorator(_, __, variables) { - variables.titleBarShown = false - }, - groupColorDecorator(_, properties, variables) { - if (!foamTreeInstance.current) return - const root = findGroupRoot(properties.group, foamTreeInstance.current) - const chunkName = getChunkNamePart(root.label, chunkNamePartIndex) - const hash = /[^0-9]/.test(chunkName) ? hashCode(chunkName) : (parseInt(chunkName) / 1000) * 360 - console.log(Math.round(Math.abs(hash) % 360), 'hsla(317deg, 60%, 50%, 0.9)') - variables.groupColor = { - model: 'hsla', - h: Math.round(Math.abs(hash) % 360), - s: 60, - l: 50, - a: 0.9 - } - }, - onGroupDoubleClick(event) { - event.preventDefault() - }, - onGroupClick(event) { - event.preventDefault() - zoomOutDisabled.current = false - this.zoom(event.group) - }, - onGroupHover(event) { - if (event.group && (event.group.attribution || event.group === this.get('dataObject'))) { - event.preventDefault() - handleGroupHover(Object.create(null)) - return - } - handleGroupHover(event) - }, - onGroupMouseWheel(event) { - const { scale } = this.get<{ scale: number }>('viewport')! - const isZoomOut = event.delta < 0 - if (isZoomOut) { - if (zoomOutDisabled.current) return event.preventDefault() - if (scale < 1) { - zoomOutDisabled.current = true - event.preventDefault() - } - return - } - zoomOutDisabled.current = false - } - }) - } - window.addEventListener('resize', resize) - return () => { - if (!foamTreeInstance.current) return - foamTreeInstance.current.dispose() - foamTreeInstance.current = null - window.removeEventListener('resize', resize) - } - }, [chunkNamePartIndex, visibleChunks, onGroupHover]) - - return
-}) diff --git a/src/client/third.d.ts b/src/client/third.d.ts deleted file mode 100644 index 254e0a7..0000000 --- a/src/client/third.d.ts +++ /dev/null @@ -1,143 +0,0 @@ -declare module '@carrotsearch/foamtree' { - export interface FoamDataObject extends NonNullable { - label: string - filename?: string - weight?: number - open?: boolean - attribution?: unknown - exposed?: boolean - selected?: boolean - description?: boolean - gzipSize: number - parsedSize: number - statSize: number - groups?: Array - } - - export interface FoamTreeOptions { - element: HTMLElement - layout: 'relaxed' | 'ordered' | 'squarified' - stacking: 'hierarchical' | 'flattened' - pixelRatio: number - maxGroups: number - maxGroupLevelsDrawn: number - maxGroupLabelLevelsDrawn: number - maxGroupLevelsAttached: number - wireframeLabelDrawing: 'auto' | 'always' | 'never' - groupMinDiameter: number - groupLabelVerticalPadding: number - rolloutDuration: number - pullbackDuration: number - fadeDuration: number - groupExposureZoomMargin: number - zoomMouseWheelDuration: number - openCloseDuration: number - dataObject: { - groups: Array - } - // eslint-disable-next-line no-use-before-define - titleBarDecorator: FoamTitleBarDecorator - // eslint-disable-next-line no-use-before-define - groupColorDecorator: FoamGroupColorDecorator - // eslint-disable-next-line no-use-before-define - onGroupClick: FoamGroupEvent - // eslint-disable-next-line no-use-before-define - onGroupDoubleClick: FoamGroupEvent - // eslint-disable-next-line no-use-before-define - onGroupMouseWheel: FoamGroupEvent - // eslint-disable-next-line no-use-before-define - onGroupHover: FoamGroupEvent - } - - interface Properties { - attribution: boolean - description: boolean - hasChildren: boolean - revealed: boolean - parent: FoamDataObject - } - - export abstract class FoamContext { - zoom(group: FoamDataObject): void - resize(): void - dispose(): void - get(): T & Properties - get(prop: string): T & Properties | undefined - get(prop: string, ...args: unknown[]): T & Properties | undefined - set(options: Partial) - set(prop: T, value?: FoamTreeOptions[T]) - } - - export interface TitleBarDecoratorVariables { - titleBarText: string - titleBarShown: boolean - titleBarMaxFontSize: number - } - - interface RGBGroupColorDecoratoVariables { - model: 'rgb' | 'rgba' - r: number - g: number - b: number - } - - interface HLSGroupColorDecoratoVariables { - model: 'hsla' | 'hsl' - h: number - s: number - l: number - } - - export type GroupColorDecoratoVariables = (RGBGroupColorDecoratoVariables | HLSGroupColorDecoratoVariables) & { - a?: number - } - - export interface GroupColorVariables { - groupColor?: GroupColorDecoratoVariables - labelColor?: 'auto' - } - - export type FoamTitleBarDecorator = ( - this: FoamContext, - options: FoamTreeOptions, - properties: any, - variables: TitleBarDecoratorVariables - ) => void - - export type FoamGroupColorDecorator = ( - this: FoamContext, - options: FoamTreeOptions, - properties: any, - variables: GroupColorVariables - ) => void - - export interface FoamEventObject { - type: 'click' | 'dragstart' - group: FoamDataObject - topmostClosedGroup: FoamDataObject - bottommostOpenGroup: FoamDataObject - x: number - y: number - xAbsolute: number - yAbsolute: number - secondary: boolean - touches: number - scale: number - delta: number - ctrlKey: boolean - altKey: boolean - metaKey: boolean - shiftKey: boolean - preventDefault(): void - preventOriginalEventDefault(): void - allowOriginalEventDefault(): void - } - - export type FoamGroupEvent = (this: FoamContext, event: FoamEventObject) => void - - export class FoamTree extends FoamContext { - constructor(opts: Partial) - } - - export default FoamTree -} diff --git a/yarn.lock b/yarn.lock index 3c89ff9..4a7a211 100644 --- a/yarn.lock +++ b/yarn.lock @@ -312,13 +312,6 @@ __metadata: languageName: node linkType: hard -"@carrotsearch/foamtree@npm:^3.5.1": - version: 3.5.1 - resolution: "@carrotsearch/foamtree@npm:3.5.1" - checksum: 10/fb24bdede0e9891f1c3c60388f0914adf3579bc4c3b3976dd65f752ef7dc016f84be80aa4cc184452602936479ee13e56ac460838f53596c5edddc0fb79142ec - languageName: node - linkType: hard - "@dprint/darwin-arm64@npm:0.46.0": version: 0.46.0 resolution: "@dprint/darwin-arm64@npm:0.46.0" @@ -6099,7 +6092,6 @@ __metadata: version: 0.0.0-use.local resolution: "vite-bundle-analyzer@workspace:." dependencies: - "@carrotsearch/foamtree": "npm:^3.5.1" "@iconify-json/ph": "npm:^1.1.12" "@jridgewell/source-map": "npm:^0.3.6" "@jridgewell/trace-mapping": "npm:^0.3.25"