Skip to content

GitLab

P
pro-blocks
Commit 190aec4c authored by 陈帅's avatar 陈帅
Browse files
Options

import sorted

parent cf5d3b0e
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1395 additions and 1301 deletions
.eslintcache
View file @ 190aec4c
This diff is collapsed.
AccountCenter/src/components/Applications/index.tsx
View file @ 190aec4c
import { Avatar, Card, Dropdown, Icon, List, Menu, Tooltip } from 'antd';
import React, { Component } from 'react'; import React, { Component } from 'react';
import { List, Card, Icon, Dropdown, Menu, Avatar, Tooltip } from 'antd';
import numeral from 'numeral';
import { connect } from 'dva'; import { connect } from 'dva';
import stylesApplications from './index.less'; import numeral from 'numeral';
import { ModalState } from '../../model'; import { ModalState } from '../../model';
import stylesApplications from './index.less';
export function formatWan(val: number) { export function formatWan(val: number) {
const v = val * 1; const v = val * 1;
......
AccountCenter/src/components/ArticleListContent/index.tsx
View file @ 190aec4c
import { Avatar } from 'antd';
import React from 'react'; import React from 'react';
import moment from 'moment'; import moment from 'moment';
import { Avatar } from 'antd';
import styles from './index.less'; import styles from './index.less';
export interface ApplicationsProps { export interface ApplicationsProps {
......
AccountCenter/src/components/Articles/index.tsx
View file @ 190aec4c
import { Icon, List, Tag } from 'antd';
import React, { Component } from 'react'; import React, { Component } from 'react';
import { List, Icon, Tag } from 'antd';
import { connect } from 'dva'; import { connect } from 'dva';
import ArticleListContent from '../ArticleListContent'; import ArticleListContent from '../ArticleListContent';
import styles from './index.less';
import { ModalState } from '../../model';
import { ListItemDataType } from '../../data'; import { ListItemDataType } from '../../data';
import { ModalState } from '../../model';
import styles from './index.less';
@connect(({ BLOCK_NAME_CAMEL_CASE }: { BLOCK_NAME_CAMEL_CASE: ModalState }) => ({ @connect(({ BLOCK_NAME_CAMEL_CASE }: { BLOCK_NAME_CAMEL_CASE: ModalState }) => ({
list: BLOCK_NAME_CAMEL_CASE.list, list: BLOCK_NAME_CAMEL_CASE.list,
......
AccountCenter/src/components/AvatarList/index.tsx
View file @ 190aec4c
import { Avatar, Tooltip } from 'antd';
import React from 'react'; import React from 'react';
import { Tooltip, Avatar } from 'antd';
import classNames from 'classnames'; import classNames from 'classnames';
import styles from './index.less'; import styles from './index.less';
......
AccountCenter/src/components/Projects/index.tsx
View file @ 190aec4c
import { Card, List } from 'antd';
import React, { Component } from 'react'; import React, { Component } from 'react';
import { List, Card } from 'antd';
import moment from 'moment';
import { connect } from 'dva'; import { connect } from 'dva';
import moment from 'moment';
import AvatarList from '../AvatarList'; import AvatarList from '../AvatarList';
import styles from './index.less';
import { ModalState } from '../../model';
import { ListItemDataType } from '../../data'; import { ListItemDataType } from '../../data';
import { ModalState } from '../../model';
import styles from './index.less';
@connect(({ BLOCK_NAME_CAMEL_CASE }: { BLOCK_NAME_CAMEL_CASE: ModalState }) => ({ @connect(({ BLOCK_NAME_CAMEL_CASE }: { BLOCK_NAME_CAMEL_CASE: ModalState }) => ({
list: BLOCK_NAME_CAMEL_CASE.list, list: BLOCK_NAME_CAMEL_CASE.list,
......
AccountCenter/src/index.tsx
View file @ 190aec4c
import { Avatar, Card, Col, Divider, Icon, Input, Row, Tag } from 'antd';
import React, { PureComponent } from 'react'; import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Dispatch } from 'redux'; import { Dispatch } from 'redux';
import Link from 'umi/link';
import { GridContent } from '@ant-design/pro-layout'; import { GridContent } from '@ant-design/pro-layout';
import Link from 'umi/link';
import { RouteChildrenProps } from 'react-router'; import { RouteChildrenProps } from 'react-router';
import { Card, Row, Col, Icon, Avatar, Tag, Divider, Input } from 'antd'; import { connect } from 'dva';
import styles from './Center.less';
import { ITag, CurrentUser } from './data';
import { ModalState } from './model'; import { ModalState } from './model';
import Projects from './components/Projects';
import Articles from './components/Articles'; import Articles from './components/Articles';
import Applications from './components/Applications'; import Applications from './components/Applications';
import Projects from './components/Projects'; import { CurrentUser, ITag } from './data';
import styles from './Center.less';
const operationTabList = [ const operationTabList = [
{ {
...@@ -186,7 +187,9 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends PureComponent< ...@@ -186,7 +187,9 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends PureComponent<
<Divider dashed /> <Divider dashed />
<div className={styles.tags}> <div className={styles.tags}>
<div className={styles.tagsTitle}>标签</div> <div className={styles.tagsTitle}>标签</div>
{currentUser.tags.concat(newTags).map(item => <Tag key={item.key}>{item.label}</Tag>)} {currentUser.tags.concat(newTags).map(item => (
<Tag key={item.key}>{item.label}</Tag>
))}
{inputVisible && ( {inputVisible && (
<Input <Input
ref={ref => this.saveInputRef(ref)} ref={ref => this.saveInputRef(ref)}
......
AccountCenter/src/model.ts
View file @ 190aec4c
import { AnyAction, Reducer } from 'redux';
import { Reducer, AnyAction } from 'redux';
import { EffectsCommandMap } from 'dva'; import { EffectsCommandMap } from 'dva';
import { CurrentUser, ListItemDataType } from './data'; import { CurrentUser, ListItemDataType } from './data';
import { queryCurrent, queryFakeList } from './service'; import { queryCurrent, queryFakeList } from './service';
......
AccountSettings/src/components/GeographicView.tsx
View file @ 190aec4c
import React, { Component } from 'react'; import React, { Component } from 'react';
import { Select, Spin } from 'antd'; import { Select, Spin } from 'antd';
import { connect } from 'dva';
import { Dispatch } from 'redux'; import { Dispatch } from 'redux';
import { connect } from 'dva';
import { CityData, ProvinceData } from '../data';
import styles from './GeographicView.less'; import styles from './GeographicView.less';
import { ProvinceData, CityData } from '../data';
const { Option } = Select; const { Option } = Select;
......
AccountSettings/src/components/PhoneView.tsx
View file @ 190aec4c
import React, { Fragment, PureComponent } from 'react'; import React, { Fragment, PureComponent } from 'react';
import { Input } from 'antd'; import { Input } from 'antd';
import styles from './PhoneView.less'; import styles from './PhoneView.less';
......
AccountSettings/src/components/base.tsx
View file @ 190aec4c
import { Button, Form, Input, Select, Upload, message } from 'antd';
import { FormattedMessage, formatMessage } from 'umi-plugin-react/locale';
import React, { Component, Fragment } from 'react'; import React, { Component, Fragment } from 'react';
import { formatMessage, FormattedMessage } from 'umi-plugin-react/locale';
import { Form, Input, Upload, Select, Button, message } from 'antd';
import { FormComponentProps } from 'antd/es/form'; import { FormComponentProps } from 'antd/es/form';
import { connect } from 'dva'; import { connect } from 'dva';
import styles from './BaseView.less'; import { CurrentUser } from '../data';
import GeographicView from './GeographicView'; import GeographicView from './GeographicView';
import PhoneView from './PhoneView'; import PhoneView from './PhoneView';
import { CurrentUser } from '../data'; import styles from './BaseView.less';
const FormItem = Form.Item; const FormItem = Form.Item;
const { Option } = Select; const { Option } = Select;
......
AccountSettings/src/components/binding.tsx
View file @ 190aec4c
import React, { Component, Fragment } from 'react'; import { FormattedMessage, formatMessage } from 'umi-plugin-react/locale';
import { formatMessage, FormattedMessage } from 'umi-plugin-react/locale';
import { Icon, List } from 'antd'; import { Icon, List } from 'antd';
import React, { Component, Fragment } from 'react';
class BindingView extends Component { class BindingView extends Component {
getData = () => [ getData = () => [
......
AccountSettings/src/components/notification.tsx
View file @ 190aec4c
import { List, Switch } from 'antd';
import React, { Component, Fragment } from 'react'; import React, { Component, Fragment } from 'react';
import { formatMessage } from 'umi-plugin-react/locale'; import { formatMessage } from 'umi-plugin-react/locale';
import { Switch, List } from 'antd';
type Unpacked<T> = T extends (infer U)[] ? U : T; type Unpacked<T> = T extends (infer U)[] ? U : T;
......
AccountSettings/src/components/security.tsx
View file @ 190aec4c
import { FormattedMessage, formatMessage } from 'umi-plugin-react/locale';
import React, { Component, Fragment } from 'react'; import React, { Component, Fragment } from 'react';
import { formatMessage, FormattedMessage } from 'umi-plugin-react/locale';
import { List } from 'antd'; import { List } from 'antd';
type Unpacked<T> = T extends (infer U)[] ? U : T; type Unpacked<T> = T extends (infer U)[] ? U : T;
......
AccountSettings/src/index.tsx
View file @ 190aec4c
import React, { Component } from 'react'; import React, { Component } from 'react';
import { connect } from 'dva';
import { Dispatch } from 'redux'; import { Dispatch } from 'redux';
import { FormattedMessage } from 'umi-plugin-react/locale'; import { FormattedMessage } from 'umi-plugin-react/locale';
import { GridContent } from '@ant-design/pro-layout'; import { GridContent } from '@ant-design/pro-layout';
import { Menu } from 'antd'; import { Menu } from 'antd';
import styles from './style.less'; import { connect } from 'dva';
import BaseView from './components/base'; import BaseView from './components/base';
import SecurityView from './components/security';
import BindingView from './components/binding'; import BindingView from './components/binding';
import NotificationView from './components/notification';
import { CurrentUser } from './data'; import { CurrentUser } from './data';
import NotificationView from './components/notification';
import SecurityView from './components/security';
import styles from './style.less';
const { Item } = Menu; const { Item } = Menu;
......
AccountSettings/src/model.ts
View file @ 190aec4c
import { Reducer, AnyAction } from 'redux'; import { AnyAction, Reducer } from 'redux';
import { EffectsCommandMap } from 'dva'; import { EffectsCommandMap } from 'dva';
import { City, CurrentUser, Province } from './data';
import { query as queryUsers, queryCurrent, queryProvince, queryCity } from './service'; import { queryCity, queryCurrent, queryProvince, query as queryUsers } from './service';
import { CurrentUser, City, Province } from './data';
export interface ModalState { export interface ModalState {
currentUser?: Partial<CurrentUser>; currentUser?: Partial<CurrentUser>;
......
DashboardAnalysis/src/_mock.ts
View file @ 190aec4c
import moment from 'moment'; import moment from 'moment';
import { IVisitData, IRadarData, IAnalysisData } from './data'; import { IAnalysisData, IRadarData, IVisitData } from './data';
// mock data // mock data
const visitData: IVisitData[] = []; const visitData: IVisitData[] = [];
......
DashboardAnalysis/src/components/Charts/Bar/index.tsx
View file @ 190aec4c
import { Axis, Chart, Geom, Tooltip } from 'bizcharts';
import React, { Component } from 'react'; import React, { Component } from 'react';
import { Chart, Axis, Tooltip, Geom } from 'bizcharts';
import Debounce from 'lodash-decorators/debounce';
import Bind from 'lodash-decorators/bind'; import Bind from 'lodash-decorators/bind';
import Debounce from 'lodash-decorators/debounce';
import autoHeight from '../autoHeight'; import autoHeight from '../autoHeight';
import styles from '../index.less'; import styles from '../index.less';
......
DashboardAnalysis/src/components/Charts/ChartCard/index.tsx
View file @ 190aec4c
import React from 'react';
import { Card } from 'antd'; import { Card } from 'antd';
import classNames from 'classnames';
import { CardProps } from 'antd/es/card'; import { CardProps } from 'antd/es/card';
import React from 'react';
import classNames from 'classnames';
import styles from './index.less'; import styles from './index.less';
type totalType = () => React.ReactNode; type totalType = () => React.ReactNode;
......
DashboardAnalysis/src/components/Charts/Field/index.tsx
View file @ 190aec4c
import React from 'react'; import React from 'react';
import styles from './index.less'; import styles from './index.less';
export interface IFieldProps { export interface IFieldProps {
......
DashboardAnalysis/src/components/Charts/Gauge/index.tsx
View file @ 190aec4c
import { Axis, Chart, Coord, Geom, Guide, Shape } from 'bizcharts';
import React from 'react'; import React from 'react';
import { Chart, Geom, Axis, Coord, Guide, Shape } from 'bizcharts';
import autoHeight from '../autoHeight'; import autoHeight from '../autoHeight';
const { Arc, Html, Line } = Guide; const { Arc, Html, Line } = Guide;
......
DashboardAnalysis/src/components/Charts/MiniArea/index.tsx
View file @ 190aec4c
import { Axis, Chart, Geom, Tooltip } from 'bizcharts';
import React from 'react'; import React from 'react';
import { Chart, Axis, Tooltip, Geom } from 'bizcharts';
import autoHeight from '../autoHeight'; import autoHeight from '../autoHeight';
import styles from '../index.less'; import styles from '../index.less';
......
DashboardAnalysis/src/components/Charts/MiniBar/index.tsx
View file @ 190aec4c
import { Chart, Geom, Tooltip } from 'bizcharts';
import React from 'react'; import React from 'react';
import { Chart, Tooltip, Geom } from 'bizcharts';
import autoHeight from '../autoHeight'; import autoHeight from '../autoHeight';
import styles from '../index.less'; import styles from '../index.less';
......
DashboardAnalysis/src/components/Charts/Pie/index.tsx
View file @ 190aec4c
import { Chart, Coord, Geom, Tooltip } from 'bizcharts';
import React, { Component } from 'react'; import React, { Component } from 'react';
import { Chart, Tooltip, Geom, Coord } from 'bizcharts';
import Bind from 'lodash-decorators/bind';
import { DataView } from '@antv/data-set'; import { DataView } from '@antv/data-set';
import Debounce from 'lodash-decorators/debounce';
import { Divider } from 'antd'; import { Divider } from 'antd';
import classNames from 'classnames';
import ReactFitText from 'react-fittext'; import ReactFitText from 'react-fittext';
import Debounce from 'lodash-decorators/debounce'; import classNames from 'classnames';
import Bind from 'lodash-decorators/bind';
import autoHeight from '../autoHeight'; import autoHeight from '../autoHeight';
import styles from './index.less'; import styles from './index.less';
export interface IPieProps { export interface IPieProps {
......
DashboardAnalysis/src/components/Charts/TagCloud/index.tsx
View file @ 190aec4c
import { Chart, Coord, Geom, Shape, Tooltip } from 'bizcharts';
import React, { Component } from 'react'; import React, { Component } from 'react';
import { Chart, Geom, Coord, Shape, Tooltip } from 'bizcharts';
import Bind from 'lodash-decorators/bind';
import DataSet from '@antv/data-set'; import DataSet from '@antv/data-set';
import Debounce from 'lodash-decorators/debounce'; import Debounce from 'lodash-decorators/debounce';
import Bind from 'lodash-decorators/bind';
import classNames from 'classnames'; import classNames from 'classnames';
import autoHeight from '../autoHeight'; import autoHeight from '../autoHeight';
import styles from './index.less'; import styles from './index.less';
......
DashboardAnalysis/src/components/Charts/TimelineChart/index.tsx
View file @ 190aec4c
import React from 'react'; import { Axis, Chart, Geom, Legend, Tooltip } from 'bizcharts';
import { Chart, Tooltip, Geom, Legend, Axis } from 'bizcharts';
import DataSet from '@antv/data-set'; import DataSet from '@antv/data-set';
import React from 'react';
import Slider from 'bizcharts-plugin-slider'; import Slider from 'bizcharts-plugin-slider';
import autoHeight from '../autoHeight'; import autoHeight from '../autoHeight';
import styles from './index.less'; import styles from './index.less';
......
DashboardAnalysis/src/components/Charts/WaterWave/index.tsx
View file @ 190aec4c
import React, { Component } from 'react'; import React, { Component } from 'react';
import autoHeight from '../autoHeight'; import autoHeight from '../autoHeight';
import styles from './index.less'; import styles from './index.less';
......
DashboardAnalysis/src/components/Charts/index.tsx
View file @ 190aec4c
import numeral from 'numeral'; import numeral from 'numeral';
import Bar from './Bar';
import ChartCard from './ChartCard'; import ChartCard from './ChartCard';
import Field from './Field'; import Field from './Field';
import Bar from './Bar';
import Pie from './Pie';
import Gauge from './Gauge'; import Gauge from './Gauge';
import MiniArea from './MiniArea'; import MiniArea from './MiniArea';
import MiniBar from './MiniBar'; import MiniBar from './MiniBar';
import MiniProgress from './MiniProgress'; import MiniProgress from './MiniProgress';
import WaterWave from './WaterWave'; import Pie from './Pie';
import TagCloud from './TagCloud'; import TagCloud from './TagCloud';
import TimelineChart from './TimelineChart'; import TimelineChart from './TimelineChart';
import WaterWave from './WaterWave';
const yuan = (val: number | string) => `¥ ${numeral(val).format('0,0')}`; const yuan = (val: number | string) => `¥ ${numeral(val).format('0,0')}`;
......
DashboardAnalysis/src/components/IntroduceRow.tsx
View file @ 190aec4c
import React from 'react'; import { Col, Icon, Row, Tooltip } from 'antd';
import { Row, Col, Icon, Tooltip } from 'antd';
import { FormattedMessage } from 'umi-plugin-react/locale'; import { FormattedMessage } from 'umi-plugin-react/locale';
import React from 'react';
import numeral from 'numeral'; import numeral from 'numeral';
import Charts from './Charts'; import Charts from './Charts';
import styles from '../style.less';
import Yuan from '../utils/Yuan';
import Trend from './Trend';
import { IVisitData } from '../data.d'; import { IVisitData } from '../data.d';
import Trend from './Trend';
import Yuan from '../utils/Yuan';
import styles from '../style.less';
const { ChartCard, MiniArea, MiniBar, MiniProgress, Field } = Charts; const { ChartCard, MiniArea, MiniBar, MiniProgress, Field } = Charts;
...@@ -20,145 +21,142 @@ const topColResponsiveProps = { ...@@ -20,145 +21,142 @@ const topColResponsiveProps = {
}; };
const IntroduceRow = ({ loading, visitData }: { loading: boolean; visitData: IVisitData[] }) => ( const IntroduceRow = ({ loading, visitData }: { loading: boolean; visitData: IVisitData[] }) => (
<Row gutter={24}> <Row gutter={24}>
<Col {...topColResponsiveProps}> <Col {...topColResponsiveProps}>
<ChartCard <ChartCard
bordered={false} bordered={false}
title={ title={
<FormattedMessage id="BLOCK_NAME.analysis.total-sales" defaultMessage="Total Sales" /> <FormattedMessage id="BLOCK_NAME.analysis.total-sales" defaultMessage="Total Sales" />
} }
action={ action={
<Tooltip <Tooltip
title={ title={
<FormattedMessage id="BLOCK_NAME.analysis.introduce" defaultMessage="Introduce" /> <FormattedMessage id="BLOCK_NAME.analysis.introduce" defaultMessage="Introduce" />
} }
> >
<Icon type="info-circle-o" /> <Icon type="info-circle-o" />
</Tooltip> </Tooltip>
} }
loading={loading} loading={loading}
total={() => <Yuan>126560</Yuan>} total={() => <Yuan>126560</Yuan>}
footer={ footer={
<Field <Field
label={ label={
<FormattedMessage id="BLOCK_NAME.analysis.day-sales" defaultMessage="Daily Sales" /> <FormattedMessage id="BLOCK_NAME.analysis.day-sales" defaultMessage="Daily Sales" />
} }
value={`￥${numeral(12423).format('0,0')}`} value={`￥${numeral(12423).format('0,0')}`}
/> />
} }
contentHeight={46} contentHeight={46}
> >
<Trend flag="up" style={{ marginRight: 16 }}> <Trend flag="up" style={{ marginRight: 16 }}>
<FormattedMessage id="BLOCK_NAME.analysis.week" defaultMessage="Weekly Changes" /> <FormattedMessage id="BLOCK_NAME.analysis.week" defaultMessage="Weekly Changes" />
<span className={styles.trendText}>12%</span> <span className={styles.trendText}>12%</span>
</Trend> </Trend>
<Trend flag="down"> <Trend flag="down">
<FormattedMessage id="BLOCK_NAME.analysis.day" defaultMessage="Daily Changes" /> <FormattedMessage id="BLOCK_NAME.analysis.day" defaultMessage="Daily Changes" />
<span className={styles.trendText}>11%</span> <span className={styles.trendText}>11%</span>
</Trend> </Trend>
</ChartCard> </ChartCard>
</Col> </Col>
<Col {...topColResponsiveProps}> <Col {...topColResponsiveProps}>
<ChartCard <ChartCard
bordered={false} bordered={false}
loading={loading} loading={loading}
title={<FormattedMessage id="BLOCK_NAME.analysis.visits" defaultMessage="Visits" />} title={<FormattedMessage id="BLOCK_NAME.analysis.visits" defaultMessage="Visits" />}
action={ action={
<Tooltip <Tooltip
title={ title={
<FormattedMessage id="BLOCK_NAME.analysis.introduce" defaultMessage="Introduce" /> <FormattedMessage id="BLOCK_NAME.analysis.introduce" defaultMessage="Introduce" />
} }
> >
<Icon type="info-circle-o" /> <Icon type="info-circle-o" />
</Tooltip> </Tooltip>
} }
total={numeral(8846).format('0,0')} total={numeral(8846).format('0,0')}
footer={ footer={
<Field <Field
label={ label={
<FormattedMessage <FormattedMessage id="BLOCK_NAME.analysis.day-visits" defaultMessage="Daily Visits" />
id="BLOCK_NAME.analysis.day-visits" }
defaultMessage="Daily Visits" value={numeral(1234).format('0,0')}
/> />
} }
value={numeral(1234).format('0,0')} contentHeight={46}
/> >
} <MiniArea color="#975FE4" data={visitData} />
contentHeight={46} </ChartCard>
> </Col>
<MiniArea color="#975FE4" data={visitData} /> <Col {...topColResponsiveProps}>
</ChartCard> <ChartCard
</Col> bordered={false}
<Col {...topColResponsiveProps}> loading={loading}
<ChartCard title={<FormattedMessage id="BLOCK_NAME.analysis.payments" defaultMessage="Payments" />}
bordered={false} action={
loading={loading} <Tooltip
title={<FormattedMessage id="BLOCK_NAME.analysis.payments" defaultMessage="Payments" />} title={
action={ <FormattedMessage id="BLOCK_NAME.analysis.introduce" defaultMessage="Introduce" />
<Tooltip }
title={ >
<FormattedMessage id="BLOCK_NAME.analysis.introduce" defaultMessage="Introduce" /> <Icon type="info-circle-o" />
} </Tooltip>
> }
<Icon type="info-circle-o" /> total={numeral(6560).format('0,0')}
</Tooltip> footer={
} <Field
total={numeral(6560).format('0,0')} label={
footer={ <FormattedMessage
<Field id="BLOCK_NAME.analysis.conversion-rate"
label={ defaultMessage="Conversion Rate"
<FormattedMessage />
id="BLOCK_NAME.analysis.conversion-rate" }
defaultMessage="Conversion Rate" value="60%"
/> />
} }
value="60%" contentHeight={46}
/> >
} <MiniBar data={visitData} />
contentHeight={46} </ChartCard>
> </Col>
<MiniBar data={visitData} /> <Col {...topColResponsiveProps}>
</ChartCard> <ChartCard
</Col> loading={loading}
<Col {...topColResponsiveProps}> bordered={false}
<ChartCard title={
loading={loading} <FormattedMessage
bordered={false} id="BLOCK_NAME.analysis.operational-effect"
title={ defaultMessage="Operational Effect"
<FormattedMessage />
id="BLOCK_NAME.analysis.operational-effect" }
defaultMessage="Operational Effect" action={
/> <Tooltip
} title={
action={ <FormattedMessage id="BLOCK_NAME.analysis.introduce" defaultMessage="Introduce" />
<Tooltip }
title={ >
<FormattedMessage id="BLOCK_NAME.analysis.introduce" defaultMessage="Introduce" /> <Icon type="info-circle-o" />
} </Tooltip>
> }
<Icon type="info-circle-o" /> total="78%"
</Tooltip> footer={
} <div style={{ whiteSpace: 'nowrap', overflow: 'hidden' }}>
total="78%" <Trend flag="up" style={{ marginRight: 16 }}>
footer={ <FormattedMessage id="BLOCK_NAME.analysis.week" defaultMessage="Weekly Changes" />
<div style={{ whiteSpace: 'nowrap', overflow: 'hidden' }}> <span className={styles.trendText}>12%</span>
<Trend flag="up" style={{ marginRight: 16 }}> </Trend>
<FormattedMessage id="BLOCK_NAME.analysis.week" defaultMessage="Weekly Changes" /> <Trend flag="down">
<span className={styles.trendText}>12%</span> <FormattedMessage id="BLOCK_NAME.analysis.day" defaultMessage="Weekly Changes" />
</Trend> <span className={styles.trendText}>11%</span>
<Trend flag="down"> </Trend>
<FormattedMessage id="BLOCK_NAME.analysis.day" defaultMessage="Weekly Changes" /> </div>
<span className={styles.trendText}>11%</span> }
</Trend> contentHeight={46}
</div> >
} <MiniProgress percent={78} strokeWidth={8} target={80} color="#13C2C2" />
contentHeight={46} </ChartCard>
> </Col>
<MiniProgress percent={78} strokeWidth={8} target={80} color="#13C2C2" /> </Row>
</ChartCard> );
</Col>
</Row>
);
export default IntroduceRow; export default IntroduceRow;
DashboardAnalysis/src/components/NumberInfo/index.tsx
View file @ 190aec4c
import React from 'react';
import { Icon } from 'antd'; import { Icon } from 'antd';
import React from 'react';
import classNames from 'classnames'; import classNames from 'classnames';
import styles from './index.less'; import styles from './index.less';
......
DashboardAnalysis/src/components/OfflineData.tsx
View file @ 190aec4c
import { Card, Col, Row, Tabs } from 'antd';
import { FormattedMessage, formatMessage } from 'umi-plugin-react/locale';
import React from 'react'; import React from 'react';
import { Card, Tabs, Row, Col } from 'antd'; import { IOfflineChartData, IOfflineData } from '../data';
import { formatMessage, FormattedMessage } from 'umi-plugin-react/locale';
import Charts from './Charts'; import Charts from './Charts';
import styles from '../style.less';
import NumberInfo from './NumberInfo'; import NumberInfo from './NumberInfo';
import { IOfflineData, IOfflineChartData } from '../data'; import styles from '../style.less';
const { TimelineChart, Pie } = Charts; const { TimelineChart, Pie } = Charts;
...@@ -15,33 +16,33 @@ const CustomTab = ({ ...@@ -15,33 +16,33 @@ const CustomTab = ({
data: IOfflineData; data: IOfflineData;
currentTabKey: string; currentTabKey: string;
}) => ( }) => (
<Row gutter={8} style={{ width: 138, margin: '8px 0' }}> <Row gutter={8} style={{ width: 138, margin: '8px 0' }}>
<Col span={12}> <Col span={12}>
<NumberInfo <NumberInfo
title={data.name} title={data.name}
subTitle={ subTitle={
<FormattedMessage <FormattedMessage
id="BLOCK_NAME.analysis.conversion-rate" id="BLOCK_NAME.analysis.conversion-rate"
defaultMessage="Conversion Rate" defaultMessage="Conversion Rate"
/> />
} }
gap={2} gap={2}
total={`${data.cvr * 100}%`} total={`${data.cvr * 100}%`}
theme={currentKey !== data.name ? 'light' : undefined} theme={currentKey !== data.name ? 'light' : undefined}
/> />
</Col> </Col>
<Col span={12} style={{ paddingTop: 36 }}> <Col span={12} style={{ paddingTop: 36 }}>
<Pie <Pie
animate={false} animate={false}
inner={0.55} inner={0.55}
tooltip={false} tooltip={false}
margin={[0, 0, 0, 0]} margin={[0, 0, 0, 0]}
percent={data.cvr * 100} percent={data.cvr * 100}
height={64} height={64}
/> />
</Col> </Col>
</Row> </Row>
); );
const { TabPane } = Tabs; const { TabPane } = Tabs;
......
DashboardAnalysis/src/components/ProportionSales.tsx
View file @ 190aec4c
import React from 'react';
import { Card, Radio } from 'antd'; import { Card, Radio } from 'antd';
import { FormattedMessage } from 'umi-plugin-react/locale'; import { FormattedMessage } from 'umi-plugin-react/locale';
import { RadioChangeEvent } from 'antd/es/radio'; import { RadioChangeEvent } from 'antd/es/radio';
import React from 'react';
import { ISalesData } from '../data';
import Charts from './Charts'; import Charts from './Charts';
import styles from '../style.less';
import Yuan from '../utils/Yuan'; import Yuan from '../utils/Yuan';
import { ISalesData } from '../data'; import styles from '../style.less';
const { Pie } = Charts; const { Pie } = Charts;
...@@ -22,56 +23,56 @@ const ProportionSales = ({ ...@@ -22,56 +23,56 @@ const ProportionSales = ({
salesPieData: ISalesData[]; salesPieData: ISalesData[];
handleChangeSalesType?: (e: RadioChangeEvent) => void; handleChangeSalesType?: (e: RadioChangeEvent) => void;
}) => ( }) => (
<Card <Card
loading={loading} loading={loading}
className={styles.salesCard} className={styles.salesCard}
bordered={false} bordered={false}
title={ title={
<FormattedMessage <FormattedMessage
id="BLOCK_NAME.analysis.the-proportion-of-sales" id="BLOCK_NAME.analysis.the-proportion-of-sales"
defaultMessage="The Proportion of Sales" defaultMessage="The Proportion of Sales"
/> />
} }
bodyStyle={{ padding: 24 }} bodyStyle={{ padding: 24 }}
extra={ extra={
<div className={styles.salesCardExtra}> <div className={styles.salesCardExtra}>
{dropdownGroup} {dropdownGroup}
<div className={styles.salesTypeRadio}> <div className={styles.salesTypeRadio}>
<Radio.Group value={salesType} onChange={handleChangeSalesType}> <Radio.Group value={salesType} onChange={handleChangeSalesType}>
<Radio.Button value="all"> <Radio.Button value="all">
<FormattedMessage id="BLOCK_NAME.channel.all" defaultMessage="ALL" /> <FormattedMessage id="BLOCK_NAME.channel.all" defaultMessage="ALL" />
</Radio.Button> </Radio.Button>
<Radio.Button value="online"> <Radio.Button value="online">
<FormattedMessage id="BLOCK_NAME.channel.online" defaultMessage="Online" /> <FormattedMessage id="BLOCK_NAME.channel.online" defaultMessage="Online" />
</Radio.Button> </Radio.Button>
<Radio.Button value="stores"> <Radio.Button value="stores">
<FormattedMessage id="BLOCK_NAME.channel.stores" defaultMessage="Stores" /> <FormattedMessage id="BLOCK_NAME.channel.stores" defaultMessage="Stores" />
</Radio.Button> </Radio.Button>
</Radio.Group> </Radio.Group>
</div>
</div> </div>
}
style={{ marginTop: 24 }}
>
<div
style={{
minHeight: 380,
}}
>
<h4 style={{ marginTop: 8, marginBottom: 32 }}>
<FormattedMessage id="BLOCK_NAME.analysis.sales" defaultMessage="Sales" />
</h4>
<Pie
hasLegend
subTitle={<FormattedMessage id="BLOCK_NAME.analysis.sales" defaultMessage="Sales" />}
total={() => <Yuan>{salesPieData.reduce((pre, now) => now.y + pre, 0)}</Yuan>}
data={salesPieData}
valueFormat={value => <Yuan>{value}</Yuan>}
height={248}
lineWidth={4}
/>
</div> </div>
</Card> }
); style={{ marginTop: 24 }}
>
<div
style={{
minHeight: 380,
}}
>
<h4 style={{ marginTop: 8, marginBottom: 32 }}>
<FormattedMessage id="BLOCK_NAME.analysis.sales" defaultMessage="Sales" />
</h4>
<Pie
hasLegend
subTitle={<FormattedMessage id="BLOCK_NAME.analysis.sales" defaultMessage="Sales" />}
total={() => <Yuan>{salesPieData.reduce((pre, now) => now.y + pre, 0)}</Yuan>}
data={salesPieData}
valueFormat={value => <Yuan>{value}</Yuan>}
height={248}
lineWidth={4}
/>
</div>
</Card>
);
export default ProportionSales; export default ProportionSales;
DashboardAnalysis/src/components/SalesCard.tsx
View file @ 190aec4c
import React from 'react'; import { Card, Col, DatePicker, Row, Tabs } from 'antd';
import { Row, Col, Card, Tabs, DatePicker } from 'antd';
import { FormattedMessage, formatMessage } from 'umi-plugin-react/locale'; import { FormattedMessage, formatMessage } from 'umi-plugin-react/locale';
import numeral from 'numeral';
import { RangePickerValue } from 'antd/es/date-picker/interface'; import { RangePickerValue } from 'antd/es/date-picker/interface';
import Charts from './Charts'; import React from 'react';
import numeral from 'numeral';
import { ISalesData } from '../data'; import { ISalesData } from '../data';
import Charts from './Charts';
import styles from '../style.less'; import styles from '../style.less';
const { Bar } = Charts; const { Bar } = Charts;
......
DashboardAnalysis/src/components/TopSearch.tsx
View file @ 190aec4c
import React from 'react'; import { Card, Col, Icon, Row, Table, Tooltip } from 'antd';
import { Row, Col, Table, Tooltip, Card, Icon } from 'antd';
import { FormattedMessage } from 'umi-plugin-react/locale'; import { FormattedMessage } from 'umi-plugin-react/locale';
import React from 'react';
import numeral from 'numeral'; import numeral from 'numeral';
import { ISearchData, IVisitData2 } from '../data';
import Charts from './Charts'; import Charts from './Charts';
import Trend from './Trend';
import NumberInfo from './NumberInfo'; import NumberInfo from './NumberInfo';
import Trend from './Trend';
import styles from '../style.less'; import styles from '../style.less';
import { ISearchData, IVisitData2 } from '../data';
const { MiniArea } = Charts; const { MiniArea } = Charts;
......
DashboardAnalysis/src/components/Trend/index.tsx
View file @ 190aec4c
import React from 'react';
import { Icon } from 'antd'; import { Icon } from 'antd';
import React from 'react';
import classNames from 'classnames'; import classNames from 'classnames';
import styles from './index.less'; import styles from './index.less';
......
DashboardAnalysis/src/index.tsx
View file @ 190aec4c
import { Col, Dropdown, Icon, Menu, Row } from 'antd';
import React, { Component, Suspense } from 'react'; import React, { Component, Suspense } from 'react';
import { connect } from 'dva';
import { Row, Col, Icon, Menu, Dropdown } from 'antd';
import { RangePickerValue } from 'antd/es/date-picker/interface';
import { Dispatch } from 'redux'; import { Dispatch } from 'redux';
import { RadioChangeEvent } from 'antd/es/radio';
import { GridContent } from '@ant-design/pro-layout'; import { GridContent } from '@ant-design/pro-layout';
import { getTimeDistance } from './utils/utils'; import { RadioChangeEvent } from 'antd/es/radio';
import styles from './style.less'; import { RangePickerValue } from 'antd/es/date-picker/interface';
import { connect } from 'dva';
import PageLoading from './components/PageLoading'; import PageLoading from './components/PageLoading';
import { IAnalysisData } from './data.d'; import { IAnalysisData } from './data.d';
import { getTimeDistance } from './utils/utils';
import styles from './style.less';
const IntroduceRow = React.lazy(() => import('./components/IntroduceRow')); const IntroduceRow = React.lazy(() => import('./components/IntroduceRow'));
const SalesCard = React.lazy(() => import('./components/SalesCard')); const SalesCard = React.lazy(() => import('./components/SalesCard'));
......
DashboardAnalysis/src/model.tsx
View file @ 190aec4c
import { Reducer, AnyAction } from 'redux'; import { AnyAction, Reducer } from 'redux';
import { EffectsCommandMap } from 'dva';
import { EffectsCommandMap } from 'dva';
import { IAnalysisData } from './data'; import { IAnalysisData } from './data';
import { fakeChartData } from './service'; import { fakeChartData } from './service';
......
DashboardAnalysis/src/utils/utils.ts
View file @ 190aec4c
import moment from 'moment';
import { RangePickerValue } from 'antd/es/date-picker/interface'; import { RangePickerValue } from 'antd/es/date-picker/interface';
import moment from 'moment';
export function fixedZero(val: number) { export function fixedZero(val: number) {
return val * 1 < 10 ? `0${val}` : val; return val * 1 < 10 ? `0${val}` : val;
......
DashboardMonitor/src/components/ActiveChart/index.tsx
View file @ 190aec4c
import React, { Component } from 'react'; import React, { Component } from 'react';
import { Statistic } from 'antd'; import { Statistic } from 'antd';
import Charts from '../Charts'; import Charts from '../Charts';
import styles from './index.less'; import styles from './index.less';
......
DashboardMonitor/src/components/Charts/Gauge/index.tsx
View file @ 190aec4c
import { Axis, Chart, Coord, Geom, Guide, Shape } from 'bizcharts';
import React from 'react'; import React from 'react';
import { Chart, Geom, Axis, Coord, Guide, Shape } from 'bizcharts';
import autoHeight from '../autoHeight'; import autoHeight from '../autoHeight';
const { Arc, Html, Line } = Guide; const { Arc, Html, Line } = Guide;
......
DashboardMonitor/src/components/Charts/MiniArea/index.tsx
View file @ 190aec4c
import { Axis, Chart, Geom, Tooltip } from 'bizcharts';
import React from 'react'; import React from 'react';
import { Chart, Axis, Tooltip, Geom } from 'bizcharts';
import autoHeight from '../autoHeight'; import autoHeight from '../autoHeight';
import styles from '../index.less'; import styles from '../index.less';
......
DashboardMonitor/src/components/Charts/Pie/index.tsx
View file @ 190aec4c
import { Chart, Coord, Geom, Tooltip } from 'bizcharts';
import React, { Component } from 'react'; import React, { Component } from 'react';
import { Chart, Tooltip, Geom, Coord } from 'bizcharts';
import Bind from 'lodash-decorators/bind';
import { DataView } from '@antv/data-set'; import { DataView } from '@antv/data-set';
import Debounce from 'lodash-decorators/debounce';
import { Divider } from 'antd'; import { Divider } from 'antd';
import classNames from 'classnames';
import ReactFitText from 'react-fittext'; import ReactFitText from 'react-fittext';
import Debounce from 'lodash-decorators/debounce'; import classNames from 'classnames';
import Bind from 'lodash-decorators/bind';
import autoHeight from '../autoHeight'; import autoHeight from '../autoHeight';
import styles from './index.less'; import styles from './index.less';
export interface IPieProps { export interface IPieProps {
......
DashboardMonitor/src/components/Charts/TagCloud/index.tsx
View file @ 190aec4c
import { Chart, Coord, Geom, Shape, Tooltip } from 'bizcharts';
import React, { Component } from 'react'; import React, { Component } from 'react';
import { Chart, Geom, Coord, Shape, Tooltip } from 'bizcharts';
import Bind from 'lodash-decorators/bind';
import DataSet from '@antv/data-set'; import DataSet from '@antv/data-set';
import Debounce from 'lodash-decorators/debounce'; import Debounce from 'lodash-decorators/debounce';
import Bind from 'lodash-decorators/bind';
import classNames from 'classnames'; import classNames from 'classnames';
import autoHeight from '../autoHeight'; import autoHeight from '../autoHeight';
import styles from './index.less'; import styles from './index.less';
......
DashboardMonitor/src/components/Charts/WaterWave/index.tsx
View file @ 190aec4c
import React, { Component } from 'react'; import React, { Component } from 'react';
import autoHeight from '../autoHeight'; import autoHeight from '../autoHeight';
import styles from './index.less'; import styles from './index.less';
......
DashboardMonitor/src/components/Charts/index.tsx
View file @ 190aec4c
import Pie from './Pie';
import Gauge from './Gauge'; import Gauge from './Gauge';
import WaterWave from './WaterWave';
import TagCloud from './TagCloud';
import MiniArea from './MiniArea'; import MiniArea from './MiniArea';
import Pie from './Pie';
import TagCloud from './TagCloud';
import WaterWave from './WaterWave';
const Charts = { const Charts = {
Pie, Pie,
......
DashboardMonitor/src/index.tsx
View file @ 190aec4c
import { Card, Col, Row, Statistic, Tooltip } from 'antd';
import { FormattedMessage, formatMessage } from 'umi-plugin-react/locale';
import React, { Component } from 'react'; import React, { Component } from 'react';
import { connect } from 'dva';
import { formatMessage, FormattedMessage } from 'umi-plugin-react/locale';
import { Row, Col, Card, Statistic, Tooltip } from 'antd';
import numeral from 'numeral';
import { Dispatch } from 'redux'; import { Dispatch } from 'redux';
import { GridContent } from '@ant-design/pro-layout'; import { GridContent } from '@ant-design/pro-layout';
import { connect } from 'dva';
import numeral from 'numeral';
import { IStateType } from './model'; import { IStateType } from './model';
import Charts from './components/Charts';
import ActiveChart from './components/ActiveChart'; import ActiveChart from './components/ActiveChart';
import styles from './style.less'; import styles from './style.less';
import Charts from './components/Charts';
const { Countdown } = Statistic; const { Countdown } = Statistic;
......
DashboardMonitor/src/model.ts
View file @ 190aec4c
import { Reducer, AnyAction } from 'redux'; import { AnyAction, Reducer } from 'redux';
import { EffectsCommandMap } from 'dva';
import { EffectsCommandMap } from 'dva';
import { ITag } from './data'; import { ITag } from './data';
import { queryTags } from './service'; import { queryTags } from './service';
......
DashboardWorkplace/src/components/EditableLinkGroup/index.tsx
View file @ 190aec4c
import React, { PureComponent, createElement } from 'react'; import React, { PureComponent, createElement } from 'react';
import { Button } from 'antd'; import { Button } from 'antd';
import styles from './index.less'; import styles from './index.less';
......
DashboardWorkplace/src/components/Radar/index.tsx
View file @ 190aec4c
import { Axis, Chart, Coord, Geom, Tooltip } from 'bizcharts';
import { Col, Row } from 'antd';
import React, { Component } from 'react'; import React, { Component } from 'react';
import { Chart, Tooltip, Geom, Coord, Axis } from 'bizcharts';
import { Row, Col } from 'antd';
import autoHeight from './autoHeight'; import autoHeight from './autoHeight';
import styles from './index.less'; import styles from './index.less';
......
DashboardWorkplace/src/index.tsx
View file @ 190aec4c
import { Avatar, Card, Col, List, Row } from 'antd';
import React, { PureComponent } from 'react'; import React, { PureComponent } from 'react';
import moment from 'moment';
import { connect } from 'dva';
import Link from 'umi/link';
import { Row, Col, Card, List, Avatar } from 'antd';
import { Dispatch } from 'redux';
import { Dispatch } from 'redux';
import Link from 'umi/link';
import { PageHeaderWrapper } from '@ant-design/pro-layout'; import { PageHeaderWrapper } from '@ant-design/pro-layout';
import EditableLinkGroup from './components/EditableLinkGroup'; import { connect } from 'dva';
import moment from 'moment';
import Radar from './components/Radar'; import Radar from './components/Radar';
import { ModalState } from './model'; import { ModalState } from './model';
import { ICurrentUser, IActivities, IRadarData, INotice } from './data'; import EditableLinkGroup from './components/EditableLinkGroup';
import { IActivities, ICurrentUser, INotice, IRadarData } from './data';
import styles from './style.less'; import styles from './style.less';
const links = [ const links = [
......
DashboardWorkplace/src/model.ts
View file @ 190aec4c
import { AnyAction, Reducer } from 'redux';
import { EffectsCommandMap } from 'dva'; import { EffectsCommandMap } from 'dva';
import { Reducer, AnyAction } from 'redux'; import { Activeties, CurrentUser, Notice, RadarData } from './data';
import { queryCurrent, queryProjectNotice, queryActivities, fakeChartData } from './service'; import { fakeChartData, queryActivities, queryCurrent, queryProjectNotice } from './service';
import { CurrentUser, Notice, Activeties, RadarData } from './data';
export interface ModalState { export interface ModalState {
currentUser: Partial<CurrentUser>; currentUser: Partial<CurrentUser>;
......
EditorFlow/src/components/EditorContextMenu/FlowContextMenu.tsx
View file @ 190aec4c
import { CanvasMenu, ContextMenu, EdgeMenu, GroupMenu, MultiMenu, NodeMenu } from 'gg-editor';
import React from 'react'; import React from 'react';
import { NodeMenu, EdgeMenu, GroupMenu, MultiMenu, CanvasMenu, ContextMenu } from 'gg-editor';
import MenuItem from './MenuItem'; import MenuItem from './MenuItem';
import styles from './index.less'; import styles from './index.less';
const FlowContextMenu = () => ( const FlowContextMenu = () => (
<ContextMenu className={styles.contextMenu}> <ContextMenu className={styles.contextMenu}>
<NodeMenu> <NodeMenu>
<MenuItem command="copy" /> <MenuItem command="copy" />
<MenuItem command="delete" /> <MenuItem command="delete" />
</NodeMenu> </NodeMenu>
<EdgeMenu> <EdgeMenu>
<MenuItem command="delete" /> <MenuItem command="delete" />
</EdgeMenu> </EdgeMenu>
<GroupMenu> <GroupMenu>
<MenuItem command="copy" /> <MenuItem command="copy" />
<MenuItem command="delete" /> <MenuItem command="delete" />
<MenuItem command="unGroup" icon="ungroup" text="Ungroup" /> <MenuItem command="unGroup" icon="ungroup" text="Ungroup" />
</GroupMenu> </GroupMenu>
<MultiMenu> <MultiMenu>
<MenuItem command="copy" /> <MenuItem command="copy" />
<MenuItem command="paste" /> <MenuItem command="paste" />
<MenuItem command="addGroup" icon="group" text="Add Group" /> <MenuItem command="addGroup" icon="group" text="Add Group" />
<MenuItem command="delete" /> <MenuItem command="delete" />
</MultiMenu> </MultiMenu>
<CanvasMenu> <CanvasMenu>
<MenuItem command="undo" /> <MenuItem command="undo" />
<MenuItem command="redo" /> <MenuItem command="redo" />
<MenuItem command="pasteHere" icon="paste" text="Paste Here" /> <MenuItem command="pasteHere" icon="paste" text="Paste Here" />
</CanvasMenu> </CanvasMenu>
</ContextMenu> </ContextMenu>
); );
export default FlowContextMenu; export default FlowContextMenu;
EditorFlow/src/components/EditorContextMenu/MenuItem.tsx
View file @ 190aec4c
import React from 'react';
import { Command } from 'gg-editor'; import { Command } from 'gg-editor';
import React from 'react';
import IconFont from '../../common/IconFont'; import IconFont from '../../common/IconFont';
import styles from './index.less'; import styles from './index.less';
const upperFirst = (str: string) => str.toLowerCase().replace(/( |^)[a-z]/g, (l: string) => l.toUpperCase()); const upperFirst = (str: string) =>
str.toLowerCase().replace(/( |^)[a-z]/g, (l: string) => l.toUpperCase());
interface MenuItemProps { interface MenuItemProps {
command: string; command: string;
......
EditorFlow/src/components/EditorContextMenu/MindContextMenu.tsx
View file @ 190aec4c
import { CanvasMenu, ContextMenu, NodeMenu } from 'gg-editor';
import React from 'react'; import React from 'react';
import { NodeMenu, CanvasMenu, ContextMenu } from 'gg-editor';
import MenuItem from './MenuItem'; import MenuItem from './MenuItem';
import styles from './index.less'; import styles from './index.less';
const MindContextMenu = () => ( const MindContextMenu = () => (
<ContextMenu className={styles.contextMenu}> <ContextMenu className={styles.contextMenu}>
<NodeMenu> <NodeMenu>
<MenuItem command="append" text="Topic" /> <MenuItem command="append" text="Topic" />
<MenuItem command="appendChild" icon="append-child" text="Subtopic" /> <MenuItem command="appendChild" icon="append-child" text="Subtopic" />
<MenuItem command="collapse" text="Fold" /> <MenuItem command="collapse" text="Fold" />
<MenuItem command="expand" text="Unfold" /> <MenuItem command="expand" text="Unfold" />
<MenuItem command="delete" /> <MenuItem command="delete" />
</NodeMenu> </NodeMenu>
<CanvasMenu> <CanvasMenu>
<MenuItem command="undo" /> <MenuItem command="undo" />
<MenuItem command="redo" /> <MenuItem command="redo" />
</CanvasMenu> </CanvasMenu>
</ContextMenu> </ContextMenu>
); );
export default MindContextMenu; export default MindContextMenu;
EditorFlow/src/components/EditorContextMenu/index.tsx
View file @ 190aec4c
import FlowContextMenu from './FlowContextMenu'; import FlowContextMenu from './FlowContextMenu';
import MindContextMenu from './MindContextMenu';
import KoniContextMenu from './KoniContextMenu'; import KoniContextMenu from './KoniContextMenu';
import MindContextMenu from './MindContextMenu';
export { FlowContextMenu, MindContextMenu, KoniContextMenu }; export { FlowContextMenu, MindContextMenu, KoniContextMenu };
EditorFlow/src/components/EditorDetailPanel/DetailForm.tsx
View file @ 190aec4c
import React, { Fragment } from 'react';
import { Card, Form, Input, Select } from 'antd'; import { Card, Form, Input, Select } from 'antd';
import { withPropsAPI } from 'gg-editor'; import React, { Fragment } from 'react';
import { FormComponentProps } from 'antd/es/form'; import { FormComponentProps } from 'antd/es/form';
import { withPropsAPI } from 'gg-editor';
const upperFirst = (str: string) => str.toLowerCase().replace(/( |^)[a-z]/g, (l: string) => l.toUpperCase()); const upperFirst = (str: string) =>
str.toLowerCase().replace(/( |^)[a-z]/g, (l: string) => l.toUpperCase());
const { Item } = Form; const { Item } = Form;
const { Option } = Select; const { Option } = Select;
...@@ -59,12 +61,12 @@ class DetailForm extends React.Component<DetailFormProps> { ...@@ -59,12 +61,12 @@ class DetailForm extends React.Component<DetailFormProps> {
}; };
renderEdgeShapeSelect = () => ( renderEdgeShapeSelect = () => (
<Select onChange={this.handleSubmit}> <Select onChange={this.handleSubmit}>
<Option value="flow-smooth">Smooth</Option> <Option value="flow-smooth">Smooth</Option>
<Option value="flow-polyline">Polyline</Option> <Option value="flow-polyline">Polyline</Option>
<Option value="flow-polyline-round">Polyline Round</Option> <Option value="flow-polyline-round">Polyline Round</Option>
</Select> </Select>
); );
renderNodeDetail = () => { renderNodeDetail = () => {
const { form } = this.props; const { form } = this.props;
......
EditorFlow/src/components/EditorDetailPanel/FlowDetailPanel.tsx
View file @ 190aec4c
import React from 'react'; import { CanvasPanel, DetailPanel, EdgePanel, GroupPanel, MultiPanel, NodePanel } from 'gg-editor';
import { Card } from 'antd'; import { Card } from 'antd';
import { NodePanel, EdgePanel, GroupPanel, MultiPanel, CanvasPanel, DetailPanel } from 'gg-editor'; import React from 'react';
import DetailForm from './DetailForm'; import DetailForm from './DetailForm';
import styles from './index.less'; import styles from './index.less';
const FlowDetailPanel = () => ( const FlowDetailPanel = () => (
<DetailPanel className={styles.detailPanel}> <DetailPanel className={styles.detailPanel}>
<NodePanel> <NodePanel>
<DetailForm type="node" /> <DetailForm type="node" />
</NodePanel> </NodePanel>
<EdgePanel> <EdgePanel>
<DetailForm type="edge" /> <DetailForm type="edge" />
</EdgePanel> </EdgePanel>
<GroupPanel> <GroupPanel>
<DetailForm type="group" /> <DetailForm type="group" />
</GroupPanel> </GroupPanel>
<MultiPanel> <MultiPanel>
<Card type="inner" size="small" title="Multi Select" bordered={false} /> <Card type="inner" size="small" title="Multi Select" bordered={false} />
</MultiPanel> </MultiPanel>
<CanvasPanel> <CanvasPanel>
<Card type="inner" size="small" title="Canvas" bordered={false} /> <Card type="inner" size="small" title="Canvas" bordered={false} />
</CanvasPanel> </CanvasPanel>
</DetailPanel> </DetailPanel>
); );
export default FlowDetailPanel; export default FlowDetailPanel;
EditorFlow/src/components/EditorDetailPanel/MindDetailPanel.tsx
View file @ 190aec4c
import React from 'react'; import { CanvasPanel, DetailPanel, NodePanel } from 'gg-editor';
import { Card } from 'antd'; import { Card } from 'antd';
import { NodePanel, CanvasPanel, DetailPanel } from 'gg-editor'; import React from 'react';
import DetailForm from './DetailForm'; import DetailForm from './DetailForm';
import styles from './index.less'; import styles from './index.less';
const MindDetailPanel = () => ( const MindDetailPanel = () => (
<DetailPanel className={styles.detailPanel}> <DetailPanel className={styles.detailPanel}>
<NodePanel> <NodePanel>
<DetailForm type="node" /> <DetailForm type="node" />
</NodePanel> </NodePanel>
<CanvasPanel> <CanvasPanel>
<Card type="inner" size="small" title="Canvas" bordered={false} /> <Card type="inner" size="small" title="Canvas" bordered={false} />
</CanvasPanel> </CanvasPanel>
</DetailPanel> </DetailPanel>
); );
export default MindDetailPanel; export default MindDetailPanel;
EditorFlow/src/components/EditorDetailPanel/index.tsx
View file @ 190aec4c
import FlowDetailPanel from './FlowDetailPanel'; import FlowDetailPanel from './FlowDetailPanel';
import MindDetailPanel from './MindDetailPanel';
import KoniDetailPanel from './KoniDetailPanel'; import KoniDetailPanel from './KoniDetailPanel';
import MindDetailPanel from './MindDetailPanel';
export { FlowDetailPanel, MindDetailPanel, KoniDetailPanel }; export { FlowDetailPanel, MindDetailPanel, KoniDetailPanel };
EditorFlow/src/components/EditorItemPanel/FlowItemPanel.tsx
View file @ 190aec4c
import React from 'react'; import { Item, ItemPanel } from 'gg-editor';
import { Card } from 'antd'; import { Card } from 'antd';
import { ItemPanel, Item } from 'gg-editor'; import React from 'react';
import styles from './index.less'; import styles from './index.less';
const FlowItemPanel = () => ( const FlowItemPanel = () => (
<ItemPanel className={styles.itemPanel}> <ItemPanel className={styles.itemPanel}>
<Card bordered={false}> <Card bordered={false}>
<Item <Item
type="node" type="node"
size="72*72" size="72*72"
shape="flow-circle" shape="flow-circle"
model={{ model={{
color: '#FA8C16', color: '#FA8C16',
label: 'Start', label: 'Start',
}} }}
src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAiIGhlaWdodD0iODAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxjaXJjbGUgaWQ9ImIiIGN4PSIzNiIgY3k9IjM2IiByPSIzNiIvPjxmaWx0ZXIgeD0iLTkuNyUiIHk9Ii02LjklIiB3aWR0aD0iMTE5LjQlIiBoZWlnaHQ9IjExOS40JSIgZmlsdGVyVW5pdHM9Im9iamVjdEJvdW5kaW5nQm94IiBpZD0iYSI+PGZlT2Zmc2V0IGR5PSIyIiBpbj0iU291cmNlQWxwaGEiIHJlc3VsdD0ic2hhZG93T2Zmc2V0T3V0ZXIxIi8+PGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMiIgaW49InNoYWRvd09mZnNldE91dGVyMSIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29tcG9zaXRlIGluPSJzaGFkb3dCbHVyT3V0ZXIxIiBpbjI9IlNvdXJjZUFscGhhIiBvcGVyYXRvcj0ib3V0IiByZXN1bHQ9InNoYWRvd0JsdXJPdXRlcjEiLz48ZmVDb2xvck1hdHJpeCB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAuMDQgMCIgaW49InNoYWRvd0JsdXJPdXRlcjEiLz48L2ZpbHRlcj48L2RlZnM+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0IDIpIj48dXNlIGZpbGw9IiMwMDAiIGZpbHRlcj0idXJsKCNhKSIgeGxpbms6aHJlZj0iI2IiLz48dXNlIGZpbGwtb3BhY2l0eT0iLjkyIiBmaWxsPSIjRkZGMkU4IiB4bGluazpocmVmPSIjYiIvPjxjaXJjbGUgc3Ryb2tlPSIjRkZDMDY5IiBjeD0iMzYiIGN5PSIzNiIgcj0iMzUuNSIvPjwvZz48dGV4dCBmb250LWZhbWlseT0iUGluZ0ZhbmdTQy1SZWd1bGFyLCBQaW5nRmFuZyBTQyIgZm9udC1zaXplPSIxMiIgZmlsbD0iIzAwMCIgZmlsbC1vcGFjaXR5PSIuNjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQgMikiPjx0c3BhbiB4PSIyMyIgeT0iNDEiPlN0YXJ0PC90c3Bhbj48L3RleHQ+PC9nPjwvc3ZnPg==" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAiIGhlaWdodD0iODAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxjaXJjbGUgaWQ9ImIiIGN4PSIzNiIgY3k9IjM2IiByPSIzNiIvPjxmaWx0ZXIgeD0iLTkuNyUiIHk9Ii02LjklIiB3aWR0aD0iMTE5LjQlIiBoZWlnaHQ9IjExOS40JSIgZmlsdGVyVW5pdHM9Im9iamVjdEJvdW5kaW5nQm94IiBpZD0iYSI+PGZlT2Zmc2V0IGR5PSIyIiBpbj0iU291cmNlQWxwaGEiIHJlc3VsdD0ic2hhZG93T2Zmc2V0T3V0ZXIxIi8+PGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMiIgaW49InNoYWRvd09mZnNldE91dGVyMSIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29tcG9zaXRlIGluPSJzaGFkb3dCbHVyT3V0ZXIxIiBpbjI9IlNvdXJjZUFscGhhIiBvcGVyYXRvcj0ib3V0IiByZXN1bHQ9InNoYWRvd0JsdXJPdXRlcjEiLz48ZmVDb2xvck1hdHJpeCB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAuMDQgMCIgaW49InNoYWRvd0JsdXJPdXRlcjEiLz48L2ZpbHRlcj48L2RlZnM+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0IDIpIj48dXNlIGZpbGw9IiMwMDAiIGZpbHRlcj0idXJsKCNhKSIgeGxpbms6aHJlZj0iI2IiLz48dXNlIGZpbGwtb3BhY2l0eT0iLjkyIiBmaWxsPSIjRkZGMkU4IiB4bGluazpocmVmPSIjYiIvPjxjaXJjbGUgc3Ryb2tlPSIjRkZDMDY5IiBjeD0iMzYiIGN5PSIzNiIgcj0iMzUuNSIvPjwvZz48dGV4dCBmb250LWZhbWlseT0iUGluZ0ZhbmdTQy1SZWd1bGFyLCBQaW5nRmFuZyBTQyIgZm9udC1zaXplPSIxMiIgZmlsbD0iIzAwMCIgZmlsbC1vcGFjaXR5PSIuNjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQgMikiPjx0c3BhbiB4PSIyMyIgeT0iNDEiPlN0YXJ0PC90c3Bhbj48L3RleHQ+PC9nPjwvc3ZnPg=="
/> />
<Item <Item
type="node" type="node"
size="80*48" size="80*48"
shape="flow-rect" shape="flow-rect"
model={{ model={{
color: '#1890FF', color: '#1890FF',
label: 'Normal', label: 'Normal',
}} }}
src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODgiIGhlaWdodD0iNTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxyZWN0IGlkPSJiIiB4PSIwIiB5PSIwIiB3aWR0aD0iODAiIGhlaWdodD0iNDgiIHJ4PSI0Ii8+PGZpbHRlciB4PSItOC44JSIgeT0iLTEwLjQlIiB3aWR0aD0iMTE3LjUlIiBoZWlnaHQ9IjEyOS4yJSIgZmlsdGVyVW5pdHM9Im9iamVjdEJvdW5kaW5nQm94IiBpZD0iYSI+PGZlT2Zmc2V0IGR5PSIyIiBpbj0iU291cmNlQWxwaGEiIHJlc3VsdD0ic2hhZG93T2Zmc2V0T3V0ZXIxIi8+PGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMiIgaW49InNoYWRvd09mZnNldE91dGVyMSIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29tcG9zaXRlIGluPSJzaGFkb3dCbHVyT3V0ZXIxIiBpbjI9IlNvdXJjZUFscGhhIiBvcGVyYXRvcj0ib3V0IiByZXN1bHQ9InNoYWRvd0JsdXJPdXRlcjEiLz48ZmVDb2xvck1hdHJpeCB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAuMDQgMCIgaW49InNoYWRvd0JsdXJPdXRlcjEiLz48L2ZpbHRlcj48L2RlZnM+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0IDIpIj48dXNlIGZpbGw9IiMwMDAiIGZpbHRlcj0idXJsKCNhKSIgeGxpbms6aHJlZj0iI2IiLz48dXNlIGZpbGwtb3BhY2l0eT0iLjkyIiBmaWxsPSIjRTZGN0ZGIiB4bGluazpocmVmPSIjYiIvPjxyZWN0IHN0cm9rZT0iIzE4OTBGRiIgeD0iLjUiIHk9Ii41IiB3aWR0aD0iNzkiIGhlaWdodD0iNDciIHJ4PSI0Ii8+PC9nPjx0ZXh0IGZvbnQtZmFtaWx5PSJQaW5nRmFuZ1NDLVJlZ3VsYXIsIFBpbmdGYW5nIFNDIiBmb250LXNpemU9IjEyIiBmaWxsPSIjMDAwIiBmaWxsLW9wYWNpdHk9Ii42NSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNCAyKSI+PHRzcGFuIHg9IjIxIiB5PSIyOSI+Tm9ybWFsPC90c3Bhbj48L3RleHQ+PC9nPjwvc3ZnPg==" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODgiIGhlaWdodD0iNTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxyZWN0IGlkPSJiIiB4PSIwIiB5PSIwIiB3aWR0aD0iODAiIGhlaWdodD0iNDgiIHJ4PSI0Ii8+PGZpbHRlciB4PSItOC44JSIgeT0iLTEwLjQlIiB3aWR0aD0iMTE3LjUlIiBoZWlnaHQ9IjEyOS4yJSIgZmlsdGVyVW5pdHM9Im9iamVjdEJvdW5kaW5nQm94IiBpZD0iYSI+PGZlT2Zmc2V0IGR5PSIyIiBpbj0iU291cmNlQWxwaGEiIHJlc3VsdD0ic2hhZG93T2Zmc2V0T3V0ZXIxIi8+PGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMiIgaW49InNoYWRvd09mZnNldE91dGVyMSIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29tcG9zaXRlIGluPSJzaGFkb3dCbHVyT3V0ZXIxIiBpbjI9IlNvdXJjZUFscGhhIiBvcGVyYXRvcj0ib3V0IiByZXN1bHQ9InNoYWRvd0JsdXJPdXRlcjEiLz48ZmVDb2xvck1hdHJpeCB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAuMDQgMCIgaW49InNoYWRvd0JsdXJPdXRlcjEiLz48L2ZpbHRlcj48L2RlZnM+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0IDIpIj48dXNlIGZpbGw9IiMwMDAiIGZpbHRlcj0idXJsKCNhKSIgeGxpbms6aHJlZj0iI2IiLz48dXNlIGZpbGwtb3BhY2l0eT0iLjkyIiBmaWxsPSIjRTZGN0ZGIiB4bGluazpocmVmPSIjYiIvPjxyZWN0IHN0cm9rZT0iIzE4OTBGRiIgeD0iLjUiIHk9Ii41IiB3aWR0aD0iNzkiIGhlaWdodD0iNDciIHJ4PSI0Ii8+PC9nPjx0ZXh0IGZvbnQtZmFtaWx5PSJQaW5nRmFuZ1NDLVJlZ3VsYXIsIFBpbmdGYW5nIFNDIiBmb250LXNpemU9IjEyIiBmaWxsPSIjMDAwIiBmaWxsLW9wYWNpdHk9Ii42NSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNCAyKSI+PHRzcGFuIHg9IjIxIiB5PSIyOSI+Tm9ybWFsPC90c3Bhbj48L3RleHQ+PC9nPjwvc3ZnPg=="
/> />
<Item <Item
type="node" type="node"
size="80*72" size="80*72"
shape="flow-rhombus" shape="flow-rhombus"
model={{ model={{
color: '#13C2C2', color: '#13C2C2',
label: 'Decision', label: 'Decision',
}} }}
src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODYiIGhlaWdodD0iNzgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxwYXRoIGQ9Ik00Mi42NyAxLjY3bDM0Ljk2NSAzMS4zNTJhNCA0IDAgMCAxIDAgNS45NTZMNDIuNjcgNzAuMzNhNCA0IDAgMCAxLTUuMzQgMEwyLjM2NSAzOC45NzhhNCA0IDAgMCAxIDAtNS45NTZMMzcuMzMgMS42N2E0IDQgMCAwIDEgNS4zNCAweiIgaWQ9ImIiLz48ZmlsdGVyIHg9Ii04LjglIiB5PSItNi45JSIgd2lkdGg9IjExNy41JSIgaGVpZ2h0PSIxMTkuNCUiIGZpbHRlclVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgaWQ9ImEiPjxmZU9mZnNldCBkeT0iMiIgaW49IlNvdXJjZUFscGhhIiByZXN1bHQ9InNoYWRvd09mZnNldE91dGVyMSIvPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjIiIGluPSJzaGFkb3dPZmZzZXRPdXRlcjEiIHJlc3VsdD0ic2hhZG93Qmx1ck91dGVyMSIvPjxmZUNvbXBvc2l0ZSBpbj0ic2hhZG93Qmx1ck91dGVyMSIgaW4yPSJTb3VyY2VBbHBoYSIgb3BlcmF0b3I9Im91dCIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwLjA0IDAiIGluPSJzaGFkb3dCbHVyT3V0ZXIxIi8+PC9maWx0ZXI+PC9kZWZzPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMyAxKSI+PHVzZSBmaWxsPSIjMDAwIiBmaWx0ZXI9InVybCgjYSkiIHhsaW5rOmhyZWY9IiNiIi8+PHVzZSBmaWxsLW9wYWNpdHk9Ii45MiIgZmlsbD0iI0U2RkZGQiIgeGxpbms6aHJlZj0iI2IiLz48cGF0aCBzdHJva2U9IiM1Q0RCRDMiIGQ9Ik00Mi4zMzcgMi4wNDJhMy41IDMuNSAwIDAgMC00LjY3NCAwTDIuNjk4IDMzLjM5NGEzLjUgMy41IDAgMCAwIDAgNS4yMTJsMzQuOTY1IDMxLjM1MmEzLjUgMy41IDAgMCAwIDQuNjc0IDBsMzQuOTY1LTMxLjM1MmEzLjUgMy41IDAgMCAwIDAtNS4yMTJMNDIuMzM3IDIuMDQyeiIvPjwvZz48dGV4dCBmb250LWZhbWlseT0iUGluZ0ZhbmdTQy1SZWd1bGFyLCBQaW5nRmFuZyBTQyIgZm9udC1zaXplPSIxMiIgZmlsbD0iIzAwMCIgZmlsbC1vcGFjaXR5PSIuNjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMgMSkiPjx0c3BhbiB4PSIxOCIgeT0iNDIiPkRlY2lzaW9uPC90c3Bhbj48L3RleHQ+PC9nPjwvc3ZnPg==" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODYiIGhlaWdodD0iNzgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxwYXRoIGQ9Ik00Mi42NyAxLjY3bDM0Ljk2NSAzMS4zNTJhNCA0IDAgMCAxIDAgNS45NTZMNDIuNjcgNzAuMzNhNCA0IDAgMCAxLTUuMzQgMEwyLjM2NSAzOC45NzhhNCA0IDAgMCAxIDAtNS45NTZMMzcuMzMgMS42N2E0IDQgMCAwIDEgNS4zNCAweiIgaWQ9ImIiLz48ZmlsdGVyIHg9Ii04LjglIiB5PSItNi45JSIgd2lkdGg9IjExNy41JSIgaGVpZ2h0PSIxMTkuNCUiIGZpbHRlclVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgaWQ9ImEiPjxmZU9mZnNldCBkeT0iMiIgaW49IlNvdXJjZUFscGhhIiByZXN1bHQ9InNoYWRvd09mZnNldE91dGVyMSIvPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjIiIGluPSJzaGFkb3dPZmZzZXRPdXRlcjEiIHJlc3VsdD0ic2hhZG93Qmx1ck91dGVyMSIvPjxmZUNvbXBvc2l0ZSBpbj0ic2hhZG93Qmx1ck91dGVyMSIgaW4yPSJTb3VyY2VBbHBoYSIgb3BlcmF0b3I9Im91dCIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwLjA0IDAiIGluPSJzaGFkb3dCbHVyT3V0ZXIxIi8+PC9maWx0ZXI+PC9kZWZzPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMyAxKSI+PHVzZSBmaWxsPSIjMDAwIiBmaWx0ZXI9InVybCgjYSkiIHhsaW5rOmhyZWY9IiNiIi8+PHVzZSBmaWxsLW9wYWNpdHk9Ii45MiIgZmlsbD0iI0U2RkZGQiIgeGxpbms6aHJlZj0iI2IiLz48cGF0aCBzdHJva2U9IiM1Q0RCRDMiIGQ9Ik00Mi4zMzcgMi4wNDJhMy41IDMuNSAwIDAgMC00LjY3NCAwTDIuNjk4IDMzLjM5NGEzLjUgMy41IDAgMCAwIDAgNS4yMTJsMzQuOTY1IDMxLjM1MmEzLjUgMy41IDAgMCAwIDQuNjc0IDBsMzQuOTY1LTMxLjM1MmEzLjUgMy41IDAgMCAwIDAtNS4yMTJMNDIuMzM3IDIuMDQyeiIvPjwvZz48dGV4dCBmb250LWZhbWlseT0iUGluZ0ZhbmdTQy1SZWd1bGFyLCBQaW5nRmFuZyBTQyIgZm9udC1zaXplPSIxMiIgZmlsbD0iIzAwMCIgZmlsbC1vcGFjaXR5PSIuNjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMgMSkiPjx0c3BhbiB4PSIxOCIgeT0iNDIiPkRlY2lzaW9uPC90c3Bhbj48L3RleHQ+PC9nPjwvc3ZnPg=="
/> />
<Item <Item
type="node" type="node"
size="80*48" size="80*48"
shape="flow-capsule" shape="flow-capsule"
model={{ model={{
color: '#722ED1', color: '#722ED1',
label: 'Model', label: 'Model',
}} }}
src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODgiIGhlaWdodD0iNTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxyZWN0IGlkPSJiIiB4PSIwIiB5PSIwIiB3aWR0aD0iODAiIGhlaWdodD0iNDgiIHJ4PSIyNCIvPjxmaWx0ZXIgeD0iLTguOCUiIHk9Ii0xMC40JSIgd2lkdGg9IjExNy41JSIgaGVpZ2h0PSIxMjkuMiUiIGZpbHRlclVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgaWQ9ImEiPjxmZU9mZnNldCBkeT0iMiIgaW49IlNvdXJjZUFscGhhIiByZXN1bHQ9InNoYWRvd09mZnNldE91dGVyMSIvPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjIiIGluPSJzaGFkb3dPZmZzZXRPdXRlcjEiIHJlc3VsdD0ic2hhZG93Qmx1ck91dGVyMSIvPjxmZUNvbXBvc2l0ZSBpbj0ic2hhZG93Qmx1ck91dGVyMSIgaW4yPSJTb3VyY2VBbHBoYSIgb3BlcmF0b3I9Im91dCIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwLjA0IDAiIGluPSJzaGFkb3dCbHVyT3V0ZXIxIi8+PC9maWx0ZXI+PC9kZWZzPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNCAyKSI+PHVzZSBmaWxsPSIjMDAwIiBmaWx0ZXI9InVybCgjYSkiIHhsaW5rOmhyZWY9IiNiIi8+PHVzZSBmaWxsLW9wYWNpdHk9Ii45MiIgZmlsbD0iI0Y5RjBGRiIgeGxpbms6aHJlZj0iI2IiLz48cmVjdCBzdHJva2U9IiNCMzdGRUIiIHg9Ii41IiB5PSIuNSIgd2lkdGg9Ijc5IiBoZWlnaHQ9IjQ3IiByeD0iMjMuNSIvPjwvZz48dGV4dCBmb250LWZhbWlseT0iUGluZ0ZhbmdTQy1SZWd1bGFyLCBQaW5nRmFuZyBTQyIgZm9udC1zaXplPSIxMiIgZmlsbD0iIzAwMCIgZmlsbC1vcGFjaXR5PSIuNjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQgMikiPjx0c3BhbiB4PSIyNCIgeT0iMjkiPk1vZGVsPC90c3Bhbj48L3RleHQ+PC9nPjwvc3ZnPg==" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODgiIGhlaWdodD0iNTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxyZWN0IGlkPSJiIiB4PSIwIiB5PSIwIiB3aWR0aD0iODAiIGhlaWdodD0iNDgiIHJ4PSIyNCIvPjxmaWx0ZXIgeD0iLTguOCUiIHk9Ii0xMC40JSIgd2lkdGg9IjExNy41JSIgaGVpZ2h0PSIxMjkuMiUiIGZpbHRlclVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgaWQ9ImEiPjxmZU9mZnNldCBkeT0iMiIgaW49IlNvdXJjZUFscGhhIiByZXN1bHQ9InNoYWRvd09mZnNldE91dGVyMSIvPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjIiIGluPSJzaGFkb3dPZmZzZXRPdXRlcjEiIHJlc3VsdD0ic2hhZG93Qmx1ck91dGVyMSIvPjxmZUNvbXBvc2l0ZSBpbj0ic2hhZG93Qmx1ck91dGVyMSIgaW4yPSJTb3VyY2VBbHBoYSIgb3BlcmF0b3I9Im91dCIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwLjA0IDAiIGluPSJzaGFkb3dCbHVyT3V0ZXIxIi8+PC9maWx0ZXI+PC9kZWZzPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNCAyKSI+PHVzZSBmaWxsPSIjMDAwIiBmaWx0ZXI9InVybCgjYSkiIHhsaW5rOmhyZWY9IiNiIi8+PHVzZSBmaWxsLW9wYWNpdHk9Ii45MiIgZmlsbD0iI0Y5RjBGRiIgeGxpbms6aHJlZj0iI2IiLz48cmVjdCBzdHJva2U9IiNCMzdGRUIiIHg9Ii41IiB5PSIuNSIgd2lkdGg9Ijc5IiBoZWlnaHQ9IjQ3IiByeD0iMjMuNSIvPjwvZz48dGV4dCBmb250LWZhbWlseT0iUGluZ0ZhbmdTQy1SZWd1bGFyLCBQaW5nRmFuZyBTQyIgZm9udC1zaXplPSIxMiIgZmlsbD0iIzAwMCIgZmlsbC1vcGFjaXR5PSIuNjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQgMikiPjx0c3BhbiB4PSIyNCIgeT0iMjkiPk1vZGVsPC90c3Bhbj48L3RleHQ+PC9nPjwvc3ZnPg=="
/> />
</Card> </Card>
</ItemPanel> </ItemPanel>
); );
export default FlowItemPanel; export default FlowItemPanel;
EditorFlow/src/components/EditorMinimap/index.tsx
View file @ 190aec4c
import React from 'react';
import { Card } from 'antd'; import { Card } from 'antd';
import { Minimap } from 'gg-editor'; import { Minimap } from 'gg-editor';
import React from 'react';
const EditorMinimap = () => ( const EditorMinimap = () => (
<Card type="inner" size="small" title="Minimap" bordered={false}> <Card type="inner" size="small" title="Minimap" bordered={false}>
<Minimap height={200} /> <Minimap height={200} />
</Card> </Card>
); );
export default EditorMinimap; export default EditorMinimap;
EditorFlow/src/components/EditorToolbar/FlowToolbar.tsx
View file @ 190aec4c
import React from 'react';
import { Divider } from 'antd'; import { Divider } from 'antd';
import React from 'react';
import { Toolbar } from 'gg-editor'; import { Toolbar } from 'gg-editor';
import ToolbarButton from './ToolbarButton'; import ToolbarButton from './ToolbarButton';
import styles from './index.less'; import styles from './index.less';
const FlowToolbar = () => ( const FlowToolbar = () => (
<Toolbar className={styles.toolbar}> <Toolbar className={styles.toolbar}>
<ToolbarButton command="undo" /> <ToolbarButton command="undo" />
<ToolbarButton command="redo" /> <ToolbarButton command="redo" />
<Divider type="vertical" /> <Divider type="vertical" />
<ToolbarButton command="copy" /> <ToolbarButton command="copy" />
<ToolbarButton command="paste" /> <ToolbarButton command="paste" />
<ToolbarButton command="delete" /> <ToolbarButton command="delete" />
<Divider type="vertical" /> <Divider type="vertical" />
<ToolbarButton command="zoomIn" icon="zoom-in" text="Zoom In" /> <ToolbarButton command="zoomIn" icon="zoom-in" text="Zoom In" />
<ToolbarButton command="zoomOut" icon="zoom-out" text="Zoom Out" /> <ToolbarButton command="zoomOut" icon="zoom-out" text="Zoom Out" />
<ToolbarButton command="autoZoom" icon="fit-map" text="Fit Map" /> <ToolbarButton command="autoZoom" icon="fit-map" text="Fit Map" />
<ToolbarButton command="resetZoom" icon="actual-size" text="Actual Size" /> <ToolbarButton command="resetZoom" icon="actual-size" text="Actual Size" />
<Divider type="vertical" /> <Divider type="vertical" />
<ToolbarButton command="toBack" icon="to-back" text="To Back" /> <ToolbarButton command="toBack" icon="to-back" text="To Back" />
<ToolbarButton command="toFront" icon="to-front" text="To Front" /> <ToolbarButton command="toFront" icon="to-front" text="To Front" />
<Divider type="vertical" /> <Divider type="vertical" />
<ToolbarButton command="multiSelect" icon="multi-select" text="Multi Select" /> <ToolbarButton command="multiSelect" icon="multi-select" text="Multi Select" />
<ToolbarButton command="addGroup" icon="group" text="Add Group" /> <ToolbarButton command="addGroup" icon="group" text="Add Group" />
<ToolbarButton command="unGroup" icon="ungroup" text="Ungroup" /> <ToolbarButton command="unGroup" icon="ungroup" text="Ungroup" />
</Toolbar> </Toolbar>
); );
export default FlowToolbar; export default FlowToolbar;
EditorFlow/src/components/EditorToolbar/MindToolbar.tsx
View file @ 190aec4c
import React from 'react';
import { Divider } from 'antd'; import { Divider } from 'antd';
import React from 'react';
import { Toolbar } from 'gg-editor'; import { Toolbar } from 'gg-editor';
import ToolbarButton from './ToolbarButton'; import ToolbarButton from './ToolbarButton';
import styles from './index.less'; import styles from './index.less';
const FlowToolbar = () => ( const FlowToolbar = () => (
<Toolbar className={styles.toolbar}> <Toolbar className={styles.toolbar}>
<ToolbarButton command="undo" /> <ToolbarButton command="undo" />
<ToolbarButton command="redo" /> <ToolbarButton command="redo" />
<Divider type="vertical" /> <Divider type="vertical" />
<ToolbarButton command="zoomIn" icon="zoom-in" text="Zoom In" /> <ToolbarButton command="zoomIn" icon="zoom-in" text="Zoom In" />
<ToolbarButton command="zoomOut" icon="zoom-out" text="Zoom Out" /> <ToolbarButton command="zoomOut" icon="zoom-out" text="Zoom Out" />
<ToolbarButton command="autoZoom" icon="fit-map" text="Fit Map" /> <ToolbarButton command="autoZoom" icon="fit-map" text="Fit Map" />
<ToolbarButton command="resetZoom" icon="actual-size" text="Actual Size" /> <ToolbarButton command="resetZoom" icon="actual-size" text="Actual Size" />
<Divider type="vertical" /> <Divider type="vertical" />
<ToolbarButton command="append" text="Topic" /> <ToolbarButton command="append" text="Topic" />
<ToolbarButton command="appendChild" icon="append-child" text="Subtopic" /> <ToolbarButton command="appendChild" icon="append-child" text="Subtopic" />
<Divider type="vertical" /> <Divider type="vertical" />
<ToolbarButton command="collapse" text="Fold" /> <ToolbarButton command="collapse" text="Fold" />
<ToolbarButton command="expand" text="Unfold" /> <ToolbarButton command="expand" text="Unfold" />
</Toolbar> </Toolbar>
); );
export default FlowToolbar; export default FlowToolbar;
EditorFlow/src/components/EditorToolbar/ToolbarButton.tsx
View file @ 190aec4c
import { Command } from 'gg-editor';
import React from 'react'; import React from 'react';
import { Tooltip } from 'antd'; import { Tooltip } from 'antd';
import { Command } from 'gg-editor';
import IconFont from '../../common/IconFont'; import IconFont from '../../common/IconFont';
import styles from './index.less'; import styles from './index.less';
const upperFirst = (str: string) => str.toLowerCase().replace(/( |^)[a-z]/g, (l: string) => l.toUpperCase()); const upperFirst = (str: string) =>
str.toLowerCase().replace(/( |^)[a-z]/g, (l: string) => l.toUpperCase());
interface ToolbarButtonProps { interface ToolbarButtonProps {
command: string; command: string;
......
EditorFlow/src/components/EditorToolbar/index.tsx
View file @ 190aec4c
import FlowToolbar from './FlowToolbar'; import FlowToolbar from './FlowToolbar';
import MindToolbar from './MindToolbar';
import KoniToolbar from './KoniToolbar'; import KoniToolbar from './KoniToolbar';
import MindToolbar from './MindToolbar';
export { FlowToolbar, MindToolbar, KoniToolbar }; export { FlowToolbar, MindToolbar, KoniToolbar };
EditorFlow/src/index.tsx
View file @ 190aec4c
import React from 'react'; import { Col, Row } from 'antd';
import { Row, Col } from 'antd';
import GGEditor, { Flow } from 'gg-editor'; import GGEditor, { Flow } from 'gg-editor';
import { PageHeaderWrapper } from '@ant-design/pro-layout'; import { PageHeaderWrapper } from '@ant-design/pro-layout';
import React from 'react';
import { formatMessage } from 'umi-plugin-react/locale'; import { formatMessage } from 'umi-plugin-react/locale';
import EditorMinimap from './components/EditorMinimap'; import EditorMinimap from './components/EditorMinimap';
import { FlowContextMenu } from './components/EditorContextMenu'; import { FlowContextMenu } from './components/EditorContextMenu';
import { FlowToolbar } from './components/EditorToolbar';
import { FlowItemPanel } from './components/EditorItemPanel';
import { FlowDetailPanel } from './components/EditorDetailPanel'; import { FlowDetailPanel } from './components/EditorDetailPanel';
import { FlowItemPanel } from './components/EditorItemPanel';
import { FlowToolbar } from './components/EditorToolbar';
import styles from './index.less'; import styles from './index.less';
GGEditor.setTrackable(false); GGEditor.setTrackable(false);
......
EditorKoni/src/components/EditorContextMenu/FlowContextMenu.tsx
View file @ 190aec4c
import { CanvasMenu, ContextMenu, EdgeMenu, GroupMenu, MultiMenu, NodeMenu } from 'gg-editor';
import React from 'react'; import React from 'react';
import { NodeMenu, EdgeMenu, GroupMenu, MultiMenu, CanvasMenu, ContextMenu } from 'gg-editor';
import MenuItem from './MenuItem'; import MenuItem from './MenuItem';
import styles from './index.less'; import styles from './index.less';
const FlowContextMenu = () => ( const FlowContextMenu = () => (
<ContextMenu className={styles.contextMenu}> <ContextMenu className={styles.contextMenu}>
<NodeMenu> <NodeMenu>
<MenuItem command="copy" /> <MenuItem command="copy" />
<MenuItem command="delete" /> <MenuItem command="delete" />
</NodeMenu> </NodeMenu>
<EdgeMenu> <EdgeMenu>
<MenuItem command="delete" /> <MenuItem command="delete" />
</EdgeMenu> </EdgeMenu>
<GroupMenu> <GroupMenu>
<MenuItem command="copy" /> <MenuItem command="copy" />
<MenuItem command="delete" /> <MenuItem command="delete" />
<MenuItem command="unGroup" icon="ungroup" text="Ungroup" /> <MenuItem command="unGroup" icon="ungroup" text="Ungroup" />
</GroupMenu> </GroupMenu>
<MultiMenu> <MultiMenu>
<MenuItem command="copy" /> <MenuItem command="copy" />
<MenuItem command="paste" /> <MenuItem command="paste" />
<MenuItem command="addGroup" icon="group" text="Add Group" /> <MenuItem command="addGroup" icon="group" text="Add Group" />
<MenuItem command="delete" /> <MenuItem command="delete" />
</MultiMenu> </MultiMenu>
<CanvasMenu> <CanvasMenu>
<MenuItem command="undo" /> <MenuItem command="undo" />
<MenuItem command="redo" /> <MenuItem command="redo" />
<MenuItem command="pasteHere" icon="paste" text="Paste Here" /> <MenuItem command="pasteHere" icon="paste" text="Paste Here" />
</CanvasMenu> </CanvasMenu>
</ContextMenu> </ContextMenu>
); );
export default FlowContextMenu; export default FlowContextMenu;
EditorKoni/src/components/EditorContextMenu/MenuItem.tsx
View file @ 190aec4c
import React from 'react';
import { Command } from 'gg-editor'; import { Command } from 'gg-editor';
import React from 'react';
import IconFont from '../../common/IconFont'; import IconFont from '../../common/IconFont';
import styles from './index.less'; import styles from './index.less';
......
EditorKoni/src/components/EditorContextMenu/MindContextMenu.tsx
View file @ 190aec4c
import { CanvasMenu, ContextMenu, NodeMenu } from 'gg-editor';
import React from 'react'; import React from 'react';
import { NodeMenu, CanvasMenu, ContextMenu } from 'gg-editor';
import MenuItem from './MenuItem'; import MenuItem from './MenuItem';
import styles from './index.less'; import styles from './index.less';
const MindContextMenu = () => ( const MindContextMenu = () => (
<ContextMenu className={styles.contextMenu}> <ContextMenu className={styles.contextMenu}>
<NodeMenu> <NodeMenu>
<MenuItem command="append" text="Topic" /> <MenuItem command="append" text="Topic" />
<MenuItem command="appendChild" icon="append-child" text="Subtopic" /> <MenuItem command="appendChild" icon="append-child" text="Subtopic" />
<MenuItem command="collapse" text="Fold" /> <MenuItem command="collapse" text="Fold" />
<MenuItem command="expand" text="Unfold" /> <MenuItem command="expand" text="Unfold" />
<MenuItem command="delete" /> <MenuItem command="delete" />
</NodeMenu> </NodeMenu>
<CanvasMenu> <CanvasMenu>
<MenuItem command="undo" /> <MenuItem command="undo" />
<MenuItem command="redo" /> <MenuItem command="redo" />
</CanvasMenu> </CanvasMenu>
</ContextMenu> </ContextMenu>
); );
export default MindContextMenu; export default MindContextMenu;
EditorKoni/src/components/EditorContextMenu/index.tsx
View file @ 190aec4c
import FlowContextMenu from './FlowContextMenu'; import FlowContextMenu from './FlowContextMenu';
import MindContextMenu from './MindContextMenu';
import KoniContextMenu from './KoniContextMenu'; import KoniContextMenu from './KoniContextMenu';
import MindContextMenu from './MindContextMenu';
export { FlowContextMenu, MindContextMenu, KoniContextMenu }; export { FlowContextMenu, MindContextMenu, KoniContextMenu };
EditorKoni/src/components/EditorDetailPanel/DetailForm.tsx
View file @ 190aec4c
import React, { Fragment } from 'react';
import { Card, Form, Input, Select } from 'antd'; import { Card, Form, Input, Select } from 'antd';
import { withPropsAPI } from 'gg-editor'; import React, { Fragment } from 'react';
import { FormComponentProps } from 'antd/es/form'; import { FormComponentProps } from 'antd/es/form';
import { withPropsAPI } from 'gg-editor';
const upperFirst = (str: string) => str.toLowerCase().replace(/( |^)[a-z]/g, (l: string) => l.toUpperCase()); const upperFirst = (str: string) =>
str.toLowerCase().replace(/( |^)[a-z]/g, (l: string) => l.toUpperCase());
const { Item } = Form; const { Item } = Form;
const { Option } = Select; const { Option } = Select;
...@@ -59,12 +61,12 @@ class DetailForm extends React.Component<DetailFormProps> { ...@@ -59,12 +61,12 @@ class DetailForm extends React.Component<DetailFormProps> {
}; };
renderEdgeShapeSelect = () => ( renderEdgeShapeSelect = () => (
<Select onChange={this.handleSubmit}> <Select onChange={this.handleSubmit}>
<Option value="flow-smooth">Smooth</Option> <Option value="flow-smooth">Smooth</Option>
<Option value="flow-polyline">Polyline</Option> <Option value="flow-polyline">Polyline</Option>
<Option value="flow-polyline-round">Polyline Round</Option> <Option value="flow-polyline-round">Polyline Round</Option>
</Select> </Select>
); );
renderNodeDetail = () => { renderNodeDetail = () => {
const { form } = this.props; const { form } = this.props;
......
EditorKoni/src/components/EditorDetailPanel/FlowDetailPanel.tsx
View file @ 190aec4c
import React from 'react'; import { CanvasPanel, DetailPanel, EdgePanel, GroupPanel, MultiPanel, NodePanel } from 'gg-editor';
import { Card } from 'antd'; import { Card } from 'antd';
import { NodePanel, EdgePanel, GroupPanel, MultiPanel, CanvasPanel, DetailPanel } from 'gg-editor'; import React from 'react';
import DetailForm from './DetailForm'; import DetailForm from './DetailForm';
import styles from './index.less'; import styles from './index.less';
const FlowDetailPanel = () => ( const FlowDetailPanel = () => (
<DetailPanel className={styles.detailPanel}> <DetailPanel className={styles.detailPanel}>
<NodePanel> <NodePanel>
<DetailForm type="node" /> <DetailForm type="node" />
</NodePanel> </NodePanel>
<EdgePanel> <EdgePanel>
<DetailForm type="edge" /> <DetailForm type="edge" />
</EdgePanel> </EdgePanel>
<GroupPanel> <GroupPanel>
<DetailForm type="group" /> <DetailForm type="group" />
</GroupPanel> </GroupPanel>
<MultiPanel> <MultiPanel>
<Card type="inner" size="small" title="Multi Select" bordered={false} /> <Card type="inner" size="small" title="Multi Select" bordered={false} />
</MultiPanel> </MultiPanel>
<CanvasPanel> <CanvasPanel>
<Card type="inner" size="small" title="Canvas" bordered={false} /> <Card type="inner" size="small" title="Canvas" bordered={false} />
</CanvasPanel> </CanvasPanel>
</DetailPanel> </DetailPanel>
); );
export default FlowDetailPanel; export default FlowDetailPanel;
EditorKoni/src/components/EditorDetailPanel/MindDetailPanel.tsx
View file @ 190aec4c
import React from 'react'; import { CanvasPanel, DetailPanel, NodePanel } from 'gg-editor';
import { Card } from 'antd'; import { Card } from 'antd';
import { NodePanel, CanvasPanel, DetailPanel } from 'gg-editor'; import React from 'react';
import DetailForm from './DetailForm'; import DetailForm from './DetailForm';
import styles from './index.less'; import styles from './index.less';
const MindDetailPanel = () => ( const MindDetailPanel = () => (
<DetailPanel className={styles.detailPanel}> <DetailPanel className={styles.detailPanel}>
<NodePanel> <NodePanel>
<DetailForm type="node" /> <DetailForm type="node" />
</NodePanel> </NodePanel>
<CanvasPanel> <CanvasPanel>
<Card type="inner" size="small" title="Canvas" bordered={false} /> <Card type="inner" size="small" title="Canvas" bordered={false} />
</CanvasPanel> </CanvasPanel>
</DetailPanel> </DetailPanel>
); );
export default MindDetailPanel; export default MindDetailPanel;
EditorKoni/src/components/EditorDetailPanel/index.tsx
View file @ 190aec4c
import FlowDetailPanel from './FlowDetailPanel'; import FlowDetailPanel from './FlowDetailPanel';
import MindDetailPanel from './MindDetailPanel';
import KoniDetailPanel from './KoniDetailPanel'; import KoniDetailPanel from './KoniDetailPanel';
import MindDetailPanel from './MindDetailPanel';
export { FlowDetailPanel, MindDetailPanel, KoniDetailPanel }; export { FlowDetailPanel, MindDetailPanel, KoniDetailPanel };
EditorKoni/src/components/EditorItemPanel/FlowItemPanel.tsx
View file @ 190aec4c
import React from 'react'; import { Item, ItemPanel } from 'gg-editor';
import { Card } from 'antd'; import { Card } from 'antd';
import { ItemPanel, Item } from 'gg-editor'; import React from 'react';
import styles from './index.less'; import styles from './index.less';
const FlowItemPanel = () => ( const FlowItemPanel = () => (
<ItemPanel className={styles.itemPanel}> <ItemPanel className={styles.itemPanel}>
<Card bordered={false}> <Card bordered={false}>
<Item <Item
type="node" type="node"
size="72*72" size="72*72"
shape="flow-circle" shape="flow-circle"
model={{ model={{
color: '#FA8C16', color: '#FA8C16',
label: 'Start', label: 'Start',
}} }}
src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAiIGhlaWdodD0iODAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxjaXJjbGUgaWQ9ImIiIGN4PSIzNiIgY3k9IjM2IiByPSIzNiIvPjxmaWx0ZXIgeD0iLTkuNyUiIHk9Ii02LjklIiB3aWR0aD0iMTE5LjQlIiBoZWlnaHQ9IjExOS40JSIgZmlsdGVyVW5pdHM9Im9iamVjdEJvdW5kaW5nQm94IiBpZD0iYSI+PGZlT2Zmc2V0IGR5PSIyIiBpbj0iU291cmNlQWxwaGEiIHJlc3VsdD0ic2hhZG93T2Zmc2V0T3V0ZXIxIi8+PGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMiIgaW49InNoYWRvd09mZnNldE91dGVyMSIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29tcG9zaXRlIGluPSJzaGFkb3dCbHVyT3V0ZXIxIiBpbjI9IlNvdXJjZUFscGhhIiBvcGVyYXRvcj0ib3V0IiByZXN1bHQ9InNoYWRvd0JsdXJPdXRlcjEiLz48ZmVDb2xvck1hdHJpeCB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAuMDQgMCIgaW49InNoYWRvd0JsdXJPdXRlcjEiLz48L2ZpbHRlcj48L2RlZnM+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0IDIpIj48dXNlIGZpbGw9IiMwMDAiIGZpbHRlcj0idXJsKCNhKSIgeGxpbms6aHJlZj0iI2IiLz48dXNlIGZpbGwtb3BhY2l0eT0iLjkyIiBmaWxsPSIjRkZGMkU4IiB4bGluazpocmVmPSIjYiIvPjxjaXJjbGUgc3Ryb2tlPSIjRkZDMDY5IiBjeD0iMzYiIGN5PSIzNiIgcj0iMzUuNSIvPjwvZz48dGV4dCBmb250LWZhbWlseT0iUGluZ0ZhbmdTQy1SZWd1bGFyLCBQaW5nRmFuZyBTQyIgZm9udC1zaXplPSIxMiIgZmlsbD0iIzAwMCIgZmlsbC1vcGFjaXR5PSIuNjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQgMikiPjx0c3BhbiB4PSIyMyIgeT0iNDEiPlN0YXJ0PC90c3Bhbj48L3RleHQ+PC9nPjwvc3ZnPg==" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAiIGhlaWdodD0iODAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxjaXJjbGUgaWQ9ImIiIGN4PSIzNiIgY3k9IjM2IiByPSIzNiIvPjxmaWx0ZXIgeD0iLTkuNyUiIHk9Ii02LjklIiB3aWR0aD0iMTE5LjQlIiBoZWlnaHQ9IjExOS40JSIgZmlsdGVyVW5pdHM9Im9iamVjdEJvdW5kaW5nQm94IiBpZD0iYSI+PGZlT2Zmc2V0IGR5PSIyIiBpbj0iU291cmNlQWxwaGEiIHJlc3VsdD0ic2hhZG93T2Zmc2V0T3V0ZXIxIi8+PGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMiIgaW49InNoYWRvd09mZnNldE91dGVyMSIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29tcG9zaXRlIGluPSJzaGFkb3dCbHVyT3V0ZXIxIiBpbjI9IlNvdXJjZUFscGhhIiBvcGVyYXRvcj0ib3V0IiByZXN1bHQ9InNoYWRvd0JsdXJPdXRlcjEiLz48ZmVDb2xvck1hdHJpeCB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAuMDQgMCIgaW49InNoYWRvd0JsdXJPdXRlcjEiLz48L2ZpbHRlcj48L2RlZnM+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0IDIpIj48dXNlIGZpbGw9IiMwMDAiIGZpbHRlcj0idXJsKCNhKSIgeGxpbms6aHJlZj0iI2IiLz48dXNlIGZpbGwtb3BhY2l0eT0iLjkyIiBmaWxsPSIjRkZGMkU4IiB4bGluazpocmVmPSIjYiIvPjxjaXJjbGUgc3Ryb2tlPSIjRkZDMDY5IiBjeD0iMzYiIGN5PSIzNiIgcj0iMzUuNSIvPjwvZz48dGV4dCBmb250LWZhbWlseT0iUGluZ0ZhbmdTQy1SZWd1bGFyLCBQaW5nRmFuZyBTQyIgZm9udC1zaXplPSIxMiIgZmlsbD0iIzAwMCIgZmlsbC1vcGFjaXR5PSIuNjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQgMikiPjx0c3BhbiB4PSIyMyIgeT0iNDEiPlN0YXJ0PC90c3Bhbj48L3RleHQ+PC9nPjwvc3ZnPg=="
/> />
<Item <Item
type="node" type="node"
size="80*48" size="80*48"
shape="flow-rect" shape="flow-rect"
model={{ model={{
color: '#1890FF', color: '#1890FF',
label: 'Normal', label: 'Normal',
}} }}
src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODgiIGhlaWdodD0iNTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxyZWN0IGlkPSJiIiB4PSIwIiB5PSIwIiB3aWR0aD0iODAiIGhlaWdodD0iNDgiIHJ4PSI0Ii8+PGZpbHRlciB4PSItOC44JSIgeT0iLTEwLjQlIiB3aWR0aD0iMTE3LjUlIiBoZWlnaHQ9IjEyOS4yJSIgZmlsdGVyVW5pdHM9Im9iamVjdEJvdW5kaW5nQm94IiBpZD0iYSI+PGZlT2Zmc2V0IGR5PSIyIiBpbj0iU291cmNlQWxwaGEiIHJlc3VsdD0ic2hhZG93T2Zmc2V0T3V0ZXIxIi8+PGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMiIgaW49InNoYWRvd09mZnNldE91dGVyMSIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29tcG9zaXRlIGluPSJzaGFkb3dCbHVyT3V0ZXIxIiBpbjI9IlNvdXJjZUFscGhhIiBvcGVyYXRvcj0ib3V0IiByZXN1bHQ9InNoYWRvd0JsdXJPdXRlcjEiLz48ZmVDb2xvck1hdHJpeCB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAuMDQgMCIgaW49InNoYWRvd0JsdXJPdXRlcjEiLz48L2ZpbHRlcj48L2RlZnM+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0IDIpIj48dXNlIGZpbGw9IiMwMDAiIGZpbHRlcj0idXJsKCNhKSIgeGxpbms6aHJlZj0iI2IiLz48dXNlIGZpbGwtb3BhY2l0eT0iLjkyIiBmaWxsPSIjRTZGN0ZGIiB4bGluazpocmVmPSIjYiIvPjxyZWN0IHN0cm9rZT0iIzE4OTBGRiIgeD0iLjUiIHk9Ii41IiB3aWR0aD0iNzkiIGhlaWdodD0iNDciIHJ4PSI0Ii8+PC9nPjx0ZXh0IGZvbnQtZmFtaWx5PSJQaW5nRmFuZ1NDLVJlZ3VsYXIsIFBpbmdGYW5nIFNDIiBmb250LXNpemU9IjEyIiBmaWxsPSIjMDAwIiBmaWxsLW9wYWNpdHk9Ii42NSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNCAyKSI+PHRzcGFuIHg9IjIxIiB5PSIyOSI+Tm9ybWFsPC90c3Bhbj48L3RleHQ+PC9nPjwvc3ZnPg==" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODgiIGhlaWdodD0iNTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxyZWN0IGlkPSJiIiB4PSIwIiB5PSIwIiB3aWR0aD0iODAiIGhlaWdodD0iNDgiIHJ4PSI0Ii8+PGZpbHRlciB4PSItOC44JSIgeT0iLTEwLjQlIiB3aWR0aD0iMTE3LjUlIiBoZWlnaHQ9IjEyOS4yJSIgZmlsdGVyVW5pdHM9Im9iamVjdEJvdW5kaW5nQm94IiBpZD0iYSI+PGZlT2Zmc2V0IGR5PSIyIiBpbj0iU291cmNlQWxwaGEiIHJlc3VsdD0ic2hhZG93T2Zmc2V0T3V0ZXIxIi8+PGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMiIgaW49InNoYWRvd09mZnNldE91dGVyMSIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29tcG9zaXRlIGluPSJzaGFkb3dCbHVyT3V0ZXIxIiBpbjI9IlNvdXJjZUFscGhhIiBvcGVyYXRvcj0ib3V0IiByZXN1bHQ9InNoYWRvd0JsdXJPdXRlcjEiLz48ZmVDb2xvck1hdHJpeCB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAuMDQgMCIgaW49InNoYWRvd0JsdXJPdXRlcjEiLz48L2ZpbHRlcj48L2RlZnM+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0IDIpIj48dXNlIGZpbGw9IiMwMDAiIGZpbHRlcj0idXJsKCNhKSIgeGxpbms6aHJlZj0iI2IiLz48dXNlIGZpbGwtb3BhY2l0eT0iLjkyIiBmaWxsPSIjRTZGN0ZGIiB4bGluazpocmVmPSIjYiIvPjxyZWN0IHN0cm9rZT0iIzE4OTBGRiIgeD0iLjUiIHk9Ii41IiB3aWR0aD0iNzkiIGhlaWdodD0iNDciIHJ4PSI0Ii8+PC9nPjx0ZXh0IGZvbnQtZmFtaWx5PSJQaW5nRmFuZ1NDLVJlZ3VsYXIsIFBpbmdGYW5nIFNDIiBmb250LXNpemU9IjEyIiBmaWxsPSIjMDAwIiBmaWxsLW9wYWNpdHk9Ii42NSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNCAyKSI+PHRzcGFuIHg9IjIxIiB5PSIyOSI+Tm9ybWFsPC90c3Bhbj48L3RleHQ+PC9nPjwvc3ZnPg=="
/> />
<Item <Item
type="node" type="node"
size="80*72" size="80*72"
shape="flow-rhombus" shape="flow-rhombus"
model={{ model={{
color: '#13C2C2', color: '#13C2C2',
label: 'Decision', label: 'Decision',
}} }}
src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODYiIGhlaWdodD0iNzgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxwYXRoIGQ9Ik00Mi42NyAxLjY3bDM0Ljk2NSAzMS4zNTJhNCA0IDAgMCAxIDAgNS45NTZMNDIuNjcgNzAuMzNhNCA0IDAgMCAxLTUuMzQgMEwyLjM2NSAzOC45NzhhNCA0IDAgMCAxIDAtNS45NTZMMzcuMzMgMS42N2E0IDQgMCAwIDEgNS4zNCAweiIgaWQ9ImIiLz48ZmlsdGVyIHg9Ii04LjglIiB5PSItNi45JSIgd2lkdGg9IjExNy41JSIgaGVpZ2h0PSIxMTkuNCUiIGZpbHRlclVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgaWQ9ImEiPjxmZU9mZnNldCBkeT0iMiIgaW49IlNvdXJjZUFscGhhIiByZXN1bHQ9InNoYWRvd09mZnNldE91dGVyMSIvPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjIiIGluPSJzaGFkb3dPZmZzZXRPdXRlcjEiIHJlc3VsdD0ic2hhZG93Qmx1ck91dGVyMSIvPjxmZUNvbXBvc2l0ZSBpbj0ic2hhZG93Qmx1ck91dGVyMSIgaW4yPSJTb3VyY2VBbHBoYSIgb3BlcmF0b3I9Im91dCIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwLjA0IDAiIGluPSJzaGFkb3dCbHVyT3V0ZXIxIi8+PC9maWx0ZXI+PC9kZWZzPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMyAxKSI+PHVzZSBmaWxsPSIjMDAwIiBmaWx0ZXI9InVybCgjYSkiIHhsaW5rOmhyZWY9IiNiIi8+PHVzZSBmaWxsLW9wYWNpdHk9Ii45MiIgZmlsbD0iI0U2RkZGQiIgeGxpbms6aHJlZj0iI2IiLz48cGF0aCBzdHJva2U9IiM1Q0RCRDMiIGQ9Ik00Mi4zMzcgMi4wNDJhMy41IDMuNSAwIDAgMC00LjY3NCAwTDIuNjk4IDMzLjM5NGEzLjUgMy41IDAgMCAwIDAgNS4yMTJsMzQuOTY1IDMxLjM1MmEzLjUgMy41IDAgMCAwIDQuNjc0IDBsMzQuOTY1LTMxLjM1MmEzLjUgMy41IDAgMCAwIDAtNS4yMTJMNDIuMzM3IDIuMDQyeiIvPjwvZz48dGV4dCBmb250LWZhbWlseT0iUGluZ0ZhbmdTQy1SZWd1bGFyLCBQaW5nRmFuZyBTQyIgZm9udC1zaXplPSIxMiIgZmlsbD0iIzAwMCIgZmlsbC1vcGFjaXR5PSIuNjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMgMSkiPjx0c3BhbiB4PSIxOCIgeT0iNDIiPkRlY2lzaW9uPC90c3Bhbj48L3RleHQ+PC9nPjwvc3ZnPg==" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODYiIGhlaWdodD0iNzgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxwYXRoIGQ9Ik00Mi42NyAxLjY3bDM0Ljk2NSAzMS4zNTJhNCA0IDAgMCAxIDAgNS45NTZMNDIuNjcgNzAuMzNhNCA0IDAgMCAxLTUuMzQgMEwyLjM2NSAzOC45NzhhNCA0IDAgMCAxIDAtNS45NTZMMzcuMzMgMS42N2E0IDQgMCAwIDEgNS4zNCAweiIgaWQ9ImIiLz48ZmlsdGVyIHg9Ii04LjglIiB5PSItNi45JSIgd2lkdGg9IjExNy41JSIgaGVpZ2h0PSIxMTkuNCUiIGZpbHRlclVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgaWQ9ImEiPjxmZU9mZnNldCBkeT0iMiIgaW49IlNvdXJjZUFscGhhIiByZXN1bHQ9InNoYWRvd09mZnNldE91dGVyMSIvPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjIiIGluPSJzaGFkb3dPZmZzZXRPdXRlcjEiIHJlc3VsdD0ic2hhZG93Qmx1ck91dGVyMSIvPjxmZUNvbXBvc2l0ZSBpbj0ic2hhZG93Qmx1ck91dGVyMSIgaW4yPSJTb3VyY2VBbHBoYSIgb3BlcmF0b3I9Im91dCIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwLjA0IDAiIGluPSJzaGFkb3dCbHVyT3V0ZXIxIi8+PC9maWx0ZXI+PC9kZWZzPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMyAxKSI+PHVzZSBmaWxsPSIjMDAwIiBmaWx0ZXI9InVybCgjYSkiIHhsaW5rOmhyZWY9IiNiIi8+PHVzZSBmaWxsLW9wYWNpdHk9Ii45MiIgZmlsbD0iI0U2RkZGQiIgeGxpbms6aHJlZj0iI2IiLz48cGF0aCBzdHJva2U9IiM1Q0RCRDMiIGQ9Ik00Mi4zMzcgMi4wNDJhMy41IDMuNSAwIDAgMC00LjY3NCAwTDIuNjk4IDMzLjM5NGEzLjUgMy41IDAgMCAwIDAgNS4yMTJsMzQuOTY1IDMxLjM1MmEzLjUgMy41IDAgMCAwIDQuNjc0IDBsMzQuOTY1LTMxLjM1MmEzLjUgMy41IDAgMCAwIDAtNS4yMTJMNDIuMzM3IDIuMDQyeiIvPjwvZz48dGV4dCBmb250LWZhbWlseT0iUGluZ0ZhbmdTQy1SZWd1bGFyLCBQaW5nRmFuZyBTQyIgZm9udC1zaXplPSIxMiIgZmlsbD0iIzAwMCIgZmlsbC1vcGFjaXR5PSIuNjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMgMSkiPjx0c3BhbiB4PSIxOCIgeT0iNDIiPkRlY2lzaW9uPC90c3Bhbj48L3RleHQ+PC9nPjwvc3ZnPg=="
/> />
<Item <Item
type="node" type="node"
size="80*48" size="80*48"
shape="flow-capsule" shape="flow-capsule"
model={{ model={{
color: '#722ED1', color: '#722ED1',
label: 'Model', label: 'Model',
}} }}
src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODgiIGhlaWdodD0iNTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxyZWN0IGlkPSJiIiB4PSIwIiB5PSIwIiB3aWR0aD0iODAiIGhlaWdodD0iNDgiIHJ4PSIyNCIvPjxmaWx0ZXIgeD0iLTguOCUiIHk9Ii0xMC40JSIgd2lkdGg9IjExNy41JSIgaGVpZ2h0PSIxMjkuMiUiIGZpbHRlclVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgaWQ9ImEiPjxmZU9mZnNldCBkeT0iMiIgaW49IlNvdXJjZUFscGhhIiByZXN1bHQ9InNoYWRvd09mZnNldE91dGVyMSIvPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjIiIGluPSJzaGFkb3dPZmZzZXRPdXRlcjEiIHJlc3VsdD0ic2hhZG93Qmx1ck91dGVyMSIvPjxmZUNvbXBvc2l0ZSBpbj0ic2hhZG93Qmx1ck91dGVyMSIgaW4yPSJTb3VyY2VBbHBoYSIgb3BlcmF0b3I9Im91dCIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwLjA0IDAiIGluPSJzaGFkb3dCbHVyT3V0ZXIxIi8+PC9maWx0ZXI+PC9kZWZzPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNCAyKSI+PHVzZSBmaWxsPSIjMDAwIiBmaWx0ZXI9InVybCgjYSkiIHhsaW5rOmhyZWY9IiNiIi8+PHVzZSBmaWxsLW9wYWNpdHk9Ii45MiIgZmlsbD0iI0Y5RjBGRiIgeGxpbms6aHJlZj0iI2IiLz48cmVjdCBzdHJva2U9IiNCMzdGRUIiIHg9Ii41IiB5PSIuNSIgd2lkdGg9Ijc5IiBoZWlnaHQ9IjQ3IiByeD0iMjMuNSIvPjwvZz48dGV4dCBmb250LWZhbWlseT0iUGluZ0ZhbmdTQy1SZWd1bGFyLCBQaW5nRmFuZyBTQyIgZm9udC1zaXplPSIxMiIgZmlsbD0iIzAwMCIgZmlsbC1vcGFjaXR5PSIuNjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQgMikiPjx0c3BhbiB4PSIyNCIgeT0iMjkiPk1vZGVsPC90c3Bhbj48L3RleHQ+PC9nPjwvc3ZnPg==" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODgiIGhlaWdodD0iNTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxyZWN0IGlkPSJiIiB4PSIwIiB5PSIwIiB3aWR0aD0iODAiIGhlaWdodD0iNDgiIHJ4PSIyNCIvPjxmaWx0ZXIgeD0iLTguOCUiIHk9Ii0xMC40JSIgd2lkdGg9IjExNy41JSIgaGVpZ2h0PSIxMjkuMiUiIGZpbHRlclVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgaWQ9ImEiPjxmZU9mZnNldCBkeT0iMiIgaW49IlNvdXJjZUFscGhhIiByZXN1bHQ9InNoYWRvd09mZnNldE91dGVyMSIvPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjIiIGluPSJzaGFkb3dPZmZzZXRPdXRlcjEiIHJlc3VsdD0ic2hhZG93Qmx1ck91dGVyMSIvPjxmZUNvbXBvc2l0ZSBpbj0ic2hhZG93Qmx1ck91dGVyMSIgaW4yPSJTb3VyY2VBbHBoYSIgb3BlcmF0b3I9Im91dCIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwLjA0IDAiIGluPSJzaGFkb3dCbHVyT3V0ZXIxIi8+PC9maWx0ZXI+PC9kZWZzPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNCAyKSI+PHVzZSBmaWxsPSIjMDAwIiBmaWx0ZXI9InVybCgjYSkiIHhsaW5rOmhyZWY9IiNiIi8+PHVzZSBmaWxsLW9wYWNpdHk9Ii45MiIgZmlsbD0iI0Y5RjBGRiIgeGxpbms6aHJlZj0iI2IiLz48cmVjdCBzdHJva2U9IiNCMzdGRUIiIHg9Ii41IiB5PSIuNSIgd2lkdGg9Ijc5IiBoZWlnaHQ9IjQ3IiByeD0iMjMuNSIvPjwvZz48dGV4dCBmb250LWZhbWlseT0iUGluZ0ZhbmdTQy1SZWd1bGFyLCBQaW5nRmFuZyBTQyIgZm9udC1zaXplPSIxMiIgZmlsbD0iIzAwMCIgZmlsbC1vcGFjaXR5PSIuNjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQgMikiPjx0c3BhbiB4PSIyNCIgeT0iMjkiPk1vZGVsPC90c3Bhbj48L3RleHQ+PC9nPjwvc3ZnPg=="
/> />
</Card> </Card>
</ItemPanel> </ItemPanel>
); );
export default FlowItemPanel; export default FlowItemPanel;
EditorKoni/src/components/EditorMinimap/index.tsx
View file @ 190aec4c
import React from 'react';
import { Card } from 'antd'; import { Card } from 'antd';
import { Minimap } from 'gg-editor'; import { Minimap } from 'gg-editor';
import React from 'react';
const EditorMinimap = () => ( const EditorMinimap = () => (
<Card type="inner" size="small" title="Minimap" bordered={false}> <Card type="inner" size="small" title="Minimap" bordered={false}>
<Minimap height={200} /> <Minimap height={200} />
</Card> </Card>
); );
export default EditorMinimap; export default EditorMinimap;
EditorKoni/src/components/EditorToolbar/FlowToolbar.tsx
View file @ 190aec4c
import React from 'react';
import { Divider } from 'antd'; import { Divider } from 'antd';
import React from 'react';
import { Toolbar } from 'gg-editor'; import { Toolbar } from 'gg-editor';
import ToolbarButton from './ToolbarButton'; import ToolbarButton from './ToolbarButton';
import styles from './index.less'; import styles from './index.less';
const FlowToolbar = () => ( const FlowToolbar = () => (
<Toolbar className={styles.toolbar}> <Toolbar className={styles.toolbar}>
<ToolbarButton command="undo" /> <ToolbarButton command="undo" />
<ToolbarButton command="redo" /> <ToolbarButton command="redo" />
<Divider type="vertical" /> <Divider type="vertical" />
<ToolbarButton command="copy" /> <ToolbarButton command="copy" />
<ToolbarButton command="paste" /> <ToolbarButton command="paste" />
<ToolbarButton command="delete" /> <ToolbarButton command="delete" />
<Divider type="vertical" /> <Divider type="vertical" />
<ToolbarButton command="zoomIn" icon="zoom-in" text="Zoom In" /> <ToolbarButton command="zoomIn" icon="zoom-in" text="Zoom In" />
<ToolbarButton command="zoomOut" icon="zoom-out" text="Zoom Out" /> <ToolbarButton command="zoomOut" icon="zoom-out" text="Zoom Out" />
<ToolbarButton command="autoZoom" icon="fit-map" text="Fit Map" /> <ToolbarButton command="autoZoom" icon="fit-map" text="Fit Map" />
<ToolbarButton command="resetZoom" icon="actual-size" text="Actual Size" /> <ToolbarButton command="resetZoom" icon="actual-size" text="Actual Size" />
<Divider type="vertical" /> <Divider type="vertical" />
<ToolbarButton command="toBack" icon="to-back" text="To Back" /> <ToolbarButton command="toBack" icon="to-back" text="To Back" />
<ToolbarButton command="toFront" icon="to-front" text="To Front" /> <ToolbarButton command="toFront" icon="to-front" text="To Front" />
<Divider type="vertical" /> <Divider type="vertical" />
<ToolbarButton command="multiSelect" icon="multi-select" text="Multi Select" /> <ToolbarButton command="multiSelect" icon="multi-select" text="Multi Select" />
<ToolbarButton command="addGroup" icon="group" text="Add Group" /> <ToolbarButton command="addGroup" icon="group" text="Add Group" />
<ToolbarButton command="unGroup" icon="ungroup" text="Ungroup" /> <ToolbarButton command="unGroup" icon="ungroup" text="Ungroup" />
</Toolbar> </Toolbar>
); );
export default FlowToolbar; export default FlowToolbar;
EditorKoni/src/components/EditorToolbar/MindToolbar.tsx
View file @ 190aec4c
import React from 'react';
import { Divider } from 'antd'; import { Divider } from 'antd';
import React from 'react';
import { Toolbar } from 'gg-editor'; import { Toolbar } from 'gg-editor';
import ToolbarButton from './ToolbarButton'; import ToolbarButton from './ToolbarButton';
import styles from './index.less'; import styles from './index.less';
const FlowToolbar = () => ( const FlowToolbar = () => (
<Toolbar className={styles.toolbar}> <Toolbar className={styles.toolbar}>
<ToolbarButton command="undo" /> <ToolbarButton command="undo" />
<ToolbarButton command="redo" /> <ToolbarButton command="redo" />
<Divider type="vertical" /> <Divider type="vertical" />
<ToolbarButton command="zoomIn" icon="zoom-in" text="Zoom In" /> <ToolbarButton command="zoomIn" icon="zoom-in" text="Zoom In" />
<ToolbarButton command="zoomOut" icon="zoom-out" text="Zoom Out" /> <ToolbarButton command="zoomOut" icon="zoom-out" text="Zoom Out" />
<ToolbarButton command="autoZoom" icon="fit-map" text="Fit Map" /> <ToolbarButton command="autoZoom" icon="fit-map" text="Fit Map" />
<ToolbarButton command="resetZoom" icon="actual-size" text="Actual Size" /> <ToolbarButton command="resetZoom" icon="actual-size" text="Actual Size" />
<Divider type="vertical" /> <Divider type="vertical" />
<ToolbarButton command="append" text="Topic" /> <ToolbarButton command="append" text="Topic" />
<ToolbarButton command="appendChild" icon="append-child" text="Subtopic" /> <ToolbarButton command="appendChild" icon="append-child" text="Subtopic" />
<Divider type="vertical" /> <Divider type="vertical" />
<ToolbarButton command="collapse" text="Fold" /> <ToolbarButton command="collapse" text="Fold" />
<ToolbarButton command="expand" text="Unfold" /> <ToolbarButton command="expand" text="Unfold" />
</Toolbar> </Toolbar>
); );
export default FlowToolbar; export default FlowToolbar;
EditorKoni/src/components/EditorToolbar/ToolbarButton.tsx
View file @ 190aec4c
import { Command } from 'gg-editor';
import React from 'react'; import React from 'react';
import { Tooltip } from 'antd'; import { Tooltip } from 'antd';
import { Command } from 'gg-editor';
import IconFont from '../../common/IconFont'; import IconFont from '../../common/IconFont';
import styles from './index.less'; import styles from './index.less';
const upperFirst = (str: string) => str.toLowerCase().replace(/( |^)[a-z]/g, (l: string) => l.toUpperCase()); const upperFirst = (str: string) =>
str.toLowerCase().replace(/( |^)[a-z]/g, (l: string) => l.toUpperCase());
interface ToolbarButtonProps { interface ToolbarButtonProps {
command: string; command: string;
......
EditorKoni/src/components/EditorToolbar/index.tsx
View file @ 190aec4c
import FlowToolbar from './FlowToolbar'; import FlowToolbar from './FlowToolbar';
import MindToolbar from './MindToolbar';
import KoniToolbar from './KoniToolbar'; import KoniToolbar from './KoniToolbar';
import MindToolbar from './MindToolbar';
export { FlowToolbar, MindToolbar, KoniToolbar }; export { FlowToolbar, MindToolbar, KoniToolbar };
EditorKoni/src/index.tsx
View file @ 190aec4c
import React from 'react'; import { Col, Row } from 'antd';
import { Row, Col } from 'antd';
import GGEditor, { Koni } from 'gg-editor'; import GGEditor, { Koni } from 'gg-editor';
import { PageHeaderWrapper } from '@ant-design/pro-layout'; import { PageHeaderWrapper } from '@ant-design/pro-layout';
import React from 'react';
import { formatMessage } from 'umi-plugin-react/locale'; import { formatMessage } from 'umi-plugin-react/locale';
import EditorMinimap from './components/EditorMinimap'; import EditorMinimap from './components/EditorMinimap';
import { KoniContextMenu } from './components/EditorContextMenu'; import { KoniContextMenu } from './components/EditorContextMenu';
import { KoniToolbar } from './components/EditorToolbar';
import { KoniItemPanel } from './components/EditorItemPanel';
import { KoniDetailPanel } from './components/EditorDetailPanel'; import { KoniDetailPanel } from './components/EditorDetailPanel';
import { KoniItemPanel } from './components/EditorItemPanel';
import { KoniToolbar } from './components/EditorToolbar';
import styles from './index.less'; import styles from './index.less';
GGEditor.setTrackable(false); GGEditor.setTrackable(false);
export default () => ( export default () => (
<PageHeaderWrapper <PageHeaderWrapper
content={formatMessage({ content={formatMessage({
id: 'BLOCK_NAME.description', id: 'BLOCK_NAME.description',
defaultMessage: 'description', defaultMessage: 'description',
})} })}
> >
<GGEditor className={styles.editor}> <GGEditor className={styles.editor}>
<Row type="flex" className={styles.editorHd}> <Row type="flex" className={styles.editorHd}>
<Col span={24}> <Col span={24}>
<KoniToolbar /> <KoniToolbar />
</Col> </Col>
</Row> </Row>
<Row type="flex" className={styles.editorBd}> <Row type="flex" className={styles.editorBd}>
<Col span={2} className={styles.editorSidebar}> <Col span={2} className={styles.editorSidebar}>
<KoniItemPanel /> <KoniItemPanel />
</Col> </Col>
<Col span={16} className={styles.editorContent}> <Col span={16} className={styles.editorContent}>
<Koni className={styles.koni} /> <Koni className={styles.koni} />
</Col> </Col>
<Col span={6} className={styles.editorSidebar}> <Col span={6} className={styles.editorSidebar}>
<KoniDetailPanel /> <KoniDetailPanel />
<EditorMinimap /> <EditorMinimap />
</Col> </Col>
</Row> </Row>
<KoniContextMenu /> <KoniContextMenu />
</GGEditor> </GGEditor>
</PageHeaderWrapper> </PageHeaderWrapper>
); );
EditorMind/src/components/EditorContextMenu/FlowContextMenu.tsx
View file @ 190aec4c
import { CanvasMenu, ContextMenu, EdgeMenu, GroupMenu, MultiMenu, NodeMenu } from 'gg-editor';
import React from 'react'; import React from 'react';
import { NodeMenu, EdgeMenu, GroupMenu, MultiMenu, CanvasMenu, ContextMenu } from 'gg-editor';
import MenuItem from './MenuItem'; import MenuItem from './MenuItem';
import styles from './index.less'; import styles from './index.less';
const FlowContextMenu = () => ( const FlowContextMenu = () => (
<ContextMenu className={styles.contextMenu}> <ContextMenu className={styles.contextMenu}>
<NodeMenu> <NodeMenu>
<MenuItem command="copy" /> <MenuItem command="copy" />
<MenuItem command="delete" /> <MenuItem command="delete" />
</NodeMenu> </NodeMenu>
<EdgeMenu> <EdgeMenu>
<MenuItem command="delete" /> <MenuItem command="delete" />
</EdgeMenu> </EdgeMenu>
<GroupMenu> <GroupMenu>
<MenuItem command="copy" /> <MenuItem command="copy" />
<MenuItem command="delete" /> <MenuItem command="delete" />
<MenuItem command="unGroup" icon="ungroup" text="Ungroup" /> <MenuItem command="unGroup" icon="ungroup" text="Ungroup" />
</GroupMenu> </GroupMenu>
<MultiMenu> <MultiMenu>
<MenuItem command="copy" /> <MenuItem command="copy" />
<MenuItem command="paste" /> <MenuItem command="paste" />
<MenuItem command="addGroup" icon="group" text="Add Group" /> <MenuItem command="addGroup" icon="group" text="Add Group" />
<MenuItem command="delete" /> <MenuItem command="delete" />
</MultiMenu> </MultiMenu>
<CanvasMenu> <CanvasMenu>
<MenuItem command="undo" /> <MenuItem command="undo" />
<MenuItem command="redo" /> <MenuItem command="redo" />
<MenuItem command="pasteHere" icon="paste" text="Paste Here" /> <MenuItem command="pasteHere" icon="paste" text="Paste Here" />
</CanvasMenu> </CanvasMenu>
</ContextMenu> </ContextMenu>
); );
export default FlowContextMenu; export default FlowContextMenu;
EditorMind/src/components/EditorContextMenu/MenuItem.tsx
View file @ 190aec4c
import React from 'react';
import { Command } from 'gg-editor'; import { Command } from 'gg-editor';
import React from 'react';
import IconFont from '../../common/IconFont'; import IconFont from '../../common/IconFont';
import styles from './index.less'; import styles from './index.less';
const upperFirst = (str: string) => str.toLowerCase().replace(/( |^)[a-z]/g, (l: string) => l.toUpperCase()); const upperFirst = (str: string) =>
str.toLowerCase().replace(/( |^)[a-z]/g, (l: string) => l.toUpperCase());
interface MenuItemProps { interface MenuItemProps {
command: string; command: string;
......
EditorMind/src/components/EditorContextMenu/MindContextMenu.tsx
View file @ 190aec4c
import { CanvasMenu, ContextMenu, NodeMenu } from 'gg-editor';
import React from 'react'; import React from 'react';
import { NodeMenu, CanvasMenu, ContextMenu } from 'gg-editor';
import MenuItem from './MenuItem'; import MenuItem from './MenuItem';
import styles from './index.less'; import styles from './index.less';
const MindContextMenu = () => ( const MindContextMenu = () => (
<ContextMenu className={styles.contextMenu}> <ContextMenu className={styles.contextMenu}>
<NodeMenu> <NodeMenu>
<MenuItem command="append" text="Topic" /> <MenuItem command="append" text="Topic" />
<MenuItem command="appendChild" icon="append-child" text="Subtopic" /> <MenuItem command="appendChild" icon="append-child" text="Subtopic" />
<MenuItem command="collapse" text="Fold" /> <MenuItem command="collapse" text="Fold" />
<MenuItem command="expand" text="Unfold" /> <MenuItem command="expand" text="Unfold" />
<MenuItem command="delete" /> <MenuItem command="delete" />
</NodeMenu> </NodeMenu>
<CanvasMenu> <CanvasMenu>
<MenuItem command="undo" /> <MenuItem command="undo" />
<MenuItem command="redo" /> <MenuItem command="redo" />
</CanvasMenu> </CanvasMenu>
</ContextMenu> </ContextMenu>
); );
export default MindContextMenu; export default MindContextMenu;
EditorMind/src/components/EditorContextMenu/index.tsx
View file @ 190aec4c
import FlowContextMenu from './FlowContextMenu'; import FlowContextMenu from './FlowContextMenu';
import MindContextMenu from './MindContextMenu';
import KoniContextMenu from './KoniContextMenu'; import KoniContextMenu from './KoniContextMenu';
import MindContextMenu from './MindContextMenu';
export { FlowContextMenu, MindContextMenu, KoniContextMenu }; export { FlowContextMenu, MindContextMenu, KoniContextMenu };
EditorMind/src/components/EditorDetailPanel/DetailForm.tsx
View file @ 190aec4c
import React, { Fragment } from 'react';
import { Card, Form, Input, Select } from 'antd'; import { Card, Form, Input, Select } from 'antd';
import { withPropsAPI } from 'gg-editor'; import React, { Fragment } from 'react';
import { FormComponentProps } from 'antd/es/form'; import { FormComponentProps } from 'antd/es/form';
import { withPropsAPI } from 'gg-editor';
const upperFirst = (str: string) => str.toLowerCase().replace(/( |^)[a-z]/g, (l: string) => l.toUpperCase()); const upperFirst = (str: string) =>
str.toLowerCase().replace(/( |^)[a-z]/g, (l: string) => l.toUpperCase());
const { Item } = Form; const { Item } = Form;
const { Option } = Select; const { Option } = Select;
...@@ -59,12 +61,12 @@ class DetailForm extends React.Component<DetailFormProps> { ...@@ -59,12 +61,12 @@ class DetailForm extends React.Component<DetailFormProps> {
}; };
renderEdgeShapeSelect = () => ( renderEdgeShapeSelect = () => (
<Select onChange={this.handleSubmit}> <Select onChange={this.handleSubmit}>
<Option value="flow-smooth">Smooth</Option> <Option value="flow-smooth">Smooth</Option>
<Option value="flow-polyline">Polyline</Option> <Option value="flow-polyline">Polyline</Option>
<Option value="flow-polyline-round">Polyline Round</Option> <Option value="flow-polyline-round">Polyline Round</Option>
</Select> </Select>
); );
renderNodeDetail = () => { renderNodeDetail = () => {
const { form } = this.props; const { form } = this.props;
......
EditorMind/src/components/EditorDetailPanel/FlowDetailPanel.tsx
View file @ 190aec4c
import React from 'react'; import { CanvasPanel, DetailPanel, EdgePanel, GroupPanel, MultiPanel, NodePanel } from 'gg-editor';
import { Card } from 'antd'; import { Card } from 'antd';
import { NodePanel, EdgePanel, GroupPanel, MultiPanel, CanvasPanel, DetailPanel } from 'gg-editor'; import React from 'react';
import DetailForm from './DetailForm'; import DetailForm from './DetailForm';
import styles from './index.less'; import styles from './index.less';
const FlowDetailPanel = () => ( const FlowDetailPanel = () => (
<DetailPanel className={styles.detailPanel}> <DetailPanel className={styles.detailPanel}>
<NodePanel> <NodePanel>
<DetailForm type="node" /> <DetailForm type="node" />
</NodePanel> </NodePanel>
<EdgePanel> <EdgePanel>
<DetailForm type="edge" /> <DetailForm type="edge" />
</EdgePanel> </EdgePanel>
<GroupPanel> <GroupPanel>
<DetailForm type="group" /> <DetailForm type="group" />
</GroupPanel> </GroupPanel>
<MultiPanel> <MultiPanel>
<Card type="inner" size="small" title="Multi Select" bordered={false} /> <Card type="inner" size="small" title="Multi Select" bordered={false} />
</MultiPanel> </MultiPanel>
<CanvasPanel> <CanvasPanel>
<Card type="inner" size="small" title="Canvas" bordered={false} /> <Card type="inner" size="small" title="Canvas" bordered={false} />
</CanvasPanel> </CanvasPanel>
</DetailPanel> </DetailPanel>
); );
export default FlowDetailPanel; export default FlowDetailPanel;
EditorMind/src/components/EditorDetailPanel/MindDetailPanel.tsx
View file @ 190aec4c
import React from 'react'; import { CanvasPanel, DetailPanel, NodePanel } from 'gg-editor';
import { Card } from 'antd'; import { Card } from 'antd';
import { NodePanel, CanvasPanel, DetailPanel } from 'gg-editor'; import React from 'react';
import DetailForm from './DetailForm'; import DetailForm from './DetailForm';
import styles from './index.less'; import styles from './index.less';
const MindDetailPanel = () => ( const MindDetailPanel = () => (
<DetailPanel className={styles.detailPanel}> <DetailPanel className={styles.detailPanel}>
<NodePanel> <NodePanel>
<DetailForm type="node" /> <DetailForm type="node" />
</NodePanel> </NodePanel>
<CanvasPanel> <CanvasPanel>
<Card type="inner" size="small" title="Canvas" bordered={false} /> <Card type="inner" size="small" title="Canvas" bordered={false} />
</CanvasPanel> </CanvasPanel>
</DetailPanel> </DetailPanel>
); );
export default MindDetailPanel; export default MindDetailPanel;
EditorMind/src/components/EditorDetailPanel/index.tsx
View file @ 190aec4c
import FlowDetailPanel from './FlowDetailPanel'; import FlowDetailPanel from './FlowDetailPanel';
import MindDetailPanel from './MindDetailPanel';
import KoniDetailPanel from './KoniDetailPanel'; import KoniDetailPanel from './KoniDetailPanel';
import MindDetailPanel from './MindDetailPanel';
export { FlowDetailPanel, MindDetailPanel, KoniDetailPanel }; export { FlowDetailPanel, MindDetailPanel, KoniDetailPanel };
EditorMind/src/components/EditorItemPanel/FlowItemPanel.tsx
View file @ 190aec4c
import React from 'react'; import { Item, ItemPanel } from 'gg-editor';
import { Card } from 'antd'; import { Card } from 'antd';
import { ItemPanel, Item } from 'gg-editor'; import React from 'react';
import styles from './index.less'; import styles from './index.less';
const FlowItemPanel = () => ( const FlowItemPanel = () => (
<ItemPanel className={styles.itemPanel}> <ItemPanel className={styles.itemPanel}>
<Card bordered={false}> <Card bordered={false}>
<Item <Item
type="node" type="node"
size="72*72" size="72*72"
shape="flow-circle" shape="flow-circle"
model={{ model={{
color: '#FA8C16', color: '#FA8C16',
label: 'Start', label: 'Start',
}} }}
src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAiIGhlaWdodD0iODAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxjaXJjbGUgaWQ9ImIiIGN4PSIzNiIgY3k9IjM2IiByPSIzNiIvPjxmaWx0ZXIgeD0iLTkuNyUiIHk9Ii02LjklIiB3aWR0aD0iMTE5LjQlIiBoZWlnaHQ9IjExOS40JSIgZmlsdGVyVW5pdHM9Im9iamVjdEJvdW5kaW5nQm94IiBpZD0iYSI+PGZlT2Zmc2V0IGR5PSIyIiBpbj0iU291cmNlQWxwaGEiIHJlc3VsdD0ic2hhZG93T2Zmc2V0T3V0ZXIxIi8+PGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMiIgaW49InNoYWRvd09mZnNldE91dGVyMSIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29tcG9zaXRlIGluPSJzaGFkb3dCbHVyT3V0ZXIxIiBpbjI9IlNvdXJjZUFscGhhIiBvcGVyYXRvcj0ib3V0IiByZXN1bHQ9InNoYWRvd0JsdXJPdXRlcjEiLz48ZmVDb2xvck1hdHJpeCB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAuMDQgMCIgaW49InNoYWRvd0JsdXJPdXRlcjEiLz48L2ZpbHRlcj48L2RlZnM+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0IDIpIj48dXNlIGZpbGw9IiMwMDAiIGZpbHRlcj0idXJsKCNhKSIgeGxpbms6aHJlZj0iI2IiLz48dXNlIGZpbGwtb3BhY2l0eT0iLjkyIiBmaWxsPSIjRkZGMkU4IiB4bGluazpocmVmPSIjYiIvPjxjaXJjbGUgc3Ryb2tlPSIjRkZDMDY5IiBjeD0iMzYiIGN5PSIzNiIgcj0iMzUuNSIvPjwvZz48dGV4dCBmb250LWZhbWlseT0iUGluZ0ZhbmdTQy1SZWd1bGFyLCBQaW5nRmFuZyBTQyIgZm9udC1zaXplPSIxMiIgZmlsbD0iIzAwMCIgZmlsbC1vcGFjaXR5PSIuNjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQgMikiPjx0c3BhbiB4PSIyMyIgeT0iNDEiPlN0YXJ0PC90c3Bhbj48L3RleHQ+PC9nPjwvc3ZnPg==" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAiIGhlaWdodD0iODAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxjaXJjbGUgaWQ9ImIiIGN4PSIzNiIgY3k9IjM2IiByPSIzNiIvPjxmaWx0ZXIgeD0iLTkuNyUiIHk9Ii02LjklIiB3aWR0aD0iMTE5LjQlIiBoZWlnaHQ9IjExOS40JSIgZmlsdGVyVW5pdHM9Im9iamVjdEJvdW5kaW5nQm94IiBpZD0iYSI+PGZlT2Zmc2V0IGR5PSIyIiBpbj0iU291cmNlQWxwaGEiIHJlc3VsdD0ic2hhZG93T2Zmc2V0T3V0ZXIxIi8+PGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMiIgaW49InNoYWRvd09mZnNldE91dGVyMSIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29tcG9zaXRlIGluPSJzaGFkb3dCbHVyT3V0ZXIxIiBpbjI9IlNvdXJjZUFscGhhIiBvcGVyYXRvcj0ib3V0IiByZXN1bHQ9InNoYWRvd0JsdXJPdXRlcjEiLz48ZmVDb2xvck1hdHJpeCB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAuMDQgMCIgaW49InNoYWRvd0JsdXJPdXRlcjEiLz48L2ZpbHRlcj48L2RlZnM+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0IDIpIj48dXNlIGZpbGw9IiMwMDAiIGZpbHRlcj0idXJsKCNhKSIgeGxpbms6aHJlZj0iI2IiLz48dXNlIGZpbGwtb3BhY2l0eT0iLjkyIiBmaWxsPSIjRkZGMkU4IiB4bGluazpocmVmPSIjYiIvPjxjaXJjbGUgc3Ryb2tlPSIjRkZDMDY5IiBjeD0iMzYiIGN5PSIzNiIgcj0iMzUuNSIvPjwvZz48dGV4dCBmb250LWZhbWlseT0iUGluZ0ZhbmdTQy1SZWd1bGFyLCBQaW5nRmFuZyBTQyIgZm9udC1zaXplPSIxMiIgZmlsbD0iIzAwMCIgZmlsbC1vcGFjaXR5PSIuNjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQgMikiPjx0c3BhbiB4PSIyMyIgeT0iNDEiPlN0YXJ0PC90c3Bhbj48L3RleHQ+PC9nPjwvc3ZnPg=="
/> />
<Item <Item
type="node" type="node"
size="80*48" size="80*48"
shape="flow-rect" shape="flow-rect"
model={{ model={{
color: '#1890FF', color: '#1890FF',
label: 'Normal', label: 'Normal',
}} }}
src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODgiIGhlaWdodD0iNTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxyZWN0IGlkPSJiIiB4PSIwIiB5PSIwIiB3aWR0aD0iODAiIGhlaWdodD0iNDgiIHJ4PSI0Ii8+PGZpbHRlciB4PSItOC44JSIgeT0iLTEwLjQlIiB3aWR0aD0iMTE3LjUlIiBoZWlnaHQ9IjEyOS4yJSIgZmlsdGVyVW5pdHM9Im9iamVjdEJvdW5kaW5nQm94IiBpZD0iYSI+PGZlT2Zmc2V0IGR5PSIyIiBpbj0iU291cmNlQWxwaGEiIHJlc3VsdD0ic2hhZG93T2Zmc2V0T3V0ZXIxIi8+PGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMiIgaW49InNoYWRvd09mZnNldE91dGVyMSIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29tcG9zaXRlIGluPSJzaGFkb3dCbHVyT3V0ZXIxIiBpbjI9IlNvdXJjZUFscGhhIiBvcGVyYXRvcj0ib3V0IiByZXN1bHQ9InNoYWRvd0JsdXJPdXRlcjEiLz48ZmVDb2xvck1hdHJpeCB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAuMDQgMCIgaW49InNoYWRvd0JsdXJPdXRlcjEiLz48L2ZpbHRlcj48L2RlZnM+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0IDIpIj48dXNlIGZpbGw9IiMwMDAiIGZpbHRlcj0idXJsKCNhKSIgeGxpbms6aHJlZj0iI2IiLz48dXNlIGZpbGwtb3BhY2l0eT0iLjkyIiBmaWxsPSIjRTZGN0ZGIiB4bGluazpocmVmPSIjYiIvPjxyZWN0IHN0cm9rZT0iIzE4OTBGRiIgeD0iLjUiIHk9Ii41IiB3aWR0aD0iNzkiIGhlaWdodD0iNDciIHJ4PSI0Ii8+PC9nPjx0ZXh0IGZvbnQtZmFtaWx5PSJQaW5nRmFuZ1NDLVJlZ3VsYXIsIFBpbmdGYW5nIFNDIiBmb250LXNpemU9IjEyIiBmaWxsPSIjMDAwIiBmaWxsLW9wYWNpdHk9Ii42NSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNCAyKSI+PHRzcGFuIHg9IjIxIiB5PSIyOSI+Tm9ybWFsPC90c3Bhbj48L3RleHQ+PC9nPjwvc3ZnPg==" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODgiIGhlaWdodD0iNTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxyZWN0IGlkPSJiIiB4PSIwIiB5PSIwIiB3aWR0aD0iODAiIGhlaWdodD0iNDgiIHJ4PSI0Ii8+PGZpbHRlciB4PSItOC44JSIgeT0iLTEwLjQlIiB3aWR0aD0iMTE3LjUlIiBoZWlnaHQ9IjEyOS4yJSIgZmlsdGVyVW5pdHM9Im9iamVjdEJvdW5kaW5nQm94IiBpZD0iYSI+PGZlT2Zmc2V0IGR5PSIyIiBpbj0iU291cmNlQWxwaGEiIHJlc3VsdD0ic2hhZG93T2Zmc2V0T3V0ZXIxIi8+PGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMiIgaW49InNoYWRvd09mZnNldE91dGVyMSIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29tcG9zaXRlIGluPSJzaGFkb3dCbHVyT3V0ZXIxIiBpbjI9IlNvdXJjZUFscGhhIiBvcGVyYXRvcj0ib3V0IiByZXN1bHQ9InNoYWRvd0JsdXJPdXRlcjEiLz48ZmVDb2xvck1hdHJpeCB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAuMDQgMCIgaW49InNoYWRvd0JsdXJPdXRlcjEiLz48L2ZpbHRlcj48L2RlZnM+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0IDIpIj48dXNlIGZpbGw9IiMwMDAiIGZpbHRlcj0idXJsKCNhKSIgeGxpbms6aHJlZj0iI2IiLz48dXNlIGZpbGwtb3BhY2l0eT0iLjkyIiBmaWxsPSIjRTZGN0ZGIiB4bGluazpocmVmPSIjYiIvPjxyZWN0IHN0cm9rZT0iIzE4OTBGRiIgeD0iLjUiIHk9Ii41IiB3aWR0aD0iNzkiIGhlaWdodD0iNDciIHJ4PSI0Ii8+PC9nPjx0ZXh0IGZvbnQtZmFtaWx5PSJQaW5nRmFuZ1NDLVJlZ3VsYXIsIFBpbmdGYW5nIFNDIiBmb250LXNpemU9IjEyIiBmaWxsPSIjMDAwIiBmaWxsLW9wYWNpdHk9Ii42NSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNCAyKSI+PHRzcGFuIHg9IjIxIiB5PSIyOSI+Tm9ybWFsPC90c3Bhbj48L3RleHQ+PC9nPjwvc3ZnPg=="
/> />
<Item <Item
type="node" type="node"
size="80*72" size="80*72"
shape="flow-rhombus" shape="flow-rhombus"
model={{ model={{
color: '#13C2C2', color: '#13C2C2',
label: 'Decision', label: 'Decision',
}} }}
src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODYiIGhlaWdodD0iNzgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxwYXRoIGQ9Ik00Mi42NyAxLjY3bDM0Ljk2NSAzMS4zNTJhNCA0IDAgMCAxIDAgNS45NTZMNDIuNjcgNzAuMzNhNCA0IDAgMCAxLTUuMzQgMEwyLjM2NSAzOC45NzhhNCA0IDAgMCAxIDAtNS45NTZMMzcuMzMgMS42N2E0IDQgMCAwIDEgNS4zNCAweiIgaWQ9ImIiLz48ZmlsdGVyIHg9Ii04LjglIiB5PSItNi45JSIgd2lkdGg9IjExNy41JSIgaGVpZ2h0PSIxMTkuNCUiIGZpbHRlclVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgaWQ9ImEiPjxmZU9mZnNldCBkeT0iMiIgaW49IlNvdXJjZUFscGhhIiByZXN1bHQ9InNoYWRvd09mZnNldE91dGVyMSIvPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjIiIGluPSJzaGFkb3dPZmZzZXRPdXRlcjEiIHJlc3VsdD0ic2hhZG93Qmx1ck91dGVyMSIvPjxmZUNvbXBvc2l0ZSBpbj0ic2hhZG93Qmx1ck91dGVyMSIgaW4yPSJTb3VyY2VBbHBoYSIgb3BlcmF0b3I9Im91dCIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwLjA0IDAiIGluPSJzaGFkb3dCbHVyT3V0ZXIxIi8+PC9maWx0ZXI+PC9kZWZzPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMyAxKSI+PHVzZSBmaWxsPSIjMDAwIiBmaWx0ZXI9InVybCgjYSkiIHhsaW5rOmhyZWY9IiNiIi8+PHVzZSBmaWxsLW9wYWNpdHk9Ii45MiIgZmlsbD0iI0U2RkZGQiIgeGxpbms6aHJlZj0iI2IiLz48cGF0aCBzdHJva2U9IiM1Q0RCRDMiIGQ9Ik00Mi4zMzcgMi4wNDJhMy41IDMuNSAwIDAgMC00LjY3NCAwTDIuNjk4IDMzLjM5NGEzLjUgMy41IDAgMCAwIDAgNS4yMTJsMzQuOTY1IDMxLjM1MmEzLjUgMy41IDAgMCAwIDQuNjc0IDBsMzQuOTY1LTMxLjM1MmEzLjUgMy41IDAgMCAwIDAtNS4yMTJMNDIuMzM3IDIuMDQyeiIvPjwvZz48dGV4dCBmb250LWZhbWlseT0iUGluZ0ZhbmdTQy1SZWd1bGFyLCBQaW5nRmFuZyBTQyIgZm9udC1zaXplPSIxMiIgZmlsbD0iIzAwMCIgZmlsbC1vcGFjaXR5PSIuNjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMgMSkiPjx0c3BhbiB4PSIxOCIgeT0iNDIiPkRlY2lzaW9uPC90c3Bhbj48L3RleHQ+PC9nPjwvc3ZnPg==" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODYiIGhlaWdodD0iNzgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxwYXRoIGQ9Ik00Mi42NyAxLjY3bDM0Ljk2NSAzMS4zNTJhNCA0IDAgMCAxIDAgNS45NTZMNDIuNjcgNzAuMzNhNCA0IDAgMCAxLTUuMzQgMEwyLjM2NSAzOC45NzhhNCA0IDAgMCAxIDAtNS45NTZMMzcuMzMgMS42N2E0IDQgMCAwIDEgNS4zNCAweiIgaWQ9ImIiLz48ZmlsdGVyIHg9Ii04LjglIiB5PSItNi45JSIgd2lkdGg9IjExNy41JSIgaGVpZ2h0PSIxMTkuNCUiIGZpbHRlclVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgaWQ9ImEiPjxmZU9mZnNldCBkeT0iMiIgaW49IlNvdXJjZUFscGhhIiByZXN1bHQ9InNoYWRvd09mZnNldE91dGVyMSIvPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjIiIGluPSJzaGFkb3dPZmZzZXRPdXRlcjEiIHJlc3VsdD0ic2hhZG93Qmx1ck91dGVyMSIvPjxmZUNvbXBvc2l0ZSBpbj0ic2hhZG93Qmx1ck91dGVyMSIgaW4yPSJTb3VyY2VBbHBoYSIgb3BlcmF0b3I9Im91dCIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwLjA0IDAiIGluPSJzaGFkb3dCbHVyT3V0ZXIxIi8+PC9maWx0ZXI+PC9kZWZzPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMyAxKSI+PHVzZSBmaWxsPSIjMDAwIiBmaWx0ZXI9InVybCgjYSkiIHhsaW5rOmhyZWY9IiNiIi8+PHVzZSBmaWxsLW9wYWNpdHk9Ii45MiIgZmlsbD0iI0U2RkZGQiIgeGxpbms6aHJlZj0iI2IiLz48cGF0aCBzdHJva2U9IiM1Q0RCRDMiIGQ9Ik00Mi4zMzcgMi4wNDJhMy41IDMuNSAwIDAgMC00LjY3NCAwTDIuNjk4IDMzLjM5NGEzLjUgMy41IDAgMCAwIDAgNS4yMTJsMzQuOTY1IDMxLjM1MmEzLjUgMy41IDAgMCAwIDQuNjc0IDBsMzQuOTY1LTMxLjM1MmEzLjUgMy41IDAgMCAwIDAtNS4yMTJMNDIuMzM3IDIuMDQyeiIvPjwvZz48dGV4dCBmb250LWZhbWlseT0iUGluZ0ZhbmdTQy1SZWd1bGFyLCBQaW5nRmFuZyBTQyIgZm9udC1zaXplPSIxMiIgZmlsbD0iIzAwMCIgZmlsbC1vcGFjaXR5PSIuNjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMgMSkiPjx0c3BhbiB4PSIxOCIgeT0iNDIiPkRlY2lzaW9uPC90c3Bhbj48L3RleHQ+PC9nPjwvc3ZnPg=="
/> />
<Item <Item
type="node" type="node"
size="80*48" size="80*48"
shape="flow-capsule" shape="flow-capsule"
model={{ model={{
color: '#722ED1', color: '#722ED1',
label: 'Model', label: 'Model',
}} }}
src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODgiIGhlaWdodD0iNTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxyZWN0IGlkPSJiIiB4PSIwIiB5PSIwIiB3aWR0aD0iODAiIGhlaWdodD0iNDgiIHJ4PSIyNCIvPjxmaWx0ZXIgeD0iLTguOCUiIHk9Ii0xMC40JSIgd2lkdGg9IjExNy41JSIgaGVpZ2h0PSIxMjkuMiUiIGZpbHRlclVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgaWQ9ImEiPjxmZU9mZnNldCBkeT0iMiIgaW49IlNvdXJjZUFscGhhIiByZXN1bHQ9InNoYWRvd09mZnNldE91dGVyMSIvPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjIiIGluPSJzaGFkb3dPZmZzZXRPdXRlcjEiIHJlc3VsdD0ic2hhZG93Qmx1ck91dGVyMSIvPjxmZUNvbXBvc2l0ZSBpbj0ic2hhZG93Qmx1ck91dGVyMSIgaW4yPSJTb3VyY2VBbHBoYSIgb3BlcmF0b3I9Im91dCIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwLjA0IDAiIGluPSJzaGFkb3dCbHVyT3V0ZXIxIi8+PC9maWx0ZXI+PC9kZWZzPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNCAyKSI+PHVzZSBmaWxsPSIjMDAwIiBmaWx0ZXI9InVybCgjYSkiIHhsaW5rOmhyZWY9IiNiIi8+PHVzZSBmaWxsLW9wYWNpdHk9Ii45MiIgZmlsbD0iI0Y5RjBGRiIgeGxpbms6aHJlZj0iI2IiLz48cmVjdCBzdHJva2U9IiNCMzdGRUIiIHg9Ii41IiB5PSIuNSIgd2lkdGg9Ijc5IiBoZWlnaHQ9IjQ3IiByeD0iMjMuNSIvPjwvZz48dGV4dCBmb250LWZhbWlseT0iUGluZ0ZhbmdTQy1SZWd1bGFyLCBQaW5nRmFuZyBTQyIgZm9udC1zaXplPSIxMiIgZmlsbD0iIzAwMCIgZmlsbC1vcGFjaXR5PSIuNjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQgMikiPjx0c3BhbiB4PSIyNCIgeT0iMjkiPk1vZGVsPC90c3Bhbj48L3RleHQ+PC9nPjwvc3ZnPg==" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODgiIGhlaWdodD0iNTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxyZWN0IGlkPSJiIiB4PSIwIiB5PSIwIiB3aWR0aD0iODAiIGhlaWdodD0iNDgiIHJ4PSIyNCIvPjxmaWx0ZXIgeD0iLTguOCUiIHk9Ii0xMC40JSIgd2lkdGg9IjExNy41JSIgaGVpZ2h0PSIxMjkuMiUiIGZpbHRlclVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgaWQ9ImEiPjxmZU9mZnNldCBkeT0iMiIgaW49IlNvdXJjZUFscGhhIiByZXN1bHQ9InNoYWRvd09mZnNldE91dGVyMSIvPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjIiIGluPSJzaGFkb3dPZmZzZXRPdXRlcjEiIHJlc3VsdD0ic2hhZG93Qmx1ck91dGVyMSIvPjxmZUNvbXBvc2l0ZSBpbj0ic2hhZG93Qmx1ck91dGVyMSIgaW4yPSJTb3VyY2VBbHBoYSIgb3BlcmF0b3I9Im91dCIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwLjA0IDAiIGluPSJzaGFkb3dCbHVyT3V0ZXIxIi8+PC9maWx0ZXI+PC9kZWZzPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNCAyKSI+PHVzZSBmaWxsPSIjMDAwIiBmaWx0ZXI9InVybCgjYSkiIHhsaW5rOmhyZWY9IiNiIi8+PHVzZSBmaWxsLW9wYWNpdHk9Ii45MiIgZmlsbD0iI0Y5RjBGRiIgeGxpbms6aHJlZj0iI2IiLz48cmVjdCBzdHJva2U9IiNCMzdGRUIiIHg9Ii41IiB5PSIuNSIgd2lkdGg9Ijc5IiBoZWlnaHQ9IjQ3IiByeD0iMjMuNSIvPjwvZz48dGV4dCBmb250LWZhbWlseT0iUGluZ0ZhbmdTQy1SZWd1bGFyLCBQaW5nRmFuZyBTQyIgZm9udC1zaXplPSIxMiIgZmlsbD0iIzAwMCIgZmlsbC1vcGFjaXR5PSIuNjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQgMikiPjx0c3BhbiB4PSIyNCIgeT0iMjkiPk1vZGVsPC90c3Bhbj48L3RleHQ+PC9nPjwvc3ZnPg=="
/> />
</Card> </Card>
</ItemPanel> </ItemPanel>
); );
export default FlowItemPanel; export default FlowItemPanel;
EditorMind/src/components/EditorMinimap/index.tsx
View file @ 190aec4c
import React from 'react';
import { Card } from 'antd'; import { Card } from 'antd';
import { Minimap } from 'gg-editor'; import { Minimap } from 'gg-editor';
import React from 'react';
const EditorMinimap = () => ( const EditorMinimap = () => (
<Card type="inner" size="small" title="Minimap" bordered={false}> <Card type="inner" size="small" title="Minimap" bordered={false}>
<Minimap height={200} /> <Minimap height={200} />
</Card> </Card>
); );
export default EditorMinimap; export default EditorMinimap;
EditorMind/src/components/EditorToolbar/FlowToolbar.tsx
View file @ 190aec4c
import React from 'react';
import { Divider } from 'antd'; import { Divider } from 'antd';
import React from 'react';
import { Toolbar } from 'gg-editor'; import { Toolbar } from 'gg-editor';
import ToolbarButton from './ToolbarButton'; import ToolbarButton from './ToolbarButton';
import styles from './index.less'; import styles from './index.less';
const FlowToolbar = () => ( const FlowToolbar = () => (
<Toolbar className={styles.toolbar}> <Toolbar className={styles.toolbar}>
<ToolbarButton command="undo" /> <ToolbarButton command="undo" />
<ToolbarButton command="redo" /> <ToolbarButton command="redo" />
<Divider type="vertical" /> <Divider type="vertical" />
<ToolbarButton command="copy" /> <ToolbarButton command="copy" />
<ToolbarButton command="paste" /> <ToolbarButton command="paste" />
<ToolbarButton command="delete" /> <ToolbarButton command="delete" />
<Divider type="vertical" /> <Divider type="vertical" />
<ToolbarButton command="zoomIn" icon="zoom-in" text="Zoom In" /> <ToolbarButton command="zoomIn" icon="zoom-in" text="Zoom In" />
<ToolbarButton command="zoomOut" icon="zoom-out" text="Zoom Out" /> <ToolbarButton command="zoomOut" icon="zoom-out" text="Zoom Out" />
<ToolbarButton command="autoZoom" icon="fit-map" text="Fit Map" /> <ToolbarButton command="autoZoom" icon="fit-map" text="Fit Map" />
<ToolbarButton command="resetZoom" icon="actual-size" text="Actual Size" /> <ToolbarButton command="resetZoom" icon="actual-size" text="Actual Size" />
<Divider type="vertical" /> <Divider type="vertical" />
<ToolbarButton command="toBack" icon="to-back" text="To Back" /> <ToolbarButton command="toBack" icon="to-back" text="To Back" />
<ToolbarButton command="toFront" icon="to-front" text="To Front" /> <ToolbarButton command="toFront" icon="to-front" text="To Front" />
<Divider type="vertical" /> <Divider type="vertical" />
<ToolbarButton command="multiSelect" icon="multi-select" text="Multi Select" /> <ToolbarButton command="multiSelect" icon="multi-select" text="Multi Select" />
<ToolbarButton command="addGroup" icon="group" text="Add Group" /> <ToolbarButton command="addGroup" icon="group" text="Add Group" />
<ToolbarButton command="unGroup" icon="ungroup" text="Ungroup" /> <ToolbarButton command="unGroup" icon="ungroup" text="Ungroup" />
</Toolbar> </Toolbar>
); );
export default FlowToolbar; export default FlowToolbar;
EditorMind/src/components/EditorToolbar/MindToolbar.tsx
View file @ 190aec4c
import React from 'react';
import { Divider } from 'antd'; import { Divider } from 'antd';
import React from 'react';
import { Toolbar } from 'gg-editor'; import { Toolbar } from 'gg-editor';
import ToolbarButton from './ToolbarButton'; import ToolbarButton from './ToolbarButton';
import styles from './index.less'; import styles from './index.less';
const FlowToolbar = () => ( const FlowToolbar = () => (
<Toolbar className={styles.toolbar}> <Toolbar className={styles.toolbar}>
<ToolbarButton command="undo" /> <ToolbarButton command="undo" />
<ToolbarButton command="redo" /> <ToolbarButton command="redo" />
<Divider type="vertical" /> <Divider type="vertical" />
<ToolbarButton command="zoomIn" icon="zoom-in" text="Zoom In" /> <ToolbarButton command="zoomIn" icon="zoom-in" text="Zoom In" />
<ToolbarButton command="zoomOut" icon="zoom-out" text="Zoom Out" /> <ToolbarButton command="zoomOut" icon="zoom-out" text="Zoom Out" />
<ToolbarButton command="autoZoom" icon="fit-map" text="Fit Map" /> <ToolbarButton command="autoZoom" icon="fit-map" text="Fit Map" />
<ToolbarButton command="resetZoom" icon="actual-size" text="Actual Size" /> <ToolbarButton command="resetZoom" icon="actual-size" text="Actual Size" />
<Divider type="vertical" /> <Divider type="vertical" />
<ToolbarButton command="append" text="Topic" /> <ToolbarButton command="append" text="Topic" />
<ToolbarButton command="appendChild" icon="append-child" text="Subtopic" /> <ToolbarButton command="appendChild" icon="append-child" text="Subtopic" />
<Divider type="vertical" /> <Divider type="vertical" />
<ToolbarButton command="collapse" text="Fold" /> <ToolbarButton command="collapse" text="Fold" />
<ToolbarButton command="expand" text="Unfold" /> <ToolbarButton command="expand" text="Unfold" />
</Toolbar> </Toolbar>
); );
export default FlowToolbar; export default FlowToolbar;
EditorMind/src/components/EditorToolbar/ToolbarButton.tsx
View file @ 190aec4c
import { Command } from 'gg-editor';
import React from 'react'; import React from 'react';
import { Tooltip } from 'antd'; import { Tooltip } from 'antd';
import { Command } from 'gg-editor';
import IconFont from '../../common/IconFont'; import IconFont from '../../common/IconFont';
import styles from './index.less'; import styles from './index.less';
const upperFirst = (str: string) => str.toLowerCase().replace(/( |^)[a-z]/g, (l: string) => l.toUpperCase()); const upperFirst = (str: string) =>
str.toLowerCase().replace(/( |^)[a-z]/g, (l: string) => l.toUpperCase());
interface ToolbarButtonProps { interface ToolbarButtonProps {
command: string; command: string;
......
EditorMind/src/components/EditorToolbar/index.tsx
View file @ 190aec4c
import FlowToolbar from './FlowToolbar'; import FlowToolbar from './FlowToolbar';
import MindToolbar from './MindToolbar';
import KoniToolbar from './KoniToolbar'; import KoniToolbar from './KoniToolbar';
import MindToolbar from './MindToolbar';
export { FlowToolbar, MindToolbar, KoniToolbar }; export { FlowToolbar, MindToolbar, KoniToolbar };
EditorMind/src/index.tsx
View file @ 190aec4c
import React from 'react'; import { Col, Row } from 'antd';
import { Row, Col } from 'antd';
import GGEditor, { Mind } from 'gg-editor'; import GGEditor, { Mind } from 'gg-editor';
import { PageHeaderWrapper } from '@ant-design/pro-layout'; import { PageHeaderWrapper } from '@ant-design/pro-layout';
import React from 'react';
import { formatMessage } from 'umi-plugin-react/locale'; import { formatMessage } from 'umi-plugin-react/locale';
import EditorMinimap from './components/EditorMinimap'; import EditorMinimap from './components/EditorMinimap';
import { MindContextMenu } from './components/EditorContextMenu'; import { MindContextMenu } from './components/EditorContextMenu';
import { MindToolbar } from './components/EditorToolbar';
import { MindDetailPanel } from './components/EditorDetailPanel'; import { MindDetailPanel } from './components/EditorDetailPanel';
import { MindToolbar } from './components/EditorToolbar';
import data from './worldCup2018.json'; import data from './worldCup2018.json';
import styles from './index.less'; import styles from './index.less';
GGEditor.setTrackable(false); GGEditor.setTrackable(false);
export default () => ( export default () => (
<PageHeaderWrapper <PageHeaderWrapper
content={formatMessage({ content={formatMessage({
id: 'BLOCK_NAME.description', id: 'BLOCK_NAME.description',
defaultMessage: 'description', defaultMessage: 'description',
})} })}
> >
<GGEditor className={styles.editor}> <GGEditor className={styles.editor}>
<Row type="flex" className={styles.editorHd}> <Row type="flex" className={styles.editorHd}>
<Col span={24}> <Col span={24}>
<MindToolbar /> <MindToolbar />
</Col> </Col>
</Row> </Row>
<Row type="flex" className={styles.editorBd}> <Row type="flex" className={styles.editorBd}>
<Col span={20} className={styles.editorContent}> <Col span={20} className={styles.editorContent}>
<Mind data={data} className={styles.mind} /> <Mind data={data} className={styles.mind} />
</Col> </Col>
<Col span={4} className={styles.editorSidebar}> <Col span={4} className={styles.editorSidebar}>
<MindDetailPanel /> <MindDetailPanel />
<EditorMinimap /> <EditorMinimap />
</Col> </Col>
</Row> </Row>
<MindContextMenu /> <MindContextMenu />
</GGEditor> </GGEditor>
</PageHeaderWrapper> </PageHeaderWrapper>
); );
Exception403/src/components/Exception/index.tsx
View file @ 190aec4c
import { Button } from 'antd';
import classNames from 'classnames';
import * as H from 'history'; import * as H from 'history';
import React, { createElement } from 'react'; import React, { createElement } from 'react';
import { Button } from 'antd';
import Link from 'umi/link'; import Link from 'umi/link';
import styles from './index.less'; import classNames from 'classnames';
import config from './typeConfig'; import config from './typeConfig';
import styles from './index.less';
export interface ExceptionProps< export interface ExceptionProps<
L = { L = {
......
Exception403/src/index.tsx
View file @ 190aec4c
This diff is collapsed.
Exception404/src/index.tsx
View file @ 190aec4c
This diff is collapsed.
Exception500/src/index.tsx
View file @ 190aec4c
This diff is collapsed.
FormAdvancedForm/src/index.tsx
View file @ 190aec4c
This diff is collapsed.
FormAdvancedForm/src/model.ts
View file @ 190aec4c
This diff is collapsed.
FormBasicForm/src/index.tsx
View file @ 190aec4c
This diff is collapsed.
FormBasicForm/src/model.ts
View file @ 190aec4c
This diff is collapsed.
FormStepForm/src/components/Step1/index.tsx
View file @ 190aec4c
This diff is collapsed.
FormStepForm/src/components/Step2/index.tsx
View file @ 190aec4c
This diff is collapsed.
FormStepForm/src/components/Step3/index.tsx
View file @ 190aec4c
This diff is collapsed.
FormStepForm/src/index.tsx
View file @ 190aec4c
This diff is collapsed.
FormStepForm/src/model.ts
View file @ 190aec4c
This diff is collapsed.
ListBasicList/src/Result/index.tsx
View file @ 190aec4c
This diff is collapsed.
ListBasicList/src/index.tsx
View file @ 190aec4c
This diff is collapsed.
ListBasicList/src/model.ts
View file @ 190aec4c
This diff is collapsed.
ListCardList/src/index.tsx
View file @ 190aec4c
This diff is collapsed.
ListCardList/src/model.ts
View file @ 190aec4c
This diff is collapsed.
ListSearch/src/index.tsx
View file @ 190aec4c
This diff is collapsed.
ListSearchApplications/src/index.tsx
View file @ 190aec4c
This diff is collapsed.
ListSearchApplications/src/model.ts
View file @ 190aec4c
This diff is collapsed.
ListSearchArticles/src/index.tsx
View file @ 190aec4c
This diff is collapsed.
ListSearchArticles/src/model.ts
View file @ 190aec4c
This diff is collapsed.
ListSearchProjects/src/index.tsx
View file @ 190aec4c
This diff is collapsed.
ListSearchProjects/src/model.ts
View file @ 190aec4c
This diff is collapsed.
ListTableList/src/_mock.ts
View file @ 190aec4c
This diff is collapsed.
ListTableList/src/components/CreateForm.tsx
View file @ 190aec4c
This diff is collapsed.
ListTableList/src/components/UpdateForm.tsx
View file @ 190aec4c
This diff is collapsed.
ListTableList/src/index.tsx
View file @ 190aec4c
This diff is collapsed.
ListTableList/src/model.ts
View file @ 190aec4c
This diff is collapsed.
ProfileAdvanced/src/index.tsx
View file @ 190aec4c
This diff is collapsed.
ProfileAdvanced/src/model.ts
View file @ 190aec4c
This diff is collapsed.
ProfileBasic/src/index.tsx
View file @ 190aec4c
This diff is collapsed.
ProfileBasic/src/model.ts
View file @ 190aec4c
This diff is collapsed.
ResultFail/src/Result/index.tsx
View file @ 190aec4c
This diff is collapsed.
ResultFail/src/index.tsx
View file @ 190aec4c
This diff is collapsed.
ResultSuccess/src/Result/index.tsx
View file @ 190aec4c
This diff is collapsed.
ResultSuccess/src/index.tsx
View file @ 190aec4c
This diff is collapsed.
UserLogin/src/components/Login/LoginTab.tsx
View file @ 190aec4c
This diff is collapsed.
UserLogin/src/components/Login/index.tsx
View file @ 190aec4c
This diff is collapsed.
UserLogin/src/components/Login/map.tsx
View file @ 190aec4c
This diff is collapsed.
UserLogin/src/index.tsx
View file @ 190aec4c
This diff is collapsed.
UserLogin/src/model.ts
View file @ 190aec4c
This diff is collapsed.
UserRegister/src/index.tsx
View file @ 190aec4c
This diff is collapsed.
UserRegister/src/model.ts
View file @ 190aec4c
This diff is collapsed.
UserRegisterResult/src/Result/index.tsx
View file @ 190aec4c
This diff is collapsed.
UserRegisterResult/src/index.tsx
View file @ 190aec4c
This diff is collapsed.
package.json
View file @ 190aec4c
This diff is collapsed.
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment