diff --git a/types/d3-random/d3-random-tests.ts b/types/d3-random/d3-random-tests.ts index 5b0586870833fe..c76d2a488b160f 100644 --- a/types/d3-random/d3-random-tests.ts +++ b/types/d3-random/d3-random-tests.ts @@ -141,7 +141,7 @@ let prngBinomial: d3Random.RandomBinomial; prngBinomial = d3Random.randomBinomial; prngBinomial = d3Random.randomBinomial.source(seedrandom("Schroedinger's flea.")); -randomNumberGenerator = prngBinomial(0.5); +randomNumberGenerator = prngBinomial(10, 0.5); // ------------------------------------------------------------ // randomGamma diff --git a/types/d3-random/index.d.ts b/types/d3-random/index.d.ts index 62eaf44b5c3daf..d91face6949f2a 100644 --- a/types/d3-random/index.d.ts +++ b/types/d3-random/index.d.ts @@ -191,12 +191,13 @@ export const randomGeometric: RandomGeometric; */ export interface RandomBinomial extends RandomNumberGenerationSource { /** - * Returns a function for generating numbers with a geometric distribution with success probability p. - * The value p is in the range (0, 1]. + * Returns a function for generating random numbers with a binomial distribution with n the number of trials and p the success probability. + * The value p is in the range [0, 1]. * + * @param n Number of trials * @param p Success probability */ - (p: number): () => number; + (n: number, p: number): () => number; } export const randomBinomial: RandomBinomial; diff --git a/types/jquery.fancytree/index.d.ts b/types/jquery.fancytree/index.d.ts index e0ea48732a2594..7239c715d5cc87 100644 --- a/types/jquery.fancytree/index.d.ts +++ b/types/jquery.fancytree/index.d.ts @@ -300,13 +300,19 @@ declare namespace Fancytree { /** Folder nodes have different default icons and click behavior. Note: Also non-folders may have children. */ folder: boolean; /** Icon of the tree node. */ - icon: string; + icon: boolean | GlyphIcon; + /** Description used as hover popup for the node's icon. @since 2.27 */ + iconTooltip: string; /** null or type of temporarily generated system node like 'loading', or 'error'. */ statusNodeType: string; /** True if this node is loaded on demand, i.e. on first expansion. */ lazy: boolean; + /** Use isSelected(), setSelected() to access this property. */ + selected: boolean; /** Alternative description used as hover banner */ tooltip: string; + /** Node type, used with the `tree.types` map. @since 2.27 */ + type: string; /** Outer element of single nodes */ span: HTMLElement; /** Outer element of single nodes for table extension */ @@ -606,14 +612,14 @@ declare namespace Fancytree { /** Move this node to targetNode. * * @param mode 'child': append this node as last child of targetNode. - * This is the default. To be compatble with the D'n'd - * hitMode, we also accept 'over'. + * This is the default (used when `mode` is omitted). To be + * compatble with the D'n'd hitMode, we also accept 'over'. * 'before': add this node as sibling before targetNode. * 'after': add this node as sibling after targetNode. * * @param map optional callback(FancytreeNode) to allow modifcations */ - moveTo(targetNode: FancytreeNode, mode: string, map?: (node: FancytreeNode) => void): void; + moveTo(targetNode: FancytreeNode, mode?: string, map?: (node: FancytreeNode) => void): void; /** Set focus relative to this node and optionally activate. * @@ -638,8 +644,8 @@ declare namespace Fancytree { */ removeClass(className: string): void; - /** Replace this paging node with source result. */ - replaceWith(source: NodeData | NodeData[]): JQueryPromise; + /** (experimental) Replace this node with `source`. (Currently only available for paging nodes.) */ + replaceWith(source: Exclude): JQueryPromise; /** This method renders and updates all HTML markup that is required to display this node in its current state. * @@ -984,8 +990,8 @@ declare namespace Fancytree { focusOnSelect?: boolean | undefined; /** Add `id="..."` to node markup (default: true). */ generateIds?: boolean | undefined; - /** Node icon url, if only filename, please use imagePath to set the path */ - icon?: boolean | string | undefined; + /** Node icon url, if only filename, please use imagePath to set the path. May also be a callback returning the icon. */ + icon?: boolean | GlyphIcon | ((event: JQueryEventObject, data: EventData) => boolean | GlyphIcon) | undefined; /** Prefix (default: "ft_") */ idPrefix?: string | undefined; /** Path to a folder containing icons (default: null, using 'skin/' subdirectory). */ @@ -1044,8 +1050,11 @@ declare namespace Fancytree { //////////////// // EXTENSIONS // //////////////// + /** @deprecated since v2.31, use `dnd5` instead. Legacy drag-and-drop, based on jQuery UI draggable/droppable. */ + dnd?: Extensions.DragAndDrop | undefined; dnd5?: Extensions.DragAndDrop5 | undefined; filter?: Extensions.Filter | undefined; + glyph?: Extensions.Glyph | undefined; table?: Extensions.Table | undefined; /** Options for misc extensions - see docs for typings */ @@ -1083,8 +1092,11 @@ declare namespace Fancytree { namespace Extensions { interface List { + /** @deprecated since v2.31, use `dnd5` instead. */ + dnd?: DragAndDrop | undefined; dnd5?: DragAndDrop5 | undefined; filter?: Filter | undefined; + glyph?: Glyph | undefined; table?: Table | undefined; [extension: string]: unknown; } @@ -1166,6 +1178,95 @@ declare namespace Fancytree { */ [key: string]: unknown; } + /** Drop position relative to the target node, used by the `dnd` and `dnd5` extensions. */ + type HitMode = "over" | "before" | "after"; + /** Event data passed to the legacy `dnd` extension callbacks. */ + interface DragAndDropEventData extends BaseEventData { + /** The other node, e.g. the drag source if this is a drop event. `null` in `dragStart`/`dragStop`. */ + otherNode: FancytreeNode | null; + /** Drop position relative to the target node. */ + hitMode?: HitMode | undefined; + /** The shared drop marker element used by the legacy dnd extension. */ + dropMarker?: JQuery | undefined; + /** The `ui` object of the underlying jQuery UI draggable event. */ + ui: JQueryUI.DraggableEventUIParams; + /** The jQuery UI draggable widget instance. */ + draggable: JQueryUI.Draggable; + } + /** Data passed to the legacy `dnd` extension `initHelper` callback. */ + interface InitHelperData { + node: FancytreeNode; + tree: Fancytree; + originalEvent: JQueryEventObject; + ui: { helper: JQuery }; + } + /** + * Define dnd-extension (legacy, jQuery UI based) options. + * @deprecated since v2.31, use the `dnd5` (native HTML5) extension instead. + */ + interface DragAndDrop { + /** Expand nodes after n milliseconds of hovering (default: 1000). */ + autoExpandMS?: number | undefined; + /** Additional options passed to jQuery `draggable()`. */ + draggable?: JQueryUI.DraggableOptions | undefined; + /** Additional options passed to jQuery `droppable()`. */ + droppable?: JQueryUI.DroppableOptions | undefined; + /** Focus, although draggable cancels mousedown event (default: false). */ + focusOnClick?: boolean | undefined; + /** Prevent dropping nodes 'before self', etc. (default: true). */ + preventVoidMoves?: boolean | undefined; + /** Prevent dropping nodes on own descendants (default: true). */ + preventRecursiveMoves?: boolean | undefined; + /** Set draggable.revert = true if drop was rejected (default: true). */ + smartRevert?: boolean | undefined; + /** Absolute position offset for .fancytree-drop-marker. */ + dropMarkerOffsetX?: number | undefined; + /** Additional offset for drop-marker with hitMode = "before"/"after". */ + dropMarkerInsertOffsetX?: number | undefined; + /** Callback(sourceNode, data); return `true` to enable dragging this node. */ + dragStart?: ((sourceNode: FancytreeNode, data: DragAndDropEventData) => boolean) | undefined; + /** Callback(sourceNode, data). */ + dragStop?: ((sourceNode: FancytreeNode, data: DragAndDropEventData) => void) | undefined; + /** Callback(sourceNode, data). */ + initHelper?: ((sourceNode: FancytreeNode, data: InitHelperData) => void) | undefined; + /** Callback(sourceNode, data). */ + updateHelper?: ((sourceNode: FancytreeNode, data: DragAndDropEventData) => void) | undefined; + /** + * Callback(targetNode, data); return `false` to reject the drop, `true` to allow all + * positions, or a hit mode / array of hit modes to allow only those. + */ + dragEnter?: + | ((targetNode: FancytreeNode, data: DragAndDropEventData) => boolean | HitMode | HitMode[]) + | undefined; + /** Callback(targetNode, data), return false to reject the drop. */ + // eslint-disable-next-line @typescript-eslint/no-invalid-void-type + dragOver?: ((targetNode: FancytreeNode, data: DragAndDropEventData) => boolean | void) | undefined; + /** Callback(targetNode, data), return false to prevent autoExpand. */ + // eslint-disable-next-line @typescript-eslint/no-invalid-void-type + dragExpand?: ((targetNode: FancytreeNode, data: DragAndDropEventData) => boolean | void) | undefined; + /** Callback(targetNode, data). */ + dragDrop?: ((targetNode: FancytreeNode, data: DragAndDropEventData) => void) | undefined; + /** Callback(targetNode, data). */ + dragLeave?: ((targetNode: FancytreeNode, data: DragAndDropEventData) => void) | undefined; + /** + * Support misc options + */ + [key: string]: unknown; + } + /** + * Define glyph-extension options. Maps logical icon names to CSS classes, + * e.g. for Font Awesome or Bootstrap icon sets. + */ + interface Glyph { + /** Icon set preset, e.g. "awesome3", "awesome4", "bootstrap3", or "material". */ + preset?: string | null | undefined; + /** Maps icon names (e.g. `expanderClosed`, `loading`, `checkbox`) to glyph definitions. */ + map?: Record | undefined; + /** + * Support misc options + */ + [key: string]: unknown; + } /** * Define filter-extension options */ @@ -1242,7 +1343,7 @@ declare namespace Fancytree { interface NodeData { /** node text (may contain HTML tags) */ title: string; - icon?: boolean | string | undefined; + icon?: boolean | GlyphIcon | undefined; /** unique key for this node (auto-generated if omitted) */ key?: string | undefined; /** (reserved) */ @@ -1263,7 +1364,7 @@ declare namespace Fancytree { /** class names added to the node markup (separate with space) */ extraClasses?: string | undefined; /** all properties from will be copied to `node.data` */ - data?: Object | undefined; + data?: Record | undefined; /** Will be added as title attribute of the node's icon span,thus enabling a tooltip. */ iconTooltip?: string | undefined; @@ -1281,6 +1382,14 @@ declare namespace Fancytree { unselectableStatus?: boolean | undefined; } + /** A glyph definition: a CSS class string or a `{ text | html, addClass }` object. */ + type GlyphIcon = + | string + | { text?: string | undefined; html?: string | undefined; addClass?: string | undefined }; + + /** A `glyph.map` entry: a glyph definition or a callback returning one. */ + type GlyphMapEntry = GlyphIcon | ((node: FancytreeNode, span: HTMLElement, type: string) => GlyphIcon); + /** Node data, or a descriptor of how to load it: inline data, a URL string, * `$.ajax` options (with a required `url`), or a promise resolving to node data. */ type SourceData = @@ -1372,6 +1481,12 @@ declare namespace Fancytree { /** Add Fancytree extension definition to the list of globally available extensions. */ registerExtension(definition: Object): void; + /** + * Set the expander, checkbox, or node icon HTML (used by extensions to render glyph icons). + * `icon` is either a CSS class string or an object describing the glyph. + */ + setSpanIcon(span: Element | JQuery, baseClass: string, icon: GlyphIcon): void; + unescapeHtml(s: string): string; warn(msg: string): void; diff --git a/types/jquery.fancytree/jquery.fancytree-tests.ts b/types/jquery.fancytree/jquery.fancytree-tests.ts index 9400b43d689bf0..717ec567d2e1b3 100644 --- a/types/jquery.fancytree/jquery.fancytree-tests.ts +++ b/types/jquery.fancytree/jquery.fancytree-tests.ts @@ -288,3 +288,81 @@ const sourceFromFunction: Fancytree.FancytreeOptions = { const sourceFromFunctionPromise: Fancytree.FancytreeOptions = { source: () => $.getJSON("/api/tree"), }; + +// `icon` option/NodeData also accepts a callback. +const iconCallback: Fancytree.FancytreeOptions = { + icon: (event, data) => (data.node.isFolder() ? false : { text: "folder", addClass: "material-icons" }), +}; +activeNode.addChildren({ title: "Static icon", icon: "my-icon" }); +activeNode.addChildren({ title: "Object icon", icon: { text: "description", addClass: "material-icons" } }); + +// Node-level documented properties. +const nodeSelected: boolean = activeNode.selected; +const nodeType: string = activeNode.type; +const nodeIconTooltip: string = activeNode.iconTooltip; +const nodeIcon: boolean | Fancytree.GlyphIcon = activeNode.icon; +console.log(nodeSelected, nodeType, nodeIconTooltip, nodeIcon); + +// replaceWith accepts inline data, `$.ajax` options, or a promise — but not a URL string. +if (node) { + node.replaceWith({ url: "/api/page", cache: false }); + node.replaceWith([{ title: "More" }]); + // @ts-expect-error -- plain URL strings are not supported + node.replaceWith("/api/page"); +} + +// FancytreeStatic.setSpanIcon +$.ui.fancytree.setSpanIcon(activeNode.span, "fancytree-icon", "my-glyph"); +$.ui.fancytree.setSpanIcon($(activeNode.span), "fancytree-icon", { text: "folder", addClass: "material-icons" }); + +// Legacy (jQuery UI based) `dnd` extension. +const dndOptions: Fancytree.FancytreeOptions = { + extensions: ["dnd"], + dnd: { + autoExpandMS: 400, + preventVoidMoves: true, + preventRecursiveMoves: true, + focusOnClick: false, + dragStart: (sourceNode, data) => { + console.log(sourceNode.title, data.otherNode, data.hitMode, data.ui.helper, data.draggable); + return true; + }, + initHelper: (sourceNode, data) => { + data.ui.helper.addClass("my-drag-helper"); + }, + dragEnter: (targetNode, data) => { + console.log(targetNode.key, data.otherNode?.key); + return ["over", "before"]; + }, + dragOver: (targetNode, data) => { + data.dropMarker?.toggleClass("is-active", true); + return data.otherNode !== null; + }, + dragDrop: (targetNode, data) => { + if (data.hitMode === "over") { + data.otherNode?.moveTo(targetNode); // mode is optional; defaults to "child" + } + }, + dragStop: (sourceNode, data) => { + console.log(sourceNode, data.tree); + }, + }, +}; +console.log(iconCallback, dndOptions); + +// `glyph` extension options. +const glyphOptions: Fancytree.FancytreeOptions = { + extensions: ["glyph"], + glyph: { + preset: "awesome4", + map: { + _addClass: "fa", + expanderClosed: "fa fa-caret-right", + expanderOpen: "fa fa-caret-down", + loading: { html: "