@king-design/vue 2.0.0-beta.0

package/components/diagram/diagram.js

@@ -0,0 +1,176 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import _Map from "@babel/runtime-corejs3/core-js/map";
+import _Set from "@babel/runtime-corejs3/core-js/set";
+import { __decorate } from "tslib";
+import { Component, createRef, provide } from 'intact-vue-next';
+import template from './diagram.vdt';
+import { createGraph } from './graph';
+import mx from './mxgraph';
+import { bind } from '../utils';
+import { DIAGRAM } from './constants';
+import { error, isNullOrUndefined } from 'intact-shared';
+var mxRubberband = mx.mxRubberband,
+    mxEvent = mx.mxEvent;
+var events = {
+  labelChanged: true,
+  selectionChanged: true
+};
+export var Diagram = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(Diagram, _Component);
+
+  function Diagram() {
+    var _context;
+
+    var _this;
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
+    _this.graph = void 0;
+    _this.cell = void 0;
+    _this.shapes = new _Map();
+    _this.lines = new _Set();
+    _this.layouts = new _Set();
+    _this.canvasRef = createRef();
+    _this.isCellSelectable = void 0;
+    _this.isCellRotatable = void 0;
+    _this.isCellMovable = void 0;
+    _this.isCellResizable = void 0;
+    _this.isCellEditable = void 0;
+    _this.isCellConnectable = void 0;
+    return _this;
+  }
+
+  var _proto = Diagram.prototype;
+
+  _proto.init = function init() {
+    provide(DIAGRAM, this);
+  };
+
+  _proto.mounted = function mounted() {
+    var _this2 = this;
+
+    var graph = this.graph = createGraph(this.canvasRef.value);
+    this.isCellSelectable = graph.isCellSelectable;
+    this.isCellRotatable = graph.isCellRotatable;
+    this.isCellMovable = graph.isCellMovable;
+    this.isCellResizable = graph.isCellResizable;
+    this.isCellEditable = graph.isCellEditable;
+    this.isCellConnectable = graph.isCellConnectable; // add label changed event
+
+    graph.addListener(mxEvent.LABEL_CHANGED, function (graph, evt) {
+      var _evt$properties = evt.properties,
+          cell = _evt$properties.cell,
+          old = _evt$properties.old,
+          value = _evt$properties.value;
+
+      _this2.trigger('labelChanged', cell, value, old);
+    });
+    graph.getSelectionModel().addListener(mxEvent.CHANGE, this.onSelectionChange);
+    this.initGraph();
+    this.cell = graph.getDefaultParent();
+    this.draw();
+  };
+
+  _proto.updated = function updated() {
+    this.draw();
+  };
+
+  _proto.beforeUnmount = function beforeUnmount() {
+    this.canvasRef.value.removeAttribute('style');
+    this.graph.destroy();
+  };
+
+  _proto.addShape = function addShape(shape) {
+    var _shape$get = shape.get(),
+        key = _shape$get.key;
+
+    var shapes = this.shapes;
+
+    if (!isNullOrUndefined(key)) {
+      if (shapes.get(key)) {
+        error("The key: [" + key + "] of [" + shape.constructor.displayName + "] is duplicate.");
+      } else {
+        shapes.set(key, shape);
+      }
+    } else {
+      shapes.set(shape.uniqueId, shape);
+    }
+  };
+
+  _proto.deleteShape = function deleteShape(shape) {
+    var _shape$get2 = shape.get(),
+        key = _shape$get2.key;
+
+    this.shapes.delete(isNullOrUndefined(key) ? shape.uniqueId : key);
+  };
+
+  _proto.addLine = function addLine(line) {
+    this.lines.add(line);
+  };
+
+  _proto.deleteLine = function deleteLine(line) {
+    this.lines.delete(line);
+  };
+
+  _proto.addLayout = function addLayout(layout) {
+    this.layouts.add(layout);
+  };
+
+  _proto.deleteLayout = function deleteLayout(layout) {
+    this.layouts.delete(layout);
+  };
+
+  _proto.onSelectionChange = function onSelectionChange() {
+    this.trigger('selectionChanged', this.graph.getSelectionCells());
+  };
+
+  _proto.initGraph = function initGraph() {
+    var _this3 = this;
+
+    var graph = this.graph;
+    graph.setEnabled(true);
+    ['selectable', 'movable', 'resizable', 'rotatable', 'editable', 'connectable'].forEach(function (item) {
+      var name = "isCell" + item[0].toUpperCase() + item.substring(1);
+
+      graph[name] = function (cell) {
+        return cell.instance && cell.instance.get(item) && _this3[name].call(graph, cell);
+      };
+    }); // this.rubberband.setEnabled(selectable);
+
+    graph.resizeContainer = true; // graph.gridSize = 0;
+  };
+
+  _proto.draw = function draw() {
+    var graph = this.graph;
+    var model = graph.model;
+    model.beginUpdate();
+
+    try {
+      this.shapes.forEach(function (shape) {
+        shape.draw();
+      }); // we render lines after all vertexes has rendered
+
+      this.lines.forEach(function (line) {
+        line.draw();
+      }); // render layout
+
+      this.layouts.forEach(function (layout) {
+        layout.draw();
+      });
+    } finally {
+      model.endUpdate();
+    }
+  };
+
+  return Diagram;
+}(Component);
+Diagram.template = template;
+Diagram.events = events;
+
+__decorate([bind], Diagram.prototype, "onSelectionChange", null);
+
+export {normalize} from 'intact-vue-next';

