fork/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2026-09-26 02:48: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/widgets/WidgetSection.vue
+71 -13
View File
@@ -1,26 +1,78 @@
<!-- TODO: Implement collapsable sections with properties system -->
<template>
<div class="widget-section">
<template v-for="(layoutRow, index) in widgetData.layout" :key="index">
<component :is="layoutRowType(layoutRow)" :widgetData="layoutRow" :layoutTarget="layoutTarget"></component>
</template>
</div>
<LayoutCol class="widget-section">
<LayoutRow class="header" @click.stop="() => (expanded = !expanded)">
<div class="expand-arrow" :class="{ expanded }"></div>
<Separator :type="'Related'" />
<TextLabel :bold="true">{{ widgetData.name }}</TextLabel>
</LayoutRow>
<LayoutCol class="body" v-if="expanded">
<component :is="layoutRowType(layoutRow)" :widgetData="layoutRow" :layoutTarget="layoutTarget" v-for="(layoutRow, index) in widgetData.layout" :key="index"></component>
</LayoutCol>
</LayoutCol>
</template>
<style lang="scss">
.widget-section {
height: 100%;
flex: 0 0 auto;
display: flex;
align-items: center;
.header {
flex: 0 0 24px;
background: var(--color-4-dimgray);
align-items: center;
padding: 0 8px;
margin: 0 -4px;
.expand-arrow {
width: 6px;
height: 100%;
padding: 0;
position: relative;
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
&::after {
content: "";
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 3px 0 3px 6px;
border-color: transparent transparent transparent var(--color-e-nearwhite);
}
&.expanded::after {
border-width: 6px 3px 0 3px;
border-color: var(--color-e-nearwhite) transparent transparent transparent;
}
}
.text-label {
height: 18px;
display: inline-block;
}
}
.body {
margin: 0 4px;
.text-label {
flex: 0 0 30%;
text-align: right;
}
}
}
</style>
<script lang="ts">
import { defineComponent, PropType } from "vue";
import { isWidgetRow, isWidgetSection, LayoutRow, WidgetSection as WidgetSectionFromJsMessages } from "@/dispatcher/js-messages";
import { isWidgetRow, isWidgetSection, LayoutRow as LayoutSystemRow, WidgetSection as WidgetSectionFromJsMessages } from "@/dispatcher/js-messages";
import LayoutCol from "@/components/layout/LayoutCol.vue";
import LayoutRow from "@/components/layout/LayoutRow.vue";
import TextLabel from "@/components/widgets/labels/TextLabel.vue";
import Separator from "@/components/widgets/separators/Separator.vue";
import WidgetRow from "@/components/widgets/WidgetRow.vue";
const WidgetSection = defineComponent({
@@ -34,21 +86,27 @@ const WidgetSection = defineComponent({
return {
isWidgetRow,
isWidgetSection,
expanded: true,
};
},
methods: {
updateLayout(widgetId: BigInt, value: unknown) {
this.editor.instance.update_layout(this.layoutTarget, widgetId, value);
},
layoutRowType(layoutRow: LayoutRow): unknown {
layoutRowType(layoutRow: LayoutSystemRow): unknown {
if (isWidgetRow(layoutRow)) return WidgetRow;
if (isWidgetSection(layoutRow)) return WidgetSection;
throw new Error("Layout row type does not exist");
},
},
components: { WidgetRow },
components: {
LayoutCol,
LayoutRow,
TextLabel,
Separator,
WidgetRow,
},
});
export default WidgetSection;
</script>