@behindthemusictree/genre-tree-view 6.2.0 → 6.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +447 -178
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +23 -3
- package/dist/index.d.ts +23 -3
- package/dist/index.js +454 -185
- package/dist/index.js.map +1 -1
- package/dist/styles.css +104 -47
- package/package.json +4 -2
package/dist/index.d.cts
CHANGED
|
@@ -60,6 +60,8 @@ interface GenreTreeAction {
|
|
|
60
60
|
type WheelZoomMode = "always" | "modifier";
|
|
61
61
|
/** Layout of the floating zoom/pop/fit controls — see `GenreTreeProps.controlsOrientation`. */
|
|
62
62
|
type ControlsOrientation = "horizontal" | "vertical";
|
|
63
|
+
/** When the floating zoom in / zoom out / fit buttons show — see `GenreTreeProps.showZoomControls`. */
|
|
64
|
+
type ZoomControlsVisibility = "auto" | "always" | "never";
|
|
63
65
|
/** The pan/zoom view as the content-space point shown at the viewport's center plus the scale —
|
|
64
66
|
* independent of the container's pixel size, so a saved view lands on the same spot in any window. */
|
|
65
67
|
interface GenreTreeViewport {
|
|
@@ -91,6 +93,13 @@ interface GenreTreeProps {
|
|
|
91
93
|
nodes: GenreTreeNode[];
|
|
92
94
|
/** Label for the info panel's `itemCount` row (e.g. "Song count"); the library can't know what unit is counted. */
|
|
93
95
|
itemCountLabel: string;
|
|
96
|
+
/** Optional total for the current itemCount metric. When provided, node sizes use a fixed
|
|
97
|
+
* logarithmic domain from zero to this total, so filtering recalculates each node's size against
|
|
98
|
+
* the filtered total. The total must use the same metric as GenreTreeNode.itemCount. */
|
|
99
|
+
itemCountScaleMax?: number;
|
|
100
|
+
/** Full node count used to adapt maximum node/card/dot size to visualization density. Defaults
|
|
101
|
+
* to nodes.length; wheel renderers pass their complete dataset to their selected subtree. */
|
|
102
|
+
nodeCountForSizing?: number;
|
|
94
103
|
className?: string;
|
|
95
104
|
rootColor?: string;
|
|
96
105
|
orientation?: TreeOrientation;
|
|
@@ -136,6 +145,10 @@ interface GenreTreeProps {
|
|
|
136
145
|
/** Stacks the floating zoom/pop/fit controls vertically ("vertical", the default) or lays them
|
|
137
146
|
* out in a row ("horizontal"). */
|
|
138
147
|
controlsOrientation?: ControlsOrientation;
|
|
148
|
+
/** "auto" (the default) hides the zoom in / zoom out / fit buttons on touch screens
|
|
149
|
+
* (`pointer: coarse`), where pinch and pan replace them; "always" and "never" force them. The
|
|
150
|
+
* `floatingControlsLeading` content stays visible either way. */
|
|
151
|
+
showZoomControls?: ZoomControlsVisibility;
|
|
139
152
|
/** Host content rendered in the floating controls box, beside the zoom buttons ("horizontal")
|
|
140
153
|
* or above them ("vertical"); stacked above them in narrow containers. */
|
|
141
154
|
floatingControlsLeading?: ReactNode;
|
|
@@ -203,6 +216,13 @@ interface GenreTreeProps {
|
|
|
203
216
|
* initial `selectedNodeId`. Read once; later changes are ignored. Ignored when `interactive` is
|
|
204
217
|
* false and by `GenreTreeOutline`. */
|
|
205
218
|
defaultViewport?: GenreTreeViewport;
|
|
219
|
+
/** Restores a viewport silently after the target frame has measurable geometry. Change
|
|
220
|
+
* revision for each navigation, and supply its focus/selection in the same props update.
|
|
221
|
+
* User interaction supersedes pending restoration. Ignored by GenreTreeOutline. */
|
|
222
|
+
viewportRestore?: {
|
|
223
|
+
viewport: GenreTreeViewport;
|
|
224
|
+
revision: string | number;
|
|
225
|
+
};
|
|
206
226
|
/** Fired once a user-driven pan/zoom settles (drag, wheel, pinch, zoom/fit buttons, centering on
|
|
207
227
|
* a clicked node) — not for the initial fit or for applying `defaultViewport`. */
|
|
208
228
|
onViewportChange?: (viewport: GenreTreeViewport) => void;
|
|
@@ -237,7 +257,7 @@ interface GenreTreeOverlayPanel {
|
|
|
237
257
|
* Purely presentational: fetching, mutations, and popups are the consumer's responsibility,
|
|
238
258
|
* wired through the callback props.
|
|
239
259
|
*/
|
|
240
|
-
declare function GenreTree({ nodes, className, rootColor, orientation, hideRoot, playingNodeId, playState, reparentingNodeId, onPlayPause, onAddChild, onRenameRequest, onDeleteRequest, onReparentRequest, onReparent, onNodeClick, additionalActions, interactive, depthSpacingScale, showToolbar, selectedNodeId: selectedNodeIdProp, renderInfoPanelBody, onSelectedNodeChange, hideInfoPanelClose, hideInfoPanelTitle, itemCountLabel, readOnly, renderDangerZone, expanded, onExpandedChange, collapsed, hideExpandButton, overlayPanel, wheelZoom, defaultViewport, onViewportChange, controlsOrientation, floatingControlsLeading, busy, }: GenreTreeProps): react.JSX.Element;
|
|
260
|
+
declare function GenreTree({ nodes, className, rootColor, orientation, hideRoot, playingNodeId, playState, reparentingNodeId, onPlayPause, onAddChild, onRenameRequest, onDeleteRequest, onReparentRequest, onReparent, onNodeClick, additionalActions, interactive, depthSpacingScale, showToolbar, selectedNodeId: selectedNodeIdProp, renderInfoPanelBody, onSelectedNodeChange, hideInfoPanelClose, hideInfoPanelTitle, itemCountLabel, itemCountScaleMax, nodeCountForSizing, readOnly, renderDangerZone, expanded, onExpandedChange, collapsed, hideExpandButton, overlayPanel, wheelZoom, defaultViewport, viewportRestore, onViewportChange, controlsOrientation, showZoomControls, floatingControlsLeading, busy, }: GenreTreeProps): react.JSX.Element;
|
|
241
261
|
|
|
242
262
|
interface GenreTreeWheelProps extends Omit<GenreTreeProps, "nodes" | "rootColor" | "orientation"> {
|
|
243
263
|
nodes: GenreTreeNode[];
|
|
@@ -338,7 +358,7 @@ type GenreTreeWheelRadialPopCoreProps = WheelRadialPopCoreProps;
|
|
|
338
358
|
*/
|
|
339
359
|
declare function GenreTreeWheelRadialPopCore(props: GenreTreeWheelRadialPopCoreProps): react.JSX.Element;
|
|
340
360
|
|
|
341
|
-
type GenreTreeOutlineProps = Omit<GenreTreeProps, "rootColor" | "orientation" | "hideRoot" | "interactive" | "depthSpacingScale" | "wheelZoom" | "controlsOrientation" | "floatingControlsLeading" | "busy">;
|
|
361
|
+
type GenreTreeOutlineProps = Omit<GenreTreeProps, "rootColor" | "orientation" | "hideRoot" | "interactive" | "depthSpacingScale" | "wheelZoom" | "controlsOrientation" | "showZoomControls" | "floatingControlsLeading" | "busy">;
|
|
342
362
|
/**
|
|
343
363
|
* Text counterpart of `GenreTreeWheelRadialPopCore`: the same forest as nested collapsible lists
|
|
344
364
|
* (`<details>`), "Mainstream Pop" first, then every other root with its direct children split
|
|
@@ -384,4 +404,4 @@ declare function groupNodesByRoot(nodes: GenreTreeNode[]): GenreTreeRootGroup[];
|
|
|
384
404
|
*/
|
|
385
405
|
declare function isZoomableNode(nodes: readonly GenreTreeNode[], id: string): boolean;
|
|
386
406
|
|
|
387
|
-
export { type ControlsOrientation, DEFAULT_FRAME_HEIGHT, DEFAULT_FRAME_WIDTH, type FocusChangeReason, GenreTree, type GenreTreeAction, type GenreTreeNode, GenreTreeOutline, type GenreTreeOutlineProps, GenreTreeOutlineSkeleton, type GenreTreeOverlayPanel, type GenreTreePlayState, type GenreTreeProps, type GenreTreeRootGroup, GenreTreeSkeleton, type GenreTreeViewMode, GenreTreeViewSkeleton, type GenreTreeViewSkeletonProps, type GenreTreeViewport, GenreTreeWheel, type GenreTreeWheelProps, GenreTreeWheelRadial, GenreTreeWheelRadialPopCore, type GenreTreeWheelRadialPopCoreProps, type GenreTreeWheelRadialProps, GenreTreeWheelRight, type GenreTreeWheelRightProps, GenreTreeWheelSkeleton, type InfoPanelBody, type InfoPanelSections, type TreeOrientation, type WheelZoomMode, getGenreTreeColor, groupNodesByRoot, isZoomableNode };
|
|
407
|
+
export { type ControlsOrientation, DEFAULT_FRAME_HEIGHT, DEFAULT_FRAME_WIDTH, type FocusChangeReason, GenreTree, type GenreTreeAction, type GenreTreeNode, GenreTreeOutline, type GenreTreeOutlineProps, GenreTreeOutlineSkeleton, type GenreTreeOverlayPanel, type GenreTreePlayState, type GenreTreeProps, type GenreTreeRootGroup, GenreTreeSkeleton, type GenreTreeViewMode, GenreTreeViewSkeleton, type GenreTreeViewSkeletonProps, type GenreTreeViewport, GenreTreeWheel, type GenreTreeWheelProps, GenreTreeWheelRadial, GenreTreeWheelRadialPopCore, type GenreTreeWheelRadialPopCoreProps, type GenreTreeWheelRadialProps, GenreTreeWheelRight, type GenreTreeWheelRightProps, GenreTreeWheelSkeleton, type InfoPanelBody, type InfoPanelSections, type TreeOrientation, type WheelZoomMode, type ZoomControlsVisibility, getGenreTreeColor, groupNodesByRoot, isZoomableNode };
|
package/dist/index.d.ts
CHANGED
|
@@ -60,6 +60,8 @@ interface GenreTreeAction {
|
|
|
60
60
|
type WheelZoomMode = "always" | "modifier";
|
|
61
61
|
/** Layout of the floating zoom/pop/fit controls — see `GenreTreeProps.controlsOrientation`. */
|
|
62
62
|
type ControlsOrientation = "horizontal" | "vertical";
|
|
63
|
+
/** When the floating zoom in / zoom out / fit buttons show — see `GenreTreeProps.showZoomControls`. */
|
|
64
|
+
type ZoomControlsVisibility = "auto" | "always" | "never";
|
|
63
65
|
/** The pan/zoom view as the content-space point shown at the viewport's center plus the scale —
|
|
64
66
|
* independent of the container's pixel size, so a saved view lands on the same spot in any window. */
|
|
65
67
|
interface GenreTreeViewport {
|
|
@@ -91,6 +93,13 @@ interface GenreTreeProps {
|
|
|
91
93
|
nodes: GenreTreeNode[];
|
|
92
94
|
/** Label for the info panel's `itemCount` row (e.g. "Song count"); the library can't know what unit is counted. */
|
|
93
95
|
itemCountLabel: string;
|
|
96
|
+
/** Optional total for the current itemCount metric. When provided, node sizes use a fixed
|
|
97
|
+
* logarithmic domain from zero to this total, so filtering recalculates each node's size against
|
|
98
|
+
* the filtered total. The total must use the same metric as GenreTreeNode.itemCount. */
|
|
99
|
+
itemCountScaleMax?: number;
|
|
100
|
+
/** Full node count used to adapt maximum node/card/dot size to visualization density. Defaults
|
|
101
|
+
* to nodes.length; wheel renderers pass their complete dataset to their selected subtree. */
|
|
102
|
+
nodeCountForSizing?: number;
|
|
94
103
|
className?: string;
|
|
95
104
|
rootColor?: string;
|
|
96
105
|
orientation?: TreeOrientation;
|
|
@@ -136,6 +145,10 @@ interface GenreTreeProps {
|
|
|
136
145
|
/** Stacks the floating zoom/pop/fit controls vertically ("vertical", the default) or lays them
|
|
137
146
|
* out in a row ("horizontal"). */
|
|
138
147
|
controlsOrientation?: ControlsOrientation;
|
|
148
|
+
/** "auto" (the default) hides the zoom in / zoom out / fit buttons on touch screens
|
|
149
|
+
* (`pointer: coarse`), where pinch and pan replace them; "always" and "never" force them. The
|
|
150
|
+
* `floatingControlsLeading` content stays visible either way. */
|
|
151
|
+
showZoomControls?: ZoomControlsVisibility;
|
|
139
152
|
/** Host content rendered in the floating controls box, beside the zoom buttons ("horizontal")
|
|
140
153
|
* or above them ("vertical"); stacked above them in narrow containers. */
|
|
141
154
|
floatingControlsLeading?: ReactNode;
|
|
@@ -203,6 +216,13 @@ interface GenreTreeProps {
|
|
|
203
216
|
* initial `selectedNodeId`. Read once; later changes are ignored. Ignored when `interactive` is
|
|
204
217
|
* false and by `GenreTreeOutline`. */
|
|
205
218
|
defaultViewport?: GenreTreeViewport;
|
|
219
|
+
/** Restores a viewport silently after the target frame has measurable geometry. Change
|
|
220
|
+
* revision for each navigation, and supply its focus/selection in the same props update.
|
|
221
|
+
* User interaction supersedes pending restoration. Ignored by GenreTreeOutline. */
|
|
222
|
+
viewportRestore?: {
|
|
223
|
+
viewport: GenreTreeViewport;
|
|
224
|
+
revision: string | number;
|
|
225
|
+
};
|
|
206
226
|
/** Fired once a user-driven pan/zoom settles (drag, wheel, pinch, zoom/fit buttons, centering on
|
|
207
227
|
* a clicked node) — not for the initial fit or for applying `defaultViewport`. */
|
|
208
228
|
onViewportChange?: (viewport: GenreTreeViewport) => void;
|
|
@@ -237,7 +257,7 @@ interface GenreTreeOverlayPanel {
|
|
|
237
257
|
* Purely presentational: fetching, mutations, and popups are the consumer's responsibility,
|
|
238
258
|
* wired through the callback props.
|
|
239
259
|
*/
|
|
240
|
-
declare function GenreTree({ nodes, className, rootColor, orientation, hideRoot, playingNodeId, playState, reparentingNodeId, onPlayPause, onAddChild, onRenameRequest, onDeleteRequest, onReparentRequest, onReparent, onNodeClick, additionalActions, interactive, depthSpacingScale, showToolbar, selectedNodeId: selectedNodeIdProp, renderInfoPanelBody, onSelectedNodeChange, hideInfoPanelClose, hideInfoPanelTitle, itemCountLabel, readOnly, renderDangerZone, expanded, onExpandedChange, collapsed, hideExpandButton, overlayPanel, wheelZoom, defaultViewport, onViewportChange, controlsOrientation, floatingControlsLeading, busy, }: GenreTreeProps): react.JSX.Element;
|
|
260
|
+
declare function GenreTree({ nodes, className, rootColor, orientation, hideRoot, playingNodeId, playState, reparentingNodeId, onPlayPause, onAddChild, onRenameRequest, onDeleteRequest, onReparentRequest, onReparent, onNodeClick, additionalActions, interactive, depthSpacingScale, showToolbar, selectedNodeId: selectedNodeIdProp, renderInfoPanelBody, onSelectedNodeChange, hideInfoPanelClose, hideInfoPanelTitle, itemCountLabel, itemCountScaleMax, nodeCountForSizing, readOnly, renderDangerZone, expanded, onExpandedChange, collapsed, hideExpandButton, overlayPanel, wheelZoom, defaultViewport, viewportRestore, onViewportChange, controlsOrientation, showZoomControls, floatingControlsLeading, busy, }: GenreTreeProps): react.JSX.Element;
|
|
241
261
|
|
|
242
262
|
interface GenreTreeWheelProps extends Omit<GenreTreeProps, "nodes" | "rootColor" | "orientation"> {
|
|
243
263
|
nodes: GenreTreeNode[];
|
|
@@ -338,7 +358,7 @@ type GenreTreeWheelRadialPopCoreProps = WheelRadialPopCoreProps;
|
|
|
338
358
|
*/
|
|
339
359
|
declare function GenreTreeWheelRadialPopCore(props: GenreTreeWheelRadialPopCoreProps): react.JSX.Element;
|
|
340
360
|
|
|
341
|
-
type GenreTreeOutlineProps = Omit<GenreTreeProps, "rootColor" | "orientation" | "hideRoot" | "interactive" | "depthSpacingScale" | "wheelZoom" | "controlsOrientation" | "floatingControlsLeading" | "busy">;
|
|
361
|
+
type GenreTreeOutlineProps = Omit<GenreTreeProps, "rootColor" | "orientation" | "hideRoot" | "interactive" | "depthSpacingScale" | "wheelZoom" | "controlsOrientation" | "showZoomControls" | "floatingControlsLeading" | "busy">;
|
|
342
362
|
/**
|
|
343
363
|
* Text counterpart of `GenreTreeWheelRadialPopCore`: the same forest as nested collapsible lists
|
|
344
364
|
* (`<details>`), "Mainstream Pop" first, then every other root with its direct children split
|
|
@@ -384,4 +404,4 @@ declare function groupNodesByRoot(nodes: GenreTreeNode[]): GenreTreeRootGroup[];
|
|
|
384
404
|
*/
|
|
385
405
|
declare function isZoomableNode(nodes: readonly GenreTreeNode[], id: string): boolean;
|
|
386
406
|
|
|
387
|
-
export { type ControlsOrientation, DEFAULT_FRAME_HEIGHT, DEFAULT_FRAME_WIDTH, type FocusChangeReason, GenreTree, type GenreTreeAction, type GenreTreeNode, GenreTreeOutline, type GenreTreeOutlineProps, GenreTreeOutlineSkeleton, type GenreTreeOverlayPanel, type GenreTreePlayState, type GenreTreeProps, type GenreTreeRootGroup, GenreTreeSkeleton, type GenreTreeViewMode, GenreTreeViewSkeleton, type GenreTreeViewSkeletonProps, type GenreTreeViewport, GenreTreeWheel, type GenreTreeWheelProps, GenreTreeWheelRadial, GenreTreeWheelRadialPopCore, type GenreTreeWheelRadialPopCoreProps, type GenreTreeWheelRadialProps, GenreTreeWheelRight, type GenreTreeWheelRightProps, GenreTreeWheelSkeleton, type InfoPanelBody, type InfoPanelSections, type TreeOrientation, type WheelZoomMode, getGenreTreeColor, groupNodesByRoot, isZoomableNode };
|
|
407
|
+
export { type ControlsOrientation, DEFAULT_FRAME_HEIGHT, DEFAULT_FRAME_WIDTH, type FocusChangeReason, GenreTree, type GenreTreeAction, type GenreTreeNode, GenreTreeOutline, type GenreTreeOutlineProps, GenreTreeOutlineSkeleton, type GenreTreeOverlayPanel, type GenreTreePlayState, type GenreTreeProps, type GenreTreeRootGroup, GenreTreeSkeleton, type GenreTreeViewMode, GenreTreeViewSkeleton, type GenreTreeViewSkeletonProps, type GenreTreeViewport, GenreTreeWheel, type GenreTreeWheelProps, GenreTreeWheelRadial, GenreTreeWheelRadialPopCore, type GenreTreeWheelRadialPopCoreProps, type GenreTreeWheelRadialProps, GenreTreeWheelRight, type GenreTreeWheelRightProps, GenreTreeWheelSkeleton, type InfoPanelBody, type InfoPanelSections, type TreeOrientation, type WheelZoomMode, type ZoomControlsVisibility, getGenreTreeColor, groupNodesByRoot, isZoomableNode };
|