@king-design/intact 2.0.0-beta.0

package/components/diagram/demos/select.md

@@ -0,0 +1,233 @@
+---
+title: 图形选择联动
+order: 4
+---
+
+当图形支持选择时`selectable`时，用户选择不同的图形`Diagram`会触发`selectionChanged`事件，组件会将选择的图形以
+数组的形式传给事件回调函数，如果图形添加了`data`属性，则我们可以通过图形对象获取到该数据`shape.data`
+
+```vdt
+import {Diagram, DTreeLayout, DCircle, DLine} from 'kpc/components/diagram';
+
+<Diagram ev-selectionChanged={this.onSelect}>
+    <DTreeLayout type="vertical">
+        <DCircle v-for={this.get('nodes')}
+            key={$value.key}
+            label={$value.label}
+            selectable={$value.selectable}
+            data={$value.data}
+        />
+        <DLine v-for={this.get('lines')}
+            from={$value.from}
+            to={$value.to}
+            type="rounded"
+        />
+    </DTreeLayout>
+</Diagram>
+```
+
+```ts
+import {Message} from 'kpc';
+
+interface Props {
+    data: DataItem
+    nodes: Node[]
+    lines: Line[]
+}
+
+type DataItem = {
+    key: string
+    children?: DataItem[]
+    disabled?: boolean
+}
+
+type Node = {
+    key: string
+    label: string
+    selectable: boolean
+    data: DataItem
+}
+
+type Line = {
+    from: string
+    to: string
+}
+
+export default class extends Component<Props> {
+    static template = template;
+
+    static defaults() {
+        return {
+            data: {
+                key: 'Database',
+                children: [
+                    {
+                        key: 'Table1',
+                        children: [
+                            {
+                                key: 'Column1-1',
+                            },
+                            {
+                                key: 'Column1-2',
+                            }
+                        ]
+                     },
+                     {
+                        key: 'Table2',
+                        disabled: true,
+                        children: [
+                            {
+                                key: 'Column2-1',
+                            },
+                            {
+                                key: 'Column2-2',
+                            }
+                        ]
+                     },
+                ] 
+            },
+            nodes: [],
+            lines: [],
+        } as Props;
+    }
+
+    init() {
+        const nodes: Node[] = [];
+        const lines: Line[] = [];
+        const loop = (children: DataItem[], parent?: DataItem, disabled?: boolean) => {
+            for (let i = 0; i < children.length; i++) {
+                const data = children[i];
+
+                // if parent is disabled, disable all children
+                if (!disabled && data.disabled) disabled = true; 
+
+                nodes.push({
+                    key: data.key, 
+                    label: data.key,
+                    selectable: !disabled,
+                    data: data
+                });
+
+                // add line if it has parent
+                if (parent) {
+                    lines.push({from: parent.key, to: data.key});
+                }
+                if (data.children) {
+                    loop(data.children, data, disabled);
+                }
+            }
+        };
+        loop([this.get('data')]);
+
+        this.set({nodes, lines});
+    }
+
+    onSelect(shapes: any[]) {
+        if (!shapes.length) {
+            Message.info('You selected nothing.');
+        } else {
+            const data = shapes[0].data;
+            Message.info(`You selected ${data.key}.`);
+        }
+    }
+}
+```
+
+```angular
+import {Component} from '@angular/core';
+import Message from 'kpc-angular/components/message';
+
+@Component({
+    selector: 'app-demo',
+    template: `
+        <k-diagram (selectionChanged)="_onSelect($event)">
+            <k-d-tree-layout type="vertical">
+                <k-d-circle *ngFor="let node of nodes"
+                    [key]="node.key"
+                    [label]="node.label"
+                    [selectable]="node.selectable"
+                    [data]="node.data"
+                ></k-d-circle>
+                <k-d-line *ngFor="let line of lines"
+                    [from]="line.from"
+                    [to]="line.to"
+                    type="rounded"
+                ></k-d-line>
+            </k-d-tree-layout>
+        </k-diagram>
+    `,
+})
+export class AppDemoComponent {
+    private data = {
+        "key": "Database",
+        "children": [
+            {
+                "key": "Table1",
+                "children": [
+                    {
+                        "key": "Column1-1"
+                    },
+                    {
+                        "key": "Column1-2"
+                    }
+                ]
+            },
+            {
+                "key": "Table2",
+                "disabled": true,
+                "children": [
+                    {
+                        "key": "Column2-1"
+                    },
+                    {
+                        "key": "Column2-2"
+                    }
+                ]
+            }
+        ]
+    };
+    private nodes = [];
+    private lines = [];
+
+    _onSelect([shapes]) {
+        if (!shapes.length) {
+            Message.info('You selected nothing.');
+        } else {
+            const data = shapes[0].data;
+            Message.info(`You selected ${data.key}.`);
+        }
+    }
+
+    ngOnInit() {
+        const nodes = [];
+        const lines = [];
+        const loop = (children, parent = null, disabled = false) => {
+            for (let i = 0; i < children.length; i++) {
+                const data = children[i];
+
+                // if parent is disabled, disable all children
+                if (!disabled && data.disabled) disabled = true; 
+
+                nodes.push({
+                    key: data.key, 
+                    label: data.key,
+                    selectable: !disabled,
+                    data: data
+                });
+
+                // add line if it has parent
+                if (parent) {
+                    lines.push({from: parent.key, to: data.key});
+                }
+                if (data.children) {
+                    loop(data.children, data, disabled);
+                }
+            }
+        };
+        loop([this.data]);
+
+        this.nodes = nodes;
+        this.lines = lines;
+    }
+}
+```

