lowcode-engine
lowcode-engine copied to clipboard
alibaba
X6 图编排preview的时候应该用什么组件渲染啊？
现在普通的demo渲染的时候是使用组件ReactRenderer来实现的，但是用这个来渲染X6相关的组件的时候会出现下述的错误
如果我想渲染对这个图的方式来进行展示，请问应该如何实现预览这个图表呢？
@yuanAIhan 什么错误，请给出错误截图和最小复现单元；渲染是通过x6设计器，见另一个仓库 https://github.com/alibaba/lowcode-graph
这里只针对 preview 预览功能。 其余demo不是有一个 preview.tsx文件用来预览吗，基于此。
我看除了官网的例子X6的例子外，其余的例子都有实现Preview功能的
然后我想的是我按照这些例子的方式来模拟实现一下X6 demo的预览功能。
import ReactRenderer from '@alilc/lowcode-react-renderer';
使用的组件为这个，是不是说普通的渲染和X6的渲染使用的组件的是有差异的？
import ReactRenderer from '@alilc/lowcode-react-renderer'; <ReactRenderer className="lowcode-plugin-sample-preview-content" schema={schema} components={components} appHelper={{ requestHandlersMap: { fetch: createFetchHandler(), }, }} />
我在想是不是对于X6的Preview功能是不能直接用@alilc/lowcode-react-renderer这里面的ReactRenderer呢？我看传入的schema.json文件和常规的例子里面没有差别
目前所有的demo里面只有demo-graph-x6没有实现对应的Preview.tsx，我的初衷是想实现这个预览。
我按照和上其余demo相同的方式来实现这个组件，渲染的时候使用ReactRenderer，但是发现会出现上述的错误。
<ReactRenderer
className="lowcode-plugin-sample-preview-content"
schema={{
...schema,
dataSource: mergeWith(schema.dataSource, projectDataSource, customizer),
}}
components={components}
locale={currentLocale}
messages={i18n}
appHelper={appHelper}
/>
其中schema为x6-demo传入的schema文件。这个最小复现单元怎么给呀？因为我是在原本基础上加了这些文件
其中 preview.tsx文件如下
`import ReactDOM from 'react-dom';
import React, { useState } from 'react';
import { Loading } from '@alifd/next';
import mergeWith from 'lodash/mergeWith';
import isArray from 'lodash/isArray';
import { buildComponents, assetBundle, AssetLevel, AssetLoader } from '@alilc/lowcode-utils';
import ReactRenderer from '@alilc/lowcode-react-renderer';
import * as item from '@alilc/g-react-renderer';
import { injectComponents } from '@alilc/lowcode-plugin-inject';
import appHelper from './appHelper';
import {
getProjectSchemaFromLocalStorage,
getPackagesFromLocalStorage,
// getPreviewLocale,
// setPreviewLocale,
} from './services/mockService';
import { createFetchHandler } from '@alilc/lowcode-datasource-fetch-handler';
const getScenarioName = function () { if (location.search) { return new URLSearchParams(location.search.slice(1)).get('scenarioName') || 'graph-x6'; } return 'graph-x6'; };
const SamplePreview = () => { console.log(item, 'item code!'); const [data, setData] = useState({});
async function init() { const scenarioName = getScenarioName(); const packages = getPackagesFromLocalStorage(scenarioName); const projectSchema = getProjectSchemaFromLocalStorage(scenarioName); console.log(projectSchema, 'projectSchema'); const { componentsMap: componentsMapArray, componentsTree, dataSource: projectDataSource, } = projectSchema; console.log(componentsMapArray, componentsTree, projectDataSource); const componentsMap: any = {}; componentsMapArray.forEach((component: any) => { componentsMap[component.componentName] = component; }); const pageSchema = componentsTree?.[0];
const libraryMap = {};
const libraryAsset = [];
packages.forEach(({ package: _package, library, urls, renderUrls }) => {
libraryMap[_package] = library;
if (renderUrls) {
libraryAsset.push(renderUrls);
} else if (urls) {
libraryAsset.push(urls);
}
});
const vendors = [assetBundle(libraryAsset, AssetLevel.Library)];
// TODO asset may cause pollution
const assetLoader = new AssetLoader();
await assetLoader.load(libraryAsset);
const components = await injectComponents(buildComponents(libraryMap, componentsMap));
console.log(components, 'components');
setData({
schema: pageSchema,
components,
});
}
const { schema, components, projectDataSource = {} } = data as any;
if (!schema || !components) { init(); return <Loading fullScreen />; } // const currentLocale = getPreviewLocale(getScenarioName());
// if (!(window as any).setPreviewLocale) { // // for demo use only, can use this in console to switch language for i18n test // // 在控制台 window.setPreviewLocale('en-US') 或 window.setPreviewLocale('zh-CN') 查看切换效果 // (window as any).setPreviewLocale = (locale: string) => // setPreviewLocale(getScenarioName(), locale); // }
function customizer(objValue: [], srcValue: []) { if (isArray(objValue)) { return objValue.concat(srcValue || []); } }
return ( <div className="lowcode-plugin-sample-preview"> <ReactRenderer className="lowcode-plugin-sample-preview-content" schema={schema} components={components} appHelper={{ requestHandlersMap: { fetch: createFetchHandler(), }, }} /> ); };
ReactDOM.render(<SamplePreview />, document.getElementById('ice-container'));
preview 插件按钮的文件为：import { IPublicModelPluginContext } from '@alilc/lowcode-types';
import { Button } from '@alifd/next';
import { saveSchema } from '../../services/mockService';
// 保存功能示例
const PreviewSamplePlugin = (ctx: IPublicModelPluginContext) => {
return {
async init() {
const { skeleton, config } = ctx;
const doPreview = () => {
const scenarioName = config.get('scenarioName');
saveSchema(scenarioName);
setTimeout(() => {
console.log(location.search, 'location.search');
const search = location.search
? ${location.search}&scenarioName=${scenarioName}
: ?scenarioName=${scenarioName};
window.open(./preview.html${search});
}, 500);
};
skeleton.add({
name: 'previewSample',
area: 'topArea',
type: 'Widget',
props: {
align: 'right',
},
content: (
<Button type="primary" onClick={() => doPreview()}>
预览
</Button>
),
});
},
};
};
PreviewSamplePlugin.pluginName = 'PreviewSamplePlugin';
PreviewSamplePlugin.meta = {
dependencies: ['EditorInitPlugin'],
};
export default PreviewSamplePlugin;
preview.html文件为：
@yuanAIhan 图编辑器仓库暂无提供预览的功能，负责渲染的主区域是x6引擎，和其他的schema提供的节点类型都是不一致的。参照这个提供一下demo，方便排查一下问题。https://lowcode-engine.cn/site/community/issue
@kyokaxin 你好，这个确实不是很好提供例子demo。我在看lowcode中的全部demo例子里面，也就是这个链接https://github.com/alibaba/lowcode-demo，在这里给出了很多例子，这里全部例子除了demo-graph-x6其余的都有一个preview.tsx的预览代码实现，你这里说： 图编辑器仓库暂无提供预览的功能，是不是说这个graph-x6目前不支持预览呢？还是说要实现这个预览效果的话，需要采取其余方式？
@yuanAIhan 图编辑器仓库暂无提供预览的功能，负责渲染的主区域是x6引擎，和其他的schema提供的节点类型都是不一致的。参照这个提供一下demo，方便排查一下问题。https://lowcode-engine.cn/site/community/issue