mirror of
https://github.com/alibaba/lowcode-engine.git
synced 2026-01-12 00:48:16 +00:00
chore: build
This commit is contained in:
kangwei
commit
14fe25fc7f
@ -15,9 +15,7 @@
|
||||
<link rel="stylesheet" href="https://alifd.alicdn.com/npm/@alifd/next/1.11.6/next.min.css" />
|
||||
<script src="https://unpkg.alibaba-inc.com/@alifd/next@1.18.17/dist/next.min.js"></script>
|
||||
<!-- lowcode engine globals -->
|
||||
<link rel="stylesheet" href="./core.css" />
|
||||
<!-- lowcode engine globals -->
|
||||
<link rel="stylesheet" href="./vision-preset.css" />
|
||||
<link rel="stylesheet" href="./editor-preset-vision.css" />
|
||||
<!-- lowcode engine app -->
|
||||
<link rel="stylesheet" href="./lowcode-editor.css" />
|
||||
<script>
|
||||
@ -72,9 +70,7 @@
|
||||
<body>
|
||||
<div id="lce-container"></div>
|
||||
<!-- lowcode engine globals -->
|
||||
<script src="./core.js"></script>
|
||||
<!-- lowcode engine globals -->
|
||||
<script src="./vision-preset.js"></script>
|
||||
<script src="./editor-preset-vision.js"></script>
|
||||
<script src="https://dev.g.alicdn.com/vision/visualengine-utils/5.0.0/engine-utils.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="//g.alicdn.com/??platform/common/s/1.1/global/global.css,uxcore/uxcore-kuma/2.2.1/orange.min.css">
|
||||
<!-- lowcode engine app -->
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
{
|
||||
"name": "@ali/lowcode-editor-preset-vision",
|
||||
"private": true,
|
||||
"version": "0.8.15",
|
||||
"description": "Vision Polyfill for Ali lowCode engine",
|
||||
"main": "lib/index.js",
|
||||
|
||||
@ -20,13 +20,11 @@
|
||||
],
|
||||
"author": "xiayang.xy",
|
||||
"dependencies": {
|
||||
"@ali/iceluna-addon-component-list": "^1.0.11",
|
||||
"@ali/iceluna-comp-material-show": "^1.0.10",
|
||||
"@ali/iceluna-sdk": "^1.0.6-beta.6",
|
||||
"@ali/lowcode-designer": "^0.9.16",
|
||||
"@ali/lowcode-editor-core": "^0.8.14",
|
||||
"@ali/lowcode-types": "^0.8.5",
|
||||
"@ali/lowcode-designer": "^0.9.11",
|
||||
"@ali/lowcode-editor-core": "^0.8.12",
|
||||
"@ali/lowcode-types": "^0.8.3",
|
||||
"@alifd/next": "^1.19.19",
|
||||
"@ali/ve-component-list": "^1.1.1",
|
||||
"react": "^16.8.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
@ -1,40 +1,23 @@
|
||||
import React, { PureComponent } from 'react';
|
||||
import { Icon, Search, Select } from '@alifd/next';
|
||||
import MaterialShow from '@ali/iceluna-comp-material-show';
|
||||
import { Component, ReactNode } from 'react';
|
||||
import ComponentList, { AdditiveType } from "@ali/ve-component-list";
|
||||
import { PluginProps } from '@ali/lowcode-types';
|
||||
import { Designer } from '@ali/lowcode-designer';
|
||||
|
||||
import './index.scss';
|
||||
|
||||
export interface LibrayInfo {
|
||||
label: string;
|
||||
value: string;
|
||||
}
|
||||
|
||||
export interface IState {
|
||||
loading: boolean;
|
||||
libs: LibrayInfo[];
|
||||
searchKey: string;
|
||||
currentLib: string;
|
||||
componentList: object[];
|
||||
metaData: object[];
|
||||
}
|
||||
|
||||
export default class ComponentListPlugin extends PureComponent<PluginProps, IState> {
|
||||
export default class ComponentListPlugin extends Component<PluginProps, IState> {
|
||||
static displayName = 'LowcodeComponentListPlugin';
|
||||
|
||||
snippetsMap = new Map();
|
||||
|
||||
constructor(props: any) {
|
||||
super(props);
|
||||
this.state = {
|
||||
loading: false,
|
||||
libs: [
|
||||
{
|
||||
label: '全部',
|
||||
value: 'all',
|
||||
},
|
||||
],
|
||||
searchKey: '',
|
||||
currentLib: 'all',
|
||||
componentList: [],
|
||||
metaData: [],
|
||||
};
|
||||
}
|
||||
|
||||
@ -47,141 +30,110 @@ export default class ComponentListPlugin extends PureComponent<PluginProps, ISta
|
||||
}
|
||||
}
|
||||
|
||||
transformMaterial = (componentList: any): any => {
|
||||
return componentList.map((category: any) => {
|
||||
return {
|
||||
name: category.title,
|
||||
items: category.children.map((comp: any) => {
|
||||
return {
|
||||
...comp,
|
||||
name: comp.componentName,
|
||||
snippets: comp.snippets.map((snippet: any) => {
|
||||
return {
|
||||
name: snippet.title,
|
||||
screenshot: snippet.screenshot,
|
||||
code: JSON.stringify(snippet.schema),
|
||||
transformMetaData(componentList: any): any {
|
||||
const metaData: object[] = [];
|
||||
componentList.forEach((category: any, categoryId: number) => {
|
||||
if (Array.isArray(category?.children)) {
|
||||
category.children.forEach((comp: any, compId: number) => {
|
||||
metaData.push({
|
||||
id: `${categoryId}-${compId}`,
|
||||
componentName: comp.componentName,
|
||||
title: comp.title,
|
||||
category: category.title,
|
||||
snippets: comp.snippets.map((snippet: any, snippetId: number) => {
|
||||
const item = {
|
||||
id: `${categoryId}-${compId}-${snippetId}`,
|
||||
description: snippet.title,
|
||||
thumbnail: snippet.screenshot,
|
||||
schema: snippet.schema,
|
||||
};
|
||||
this.snippetsMap.set(item.id, item.schema);
|
||||
return item;
|
||||
}),
|
||||
};
|
||||
}),
|
||||
};
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
return metaData;
|
||||
}
|
||||
|
||||
initComponentList = (): void => {
|
||||
debugger;
|
||||
const { editor } = this.props;
|
||||
const assets = editor.get('assets') || {};
|
||||
const list: string[] = [];
|
||||
const libs: LibrayInfo[] = [];
|
||||
assets.packages.forEach((item: any): void => {
|
||||
list.push(item.library);
|
||||
libs.push({
|
||||
label: item.title,
|
||||
value: item.library,
|
||||
});
|
||||
});
|
||||
const metaData = this.transformMetaData(assets.componentList);
|
||||
|
||||
if (list.length > 1) {
|
||||
libs.unshift({
|
||||
label: '全部',
|
||||
value: list.join(','),
|
||||
});
|
||||
this.setState({
|
||||
metaData,
|
||||
});
|
||||
};
|
||||
|
||||
registerAdditive(shell: Element | null) {
|
||||
if (!shell) {
|
||||
return;
|
||||
}
|
||||
|
||||
const componentList = this.transformMaterial(assets.componentList);
|
||||
|
||||
this.setState({
|
||||
libs,
|
||||
componentList,
|
||||
currentLib: libs[0] && libs[0].value,
|
||||
});
|
||||
|
||||
(window as any).__ctx = {
|
||||
appHelper: editor,
|
||||
};
|
||||
(editor as any).dndHelper = {
|
||||
handleResourceDragStart: function(ev: any, tagName: any, schema: any) {
|
||||
debugger
|
||||
const designer = editor.get(Designer);
|
||||
if (designer) {
|
||||
designer.dragon.boost(
|
||||
{
|
||||
type: 'nodedata',
|
||||
data: schema,
|
||||
},
|
||||
ev.nativeEvent,
|
||||
);
|
||||
function getSnippetId(elem: any, operation = AdditiveType.All) {
|
||||
if (!elem || !operation) {
|
||||
return null;
|
||||
}
|
||||
while (shell !== elem) {
|
||||
if (elem.classList.contains(operation) || elem.classList.contains(AdditiveType.All)) {
|
||||
return elem.dataset.id;
|
||||
}
|
||||
},
|
||||
// tslint:disable-next-line
|
||||
elem = elem.parentNode;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
const { editor } = this.props;
|
||||
const designer = editor.get(Designer);
|
||||
if (!designer) {
|
||||
return;
|
||||
}
|
||||
|
||||
const click = (e: Event) => {
|
||||
if (
|
||||
(e.target.tagName === 'ICON'
|
||||
&& e.target.parentNode
|
||||
&& e.target.parentNode.classList.contains('engine-additive-helper'))
|
||||
|| e.target.classList.contains('engine-additive-helper')
|
||||
) {
|
||||
return;
|
||||
}
|
||||
const snippetId = getSnippetId(e.target, AdditiveType.Clickable);
|
||||
if (!snippetId || !this.snippetsMap.get(snippetId)) {
|
||||
return;
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
searchAction = (value: string): void => {
|
||||
this.setState({
|
||||
searchKey: value,
|
||||
shell.addEventListener('click', click);
|
||||
|
||||
designer.dragon.from(shell, (e: Event) => {
|
||||
const doc = designer.currentDocument;
|
||||
const id = getSnippetId(e.target, AdditiveType.Draggable);
|
||||
|
||||
if (!doc || !id) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const dragTarget = {
|
||||
type: 'nodedata',
|
||||
data: this.snippetsMap.get(id),
|
||||
};
|
||||
return dragTarget;
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
filterMaterial = (): any => {
|
||||
const { searchKey, currentLib, componentList } = this.state;
|
||||
const libs = currentLib.split(',');
|
||||
return (componentList || [])
|
||||
.map((cate: any) => {
|
||||
return {
|
||||
...cate,
|
||||
items: (cate.items || []).filter((item: any) => {
|
||||
let libFlag = libs.some((lib) => lib == item.library);
|
||||
|
||||
let keyFlag = true;
|
||||
if (searchKey) {
|
||||
keyFlag =
|
||||
`${item.name || ''} ${item.title || ''}`.toLowerCase().indexOf(searchKey.trim().toLowerCase()) >= 0;
|
||||
} else {
|
||||
keyFlag = item.is_show === undefined || !!(item.is_show == 1);
|
||||
}
|
||||
return libFlag && keyFlag;
|
||||
}),
|
||||
};
|
||||
})
|
||||
.filter((cate) => {
|
||||
return cate.items && cate.items.length > 0;
|
||||
});
|
||||
};
|
||||
|
||||
render(): React.ReactNode {
|
||||
const { libs, loading, currentLib } = this.state;
|
||||
render(): ReactNode {
|
||||
const { metaData } = this.state;
|
||||
return (
|
||||
<div className="lowcode-component-list">
|
||||
<div className="title">
|
||||
<Icon type="jihe" size="small" />
|
||||
<span>组件库</span>
|
||||
</div>
|
||||
<Search
|
||||
shape="simple"
|
||||
size="medium"
|
||||
className="search"
|
||||
placeholder="请输入关键词"
|
||||
onChange={this.searchAction as any}
|
||||
onSearch={this.searchAction}
|
||||
hasClear
|
||||
/>
|
||||
<Select
|
||||
size="small"
|
||||
className="select"
|
||||
dataSource={libs}
|
||||
value={currentLib}
|
||||
onChange={(value): void => {
|
||||
this.setState({
|
||||
currentLib: value,
|
||||
});
|
||||
}}
|
||||
/>
|
||||
<MaterialShow
|
||||
className="components-show"
|
||||
loading={loading}
|
||||
type="component"
|
||||
dataSource={this.filterMaterial()}
|
||||
<ComponentList
|
||||
key="component-pane"
|
||||
metaData={metaData}
|
||||
registerAdditive={(shell: Element | null) => this.registerAdditive(shell)}
|
||||
enableSearch
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -1 +1 @@
|
||||
declare module "@ali/iceluna-comp-material-show";
|
||||
declare module '@ali/ve-component-list';
|
||||
|
||||
@ -21,18 +21,18 @@ echo ""
|
||||
|
||||
# work
|
||||
mkdir packages
|
||||
# cp -r $WORK_DIR/packages/demo packages/demo
|
||||
cp -r $WORK_DIR/packages/demo packages/demo
|
||||
cp -r $WORK_DIR/packages/react-simulator-renderer packages/react-simulator-renderer
|
||||
# cp -r $WORK_DIR/packages/editor-core packages/editor-core
|
||||
cp -r $WORK_DIR/packages/vision-preset packages/vision-preset
|
||||
cp -r $WORK_DIR/packages/editor-preset-vision packages/editor-preset-vision
|
||||
cp -r $WORK_DIR/packages/editor-preset-general packages/editor-preset-general
|
||||
lerna bootstrap
|
||||
lerna run cloud-build --stream
|
||||
|
||||
cd $WORK_DIR
|
||||
# mv deploy-space/packages/demo/build $BUILD_DEST
|
||||
mv deploy-space/packages/react-simulator-renderer/dist $BUILD_DEST
|
||||
# mv deploy-space/packages/editor-core/dist/* $BUILD_DEST
|
||||
mv deploy-space/packages/vision-preset/dist/* $BUILD_DEST
|
||||
mv deploy-space/packages/demo/build $BUILD_DEST
|
||||
mv deploy-space/packages/react-simulator-renderer/dist/* $BUILD_DEST
|
||||
mv deploy-space/packages/editor-preset-vision/dist/* $BUILD_DEST
|
||||
mv deploy-space/packages/editor-preset-general/dist/* $BUILD_DEST
|
||||
cp deploy-space/static/* $BUILD_DEST
|
||||
|
||||
echo "complete"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user