QmlDesigner: Style properties formatting operations

User can copy properties of an item (for example text, rectangle,
positioner etc.) and paste them to the similar item using format
operations.
Available properties and item categories can be configured using
formatconfiguration.json file.

Task-number: QDS-2231
Change-Id: Idd574418451809c84bca2bd8a7ab6045043bde58
Reviewed-by: Thomas Hartmann <thomas.hartmann@qt.io>
This commit is contained in:
Pekka Kaikkonen
2021-05-10 14:53:48 +03:00
committed by Thomas Hartmann
parent 6884086115
commit b709f3115b
8 changed files with 330 additions and 0 deletions

View File

@@ -0,0 +1,24 @@
{
"propertylist" : [
{
"id": "textItem",
"subclasses": ["QtQuick.Text","QtQuick.TextInput","QtQuick.TextEdit"],
"properties": ["font.bold","font.italic","font.underline","color","font.capitalization","font.family","font.hintingPreference",
"font.kerning","font.letterSpacing","font.pixelSize","font.pointSize","font.preferShaping","font.strikeout",
"font.styleName","font.weight","font.wordSpacing","fontInfo.bold","fontInfo.family","fontInfo.italic","fontInfo.pixelSize",
"fontInfo.pointSize","fontInfo.styleName","fontInfo.weight","lineHeight","lineHeightMode","linkColor",
"maximumLineCount","minimumPixelSize","minimumPointSize","renderType","style","styleColor","padding","topPadding",
"bottomPadding","leftPadding","rightPadding"]
},
{
"id": "rectangleItem",
"subclasses": ["QtQuick.Rectangle"],
"properties": ["color","border.color","border.width","radius"]
},
{
"id":"positionerItem",
"subclasses": ["QtQuick.Row","QtQuick.Column","QtQuick.Grid"],
"properties": ["padding", "spacing", "topPadding", "bottomPadding", "leftPadding", "rightPadding"]
}
]
}

View File

