@king-design/intact 2.0.0-beta.0

package/components/diagram/constants.ts

@@ -0,0 +1,3 @@
+export const DIAGRAM = 'DDiagram';
+export const SHAPE = 'DShape';
+export const LAYOUT = 'DLayout';

package/components/diagram/defaultStyle.ts

@@ -0,0 +1,115 @@
+const style = {
+    defaultVertex: {
+        "shape": "label",
+        "perimeter": "rectanglePerimeter",
+        "fontSize": 12,
+        "fontFamily": "Helvetica",
+        "align": "center",
+        "verticalAlign": "middle",
+        "fillColor": "#ffffff",
+        "strokeColor": "#000000",
+        "fontColor": "#000000"
+    },
+    defaultEdge: {
+        "shape": "connector",
+        "labelBackgroundColor": "#ffffff",
+        "endArrow": "classic",
+        "fontSize": 11,
+        "fontFamily": "Helvetica",
+        "align": "center",
+        "verticalAlign": "middle",
+        "rounded": 1,
+        "strokeColor": "#000000",
+        "fontColor": "#000000"
+    },
+    text: {
+        "fillColor": "none",
+        "gradientColor": "none",
+        "strokeColor": "none",
+        "align": "left",
+        "verticalAlign": "top"
+    },
+    label: {
+        "fontStyle": 1,
+        "align": "left",
+        "verticalAlign": "middle",
+        "spacing": 2,
+        "spacingLeft": 52,
+        "imageWidth": 42,
+        "imageHeight": 42,
+        "rounded": 1
+    },
+    icon: {
+        "fontStyle": 0,
+        "align": "center",
+        "verticalAlign": "top",
+        "spacing": 0,
+        "spacingLeft": 0,
+        "imageWidth": 48,
+        "imageHeight": 48,
+        "rounded": 1,
+        "imageAlign": "center",
+        "verticalLabelPosition": "bottom",
+        "spacingTop": 6,
+        "labelBackgroundColor": "#ffffff"
+    },
+    swimline: {
+        "shape": "swimlane",
+        "fontSize": 12,
+        "fontStyle": 1,
+        "startSize": 23
+    },
+    group: {
+        "verticalAlign": "top",
+        "fillColor": "none",
+        "strokeColor": "none",
+        "gradientColor": "none",
+        "pointerEvents": 0
+    },
+    ellipse: {
+        "shape": "ellipse",
+        "perimeter": "ellipsePerimeter"
+    },
+    rhombus: {
+        "shape": "rhombus",
+        "perimeter": "rhombusPerimeter"
+    },
+    triangle: {
+        "shape": "triangle",
+        "perimeter": "trianglePerimeter"
+    },
+    line: {
+        "shape": "line",
+        "strokeWidth": 4,
+        "labelBackgroundColor": "#ffffff",
+        "verticalAlign": "top",
+        "spacingTop": 8
+    },
+    image: {
+        "shape": "image",
+        "labelBackgroundColor": "white",
+        "verticalAlign": "top",
+        "verticalLabelPosition": "bottom"
+    },
+    roundImage: {
+        "shape": "image",
+        "labelBackgroundColor": "white",
+        "verticalAlign": "top",
+        "verticalLabelPosition": "bottom",
+        "perimeter": "ellipsePerimeter"
+    },
+    rhombusImage: {
+        "shape": "image",
+        "labelBackgroundColor": "white",
+        "verticalAlign": "top",
+        "verticalLabelPosition": "bottom",
+        "perimeter": "rhombusPerimeter"
+    },
+    arrow: {
+        "shape": "arrow",
+        "edgeStyle": "none",
+        "fillColor": "#ffffff"
+    },
+};
+
+export default style;

package/components/diagram/demos/basic.md

