merge

ArchitectureColoredPainting/ArchitectureColoredPainting.vcxproj

@@ -104,9 +104,9 @@
     </Link>
   </ItemDefinitionGroup>
   <ItemGroup>
-    <ClCompile Include="ElementPoolWidget.cpp" />
-    <ClCompile Include="src\CaptionButton.cpp" />
     <ClCompile Include="src\Editor\EditorWidget.cpp" />
+    <ClCompile Include="src\CaptionButton.cpp" />
+    <ClCompile Include="src\Editor\EditorWidgetItem.cpp" />
     <ClCompile Include="src\Editor\ElementManager.cpp" />
     <ClCompile Include="src\Editor\GraphicElement.cpp" />
     <ClCompile Include="src\Editor\LayerManager.cpp" />
@@ -151,8 +151,11 @@
     <ClCompile Include="src\SvgParser.cpp" />
     <ClCompile Include="src\TitleWidget.cpp" />
     <QtUic Include="EditorWidget.ui" />
+    <QtUic Include="EditorWidgetItem.ui" />
+    <QtUic Include="FramelessWindow.ui" />
     <QtUic Include="MainWindow.ui" />
     <QtUic Include="RendererWidget.ui" />
+    <QtUic Include="EditorWidget.ui" />
   </ItemGroup>
   <ItemGroup>
     <None Include="..\data.json" />
@@ -186,6 +189,7 @@
     <QtMoc Include="src\Editor\RightBar\LayerTreeWidget.h" />
     <QtMoc Include="src\Editor\RightBar\InfoDisplayWidget.h" />
     <QtMoc Include="src\MainWindow.h" />
+    <QtMoc Include="src\Editor\EditorWidget.h" />
     <ClInclude Include="resource.h" />
     <ClInclude Include="src\Editor\ElementManager.h" />
     <QtMoc Include="src\Editor\ElementPoolWidget.h" />
@@ -217,7 +221,7 @@
     <QtMoc Include="src\CaptionButton.h" />
     <QtMoc Include="src\NavigationBarWidget.h" />
     <QtMoc Include="src\Renderer\RendererWidget.h" />
-    <QtMoc Include="src\Editor\EditorWidget.h" />
+    <QtMoc Include="src\Editor\EditorWidgetItem.h" />
     <ClInclude Include="src\Renderer\Painting\BvhTree.h" />
     <ClInclude Include="src\Renderer\Camera.h" />
     <ClInclude Include="src\Renderer\Painting\CubicBezier.h" />

ArchitectureColoredPainting/ArchitectureColoredPainting.vcxproj.filters

@@ -70,9 +70,18 @@
     <QtUic Include="MainWindow.ui">
       <Filter>Form Files</Filter>
     </QtUic>
+    <QtUic Include="NavigationBarWidget.ui">
+      <Filter>Form Files</Filter>
+    </QtUic>
+    <QtUic Include="FramelessWindow.ui">
+      <Filter>Form Files</Filter>
+    </QtUic>
+    <QtUic Include="EditorWidget.ui">
+      <Filter>Form Files</Filter>
+    </QtUic>
   </ItemGroup>
   <ItemGroup>
-    <ClCompile Include="src\Editor\EditorWidget.cpp">
+    <ClCompile Include="src\Editor\EditorWidgetItem.cpp">
       <Filter>Source Files\Editor</Filter>
     </ClCompile>
     <ClCompile Include="src\Renderer\Camera.cpp">
@@ -210,12 +219,15 @@
     <ClCompile Include="ElementPoolWidget.cpp">
       <Filter>Source Files\Editor</Filter>
     </ClCompile>
+    <ClCompile Include="src\Editor\EditorWidget.cpp">
+      <Filter>Source Files</Filter>
+    </ClCompile>
   </ItemGroup>
   <ItemGroup>
     <QtMoc Include="src\Renderer\RendererGLWidget.h">
       <Filter>Header Files\Renderer</Filter>
     </QtMoc>
-    <QtMoc Include="src\Editor\EditorWidget.h">
+    <QtMoc Include="src\Editor\EditorWidgetItem.h">
       <Filter>Header Files\Editor</Filter>
     </QtMoc>
     <QtMoc Include="src\Renderer\RendererWidget.h">
