fork/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2026-09-25 12: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/layout/FloatingMenu.svelte
+542 -526
View File
File diff suppressed because it is too large Load Diff
frontend/src/components/layout/LayoutCol.svelte
+82 -28
View File
@@ -1,35 +1,89 @@
<script lang="ts">
import { defineComponent, type PropType } from "vue";
let className = "";
export { className as class };
export let classes: Record<string, boolean> = {};
let styleName = "";
export { styleName as style };
export let styles: Record<string, string | number | undefined> = {};
export let tooltip: string | undefined = undefined;
export let scrollableX: boolean = false;
export let scrollableY: boolean = false;
export default defineComponent({
props: {
scrollableX: { type: Boolean as PropType<boolean>, default: false },
scrollableY: { type: Boolean as PropType<boolean>, default: false },
tooltip: { type: String as PropType<string | undefined>, required: false },
},
});
let self: HTMLDivElement;
$: extraClasses = Object.entries(classes)
.flatMap((classAndState) => (classAndState[1] ? [classAndState[0]] : []))
.join(" ");
$: extraStyles = Object.entries(styles)
.flatMap((styleAndValue) => (styleAndValue[1] !== undefined ? [`${styleAndValue[0]}: ${styleAndValue[1]};`] : []))
.join(" ");
export function div(): HTMLDivElement {
return self;
}
</script>
<template>
<div
class="layout-col"
:class="{ 'scrollable-x': scrollableX, 'scrollable-y': scrollableY }"
:data-scrollable-x="scrollableX || undefined"
:data-scrollable-y="scrollableY || undefined"
:title="tooltip"
>
<slot></slot>
</div>
</template>
<div
class={`layout-col ${className} ${extraClasses}`.trim()}
class:scrollable-x={scrollableX}
class:scrollable-y={scrollableY}
style={`${styleName} ${extraStyles}`.trim() || undefined}
title={tooltip}
bind:this={self}
on:focus
on:blur
on:fullscreenchange
on:fullscreenerror
on:scroll
on:cut
on:copy
on:paste
on:keydown
on:keypress
on:keyup
on:auxclick
on:click
on:contextmenu
on:dblclick
on:mousedown
on:mouseenter
on:mouseleave
on:mousemove
on:mouseover
on:mouseout
on:mouseup
on:select
on:wheel
on:drag
on:dragend
on:dragenter
on:dragstart
on:dragleave
on:dragover
on:drop
on:touchcancel
on:touchend
on:touchmove
on:touchstart
on:pointerover
on:pointerenter
on:pointerdown
on:pointermove
on:pointerup
on:pointercancel
on:pointerout
on:pointerleave
on:gotpointercapture
on:lostpointercapture
{...$$restProps}
>
<slot />
</div>
<style lang="scss">
.layout-col {
display: flex;
flex-direction: column;
flex-grow: 1;
.spacer {
flex: 1 1 100%;
<style lang="scss" global>
.layout-col {
display: flex;
flex-direction: column;
flex-grow: 1;
}
}
</style>
frontend/src/components/layout/LayoutRow.svelte
+82 -28
View File
@@ -1,35 +1,89 @@
<script lang="ts">
import { defineComponent, type PropType } from "vue";
let className = "";
export { className as class };
export let classes: Record<string, boolean> = {};
let styleName = "";
export { styleName as style };
export let styles: Record<string, string | number | undefined> = {};
export let tooltip: string | undefined = undefined;
export let scrollableX: boolean = false;
export let scrollableY: boolean = false;
export default defineComponent({
props: {
scrollableX: { type: Boolean as PropType<boolean>, default: false },
scrollableY: { type: Boolean as PropType<boolean>, default: false },
tooltip: { type: String as PropType<string | undefined>, required: false },
},
});
let self: HTMLDivElement;
$: extraClasses = Object.entries(classes)
.flatMap((classAndState) => (classAndState[1] ? [classAndState[0]] : []))
.join(" ");
$: extraStyles = Object.entries(styles)
.flatMap((styleAndValue) => (styleAndValue[1] !== undefined ? [`${styleAndValue[0]}: ${styleAndValue[1]};`] : []))
.join(" ");
export function div(): HTMLDivElement {
return self;
}
</script>
<template>
<div
class="layout-row"
:class="{ 'scrollable-x': scrollableX, 'scrollable-y': scrollableY }"
:data-scrollable-x="scrollableX || undefined"
:data-scrollable-y="scrollableY || undefined"
:title="tooltip"
>
<slot></slot>
</div>
</template>
<div
class={`layout-row ${className} ${extraClasses}`.trim()}
class:scrollable-x={scrollableX}
class:scrollable-y={scrollableY}
style={`${styleName} ${extraStyles}`.trim() || undefined}
title={tooltip}
bind:this={self}
on:focus
on:blur
on:fullscreenchange
on:fullscreenerror
on:scroll
on:cut
on:copy
on:paste
on:keydown
on:keypress
on:keyup
on:auxclick
on:click
on:contextmenu
on:dblclick
on:mousedown
on:mouseenter
on:mouseleave
on:mousemove
on:mouseover
on:mouseout
on:mouseup
on:select
on:wheel
on:drag
on:dragend
on:dragenter
on:dragstart
on:dragleave
on:dragover
on:drop
on:touchcancel
on:touchend
on:touchmove
on:touchstart
on:pointerover
on:pointerenter
on:pointerdown
on:pointermove
on:pointerup
on:pointercancel
on:pointerout
on:pointerleave
on:gotpointercapture
on:lostpointercapture
{...$$restProps}
>
<slot />
</div>
<style lang="scss">
.layout-row {
display: flex;
flex-direction: row;
flex-grow: 1;
.spacer {
flex: 1 1 100%;
<style lang="scss" global>
.layout-row {
display: flex;
flex-direction: row;
flex-grow: 1;
}
}
</style>