fork/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2026-09-24 03:58:12 +08:00
Code Issues Packages Projects Releases Wiki Activity

Implement the Properties panel with a transform section for layers (#527)

Browse Source 
* initial layout system with tool options

* cargo fmt

* cargo fmt again

* document bar defined on the backend

* cargo fmt

* removed RC<RefCell>

* cargo fmt

* - fix increment behavior
- removed hashmap from layout message handler
- removed no op message from layoutMessage

* cargo fmt

* only send documentBar when zoom or rotation is updated

* ctrl-0 changes zoom properly

* unfinished layer hook in

* fix layerData name

* layer panel options bar

* basic x/y movment

* working transform section

* changed messages from tuples to structs

* hook up text input

* - fixed number input to be more clear
- fixed actions for properties message handler

* Add styling

Co-authored-by: Keavon Chambers <keavon@keavon.com>
This commit is contained in:
mfish33
2022-02-12 08:22:57 -08:00
committed by Keavon Chambers
co-authored by Keavon Chambers
parent 45d41b1bd7
commit 5a3500d256
19 changed files with 659 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/panels/Document.vue
+2 -2
View File
@@ -6,12 +6,12 @@
<Separator :type="'Section'" />
<WidgetLayout :layout="toolOptionsLayout" />
<WidgetLayout :layout="toolOptionsLayout" class="tool-options" />
</LayoutRow>
<LayoutRow class="spacer"></LayoutRow>
<WidgetLayout :layout="documentBarLayout" class="right side" />
<WidgetLayout :layout="documentBarLayout" class="right side document-bar" />
</LayoutRow>
<LayoutRow class="shelf-and-viewport">
<LayoutCol class="shelf">
frontend/src/components/panels/Properties.vue
+52 -3
View File
@@ -1,15 +1,64 @@
<template>
<LayoutCol class="properties-panel"></LayoutCol>
<LayoutCol class="properties">
<LayoutRow class="options-bar">
<WidgetLayout :layout="propertiesOptionsLayout"></WidgetLayout>
</LayoutRow>
<LayoutRow class="sections" :scrollableY="true">
<WidgetLayout :layout="propertiesSectionsLayout"></WidgetLayout>
</LayoutRow>
</LayoutCol>
</template>
<style lang="scss"></style>
<style lang="scss">
.properties {
height: 100%;
.widget-layout {
flex: 1 1 100%;
margin: 0 4px;
}
.options-bar {
height: 32px;
flex: 0 0 auto;
}
.sections {
flex: 1 1 100%;
}
}
</style>
<script lang="ts">
import { defineComponent } from "vue";
import { defaultWidgetLayout, UpdatePropertyPanelOptionsLayout, UpdatePropertyPanelSectionsLayout } from "@/dispatcher/js-messages";
import LayoutCol from "@/components/layout/LayoutCol.vue";
import LayoutRow from "@/components/layout/LayoutRow.vue";
import WidgetLayout from "@/components/widgets/WidgetLayout.vue";
export default defineComponent({
components: { LayoutCol },
inject: ["editor", "dialog"],
data() {
return {
propertiesOptionsLayout: defaultWidgetLayout(),
propertiesSectionsLayout: defaultWidgetLayout(),
};
},
mounted() {
this.editor.dispatcher.subscribeJsMessage(UpdatePropertyPanelOptionsLayout, (updatePropertyPanelOptionsLayout) => {
this.propertiesOptionsLayout = updatePropertyPanelOptionsLayout;
});
this.editor.dispatcher.subscribeJsMessage(UpdatePropertyPanelSectionsLayout, (updatePropertyPanelSectionsLayout) => {
this.propertiesSectionsLayout = updatePropertyPanelSectionsLayout;
});
},
components: {
WidgetLayout,
LayoutRow,
LayoutCol,
},
});
</script>