@@ -0,0 +1,48 @@
+---
+title: 基本用法
+order: 0
+---
+
+> `Diagram`及所有子组件，由于基于`mxGraph`这个庞大的库，所以没有放入索引文件`index.js`，你只能通过如下方式引入
+>
+> `import {Diagram, DRectangle} from 'kpc';`
+>
+> 而不能直接通过`kpc`引入
+>
+> `import {Diagram, DRectangle} from 'kpc';`
+> 
+> Angular下，需要另外注入`DiagramModule`
+>
+> `import {DiagramModule} from 'kpc-angular/@css/components/diagram';`
+
+`Diagram`组件暴露了3类组件
+
+1. 根组件：`Diagram`，每张图都必须以`Diagram`作为根元素
+2. 图形组件: 包括图形`DRectangle` `DCircle`等，以及线条`DLine`
+3. 布局组件：`DFlowLayout` `DTreeLayout`等以`Layout`作为后缀名的组件
+
+使用说明如下：
+
+1. 图形组件作为`Diagram`下的子孙元素，可以任意嵌套，但所有非嵌套在布局组件中的图形组件，默认都放置在`(0, 0)`
+坐标位置，即左上角；
+2. 图形组件下可以嵌套任意元素，例如：`Button` `div`，但是一旦嵌套了DOM元素，则该图形不能再设置标签`label`，
+也不能双击图形编辑标签；
+3. 图形组件的`label`属性支持任意的`html`字符串，并且支持双击编辑该`html`，不过默认情况下该功能是关闭的，需要给
+图形添加`editable`属性打开编辑功能；
+4. 线条`DLine`用于连接两个图形组件，此时你需要给图形指定一个全局唯一的`key`，然后通过`DLine`的`from`和`to`属性
+指定连接的起止位置；
+3. 布局组件下面只能嵌套图形组件，否则组件会抛出错误；
+
+```vdt
+import {Diagram, DTreeLayout, DRectangle, DCircle, DDiamond, DLine} from 'kpc/components/diagram';
+
+<Diagram>
+    <DTreeLayout type="vertical">
+        <DRectangle label="<h2>hello</h2>" key="1"></DRectangle>
+        <DDiamond key="2" label="world" />
+        <DCircle key="3" label="kpc" />
+        <DLine from="1" to="2" type="rounded" />
+        <DLine from="1" to="3" type="rounded" />
+    </DTreeLayout>
+</Diagram>
+```

package/components/diagram/demos/children.md

@@ -0,0 +1,67 @@
+---
+title: 图形中嵌套其它组件
+order: 5
+---
+
+我们可以将任意组件或DOM元素传给图形进行渲染，不过此时图形即使开启`editable`也不能编辑，另外不要给图形指定`label`
+属性，因为图形会优先展示`label`属性
+
+所有子元素将居中显示，并且不会自动撑开父容器宽高
+
+```vdt
+import {Diagram, DTreeLayout, DRectangle, DLine} from 'kpc/components/diagram';
+import {Select, Option} from 'kpc';
+
+const cities = this.get('cities');
+
+<Diagram>
+    <DTreeLayout>
+        <DRectangle key="from" strokeStyle="dashed" height="100">
+            <div class="container">
+                <div>始发站</div>
+                <Select v-model="from" fluid>
+                    <Option v-for={cities} value={$value.value}>
+                        {$value.name}
+                    </Option>
+                </Select>
+            </div>
+        </DRectangle>
+        <DRectangle key="to" strokeStyle="dashed" height="100">
+            <div class="container">
+                <div>终点站</div>
+                <Select v-model="to" fluid>
+                    <Option v-for={cities} value={$value.value}>
+                        {$value.name}
+                    </Option>
+                </Select>
+            </div>
+        </DRectangle>
+        <DLine from="from" to="to" />
+    </DTreeLayout>
+</Diagram>
+```
+
+```styl
+.container
+    padding 10px
+.k-select
+    margin-top 8px
+```
+
+```ts
+export default class extends Component {
+    static template = template;
+
+    static defaults() {
+        return {
+            cities: [
+                {name: '北京', value: 'beijing'},
+                {name: '上海', value: 'shanghai'},
+                {name: '深圳', value: 'shenzhen'},
+            ],
+            from: '',
+            to: '',
+        };
+    }
+}
+```

package/components/diagram/demos/layout.md

