@fxhash/open-form-graph 0.0.1 → 0.0.3

package/dist/constants-BNPHdbBA.d.ts

@@ -0,0 +1,313 @@
+import { ColorTransform, Focus, HighlightStyle, MouseListener, Point, RGB, RawGraphData, RootNodeImageSources, SimNode, ThemeMode, Transform, TransformListener } from "./_types-CjgCTzqc.js";
+import { Dispatch, MutableRefObject, ReactNode } from "react";
+import * as react_jsx_runtime1 from "react/jsx-runtime";
+import * as d3_scale2 from "d3-scale";
+import { EventEmitter } from "@fxhash/utils";
+
+//#region src/_interfaces.d.ts
+interface GraphConfig {
+  debug: false;
+  nodeSize: number;
+  minClusterSize: number;
+  maxClusterSize: number;
+  minZoom: number;
+  maxZoom: number;
+  theme: {
+    dark: [number, number, number];
+    light: [number, number, number];
+  };
+}
+//#endregion
+//#region src/util/color.d.ts
+interface ColorHandler {
+  (arg?: number): string;
+  (arg: ColorTransform): ColorHandler;
+  rgb: RGB;
+}
+/**
+ * Some utility functions to handle colors
+ */
+declare function color(rgb: RGB): ColorHandler;
+/**
+ * Dims a color to white or black
+ * @param color An array of 3 numbers representing RGB values (0-255)
+ * @param dimFactor A value between 0 and 1 where 0 is completely black and 1 is the original color
+ * @returns A new array with the dimmed RGB values
+ */
+declare function dim(factor?: number, white?: boolean): ColorTransform;
+//#endregion
+//#region src/sim/TransformCanvas.d.ts
+declare class TransformCanvas {
+  private canvas;
+  private transform;
+  private targetTransform;
+  private isAnimating;
+  private animationFrame;
+  private focus;
+  private offset;
+  private isDragging;
+  private dragStart;
+  private hasMoved;
+  private lastPointerPos;
+  private lastMovePos;
+  private velocity;
+  private lastDragTime;
+  private momentumFrame;
+  private touchStart;
+  private pinchStartDist;
+  private pinchStartScale;
+  private noInteraction;
+  private dpr;
+  private resizeObserver;
+  private mediaQueryList;
+  onUpdate?: TransformListener;
+  onClick?: MouseListener;
+  onMove?: MouseListener;
+  constructor(canvas: HTMLCanvasElement, options?: {
+    onUpdate?: TransformListener;
+    onClick?: MouseListener;
+    onMove?: MouseListener;
+    offset?: Point;
+  });
+  private bindEventHandlers;
+  private attachEventListeners;
+  private setupDPRMonitoring;
+  private updateDPR;
+  toCanvasCoords(clientX: number, clientY: number): Point;
+  private toCSSCoords;
+  private startMomentum;
+  private applyMomentum;
+  private lerp;
+  private animateTransform;
+  private startAnimation;
+  private stopAnimation;
+  private interruptAnimation;
+  private handleWheel;
+  private handleMouseDown;
+  private handleMouseMove;
+  private handleMouseUp;
+  private handleCanvasClick;
+  private handleTouchStart;
+  private handleTouchMove;
+  private handleTouchEnd;
+  resetZoom(): void;
+  transformTo(update: Partial<Transform>): void;
+  getTransformationFromWorld(worldX: number, worldY: number, newScale?: number): {
+    x: number;
+    y: number;
+    scale: number;
+  };
+  transformToWorld(worldX: number, worldY: number, newScale?: number): void;
+  trackCursor(): void;
+  setNoInteraction(noInteraction: boolean): void;
+  focusOn(focus: Focus | null): void;
+  resetFocus(): void;
+  destroy(): void;
+  getTransform(): Readonly<Transform>;
+  getTargetTransform(): Readonly<Transform>;
+  getFocus(): Readonly<Focus | null>;
+  setOffset(offset: Point): void;
+}
+//#endregion
+//#region src/sim/_interfaces.d.ts
+interface IOpenGraphSimulation {
+  width: number;
+  height: number;
+  config: GraphConfig;
+  rootImageSources: RootNodeImageSources;
+  canvas: HTMLCanvasElement;
+  theme: ThemeMode;
+  emitter: OpenGraphEventEmitter;
+  selectedNode: SimNode | null;
+  hoveredNode: SimNode | null;
+  highlights: HighlightStyle[];
+  transformCanvas: TransformCanvas;
+  initialize(data: RawGraphData, rootId: string): void;
+  restart(): void;
+  resize(width: number, height: number): void;
+  setTheme(theme: ThemeMode): void;
+  setHideThumbnails(hide: boolean): void;
+  setSelectedNode(node: SimNode | null): void;
+  setHighlights(highlights: HighlightStyle[]): void;
+  setNoInteraction(noInteraction: boolean): void;
+  getNodeById(nodeId: string): SimNode | null;
+  getNodeScreenPosition(node: SimNode): {
+    x: number;
+    y: number;
+  };
+  getNodeSize(nodeId: string): number;
+  destroy(): void;
+}
+type OpenGraphEventsTypemap = {
+  "transform-changed": Transform;
+  "hovered-node-changed": SimNode | null;
+  "selected-node-changed": SimNode | null;
+  draw: IOpenGraphSimulation;
+};
+declare class OpenGraphEventEmitter extends EventEmitter<OpenGraphEventsTypemap> {}
+//#endregion
+//#region src/sim/OpenGraphSimulation.d.ts
+interface OpenGraphSimulationProps {
+  width: number;
+  height: number;
+  config?: GraphConfig;
+  rootImageSources?: RootNodeImageSources;
+  canvas: HTMLCanvasElement;
+  theme?: ThemeMode;
+  loadNodeImage?: (node: SimNode) => Promise<string | undefined>;
+  translate?: {
+    x: number;
+    y: number;
+  };
+  lockedNodeId?: string;
+  highlights?: HighlightStyle[];
+}
+declare class OpenGraphSimulation implements IOpenGraphSimulation {
+  width: number;
+  height: number;
+  config: GraphConfig;
+  rootImageSources: RootNodeImageSources;
+  canvas: HTMLCanvasElement;
+  transformCanvas: TransformCanvas;
+  theme: ThemeMode;
+  private rawData?;
+  emitter: OpenGraphEventEmitter;
+  private translate;
+  private data;
+  private prunedData;
+  private subGraph;
+  private rootId;
+  private simulation;
+  private clusterSizeRange;
+  private maxDepth;
+  private isTicking;
+  private tickCount;
+  private loadNodeImage?;
+  private imageCache;
+  private rootImages;
+  private hideThumbnails;
+  private noInteraction;
+  lockedNodeId?: string;
+  selectedNode: SimNode | null;
+  hoveredNode: SimNode | null;
+  highlights: HighlightStyle[];
+  private renderLayers;
+  constructor(props: OpenGraphSimulationProps);
+  private get center();
+  private get origin();
+  private getNodeAtPosition;
+  getNodeScreenPosition: (node: SimNode) => {
+    x: number;
+    y: number;
+  };
+  getNodeCanvasPosition: (node: SimNode) => {
+    x: number;
+    y: number;
+  };
+  screenToWorld(_x: number, _y: number): {
+    x: number;
+    y: number;
+  };
+  worldToScreen(worldX: number, worldY: number): {
+    x: number;
+    y: number;
+  };
+  handleClick: (x: number, y: number) => void;
+  handleClickNode: (node: SimNode | null, options?: {
+    noToggle?: boolean;
+    triggerFocus?: boolean;
+  }) => void;
+  updateScene: () => void;
+  handleMove: (x: number, y: number) => void;
+  handleTransform: (t: Transform) => void;
+  updateHighlights: () => void;
+  initialize: (data: RawGraphData, rootId: string) => void;
+  get lockedNode(): SimNode | null;
+  triggerSelected: (triggerFocus?: boolean) => void;
+  restart: (alpha?: number) => void;
+  get rootNode(): SimNode | null;
+  handleTick: () => void;
+  setTranslate({
+    x,
+    y
+  }: {
+    x: number;
+    y: number;
+  }): void;
+  get visiblityScale(): d3_scale2.ScaleLogarithmic<number, number, never>;
+  get color(): ColorHandler;
+  get colorContrast(): ColorHandler;
+  getNodeSize: (nodeId: string) => number;
+  private updateRenderLayers;
+  private renderLink;
+  private renderNode;
+  private renderSessionNode;
+  private renderRootNode;
+  private renderCollapsedNode;
+  private renderExpandedNode;
+  onDraw: () => void;
+  private drawDebug;
+  private drawDebugDepthCircles;
+  private onEnd;
+  private loadNodeImages;
+  destroy: () => void;
+  resize: (width: number, height: number) => void;
+  setTheme: (theme: ThemeMode) => void;
+  setHideThumbnails: (hide: boolean) => void;
+  setSelectedNode: (node: SimNode | null) => void;
+  private _highlightHash?;
+  setHighlights: (highlights: HighlightStyle[]) => void;
+  setNoInteraction: (noInteraction: boolean) => void;
+  getNodeById: (nodeId: string) => SimNode | null;
+  setLockedNodeId: (nodeId?: string | null) => void;
+  handleClickDebug: (x: number, y: number) => void;
+  circles: Array<Point>;
+  onDrawDebug: () => void;
+}
+//#endregion
+//#region src/context/provider.d.ts
+interface OpenFormGraphProviderProps {
+  rootId: string;
+  rootImageSources: RootNodeImageSources;
+  theme: ThemeMode;
+  children: ReactNode;
+  config?: GraphConfig;
+  data: RawGraphData;
+  onSelectedNodeChange?: (node: SimNode | null) => void;
+  onHoveredNodeChange?: (node: SimNode | null) => void;
+  lockedNodeId?: string;
+}
+interface OpenFormGraphApi {
+  rootId: string;
+  rootImageSources: RootNodeImageSources;
+  setSelectedNode: Dispatch<SimNode | null>;
+  setHoveredNode: Dispatch<SimNode | null>;
+  theme: ThemeMode;
+  hideThumbnails: boolean;
+  setHideThumbnails: Dispatch<boolean>;
+  config: GraphConfig;
+  data: RawGraphData;
+  simulation: MutableRefObject<OpenGraphSimulation | null>;
+  selectedNode: SimNode | null;
+  hoveredNode: SimNode | null;
+  setSelectedNodeById: (nodeId: string) => void;
+  lockedNodeId?: string;
+}
+declare function OpenFormGraphProvider({
+  theme,
+  rootId,
+  children,
+  rootImageSources,
+  config,
+  data,
+  lockedNodeId
+}: OpenFormGraphProviderProps): react_jsx_runtime1.JSX.Element;
+declare function useOpenFormGraph(): OpenFormGraphApi;
+//#endregion
+//#region src/context/constants.d.ts
+declare const VOID_ROOT_ID = "void-root";
+declare const VOID_DETACH_ID = "void-detach";
+declare const DEFAULT_GRAPH_CONFIG: GraphConfig;
+//#endregion
+export { ColorHandler, DEFAULT_GRAPH_CONFIG as DEFAULT_GRAPH_CONFIG$1, GraphConfig, IOpenGraphSimulation, OpenFormGraphApi, OpenFormGraphProvider as OpenFormGraphProvider$1, OpenGraphEventEmitter as OpenGraphEventEmitter$1, OpenGraphEventsTypemap, OpenGraphSimulation as OpenGraphSimulation$1, TransformCanvas as TransformCanvas$1, VOID_DETACH_ID as VOID_DETACH_ID$1, VOID_ROOT_ID as VOID_ROOT_ID$1, color as color$1, dim as dim$1, useOpenFormGraph as useOpenFormGraph$1 };
+//# sourceMappingURL=constants-BNPHdbBA.d.ts.map

