"use strict";

function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.BasicDemo = void 0;

var _react = _interopRequireWildcard(require("react"));

var _src = _interopRequireDefault(require("../../src"));

var _gridLayout = _interopRequireDefault(require("../extends/layout/gridLayout"));

require("./basic.css");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

_src.default.registerLayout('grid', _gridLayout.default);

var data = {
  nodes: [],
  edges: []
};

for (var i = 0; i < 10; i++) {
  data.nodes.push({
    id: "node" + i,
    label: "Circle" + i
  });
  data.edges.push({
    source: "node" + i,
    target: "node" + (i + 1)
  });
}

var BasicDemo = function BasicDemo() {
  var ref = _react.default.useRef(null);

  var height = window.innerHeight - 32; // demos padding

  var width = window.innerWidth - 32;
  var graph = null;
  (0, _react.useEffect)(function () {
    if (!graph) {
      graph = new _src.default.Graph({
        container: ref.current,
        width: 500,
        height: 500,
        layout: {
          type: 'grid',
          begin: [0, 0],
          preventOverlap: true,
          preventOverlapPdding: 20,
          nodeSize: 30,
          condense: false,
          rows: 5,
          cols: 5,
          sortBy: 'degree' // ??

        },
        modes: {
          default: ['zoom-canvas', //'drag-node',
          'click-select', 'activate-relations', {
            type: 'drag-canvas',
            allowDragOnItem: true
          }, {
            type: 'brush-select',
            trigger: 'ctrl',
            includeEdges: false,
            // 是否允许对该 behavior 发生。若返回 false，被操作的 item 不会被选中，不触发 'nodeselectchange' 时机事件
            shouldUpdate: function shouldUpdate(e) {
              // 当点击的节点/边/ combo 的 id 为 'id2' 时，该 item 不会被选中
              if (e.item.getModel().id === 'id2') return false;
              return true;
            }
          }, {
            type: 'create-edge',
            trigger: 'drag',
            key: 'shift',
            edgeConfig: {
              type: 'cubic',
              style: {
                stroke: '#f00',
                lineWidth: 2 // ... // 其它边样式配置

              } // ... // 其它边配置

            }
          }]
        },
        defaultNode: {
          shape: 'simple-circle',
          size: [100],
          color: '#5B8FF9',
          style: {
            fill: '#9EC9FF',
            lineWidth: 3
          },
          labelCfg: {
            style: {
              fill: '#fff',
              fontSize: 20
            }
          }
        },
        defaultEdge: {
          style: {
            stroke: '#e2e2e2'
          }
        },
        nodeStateStyles: {
          // 节点在 selected 状态下的样式，对应内置的 click-select 行为
          selected: {
            stroke: '#666',
            lineWidth: 2,
            fill: 'steelblue'
          }
        }
      });
    }

    graph.data(data);
    graph.render();
  }, []);
  return /*#__PURE__*/_react.default.createElement("div", {
    ref: ref
  });
};

exports.BasicDemo = BasicDemo;