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

Multi-document management (create new document; tab switching) (#210)

Browse Source 
* Multi-docs WIP

* Change to number

* Add new document and switch documents

* Remove keybind for previous document. Change keybind for next document.

* Switch documents by clicking tabs

* Remove keybind for previous document. Change keybind for next document.

* multi-docs

* Update package-lock.json

* Hook up File>New to add new document

* Remove console logs and empty lines. Start new documents from 2 instead of 1.

* Fix formatting
This commit is contained in:
George Atkinson
2021-06-13 20:24:09 -07:00
committed by GitHub
parent 1c2e667769
commit f6b7708a8f
11 changed files with 133 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/web/src/components/workspace/Panel.vue
+9 -1
View File
@@ -2,7 +2,7 @@
<div class="panel">
<div class="tab-bar" :class="{ 'min-widths': tabMinWidths }">
<div class="tab-group">
<div class="tab" :class="{ active: tabIndex === tabActiveIndex }" v-for="(tabLabel, tabIndex) in tabLabels" :key="tabLabel">
<div class="tab" :class="{ active: tabIndex === tabActiveIndex }" v-for="(tabLabel, tabIndex) in tabLabels" :key="tabLabel" @click="handleTabClick(tabIndex)">
<span>{{ tabLabel }}</span>
<IconButton :icon="'CloseX'" :size="16" v-if="tabCloseButtons" />
</div>
@@ -144,6 +144,8 @@ import IconButton from "../widgets/buttons/IconButton.vue";
import PopoverButton, { PopoverButtonIcon } from "../widgets/buttons/PopoverButton.vue";
import { MenuDirection } from "../widgets/floating-menus/FloatingMenu.vue";
const wasm = import("../../../wasm/pkg");
export default defineComponent({
components: {
Document,
@@ -153,6 +155,12 @@ export default defineComponent({
IconButton,
PopoverButton,
},
methods: {
async handleTabClick(tabIndex: number) {
const { select_document } = await wasm;
select_document(tabIndex);
},
},
props: {
tabMinWidths: { type: Boolean, default: false },
tabCloseButtons: { type: Boolean, default: false },
client/web/src/components/workspace/Workspace.vue
+21 -7
View File
@@ -1,13 +1,7 @@
<template>
<LayoutRow class="workspace-grid-subdivision">
<LayoutCol class="workspace-grid-subdivision" style="flex-grow: 1597">
<Panel
:panelType="'Document'"
:tabCloseButtons="true"
:tabMinWidths="true"
:tabLabels="['Untitled Document*', 'Document 2', 'Document 3', 'Document 4', 'Document 5', 'Document 6']"
:tabActiveIndex="0"
/>
<Panel :panelType="'Document'" :tabCloseButtons="true" :tabMinWidths="true" :tabLabels="documents" :tabActiveIndex="activeDocument" />
</LayoutCol>
<LayoutCol class="workspace-grid-resize-gutter"></LayoutCol>
<LayoutCol class="workspace-grid-subdivision" style="flex-grow: 319">
@@ -52,6 +46,7 @@
<script lang="ts">
import { defineComponent } from "vue";
import { ResponseType, registerResponseHandler, Response, SetActiveDocument, NewDocument } from "../../response-handler";
import LayoutRow from "../layout/LayoutRow.vue";
import LayoutCol from "../layout/LayoutCol.vue";
import Panel from "./Panel.vue";
@@ -62,5 +57,24 @@ export default defineComponent({
LayoutCol,
Panel,
},
mounted() {
registerResponseHandler(ResponseType.NewDocument, (responseData: Response) => {
const documentData = responseData as NewDocument;
if (documentData) this.documents.push(documentData.document_name);
});
registerResponseHandler(ResponseType.SetActiveDocument, (responseData: Response) => {
const documentData = responseData as SetActiveDocument;
if (documentData) this.activeDocument = documentData.document_index;
});
},
data() {
return {
activeDocument: 0,
documents: ["Untitled Document"],
};
},
});
</script>