@@ -248,6 +260,9 @@
     <QtMoc Include="src\Editor\ElementPoolWidget.h">
       <Filter>Header Files\Editor</Filter>
     </QtMoc>
+    <QtMoc Include="src\Editor\EditorWidget.h">
+      <Filter>Header Files</Filter>
+    </QtMoc>
   </ItemGroup>
   <ItemGroup>
     <None Include="..\data.json" />
@@ -328,7 +343,7 @@
     </None>
   </ItemGroup>
   <ItemGroup>
-    <QtUic Include="EditorWidget.ui">
+    <QtUic Include="EditorWidgetItem.ui">
       <Filter>Form Files</Filter>
     </QtUic>
     <QtUic Include="RendererWidget.ui">

ArchitectureColoredPainting/EditorWidget.ui

@@ -1,110 +1,146 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <ui version="4.0">
- <class>EditorWidgetClass</class>
+ <class>EditorWidget</class>
- <widget class="QWidget" name="EditorWidgetClass">
+ <widget class="QWidget" name="EditorWidget">
   <property name="geometry">
    <rect>
     <x>0</x>
     <y>0</y>
-    <width>1124</width>
+    <width>1139</width>
-    <height>695</height>
+    <height>685</height>
    </rect>
   </property>
   <property name="windowTitle">
-   <string>RendererWidget</string>
+   <string>Form</string>
   </property>
-  <layout class="QVBoxLayout" name="verticalLayout">
+  <layout class="QVBoxLayout" name="verticalLayout_2">
-   <property name="leftMargin">
-    <number>0</number>
-   </property>
-   <property name="topMargin">
-    <number>0</number>
-   </property>
-   <property name="rightMargin">
-    <number>0</number>
-   </property>
-   <property name="bottomMargin">
-    <number>0</number>
-   </property>
    <item>
-    <widget class="QWidget" name="MainWindow" native="true">
+    <layout class="QVBoxLayout" name="verticalLayout" stretch="1,1,20">
-     <layout class="QVBoxLayout" name="verticalLayout_2" stretch="1,30">
+     <item>
-      <item>
+      <widget class="QWidget" name="widget" native="true">
-       <widget class="QLabel" name="Title">
+       <layout class="QHBoxLayout" name="horizontalLayout_3">
-        <property name="text">
-         <string/>
-        </property>
-        <property name="alignment">
-         <set>Qt::AlignCenter</set>
-        </property>
-       </widget>
-      </item>
-      <item>
-       <layout class="QHBoxLayout" name="horizontalLayout" stretch="1,18,5">
         <item>
-         <widget class="QWidget" name="LeftBar" native="true"/>
+         <layout class="QHBoxLayout" name="horizontalLayout_2">
-        </item>
+          <item>
-        <item>
+           <widget class="QPushButton" name="createButton">
-         <widget class="PreviewWindow" name="Preview"/>
+            <property name="minimumSize">
-        </item>
+             <size>
-        <item>
+              <width>80</width>
-         <widget class="QWidget" name="RightBar" native="true">
+              <height>0</height>
-          <layout class="QVBoxLayout" name="verticalLayout_4" stretch="1,2">
+             </size>
-           <item>
+            </property>
-            <widget class="QTabWidget" name="DisplayTab">
+            <property name="maximumSize">
-             <property name="currentIndex">
+             <size>
-              <number>0</number>
+              <width>80</width>
-             </property>
+              <height>16777215</height>
-             <widget class="InfoDisplayWidget" name="LayerDisplay">
+             </size>
-              <attribute name="title">
+            </property>
-               <string>Layer</string>
+            <property name="text">
-              </attribute>
+             <string>新建</string>
-             </widget>
+            </property>
-             <widget class="QWidget" name="ElementDisplay">
+           </widget>
-              <attribute name="title">
+          </item>
-               <string>Element</string>
+          <item>
-              </attribute>
+           <widget class="QPushButton" name="saveButton">
-             </widget>
+            <property name="minimumSize">
-            </widget>
+             <size>
-           </item>
+              <width>80</width>
-           <item>
+              <height>0</height>
-            <widget class="LayerTreeWidget" name="LayerTree">
+             </size>
-             <property name="contextMenuPolicy">
+            </property>
-              <enum>Qt::CustomContextMenu</enum>
+            <property name="maximumSize">
-             </property>
+             <size>
-             <column>
+              <width>80</width>
-              <property name="text">
+              <height>16777215</height>
-               <string notr="true">1</string>
+             </size>
-              </property>
+            </property>
-             </column>
+            <property name="text">
-            </widget>
+             <string>保存</string>
-           </item>
+            </property>
-          </layout>
+           </widget>
-         </widget>
+          </item>
+          <item>
+           <widget class="QPushButton" name="saveAsButton">
+            <property name="minimumSize">
+             <size>
+              <width>80</width>
+              <height>0</height>
+             </size>
+            </property>
+            <property name="maximumSize">
+             <size>
+              <width>80</width>
+              <height>16777215</height>
+             </size>
+            </property>
+            <property name="text">
+             <string>另存为</string>
+            </property>
+           </widget>
+          </item>
+          <item>
+           <widget class="QPushButton" name="closeButton">
+            <property name="minimumSize">
+             <size>
+              <width>80</width>
+              <height>0</height>
+             </size>
+            </property>
+            <property name="maximumSize">
+             <size>
+              <width>80</width>
+              <height>16777215</height>
+             </size>
+            </property>
+            <property name="text">
+             <string>关闭</string>
+            </property>
+           </widget>
+          </item>
+         </layout>
         </item>
        </layout>
