11 |
19 | );
20 | };
21 |
22 | export default Collapse;
23 |
--------------------------------------------------------------------------------
/src/pages/App/components/Content/Body/container.tsx:
--------------------------------------------------------------------------------
1 | import React, { useRef } from 'react';
2 | import { PageService } from 'src/controller';
3 | import { Options } from '..';
4 | import styles from './index.module.scss';
5 |
6 | const Container: React.FC<{
7 | page: PageService;
8 | curPage: PageService;
9 | options: Options;
10 | }> = ({ page, curPage, options }) => {
11 | const cacheView = useRef
12 |
17 | setVisible(!visible)} className={styles.icon}>
13 | {visible ?
15 | {header}
16 | {children}
18 |
23 |
25 | );
26 |
27 | cacheView.current = view;
28 |
29 | return view;
30 | };
31 |
32 | export default Container;
33 |
--------------------------------------------------------------------------------
/src/model/history.ts:
--------------------------------------------------------------------------------
1 | import { HistoryLog } from '.';
2 |
3 | const MAX_HISTORY = 100;
4 |
5 | class History {
6 | private __history: HistoryLog[] = [];
7 | private _future: HistoryLog[] = [];
8 | private _id: number = 0;
9 | set history(history: HistoryLog[]) {
10 | this.__history = history;
11 | while (this.__history.length > MAX_HISTORY) {
12 | this.__history.shift();
13 | }
14 | }
15 | get history() {
16 | return this.__history;
17 | }
18 |
19 | set future(future: HistoryLog[]) {
20 | this._future = future;
21 | while (this._future.length > MAX_HISTORY) {
22 | this._future.shift();
23 | }
24 | }
25 |
26 | get future() {
27 | return this._future;
28 | }
29 |
30 | set id(id: number) {
31 | this._id = id;
32 | }
33 |
34 | get id() {
35 | this._id = ++this._id;
36 | return this._id;
37 | }
38 | }
39 |
40 | export default History;
41 |
--------------------------------------------------------------------------------
/src/pages/App/components/Content/index.tsx:
--------------------------------------------------------------------------------
1 | import { Layout } from 'antd';
2 | import { useState } from 'react';
3 | import { useContext } from 'react';
4 | import { AppContext } from 'src/context';
5 | import Body from './Body';
6 | import Header from './Header';
7 | import styles from './index.module.scss';
8 |
9 | const { Content } = Layout;
10 |
11 | export interface Options {
12 | zoom: number;
13 | }
14 |
15 | // eslint-disable-next-line
16 | export default () => {
17 | const { appService } = useContext(AppContext);
18 |
19 | const [options, setOptions] = useState{page.createView()}
24 |
8 |
22 | );
23 | };
24 |
25 | export default BaseInfo;
26 |
--------------------------------------------------------------------------------
/src/pages/App/slider-components/History/index.module.scss:
--------------------------------------------------------------------------------
1 | @import 'src/theme/_colors.scss';
2 |
3 | .container {
4 | padding: 10px;
5 | height: 100%;
6 | overflow: scroll;
7 | .history {
8 | height: 30px;
9 | display: flex;
10 | justify-content: space-between;
11 | align-items: center;
12 | padding: 0 10px;
13 | border-radius: 5px;
14 | span:nth-child(1) {
15 | flex: 1;
16 | }
17 | span:nth-child(2) {
18 | font-size: 12px;
19 | flex: 1;
20 | }
21 | span:nth-child(3) {
22 | width: 30px;
23 | height: 100%;
24 | display: inline-flex;
25 | justify-content: center;
26 | align-items: center;
27 | img {
28 | height: 16px;
29 | width: 16px;
30 | }
31 | }
32 | &:hover {
33 | background-color: #f5f5f5;
34 | cursor: pointer;
35 | }
36 | }
37 | }
38 |
39 | .futureHistory {
40 | color: map-get($colors, 'disabled');
41 | }
42 |
--------------------------------------------------------------------------------
/docs/zh/case.md:
--------------------------------------------------------------------------------
1 | ## Case
2 |
3 | 一. 「 创建项目 」
4 |
5 | 主要是需要保存项目进度，防止刷新，页面异常等情况，需要及时保存。
6 |
7 | 
8 |
9 | 二. 「 基本页面 」
10 |
11 | 1. 通过布局定义结构
12 | 2. 通过点击或节点树选中节点
13 | 3. 操作节点相关属性
14 |
15 | 
16 |
17 | 三. 「 生成代码 」
18 |
19 | 
20 |
21 | 四. 「 下载代码本地运行代码 」
22 |
23 | 1. 导出代码
24 | 2. 导入到项目目录
25 | 3. 引入相关依赖
26 | 4. 相关位置引入项目代码
27 | 5. 运行项目
28 |
29 | 
30 |
31 | 五. 「 运行效果 」
32 |
33 | 
34 |
--------------------------------------------------------------------------------
/prettier.config.js:
--------------------------------------------------------------------------------
1 | // .prettierrc.js
2 | module.exports = {
3 | // 一行最多 85 字符
4 | printWidth: 85,
5 | // 使用 2 个空格缩进
6 | tabWidth: 2,
7 | // 不使用缩进符，而使用空格
8 | useTabs: false,
9 | // 行尾需要有分号
10 | semi: true,
11 | // 使用单引号
12 | singleQuote: true,
13 | // 对象的 key 仅在必要时用引号
14 | quoteProps: 'as-needed',
15 | // jsx 不使用单引号，而使用双引号
16 | jsxSingleQuote: false,
17 | // 末尾需要有逗号
18 | trailingComma: 'all',
19 | // 大括号内的首尾需要空格
20 | bracketSpacing: true,
21 | // jsx 标签的反尖括号需要换行
22 | jsxBracketSameLine: false,
23 | // 箭头函数，只有一个参数的时候，不需要括号
24 | arrowParens: 'avoid',
25 | // 每个文件格式化的范围是文件的全部内容
26 | rangeStart: 0,
27 | rangeEnd: Infinity,
28 | // 不需要写文件开头的 @prettier
29 | requirePragma: false,
30 | // 不需要自动在文件开头插入 @prettier
31 | insertPragma: false,
32 | // 使用默认的折行标准
33 | proseWrap: 'preserve',
34 | // 根据显示样式决定 html 要不要折行
35 | htmlWhitespaceSensitivity: 'css',
36 | // 换行符使用 lf
37 | endOfLine: 'lf',
38 | // 格式化嵌入的内容
39 | embeddedLanguageFormatting: 'auto',
40 | };
41 |
--------------------------------------------------------------------------------
/src/pages/App/components/Sider/index.module.scss:
--------------------------------------------------------------------------------
1 | .slider {
2 | display: flex;
3 | height: 100%;
4 | .body {
5 | height: 100%;
6 | width: calc(100% - 50px);
7 | display: flex;
8 | flex-direction: column;
9 | .card {
10 | display: flex;
11 | flex-direction: column;
12 | height: 100%;
13 | .title {
14 | height: 50px;
15 | width: 100%;
16 | padding: 0 10px;
17 | display: flex;
18 | align-items: center;
19 | border-bottom: 1px solid #f0f0f0;
20 | margin-bottom: 0;
21 | }
22 | .component {
23 | height: calc(100% - 50px);
24 | }
25 | }
26 | }
27 | }
28 |
29 | .menu {
30 | width: 50px;
31 | height: 100%;
32 | border-right: 1px solid #f0f0f0;
33 | div {
34 | display: flex;
35 | justify-content: center;
36 | align-items: center;
37 | border-bottom: 1px solid #f0f0f0;
38 | cursor: pointer;
39 | height: 50px;
40 | }
41 | img {
42 | height: 24px;
43 | width: 24px;
44 | }
45 | }
46 |
--------------------------------------------------------------------------------
/src/controller/index.ts:
--------------------------------------------------------------------------------
1 | import ProjectService from './service/project';
2 | import PageService from './service/page';
3 | import NodeService from './service/node';
4 | import HistoryService from './service/history';
5 | import AppService from './service/app';
6 |
7 | import { AST, Style } from 'src/model';
8 | export interface Options {
9 | id?: string;
10 | update?: () => void;
11 | name?: string;
12 | target: AST;
13 | selectStyle: Style[];
14 | previewStyle: (Style & { isCanUse?: boolean })[];
15 | }
16 |
17 | export type ComponentValue = {
18 | from: string;
19 | to: unknown;
20 | };
21 | export type Components = Map
9 |
11 | 项目信息
10 |
12 |
21 |
13 |
16 | 项目名:
14 | {name ? name : '--'}
15 |
17 |
20 | 项目描述:
18 | {description ? description : '--'}
19 |
25 | setValue(e.target.value)}
28 | value={value}
29 | onBlur={() => updateClass()}
30 | placeholder={'类名，默认随机生成'}
31 | />
32 |
33 | );
34 | };
35 |
36 | export default ClassName;
37 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2021 TCYong
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/src/pages/App/config.tsx:
--------------------------------------------------------------------------------
1 | import { LayoutComponent, History, Component, NodeTree } from './slider-components';
2 | import {
3 | HistoryOutlined,
4 | LayoutOutlined,
5 | AppstoreOutlined,
6 | ApartmentOutlined,
7 | } from '@ant-design/icons';
8 |
9 | export interface Menu {
10 | icon: React.ReactNode;
11 | id: string;
12 | title: string;
13 | component: React.ReactNode;
14 | }
15 |
16 | const getSiderMenu = (): Menu[] => {
17 | return [
18 | {
19 | id: 'layout',
20 | icon:
20 |
27 | requestFullScreen()}>
21 |
23 |
24 |
26 |
28 |
37 | {
31 | window.open('https://github.com/loo41/visual-layout');
32 | }}
33 | >
34 |
36 |
31 | setValue(e.target.value)}
34 | value={value}
35 | onBlur={() => updateContent()}
36 | />
37 |
38 | );
39 | };
40 |
41 | export default Content;
42 |
--------------------------------------------------------------------------------
/src/pages/App/components/Drawer/attribute/components/Display/index.module.scss:
--------------------------------------------------------------------------------
1 | @import 'src/pages/App/components/Drawer/attribute/index.module.scss';
2 | @import 'src/theme/_colors.scss';
3 |
4 | .clear {
5 | display: flex;
6 | justify-content: flex-end;
7 | cursor: pointer;
8 | div {
9 | width: 50px;
10 | height: 20px;
11 | border-radius: 5px;
12 | background-color: white;
13 | display: flex;
14 | justify-content: center;
15 | align-items: center;
16 | }
17 | }
18 |
19 | .flexWarper {
20 | display: flex;
21 | flex-direction: column;
22 | margin: 5px 0;
23 | font-size: 12px;
24 | .flexItem {
25 | display: flex;
26 | height: 25px;
27 | margin-top: 5px;
28 | font-size: 16px;
29 | div {
30 | flex: 1;
31 | background-color: white;
32 | margin: 0 5px;
33 | display: flex;
34 | align-items: center;
35 | justify-content: center;
36 | cursor: pointer;
37 | border-radius: 5px;
38 | img {
39 | height: 16px;
40 | width: 16px;
41 | }
42 | }
43 | }
44 | }
45 |
46 | .flexContainer {
47 | width: 100%;
48 | padding: 10px;
49 | background: map-get($colors, 'background');
50 | margin-top: 10px;
51 | border-radius: 5px;
52 | }
53 |
--------------------------------------------------------------------------------
/src/controller/util/proxy.ts:
--------------------------------------------------------------------------------
1 | import { isObject } from 'src/util';
2 |
3 | export type Get = (
4 | target: object,
5 | propertyKey: string,
6 | receiver: ProxyConstructor,
7 | ) => void;
8 |
9 | export type Set = (
10 | target: object,
11 | propertyKey: string,
12 | value: unknown,
13 | receiver: ProxyConstructor,
14 | ) => void;
15 |
16 | function proxy
20 | setCurMenu(menu)} menus={menus} />
21 |
37 |
22 | {menus.map(({ component, id, title }) => {
23 | const isShow = curMenu === id;
24 | return (
25 |
36 |
30 |
33 | );
34 | })}
35 | {title}
31 |{component}
32 |
14 |
40 | );
41 | };
42 |
43 | export default Display;
44 |
--------------------------------------------------------------------------------
/src/pages/App/components/Drawer/css-edit.tsx:
--------------------------------------------------------------------------------
1 | import { Input } from 'antd';
2 | import { useEffect } from 'react';
3 | import { useState } from 'react';
4 | import { PageService } from 'src/controller';
5 | import styles from './index.module.scss';
6 |
7 | const Css: React.FC<{ page: PageService }> = ({ page }) => {
8 | const cssString =
9 | page?.currentNode[0]?.styles
10 | ?.map(({ key, value }) => {
11 | return `${key}: ${value};\n`;
12 | })
13 | .join('') || '';
14 |
15 | const [css, setCss] = useState(cssString);
16 |
17 | useEffect(() => {
18 | setCss(cssString);
19 | }, [cssString]);
20 |
21 | const setStyle = () => {
22 | if (css !== cssString) {
23 | const styles = css
24 | .replace(/\\n/, '')
25 | .split(';')
26 | .map(style => {
27 | const [key, value] = style.split(':').map(key => key.trim());
28 | return {
29 | key,
30 | value,
31 | };
32 | })
33 | .filter(({ key, value }) => key && value);
34 | page.setStyles(styles);
35 | }
36 | };
37 |
38 | return (
39 | 展示
15 |
16 |
35 |
36 | {['flex', 'inline-flex'].includes(display?.value) && (
37 |
40 | {
45 | setCss(e.target.value);
46 | }}
47 | onBlur={() => setStyle()}
48 | />
49 |
50 | );
51 | };
52 |
53 | export default Css;
54 |
--------------------------------------------------------------------------------
/docs/en/index.md:
--------------------------------------------------------------------------------
1 | ## Files Overview
2 |
3 | ```txt
4 | .github ----> github Action config
5 | .vscode ----> vscode config(prettier)
6 | src ---|
7 | |
8 | |
9 | context ---> global context (Inject Page Context)
10 | model ---> model layer
11 | controller ---> controller layer (Controller Service)
12 | pages ---> view layer (UI View)
13 | theme ---> theme .scss file
14 | ```
15 |
16 | ## Framework
17 |
18 | ```txt
19 | Model ---- Update --> View
20 | ↑ |
21 | Change Interactive
22 | | |
23 | <————— Controller —————
24 | ```
25 |
26 | ## Project layer
27 |
28 | ```txt
29 | ______________________
30 | | Project |
31 | | ________________ |
32 | | | Page | Page | |
33 | | | _____ | _____ | |
34 | | || Node||| Node|| |
35 | | ||_Node_||_Node|| |
36 | | |_______|_______| |
37 | |______________________|
38 | ```
39 |
40 | ## Features
41 |
42 | - Keyboard Event ✅
43 | - [Ctrl + c] (Copy Select)
44 | - [Ctrl + v] (Paste Select)
45 | - [Ctrl + Backspace] (Delete Select)
46 | - [Ctrl + z] (Step Back)
47 | - [Ctrl + y] (Step Forward)
48 | - Multi Page ✅
49 | - Layout ✅
50 | - History Operation ✅
51 | - Visual Component ✅
52 | - Visual Styles
53 | - Export Code
54 | - History
55 |
--------------------------------------------------------------------------------
/src/model/project.ts:
--------------------------------------------------------------------------------
1 | import { AppService, PageService, ProjectOptions } from 'src/controller';
2 | import { App, ProjectObject } from '.';
3 | export default class Project {
4 | protected pages: { [key: string]: PageService } = {};
5 | public _idx: number = 1;
6 | public currentId?: string;
7 | public name: string = '';
8 | public description: string = '';
9 | public id: string = String(App.idx);
10 |
11 | constructor(options?: ProjectObject & ProjectOptions) {
12 | if (options) {
13 | const {
14 | id,
15 | currentId,
16 | idx,
17 | name,
18 | description,
19 | pages,
20 | selectStyle,
21 | previewStyle,
22 | } = options;
23 | this.idx = idx;
24 | this.id = id;
25 | this.currentId = currentId;
26 | this.name = name || '';
27 | this.description = description || '';
28 | this.pages = Object.entries(pages).reduce((pages, [key, value]) => {
29 | pages[key] = new PageService({
30 | ...value,
31 | selectStyle,
32 | previewStyle,
33 | update: this.update,
34 | });
35 | return pages;
36 | }, {} as { [props: string]: PageService });
37 | }
38 | }
39 |
40 | get idx() {
41 | return this._idx++;
42 | }
43 |
44 | set idx(idx: number) {
45 | this._idx = idx;
46 | }
47 |
48 | update = () => {
49 | Promise.resolve().then(() => AppService.updateView());
50 | };
51 | }
52 |
--------------------------------------------------------------------------------
/src/pages/App/components/Content/Body/index.tsx:
--------------------------------------------------------------------------------
1 | import { AppService, PageService } from 'src/controller';
2 | import styles from './index.module.scss';
3 | import Container from './container';
4 | import { Options } from '..';
5 | import { useState } from 'react';
6 | import { useEffect } from 'react';
7 | import { useRef } from 'react';
8 |
9 | const Body: React.FC<{ appService: AppService; options: Options }> = ({
10 | appService,
11 | options,
12 | }) => {
13 | const [pages, setPages] = useState
32 | {pages.map(page => {
33 | const style = { display: page.id === curPage.id ? 'block' : 'none' };
34 | return (
35 |
41 | );
42 | };
43 |
44 | export default Body;
45 |
--------------------------------------------------------------------------------
/src/model/page.ts:
--------------------------------------------------------------------------------
1 | import { NodeService, Options } from 'src/controller';
2 | import { isString } from 'src/controller/util';
3 | import { AST, PageObject } from '.';
4 |
5 | export default class Page {
6 | public id: string;
7 | public name: string;
8 | public _page!: NodeService;
9 | public currentNode: NodeService[] = [];
10 | protected _idx: number = 1;
11 | protected target: AST;
12 | constructor(options: Required
36 |
38 | );
39 | })}
40 |
19 | {LayoutAST.map(({ children, title }) => (
20 |
24 | {title}
25 |
26 | }
27 | >
28 |
29 | {children.map(layout => (
30 |
35 |
36 | ))}
37 |
38 | ),
39 | [pageService],
40 | );
41 | };
42 |
43 | const Item: React.FC<{
44 | layout: { title: string; layout: AST };
45 | pageService: PageService;
46 | }> = ({ layout, pageService }) => {
47 | const node = useMemo(() => {
48 | return pageService?.newNode(_.cloneDeep(layout.layout));
49 | }, [layout.layout, pageService]);
50 |
51 | const DOM = useMemo(
52 | () => node?.createElement({ eventType: EventType.layout }),
53 | [node],
54 | );
55 |
56 | return (
57 |
31 |
33 | ))}
34 | {DOM}
59 |
40 |
59 | );
60 | };
61 |
62 | export default Component;
63 |
--------------------------------------------------------------------------------
/src/pages/App/components/Drawer/attribute/components/width.tsx:
--------------------------------------------------------------------------------
1 | import { Input, Select } from 'antd';
2 | import { useEffect } from 'react';
3 | import { useRef } from 'react';
4 | import { useState } from 'react';
5 | import styles from '../index.module.scss';
6 | import { CssProps } from '../config';
7 |
8 | const { Option } = Select;
9 |
10 | const KEY = 'width';
11 | const Width: React.FC
41 | 组件
42 |
43 |
45 |
46 |
47 | updateIsComponent(value)}
50 | />
51 | setName(e.target.value)}
55 | onBlur={e => updateComponentName(e)}
56 | />
57 |
58 |
42 |
69 | );
70 | };
71 |
72 | export default Width;
73 |
--------------------------------------------------------------------------------
/src/pages/App/components/Drawer/attribute/components/height.tsx:
--------------------------------------------------------------------------------
1 | import { Input, Select } from 'antd';
2 | import { useEffect } from 'react';
3 | import { useRef } from 'react';
4 | import { useState } from 'react';
5 | import styles from '../index.module.scss';
6 | import { CssProps } from '../config';
7 |
8 | const { Option } = Select;
9 |
10 | const KEY = 'height';
11 | const Height: React.FC宽度
43 | { 50 | setOption(unit); 51 | setValue( 52 | ['custom'].includes(unit) 53 | ? '暂不支持' 54 | : unitValue.current?.[unit] || '', 55 | ); 56 | }} 57 | > 58 | 59 | 60 | 61 | 62 | } 63 | disabled={['custom'].includes(option)} 64 | onBlur={() => setStyle()} 65 | value={value} 66 | onChange={e => setValue(e.target.value)} 67 | /> 68 |
42 |
70 | );
71 | };
72 |
73 | export default Height;
74 |
--------------------------------------------------------------------------------
/src/pages/App/components/Content/Header/index.tsx:
--------------------------------------------------------------------------------
1 | import styles from '../index.module.scss';
2 | import { Button, Popconfirm } from 'antd';
3 | import { ProjectService } from 'src/controller';
4 | import Operation from './Operation';
5 | import { CloseCircleOutlined } from '@ant-design/icons';
6 | import { Options } from 'src/pages/App/components/Content/index';
7 | import { openNewBuildModal } from './new-build';
8 |
9 | const Header: React.FC<{
10 | projectService: ProjectService;
11 | options: Options;
12 | setOptions: (options: Options) => void;
13 | }> = ({ projectService, options, setOptions }) => {
14 | return (
15 | 高度
43 | { 50 | setOption(unit); 51 | setValue( 52 | ['custom'].includes(unit) 53 | ? '暂不支持' 54 | : unitValue.current?.[unit] || '', 55 | ); 56 | }} 57 | > 58 | 59 | 60 | 61 | 62 | 63 | } 64 | disabled={['custom'].includes(option)} 65 | onBlur={() => setStyle()} 66 | value={value} 67 | onChange={e => setValue(e.target.value)} 68 | /> 69 |
16 |
62 | );
63 | };
64 |
65 | export default Header;
66 |
--------------------------------------------------------------------------------
/src/controller/service/app.ts:
--------------------------------------------------------------------------------
1 | import ProjectService from './project';
2 | import App from 'src/model/app';
3 | import { AppConfig, ComponentValue, Options } from 'src/controller';
4 | import { AppStorage } from '../code';
5 |
6 | export default class AppService extends App {
7 | static updateView: () => void = () => {};
8 | private appStorage: AppStorage = new AppStorage();
9 | public appConfig: AppConfig;
10 |
11 | constructor(appConfig: AppConfig) {
12 | super();
13 |
14 | this.appConfig = appConfig;
15 | AppService.components = appConfig.components;
16 |
17 | this.init();
18 | }
19 |
20 | get projects() {
21 | return this.appStorage.projects;
22 | }
23 |
24 | init = () => {
25 | const projectId = [...this.appStorage.projectID].pop();
26 | const project = typeof projectId === 'string' && this.projects.get(projectId);
27 | if (project) {
28 | this.project = new ProjectService({
29 | ...this.appConfig.project.options,
30 | ...project,
31 | });
32 | } else {
33 | this.new(this.appConfig.project.options);
34 | }
35 | if (this.projects.size) {
36 | App.idx =
37 | Math.max(...Array.from(this.projects.keys()).map(_ => Number(_))) + 1;
38 | }
39 | };
40 |
41 | keep = () => {
42 | if (this.project) {
43 | this.appStorage.keep(this.project);
44 | this.update();
45 | }
46 | };
47 |
48 | set = (id: string) => {
49 | const project = this.appStorage.get(id);
50 | if (project) {
51 | this.project = new ProjectService({
52 | ...this.appConfig.project.options,
53 | ...project,
54 | });
55 | this.update();
56 | }
57 | };
58 |
59 | delete = (id: string) => {
60 | this.appStorage.delete(id);
61 | this.init();
62 | this.update();
63 | };
64 |
65 | new = (options?: Options) => {
66 | const project = new ProjectService();
67 | project.ceratePage(options || this.appConfig.project.options);
68 | this.project = project;
69 | this.update();
70 | };
71 |
72 | update = () => {
73 | Promise.resolve().then(() => AppService.updateView());
74 | };
75 |
76 | static registerComponent = (key: string, value: ComponentValue) => {
77 | AppService.components.set(key, value);
78 | Promise.resolve().then(() => AppService.updateView());
79 | };
80 | }
81 |
--------------------------------------------------------------------------------
/src/pages/App/components/Header/components/Home/index.tsx:
--------------------------------------------------------------------------------
1 | import { FolderAddOutlined, PlusCircleOutlined } from '@ant-design/icons';
2 | import { Col, Drawer, Row } from 'antd';
3 | import { useContext } from 'react';
4 | import { AppContext } from 'src/context';
5 | import { ProjectObject } from 'src/model';
6 | import Visible from 'src/pages/components/Visible';
7 | import Project from '../Project';
8 | import styles from './index.module.scss';
9 |
10 | const Home: React.FC<{}> = () => {
11 | const { appService } = useContext(AppContext);
12 |
13 | const projects: ProjectObject[] = [];
14 | appService.projects.forEach(project => projects.unshift(project));
15 |
16 | return (
17 |
17 |
54 |
18 | {Object.values(projectService.getPages()).map(({ name, id }) => {
19 | const style = {
20 | border: `1px solid ${
21 | id === projectService.currentId ? '#1890ff' : ''
22 | }`,
23 | };
24 | return (
25 |
42 |
26 | projectService.setPages(id)}>{name}
27 | projectService.delete(id)}
30 | onCancel={() => {}}
31 | okText="是"
32 | cancelText="否"
33 | >
34 |
38 |
39 | );
40 | })}
41 |
35 |
37 |
43 |
52 |
53 |
55 |
61 | {
32 | appService.new();
33 | setVisible(false);
34 | }}
35 | >
36 |
37 |
41 |
42 | {projects.map(project => (
43 | setVisible(!visible)}
55 | style={{ height: '100%', width: '100%', padding: '5px 10px' }}
56 | >
57 | 项目
58 |
62 |
63 | )}
64 |
53 | {}} style={{ height: '100%' }}>
71 | {tabPanes}
72 |
73 |
74 | );
75 | };
76 |
77 | export default CodeEdit;
78 |
--------------------------------------------------------------------------------
/src/pages/App/components/Header/components/Project/index.tsx:
--------------------------------------------------------------------------------
1 | import { ArrowDownOutlined, DeleteOutlined, EditOutlined } from '@ant-design/icons';
2 | import { Popconfirm } from 'antd';
3 | import { AppService } from 'src/controller';
4 | import { ProjectObject } from 'src/model';
5 | import { exportCode } from '../../../Content/Header/component/code/util';
6 | import styles from './index.module.scss';
7 |
8 | const Project: React.FC<{
9 | project: ProjectObject;
10 | appService: AppService;
11 | setVisible: (visible: boolean) => void;
12 | }> = ({ project, appService, setVisible }) => {
13 | const operation = [
14 | {
15 | key: 'EditOutlined',
16 | icon: (
17 |
54 |
69 |
70 | 当前页面
55 |
56 |
68 | {
20 | appService.set(project.id);
21 | setVisible(false);
22 | }}
23 | >
24 |
26 | ),
27 | },
28 | {
29 | key: 'ArrowDownOutlined',
30 | icon: (
31 | {
34 | exportCode(appService.project);
35 | }}
36 | >
37 |
39 | ),
40 | },
41 | {
42 | key: 'DeleteOutlined',
43 | icon: (
44 |
52 |
54 |
63 |
80 | );
81 | };
82 |
83 | export default Project;
84 |
--------------------------------------------------------------------------------
/src/controller/service/project.ts:
--------------------------------------------------------------------------------
1 | import { PageObject, Project, ProjectObject } from 'src/model';
2 | import PageService from './page';
3 | import Keyboard from '../keyboard-event';
4 | import { Options, ProjectOptions } from 'src/controller';
5 |
6 | export default class ProjectService extends Project {
7 | constructor(options?: ProjectObject & ProjectOptions) {
8 | super(options);
9 | new Keyboard(this);
10 | }
11 |
12 | getPages() {
13 | return this.pages;
14 | }
15 |
16 | setPages(id: string) {
17 | this.currentId = id;
18 | this.update();
19 | }
20 |
21 | ceratePage(options: Options) {
22 | const id = `Page${this.idx}`;
23 | Reflect.set(
24 | this.pages,
25 | id,
26 | new PageService({
27 | id,
28 | update: this.update,
29 | name: options.name || 'Page',
30 | selectStyle: options.selectStyle || [],
31 | target: options.target,
32 | previewStyle:
33 | options.previewStyle.map(option => ({
34 | ...option,
35 | isCanUse: option?.isCanUse ?? true,
36 | })) || [],
37 | }),
38 | );
39 | this.currentId = id;
40 | this.update();
41 | }
42 |
43 | delete(id: string) {
44 | // delete page === current page
45 | if (id === this.currentId) {
46 | const pagesKey = Object.keys(this.pages);
47 | const currentPageIndex = pagesKey.findIndex(key => key === id);
48 | if (currentPageIndex !== -1) {
49 | this.currentId =
50 | pagesKey[
51 | currentPageIndex > 0 ? currentPageIndex - 1 : currentPageIndex + 1
52 | ];
53 | }
54 | }
55 | Reflect.deleteProperty(this.pages, id);
56 | this.update();
57 | }
58 |
59 | updateName = (name: string) => {
60 | this.name = name;
61 | };
62 |
63 | updateDescription = (description: string) => {
64 | this.description = description;
65 | };
66 |
67 | getCurrentPage = (): PageService => {
68 | return Object.values(this.pages).filter(({ id }) => id === this.currentId)[0];
69 | };
70 |
71 | toObject = (): ProjectObject => {
72 | return {
73 | idx: this._idx,
74 | currentId: this.currentId,
75 | id: this.id,
76 | name: this.name,
77 | description: this.description,
78 | pages: Object.entries(this.pages).reduce((projects, [key, value]) => {
79 | projects[key] = value.toObject();
80 | return projects;
81 | }, {} as { [props: string]: PageObject }),
82 | };
83 | };
84 | }
85 |
--------------------------------------------------------------------------------
/src/pages/App/components/Content/Header/component/size.tsx:
--------------------------------------------------------------------------------
1 | import { CloseOutlined } from '@ant-design/icons';
2 | import { InputNumber, Select } from 'antd';
3 | import { Canvas } from '../new-build';
4 | import styles from '../index.module.scss';
5 | import { models } from 'src/const/container';
6 |
7 | const { Option } = Select;
8 |
9 | interface SizeProps {
10 | value?: Canvas;
11 | onChange?: (value: Canvas) => void;
12 | }
13 |
14 | const Size: React.FC
64 |
65 | {operation.map(({ key, icon }) => (
66 |
69 | {icon}
67 | ))}
68 |
70 |
79 |
71 | 项目名:
72 | {project.name ? project.name : '--'}
73 |
74 |
75 | 项目描述:
76 | {project.description ? project.description : '--'}
77 |
78 |
40 | `${value}px`}
44 | disabled={value?.key !== 'custom'}
45 | parser={value => value?.replace('px', '') || ''}
46 | onChange={width => {
47 | if (width) {
48 | onChange?.({
49 | key: 'custom',
50 | width: `${String(width)}`,
51 | height: value?.height || '0',
52 | });
53 | }
54 | }}
55 | />
56 |
57 | `${value}px`}
63 | disabled={value?.key !== 'custom'}
64 | parser={value => value?.replace('px', '') || ''}
65 | onChange={height => {
66 | if (height) {
67 | onChange?.({
68 | key: 'custom',
69 | width: value?.width || '0',
70 | height: `${String(height)}`,
71 | });
72 | }
73 | }}
74 | />
75 |
76 |
77 | );
78 | };
79 |
80 | export default Size;
81 |
--------------------------------------------------------------------------------
/src/pages/App/components/Drawer/index.tsx:
--------------------------------------------------------------------------------
1 | import { InputNumber, Tabs, Tooltip } from 'antd';
2 | import { useContext } from 'react';
3 | import { AppContext } from 'src/context';
4 | import CssEdit from './css-edit';
5 | import styles from './index.module.scss';
6 | import ComponentEdit from './component-edit';
7 | import Attribute from './attribute';
8 | import { CloseSquareOutlined, ColumnWidthOutlined } from '@ant-design/icons';
9 | import { useState } from 'react';
10 | import { useEffect } from 'react';
11 |
12 | const { TabPane } = Tabs;
13 |
14 | const DrawerWidth = 'drawer-width';
15 |
16 | const Drawer: React.FC<{}> = () => {
17 | const [width, setWidth] = useState(300);
18 | const [isShow, setShow] = useState(false);
19 | const { appService } = useContext(AppContext);
20 |
21 | const page = appService.project.getCurrentPage();
22 |
23 | useEffect(() => {
24 | setShow(!!page?.currentNode[0]);
25 | // eslint-disable-next-line
26 | }, [page?.currentNode, page?.currentNode[0]]);
27 |
28 | useEffect(() => {
29 | setWidth(Number(localStorage.getItem(DrawerWidth) ?? 300));
30 | }, []);
31 |
32 | return (
33 |
37 |
61 | <>
62 |
63 |
65 |
66 |
68 |
69 |
71 |
72 |
73 |
74 | );
75 | };
76 |
77 | export default Drawer;
78 |
--------------------------------------------------------------------------------
/src/controller/service/history.ts:
--------------------------------------------------------------------------------
1 | import { HistoryLog, HistoryObject } from 'src/model';
2 | import History from 'src/model/history';
3 | import PageService from './page';
4 |
5 | class HistoryService extends History {
6 | constructor(options: Partial
38 |
60 |
39 |
40 |
41 |
44 | {
51 | setWidth(value);
52 | localStorage.setItem(DrawerWidth, String(value));
53 | }}
54 | />
55 |
56 | setShow(false)}>
57 |
59 |
49 | 项目名
50 | {
53 | setName(e.target.value);
54 | }}
55 | />
56 |
57 |
58 | 项目描述
59 | {
62 | setDescription(e.target.value);
63 | }}
64 | />
65 |
66 |
67 | }
68 | title="项目信息"
69 | >
70 |
80 |
21 |
45 | ),
46 | [pageService, value],
47 | );
48 | };
49 |
50 | const Component: React.FC<{ ast: AST; pageService: PageService }> = ({
51 | ast,
52 | pageService,
53 | }) => {
54 | const node = useMemo(
55 | () => pageService?.newNode(_.cloneDeep(ast)),
56 | [ast, pageService],
57 | );
58 |
59 | const DOM = useMemo(
60 | () => (
61 |
22 | setValue(e.target.value)}
25 | addonAfter={
28 |
29 | {ComponentsAST.filter(component => {
30 | return (
31 | !value ||
32 | !component.children ||
33 | (typeof component.children !== 'string' &&
34 | component.children.every(child => {
35 | return new RegExp(`${_.escapeRegExp(value)}`, 'ig').test(
36 | isString(child) ? child : child._name,
37 | );
38 | }))
39 | );
40 | }).map((ast, index) => (
41 |
44 | {node?.createElement({ eventType: EventType.layout })}
70 |
68 | {renderFutureHistory()}
69 | {renderHistory()}
70 |
71 | );
72 | };
73 |
74 | const HistoryList = ({
75 | history,
76 | renderSpanIcon,
77 | className,
78 | }: {
79 | history: HistoryLog;
80 | renderSpanIcon: (id: number) => React.ReactNode;
81 | className?: string;
82 | }) => {
83 | const { id, time, description } = history;
84 | return (
85 |
86 | {description}
87 | {formatTime(time)}
88 | {renderSpanIcon(id)}
89 |
90 | );
91 | };
92 |
93 | export default History;
94 |
--------------------------------------------------------------------------------
/src/controller/browser/event.ts:
--------------------------------------------------------------------------------
1 | import { isNull } from 'lodash';
2 | import React from 'react';
3 | import { DragEleId } from 'src/const';
4 | import { isString } from 'src/controller/util';
5 | import { NodeService } from '..';
6 |
7 | class DocEvent {
8 | private static dragData: { [props: string]: NodeService } = {};
9 |
10 | onDrop = (node: NodeService) => (ev: React.DragEvent) => {
11 | ev.preventDefault();
12 | ev.stopPropagation();
13 | const id = ev.dataTransfer?.getData(DragEleId);
14 | if (id) {
15 | const nodeService: NodeService = Reflect.get(DocEvent.dragData, id);
16 | if (nodeService) {
17 | Reflect.deleteProperty(DocEvent.dragData, id);
18 | // up merge
19 | node.styles.push(...nodeService.styles);
20 |
21 | const children = isString(node.children)
22 | ? [node.children]
23 | : node.children || [];
24 |
25 | !isNull(children) &&
26 | children?.push(
27 | ...((isString(nodeService.children)
28 | ? [nodeService.children]
29 | : nodeService.children?.filter(_ => _)) || []),
30 | );
31 |
32 | if (!isNull(node.children)) {
33 | node.children = children;
34 | }
35 | }
36 |
37 | node.getPageServiceInstance()?.update({ description: '添加元素' });
38 | }
39 | };
40 |
41 | onDragOver = (node: NodeService) => (ev: React.DragEvent) => {
42 | ev.preventDefault();
43 | if (ev.dataTransfer?.dropEffect) {
44 | ev.dataTransfer.dropEffect = 'move';
45 | }
46 | };
47 |
48 | onClick = (node: NodeService) => (ev: React.MouseEvent) => {
49 | try {
50 | ev.stopPropagation();
51 | // some node click return
52 | if (
53 | node
54 | .getPageServiceInstance()
55 | ?.currentNode.map(node => node.toString())
56 | .join(';') === node.toString()
57 | ) {
58 | return;
59 | }
60 |
61 | if (node.type !== 'Component' && ev.currentTarget !== ev.target) {
62 | // component no click event
63 | }
64 | node.getPageServiceInstance()?.setCurrentNode([node]);
65 | } catch (err) {
66 | console.error(`onClick Event Error ${err?.message}`);
67 | }
68 | };
69 |
70 | createContainerEvent = (node: NodeService) => {
71 | const id = `drag${Math.random()}`;
72 | return {
73 | id,
74 | draggable: true,
75 | onDragStart: (ev: React.DragEvent) => {
76 | // fix self drag
77 | Reflect.set(DocEvent.dragData, id, node.copy({}));
78 | ev.dataTransfer?.setData(DragEleId, id);
79 | if (ev.dataTransfer?.dropEffect) {
80 | ev.dataTransfer.dropEffect = 'move';
81 | }
82 | },
83 | };
84 | };
85 | }
86 |
87 | export default DocEvent;
88 |
--------------------------------------------------------------------------------
/src/pages/App/components/Content/Header/component/code/index.tsx:
--------------------------------------------------------------------------------
1 | import { CodeOutlined, DownloadOutlined } from '@ant-design/icons';
2 | import { Button, Drawer, Tooltip } from 'antd';
3 | import { ProjectService } from 'src/controller';
4 | import Visible from 'src/pages/components/Visible';
5 | import BaseInfo from './base-info';
6 | import Config from './config';
7 | import CodeEdit from './code-edit';
8 | import styles from './index.module.scss';
9 | import { useState } from 'react';
10 | import { exportCode, templateType } from './util';
11 |
12 | export interface CodeConfig {
13 | cssLocation: 'inner' | 'link';
14 | page: string;
15 | fileSuffix: 'jsx' | 'tsx';
16 | component: templateType;
17 | cssFileSuffix: 'css' | 'less' | 'scss';
18 | cssModule: boolean;
19 | }
20 |
21 | export const getInitCodeConfig = (project?: ProjectService): CodeConfig => ({
22 | cssLocation: 'link',
23 | page: (project && Object.values(project.getPages())[0].id) || '',
24 | fileSuffix: 'jsx',
25 | component: templateType.functionComponent,
26 | cssFileSuffix: 'css',
27 | cssModule: true,
28 | });
29 |
30 | const Code: React.FC<{ project: ProjectService }> = ({ project }) => {
31 | const [codeConfig, setCodeConfig] = useState
48 |
66 |
49 |
62 |
50 | }
54 | onClick={() => exportCode(project, codeConfig)}
55 | >
56 | 导出
57 |
58 |
59 |
63 |
65 |
12 |
89 | );
90 | };
91 |
92 | export default Config;
93 |
--------------------------------------------------------------------------------
/src/controller/react/container.tsx:
--------------------------------------------------------------------------------
1 | import { isFunction, isString } from 'lodash';
2 | import React from 'react';
3 | import { NodeService } from '..';
4 | import AppService from '../service/app';
5 | import { isElement } from 'src/controller/util';
6 |
7 | export type Event
13 |
15 | React 配置
14 |
16 |
51 |
17 |
33 | 组件形式
18 |
19 | {
22 | setCodeConfig({
23 | ...codeConfig,
24 | component: e.target.value,
25 | });
26 | }}
27 | >
28 | 类组件
29 | 函数组件
30 |
31 |
32 |
34 |
50 | 文件后缀
35 |
36 | {
39 | setCodeConfig({
40 | ...codeConfig,
41 | fileSuffix: e.target.value,
42 | });
43 | }}
44 | >
45 | .tsx
46 | .jsx
47 |
48 |
49 |
52 |
54 | 样式配置
53 |
55 |
88 |
56 |
73 | CSS文件后缀
57 |
58 | {
61 | setCodeConfig({
62 | ...codeConfig,
63 | cssFileSuffix: e.target.value,
64 | });
65 | }}
66 | >
67 | .css
68 | .less
69 | .scss
70 |
71 |
72 |
74 |
87 | CSS-Module
75 |
76 | {
79 | setCodeConfig({
80 | ...codeConfig,
81 | cssModule: value,
82 | });
83 | }}
84 | />
85 |
86 |
22 |
104 | );
105 | };
106 | export default Operation;
107 |
--------------------------------------------------------------------------------
/src/pages/App/components/Content/Header/new-build.tsx:
--------------------------------------------------------------------------------
1 | import { Button, Form, Input, Modal } from 'antd';
2 | import { useState } from 'react';
3 | import ReactDOM from 'react-dom';
4 | import { PreviewStyle, SelectStyle } from 'src/const';
5 | import { models } from 'src/const/container';
6 | import { ProjectService } from 'src/controller';
7 | import Size from './component/size';
8 |
9 | export interface Values {
10 | name: string;
11 | canvas: {
12 | height: string;
13 | width: string;
14 | };
15 | }
16 |
17 | export interface Canvas {
18 | height: string;
19 | width: string;
20 | key: string;
21 | }
22 |
23 | export const CreateModal: React.FC<{ projectService: ProjectService }> = ({
24 | projectService,
25 | }) => {
26 | const [visible, setVisible] = useState(true);
27 |
28 | const checkCanvas = (_: any, value: Canvas) => {
29 | if (value.height !== '0' && value.width !== '0') {
30 | return Promise.resolve();
31 | }
32 | return Promise.reject(new Error('未设置画布大小'));
33 | };
34 |
35 | const createPage = (values: Values) => {
36 | projectService.ceratePage({
37 | name: values.name,
38 | target: {
39 | _name: 'div',
40 | type: 'Element',
41 | styles: [
42 | {
43 | key: 'height',
44 | value: `${values.canvas.height}px`,
45 | },
46 | {
47 | key: 'width',
48 | value: `${values.canvas.width}px`,
49 | },
50 | {
51 | key: 'background',
52 | value: 'white',
53 | },
54 | {
55 | key: 'overflow',
56 | value: 'auto',
57 | },
58 | ],
59 | children: [],
60 | },
61 | selectStyle: SelectStyle,
62 | previewStyle: PreviewStyle,
63 | });
64 | setVisible(false);
65 | };
66 |
67 | return (
68 |
23 |
25 |
26 |
28 |
29 |
48 |
49 | {
31 | projectService.getCurrentPage().backOffHistory();
32 | }}
33 | >
34 |
35 | 
36 |
37 |
38 | {
40 | projectService.getCurrentPage().forwardHistory();
41 | }}
42 | >
43 |
44 | 
45 |
46 |
47 |
50 | {
74 | setOptions({
75 | ...options,
76 | zoom: value,
77 | });
78 | }}
79 | className={styles.inputNumber}
80 | />
81 |
100 |
51 |
52 | {
59 | if (options.zoom <= Min_Zoom) return;
60 | setOptions({
61 | ...options,
62 | zoom: options.zoom - 0.5,
63 | });
64 | }}
65 | />
66 |
67 |
68 |
82 |
83 | {
90 | if (options.zoom >= Max_Zoom) return;
91 | setOptions({
92 | ...options,
93 | zoom: options.zoom + 0.5,
94 | });
95 | }}
96 | />
97 |
98 |
99 |
101 |
103 |
102 |
105 | update(code)}>更新
103 | reset()}>重置
104 | | 操作 | 说明 |
|---|---|
| Ctrl + c | 「 复制 」 |
| Ctrl + v | 「 粘贴 」 |
| Ctrl + Backspace | 「 删除 」 |
| Ctrl + z | 「 返回 」 |
| Ctrl + y | 「 前进 」 |
| Operation | Explain |
|---|---|
| Ctrl + c | 「 Copy 」 |
| Ctrl + v | 「 Paste 」 |
| Ctrl + Backspace | 「 Delete 」 |
| Ctrl + z | 「 Back 」 |
| Ctrl + y | 「 Forward 」 |
111 |
143 | );
144 | };
145 |
146 | export default NodeTree;
147 |
--------------------------------------------------------------------------------
/src/controller/service/node.ts:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { CodeConfig, JSONComponent, NodeObject, Props, Style } from 'src/model';
3 | import { NodeOption } from 'src/model';
4 | import { PageService } from '..';
5 | import { EventType } from '../browser';
6 | import { isString } from 'src/controller/util';
7 | import { isNull } from 'lodash';
8 | import Node from 'src/model/node';
9 |
10 | export type GetPageServiceInstance = () => PageService;
11 | export default class NodeService extends Node {
12 | public getPageServiceInstance: GetPageServiceInstance;
13 | // eslint-disable-next-line
14 | constructor(Options: NodeOption, getPageServiceInstance: GetPageServiceInstance) {
15 | super(Options);
16 | this.getPageServiceInstance = getPageServiceInstance;
17 | }
18 |
19 | createElement = ({ eventType }: { eventType: EventType }): React.ReactElement => {
20 | return this.create({ node: this, eventType });
21 | };
22 |
23 | copy = ({ isCopyID }: { isCopyID?: boolean }): NodeService => {
24 | const { children, element, id } = this;
25 | return new NodeService(
26 | {
27 | ...this.getBaseAttribute(this),
28 | element,
29 | id: isCopyID ? id : this.getPageServiceInstance().getIdx(),
30 | children: isString(children)
31 | ? children
32 | : children?.map(children =>
33 | isString(children) ? children : children.copy({ isCopyID }),
34 | ),
35 | },
36 | this.getPageServiceInstance,
37 | );
38 | };
39 |
40 | setStyles = (styles: Style[]) => {
41 | this.styles = styles;
42 | };
43 |
44 | setContent = (content: string) => {
45 | if (Array.isArray(this.children)) {
46 | if (isString(this.children[0])) {
47 | this.children[0] = content;
48 | } else {
49 | this.children?.unshift(content);
50 | }
51 | } else {
52 | if (!isNull(this.children)) {
53 | this.children = [content];
54 | } else {
55 | console.error(`Error: ${this._name} can not add content`);
56 | }
57 | }
58 | };
59 |
60 | setComponent = (component: JSONComponent, _this: PageService) => {
61 | const { _name, children, _type, styles, className, hasCanChild, ...props } =
62 | component;
63 | this._name = _name;
64 | this.props = props;
65 | this.type = _type;
66 | this.styles = styles || [];
67 | this.className = className;
68 | this.hasCanChild = hasCanChild;
69 |
70 | const newNodeService = (options: JSONComponent): NodeService => {
71 | const { _name, children, _type, styles, className, hasCanChild, ...rest } =
72 | options;
73 | return new NodeService(
74 | {
75 | _name: options._name,
76 | type: _type,
77 | styles: styles,
78 | className: className,
79 | hasCanChild: hasCanChild,
80 | props: rest,
81 | id: _this.idx,
82 | children: isString(children)
83 | ? children
84 | : children?.map(child =>
85 | isString(child) ? child : newNodeService(child),
86 | ),
87 | },
88 | this.getPageServiceInstance,
89 | );
90 | };
91 |
92 | this.children = isString(children)
93 | ? children
94 | : children?.map(child => (isString(child) ? child : newNodeService(child)));
95 | };
96 |
97 | getComponentConfig = (node: NodeService = this): Props => {
98 | return {
99 | _name: node._name,
100 | _type: node.type,
101 | styles: node.styles,
102 | className: node.className,
103 | hasCanChild: node.hasCanChild,
104 | ...node.props,
105 | children: isString(node.children)
106 | ? node.children
107 | : node.children?.map(child =>
108 | isString(child) ? child : this.getComponentConfig(child),
109 | ),
110 | };
111 | };
112 |
113 | clearEffect = () => {
114 | this.isSelect = false;
115 | if (!isString(this.children)) {
116 | this.children?.forEach(node => !isString(node) && node.clearEffect());
117 | }
118 | };
119 |
120 | toString = (): string => {
121 | const { id, children } = this;
122 | // why isSelect (toString can`t change component no`t update)
123 | return `${id}:${
124 | isString(children) ? children : children?.map(node => node.toString())
125 | }`;
126 | };
127 |
128 | setClassName = (className: string) => {
129 | this.className = className;
130 | };
131 |
132 | setCodeConfig = (codeConfig: CodeConfig) => {
133 | this.codeConfig = codeConfig;
134 | };
135 |
136 | getBaseAttribute = (node: NodeService) => {
137 | const {
138 | type,
139 | _name,
140 | hasCanChild,
141 | isDelete,
142 | isSelect,
143 | isRoot,
144 | codeConfig,
145 | styles,
146 | className,
147 | props,
148 | id,
149 | } = node;
150 | return {
151 | type,
152 | _name,
153 | hasCanChild,
154 | isDelete,
155 | isSelect,
156 | isRoot,
157 | styles,
158 | codeConfig,
159 | className,
160 | props,
161 | id,
162 | };
163 | };
164 |
165 | toObject = (): NodeObject => {
166 | return Object.assign(this.getBaseAttribute(this), {
167 | children: isString(this.children)
168 | ? this.children
169 | : this.children?.map(child => (isString(child) ? child : child.toObject())),
170 | random: Node.random,
171 | element: null,
172 | });
173 | };
174 | }
175 |
--------------------------------------------------------------------------------
/src/controller/service/page.ts:
--------------------------------------------------------------------------------
1 | import {
2 | AST,
3 | Style,
4 | JSONComponent,
5 | PageObject,
6 | ASTObject,
7 | CodeConfig,
8 | } from 'src/model';
9 | import { EventType } from '../browser';
10 | import { HistoryService, NodeService, Options } from '..';
11 | import { isString } from 'src/controller/util';
12 | import Page from 'src/model/page';
13 |
14 | export interface Update {
15 | // eslint-disable-next-line
16 | ({}: { description?: string; isKeepHistory?: boolean }): void;
17 | }
18 |
19 | export default class PageService extends Page {
20 | public update: Update;
21 | public options: Options;
22 | public history: HistoryService;
23 | public updateSign: boolean = false;
24 | constructor(options: Required
112 | setSearch(e.target.value)}
115 | />
116 |
117 |
118 | {
121 | if (node) {
122 | const nodeService = nodeKeyId.get(node.key);
123 | if (nodeService) {
124 | page.setCurrentNode([nodeService]);
125 | }
126 | }
127 | }}
128 | showLine={{ showLeafIcon: false }}
129 | selectedKeys={
130 | appService.project.getCurrentPage()?.currentNode.map(({ id }) => id) ||
131 | []
132 | }
133 | autoExpandParent={autoExpandParent}
134 | expandedKeys={expandedKeys}
135 | onExpand={expandedKeysValue => {
136 | setAutoExpandParent(false);
137 | setExpandedKeys(expandedKeysValue);
138 | }}
139 | treeData={filter(cloneJsxObject(trees))}
140 | />
141 |
142 |
236 |
286 | );
287 | };
288 |
289 | export default Flex;
290 |
--------------------------------------------------------------------------------
/src/pages/App/slider-components/Layout/const.ts:
--------------------------------------------------------------------------------
1 | import { AST } from 'src/model';
2 |
3 | const flexRow: AST = {
4 | _name: 'div',
5 | type: 'Element',
6 | styles: [
7 | { key: 'display', value: 'flex' },
8 | {
9 | key: 'height',
10 | value: '100%',
11 | },
12 | {
13 | key: 'width',
14 | value: '100%',
15 | },
16 | ],
17 | children: new Array(3).fill(0).map(item => {
18 | return {
19 | _name: 'div',
20 | type: 'Element',
21 | styles: [
22 | {
23 | key: 'display',
24 | value: 'flex',
25 | },
26 | {
27 | key: 'flex',
28 | value: '1',
29 | },
30 | ],
31 | children: [],
32 | extraStyles: [
33 | {
34 | key: 'border',
35 | value: '1px dashed #000000',
36 | },
37 | {
38 | key: 'padding',
39 | value: '5px',
40 | },
41 | ],
42 | };
43 | }),
44 | };
45 |
46 | const flexCol: AST = {
47 | _name: 'div',
48 | type: 'Element',
49 | styles: [
50 | { key: 'display', value: 'flex' },
51 | { key: 'flex-direction', value: 'column' },
52 | {
53 | key: 'height',
54 | value: '100%',
55 | },
56 | {
57 | key: 'width',
58 | value: '100%',
59 | },
60 | ],
61 | children: new Array(3).fill(0).map(item => {
62 | return {
63 | _name: 'div',
64 | type: 'Element',
65 | styles: [
66 | {
67 | key: 'display',
68 | value: 'flex',
69 | },
70 | {
71 | key: 'flex',
72 | value: '1',
73 | },
74 | ],
75 | children: [],
76 | extraStyles: [
77 | {
78 | key: 'border',
79 | value: '1px dashed #000000',
80 | },
81 | {
82 | key: 'padding',
83 | value: '5px',
84 | },
85 | ],
86 | };
87 | }),
88 | };
89 |
90 | const mobile: AST = {
91 | _name: 'div',
92 | type: 'Element',
93 | styles: [
94 | { key: 'padding', value: '50px 0' },
95 | {
96 | key: 'height',
97 | value: '100%',
98 | },
99 | {
100 | key: 'width',
101 | value: '100%',
102 | },
103 | {
104 | key: 'position',
105 | value: 'relative',
106 | },
107 | {
108 | key: 'display',
109 | value: 'flex',
110 | },
111 | ],
112 | children: [
113 | {
114 | _name: 'div',
115 | type: 'Element',
116 | styles: [
117 | {
118 | key: 'position',
119 | value: 'absolute',
120 | },
121 | {
122 | key: 'height',
123 | value: '50px',
124 | },
125 | {
126 | key: 'width',
127 | value: '100%',
128 | },
129 | {
130 | key: 'top',
131 | value: '0',
132 | },
133 | {
134 | key: 'left',
135 | value: '0',
136 | },
137 | ],
138 | children: [],
139 | },
140 | {
141 | _name: 'div',
142 | type: 'Element',
143 | styles: [
144 | {
145 | key: 'flex',
146 | value: '1',
147 | },
148 | {
149 | key: 'min-height',
150 | value: '60px',
151 | },
152 | {
153 | key: 'overflow',
154 | value: 'auto',
155 | },
156 | {
157 | key: 'margin',
158 | value: '10px 0',
159 | },
160 | ],
161 | children: [],
162 | },
163 | {
164 | _name: 'div',
165 | type: 'Element',
166 | styles: [
167 | {
168 | key: 'position',
169 | value: 'absolute',
170 | },
171 | {
172 | key: 'height',
173 | value: '50px',
174 | },
175 | {
176 | key: 'width',
177 | value: '100%',
178 | },
179 | {
180 | key: 'bottom',
181 | value: '0',
182 | },
183 | {
184 | key: 'left',
185 | value: '0',
186 | },
187 | ],
188 | children: [],
189 | },
190 | ],
191 | };
192 |
193 | const none: AST = {
194 | _name: 'div',
195 | type: 'Element',
196 | styles: [
197 | {
198 | key: 'height',
199 | value: '100%',
200 | },
201 | {
202 | key: 'width',
203 | value: '100%',
204 | },
205 | {
206 | key: 'overflow',
207 | value: 'auto',
208 | },
209 | ],
210 | children: [
211 | {
212 | _name: 'div',
213 | type: 'Element',
214 | styles: [
215 | {
216 | key: 'height',
217 | value: '100%',
218 | },
219 | {
220 | key: 'width',
221 | value: '100%',
222 | },
223 | {
224 | key: 'overflow',
225 | value: 'auto',
226 | },
227 | ],
228 | children: [],
229 | },
230 | ],
231 | };
232 |
233 | const scroll: AST = {
234 | _name: 'div',
235 | type: 'Element',
236 | styles: [
237 | {
238 | key: 'height',
239 | value: '100%',
240 | },
241 | {
242 | key: 'width',
243 | value: '100%',
244 | },
245 | {
246 | key: 'overflow',
247 | value: 'auto',
248 | },
249 | ],
250 | children: [
251 | {
252 | _name: 'div',
253 | type: 'Element',
254 | styles: [
255 | {
256 | key: 'height',
257 | value: '300%',
258 | },
259 | {
260 | key: 'width',
261 | value: '100%',
262 | },
263 | {
264 | key: 'background',
265 | value: '#f5f5f5',
266 | },
267 | ],
268 | children: [],
269 | },
270 | ],
271 | };
272 |
273 | const position: AST = {
274 | _name: 'div',
275 | type: 'Element',
276 | styles: [
277 | {
278 | key: 'height',
279 | value: '100%',
280 | },
281 | {
282 | key: 'width',
283 | value: '100%',
284 | },
285 | {
286 | key: 'position',
287 | value: 'relative',
288 | },
289 | ],
290 | children: [
291 | {
292 | _name: 'div',
293 | type: 'Element',
294 | styles: [
295 | {
296 | key: 'position',
297 | value: 'absolute',
298 | },
299 | {
300 | key: 'width',
301 | value: '50px',
302 | },
303 | {
304 | key: 'height',
305 | value: '50px',
306 | },
307 | {
308 | key: 'top',
309 | value: '10px',
310 | },
311 | {
312 | key: 'left',
313 | value: '10px',
314 | },
315 | {
316 | key: 'background',
317 | value: '#f5f5f5',
318 | },
319 | ],
320 | children: [],
321 | },
322 | ],
323 | };
324 |
325 | const componentLayout: AST = {
326 | _name: 'div',
327 | type: 'Element',
328 | styles: [],
329 | children: [
330 | {
331 | _name: 'Layout',
332 | type: 'Component',
333 | styles: [],
334 | children: [
335 | {
336 | _name: 'Layout.Header',
337 | type: 'Component',
338 | styles: [],
339 | hasCanChild: true,
340 | children: 'Header',
341 | },
342 | {
343 | _name: 'Layout.Content',
344 | type: 'Component',
345 | styles: [],
346 | hasCanChild: true,
347 | children: 'Content',
348 | },
349 | {
350 | _name: 'Layout.Footer',
351 | type: 'Component',
352 | styles: [],
353 | hasCanChild: true,
354 | children: 'Footer',
355 | },
356 | ],
357 | props: {
358 | style: { height: '100%' },
359 | },
360 | },
361 | ],
362 | };
363 |
364 | const componentSliderLayout: AST = {
365 | _name: 'div',
366 | type: 'Element',
367 | styles: [],
368 | children: [
369 | {
370 | _name: 'Layout',
371 | type: 'Component',
372 | styles: [],
373 | children: [
374 | {
375 | _name: 'Layout.Sider',
376 | type: 'Component',
377 | styles: [],
378 | hasCanChild: true,
379 | children: 'Sider',
380 | },
381 | {
382 | _name: 'Layout',
383 | type: 'Component',
384 | styles: [],
385 | hasCanChild: true,
386 | children: [
387 | {
388 | _name: 'Layout.Header',
389 | type: 'Component',
390 | styles: [],
391 | hasCanChild: true,
392 | children: 'Header',
393 | },
394 | {
395 | _name: 'Layout.Content',
396 | type: 'Component',
397 | styles: [],
398 | hasCanChild: true,
399 | children: 'Content',
400 | },
401 | {
402 | _name: 'Layout.Footer',
403 | type: 'Component',
404 | styles: [],
405 | hasCanChild: true,
406 | children: 'Footer',
407 | },
408 | ],
409 | },
410 | ],
411 | props: {
412 | style: { height: '100%' },
413 | },
414 | },
415 | ],
416 | };
417 |
418 | const componentGrid: AST = {
419 | _name: 'div',
420 | type: 'Element',
421 | styles: [
422 | {
423 | key: 'height',
424 | value: '100%',
425 | },
426 | {
427 | key: 'width',
428 | value: '100%',
429 | },
430 | ],
431 | children: [
432 | {
433 | _name: 'Row',
434 | type: 'Component',
435 | hasCanChild: true,
436 | styles: [],
437 | props: {
438 | gutter: 6,
439 | },
440 | children: [
441 | {
442 | _name: 'Col',
443 | type: 'Component',
444 | styles: [],
445 | props: {
446 | span: 8,
447 | },
448 | children: [{ _name: 'div', type: 'Element', styles: [], children: [] }],
449 | },
450 | {
451 | _name: 'Col',
452 | type: 'Component',
453 | styles: [],
454 | props: {
455 | span: 8,
456 | },
457 | children: [{ _name: 'div', type: 'Element', styles: [], children: [] }],
458 | },
459 | {
460 | _name: 'Col',
461 | type: 'Component',
462 | styles: [],
463 | props: {
464 | span: 8,
465 | },
466 | children: [{ _name: 'div', type: 'Element', styles: [], children: [] }],
467 | },
468 | ],
469 | },
470 | ],
471 | };
472 |
473 | const Card: AST = {
474 | _name: 'div',
475 | type: 'Element',
476 | styles: [],
477 | children: [
478 | {
479 | _name: 'Card',
480 | type: 'Component',
481 | props: {
482 | title: 'Title',
483 | },
484 | hasCanChild: true,
485 | styles: [],
486 | children: [
487 | {
488 | _name: 'div',
489 | type: 'Element',
490 | styles: [],
491 | children: 'children',
492 | },
493 | ],
494 | },
495 | ],
496 | };
497 |
498 | const LayoutAST = [
499 | {
500 | title: '组件',
501 | children: [
502 | {
503 | title: 'Layout',
504 | layout: componentLayout,
505 | },
506 | {
507 | title: 'Layout-Slider',
508 | layout: componentSliderLayout,
509 | },
510 | {
511 | title: 'Card',
512 | layout: Card,
513 | },
514 | {
515 | title: 'Grid',
516 | layout: componentGrid,
517 | },
518 | ],
519 | },
520 | {
521 | title: '基础',
522 | children: [
523 | {
524 | title: 'DIV',
525 | layout: none,
526 | },
527 | {
528 | title: 'Scroll',
529 | layout: scroll,
530 | },
531 |
532 | {
533 | title: 'Position',
534 | layout: position,
535 | },
536 | ],
537 | },
538 | {
539 | title: 'Flex',
540 | children: [
541 | {
542 | title: 'Flex Row',
543 | layout: flexRow,
544 | },
545 | {
546 | title: 'Flex Col',
547 | layout: flexCol,
548 | },
549 | ],
550 | },
551 | {
552 | title: '移动端',
553 | children: [
554 | {
555 | title: 'Mobile',
556 | layout: mobile,
557 | },
558 | ],
559 | },
560 | ];
561 |
562 | export { LayoutAST };
563 |
--------------------------------------------------------------------------------
237 |
251 | {config.map(({ title, key, getValue, items }) => (
252 |
238 |
239 | {
241 | onChange?.([
242 | ...style.filter(
243 | css => !config.map(({ key }) => key).includes(css.key),
244 | ),
245 | ]);
246 | }}
247 | />
248 |
249 |
250 |
253 |
284 | ))}
285 |
254 | {title}: {getValue({ style })}
255 |
256 |
257 | {items.map(({ value, icon }) => {
258 | const selectStyle =
259 | value === getValue({ style })
260 | ? {
261 | border: `1px solid #1890ff`,
262 | }
263 | : {};
264 | return (
265 |
283 | {
269 | onChange?.([
270 | {
271 | key,
272 | value,
273 | },
274 | ...style.filter(css => css.key !== key),
275 | ]);
276 | }}
277 | >
278 | {icon}
279 |
280 | );
281 | })}
282 |