lodash-es#assign TypeScript Examples

/**
   * @overridable 支持重写
   * 初始化边数据
   * initNodeData和setAttributes的区别在于
   * initNodeData只在节点初始化的时候调用，用于初始化节点的所有属性。
   * setAttributes除了初始化调用外，还会在properties发生变化了调用。
   */
  initEdgeData(data) {
    if (!data.properties) {
      data.properties = {};
    }

    if (!data.id) {
      // 自定义边id > 全局定义边id > 内置
      const { idGenerator } = this.graphModel;
      const globalId = idGenerator && idGenerator(data.type);
      if (globalId) data.id = globalId;
      const nodeId = this.createId();
      if (nodeId) data.id = nodeId;
    }

    assign(this, pickEdgeConfig(data));
    const { overlapMode } = this.graphModel;
    if (overlapMode === OverlapMode.INCREASE) {
      this.zIndex = data.zIndex || getZIndex();
    }
  }

/**
   * 获取被保存时返回的数据
   */
  getData(): EdgeData {
    const { x, y, value } = this.text;
    const data: EdgeData = {
      id: this.id,
      type: this.type,
      sourceNodeId: this.sourceNode.id,
      targetNodeId: this.targetNode.id,
      startPoint: Object.assign({}, this.startPoint),
      endPoint: Object.assign({}, this.endPoint),
      properties: toJS(this.properties),
    };
    if (value) {
      data.text = {
        x,
        y,
        value,
      };
    }
    if (this.graphModel.overlapMode === OverlapMode.INCREASE) {
      data.zIndex = this.zIndex;
    }
    return data;
  }

/**
   * @overridable 可以重写
   * 初始化节点数据
   * initNodeData和setAttributes的区别在于
   * initNodeData只在节点初始化的时候调用，用于初始化节点的所有属性。
   * setAttributes除了初始化调用外，还会在properties发生变化了调用。
   */
  public initNodeData(data) {
    if (!data.properties) {
      data.properties = {};
    }

    if (!data.id) {
      // 自定义节点id > 全局定义id > 内置
      const { idGenerator } = this.graphModel;
      const globalId = idGenerator && idGenerator(data.type);
      if (globalId) data.id = globalId;
      const customNodeId = this.createId();
      if (customNodeId) data.id = customNodeId;
    }

    this.formatText(data);
    assign(this, pickNodeConfig(data));
    const { overlapMode } = this.graphModel;
    if (overlapMode === OverlapMode.INCREASE) {
      this.zIndex = data.zIndex || getZIndex();
    }
  }

// 用来获取用户传入的 options，并做一些容错和异常抛出
export function get(options: Definition) {
  const { container, grid, width, height } = options;
  if (!container) {
    throw new Error('请检查 container 参数是否有效');
  }
  if (typeof width === 'string' || typeof height === 'string') {
    throw new Error('width或height不支持传入字符串，请传数字');
  }
  if (grid) {
    options.grid = assign({
      size: 20,
      type: 'dot',
      visible: true,
      config: {
        color: '#ababab',
        thickness: 1,
      },
    }, grid);
  }
  return assign({}, defaults, options);
}

@action
  updateEditConfig(config) {
    const newConfig = this.getConfigDetail(config);
    assign(this, newConfig);
  }

getConfigDetail(config) {
    const { isSilentMode, textEdit } = config;
    const conf = {};
    // false表示从静默模式恢复
    if (isSilentMode === false) {
      assign(conf, this.defaultConfig);
    }
    // 如果不传，默认undefined表示非静默模式
    if (isSilentMode === true) {
      const silentConfig = pick(SilentConfig, keys);
      // 在修改之前，
      this.defaultConfig = {
        stopZoomGraph: this.stopZoomGraph,
        stopScrollGraph: this.stopScrollGraph,
        stopMoveGraph: this.stopMoveGraph,
        adjustEdge: this.adjustEdge,
        adjustEdgeMiddle: this.adjustEdgeMiddle,
        adjustEdgeStartAndEnd: this.adjustEdgeStartAndEnd,
        adjustNodePosition: this.adjustNodePosition,
        hideAnchors: this.hideAnchors,
        hoverOutline: this.hoverOutline,
        nodeSelectedOutline: this.nodeSelectedOutline,
        edgeSelectedOutline: this.edgeSelectedOutline,
        nodeTextEdit: this.nodeTextEdit,
        edgeTextEdit: this.edgeTextEdit,
        nodeTextDraggable: this.nodeTextDraggable,
        edgeTextDraggable: this.edgeTextDraggable,
      };
      assign(conf, silentConfig);
    }
    // 如果不传，默认undefined表示允许文本编辑
    if (textEdit === false) {
      assign(conf, {
        nodeTextEdit: false,
        edgeTextEdit: false,
      });
    }
    const userConfig = pick(config, keys);
    return assign(conf, userConfig);
  }