-      </item>
+      </widget>
-     </layout>
+     </item>
-    </widget>
+     <item>
+      <spacer name="horizontalSpacer">
+       <property name="orientation">
+        <enum>Qt::Horizontal</enum>
+       </property>
+       <property name="sizeHint" stdset="0">
+        <size>
+         <width>40</width>
+         <height>20</height>
+        </size>
+       </property>
+      </spacer>
+     </item>
+     <item>
+      <widget class="QTabWidget" name="tabWidget">
+       <property name="currentIndex">
+        <number>1</number>
+       </property>
+       <widget class="EditorWidgetItem" name="tab">
+        <attribute name="title">
+         <string>Tab 1</string>
+        </attribute>
+       </widget>
+       <widget class="EditorWidgetItem" name="tab_2">
+        <attribute name="title">
+         <string>Tab 2</string>
+        </attribute>
+       </widget>
+      </widget>
+     </item>
+    </layout>
    </item>
   </layout>
  </widget>
- <layoutdefault spacing="6" margin="11"/>
  <customwidgets>
   <customwidget>
-   <class>PreviewWindow</class>
+   <class>EditorWidgetItem</class>
-   <extends>QOpenGLWidget</extends>
-   <header>PreviewWindow.h</header>
-  </customwidget>
-  <customwidget>
-   <class>LayerTreeWidget</class>
-   <extends>QTreeWidget</extends>
-   <header location="global">LayerTreeWidget.h</header>
-  </customwidget>
-  <customwidget>
-   <class>InfoDisplayWidget</class>
    <extends>QWidget</extends>
-   <header location="global">InfoDisplayWidget.h</header>
+   <header>EditorWidgetItem.h</header>
    <container>1</container>
   </customwidget>
  </customwidgets>

ArchitectureColoredPainting/EditorWidgetItem.ui