package/components/diagram/diagram.vdt.js

@@ -0,0 +1,25 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import { createVNode as _$cv, className as _$cn, createElementVNode as _$ce } from 'intact-vue-next';
+import { getRestProps } from '../utils';
+import { makeStyles } from './styles';
+export default function ($props, $blocks, $__proto__) {
+  var _classNameObj;
+
+  $blocks || ($blocks = {});
+  $props || ($props = {});
+  var $this = this;
+
+  var _this$get = this.get(),
+      className = _this$get.className,
+      children = _this$get.children;
+
+  var classNameObj = (_classNameObj = {
+    'k-diagram': true
+  }, _classNameObj[className] = className, _classNameObj[makeStyles()] = true, _classNameObj);
+  return _$cv('div', _extends({
+    'className': _$cn(classNameObj)
+  }, getRestProps(this)), [_$ce(2, 'div', children, 0, 'k-diagram-scheme'), _$ce(2, 'div', null, 1, 'k-diagram-canvas', null, null, this.canvasRef)]);
+}
+;
+
+export {normalize} from 'intact-vue-next';

package/components/diagram/graph.d.ts

@@ -0,0 +1,5 @@
+export declare function initStylesheet(graph: any): void;
+export declare function createGraph(container: HTMLDivElement): any;
+
+
+export {normalize} from 'intact-vue-next';

package/components/diagram/graph.js

@@ -0,0 +1,30 @@
+import mx from './mxgraph';
+import defaultStyle from './defaultStyle';
+var mxGraph = mx.mxGraph; // set style
+
+export function initStylesheet(graph) {
+  for (var key in defaultStyle) {
+    graph.getStylesheet().putCellStyle(key, defaultStyle[key]);
+  }
+}
+export function createGraph(container) {
+  var graph = new mxGraph(container);
+  initStylesheet(graph);
+  graph.setConnectable(true);
+  graph.setConnectableEdges(true);
+  graph.setDropEnabled(false);
+  graph.setPanning(false);
+  graph.setTooltips(false);
+  graph.setAllowLoops(true); // graph.allowAutoPanning = true;
+
+  graph.resetEdgesOnConnect = false;
+  graph.constrainChildren = false;
+  graph.constrainRelativeChildren = true; // Do not scroll after moving cells
+
+  graph.graphHandler.scrollOnMove = false;
+  graph.graphHandler.scaleGrid = true;
+  graph.foldingEnabled = false;
+  return graph;
+}
+
+export {normalize} from 'intact-vue-next';

package/components/diagram/index.d.ts

@@ -0,0 +1,25 @@
+export * from './diagram';
+export * from './shapes/callout';
+export * from './shapes/circle';
+export * from './shapes/document';
+export * from './shapes/ellipse';
+export * from './shapes/hexagon';
+export * from './shapes/image';
+export * from './shapes/parallelogram';
+export * from './shapes/rectangle';
+export * from './shapes/square';
+export * from './shapes/text';
+export * from './shapes/line';
+declare const DDiamond: import("misstime").ComponentConstructor<import("./shapes/shape").DShape<import("./shapes/shape").DShapeProps>>, DTriangle: import("misstime").ComponentConstructor<import("./shapes/shape").DShape<import("./shapes/shape").DShapeProps>>, DCylinder: import("misstime").ComponentConstructor<import("./shapes/shape").DShape<import("./shapes/shape").DShapeProps>>, DCloud: import("misstime").ComponentConstructor<import("./shapes/shape").DShape<import("./shapes/shape").DShapeProps>>;
+export { DDiamond, DTriangle, DCylinder, DCloud };
+export * from './layouts/layout';
+export * from './layouts/circle';
+export * from './layouts/flow';
+export * from './layouts/organic';
+export * from './layouts/partition';
+export * from './layouts/radial';
+export * from './layouts/stack';
+export * from './layouts/tree';
+
+
+export {normalize} from 'intact-vue-next';

package/components/diagram/index.js

@@ -0,0 +1,30 @@
+export * from './diagram'; // Shapes
+
+export * from './shapes/callout';
+export * from './shapes/circle';
+export * from './shapes/document';
+export * from './shapes/ellipse';
+export * from './shapes/hexagon';
+export * from './shapes/image';
+export * from './shapes/parallelogram';
+export * from './shapes/rectangle';
+export * from './shapes/square';
+export * from './shapes/text';
+export * from './shapes/line';
+import shapes from './shapes/generateShapes';
+var DDiamond = shapes.Diamond,
+    DTriangle = shapes.Triangle,
+    DCylinder = shapes.Cylinder,
+    DCloud = shapes.Cloud;
+export { DDiamond, DTriangle, DCylinder, DCloud }; // Layouts
+
+export * from './layouts/layout';
+export * from './layouts/circle';
+export * from './layouts/flow';
+export * from './layouts/organic';
+export * from './layouts/partition';
+export * from './layouts/radial';
+export * from './layouts/stack';
+export * from './layouts/tree';
+
+export {normalize} from 'intact-vue-next';

package/components/diagram/index.spec.d.ts

@@ -0,0 +1,4 @@
+export {};
+
+
+export {normalize} from 'intact-vue-next';