From d17e50735802c4129679caf7d12eb135252b6bf2 Mon Sep 17 00:00:00 2001
From: "mario.gk" <mario.gk@alibaba-inc.com>
Date: Thu, 7 May 2020 17:41:04 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BB=84=E4=BB=B6=E6=A0=B7=E5=BC=8F=E5=A4=84?=
 =?UTF-8?q?=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/renderer-view.tsx                     | 28 ----------------
 packages/vision-preset/src/editor.ts          | 32 +++++++++++++++++++
 2 files changed, 32 insertions(+), 28 deletions(-)

diff --git a/packages/react-simulator-renderer/src/renderer-view.tsx b/packages/react-simulator-renderer/src/renderer-view.tsx
index f8ad8c747..5ae9ce0fe 100644
--- a/packages/react-simulator-renderer/src/renderer-view.tsx
+++ b/packages/react-simulator-renderer/src/renderer-view.tsx
@@ -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;
-      }
-    }
-  }
 }
diff --git a/packages/vision-preset/src/editor.ts b/packages/vision-preset/src/editor.ts
index ff4288f81..5dac4dfd4 100644
--- a/packages/vision-preset/src/editor.ts
+++ b/packages/vision-preset/src/editor.ts
@@ -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',