a0c22d20b6
* unfinished implementation * Add frontend for the empty panel screen * Add an icon for Folder based on NodeFolder * fixed messages causing peicees of ui not to render on new document * Standardize nextTick syntax * WIP generisization of component subscriptions (not compiling yet) * Fix crash when loading font and there is no active document * Only advertise tool actions with a document * Fix failure to create new document * Initalise the properties panel * Fix highlight tab, canvas jump, warns and layer tree * Fix tests * Possibly fix some things? * Move WorkingColors layout definition to backend * Standardize action macro formatting * Provide typing for widgets in TS/Vue and associated cleanup * Fix viewport positioning initialization * Fix menu bar init at startup not document creation * Fix no viewport bounds bug * Change !=0 to >0 * Simplify the init system Closes #656 Co-authored-by: Keavon Chambers <keavon@keavon.com> Co-authored-by: 0hypercube <0hypercube@gmail.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" />