From 4377c29951c07ed144431c448b3b1c72b56be64e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=8E=8B=E5=8A=B2=E9=B9=8F?= Date: Wed, 2 Jun 2021 16:34:38 +0800 Subject: [PATCH] add flex node & demo --- doric-Qt/example/app/demo/DoricDemoBridge.cpp | 33 ++-- doric-Qt/example/app/main.qml | 34 ++-- doric-Qt/example/app/qml.qrc | 1 + doric-Qt/example/doric/DoricRegistry.cpp | 2 + doric-Qt/example/doric/doric.pro | 2 + doric-Qt/example/doric/resources/flex.qml | 180 ++++++++++++++++++ .../example/doric/shader/DoricFlexNode.cpp | 33 ++++ doric-Qt/example/doric/shader/DoricFlexNode.h | 28 +++ .../example/doric/shader/DoricSuperNode.cpp | 5 + .../example/doric/shader/DoricSuperNode.h | 2 + 10 files changed, 289 insertions(+), 31 deletions(-) create mode 100644 doric-Qt/example/doric/resources/flex.qml create mode 100644 doric-Qt/example/doric/shader/DoricFlexNode.cpp create mode 100644 doric-Qt/example/doric/shader/DoricFlexNode.h diff --git a/doric-Qt/example/app/demo/DoricDemoBridge.cpp b/doric-Qt/example/app/demo/DoricDemoBridge.cpp index c2c2924d..0fdc2f8b 100644 --- a/doric-Qt/example/app/demo/DoricDemoBridge.cpp +++ b/doric-Qt/example/app/demo/DoricDemoBridge.cpp @@ -32,51 +32,54 @@ void DoricDemoBridge::navigate(QVariant route) { name = "EffectsDemo.js"; break; case 4: - name = "Gobang.js"; + name = "FlexDemo.js"; break; case 5: - name = "ImageDemo.js"; + name = "Gobang.js"; break; case 6: - name = "InputDemo.js"; + name = "ImageDemo.js"; break; case 7: - name = "LayoutDemo.js"; + name = "InputDemo.js"; break; case 8: - name = "LayoutTestDemo.js"; + name = "LayoutDemo.js"; break; case 9: - name = "ModalDemo.js"; + name = "LayoutTestDemo.js"; break; case 10: - name = "ModularDemo.js"; + name = "ModalDemo.js"; break; case 11: - name = "NetworkDemo.js"; + name = "ModularDemo.js"; break; case 12: - name = "PopoverDemo.js"; + name = "NetworkDemo.js"; break; case 13: - name = "ScrollerDemo.js"; + name = "PopoverDemo.js"; break; case 14: - name = "SimpleDemo.js"; + name = "ScrollerDemo.js"; break; case 15: - name = "SliderDemo.js"; + name = "SimpleDemo.js"; break; case 16: - name = "Snake.js"; + name = "SliderDemo.js"; break; case 17: - name = "StorageDemo.js"; + name = "Snake.js"; break; case 18: - name = "SwitchDemo.js"; + name = "StorageDemo.js"; break; case 19: + name = "SwitchDemo.js"; + break; + case 20: name = "TextDemo.js"; break; } diff --git a/doric-Qt/example/app/main.qml b/doric-Qt/example/app/main.qml index f2d5ff92..31c616bf 100644 --- a/doric-Qt/example/app/main.qml +++ b/doric-Qt/example/app/main.qml @@ -15,7 +15,7 @@ ApplicationWindow { ListView { width: parent.width - model: 20 + model: 21 delegate: Rectangle { Column { anchors.centerIn: parent @@ -31,36 +31,38 @@ ApplicationWindow { case 3: return "EffectsDemo.js" case 4: - return "Gobang.js" + return "FlexDemo.js" case 5: - return "ImageDemo.js" + return "Gobang.js" case 6: - return "InputDemo.js" + return "ImageDemo.js" case 7: - return "LayoutDemo.js" + return "InputDemo.js" case 8: - return "LayoutTestDemo.js" + return "LayoutDemo.js" case 9: - return "ModalDemo.js" + return "LayoutTestDemo.js" case 10: - return "ModularDemo.js" + return "ModalDemo.js" case 11: - return "NetworkDemo.js" + return "ModularDemo.js" case 12: - return "PopoverDemo.js" + return "NetworkDemo.js" case 13: - return "ScrollerDemo.js" + return "PopoverDemo.js" case 14: - return "SimpleDemo.js" + return "ScrollerDemo.js" case 15: - return "SliderDemo.js" + return "SimpleDemo.js" case 16: - return "Snake.js" + return "SliderDemo.js" case 17: - return "StorageDemo.js" + return "Snake.js" case 18: - return "SwitchDemo.js" + return "StorageDemo.js" case 19: + return "SwitchDemo.js" + case 20: return "TextDemo.js" } } diff --git a/doric-Qt/example/app/qml.qrc b/doric-Qt/example/app/qml.qrc index 8365f261..930bdc61 100644 --- a/doric-Qt/example/app/qml.qrc +++ b/doric-Qt/example/app/qml.qrc @@ -13,6 +13,7 @@ ../../../doric-demo/bundle/src/Counter.js ../../../doric-demo/bundle/src/DraggableDemo.js ../../../doric-demo/bundle/src/EffectsDemo.js + ../../../doric-demo/bundle/src/FlexDemo.js ../../../doric-demo/bundle/src/Gobang.js ../../../doric-demo/bundle/src/ImageDemo.js ../../../doric-demo/bundle/src/InputDemo.js diff --git a/doric-Qt/example/doric/DoricRegistry.cpp b/doric-Qt/example/doric/DoricRegistry.cpp index c9519ad5..dba380e3 100644 --- a/doric-Qt/example/doric/DoricRegistry.cpp +++ b/doric-Qt/example/doric/DoricRegistry.cpp @@ -8,6 +8,7 @@ #include "plugin/DoricStoragePlugin.h" #include "shader/DoricDraggableNode.h" +#include "shader/DoricFlexNode.h" #include "shader/DoricHLayoutNode.h" #include "shader/DoricImageNode.h" #include "shader/DoricInputNode.h" @@ -39,6 +40,7 @@ DoricRegistry::DoricRegistry() { registerViewNode("Input"); registerViewNode("Switch"); registerViewNode("Draggable"); + registerViewNode("FlexLayout"); } bool DoricRegistry::acquirePluginInfo(QString name) { diff --git a/doric-Qt/example/doric/doric.pro b/doric-Qt/example/doric/doric.pro index 503ec614..97e6fedd 100644 --- a/doric-Qt/example/doric/doric.pro +++ b/doric-Qt/example/doric/doric.pro @@ -42,6 +42,7 @@ SOURCES += \ plugin/DoricShaderPlugin.cpp \ plugin/DoricStoragePlugin.cpp \ shader/DoricDraggableNode.cpp \ + shader/DoricFlexNode.cpp \ shader/DoricGroupNode.cpp \ shader/DoricHLayoutNode.cpp \ shader/DoricImageNode.cpp \ @@ -127,6 +128,7 @@ HEADERS += \ plugin/DoricShaderPlugin.h \ plugin/DoricStoragePlugin.h \ shader/DoricDraggableNode.h \ + shader/DoricFlexNode.h \ shader/DoricGroupNode.h \ shader/DoricHLayoutNode.h \ shader/DoricImageNode.h \ diff --git a/doric-Qt/example/doric/resources/flex.qml b/doric-Qt/example/doric/resources/flex.qml new file mode 100644 index 00000000..b6dac544 --- /dev/null +++ b/doric-Qt/example/doric/resources/flex.qml @@ -0,0 +1,180 @@ +import QtQuick 2.12 +import QtQuick.Controls 2.5 +import QtQuick.Layouts 1.15 +import QtGraphicalEffects 1.12 + +import "util.mjs" as Util + +Rectangle { + id: root + property var wrapper + + clip: true + + property var uuid: Util.uuidv4() + + property var tag: "Flex" + + onWidthChanged: { + console.log(tag, uuid + " onWidthChanged: " + this.width) + + updateGradient() + } + + onHeightChanged: { + console.log(tag, uuid + " onHeightChanged: " + this.height) + + updateGradient() + } + + color: 'transparent' + + property var backgroundColor + + onBackgroundColorChanged: { + color = backgroundColor + } + + property var borderWidth: 0 + onBorderWidthChanged: { + border.width = borderWidth + } + + property var borderColor: "" + onBorderColorChanged: { + border.color = borderColor + } + + MouseArea { + anchors.fill: parent + onClicked: { + console.log(tag, uuid + " wrapper: " + wrapper) + mouseAreaBridge.onClick(wrapper) + } + } + + property var shadowColor + property var shadowRadius + property var shadowOffsetX + property var shadowOffsetY + property var shadowOpacity + + onShadowOpacityChanged: { + if (shadowOpacity > 0) { + layer.enabled = true + } else { + layer.enabled = false + } + } + + layer.enabled: false + layer.effect: DropShadow { + horizontalOffset: shadowOffsetX + verticalOffset: shadowOffsetY + radius: shadowRadius + samples: 16 + color: shadowColor + transparentBorder: true + } + + + property var backgroundColorIsObject: false + onBackgroundColorIsObjectChanged: { + if (backgroundColorIsObject) { + lineGradient.anchors.fill = root + } else { + lineGradient.anchors.fill = null + } + } + + property variant gradientColors: [] + property variant gradientLocations: [] + + onGradientColorsChanged: { + console.log(tag, uuid + " onGradientColorsChanged: " + gradientColors) + if (gradientColors.length > 0) { + let stops = [] + + if (gradientLocations.length == 0) { + let unit = 1 / (gradientColors.length - 1) + for (let i = 0;i !== gradientColors.length;i++) { + let a = ((gradientColors[i] >> 24) & 0xff) / 255; + let r = ((gradientColors[i] >> 16) & 0xff) / 255; + let g = ((gradientColors[i] >> 8) & 0xff) / 255; + let b = ((gradientColors[i] >> 0) & 0xff) / 255; + let stop = stopComponent.createObject(root, {"position": unit * i, "color": Qt.rgba(r, g, b, a)}) + console.log(tag, uuid + " onGradientColorsChanged: " + "position: " + unit * i + " color: " + Qt.rgba(r, g, b, a)) + stops.push(stop) + } + } else { + for (let i = 0;i !== gradientColors.length;i++) { + let a = ((gradientColors[i] >> 24) & 0xff) / 255; + let r = ((gradientColors[i] >> 16) & 0xff) / 255; + let g = ((gradientColors[i] >> 8) & 0xff) / 255; + let b = ((gradientColors[i] >> 0) & 0xff) / 255; + let stop = stopComponent.createObject(root, {"position": gradientLocations[i], "color": Qt.rgba(r, g, b, a)}) + console.log(tag, uuid + " onGradientColorsChanged: " + "position: " + gradientLocations[i] + " color: " + Qt.rgba(r, g, b, a)) + stops.push(stop) + } + } + + innerGradient.stops = stops + } + } + + property var orientation: 0 + + function updateGradient() { + switch (orientation) { + case 0: + lineGradient.start = Qt.point(0, 0) + lineGradient.end = Qt.point(0, root.height) + break + case 1: + lineGradient.start = Qt.point(root.width, 0) + lineGradient.end = Qt.point(0, root.height) + break + case 2: + lineGradient.start = Qt.point(root.width, 0) + lineGradient.end = Qt.point(0, 0) + break + case 3: + lineGradient.start = Qt.point(root.width, root.height) + lineGradient.end = Qt.point(0, 0) + break + case 4: + lineGradient.start = Qt.point(0, root.height) + lineGradient.end = Qt.point(0, 0) + break + case 5: + lineGradient.start = Qt.point(0, root.height) + lineGradient.end = Qt.point(root.width, 0) + break + case 6: + lineGradient.start = Qt.point(0, 0) + lineGradient.end = Qt.point(root.width, 0) + break + case 7: + lineGradient.start = Qt.point(0, 0) + lineGradient.end = Qt.point(root.width, root.height) + break + } + } + onOrientationChanged: { + console.log(tag, uuid + " onOrientationChanged: " + orientation) + + updateGradient() + } + + LinearGradient { + Component { + id:stopComponent + GradientStop {} + } + + id: lineGradient + gradient: Gradient { + id: innerGradient + } + } +} diff --git a/doric-Qt/example/doric/shader/DoricFlexNode.cpp b/doric-Qt/example/doric/shader/DoricFlexNode.cpp new file mode 100644 index 00000000..c1772368 --- /dev/null +++ b/doric-Qt/example/doric/shader/DoricFlexNode.cpp @@ -0,0 +1,33 @@ +#include "DoricFlexNode.h" + +QQuickItem *DoricFlexNode::build() { + QQmlComponent component(getContext()->getQmlEngine()); + + const QUrl url(QStringLiteral("qrc:/doric/qml/flex.qml")); + component.loadUrl(url); + + if (component.isError()) { + qCritical() << component.errorString(); + } + + QQuickItem *item = qobject_cast(component.create()); + this->createLayouts(item); + + item->setProperty("wrapper", QString::number((qint64)this)); + return item; +} + +void DoricFlexNode::blend(QQuickItem *view, QString name, QJsonValue prop) { + if (name == "flexConfig") { + + } else { + DoricGroupNode::blend(view, name, prop); + } +} + +void DoricFlexNode::blendSubNode(DoricViewNode *subNode, + QJsonValue flexConfig) {} + +void DoricFlexNode::blendYoga(YGLayout *yoga, QJsonValue flexConfig) {} + +void DoricFlexNode::blendYoga(YGLayout *yoga, QString name, QJsonValue prop) {} diff --git a/doric-Qt/example/doric/shader/DoricFlexNode.h b/doric-Qt/example/doric/shader/DoricFlexNode.h new file mode 100644 index 00000000..9b525559 --- /dev/null +++ b/doric-Qt/example/doric/shader/DoricFlexNode.h @@ -0,0 +1,28 @@ +#ifndef DORICFLEXNODE_H +#define DORICFLEXNODE_H + +#include "DoricExport.h" + +#include "shader/DoricStackNode.h" + +#include "yoga/YGLayout.h" + +class DORIC_EXPORT DoricFlexNode : public DoricGroupNode { + +public: + using DoricGroupNode::DoricGroupNode; + + QQuickItem *build() override; + + virtual void blend(QQuickItem *view, QString name, QJsonValue prop) override; + + virtual void blendSubNode(DoricViewNode *subNode, + QJsonValue flexConfig) override; + +private: + void blendYoga(YGLayout *yoga, QJsonValue flexConfig); + + void blendYoga(YGLayout *yoga, QString name, QJsonValue prop); +}; + +#endif // DORICFLEXNODE_H diff --git a/doric-Qt/example/doric/shader/DoricSuperNode.cpp b/doric-Qt/example/doric/shader/DoricSuperNode.cpp index 0ba91d20..9f99db8b 100644 --- a/doric-Qt/example/doric/shader/DoricSuperNode.cpp +++ b/doric-Qt/example/doric/shader/DoricSuperNode.cpp @@ -18,6 +18,11 @@ void DoricSuperNode::blend(QQuickItem *view, QString name, QJsonValue prop) { } } +void DoricSuperNode::blendSubNode(DoricViewNode *subNode, + QJsonValue layoutConfig) { + subNode->blendLayoutConfig(layoutConfig); +} + void DoricSuperNode::mixinSubNode(QJsonValue subNode) { QString id = subNode["id"].toString(); QList keys = subNodes.keys(); diff --git a/doric-Qt/example/doric/shader/DoricSuperNode.h b/doric-Qt/example/doric/shader/DoricSuperNode.h index e02f6208..cedeb16f 100644 --- a/doric-Qt/example/doric/shader/DoricSuperNode.h +++ b/doric-Qt/example/doric/shader/DoricSuperNode.h @@ -16,6 +16,8 @@ protected: virtual void blendSubNode(QJsonValue subProperties) = 0; + virtual void blendSubNode(DoricViewNode *subNode, QJsonValue layoutConfig); + void recursiveMixin(QJsonValue src, QJsonValue target); public: