github/lowcode-engine
1
0
Fork 0
mirror of https://github.com/alibaba/lowcode-engine.git synced 2026-01-13 01:21:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

组件样式处理

Browse Source
This commit is contained in:
mario.gk 2020-05-07 17:41:04 +08:00
parent 38bc60e175
commit d17e507358
2 changed files with 32 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
packages/react-simulator-renderer/src/renderer-view.tsx
View File

@ -5,7 +5,6 @@ import { observer } from '@recore/obx-react';
import { SimulatorRenderer } from './renderer';
import { host } from './host';
import './renderer.less';
import { toCss } from '@ali/vu-css-style';
// patch cloneElement avoid lost keyProps
const originCloneElement = window.React.cloneElement;
@ -87,9 +86,6 @@ class Renderer extends Component<{ renderer: SimulatorRenderer }> {
viewProps.componentId = __id;
viewProps._leaf = host.document.getNode(__id);
// FIXME: 此处未来使用propsReducer方式处理
this.createNodeStyleSheet(viewProps);
return createElement(
Component,
viewProps,
@ -105,28 +101,4 @@ class Renderer extends Component<{ renderer: SimulatorRenderer }> {
/>
);
}
createNodeStyleSheet(props: any) {
if (props && props.fieldId) {
let styleProp = props.__style__;
if (isObject(styleProp)) {
styleProp = toCss(styleProp);
}
if (typeof styleProp === 'string') {
const s = document.createElement('style');
const cssId = '_style_pesudo_' + props.fieldId;
const cssClass = '_css_pesudo_' + props.fieldId;
props.className = cssClass;
s.setAttribute('type', 'text/css');
s.setAttribute('id', cssId);
document.getElementsByTagName('head')[0].appendChild(s);
s.appendChild(document.createTextNode(styleProp.replace(/:root/g, '.' + cssClass)));
return s;
}
}
}
}

32
packages/vision-preset/src/editor.ts
View File

@ -4,6 +4,7 @@ import { globalContext, Editor } from '@ali/lowcode-editor-core';
import { Designer, TransformStage, addBuiltinComponentAction } from '@ali/lowcode-designer';
// import { registerSetters } from '@ali/lowcode-setters';
import Outline from '@ali/lowcode-plugin-outline-pane';
import { toCss } from '@ali/vu-css-style';
import DesignerPlugin from '@ali/lowcode-plugin-designer';
import { Skeleton, SettingsPrimaryPane } from '@ali/lowcode-editor-skeleton';
@ -66,6 +67,37 @@ function upgradePropsReducer(props: any) {
}
designer.addPropsReducer(upgradePropsReducer, TransformStage.Init);
// 设计器组件样式处理
function stylePropsReducer(props: any, node: any) {
if (props && typeof props === 'object' && props.__style__) {
const doc = designer.currentDocument?.simulator?.contentDocument;
if (!doc) {
return;
}
const cssId = '_style_pesudo_' + node.id.replace(/\$/g, '_');
const cssClass = '_css_pesudo_' + node.id.replace(/\$/g, '_');
const dom = doc.getElementById(cssId);
if (dom) {
dom.parentNode?.removeChild(dom);
}
let styleProp = props.__style__;
if (typeof styleProp === 'object') {
styleProp = toCss(styleProp);
}
if (typeof styleProp === 'string') {
const s = doc.createElement('style');
props.className = cssClass;
s.setAttribute('type', 'text/css');
s.setAttribute('id', cssId);
doc.getElementsByTagName('head')[0].appendChild(s);
s.appendChild(doc.createTextNode(styleProp.replace(/:root/g, '.' + cssClass)));
}
}
return props;
}
designer.addPropsReducer(stylePropsReducer, TransformStage.Render);
skeleton.add({
area: 'mainArea',
name: 'designer',