How to use the @antv/util/lib/deep-mix function in @antv/util

To help you get started, we’ve selected a few @antv/util examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github antvis / G6 / src / shape / nodes / rect.ts View on Github external
update(cfg: NodeConfig, item: Item) {
    const group = item.getContainer();
    const { style: defaultStyle } = this.options;
    const size = this.getSize(cfg);
    // 下面这些属性需要覆盖默认样式与目前样式,但若在 cfg 中有指定则应该被 cfg 的相应配置覆盖。
    const strokeStyle = {
      stroke: cfg.color,
      x: -size[0] / 2,
      y: -size[1] / 2,
      width: size[0],
      height: size[1]
    };
    // 与 getShapeStyle 不同在于,update 时需要获取到当前的 style 进行融合。即新传入的配置项中没有涉及的属性,保留当前的配置。
    const keyShape = item.get('keyShape');
    const style = deepMix({}, defaultStyle, keyShape.attr(), strokeStyle, cfg.style);

    this.updateShape(cfg, item, style, false);
    this.updateLinkPoints(cfg, group);
  }
}, 'single-node');
github antvis / G6 / src / graph / controller / customGroup.ts View on Github external
public setGroupStyle(keyShape: ShapeBase, style: string | object) {
    if (!keyShape || keyShape.get('destroyed')) {
      return;
    }
    let styles = {};
    const { hover: hoverStyle, default: defaultStyle } = this.styles;
    if (isString(style)) {
      if (style === 'default') {
        styles = deepMix({}, defaultStyle);
      } else if (style === 'hover') {
        styles = deepMix({}, hoverStyle);
      }
    } else {
      styles = deepMix({}, defaultStyle, style);
    }
    // tslint:disable-next-line:forin
    for (const s in styles) {
      keyShape.attr(s, styles[s]);
    }
  }
