fork/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2026-09-29 19:18:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

Replace the Vue frontend with Svelte

Browse Source
This commit is contained in:
Keavon Chambers
2023-03-10 03:54:39 -08:00
parent e539e43483
commit 6e20ea538b
83 changed files with 10013 additions and 19687 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/panels/Properties.svelte
+47 -55
View File
@@ -1,68 +1,60 @@
<script lang="ts">
import { defineComponent } from "vue";
import { getContext, onMount } from "svelte";
import { defaultWidgetLayout, patchWidgetLayout, UpdatePropertyPanelOptionsLayout, UpdatePropertyPanelSectionsLayout } from "@/wasm-communication/messages";
import { defaultWidgetLayout, patchWidgetLayout, UpdatePropertyPanelOptionsLayout, UpdatePropertyPanelSectionsLayout } from "@/wasm-communication/messages";
import LayoutCol from "@/components/layout/LayoutCol.vue";
import LayoutRow from "@/components/layout/LayoutRow.vue";
import WidgetLayout from "@/components/widgets/WidgetLayout.vue";
import LayoutCol from "@/components/layout/LayoutCol.svelte";
import LayoutRow from "@/components/layout/LayoutRow.svelte";
import WidgetLayout from "@/components/widgets/WidgetLayout.svelte";
import { type Editor } from "@/wasm-communication/editor";
export default defineComponent({
inject: ["editor", "dialog"],
data() {
return {
propertiesOptionsLayout: defaultWidgetLayout(),
propertiesSectionsLayout: defaultWidgetLayout(),
};
},
mounted() {
this.editor.subscriptions.subscribeJsMessage(UpdatePropertyPanelOptionsLayout, (updatePropertyPanelOptionsLayout) => {
patchWidgetLayout(this.propertiesOptionsLayout, updatePropertyPanelOptionsLayout);
const editor = getContext<Editor>("editor");
let propertiesOptionsLayout = defaultWidgetLayout();
let propertiesSectionsLayout = defaultWidgetLayout();
onMount(() => {
editor.subscriptions.subscribeJsMessage(UpdatePropertyPanelOptionsLayout, (updatePropertyPanelOptionsLayout) => {
patchWidgetLayout(propertiesOptionsLayout, updatePropertyPanelOptionsLayout);
propertiesOptionsLayout = propertiesOptionsLayout;
});
this.editor.subscriptions.subscribeJsMessage(UpdatePropertyPanelSectionsLayout, (updatePropertyPanelSectionsLayout) => {
patchWidgetLayout(this.propertiesSectionsLayout, updatePropertyPanelSectionsLayout);
editor.subscriptions.subscribeJsMessage(UpdatePropertyPanelSectionsLayout, (updatePropertyPanelSectionsLayout) => {
patchWidgetLayout(propertiesSectionsLayout, updatePropertyPanelSectionsLayout);
propertiesSectionsLayout = propertiesSectionsLayout;
});
},
components: {
LayoutCol,
LayoutRow,
WidgetLayout,
},
});
});
</script>
<template>
<LayoutCol class="properties">
<LayoutRow class="options-bar">
<WidgetLayout :layout="propertiesOptionsLayout" />
</LayoutRow>
<LayoutRow class="sections" :scrollableY="true">
<WidgetLayout :layout="propertiesSectionsLayout" />
</LayoutRow>
</LayoutCol>
</template>
<LayoutCol class="properties">
<LayoutRow class="options-bar">
<WidgetLayout layout={propertiesOptionsLayout} />
</LayoutRow>
<LayoutRow class="sections" scrollableY={true}>
<WidgetLayout layout={propertiesSectionsLayout} />
</LayoutRow>
</LayoutCol>
<style lang="scss">
.properties {
height: 100%;
<style lang="scss" global>
.properties {
height: 100%;
.widget-layout {
flex: 1 1 100%;
margin: 0 4px;
.widget-layout {
flex: 1 1 100%;
margin: 0 4px;
}
.options-bar {
height: 32px;
flex: 0 0 auto;
}
.sections {
flex: 1 1 100%;
}
.text-button {
flex-basis: 0;
}
}
.options-bar {
height: 32px;
flex: 0 0 auto;
}
.sections {
flex: 1 1 100%;
}
.text-button {
flex-basis: 0;
}
}
</style>