package/components/diagram/demos/shape.md

@@ -0,0 +1,103 @@
+---
+title: 图形
+order: 1
+---
+
+该示例展示了所有内置的图形，并且开启了`Diagram`的一些功能，你可以拖动和连线它们，关于图形组件的属性，见API部分
+
+> `movable/resizable/ratatable`功能需要同时开启`selectable`才能生效
+
+```vdt
+import {
+    Diagram, DStackLayout,
+    DRectangle, DSquare, DCircle, DEllipse,
+    DImage, DText, DDiamond, DParallelogram,
+    DHexagon, DTriangle, DCylinder, DCloud,
+    DDocument, DCallout,
+} from 'kpc/components/diagram';
+import {Button, ButtonGroup} from 'kpc';
+
+const states = this.get('states');
+<div>
+    <ButtonGroup checkType="checkbox" v-model="selectedStates">
+        <Button v-for={states} value={$key}>
+            {$key}
+        </Button>
+    </ButtonGroup>
+    <br />
+    <Diagram>
+        <DStackLayout spacing="20" wrap="500" border="20">
+            <DRectangle {...states} /> 
+            <DSquare {...states} />
+            <DCircle {...states} />
+            <DEllipse {...states} />
+            <DImage src="https://design.ksyun.com/fonts/logo.png" {...states} />
+            <DText label="text" {...states} />
+            <DDiamond {...states} />
+            <DParallelogram {...states} />
+            <DHexagon {...states} />
+            <DTriangle {...states} />
+            <DCylinder {...states} />
+            <DCloud {...states} />
+            <DDocument {...states} />
+            <DCallout {...states} />
+        </DStackLayout>
+    </Diagram>
+</div>
+```
+
+```ts
+interface Props {
+    states: States
+    selectedStates: (keyof States)[]
+}
+
+type States = {
+    selectable: boolean
+    movable: boolean
+    connectable: boolean
+    resizable: boolean
+    rotable: boolean
+    editable: boolean
+}
+
+export default class extends Component<Props> {
+    static template = template;
+
+    static defaults() {
+        return {
+            states: {
+                selectable: false,
+                movable: false,
+                connectable: false,
+                resizable: false,
+                rotatable: false,
+                editable: false,
+            },
+            selectedStates: [],
+        }
+    }
+
+    init() {
+        this.on('$change:selectedStates', (v) => {
+            const states = {} as States;
+            for (let key in this.get('states')) {
+                states[key as keyof States] = v.indexOf(key as keyof States) > -1;
+            }
+            this.set('states', states);
+        });
+    }
+}
+```
+
+```vue-ignore
+请参考index.vdt
+```
+
+```react-ignore
+请参考index.vdt
+```
+
+```angular-ignore
+请参考index.vdt
+```

package/components/diagram/diagram.ts