@@ -0,0 +1,113 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<ui version="4.0">
+ <class>EditorWidgetItem</class>
+ <widget class="QWidget" name="EditorWidgetItem">
+  <property name="geometry">
+   <rect>
+    <x>0</x>
+    <y>0</y>
+    <width>1124</width>
+    <height>695</height>
+   </rect>
+  </property>
+  <property name="windowTitle">
+   <string>RendererWidget</string>
+  </property>
+  <layout class="QVBoxLayout" name="verticalLayout">
+   <property name="leftMargin">
+    <number>0</number>
+   </property>
+   <property name="topMargin">
+    <number>0</number>
+   </property>
+   <property name="rightMargin">
+    <number>0</number>
+   </property>
+   <property name="bottomMargin">
+    <number>0</number>
+   </property>
+   <item>
+    <widget class="QWidget" name="MainWindow" native="true">
+     <layout class="QVBoxLayout" name="verticalLayout_2" stretch="1,30">
+      <item>
+       <widget class="QLabel" name="Title">
+        <property name="text">
+         <string/>
+        </property>
+        <property name="alignment">
+         <set>Qt::AlignCenter</set>
+        </property>
+       </widget>
+      </item>
+      <item>
+       <layout class="QHBoxLayout" name="horizontalLayout" stretch="1,18,5">
+        <item>
+         <widget class="QWidget" name="LeftBar" native="true"/>
+        </item>
+        <item>
+         <widget class="PreviewWindow" name="Preview"/>
+        </item>
+        <item>
+         <widget class="QWidget" name="RightBar" native="true">
+          <layout class="QVBoxLayout" name="verticalLayout_4" stretch="1,2">
+           <item>
+            <widget class="QTabWidget" name="DisplayTab">
+             <property name="currentIndex">
+              <number>0</number>
+             </property>
+             <widget class="InfoDisplayWidget" name="LayerDisplay">
+              <attribute name="title">
+               <string>Layer</string>
+              </attribute>
+             </widget>
+             <widget class="QWidget" name="ElementDisplay">
+              <attribute name="title">
+               <string>Element</string>
+              </attribute>
+             </widget>
+            </widget>
+           </item>
+           <item>
+            <widget class="LayerTreeWidget" name="LayerTree">
+             <property name="contextMenuPolicy">
+              <enum>Qt::CustomContextMenu</enum>
+             </property>
+             <column>
+              <property name="text">
+               <string notr="true">1</string>
+              </property>
+             </column>
+            </widget>
+           </item>
+          </layout>
+         </widget>
+        </item>
+       </layout>
+      </item>
+     </layout>
+    </widget>
+   </item>
+  </layout>
+ </widget>
+ <layoutdefault spacing="6" margin="11"/>
+ <customwidgets>
+  <customwidget>
+   <class>PreviewWindow</class>
+   <extends>QOpenGLWidget</extends>
+   <header>PreviewWindow.h</header>
+  </customwidget>
+  <customwidget>
+   <class>LayerTreeWidget</class>
+   <extends>QTreeWidget</extends>
+   <header location="global">LayerTreeWidget.h</header>
+  </customwidget>
+  <customwidget>
+   <class>InfoDisplayWidget</class>
+   <extends>QWidget</extends>
+   <header location="global">InfoDisplayWidget.h</header>
+   <container>1</container>
+  </customwidget>
+ </customwidgets>
+ <resources/>
+ <connections/>
+</ui>

ArchitectureColoredPainting/MainWindow.ui

@@ -60,16 +60,16 @@
         </property>
         <property name="styleSheet">
          <string notr="true">