@@ -0,0 +1,164 @@
+---
+title: 布局
+order: 3
+---
+
+`Diagram`封装了`mxGraph`大部分布局系统，并且保持与`mxGraph`的命名一致
+
+1. `DStackLayout`: 所有子元素横向`horizontal`或者纵向`vertical`排列，该布局对所有元素生效
+2. `DPartitionLayout`: 所有元素横向`horizontal`或者纵向`vertical`等分排列，注意所有子元素
+会等分以满足父容器的宽高，该布局对所有元素生效
+3. `DTreeLayout`: 所有连接元素横向`horizontal`或者纵向`vertical`排列，不要存在循环连接，该
+布局仅对连接元素生效，所有非连接元素，放在原始位置（默认：左上角）
+4. `DRadialLayout`: 所有连接元素辐射排列，不要存在循环连接，该布局仅对连接元素生效，所有非
+连接元素，放在原始位置（默认：左上角）
+5. `DFlowLayout`: 所有连接元素横向`horizontal`或者纵向`vertical`排列，非连接元素会纵向（如
+果`type="horizontal"`）或者横向（如果`type="vertical"`）排列，该布局对连接元素和非连接都生
+效，但是排列方式不同
+6. `DCircleLayout`: 所有元素圆形排列，该布局对所有元素生效
+7. `DOrganicLayout`: 所有连接元素根据力导向排列，该布局仅对连接元素生效，非连接元素放置在
+原始位置。（该布局具有随机性）
+
+```vdt
+import {Diagram, DRectangle, DCircle, DDiamond, DHexagon, DLine} from 'kpc/components/diagram';
+import {Button, ButtonGroup, Form, FormItem, Spinner, Checkbox} from 'kpc';
+
+const Layout = this.Layout;
+const currentLayout = this.get('layouts')[this.get('layout')];
+
+<div>
+    <Form labelWidth="150">
+        <FormItem label="Layout">
+            <ButtonGroup v-model="layout" checkType="radio">
+                <Button v-for={this.get('layouts')}
+                    value={$key}
+                >{$value.Layout.displayName}</Button>
+            </ButtonGroup>
+        </FormItem>
+        <FormItem v-for={currentLayout.props} label={$key}>
+            {(() => {
+                const type = typeof $value;
+                const model = `layouts.${this.get('layout')}.props.${$key}`;
+
+                switch (type) {
+                    case 'number':
+                        return <Spinner v-model={model} />;
+                    case 'boolean':
+                        return <Checkbox v-model={model} />;
+                    case 'string':
+                        return <ButtonGroup v-model={model} checkType="radio">
+                            <Button v-for={currentLayout.Layout.typeDefs[$key]} 
+                                value={$value}
+                            >{$value}</Button>
+                        </ButtonGroup>
+                }
+            })()}
+        </FormItem>
+        <FormItem>
+            <Diagram>
+                <DRectangle width="300" height="200" strokeStyle="dotted">
+                    <Layout layout={currentLayout.Layout}
+                        props={currentLayout.props}
+                    >
+                        <DRectangle key="1" rounded="5" />
+                        <DDiamond key="2" />
+                        <DCircle key="3" />
+                        <DCircle key="4" />
+                        <DCircle key="5" />
+                        <DLine from="1" to="2" strokeStyle="dashed" type="rounded" />
+                        <DLine from="1" to="3" strokeStyle="dashed" type="rounded" />
+                    </Layout>
+                </DRectangle>
+            </Diagram>
+        </FormItem>
+    </Form>
+</div>
+```
+
+```styl
+.k-form-item
+    margin-bottom 8px
+```
+
+```ts
+import {createVNode as h, Children, ComponentConstructor} from 'intact';
+import {
+    DFlowLayout,
+    DTreeLayout,
+    DRadialLayout,
+    DStackLayout,
+    DPartitionLayout,
+    DCircleLayout,
+    DOrganicLayout,
+    DLayout,
+    DLayoutProps,
+} from 'kpc/components/diagram';
+
+type LayoutProps = {
+    layout: ComponentConstructor 
+    props: DLayoutProps
+    children: Children
+}
+
+interface Props {
+    layout: string
+}
+
+const Layout = ({layout, props, children}: LayoutProps) => {
+    return h(layout, {...props}, children);
+};
+
+export default class extends Component<Props> {
+    static template = template;
+
+    static defaults() {
+        return {
+            layout: 'tree',
+            layouts: {
+                stack: {
+                    props: {spacing: 20, fill: true, type: 'vertical', resizeParent: true, border: 10, wrap: 600},
+                    Layout: DStackLayout,
+                },
+                partition: {
+                    props: {spacing: 20, type: 'vertical', resizeVertices: true, border: 10},
+                    Layout: DPartitionLayout,
+                },
+                tree: {
+                    props: {type: 'vertical', resizeParent: true, levelDistance: 30, nodeDistance: 16, groupPadding: 10},
+                    Layout: DTreeLayout,
+                },
+                radial: {
+                    props: {levelDistance: 60, nodeDistance: 16, rootx: 10, rooty: 150},
+                    Layout: DRadialLayout,
+                },
+                flow: {
+                    props: {intraCellSpacing: 20, interHierarchySpacing: 30, interRankCellSpacing: 50, type: 'vertical', resizeParent: true, parentBorder: 10},
+                    Layout: DFlowLayout,
+                },
+                circle: {
+                    props: {x0: 0, y0: 0}, 
+                    Layout: DCircleLayout,
+                },
+                organic: {
+                    props: {forceConstant: 50},
+                    Layout: DOrganicLayout,
+                },
+            },
+        };
+    }
+
+    private Layout = Layout;
+}
+```
+
+```vue-ignore
+请参考index.vdt
+```
+
+```react-ignore
+请参考index.vdt
+```
+
+```angular-ignore
+请参考index.vdt
+```

package/components/diagram/demos/line.md