@@ -0,0 +1,162 @@
+import {Component, createRef, provide, Key, ComponentConstructor} from 'intact';
+import template from './diagram.vdt';
+import {createGraph} from './graph';
+import mx from './mxgraph';
+import {bind} from '../utils';
+import {DIAGRAM} from './constants';
+import type {DShape} from './shapes/shape';
+import type {DLine} from './shapes/line';
+import type {DLayout} from './layouts/layout';
+import {error, isNullOrUndefined} from 'intact-shared';
+import type {Events} from '../types';
+
+const {mxRubberband, mxEvent} = mx;
+
+export interface DiagramProps { }
+export interface DiagramEvents {
+    labelChanged: [any, string, string]
+    selectionChanged: [any[]]
+}
+
+type StateCallback = (this: any, cell: any) => boolean;
+
+const events: Events<DiagramEvents> = {
+    labelChanged: true,
+    selectionChanged: true,
+};
+
+export class Diagram extends Component<DiagramProps, DiagramEvents> {
+    static template = template;
+    static events = events;
+
+    public graph: any;
+    public cell: any;
+    public shapes: Map<Key, DShape> = new Map();
+
+    private lines: Set<DLine> = new Set(); 
+    private layouts: Set<DLayout> = new Set();
+    private canvasRef = createRef<HTMLDivElement>();
+
+    // save the orignal function, because we will change them
+    private isCellSelectable!: StateCallback;
+    private isCellRotatable!: StateCallback;
+    private isCellMovable!: StateCallback;
+    private isCellResizable!: StateCallback;
+    private isCellEditable!: StateCallback;
+    private isCellConnectable!: StateCallback;
+
+    init() {
+        provide(DIAGRAM, this);
+    }
+
+    mounted() {
+        const 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, (graph: any, evt: any) => {
+            const {cell, old, value} = evt.properties;
+            this.trigger('labelChanged', cell, value, old);
+        });
+        graph.getSelectionModel().addListener(mxEvent.CHANGE, this.onSelectionChange);
+
+        this.initGraph();
+        this.cell = graph.getDefaultParent();
+
+        this.draw();
+    }
+
+    updated() {
+        this.draw();
+    }
+
+    beforeUnmount() {
+        this.canvasRef.value!.removeAttribute('style');
+        this.graph.destroy();
+    }
+
+    public addShape(shape: DShape) {
+        const {key} = shape.get();
+        const shapes = this.shapes;
+        if (!isNullOrUndefined(key)) {
+            if (shapes.get(key)) {
+                error(`The key: [${key}] of [${(shape.constructor as ComponentConstructor).displayName}] is duplicate.`);
+            } else {
+                shapes.set(key, shape);
+            }
+        } else {
+            shapes.set(shape.uniqueId, shape);
+        }
+    }
+
+    public deleteShape(shape: DShape) {
+        const {key} = shape.get();
+        this.shapes.delete(isNullOrUndefined(key) ? shape.uniqueId : key);
+    }
+
+    public addLine(line: DLine) {
+        this.lines.add(line);
+    }
+
+    public deleteLine(line: DLine) {
+        this.lines.delete(line);
+    }
+
+    public addLayout(layout: DLayout) {
+        this.layouts.add(layout);
+    }
+
+    public deleteLayout(layout: DLayout) {
+        this.layouts.delete(layout);
+    }
+
+    @bind
+    private onSelectionChange() {
+        this.trigger('selectionChanged', this.graph.getSelectionCells());
+    }
+
+    private initGraph() {
+        const graph = this.graph;
+
+        graph.setEnabled(true);
+        ['selectable', 'movable', 'resizable', 'rotatable', 'editable', 'connectable'].forEach(item => {
+            const name = `isCell${item[0].toUpperCase()}${item.substring(1)}`;
+            graph[name] = (cell: any) => {
+                return cell.instance && cell.instance.get(item) && this[name as 'isCellEditable'].call(graph, cell);
+            }
+        })
+        // this.rubberband.setEnabled(selectable);
+
+        graph.resizeContainer = true;
+        // graph.gridSize = 0;
+    }
+
+    private draw() {
+        const graph = this.graph;
+        const model = graph.model;
+
+        model.beginUpdate();
+        try {
+            this.shapes.forEach(shape => {
+                shape.draw();
+            });
+            // we render lines after all vertexes has rendered
+            this.lines.forEach(line => {
+                line.draw();
+            });
+
+            // render layout
+            this.layouts.forEach(layout => {
+                layout.draw();
+            });
+        } finally {
+            model.endUpdate();
+        }
+    }
+}

