065db23e87
* Add use_scroll_as_zoom field to preference handler
* Add {Create,Delete}Mapping variants to message
* Revert "Add {Create,Delete}Mapping variants to message"
This reverts commit 0ba74754c9fb0c78d0b590c96e1d4fe2cfdd13e7.
* Revert "Add use_scroll_as_zoom field to preference handler"
This reverts commit d30f7c9edfa6d6e156939ca07f4db81f288975fd.
* Add basic scroll_as_zoom mapping
* Create overengineered mapping patch abstraction
* Add (for now passthrough) input layout manager
* Actually handle ModifyLayout messages (untested)
* Add backend preferences <-> layout manager comms
* Add scroll-as-zoom to actual preferences UI
* Rename LayoutManager -> KeyMapping
* Add Input section to preferences and title case
* Add scrollAsZoom frontend handling code (untested)
* Handle frontend <-> preferences comms
* (broken) Move scrollAsZoom persistence into state
* Fix scrollAsZoom having no effect on node graph
* Remove debugging helpers
* Fix confusion between horizontal and vertical
* Rename feature
* Move new message handler into folder
---------
Co-authored-by: Keavon Chambers <keavon@keavon.com>
Overview of /frontend/src/components/
Each component represents a (usually reusable) part of the Graphite Editor GUI. These all get mounted within the Vue entry point, App.vue, in the /src directory above this one.
Floating Menus: floating-menus/
The temporary UI areas with dark backgrounds which hover over the top of the editor window content. Examples include popovers, dropdown menu selectors, and dialog modals.
Layout: layout/
Useful containers that control the flow of content held within.
Panels: panels/
The dockable tabbed regions like the Document, Properties, Layer Tree, and Node Graph panels.
Widgets: widgets/
The interactive input items used to display information and provide user control.
Window: window/
The building blocks for the Title Bar, Workspace, and Status Bar within an editor application window.
Vue tips and tricks
This section contains a growing list of quick reference information for helpful Vue solutions and best practices. Feel free to add to this to help contributors learn things, or yourself remember tricks you'll likely forget in a few months.
Bi-directional props
The component declares this:
export default defineComponent({
emits: ["update:theBidirectionalProperty"],
props: {
theBidirectionalProperty: { type: Number as PropType<number>, required: false },
},
watch: {
// Called only when `theBidirectionalProperty` is changed from outside this component (with v-model)
theBidirectionalProperty(newSelectedIndex: number | undefined) {
},
},
methods: {
doSomething() {
this.$emit("update:theBidirectionalProperty", SOME_NEW_VALUE);
},
},
});
Users of the component do this for theCorrespondingDataEntry to be a two-way binding:
<DropdownInput v-model:theBidirectionalProperty="theCorrespondingDataEntry" />