@@ -0,0 +1,154 @@
+---
+title: 线条
+order: 2
+---
+
+此示例展示线条的所有属性，需要说明的是：
+
+1. `DLine`支持`startPoint`和`endPoint`来指定线条的起止点，但是一旦设置了线条的`from`和`to`属性，它们将不再生效；
+2. `DLine`通过`from`和`to`指定连接的两个图形，但是线条具体的起止位置是根据图形的位置动态计算的，如果你需要固定
+起止位置为图形周长上的某个点，需要通过`exit`（起始位置）和`entry`（终止位置）来指定
+
+```vdt
+import {Diagram, DLine, DRectangle, DStackLayout} from 'kpc/components/diagram';
+import {Form, FormItem, Button, ButtonGroup, Slider, Checkbox} from 'kpc';
+
+const keys = ['A', 'B', 'C'];
+
+<Form>
+    <FormItem v-for={['startArrow', 'endArrow', 'type', 'strokeStyle']} label={$value}>
+        <ButtonGroup checkType="radio" v-model={$value}>
+            <Button v-for={DLine.typeDefs[$value]}
+                value={$value}
+            >{$value}</Button>
+        </ButtonGroup>
+    </FormItem>
+    <FormItem v-for={['startPoint', 'endPoint']} label={$value}>
+        <template v-for={[0, 1]} v-for-value='index'>
+            <Slider
+                value={this.get(`${$value}.${index}`)}
+                min={0}
+                max={1000}
+                isShowInput={false}
+                showTooltip
+                ev-$change:value={this.onSliderChange.bind(this, $value, index)}
+            >
+                <b:tooltip args="value">
+                    {index === 0 ? 'x: ' : 'y: '} {value}
+                </b:tooltip>
+            </Slider>
+            <br />
+        </template>
+    </FormItem>
+    <FormItem v-for={['from', 'to']} label={$value}>
+        <ButtonGroup checkType="radio" v-model={$value}>
+            <Button v-for={keys} value={$value}>{$value}</Button>
+            <Button value={null}>None</Button>
+        </ButtonGroup>
+    </FormItem>
+    <FormItem v-for={['exit', 'entry']} label={$value}>
+        <b:label>
+            <Checkbox v-model={`use${$value}`}>{$value}</Checkbox>
+        </b:label>
+        <template v-for={[0, 1]} v-for-value='index'>
+            <Slider
+                value={this.get(`${$value}.${index}`)}
+                min={0}
+                max={1}
+                step={0}
+                isShowInput={false}
+                showTooltip
+                ev-$change:value={this.onSliderChange.bind(this, $value, index)}
+                disabled={!this.get(`use${$value}`)}
+            >
+                <b:tooltip args="value">
+                    {index === 0 ? 'x: ' : 'y: '} {value}
+                </b:tooltip>
+            </Slider>
+            <br />
+        </template>
+    </FormItem>
+    <FormItem>
+        <Diagram>
+            <DStackLayout spacing="50" border="20">
+                <DRectangle v-for={keys} key={$value} label={$value} /> 
+            </DStackLayout>
+            <DLine
+                startArrow={this.get('startArrow')}
+                endArrow={this.get('endArrow')}
+                startPoint={this.get('startPoint')}
+                endPoint={this.get('endPoint')}
+                type={this.get('type')}
+                strokeStyle={this.get('strokeStyle')}
+                from={this.get('from')}
+                to={this.get('to')}
+                exit={this.get('useexit') ? this.get('exit') : null}
+                entry={this.get('useentry') ? this.get('entry') : null}
+            />
+        </Diagram>
+    </FormItem>
+</Form>
+```
+
+```styl
+.k-form-item
+    margin-bottom 8px
+.k-slider
+    width 500px
+```
+
+```ts
+interface Props {
+    startArrow: string
+    endArrow: string
+    startPoint: [number, number]
+    endPoint: [number, number]
+    type: string
+    strokeStyle: string
+    from: string | null
+    to: string | null
+    exit: [number, number]
+    entry: [number, number]
+    useexit: boolean
+    useentry: boolean
+}
+
+export default class extends Component<Props> {
+    static template = template;
+
+    static defaults() {
+        return {
+            startArrow: 'none',
+            endArrow: 'classic',
+            startPoint: [10, 100],
+            endPoint: [100, 150],
+            type: 'straight',
+            strokeStyle: 'solid',
+            from: null,
+            to: null,
+            exit: [0, 0],
+            entry: [0, 0],
+            useexit: false,
+            useentry: false,
+        };
+    }
+
+    onSliderChange(name: {[K in keyof Props]: Props[K] extends unknown[] ? K : never}[keyof Props], index: number, value: number) {
+        let propValue = this.get(name).slice(0) as [number, number];
+        propValue[index] = value;
+        this.set(name, propValue);
+    }
+}
+```
+
+```vue-ignore
+请参考index.vdt
+```
+
+```react-ignore
+请参考index.vdt
+```
+
+```angular-ignore
+请参考index.vdt
+```