package/dist/index.d.ts

@@ -1,139 +1,131 @@
-import { ForceGraphMethods } from 'react-force-graph-2d';
-import { ForceGraphMethods as ForceGraphMethods$1 } from 'react-force-graph-3d';
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ReactNode } from 'react';
+import { ColorTransform, CustomHighlight, Focus, GraphData, HighlightStyle, Link, MouseListener, NestedRawNode, Node, NodeState, Point, RGB, RawGraphData, RawLink, RawNode, RootNodeImageSources, SimLink, SimNode, SimpleHighlight, ThemeMode, Transform, TransformListener } from "./_types-CjgCTzqc.js";
+import { OpenFormGraph$1 as OpenFormGraph } from "./OpenFormGraph-CdcWNN86.js";
+import { ColorHandler, DEFAULT_GRAPH_CONFIG$1 as DEFAULT_GRAPH_CONFIG, GraphConfig, IOpenGraphSimulation, OpenFormGraphApi, OpenFormGraphProvider$1 as OpenFormGraphProvider, OpenGraphEventEmitter$1 as OpenGraphEventEmitter, OpenGraphEventsTypemap, OpenGraphSimulation$1 as OpenGraphSimulation, TransformCanvas$1 as TransformCanvas, VOID_DETACH_ID$1 as VOID_DETACH_ID, VOID_ROOT_ID$1 as VOID_ROOT_ID, color$1 as color, dim$1 as dim, useOpenFormGraph$1 as useOpenFormGraph } from "./constants-BNPHdbBA.js";
+import * as d3_force5 from "d3-force";
 