// 设置为静默模式之前的配置，在取消静默模式后恢复
  constructor(config: EditConfigInterface) {
    assign(this, this.getConfigDetail(config));
  }

// 计算节点上下边框与其他节点的上下边框的对齐信息
  private getHorizontalSnapline(dragingNode: NodeData, nodes: BaseNodeModel[]): SnaplineInfo {
    let isShowHorizontal = false;
    let horizontalY;
    const { id } = dragingNode;
    let dragingData;
    if (id) {
      const { fakerNode } = this.graphModel;
      if (fakerNode && fakerNode.id === id) {
        dragingData = getNodeBBox(fakerNode);
      } else {
        const nodeModel = this.graphModel.getNodeModelById(id);
        dragingData = getNodeBBox(nodeModel);
      }
    }
    for (let i = 0; i < nodes.length; i++) {
      const item = nodes[i];
      // 排除当前节点
      if (item.id !== dragingNode.id) {
        const itemData = getNodeBBox(item);
        // 如果节点的最大最小Y轴坐标与节点的最大最小Y轴坐标相等，展示水平线
        if (itemData.minY === dragingData.minY
          || itemData.maxY === dragingData.minY
        ) {
          // 找到则停止循环。减少不必要的遍历
          isShowHorizontal = true;
          horizontalY = dragingData.minY;
          break;
        }
        if (itemData.minY === dragingData.maxY
          || itemData.maxY === dragingData.maxY
        ) {
          isShowHorizontal = true;
          horizontalY = dragingData.maxY;
          break;
        }
      }
    }
    return assign({ isShowHorizontal, position: { y: horizontalY } });
  }

// 计算节点左右边框与其他节点的左右边框的对齐信息
  private getVerticalSnapline(dragingNode: NodeData, nodes: BaseNodeModel[]): SnaplineInfo {
    let isShowVertical = false;
    let verticalX;
    const { id } = dragingNode;
    let dragingData;
    if (id) {
      const { fakerNode } = this.graphModel;
      if (fakerNode && fakerNode.id === id) {
        dragingData = getNodeBBox(fakerNode);
      } else {
        const nodeModel = this.graphModel.getNodeModelById(id);
        dragingData = getNodeBBox(nodeModel);
      }
    }
    for (let i = 0; i < nodes.length; i++) {
      const item = nodes[i];
      // 排除当前节点
      if (item.id !== dragingNode.id) {
        const itemData = getNodeBBox(item);
        // 如果节点的最大最小X轴坐标与节点的最大最小X轴坐标相等，展示垂直线
        if (itemData.minX === dragingData.minX
          || itemData.maxX === dragingData.minX
        ) {
          // 找到则停止循环。减少不必要的遍历
          isShowVertical = true;
          verticalX = dragingData.minX;
          break;
        }
        if (itemData.minX === dragingData.maxX
          || itemData.maxX === dragingData.maxX
        ) {
          isShowVertical = true;
          verticalX = dragingData.maxX;
          break;
        }
      }
    }
    return assign({ isShowVertical, position: { x: verticalX } });
  }

/**
   * 设置文本位置和值
   */
  @action setText(textConfig): void {
    if (textConfig) {
      assign(this.text, textConfig);
    }
  }

@action
  updateAttributes(attributes) {
    assign(this, attributes);
  }

@action
  updateAttributes(attributes) {
    assign(this, attributes);
  }