add image render

doric-Qt/doric/DoricRegistry.cpp

@@ -5,6 +5,7 @@
 #include "plugin/DoricShaderPlugin.h"
 
 #include "shader/DoricHLayoutNode.h"
+#include "shader/DoricImageNode.h"
 #include "shader/DoricRootNode.h"
 #include "shader/DoricScrollerNode.h"
 #include "shader/DoricStackNode.h"
@@ -22,6 +23,7 @@ DoricRegistry::DoricRegistry() {
   registerViewNode<DoricHLayoutNode>("HLayout");
   registerViewNode<DoricTextNode>("Text");
   registerViewNode<DoricScrollerNode>("Scroller");
+  registerViewNode<DoricImageNode>("Image");
 }
 
 bool DoricRegistry::acquirePluginInfo(QString name) {

doric-Qt/doric/demo/DoricDemoBridge.cpp

@@ -5,6 +5,7 @@
 #include "DoricDemoBridge.h"
 #include "DoricPanel.h"
 #include "utils/DoricDialogBridge.h"
+#include "utils/DoricImageBridge.h"
 #include "utils/DoricMouseAreaBridge.h"
 #include "utils/DoricUtils.h"
 
@@ -44,8 +45,8 @@ void DoricDemoBridge::navigate(QVariant route) {
   {
     const QUrl url(QStringLiteral("qrc:/doric/qml/view.qml"));
     view->setSource(url);
-    view->setWidth(405);
-    view->setHeight(720);
+    view->setWidth(600);
+    view->setHeight(800);
     Qt::WindowFlags flag = Qt::Dialog | Qt::MSWindowsFixedSizeDialogHint |
                            Qt::WindowTitleHint | Qt::WindowCloseButtonHint |
                            Qt::CustomizeWindowHint | Qt::WindowSystemMenuHint;
@@ -58,8 +59,8 @@ void DoricDemoBridge::navigate(QVariant route) {
     component.loadUrl(url);
     QQuickItem *quickItem = qobject_cast<QQuickItem *>(component.create());
     DoricPanel *panel = new DoricPanel(view->engine(), quickItem);
-    quickItem->setWidth(405);
-    quickItem->setHeight(720);
+    quickItem->setWidth(600);
+    quickItem->setHeight(800);
     quickItem->setParentItem(view->rootObject());
 
     panel->config(script, name, NULL);
@@ -78,4 +79,6 @@ void DoricDemoBridge::navigate(QVariant route) {
   context->setContextProperty("mouseAreaBridge", mouseAreaBridge);
   DoricDialogBridge *dialogBridge = new DoricDialogBridge();
   context->setContextProperty("dialogBridge", dialogBridge);
+  DoricImageBridge *imageBridge = new DoricImageBridge();
+  context->setContextProperty("imageBridge", imageBridge);
 }

doric-Qt/doric/doric.pro

@@ -39,6 +39,7 @@ SOURCES += \
         plugin/DoricShaderPlugin.cpp \
         shader/DoricGroupNode.cpp \
         shader/DoricHLayoutNode.cpp \
+        shader/DoricImageNode.cpp \
         shader/DoricRootNode.cpp \
         shader/DoricScrollerNode.cpp \
         shader/DoricStackNode.cpp \
@@ -49,6 +50,7 @@ SOURCES += \
         utils/DoricConstant.cpp \
         utils/DoricContextHolder.cpp \
         utils/DoricDialogBridge.cpp \
+        utils/DoricImageBridge.cpp \
         utils/DoricLayouts.cpp \
         utils/DoricMouseAreaBridge.cpp \
         widget/flex/FlexLayout.cpp \
@@ -110,6 +112,7 @@ HEADERS += \
     plugin/DoricShaderPlugin.h \
     shader/DoricGroupNode.h \
     shader/DoricHLayoutNode.h \
+    shader/DoricImageNode.h \
     shader/DoricRootNode.h \
     shader/DoricScrollerNode.h \
     shader/DoricStackNode.h \
@@ -122,6 +125,7 @@ HEADERS += \
     utils/DoricContextHolder.h \
     utils/DoricCountDownLatch.h \
     utils/DoricDialogBridge.h \
+    utils/DoricImageBridge.h \
     utils/DoricLayouts.h \
     utils/DoricMouseAreaBridge.h \
     utils/DoricObjectFactory.h \

doric-Qt/doric/qml.qrc

@@ -26,6 +26,7 @@
         <file alias="hlayout.qml">resources/hlayout.qml</file>
         <file alias="text.qml">resources/text.qml</file>
         <file alias="scroller.qml">resources/scroller.qml</file>
+        <file alias="image.qml">resources/image.qml</file>
 
         <file alias="toast.qml">resources/toast.qml</file>
         <file alias="alert.qml">resources/alert.qml</file>

doric-Qt/doric/resources/image.qml

@@ -0,0 +1,86 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.5
+
+import "util.mjs" as Util
+
+AnimatedImage {
+    property var wrapper
+
+    property var uuid: Util.uuidv4()
+
+    property var tag: "Image"
+
+    Rectangle {
+        id: bg
+        color: "transparent"
+    }
+
+    onSourceChanged: {
+        console.log(tag, uuid + " onSourceChanged: " + this.source)
+    }
+
+    onStatusChanged: {
+        if (this.status === Image.Null) {
+            console.log(tag, uuid + " onStatusChanged: Image.Null")
+            imageBridge.onNull(wrapper);
+        } else if (this.status === Image.Ready) {
+            console.log(tag, uuid + " onStatusChanged: Image.Ready")
+
+            if (this.width !== 0 && this.height !== 0 && this.status === Image.Ready) {
+                imageBridge.onReady(wrapper);
+            }
+        } else if (this.status === Image.Loading) {
+            console.log(tag, uuid + " onStatusChanged: Image.Loading")
+            imageBridge.onLoading(wrapper);
+        } else if (this.status === Image.Error) {
+            console.log(tag, uuid + " onStatusChanged: Image.Error")
+            imageBridge.onError(wrapper);
+        }
+    }
+
+    onProgressChanged: {
+        console.log(tag, uuid + " onProgressChanged: " + this.progress)
+    }
+
+    onWidthChanged: {
+        console.log(tag, uuid + " onWidthChanged: " + this.width)
+        bg.width = this.width
+
+        if (this.width !== 0 && this.height !== 0 && this.status === Image.Ready) {
+            imageBridge.onReady(wrapper);
+        }
+    }
+
+    onHeightChanged: {
+        console.log(tag, uuid + " onHeightChanged: " + this.height)
+        bg.height = this.height
+
+        if (this.width !== 0 && this.height !== 0 && this.status === Image.Ready) {
+            imageBridge.onReady(wrapper);
+        }
+    }
+
+    property var backgroundColor
+
+    onBackgroundColorChanged: {
+        bg.color = backgroundColor
+    }
+
+    property var borderWidth: 0
+    onBorderWidthChanged: {
+        bg.border.width = borderWidth
+    }
+
+    property var borderColor: ""
+    onBorderColorChanged: {
+        bg.border.color = borderColor
+    }
+
+    MouseArea {
+        anchors.fill: parent
+        onClicked: {
+            console.log(tag, uuid + " wrapper: " + wrapper)
+            mouseAreaBridge.onClick(wrapper)
+        }
+    }
+}

doric-Qt/doric/resources/main.qml

@@ -3,8 +3,8 @@ import QtQuick.Controls 2.5
 
 ApplicationWindow {
     visible: true
-    width: 405
-    height: 720
+    width: 600
+    height: 800
     title: qsTr("Scroll")
 
     ScrollView {

doric-Qt/doric/resources/test-layout.qml

@@ -4,7 +4,7 @@ import QtQuick.Layouts 1.15
 
 ApplicationWindow {
     visible: true
-    width: 450
+    width: 600
     height: 800
     title: qsTr("Scroll")
 

doric-Qt/doric/shader/DoricImageNode.cpp

@@ -0,0 +1,75 @@
+#include "DoricImageNode.h"
+#include "DoricSuperNode.h"
+
+#include "../utils/DoricUtils.h"
+
+#include <QQuickItem>
+
+QQuickItem *DoricImageNode::build() {
+  QQmlComponent component(getContext()->getQmlEngine());
+
+  const QUrl url(QStringLiteral("qrc:/doric/qml/image.qml"));
+  component.loadUrl(url);
+
+  if (component.isError()) {
+    qCritical() << component.errorString();
+  }
+
+  QQuickItem *item = qobject_cast<QQuickItem *>(component.create());
+  this->createLayouts(item);
+
+  item->setProperty("wrapper", QString::number((qint64)this));
+  return item;
+}
+
+void DoricImageNode::blend(QJsonValue jsValue) {
+  if (jsValue.toObject().contains("scaleType"))
+    this->contentMode = jsValue["scaleType"].toInt();
+  if (jsValue.toObject().contains("placeHolderColor"))
+    this->placeHolderColor = jsValue["placeHolderColor"].toInt();
+  if (jsValue.toObject().contains("errorColor"))
+    this->errorColor = jsValue["errorColor"].toInt();
+  if (jsValue.toObject().contains("loadCallback"))
+    this->loadCallbackId = jsValue["loadCallback"].toString();
+
+  DoricViewNode::blend(jsValue);
+}
+
+void DoricImageNode::blend(QQuickItem *view, QString name, QJsonValue prop) {
+  QQuickItem *container = view;
+  if (name == "imageUrl") {
+    container->setProperty("fillMode", this->contentMode);
+    container->setProperty("source", prop.toString());
+  } else if (name == "imageBase64") {
+    container->setProperty("fillMode", this->contentMode);
+    container->setProperty("source", prop.toString());
+  } else {
+    DoricViewNode::blend(view, name, prop);
+  }
+}
+
+void DoricImageNode::onReady() {
+  if (!this->loadCallbackId.isEmpty()) {
+    QVariantList args;
+
+    QMap<QString, QVariant> map;
+    map.insert("width", 0);
+    map.insert("height", 0);
+
+    args.append(QVariant::fromValue(map));
+    this->callJSResponse(this->loadCallbackId, args);
+  }
+
+  DoricSuperNode *node = this->mSuperNode;
+  while (node->mSuperNode != nullptr) {
+    node = node->mSuperNode;
+  }
+  node->requestLayout();
+}
+
+void DoricImageNode::onError() {
+  if (!this->loadCallbackId.isEmpty()) {
+    QVariantList args;
+    this->callJSResponse(this->loadCallbackId, args);
+  }
+}

doric-Qt/doric/shader/DoricImageNode.h

@@ -0,0 +1,30 @@
+#ifndef DORICIMAGENODE_H
+#define DORICIMAGENODE_H
+
+#include "DoricViewNode.h"
+
+class DoricImageNode : public DoricViewNode {
+public:
+  using DoricViewNode::DoricViewNode;
+
+  QQuickItem *build() override;
+
+  virtual void blend(QJsonValue jsValue) override;
+
+  virtual void blend(QQuickItem *view, QString name, QJsonValue prop) override;
+
+  void onReady();
+
+  void onError();
+
+private:
+  QString loadCallbackId = "";
+
+  int contentMode = 0;
+
+  int placeHolderColor = -1;
+
+  int errorColor = -1;
+};
+
+#endif // DORICIMAGENODE_H

doric-Qt/doric/shader/DoricViewNode.h

@@ -17,8 +17,6 @@ protected:
 
   DoricLayouts *mLayouts = nullptr;
 
-  DoricSuperNode *mSuperNode = nullptr;
-
   virtual QQuickItem *build() = 0;
 
   void createLayouts(QQuickItem *view);
@@ -37,6 +35,8 @@ private:
 public:
   QString mType;
 
+  DoricSuperNode *mSuperNode = nullptr;
+
   using DoricContextHolder::DoricContextHolder;
 
   void init(DoricSuperNode *superNode);

doric-Qt/doric/utils/DoricImageBridge.cpp

@@ -0,0 +1,20 @@
+#include "DoricImageBridge.h"
+#include "shader/DoricImageNode.h"
+
+DoricImageBridge::DoricImageBridge(QObject *parent) : QObject(parent) {}
+
+void DoricImageBridge::onNull(QString pointer) {}
+
+void DoricImageBridge::onReady(QString pointer) {
+  QObject *object = (QObject *)(pointer.toULongLong());
+  DoricImageNode *imageNode = dynamic_cast<DoricImageNode *>(object);
+  imageNode->onReady();
+}
+
+void DoricImageBridge::onLoading(QString pointer) {}
+
+void DoricImageBridge::onError(QString pointer) {
+  QObject *object = (QObject *)(pointer.toULongLong());
+  DoricImageNode *imageNode = dynamic_cast<DoricImageNode *>(object);
+  imageNode->onError();
+}

doric-Qt/doric/utils/DoricImageBridge.h

@@ -0,0 +1,24 @@
+#ifndef DORICIMAGEBRIDGE_H
+#define DORICIMAGEBRIDGE_H
+
+#include <QObject>
+
+class DoricImageBridge : public QObject {
+  Q_OBJECT
+public:
+  explicit DoricImageBridge(QObject *parent = nullptr);
+
+  Q_INVOKABLE
+  void onNull(QString pointer);
+
+  Q_INVOKABLE
+  void onReady(QString pointer);
+
+  Q_INVOKABLE
+  void onLoading(QString pointer);
+
+  Q_INVOKABLE
+  void onError(QString pointer);
+};
+
+#endif // DORICIMAGEBRIDGE_H