-type RawNode = {
-    id: string;
-    label?: string;
-    imgSrc?: string;
-};
-type RawLink = {
-    source: string;
-    target: string;
-};
-type Link = {
-    source: Node;
-    target: Node;
-};
-type Node = {
-    id: string;
-    collapsed: boolean;
-    hide: boolean;
-    clusterSize: number;
-    level?: number;
-    childLinks: Link[];
-    image?: HTMLImageElement;
-} & RawNode;
-type RawGraphData = {
-    nodes: RawNode[];
-    links: RawLink[];
-};
-type GraphData = {
-    nodes: Node[];
-    links: Link[];
-};
-type RGB = [number, number, number];
-type ColorTransform = (rgb: RGB) => RGB;
-
-interface GraphConfig {
-    debug: false;
-    nodeSize: number;
-    minClusterSize: number;
-    maxClusterSize: number;
-    minZoom: number;
-    maxZoom: number;
-    focusPadding: number;
-    minDagLevelDistance: number;
-    maxDagLevelDistance: number;
-    theme: {
-        dark: [number, number, number];
-        light: [number, number, number];
-    };
-}
-interface LayoutConfig {
-    velocityDecay: number;
-    alphaDecay: number;
-    alphaMin: number;
-    dagLevelDistance: number;
-}
-type _ForceGraphMethods = ForceGraphMethods<Node, Link> | ForceGraphMethods$1<Node, Link>;
-interface OpenFormGraphApi {
-    ref: React.MutableRefObject<_ForceGraphMethods | undefined>;
-    rootId: string;
-    data: GraphData;
-    onClickNode: (nodeId: string) => void;
-    hasNodeChildren: (nodeId: string) => boolean;
-    clusterSizeRange: [number, number];
-    graphLevelRange: [number, number];
-    setLayoutConfig: React.Dispatch<React.SetStateAction<LayoutConfig>>;
-    layoutConfig: LayoutConfig;
-    selectedNode: Node | null;
-    selectedNodeId: string | null;
-    setSelectedNodeId: (node: string | null) => void;
-    highlights: GraphData;
-    theme: "dark" | "light";
-    setTheme: (theme: "dark" | "light") => void;
-    config: GraphConfig;
-    setConfig: React.Dispatch<React.SetStateAction<GraphConfig>>;
-    getNodeSize: (nodeId: string) => number;
-    getNodeForce: (nodeId: string) => number;
-    search: (startNodeId: string, rootId: string) => {
-        nodes: Node[];
-        links: Link[];
-    };
-}
-
-interface ProjectGraphProps$1 {
-    width: number;
-    height: number;
-}
-declare function OpenFormGraph(props: ProjectGraphProps$1): react_jsx_runtime.JSX.Element;
-
-interface ProjectGraphProps {
-    width: number;
-    height: number;
-}
-declare function OpenFormGraph3D(props: ProjectGraphProps): react_jsx_runtime.JSX.Element;
-
-interface OpenFormGraphProviderProps {
-    config?: Partial<GraphConfig>;
-    theme: "dark" | "light";
-    children: ReactNode;
-    data: {
-        nodes: RawNode[];
-        links: RawLink[];
-    };
-    rootId: string;
-}
-declare function OpenFormGraphProvider({ config, theme, data, rootId: _rootId, children, }: OpenFormGraphProviderProps): react_jsx_runtime.JSX.Element;
-declare function useOpenFormGraph(): OpenFormGraphApi;
-
-declare const VOID_ROOT_ID = "void-root";
-declare const DEFAULT_GRAPH_CONFIG: GraphConfig;
+//#region src/util/canvas.d.ts
 