package/components/diagram/diagram.vdt

@@ -0,0 +1,16 @@
+import {getRestProps} from '../utils';
+import {makeStyles} from './styles';
+
+const {className, children} = this.get();
+const classNameObj = {
+    'k-diagram': true,
+    [className]: className,
+    [makeStyles()]: true,
+};
+
+<div class={classNameObj} {...getRestProps(this)}>
+    <div class="k-diagram-scheme">
+        {children}
+    </div>
+    <div class="k-diagram-canvas" ref={this.canvasRef}></div>
+</div>

package/components/diagram/graph.ts

@@ -0,0 +1,36 @@
+import mx from './mxgraph';
+import defaultStyle from './defaultStyle';
+
+const {mxGraph} = mx;
+
+// set style
+export function initStylesheet(graph: any) {
+    for (let key in defaultStyle) {
+        graph.getStylesheet().putCellStyle(key, defaultStyle[key as keyof typeof defaultStyle]);
+    }
+}
+
+export function createGraph(container: HTMLDivElement) {
+    const 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;
+}

package/components/diagram/index.md

@@ -0,0 +1,139 @@
+---
+title: 绘图
+category: 组件
+order: 7
+sidebar: doc
+---
+
+# 属性
+
+## DShape
+
+图形的通用属性
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| label | 图形标签，可以书写`html`字符串 | `String` | `Number` | `undefined` |
+| left | 相对左上角横向偏移量 | `String` | `Number` | `0` |
+| top | 相对左上角纵向偏移量 | `String` | `Number` | `0` |
+| width | 图形宽度 | `String` | `Number` | `0` |
+| height | 图形高度 | `String` | `Number` | `0` |
+| style | 指定图形的样式，该样式非`html`元素的样式，而是`svg`元素的样式，并且只支持`Object`的方式指定，不支持字符串。支持的属性可以查阅[mxGraph mxConstants][1]的文档（以`STYLE_`开头的属性) | `Object` | `undefined` |
+| strokeStyle | 定义线条样式 | `"solid"` | `"dashed"` | `"dotted"` | `"solid"` |
+| movable | 图形是否可拖动 | `Boolean` | `false` |
+| connectable | 图形是否可手动连接 | `Boolean` | `false` |
+| resizable | 图形是否可手动调整大小 | `Boolean` | `false` |
+| rotatable | 图形是否可旋转 | `Boolean` | `false` |
+| editable | 图形是否可编辑 | `Boolean` | `false` |
+| selectable | 图形是否可选择 | `Boolean` | `false` |
+| data | 附加到图形上的数据，可通过图形对象获取该数据 | `*` | `undefined` |
+
+## DRectangle
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| rounded | 定义矩形的边框圆角大小 | `Number` | `String` | `0` |
+
+## DImage
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| src | 指定图片地址 | `String` | `""` |
+
+## DLine
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| startArrow | 定义线条开始箭头 | `"none"` | `"classic"` | `"classicThin"` | `"block"` | `"blockThin"` | `"open"` | `"openThin"` | `"oval"` | `"diamond"` | `"diamondThin"` | `"none"` |
+| endArrow | 定义线条结束箭头 | `"none"` | `"classic"` | `"classicThin"` | `"block"` | `"blockThin"` | `"open"` | `"openThin"` | `"oval"` | `"diamond"` | `"diamondThin"` | `"classic"` |
+| type | 定义线条形状 | `"rounded"` | `"sharp"` | `"curved"` | `"straight"` | `"straight"` |
+| startPoint | 定义线条的起始点 | `Array<Number>` | `[0, 0]` |
+| endPoint | 定义线条的结束点 | `Array<Number>` | `[50, 0]` |
+| from | 定义线条连接的起始图形的`key`，一旦指定该属性，则`startPoint`属性便失效 | `String` | `undefined` |
+| to | 定义线条连接的结束图形的`key`，一旦指定该属性，则`endPoint`属性便失效 | `String` | `undefined` |
+| exit | 当指定了`from`时，通过该属性可以指定起始点在图形周长上的具体位置，该属性取值为数组，长度为2，每一项取值范围为`0 ~ 1` | `Array<Number>` | `undefined` |
+| entry | 当指定了`to`时，通过该属性可以指定结束点在图形周长上的具体位置，该属性取值为数组，长度为2，每一项取值范围为`0 ~ 1` | `Array<Number>` | `undefined` |
+
+## DLayout
+
+布局通用属性
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| left | 指定该布局下所有子元素横向偏移量 | `Number` &#124; `String` | `0` |
+| top | 指定该布局下所有子元素纵向偏移量 | `Number` &#124; `String` | `0` |
+
+## DStackLayout
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| spacing | 指定子元素间隔 | `Number` &#124; `String` | `0` |
+| fill | 指定子元素是否自适应父容器的宽/高 | `Boolean` | `false` |
+| type | 指定子元素排列方式 | `horizontal` &#124; `"vertical"` | `"horizontal"` |
+| resizeParent | 指定子元素是否在父元素宽/高不够的情况下撑开父元素 | `Boolean` | `false` |
+| border | 指定子元素距离父元素边框的距离，类似css中的`padding` | `Number` &#124; `String` | `0` |
+| wrap | 指定资源最大排列宽/高，超过则自动换行 | `Number` &#124; `String` | `undefined` |
+
+## DPartitionLayout
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| spacing | 指定子元素间隔 | `Number` &#124; `String` | `0` |
+| type | 指定子元素排列方式 | `horizontal` &#124; `"vertical"` | `"horizontal"` |
+| resizeVertices | 指定子元素是否自适应父元素的宽/高 | `Boolean` | `true` |
+| border | 指定子元素距离父元素边框的距离，类似css中的`padding` | `Number` &#124; `String` | `0` |
+
+## DTreeLayout
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| type | 指定已连接的子元素排列方式 | `horizontal` &#124; `"vertical"` | `"horizontal"` |
+| resizeParent | 指定子元素是否在父元素宽/高不够的情况下撑开父元素 | `Boolean` | `false` |
+| levelDistance | 指定每一层图形之间的间隔 | `Number` &#124; `String` | `30` |
+| nodeDistance | 指定同一层图形之间的间隔 | `Number` &#124; `String` | `16` |
+| groupPadding | 指定子元素距离父元素边框的距离，类似css中的`padding`，只有`resizeParent`为`true`时才生效 | `Number` &#124; `String` | `0` |
+
+## DRadialLayout
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| levelDistance | 指定每一层图形之间的间隔 | `Number` &#124; `String` | `60` |
+| nodeDistance | 指定同一层图形之间的间隔 | `Number` &#124; `String` | `16` |
+| rootx | 指定中心图形的横坐标 | `Number` &#124; `String` | `0` |
+| rooty | 指定中心图形的纵坐标 | `Number` &#124; `String` | `0` |
+
+## DFlowLayout
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| intraCellSpacing | 指定同一层图形之间的间隔 | `Number` &#124; `String` | `30` |
+| interHierarchySpacing | 指定非连接图形之间的间隔 | `Number` &#124; `String` | `30` |
+| interRankCellSpacing | 指定每一层图形之间的间隔 | `Number` &#124; `String` | `50` |
+| type | 指定已连接的子元素排列方式 | `horizontal` &#124; `"vertical"` | `"horizontal"` |
+| resizeParent | 指定子元素是否在父元素宽/高不够的情况下撑开父元素 | `Boolean` | `false` |
+| parentBorder | 指定子元素距离父元素边框的距离，类似css中的`padding`，只有`resizeParent`为`true`时才生效 | `Number` &#124; `String` | `0` |
+
+## DCircleLayout
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| x0 | 指定布局的横坐标位置 | `Number` &#124; `String` | `0` |
+| y0 | 指定布局的纵坐标位置 | `Number` &#124; `String` | `0` |
+
+## DOrganicLayout
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| forceConstant | 指定已连接图形之间的间隔 | `Number` &#124; `String` | `50` |
+
+# 事件
+
+## Diagram
+
+| 事件名 | 说明 | 参数 |
+| --- | --- | --- |
+| selectionChanged | 当`Diagram`可选择时`selectable`，选中的图形改变会触发该事件 | `cells`: 所有选中的图形 |
+| labelChanged | 当`Diagram`可编辑时`editable`，`label`改变会触发该事件 | `cell`: 当前图形；`newValue`: 改变后的值；`oldValue`：改变前的值 |
+
+
+[1]: https://jgraph.github.io/mxgraph/docs/js-api/files/util/mxConstants-js.html