-           QTabBar::tab {
+           QTabBar::tab.rendererWidget {
            height: 0px;
            margin-top:0px;
            }
-           QTabWidget::tab-bar
+           QTabWidget::tab-bar.rendererWidget
            {
            height: 0px;
            top:0px;
            }
-           QTabWidget::pane {
+           QTabWidget::pane.rendererWidget {
            border: 0px;
            background-color: transparent;
            }

ArchitectureColoredPainting/src/Editor/EditorWidget.cpp

@@ -1,62 +1,33 @@
 #include "EditorWidget.h"
+#include "EditorWidgetItem.h"
+#include <QMouseEvent>
+#include <QInputDialog>
+#include <QMenu>
 
-EditorWidget::EditorWidget(QWidget *parent) : QWidget(parent)
+EditorWidget::EditorWidget(QWidget* parent) : QWidget(parent)
 {
-    QImage x;
+	ui.setupUi(this);
-    displayLayer = nullptr;
+	this->createButton = ui.createButton;
-    displayElement = nullptr;
+	this->closeButton = ui.closeButton; 
-    ui.setupUi(this);
+	this->saveButton = ui.saveButton;
-    previewWindow = ui.Preview;
+	this->saveAsButton = ui.saveAsButton;
-    treeWidget = ui.LayerTree;
+	this->tabWidget = ui.tabWidget;
-    tabWidget = ui.DisplayTab;
+	while (this->tabWidget->count() > 0)
-    layerInfoDisplayWidget = dynamic_cast<InfoDisplayWidget *>(tabWidget->widget(0));
+	{
-    elementInfoDisplayWidget = dynamic_cast<InfoDisplayWidget *>(tabWidget->widget(1));
+		this->tabWidget->removeTab(0);
-    connect(treeWidget, &LayerTreeWidget::displayLayerChange, this, &EditorWidget::onLayerChange);
+	}
-    connect(layerInfoDisplayWidget, &InfoDisplayWidget::requireRefreshPreview, this,
+	connect(this->createButton, &QPushButton::clicked, this, [this]() {
-            &EditorWidget::triggerRefreshPreview);
+			static int count = 0;
-    connect(treeWidget, &LayerTreeWidget::requireRefreshPreview, this,
+			this->tabWidget->addTab(new EditorWidgetItem(this),"untitled"+QString::number(count++));
-        &EditorWidget::triggerRefreshPreview);
+		});
-	connect(layerInfoDisplayWidget, &InfoDisplayWidget::requireSelfRefresh, layerInfoDisplayWidget, &InfoDisplayWidget::triggerSelfRefresh);
+	connect(this->closeButton, &QPushButton::clicked, this, [this]() {
-    // &EditorWidget::triggerRefreshPreview);
+			this->tabWidget->removeTab(this->tabWidget->currentIndex());
-    //  test
+		});
-    QFile settingFile;
+	connect(this->saveButton, &QPushButton::clicked, this, [this]() {
-    settingFile.setFileName("../data.json");
+		
-    settingFile.open(QFile::ReadOnly);
+		});
-    QByteArray setting = settingFile.readAll().trimmed();
+	connect(this->saveAsButton, &QPushButton::clicked, this, [this]() {
-    QJsonParseError jError;
+
-    QJsonDocument jsonDoc(QJsonDocument::fromJson(setting, &jError));
+		});
-    qDebug() << jsonDoc.object().value("height").toDouble();
-    qDebug() << jError.errorString();
-    // end test
-    QJsonObject source = jsonDoc.object();
-    elementManager = new ElementManager(source,previewWindow->getRenderer());
-    layerManager = new LayerManager(source, elementManager);
-    previewWindow->initialize(layerManager,QSize(jsonDoc.object().value("width").toDouble(),jsonDoc.object().value("height").toDouble()));
-    if (layerManager->getRoot() != nullptr)
-    {
-        treeWidget->root = layerManager->getRoot();
-		treeWidget->refresh();
-		treeWidget->addTopLevelItem(treeWidget->root->getQTreeItem());
-    }
 }
 
-EditorWidget::~EditorWidget()
-{
-}
-
-void EditorWidget::paintEvent(QPaintEvent *event)
-{
-}
-
-void EditorWidget::onLayerChange(LayerWrapper *layer)
-{
-    displayLayer = layer;
-    // TODO : notify InfoDisplayWidget and update
-    dynamic_cast<InfoDisplayWidget *>(tabWidget->widget(0))->setLayer(layer);
-    this->update();
-}
-
-void EditorWidget::triggerRefreshPreview()
-{
-    previewWindow->update();
-}

ArchitectureColoredPainting/src/Editor/EditorWidget.h

@@ -1,39 +1,22 @@
 #pragma once
-
+#include <qwidget.h>
-#include "ElementManager.h"
-#include "InfoDisplayWidget.h"
-#include "LayerManager.h"
-#include "LayerTreeWidget.h"
-#include "PreviewWindow.h"
 #include "ui_EditorWidget.h"
-#include <QPainter>
-#include <QTreeWidget>
-#include <QWidget>
 
-class EditorWidget : public QWidget
+class EditorWidget :
+    public QWidget
 {
     Q_OBJECT
-
+private:
-  private:
+    Ui::EditorWidget ui;
-    // DATA PART
+    QTabWidget* tabWidget;
-    PreviewWindow *previewWindow;
+    QPushButton* createButton;
-    ElementManager *elementManager;
+    QPushButton* closeButton;
-    LayerManager *layerManager;
+    QPushButton* saveButton;
-    // QT GUI PART
+    QPushButton* saveAsButton;
-    Ui::EditorWidgetClass ui;
+        
-    LayerTreeWidget *treeWidget;
+public:
-    QTabWidget *tabWidget;
+	EditorWidget(QWidget* parent = nullptr);
-    InfoDisplayWidget *layerInfoDisplayWidget, *elementInfoDisplayWidget;
+	~EditorWidget()=default;
-    // QT DATA PART
+ 
-    LayerWrapper *displayLayer;
-    GraphicElement *displayElement;
-
-  public:
-    EditorWidget(QWidget *parent = nullptr);
-    ~EditorWidget();
-    void paintEvent(QPaintEvent *event) override;
-
-  private slots:
-    void onLayerChange(LayerWrapper *layer);
-    void triggerRefreshPreview();
 };
+

ArchitectureColoredPainting/src/Editor/EditorWidgetItem.cpp

@@ -0,0 +1,63 @@
+#include "EditorWidgetItem.h"
+
+EditorWidgetItem::EditorWidgetItem(QWidget *parent) : QWidget(parent)
+{
+    QImage x;
+    displayLayer = nullptr;
+    displayElement = nullptr;
+    ui.setupUi(this);
+    previewWindow = ui.Preview;
+    treeWidget = ui.LayerTree;
+    tabWidget = ui.DisplayTab;
+    layerInfoDisplayWidget = dynamic_cast<InfoDisplayWidget *>(tabWidget->widget(0));
+    elementInfoDisplayWidget = dynamic_cast<InfoDisplayWidget *>(tabWidget->widget(1));
+    connect(treeWidget, &LayerTreeWidget::displayLayerChange, this, &EditorWidgetItem::onLayerChange);
+    connect(layerInfoDisplayWidget, &InfoDisplayWidget::requireRefreshPreview, this,
+            &EditorWidgetItem::triggerRefreshPreview);
+    connect(treeWidget, &LayerTreeWidget::requireRefreshPreview, this,
+        &EditorWidgetItem::triggerRefreshPreview);
+	connect(layerInfoDisplayWidget, &InfoDisplayWidget::requireSelfRefresh, layerInfoDisplayWidget, &InfoDisplayWidget::triggerSelfRefresh);
+    // &EditorWidget::triggerRefreshPreview);
+    //  test
+    QFile settingFile;
+    settingFile.setFileName("../data.json");
+    settingFile.open(QFile::ReadOnly);
+    QByteArray setting = settingFile.readAll().trimmed();
+    QJsonParseError jError;
+    QJsonDocument jsonDoc(QJsonDocument::fromJson(setting, &jError));
+    qDebug() << jsonDoc.object().value("height").toDouble();
+    qDebug() << jError.errorString();
+    // end test
+    QJsonObject source = jsonDoc.object();
+    elementManager = new ElementManager(source,previewWindow->getRenderer());
+    layerManager = new LayerManager(source, elementManager);
+    qDebug() << layerManager->toJson();
+    previewWindow->initialize(layerManager,QSize(jsonDoc.object().value("width").toDouble(),jsonDoc.object().value("height").toDouble()));
+    if (layerManager->getRoot() != nullptr)
+    {
+        treeWidget->root = layerManager->getRoot();
+		treeWidget->refresh();
+		treeWidget->addTopLevelItem(treeWidget->root->getQTreeItem());
+    }
+}
+
+EditorWidgetItem::~EditorWidgetItem()
+{
+}
+
+void EditorWidgetItem::paintEvent(QPaintEvent *event)
+{
+}
+
+void EditorWidgetItem::onLayerChange(LayerWrapper *layer)
+{
+    displayLayer = layer;
+    // TODO : notify InfoDisplayWidget and update
+    dynamic_cast<InfoDisplayWidget *>(tabWidget->widget(0))->setLayer(layer);
+    this->update();
+}
+
+void EditorWidgetItem::triggerRefreshPreview()
+{
+    previewWindow->update();
+}

ArchitectureColoredPainting/src/Editor/EditorWidgetItem.h

@@ -0,0 +1,39 @@
+#pragma once
+
+#include "ElementManager.h"
+#include "InfoDisplayWidget.h"
+#include "LayerManager.h"
+#include "LayerTreeWidget.h"
+#include "PreviewWindow.h"
+#include "ui_EditorWidgetItem.h"
+#include <QPainter>
+#include <QTreeWidget>
+#include <QWidget>
+
+class EditorWidgetItem : public QWidget
+{
+    Q_OBJECT
+
+  private:
+    // DATA PART
+    PreviewWindow *previewWindow;
+    ElementManager *elementManager;
+    LayerManager *layerManager;
+    // QT GUI PART
+    Ui::EditorWidgetItem ui;
+    LayerTreeWidget *treeWidget;
+    QTabWidget *tabWidget;
+    InfoDisplayWidget *layerInfoDisplayWidget, *elementInfoDisplayWidget;
+    // QT DATA PART
+    LayerWrapper *displayLayer;
+    GraphicElement *displayElement;
+
+  public:
+    EditorWidgetItem(QWidget *parent = nullptr);
+    ~EditorWidgetItem();
+    void paintEvent(QPaintEvent *event) override;
+
+  private slots:
+    void onLayerChange(LayerWrapper *layer);
+    void triggerRefreshPreview();
+};

ArchitectureColoredPainting/src/Editor/ElementManager.cpp

@@ -3,6 +3,7 @@ ElementManager::ElementManager(QJsonObject source,Renderer::ElementRenderer* ren
 {
     auto elementsJson = source.value("elements").toArray();
     qDebug() << elementsJson.size();
+    int index = 0;
     for (auto elementJson : elementsJson)
     {
         if (elementJson.toObject().value("type").toString() == "group")
@@ -12,6 +13,8 @@ ElementManager::ElementManager(QJsonObject source,Renderer::ElementRenderer* ren
         
         (*elements.rbegin())->renderer = renderer;
     }
+	for (auto element : elements)
+		element->index = index++;
 }
 
 void ElementManager::addElement(GraphicElement *element)
@@ -33,3 +36,13 @@ GraphicElement *ElementManager::getElementById(int index)
 ElementManager::~ElementManager()
 {
 }
+
+QJsonObject ElementManager::toJson() const
+{
+	QJsonArray elementsJson;
+	for (auto element : elements)
+		elementsJson.push_back(element->toJson());
+	QJsonObject result;
+	result.insert("elements", elementsJson);
+	return result;
+}

ArchitectureColoredPainting/src/Editor/ElementManager.h

@@ -19,6 +19,7 @@ class ElementManager
     ~ElementManager();
     void addElement(GraphicElement *element);
     void removeElement(GraphicElement *pElement);
+	QJsonObject toJson()const;
     /**
      *  only used in initialization
      */

ArchitectureColoredPainting/src/Editor/GraphicElement.cpp

@@ -76,3 +76,10 @@ PixelPath GroupElement::getPaintObject(std::vector<Renderer::ElementStyleStrokeD
 //		rawPath.addPath(path);
 //	}
 //}
+//TODO : Ìí¼Óϸ½Ú
+QJsonObject GraphicElement::toJson() const
+{
+	QJsonObject result;
+	result.insert("name", name);
+	return result;
+}

ArchitectureColoredPainting/src/Editor/GraphicElement.h

@@ -22,7 +22,9 @@ class GraphicElement
 public:
 	Renderer::ElementRenderer *renderer;
     QString name = "";
+    int index;
     // TODO: ¸ÄΪBitmapPath
+	virtual QJsonObject toJson() const;
     virtual PixelPath getPaintObject() const = 0;
     virtual PixelPath getPaintObject(std::vector<Renderer::ElementStyleStrokeDemo>) const = 0;
 };

ArchitectureColoredPainting/src/Editor/LayerManager.cpp

@@ -62,11 +62,20 @@ bool LayerManager::changeParent(FolderLayerWrapper *newParent) const
     selectedLayers[0]->setParent(newParent);
     return true;
 }
+
 void LayerManager::addLayer(LayerWrapper *layer)
 {
     layerSet.insert(layer);
 }
+
 void LayerManager::removeLayer(LayerWrapper *layer)
 {
     layerSet.erase(layer);
 }
+
+QJsonObject LayerManager::toJson() const
+{
+	QJsonObject result;
+	result.insert("root-layer", root->toJson());
+	return result;
+}

ArchitectureColoredPainting/src/Editor/LayerManager.h

@@ -31,6 +31,7 @@ class LayerManager
     LayerWrapper *getRoot() const;
     LayerManager() = default;
 	LayerManager(QJsonObject source, ElementManager* elementManager);
+	QJsonObject toJson() const;
     void paint(QPainter *painter, QSize size) const;
     bool rename(QString newName) const;
     bool combine() const;

ArchitectureColoredPainting/src/Editor/LayerWrapper.cpp

@@ -53,6 +53,7 @@ FolderLayerWrapper::FolderLayerWrapper(QJsonObject json, ElementManager *element
         auto p = reinterpret_cast<GroupElement *>(elementManager->getElementById(referencedJson.toInt()));
         if (p != nullptr)
             p->setSourceLayer(this);
+		this->referencedBy = referencedJson.toInt();
     }
     for (auto childJson : childrenJson)
     {
@@ -95,7 +96,6 @@ void FolderLayerWrapper::refresh()
 {
     cache.clear();
     for (auto& child : children) {
-        qDebug() << child.get();
         cache.addPath(child.get()->getCache());
     }
     LayerWrapper::refresh();
@@ -181,3 +181,40 @@ QTreeWidgetItem* FolderLayerWrapper::getQTreeItem()
 	}
 	return LayerWrapper::getQTreeItem();
 }
+
+//TODO: add effects
+
+QJsonObject LayerWrapper::toJson() const 
+{
+	QJsonObject json;
+	json.insert("name", property.name);
+	QJsonObject transformJson;
+	transformJson.insert("offset", QJsonObject({ {"x", property.offset.x()}, {"y", property.offset.y()} }));
+	transformJson.insert("scale", QJsonObject({ {"x", property.scale.x()}, {"y", property.scale.y()} }));
+	transformJson.insert("rotation", property.rotation);
+	json.insert("transform", transformJson);
+	return json;
+}
+
+QJsonObject FolderLayerWrapper::toJson() const
+{
+	QJsonObject json = LayerWrapper::toJson();
+	QJsonArray childrenJson;
+	for (auto& child : children)
+		childrenJson.push_back(child->toJson());
+	json.insert("children", childrenJson);
+    json.insert("is-folder", true);
+    if(this->referencedBy != -1)
+		json.insert("referenced-by", this->referencedBy);
+    else
+		json.insert("referenced-by", QJsonValue());
+	return json;
+}
+
+QJsonObject LeafLayerWrapper::toJson() const
+{
+	QJsonObject json = LayerWrapper::toJson();
+	json.insert("element", wrappedElement->index);
+	json.insert("is-folder", false);
+	return json;
+}

ArchitectureColoredPainting/src/Editor/LayerWrapper.h

@@ -60,13 +60,16 @@ class LayerWrapper
     // virtual void deleteAll() const = 0;
     virtual void del();
     virtual void delSelf();
+	virtual QJsonObject toJson() const;
     ~LayerWrapper() = default;
+    
 };
 
 class FolderLayerWrapper : public LayerWrapper
 {
   public:
     vector<shared_ptr<LayerWrapper>> children;
+    int referencedBy = -1;
 
   public:
 
@@ -80,6 +83,7 @@ class FolderLayerWrapper : public LayerWrapper
 	void del() override;
     void delSelf() override;
 	QTreeWidgetItem* getQTreeItem() override;
+	QJsonObject toJson() const override;
 };
 
 class LeafLayerWrapper : public LayerWrapper
@@ -93,6 +97,7 @@ class LeafLayerWrapper : public LayerWrapper
     void refresh() override;
     LeafLayerWrapper() = default;
     LeafLayerWrapper(QJsonObject json, ElementManager *elementManager, FolderLayerWrapper*parent);
+    QJsonObject toJson() const override;
 };
 
 Q_DECLARE_METATYPE(LayerWrapper *)

data.json

@@ -34,6 +34,7 @@
     "is-folder": true,
     "referenced-by": null,
     "children": [
+
       {
         "name": "GroupFolderExample",
         "transform": {
@@ -87,6 +88,7 @@
           }
         ]
       },
+
       {
         "name": "ReferencingGroupLayer",
         "transform": {