fork/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2026-10-01 16:28:11 +08:00
Code Issues Packages Projects Releases Wiki Activity

Add suffix widget non-rounding; add disabled state to many widgets

Browse Source
This commit is contained in:
Keavon Chambers
2022-11-04 17:09:03 -07:00
parent afc84d30f8
commit 71680ab005
28 changed files with 218 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/widgets/WidgetRow.vue
+48 -12
View File
@@ -3,17 +3,30 @@
<template>
<div :class="`widget-${direction}`">
<template v-for="(component, index) in widgets" :key="index">
<template v-for="([component, nextIsSuffix], index) in widgetsAndNextSiblingIsSuffix" :key="index">
<CheckboxInput v-if="component.props.kind === 'CheckboxInput'" v-bind="component.props" @update:checked="(value: boolean) => updateLayout(component.widgetId, value)" />
<ColorInput v-if="component.props.kind === 'ColorInput'" v-bind="component.props" v-model:open="open" @update:value="(value: unknown) => updateLayout(component.widgetId, value)" />
<ColorInput
v-if="component.props.kind === 'ColorInput'"
v-bind="component.props"
v-model:open="open"
@update:value="(value: unknown) => updateLayout(component.widgetId, value)"
:sharpRightCorners="nextIsSuffix"
/>
<DropdownInput
v-if="component.props.kind === 'DropdownInput'"
v-bind="component.props"
v-model:open="open"
@update:selectedIndex="(value: number) => updateLayout(component.widgetId, value)"
:sharpRightCorners="nextIsSuffix"
/>
<FontInput v-if="component.props.kind === 'FontInput'" v-bind="component.props" v-model:open="open" @changeFont="(value: unknown) => updateLayout(component.widgetId, value)" />
<IconButton v-if="component.props.kind === 'IconButton'" v-bind="component.props" :action="() => updateLayout(component.widgetId, undefined)" />
<FontInput
v-if="component.props.kind === 'FontInput'"
v-bind="component.props"
v-model:open="open"
@changeFont="(value: unknown) => updateLayout(component.widgetId, value)"
:sharpRightCorners="nextIsSuffix"
/>
<IconButton v-if="component.props.kind === 'IconButton'" v-bind="component.props" :action="() => updateLayout(component.widgetId, undefined)" :sharpRightCorners="nextIsSuffix" />
<IconLabel v-if="component.props.kind === 'IconLabel'" v-bind="component.props" />
<NumberInput
v-if="component.props.kind === 'NumberInput'"
@@ -21,6 +34,7 @@
@update:value="(value: number) => updateLayout(component.widgetId, value)"
:incrementCallbackIncrease="() => updateLayout(component.widgetId, 'Increment')"
:incrementCallbackDecrease="() => updateLayout(component.widgetId, 'Decrement')"
:sharpRightCorners="nextIsSuffix"
/>
<OptionalInput v-if="component.props.kind === 'OptionalInput'" v-bind="component.props" @update:checked="(value: boolean) => updateLayout(component.widgetId, value)" />
<PivotAssist v-if="component.props.kind === 'PivotAssist'" v-bind="component.props" @update:position="(value: string) => updateLayout(component.widgetId, value)" />
@@ -28,12 +42,22 @@
<h3>{{ (component.props as any).header }}</h3>
<p>{{ (component.props as any).text }}</p>
</PopoverButton>
<RadioInput v-if="component.props.kind === 'RadioInput'" v-bind="component.props" @update:selectedIndex="(value: number) => updateLayout(component.widgetId, value)" />
<RadioInput
v-if="component.props.kind === 'RadioInput'"
v-bind="component.props"
@update:selectedIndex="(value: number) => updateLayout(component.widgetId, value)"
:sharpRightCorners="nextIsSuffix"
/>
<Separator v-if="component.props.kind === 'Separator'" v-bind="component.props" />
<SwatchPairInput v-if="component.props.kind === 'SwatchPairInput'" v-bind="component.props" />
<TextAreaInput v-if="component.props.kind === 'TextAreaInput'" v-bind="component.props" @commitText="(value: string) => updateLayout(component.widgetId, value)" />
<TextButton v-if="component.props.kind === 'TextButton'" v-bind="component.props" :action="() => updateLayout(component.widgetId, undefined)" />
<TextInput v-if="component.props.kind === 'TextInput'" v-bind="component.props" @commitText="(value: string) => updateLayout(component.widgetId, value)" />
<TextButton v-if="component.props.kind === 'TextButton'" v-bind="component.props" :action="() => updateLayout(component.widgetId, undefined)" :sharpRightCorners="nextIsSuffix" />
<TextInput
v-if="component.props.kind === 'TextInput'"
v-bind="component.props"
@commitText="(value: string) => updateLayout(component.widgetId, value)"
:sharpRightCorners="nextIsSuffix"
/>
<TextLabel v-if="component.props.kind === 'TextLabel'" v-bind="withoutValue(component.props)">{{ (component.props as any).value }}</TextLabel>
</template>
</div>
@@ -74,6 +98,7 @@
<script lang="ts">
import { defineComponent, type PropType } from "vue";
import type { Widget } from "@/wasm-communication/messages";
import { isWidgetColumn, isWidgetRow, type WidgetColumn, type WidgetRow } from "@/wasm-communication/messages";
import PivotAssist from "@/components/widgets/assists/PivotAssist.vue";
@@ -94,6 +119,8 @@ import IconLabel from "@/components/widgets/labels/IconLabel.vue";
import Separator from "@/components/widgets/labels/Separator.vue";
import TextLabel from "@/components/widgets/labels/TextLabel.vue";
const SUFFIX_WIDGETS = ["PopoverButton"];
export default defineComponent({
inject: ["editor"],
props: {
@@ -106,15 +133,24 @@ export default defineComponent({
};
},
computed: {
direction() {
direction(): "column" | "row" | "ERROR" {
if (isWidgetColumn(this.widgetData)) return "column";
if (isWidgetRow(this.widgetData)) return "row";
return "ERROR";
},
widgets() {
if (isWidgetColumn(this.widgetData)) return this.widgetData.columnWidgets;
if (isWidgetRow(this.widgetData)) return this.widgetData.rowWidgets;
return [];
widgetsAndNextSiblingIsSuffix(): [Widget, boolean][] {
let widgets: Widget[] = [];
if (isWidgetColumn(this.widgetData)) widgets = this.widgetData.columnWidgets;
if (isWidgetRow(this.widgetData)) widgets = this.widgetData.rowWidgets;
return widgets.map((widget, index): [Widget, boolean] => {
// A suffix widget is one that joins up with this widget at the end with only a 1px gap.
// It uses the CSS sibling selector to give its own left edge corners zero radius.
// But this JS is needed to set its preceding sibling widget's right edge corners to zero radius.
const nextSiblingIsSuffix = SUFFIX_WIDGETS.includes(widgets[index + 1]?.props.kind);
return [widget, nextSiblingIsSuffix];
});
},
},
methods: {