github antvis / G6 / src / shape / nodes / circle.ts View on Github external
getShapeStyle(cfg: NodeConfig): ShapeStyle {
    const { style: defaultStyle } = this.options;
    const strokeStyle = {
      stroke: cfg.color
    };
    // 如果设置了color,则覆盖默认的stroke属性
    const style = deepMix({}, defaultStyle, strokeStyle, cfg.style);
    const size = this.getSize(cfg);
    const r = size[0] / 2;
    const styles = Object.assign({}, {
      x: 0,
      y: 0,
      r
    }, style);
    return styles;
  },
  update(cfg: NodeConfig, item: Item) {
github antvis / G6 / src / shape / nodes / triangle.ts View on Github external
update(cfg: NodeConfig, item: Item)  {
    const group = item.getContainer();
    const { style: defaultStyle } = this.options;
    const path = this.getPath(cfg);
    // 下面这些属性需要覆盖默认样式与目前样式,但若在 cfg 中有指定则应该被 cfg 的相应配置覆盖。
    const strokeStyle = {
      stroke: cfg.color,
      path
    };
    // 与 getShapeStyle 不同在于,update 时需要获取到当前的 style 进行融合。即新传入的配置项中没有涉及的属性,保留当前的配置。
    const keyShape = item.get('keyShape');
    const style = deepMix({}, defaultStyle, keyShape.attr(), strokeStyle, cfg.style);
    

    this.updateShape(cfg, item, style, true);
    this.updateLinkPoints(cfg, group);
  },
  /**
github antvis / G6 / src / shape / node.ts View on Github external
updateIcon(cfg, item) {
    const group = item.getContainer();
    const { icon: defaultIcon } = this.options;
    const icon = deepMix({}, defaultIcon, cfg.icon);
    const { show } = cfg.icon ? cfg.icon : { show: undefined };
    const iconShape = group.find(element => { return element.get('className') === `${this.type}-icon`})
    if (iconShape) { // 若原先存在 icon
      if (show || show === undefined) { // 若传入 show: true, 或没有设置,则更新原有的 icon 样式
        const iconConfig = deepMix({}, defaultIcon, iconShape.attr(), cfg.icon);
        const { width: w, height: h } = iconConfig;
        iconShape.attr({
          ...iconConfig,
          x: -w / 2,
          y: -h / 2
        });
      } else { // 若传入了 show: false 则删除原先的 icon
        iconShape.remove();
      }
    } else if (show) { // 如果原先不存在 icon,但传入了 show: true,则新增 icon
      const { width: w, height: h } = icon;
github antvis / G6 / src / shape / nodes / modelRect.ts View on Github external
drawShape(cfg: NodeConfig, group: GGroup): IShape {
    const { preRect: defaultPreRect } = this.options;
    const style = this.getShapeStyle(cfg);
    const size = this.getSize(cfg);
    const width = size[0];
    const height = size[1];

    const keyShape = group.addShape('rect', {
      attrs: style
    });

    const preRect = deepMix({}, defaultPreRect, cfg.preRect);
    const { show: preRectShow, ...preRectStyle } = preRect;
    if (preRectShow) {
      group.addShape('rect', {
        attrs: {
          x: -width / 2,
          y: -height / 2,
          height,
          ...preRectStyle
        },
        className: 'pre-rect'
      });
    }

    this.drawLogoIcon(cfg, group);

    this.drawStateIcon(cfg, group);
github antvis / G6 / src / shape / nodes / modelRect.ts View on Github external
} else {
        const cfgStyle = cfg.descriptionCfg ? cfg.descriptionCfg.style : {};
        const descriptionStyle = deepMix({}, description.attr(), cfgStyle);
        if (cfg.description) descriptionStyle.text = cfg.description;
        descriptionStyle.x = offsetX;
        description.resetMatrix()
        description.attr({
          ...descriptionStyle,
          y: 17 + paddingTop,
        })
      }
    }

    const preRectShape = group.find(element => { return element.get('className') === 'pre-rect'})
    if (preRectShape) {
      const preRect = deepMix({}, preRectShape.attr(), cfg.preRect);
      preRectShape.attr({
        ...preRect,
        x: -width / 2,
        y: -height / 2,
        height
      });
    }

    if (logoIconShape) {
      if (!show && show !== undefined) {
        logoIconShape.remove();
      } else {
        const { width: w, height: h, x, y, offset, ...logoIconStyle } = logoIcon;
        logoIconShape.attr({
          ...logoIconStyle,
          x: x || -width / 2 + w + offset,
github antvis / G6 / src / shape / nodes / diamond.ts View on Github external
drawShape(cfg: NodeConfig, group: GGroup): IShape {
    const { icon: defaultIcon } = this.options;
    const style = this.getShapeStyle(cfg);
    const icon = deepMix({}, defaultIcon, cfg.icon);

    const keyShape = group.addShape('path', {
      attrs: style
    });

    const { width: w, height: h, show } = icon;
    if (show) {
      const image = group.addShape('image', {
        attrs: {
          x: -w / 2,
          y: -h / 2,
          ...icon
        },
        className: 'diamond-icon'
      });
github antvis / G6 / src / shape / nodes / modelRect.ts View on Github external
} else {
        const { width: w, height: h, x, y, offset, ...logoIconStyle } = logoIcon;
        logoIconShape.attr({
          ...logoIconStyle,
          x: x || -width / 2 + w + offset,
          y: y || -h / 2,
          width: w,
          height: h
        });
      }
    } else if (show) {
      this.drawLogoIcon(cfg, group);
    }

    const stateIconShape = group.find(element => { return element.get('className') === 'rect-state-icon'})
    const stateIcon = deepMix({}, stateIconShape.attr(), cfg.stateIcon);
    if (stateIconShape) {
      if (!stateIcon.show && stateIcon.show !== undefined) {
        stateIconShape.remove();
      }
      const { width: w, height: h, x, y, offset, ...stateIconStyle } = stateIcon;
      stateIconShape.attr({
        ...stateIconStyle,
        x: x || width / 2 - w + offset,
        y: y || -h / 2,
        width: w,
        height: h
      });
    } else if (stateIcon.show) {
      this.drawStateIcon(cfg, group);
    }