<< all controls

🧭 @bdh-gis/mapbox-gl-utils

公共函数

npm i @bdh-gis/mapbox-gl-utils

import { createButtonsContainer, createButtons, parseSVG, uuid } from '@bdh-gis/mapbox-gl-utils';

this.buttonsContainer = createButtonsContainer();
this.buttons = createButtons([]);
this.svg = parseSVG('');
this.id = uuid();

Options

export function createButtonsContainer(className: string): HTMLDivElement;
export function createButtons(buttons: ButtonOptions[]): HTMLButtonElement[];
export function createPanelContainer(className: string): HTMLDivElement;
export function createPanel(
  className: string,
  options: PanelOptions,
): {
  header: HTMLDivElement;
  headerTitle: HTMLDivElement;
  headerClose: HTMLDivElement;
  body: HTMLDivElement;
};
export function createPanelBodyEditRows(
  className: string,
  editRows: EditRow[],
): {
  row: HTMLDivElement;
  rowLabel: HTMLDivElement;
  rowValue: HTMLDivElement | HTMLSelectElement;
}[];
export function createPanelBodyButtonsRow(
  className: string,
  buttons: RowButton[],
): {
  row: HTMLDivElement;
  rowButtons: HTMLDivElement[];
};
export function createPanelBodyInputButtonRows(
  className: string,
  inputButtons: InputButton[],
): {
  row: HTMLDivElement;
  input: HTMLInputElement;
  button: HTMLDivElement;
}[];
export function createPanelBodyImgs(
  className: string,
  imgs: Img[],
): (
  | {
      wrapperEl: HTMLDivElement;
      imgEl: HTMLDivElement;
      labelEl: HTMLDivElement;
      deleteEl: HTMLDivElement;
    }
  | {
      wrapperEl: HTMLDivElement;
      imgEl: HTMLDivElement;
      labelEl: HTMLDivElement;
      deleteEl?: undefined;
    }
)[];
export function createPanelBodyTree(className: string, treeProps: TreeProps): HTMLDivElement;
export function createPanelBodyLegend(
  className: string,
  legendProps: LegendProps,
): {
  header: HTMLDivElement;
  headerTitle: HTMLDivElement;
  headerCheckAll: HTMLDivElement;
  headerClose: HTMLDivElement;
  body: HTMLDivElement;
  legendNodeEls: HTMLDivElement[];
};
export function parseSVG(svgString: string): SVGElement;
export function uuid(): string;
export function parseTreeDataToTreeDOM(treeProps: TreeProps, parentNode: HTMLDivElement): void;
export function updateTreenodes(
  treeNodes: TreeNode[],
  updates: {
    [key: string]: any; 
  },
): void;
export function replaceTreenode(treeNodes: TreeNode[], replace: TreeNode): void;
export function domHasClass(element: HTMLDivElement, className: string): boolean;
export function parseStrTemplate(
  str: string,
  data: {
    [key: string]: string | number;
  },
): string;
export type ButtonOptions = {
  title?: string | undefined;
  icon?: Node | undefined;
  textContent?: string | undefined;
  disabled?: boolean | undefined;
  hidden?: boolean | undefined;
  className?: string | undefined;
  onClick?: (() => void) | undefined;
};
export type PanelOptions = {
  label: string;
  close: {
    label: string;
    onClick?: () => void;
  };
};
export type EditRow = {
  label: string;
  value: string | number | undefined;
  options?: {
    value: string | number;
    label: string;
    [key: string]: any;
  }[];
  slider?: {
    min?: number;
    max?: number;
  };
  onChange?: (newValue: string) => void;
};
export type RowButton = {
  label: string;
  onClick?: () => void;
};
export type InputButton = {
  value: string;
  label: string;
  onChange?: (newValue: string) => void;
  onClick?: () => void;
};
export type Img = {
  id: string;
  label: string;
  img: string;
  active?: boolean;
  multy?: boolean;
  sources?: {
    [key: string]: mapboxgl.AnySourceData;
  };
  layers?: mapboxgl.AnyLayer[];
  exaggeration?: number;
  imgClick?: (img: Img) => void;
  deleteClick?: (img: Img) => void;
  [key: string]: any;
};
export type LegendNodeType = 'COLOR_BAR' | 'IMAGE' | 'CIRCLE' | 'LABEL' | 'LINE' | 'LINEDASH' | 'POLYGON';
export type LegendNode = {
  label: string;
  type: LegendNodeType;
  color?: string;
  borderColor?: string;
  backgroundColor?: string;
  backgroundBorderColor?: string;
  img?: string;
  isChecked?: boolean;
  [key: string]: any;
};
export type LegendProps = {
  title?: string;
  legends: LegendNode[][];
  checkType?: 'CHECKBOX' | 'DELETELINE';
  isShowCheckAll?: boolean;
  isShowClose?: boolean;
  onCheck?: (legendNode: LegendNode) => void;
  onCheckAll?: (isChecked: boolean) => void;
  onClose?: () => void;
};
export type TreeNode = {
  id: string;
  label: string;
  checked?: boolean;
  expand?: boolean;
  children?: TreeNode[];
  layers?: mapboxgl.AnyLayer[];
  [key: string]: any;
};
export type TreeProps = {
  treeData: TreeNode[];
  onCheck?: (treeNode: TreeNode) => void;
  onExpand?: (treeNode: TreeNode) => void;
  onLabelClick?: (treeNode: TreeNode) => void;
};