@@ -210,6 +210,7 @@ extend_qtc_plugin(QmlDesigner
modelnodecontextmenu.cpp modelnodecontextmenu.h modelnodecontextmenu.cpp modelnodecontextmenu.h
modelnodecontextmenu_helper.cpp modelnodecontextmenu_helper.h modelnodecontextmenu_helper.cpp modelnodecontextmenu_helper.h
modelnodeoperations.cpp modelnodeoperations.h modelnodeoperations.cpp modelnodeoperations.h
formatoperation.cpp formatoperation.h
navigation2d.cpp navigation2d.h navigation2d.cpp navigation2d.h
gestures.cpp gestures.h gestures.cpp gestures.h
qmldesignericonprovider.cpp qmldesignericonprovider.h qmldesignericonprovider.cpp qmldesignericonprovider.h

View File

@@ -15,6 +15,7 @@ SOURCES += modelnodecontextmenu_helper.cpp
SOURCES += selectioncontext.cpp SOURCES += selectioncontext.cpp
SOURCES += designeractionmanager.cpp SOURCES += designeractionmanager.cpp
SOURCES += modelnodeoperations.cpp SOURCES += modelnodeoperations.cpp
SOURCES += formatoperation.cpp
SOURCES += navigation2d.cpp SOURCES += navigation2d.cpp
SOURCES += crumblebar.cpp SOURCES += crumblebar.cpp
SOURCES += qmldesignericonprovider.cpp SOURCES += qmldesignericonprovider.cpp
@@ -37,6 +38,7 @@ HEADERS += selectioncontext.h
HEADERS += componentcore_constants.h HEADERS += componentcore_constants.h
HEADERS += designeractionmanager.h HEADERS += designeractionmanager.h
HEADERS += modelnodeoperations.h HEADERS += modelnodeoperations.h
HEADERS += formatoperation.h
HEADERS += navigation2d.h HEADERS += navigation2d.h
HEADERS += actioninterface.h HEADERS += actioninterface.h
HEADERS += crumblebar.h HEADERS += crumblebar.h

View File

@@ -55,6 +55,8 @@ const char resetZCommandId[] = "ResetZ";
const char reverseCommandId[] = "Reverse"; const char reverseCommandId[] = "Reverse";
const char resetSizeCommandId[] = "ResetSize"; const char resetSizeCommandId[] = "ResetSize";
const char resetPositionCommandId[] = "ResetPosition"; const char resetPositionCommandId[] = "ResetPosition";
const char copyFormatCommandId[] = "CopyFormat";
const char applyFormatCommandId[] = "ApplyFormat";
const char visiblityCommandId[] = "ToggleVisiblity"; const char visiblityCommandId[] = "ToggleVisiblity";
const char anchorsFillCommandId[] = "AnchorsFill"; const char anchorsFillCommandId[] = "AnchorsFill";
const char anchorsResetCommandId[] = "AnchorsReset"; const char anchorsResetCommandId[] = "AnchorsReset";
@@ -123,6 +125,8 @@ const char visibilityDisplayName[] = QT_TRANSLATE_NOOP("QmlDesignerContextMenu",
const char resetSizeDisplayName[] = QT_TRANSLATE_NOOP("QmlDesignerContextMenu", "Reset Size"); const char resetSizeDisplayName[] = QT_TRANSLATE_NOOP("QmlDesignerContextMenu", "Reset Size");
const char resetPositionDisplayName[] = QT_TRANSLATE_NOOP("QmlDesignerContextMenu", "Reset Position"); const char resetPositionDisplayName[] = QT_TRANSLATE_NOOP("QmlDesignerContextMenu", "Reset Position");
const char copyFormatDisplayName[] = QT_TRANSLATE_NOOP("QmlDesignerContextMenu", "Copy Formatting");
const char applyFormatDisplayName[] = QT_TRANSLATE_NOOP("QmlDesignerContextMenu", "Apply Formatting");
const char goIntoComponentDisplayName[] = QT_TRANSLATE_NOOP("QmlDesignerContextMenu", "Go into Component"); const char goIntoComponentDisplayName[] = QT_TRANSLATE_NOOP("QmlDesignerContextMenu", "Go into Component");
const char mergeTemplateDisplayName[] = QT_TRANSLATE_NOOP("QmlDesignerContextMenu", "Merge File With Template"); const char mergeTemplateDisplayName[] = QT_TRANSLATE_NOOP("QmlDesignerContextMenu", "Merge File With Template");
@@ -176,6 +180,8 @@ const char lowerToolTip[] = QT_TRANSLATE_NOOP("QmlDesignerContextMenu", "Lower s
const char resetSizeToolTip[] = QT_TRANSLATE_NOOP("QmlDesignerContextMenu", "Reset size and use implicit size."); const char resetSizeToolTip[] = QT_TRANSLATE_NOOP("QmlDesignerContextMenu", "Reset size and use implicit size.");
const char resetPositionTooltip[] = QT_TRANSLATE_NOOP("QmlDesignerContextMenu", "Reset position and use implicit position."); const char resetPositionTooltip[] = QT_TRANSLATE_NOOP("QmlDesignerContextMenu", "Reset position and use implicit position.");
const char copyFormatTooltip[] = QT_TRANSLATE_NOOP("QmlDesignerContextMenu", "Copy formatting.");
const char applyFormatTooltip[] = QT_TRANSLATE_NOOP("QmlDesignerContextMenu", "Apply formatting.");
const char anchorsFillToolTip[] = QT_TRANSLATE_NOOP("QmlDesignerContextMenu", "Fill selected component to parent."); const char anchorsFillToolTip[] = QT_TRANSLATE_NOOP("QmlDesignerContextMenu", "Fill selected component to parent.");
const char anchorsResetToolTip[] = QT_TRANSLATE_NOOP("QmlDesignerContextMenu", "Reset anchors for selected component."); const char anchorsResetToolTip[] = QT_TRANSLATE_NOOP("QmlDesignerContextMenu", "Reset anchors for selected component.");

View File

@@ -28,6 +28,7 @@
#include "changestyleaction.h" #include "changestyleaction.h"
#include "designeractionmanagerview.h" #include "designeractionmanagerview.h"
#include "modelnodecontextmenu_helper.h" #include "modelnodecontextmenu_helper.h"
#include "formatoperation.h"
#include "qmldesignerconstants.h" #include "qmldesignerconstants.h"
#include "rewritingexception.h" #include "rewritingexception.h"
#include <bindingproperty.h> #include <bindingproperty.h>
@@ -909,11 +910,13 @@ bool anchorsMenuEnabled(const SelectionContext &context)
|| singleSelectionItemIsAnchored(context); || singleSelectionItemIsAnchored(context);
} }
void DesignerActionManager::createDefaultDesignerActions() void DesignerActionManager::createDefaultDesignerActions()
{ {
using namespace SelectionContextFunctors; using namespace SelectionContextFunctors;
using namespace ComponentCoreConstants; using namespace ComponentCoreConstants;
using namespace ModelNodeOperations; using namespace ModelNodeOperations;
using namespace FormatOperation;
const Utils::Icon prevIcon({ const Utils::Icon prevIcon({
{QLatin1String(":/utils/images/prev.png"), Utils::Theme::QmlDesigner_FormEditorForegroundColor}}, Utils::Icon::MenuTintedStyle); {QLatin1String(":/utils/images/prev.png"), Utils::Theme::QmlDesigner_FormEditorForegroundColor}}, Utils::Icon::MenuTintedStyle);
@@ -1001,6 +1004,29 @@ void DesignerActionManager::createDefaultDesignerActions()
&resetPosition, &resetPosition,
&selectionNotEmptyAndHasXorYProperty)); &selectionNotEmptyAndHasXorYProperty));
addDesignerAction(new ModelNodeAction(
copyFormatCommandId,
copyFormatDisplayName,
Utils::Icon({{":/qmldesigner/icon/designeractions/images/raise.png", Utils::Theme::IconsBaseColor}}).icon(),
copyFormatTooltip,
editCategory,
QKeySequence(),
120,
&copyFormat,
&propertiesCopyable));
addDesignerAction(new ModelNodeAction(
applyFormatCommandId,
applyFormatDisplayName,
Utils::Icon({{":/qmldesigner/icon/designeractions/images/lower.png", Utils::Theme::IconsBaseColor}}).icon(),
applyFormatTooltip,
editCategory,
QKeySequence(),
120,
&applyFormat,
&propertiesApplyable));
addDesignerAction(new ModelNodeAction( addDesignerAction(new ModelNodeAction(
resetSizeCommandId, resetSizeCommandId,
resetSizeDisplayName, resetSizeDisplayName,

View File

@@ -0,0 +1,212 @@
/****************************************************************************
**
** Copyright (C) 2016 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/
**
** This file is part of Qt Creator.
**
** Commercial License Usage
** Licensees holding valid commercial Qt licenses may use this file in
** accordance with the commercial license agreement provided with the
** Software or, alternatively, in accordance with the terms contained in
** a written agreement between you and The Qt Company. For licensing terms
** and conditions see https://www.qt.io/terms-conditions. For further
** information use the contact form at https://www.qt.io/contact-us.
**
** GNU General Public License Usage
** Alternatively, this file may be used under the terms of the GNU
** General Public License version 3 as published by the Free Software
** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT
** included in the packaging of this file. Please review the following
** information to ensure the GNU General Public License requirements will
** be met: https://www.gnu.org/licenses/gpl-3.0.html.
**
****************************************************************************/
#include "formatoperation.h"
#include "utils/fileutils.h"
#include <coreplugin/icore.h>
#include <qmlobjectnode.h>
#include <nodemetainfo.h>
#include <QJsonDocument>
#include <QJsonObject>
#include <QJsonArray>
namespace QmlDesigner {
namespace FormatOperation{
void readFormatConfiguration(){
if (copyableProperties.isEmpty()){
QString source = "formatconfiguration.json";
Utils::FilePath path = Core::ICore::resourcePath() + "/qmldesigner/" + source;
QString errorString;
Utils::FileReader reader;
if (reader.fetch(path, &errorString)){
QJsonParseError jsonError;
QJsonDocument document = QJsonDocument::fromJson(reader.data(), &jsonError );
if (jsonError.error != QJsonParseError::NoError)
return;
QJsonObject jsonObject = document.object();
QVariantMap rootMap = jsonObject.toVariantMap();
QJsonArray jsonArray = rootMap["propertylist"].toJsonArray();
for (int i=0; i< jsonArray.count(); ++i){
auto item = jsonArray.at(i).toObject();
QVariantMap itemMap = item.toVariantMap();
StylePropertyStruct current;
current.id = itemMap["id"].toString();
QVariantList subclassVariantList = itemMap["subclasses"].toList();
QStringList subclassList;
for (auto subclass : subclassVariantList)
subclassList.append(subclass.toString());
current.subclasses = subclassList;
QVariantList propertyList = itemMap["properties"].toList();
QStringList propertyStringList;
for (auto property : propertyList)
propertyStringList.append(property.toString());
current.properties = propertyStringList;
copyableProperties.append(current);
}
}
}
}
bool propertiesCopyable(const SelectionContext &selectionState)
{
if (!selectionState.singleNodeIsSelected())
return false;
readFormatConfiguration();
ModelNode modelNode = selectionState.currentSingleSelectedNode();
for (StylePropertyStruct copyable : copyableProperties)
for (QString copyableSubclass : copyable.subclasses)
if (modelNode.metaInfo().isSubclassOf(copyableSubclass.toUtf8()))
return true;
return false;
}
bool propertiesApplyable(const SelectionContext &selectionState)
{
if (selectionState.selectedModelNodes().isEmpty())
return false;
if (chosenItem.subclasses.isEmpty())
return false;
const ModelNode firstSelectedNode = selectionState.firstSelectedModelNode();
bool found = false;
for (QString copyableSubclass : chosenItem.subclasses){
if (firstSelectedNode.metaInfo().isSubclassOf(copyableSubclass.toUtf8())){
found = true;
break;
}
}
if (!found)
return false;
for (const ModelNode &modelNode : selectionState.selectedModelNodes()){
found = false;
for (QString subclass : chosenItem.subclasses)
if (modelNode.metaInfo().isSubclassOf(subclass.toUtf8())){
found = true;
break;
}
if (found)
continue;
return false;
}
return true;
}
void copyFormat(const SelectionContext &selectionState)
{
if (!selectionState.view())
return;
selectionState.view()->executeInTransaction("DesignerActionManager|copyFormat",[selectionState](){
applyableProperties.clear();
ModelNode node = selectionState.currentSingleSelectedNode();
QStringList propertyList;
for (StylePropertyStruct copyable : copyableProperties){
bool found = false;
for (QString copyableSubclass : copyable.subclasses)
if (node.metaInfo().isSubclassOf(copyableSubclass.toUtf8())){
propertyList = copyable.properties;
chosenItem = copyable;
found = true;
break;
}
if (found)
break;
}
QmlObjectNode qmlObjectNode(node);
for (auto propertyName : propertyList){
if (qmlObjectNode.propertyAffectedByCurrentState(propertyName.toUtf8())) {
StyleProperties property;
property.propertyName = propertyName.toUtf8();
property.value = qmlObjectNode.modelValue(propertyName.toUtf8());
applyableProperties.append(property);
}
}
});
}
void applyFormat(const SelectionContext &selectionState)
{
if (!selectionState.view())
return;
selectionState.view()->executeInTransaction("DesignerActionManager|applyFormat",[selectionState](){
for (ModelNode node : selectionState.selectedModelNodes()) {
QmlObjectNode qmlObjectNode(node);
QStringList propertyList;
for (StylePropertyStruct copyable : copyableProperties){
bool found = false;
for (QString copyableSubclass : copyable.subclasses)
if (node.metaInfo().isSubclassOf(copyableSubclass.toUtf8())){
propertyList = copyable.properties;
found = true;
break;
}
if (found)
break;
}
for (auto propertyName : propertyList)
if (qmlObjectNode.propertyAffectedByCurrentState(propertyName.toUtf8()))
qmlObjectNode.removeProperty(propertyName.toUtf8());
for (StyleProperties currentProperty : applyableProperties)
if (node.metaInfo().hasProperty((currentProperty.propertyName)))
qmlObjectNode.setVariantProperty(currentProperty.propertyName, currentProperty.value);
}
});
}
} // namespace FormatOperation
} // QmlDesigner

View File

@@ -0,0 +1,57 @@
/****************************************************************************
**
** Copyright (C) 2016 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/
**
** This file is part of Qt Creator.
**
** Commercial License Usage
** Licensees holding valid commercial Qt licenses may use this file in
** accordance with the commercial license agreement provided with the
** Software or, alternatively, in accordance with the terms contained in
** a written agreement between you and The Qt Company. For licensing terms
** and conditions see https://www.qt.io/terms-conditions. For further
** information use the contact form at https://www.qt.io/contact-us.
**
** GNU General Public License Usage
** Alternatively, this file may be used under the terms of the GNU
** General Public License version 3 as published by the Free Software
** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT
** included in the packaging of this file. Please review the following
** information to ensure the GNU General Public License requirements will
** be met: https://www.gnu.org/licenses/gpl-3.0.html.
**
****************************************************************************/
#pragma once
#include "selectioncontext.h"
namespace QmlDesigner {
namespace FormatOperation {
struct StylePropertyStruct
{
QString id;
QStringList subclasses;
QStringList properties;
};
struct StyleProperties
{
QmlDesigner::PropertyName propertyName;
QVariant value;
};
static QList<StylePropertyStruct> copyableProperties = {};
static QList<StyleProperties> applyableProperties = {};
static StylePropertyStruct chosenItem = {};
bool propertiesCopyable(const SelectionContext &selectionState);
bool propertiesApplyable(const SelectionContext &selectionState);
void copyFormat(const SelectionContext &selectionState);
void applyFormat(const SelectionContext &selectionState);
void readFormatConfiguration();
} // namespace FormatOperation
} // QmlDesigner

View File

@@ -458,6 +458,8 @@ Project {
"componentcore/designeractionmanagerview.h", "componentcore/designeractionmanagerview.h",
"componentcore/findimplementation.cpp", "componentcore/findimplementation.cpp",
"componentcore/findimplementation.h", "componentcore/findimplementation.h",
"componentcore/formatoperation.cpp",
"componentcore/formatoperation.h",
"componentcore/gestures.cpp", "componentcore/gestures.cpp",
"componentcore/gestures.h", "componentcore/gestures.h",
"componentcore/layoutingridlayout.cpp", "componentcore/layoutingridlayout.cpp",