-declare function normalize(val: number, min: number, max: number, minOut: number, maxOut: number): number;
-
-interface ColorHandler {
-    (arg?: number): string;
-    (arg: ColorTransform): ColorHandler;
-    rgb: RGB;
-}
-declare function color(rgb: RGB): ColorHandler;
 /**
- * Dims a color to white or black
- * @param color An array of 3 numbers representing RGB values (0-255)
- * @param dimFactor A value between 0 and 1 where 0 is completely black and 1 is the original color
- * @returns A new array with the dimmed RGB values
+ * draws a circle on the canvas
+ * @param ctx - The canvas rendering context
+ * @param x - The x-coordinate of the circle's center
+ * @param y - The y-coordinate of the circle's center
+ * @param radius - The radius of the circle (default is 5)
+ * @param options - Optional parameters for styling the circle
+ * @param options.fill - Whether to fill the circle (default is true)
+ * @param options.fillStyle - The fill color of the circle
+ * @param options.stroke - Whether to stroke the circle (default is false)
+ * @param options.strokeStyle - The stroke color of the circle
+ * @param options.lineWidth - The width of the stroke (default is 0.2)
+ * @returns void
  */
-declare function dim(factor?: number, white?: boolean): ColorTransform;
-
+declare function circle(ctx: CanvasRenderingContext2D, x: number, y: number, radius?: number, options?: {
+  fill?: boolean;
+  fillStyle?: string;
+  stroke?: boolean;
+  strokeStyle?: string;
+  lineWidth?: number;
+}): void;
+/**
+ * draws a rectangle on the canvas
+ * @param ctx - The canvas rendering context
+ * @param x - The x-coordinate of the rectangle's top-left corner
+ * @param y - The y-coordinate of the rectangle's top-left corner
+ * @param width - The width of the rectangle
+ * @param height - The height of the rectangle
+ * @param options - Optional parameters for styling the rectangle
+ * @param options.fill - Whether to fill the rectangle (default is true)
+ * @param options.fillStyle - The fill color of the rectangle
+ * @param options.stroke - Whether to stroke the rectangle (default is false)
+ * @param options.strokeStyle - The stroke color of the rectangle
+ * @param options.lineWidth - The width of the stroke (default is 0.2)
+ * @param options.borderRadius - The radius of the corners (default is 0)
+ * @returns void
+ */
+declare function rect(ctx: CanvasRenderingContext2D, x: number, y: number, width: number, height: number, options?: {
+  fill?: boolean;
+  fillStyle?: string;
+  stroke?: boolean;
+  strokeStyle?: string;
+  lineWidth?: number;
+  borderRadius?: number;
+}): void;
+/**
+ * draws an image on the canvas with optional border radius and opacity
+ * @param ctx - The canvas rendering context
+ * @param image - The HTMLImageElement to draw
+ * @param x - The x-coordinate of the image's top-left corner
+ * @param y - The y-coordinate of the image's top-left corner
+ * @param width - The width of the image
+ * @param height - The height of the image
+ * @param borderRadius - The radius of the corners (default is 0)
+ * @param opacity - The opacity of the image (default is 1.0)
+ * @param bgColor - Optional background color to fill the clipped area
+ * @returns void
+ */
+declare function img(ctx: CanvasRenderingContext2D, image: HTMLImageElement, x: number, y: number, width: number, height: number, borderRadius?: number, opacity?: number, bgColor?: string): void;
+declare function hexagon(ctx: CanvasRenderingContext2D, x: number, y: number, radius: number, options?: {
+  fill?: boolean;
+  fillStyle?: string;
+  stroke?: boolean;
+  strokeStyle?: string;
+  lineWidth?: number;
+  rotation?: number;
+  borderRadius?: number;
+}): void;
+//#endregion
+//#region src/util/data.d.ts
 declare function generateTree(maxNodes: number, maxChildren: number): RawGraphData;
-declare function collectChildren(node: Node, threshold: number, visited?: Set<string>): {
-    nodes: Node[];
-    links: Link[];
+declare function getPrunedData(startId: string, nodes: SimNode[], links: SimLink[], highlights?: HighlightStyle[]): {
+  nodes: SimNode[];
+  links: d3_force5.SimulationLinkDatum<SimNode>[];
 };
-
-declare function preloadImage(url: string, ref: React.MutableRefObject<ForceGraphMethods<Node, Link> | undefined>): HTMLImageElement;
-
-export { type ColorHandler, type ColorTransform, DEFAULT_GRAPH_CONFIG, type GraphConfig, type GraphData, type LayoutConfig, type Link, type Node, OpenFormGraph, OpenFormGraph3D, type OpenFormGraphApi, OpenFormGraphProvider, type RGB, type RawGraphData, type RawLink, type RawNode, VOID_ROOT_ID, collectChildren, color, dim, generateTree, normalize, preloadImage, useOpenFormGraph };
+/**
+ * Automatically identifies root nodes and builds a nested structure
+ * @param nodes Array of raw nodes
+ * @param links Array of links between nodes
+ * @returns Array of nested nodes starting from identified roots
+ */
+declare function buildTreeFromGraphData(nodes: RawNode[], links: RawLink[]): NestedRawNode<RawNode>[];
+/**
+ * Recursively retrieves all parents of a node from a graph data structure
+ * @param {string} nodeHash - The hash of the node to find parents for
+ * @param {RawNode[]} nodes - Array of nodes in the graph
+ * @param {RawLink[]} links - Array of links connecting the nodes
+ * @returns {RawNode[]} - Array of parent nodes
+ */
+declare function searchParents(nodeHash: string, nodes: RawNode[], links: RawLink[]): RawNode[];
+//#endregion
+//#region src/util/graph.d.ts
+declare function getNodeId(n: any): any;
+declare function getParents(id: string, links: SimLink[]): string[];
+declare function getAllParentsUntil(nodeId: string, links: SimLink[], stopAtId: string): string[];
+declare function getChildren(id: string, links: SimLink[]): string[];
+declare function getClusterSize(id: string, links: RawLink[]): number;
+declare function getNodeDepth(id: string, links: RawLink[]): number;
+declare function getRootParent(id: string, links: RawLink[], stop?: string): string | null;
+declare function hasOnlyLeafs(id: string, links: RawLink[]): boolean;
+declare function getNodeSubgraph(nodeId: string, nodes: SimNode[], links: SimLink[], rootId: string): {
+  nodes: SimNode[];
+  links: SimLink[];
+};
+//#endregion
+//#region src/util/img.d.ts
+declare function loadHTMLImageElement(src: string): Promise<HTMLImageElement>;
+//#endregion
+//#region src/util/highlights.d.ts
+declare const red: RGB;
+declare class Highlight {
+  static owner: (id: string) => CustomHighlight;
+  static primary: (id: string) => CustomHighlight;
+  static evolved: (id: string) => CustomHighlight;
+  static minted: (id: string) => CustomHighlight;
+}
+//#endregion
+//#region src/util/types.d.ts
+declare function isSimNode(node: SimNode | string | number): node is SimNode;
+declare function isSimLink(link: SimLink): link is SimLink;
+declare function isCustomHighlight(highlight: CustomHighlight | SimpleHighlight): highlight is CustomHighlight;
+//#endregion
+export { ColorHandler, ColorTransform, CustomHighlight, DEFAULT_GRAPH_CONFIG, Focus, GraphConfig, GraphData, Highlight, HighlightStyle, IOpenGraphSimulation, Link, MouseListener, NestedRawNode, Node, NodeState, OpenFormGraph, OpenFormGraphApi, OpenFormGraphProvider, OpenGraphEventEmitter, OpenGraphEventsTypemap, OpenGraphSimulation, Point, RGB, RawGraphData, RawLink, RawNode, RootNodeImageSources, SimLink, SimNode, SimpleHighlight, ThemeMode, Transform, TransformCanvas, TransformListener, VOID_DETACH_ID, VOID_ROOT_ID, buildTreeFromGraphData, circle, color, dim, generateTree, getAllParentsUntil, getChildren, getClusterSize, getNodeDepth, getNodeId, getNodeSubgraph, getParents, getPrunedData, getRootParent, hasOnlyLeafs, hexagon, img, isCustomHighlight, isSimLink, isSimNode, loadHTMLImageElement, rect, red, searchParents, useOpenFormGraph };
+//# sourceMappingURL=index.d.ts.map