refactoring for desktop, bug fixes

README.md

@@ -45,7 +45,8 @@ FigmaQML support both Desktop and Qt for MCU development.
     * Generates QML code and related images into the given directory.
     * Do not use for Qt for MCU.
 * **Export Qt for MCU**
-    * Open view to manage and export Qt for MCU content.  
+    * Open view to manage and export Qt for MCU content.
+    * Available only for Linux (Qt for MCU requires Ubuntu 20.04)
 * **Edit Imports...** edit a QML "imports" statement.
 * **Fonts...**
     * See and map how the current Figma design fonts are mapped with the local fonts. You don't have to install missing fonts, therefore you set an additional font file search folder.
@@ -98,7 +99,8 @@ FigmaQML support both Desktop and Qt for MCU development.
     * Do not use with Qt for MCU
 
  * **Qt for MCU**
-    * The generated code is targeted for Qt for MCU. 
+    * The generated code is targeted for Qt for MCU.
+    * Available only for Linux (Qt for MCU requires Ubuntu 20.04)
  * **Static QML**
     * Turn off all dynamic code creation.
  * **Cyan background**
@@ -234,12 +236,13 @@ Store generated files in your application folder.
 1. qmlproject file
     * Add import path to FigmaQmlInterface (the path is in the generated code, and depends Figma naming)
     ```json
-    importPaths: ["path_to/FigmaQmlInterface] 
+    importPaths: ["path_to/FigmaQmlInterface"] 
     ```
     * Apply Spark [See Qt doc](https://doc.qt.io/QtForMCUs-2.6/qtul-fonts.html)    
 
 1. In your application QML file
-    * Import FigmaQmlInterface and add FigmaQmlUi   
+    * Import FigmaQmlInterface and add FigmaQmlUi
+
     ```js
    import FigmaQmlInterface
 

app_figma/FigmaQmlInterface/FigmaQmlUi.qml

@@ -2,11 +2,12 @@ import QtQuick
 import FigmaQmlInterface
 // This file is generated
 Item {
+    implicitWidth: loader.width
+    implicitHeight: loader.height
     Loader {
         id: loader
-        anchors.fill: parent
+        anchors.centerIn: parent
         source: FigmaQmlSingleton.currentView
-        onLoaded: {FigmaQmlSingleton.viewLoaded(FigmaQmlSingleton.currentView);}
+        onLoaded: FigmaQmlSingleton.viewLoaded(FigmaQmlSingleton.currentView);
     }
 }
-

app_figma/qml/main.qml

@@ -5,9 +5,10 @@ import FigmaQmlInterface
 Window {
     visible: true
     title: qsTr("Figma UI")
-    width: figma.implicitWidth
-    height: figma.implicitHeight
+    width: Math.max(200, figma.implicitWidth)
+    height: Math.max(200, figma.implicitHeight)
     FigmaQmlUi {
         id: figma
+        anchors.centerIn: parent
     }
 }

include/figmadata.h

@@ -65,11 +65,10 @@ class FigmaData {
     }
 
     QString url(const QString& key) const {
-         MUTEX_LOCK(m_mutex);
-         Q_ASSERT(m_data.contains(key));
-         Q_ASSERT(!m_data[key].url.isEmpty());
-         Q_ASSERT(m_data[key].state != State::Error);
-         return m_data[key].url;
+        MUTEX_LOCK(m_mutex);
+        Q_ASSERT(m_data.contains(key));
+        Q_ASSERT(m_data[key].state != State::Error);
+        return m_data[key].url;
     }
     //Atomic get and set
     bool setPending(const QString& key) {
@@ -104,8 +103,7 @@ class FigmaData {
     void clean(bool clean_errors) {
         MUTEX_LOCK(m_mutex);
         for(auto& e : m_data)
-            if(e.state != State::Committed
-                && (!clean_errors || e.state != State::Error)) {
+            if(e.state != State::Committed && (clean_errors || e.state != State::Error)) {
                 e.state = State::Empty;
             }
 

include/figmaget.h

@@ -50,7 +50,7 @@ public slots:
     void documentCreated();
 signals:
     void dataChanged();
-    void fetchingChanged(bool fetching);
+    //void fetchingChanged(bool fetching);
     void error(const QString& errorString);
     void intervalChanged(int interval);
     void imagesPopulated();

include/figmaparser.h

@@ -144,7 +144,8 @@ class FigmaParser {
         AntializeShapes = 0x800,
         QulMode         = 0x1000,
         StaticCode      = 0x2000,
-        LoaderPlaceHolders  = 0x100000,
+        LoaderPlaceHolders          = 0x100000,
+        RenderLoaderPlaceHolders    = 0x200000,
 
     };
     using EByteArray = std::optional<QByteArray>;

include/figmaqml.h

@@ -15,6 +15,7 @@ class FigmaFileDocument;
 class FigmaDataDocument;
 class FontCache;
 class FontInfo;
+class FigmaQmlSingleton;
 
 
 class FigmaQml : public QObject, public FigmaParserData {
@@ -42,21 +43,22 @@ class FigmaQml : public QObject, public FigmaParserData {
     Q_PROPERTY(QStringList supportedQulHardware READ supportedQulHardware CONSTANT)
 public:
     enum Flags { // WARNING these map values are (partly) same with figmaparser flags
-        PrerenderShapes     = 0x2,
-        PrerenderGroups     = 0x4,
-        PrerenderComponets  = 0x8,
-        PrerenderFrames     = 0x10,
-        PrerenderInstances  = 0x20,
-        NoGradients         = 0x40,
-        BreakBooleans       = 0x400,
-        AntializeShapes     = 0x800,
-        QulMode             = 0x1000,
-        StaticCode          = 0x2000,
-        EmbedImages         = 0x10000,
-        Timed               = 0x20000,
-        AltFontMatch        = 0x40000,
-        KeepFigmaFontName   = 0x80000,
-        LoaderPlaceHolders  = 0x100000,
+        PrerenderShapes             = 0x2,
+        PrerenderGroups             = 0x4,
+        PrerenderComponets          = 0x8,
+        PrerenderFrames             = 0x10,
+        PrerenderInstances          = 0x20,
+        NoGradients                 = 0x40,
+        BreakBooleans               = 0x400,
+        AntializeShapes             = 0x800,
+        QulMode                     = 0x1000,
+        StaticCode                  = 0x2000,
+        EmbedImages                 = 0x10000,
+        Timed                       = 0x20000,
+        AltFontMatch                = 0x40000,
+        KeepFigmaFontName           = 0x80000,
+        LoaderPlaceHolders          = 0x100000,
+        RenderLoaderPlaceHolders    = 0x200000,
     };
     Q_ENUM(Flags)
 public:
@@ -163,6 +165,7 @@ public slots:
     void fontPathFound(const QString& fontPath);
     void fontPathError(const QString& error);
     void elementsChanged();
+    void externalLoadersApplied(const QString& name, const QString& source);
 #ifdef USE_NATIVE_FONT_DIALOG
     void fontAdded(const QString& fontFamilyName);
 #endif
@@ -173,6 +176,7 @@ public slots:
 private slots:
     void doCancel();
     void updateDefaultImports();
+    void applyExternalLoaders();
 private:
     void addImageFile(const QString& imageRef, bool isRendering);
     bool addImageFileData(const QString& imageRef, const QByteArray& bytes, int mime);

qml/IncludeList.qml

@@ -75,6 +75,7 @@ ListView {
         width: included_views.width
         ComboBox {
             id: included_views_add_combox
+            width: parent.width * 0.9
             textRole: 'content'
             ListModel {
                 id: included_list_add_items
@@ -90,13 +91,15 @@ ListView {
             for(let i = 0; i < figmaQml.elements.length; ++i) {
                 const line = included_views._format_included_view(i);
                 for(let j = 0; j < included_list_items.count; ++j) {
-                    if(line !== included_list_items.get(i))
+                    let item = included_list_items.get(i);
+                    if(!item || line.content !== item.content) {
                         included_list_add_items.append(line)
+                    }
                 }
             }
         }
         onAccepted: {
-            included_views.add_view(included_views_add_combox.currentIndex)
+            included_views.add_view(included_views_add_combox.currentValue.index)
         }
     }
 }

qml/Input.qml

@@ -0,0 +1,43 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+
+RowLayout {
+        id: row
+        property string text
+        property string buttonText
+        property alias textRectWidth: rect.width
+        property color color: "white"
+        property color borderColor: "black"
+        property real minTextWidth: 50
+        property real gap: 10
+        signal clicked
+        Layout.minimumWidth: rect.width + gap + button.width + spacing
+        Rectangle {
+            id: rect
+            Layout.preferredWidth: input.width + gap
+            Layout.preferredHeight: button.height - border.width * 2
+            border.color: row.borderColor
+            color: row.color
+            TextInput {
+                id: input
+                anchors.centerIn: parent
+                text: row.text
+                width: Math.max(row.minTextWidth, metrics.width)
+            }
+
+            TextMetrics {
+                id:     metrics
+                font:   input.font
+                text:   input.text
+            }
+        }
+        Button {
+            id: button
+            Layout.alignment: Qt.AlignRight
+            visible: row.buttonText.length > 0
+            text: row.buttonText
+            onClicked: row.clicked()
+        }
+    }
+

qml/LoaderPlaceHolder.qml

@@ -6,18 +6,26 @@ Canvas {
     property string name
     clip: true
     onPaint: {
-            var ctx = getContext("2d");
-            const sz = 5;
-            for(let y = 0; y < height / sz; ++y) {
-                for(let x = 0; x < width / sz; ++x) {
-                     ctx.fillStyle = (x & 1) ? ((y & 1) ? "black" : "red")  : ((y & 1) ? "red" : "black");
-                     ctx.fillRect(x * sz, y * sz, sz, sz);
-                }
+        console.log("do paint canvas");
+        var ctx = getContext("2d");
+        const sz = 5;
+        for(let y = 0; y < height / sz; ++y) {
+            for(let x = 0; x < width / sz; ++x) {
+                 ctx.fillStyle = (x & 1) ? ((y & 1) ? "black" : "red")  : ((y & 1) ? "red" : "black");
+                 ctx.fillRect(x * sz, y * sz, sz, sz);
             }
         }
+    }
+
     Text {
         anchors.centerIn: parent
         color: "yellow"
         text: qsTr("This is a placeholder" + (canvas.name.length > 0 ? " for " + canvas.name : ''));
     }
+
+
+    Component.onCompleted:  {
+        console.log("do request paint canvas");
+        requestPaint();
+    }
 }

qml/QtForDesktopPopup.qml

@@ -35,50 +35,20 @@ Dialog {
         'qtDir': qtDir.text
     }
 
+    component MyInput : Input {
+        color: dialog.textBg
+        borderColor: dialog.textBgBorder
+        minTextWidth: 300
+    }
+
     Settings {
            id: settings
            property alias qtDirValue: qtDir.text
        }
 
-    component Input : RowLayout {
-        id: row
-        property string text
-        property string buttonText
-        property alias textRectWidth: rect.width
-        signal clicked
-        Layout.minimumWidth: rect.width + 10 + button.width + spacing
-        Rectangle {
-            id: rect
-            color: dialog.textBg
-            border.color: dialog.textBgBorder
-            Layout.preferredWidth: input.width + 10
-            Layout.preferredHeight: button.height - border.width * 2
-            TextInput {
-                id: input
-                anchors.centerIn: parent
-                text: row.text
-                width: metrics.width
-            }
-
-            TextMetrics {
-                id:     metrics
-                font:   input.font
-                text:   input.text
-            }
-        }
-        Button {
-            id: button
-            Layout.alignment: Qt.AlignRight
-            visible: row.buttonText.length > 0
-            text: row.buttonText
-            onClicked: row.clicked()
-        }
-    }
-
     ColumnLayout {
-
         Text {text: "Qt DIR";font.weight: Font.Medium}
-        Input {
+        MyInput {
             id: qtDir
             text: "/opt/Qt"
             buttonText: "Select..."
@@ -151,7 +121,7 @@ Dialog {
         id: fileDialog
         property var target
         onAccepted: {
-            target.text = selectedFile.toString().substring(7)
+            target.text = selectedFile.toString().substring(7) // 7 == "qrc.. blaablaa
         }
     }