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

Clean up camelCase and snake_case in frontend code

Browse Source
This commit is contained in:
Keavon Chambers
2022-08-23 13:36:27 -07:00
parent d566ba852d
commit 5ad76bec6e
30 changed files with 317 additions and 162 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
frontend/src/components/panels/Document.vue
View File

@@ -256,27 +256,27 @@ export default defineComponent({
const buffer = await file.arrayBuffer();
const u8Array = new Uint8Array(buffer);
this.editor.instance.paste_image(file.type, u8Array, e.clientX, e.clientY);
this.editor.instance.pasteImage(file.type, u8Array, e.clientX, e.clientY);
}
});
},
translateCanvasX(newValue: number) {
const delta = newValue - this.scrollbarPos.x;
this.scrollbarPos.x = newValue;
this.editor.instance.translate_canvas(-delta * this.scrollbarMultiplier.x, 0);
this.editor.instance.translateCanvas(-delta * this.scrollbarMultiplier.x, 0);
},
translateCanvasY(newValue: number) {
const delta = newValue - this.scrollbarPos.y;
this.scrollbarPos.y = newValue;
this.editor.instance.translate_canvas(0, -delta * this.scrollbarMultiplier.y);
this.editor.instance.translateCanvas(0, -delta * this.scrollbarMultiplier.y);
},
pageX(delta: number) {
const move = delta < 0 ? 1 : -1;
this.editor.instance.translate_canvas_by_fraction(move, 0);
this.editor.instance.translateCanvasByFraction(move, 0);
},
pageY(delta: number) {
const move = delta < 0 ? 1 : -1;
this.editor.instance.translate_canvas_by_fraction(0, move);
this.editor.instance.translateCanvasByFraction(0, move);
},
canvasPointerDown(e: PointerEvent) {
const onEditbox = e.target instanceof HTMLDivElement && e.target.contentEditable;
@@ -341,7 +341,7 @@ export default defineComponent({
triggerTextCommit() {
if (!this.textInput) return;
const textCleaned = textInputCleanup(this.textInput.innerText);
this.editor.instance.on_change_text(textCleaned);
this.editor.instance.onChangeText(textCleaned);
},
displayEditableTextbox(displayEditableTextbox: DisplayEditableTextbox) {
this.textInput = document.createElement("DIV") as HTMLDivElement;
@@ -350,14 +350,14 @@ export default defineComponent({
else this.textInput.textContent = `${displayEditableTextbox.text}\n`;
this.textInput.contentEditable = "true";
this.textInput.style.width = displayEditableTextbox.line_width ? `${displayEditableTextbox.line_width}px` : "max-content";
this.textInput.style.width = displayEditableTextbox.lineWidth ? `${displayEditableTextbox.lineWidth}px` : "max-content";
this.textInput.style.height = "auto";
this.textInput.style.fontSize = `${displayEditableTextbox.font_size}px`;
this.textInput.style.fontSize = `${displayEditableTextbox.fontSize}px`;
this.textInput.style.color = displayEditableTextbox.color.toRgbaCSS();
this.textInput.oninput = (): void => {
if (!this.textInput) return;
this.editor.instance.update_bounds(textInputCleanup(this.textInput.innerText));
this.editor.instance.updateBounds(textInputCleanup(this.textInput.innerText));
};
},
displayRemoveEditableTextbox() {

39
frontend/src/components/panels/LayerTree.vue
View File

@@ -23,16 +23,16 @@
<div class="indent" :style="{ marginLeft: layerIndent(listing.entry) }"></div>
<button
v-if="listing.entry.layer_type === 'Folder'"
v-if="listing.entry.layerType === 'Folder'"
class="expand-arrow"
:class="{ expanded: listing.entry.layer_metadata.expanded }"
:class="{ expanded: listing.entry.layerMetadata.expanded }"
@click.stop="handleExpandArrowClick(listing.entry.path)"
></button>
<LayoutRow
class="layer"
:class="{ selected: listing.entry.layer_metadata.selected }"
:class="{ selected: listing.entry.layerMetadata.selected }"
:data-index="index"
:title="`${listing.entry.name}${devMode ? '\nLayer Path: ' + listing.entry.path.join(' / ') : ''}` || null"
:title="listing.entry.tooltip"
:draggable="draggable"
@dragstart="(e) => draggable && dragStart(e, listing)"
@click.exact="(e) => selectLayer(false, false, false, listing, e)"
@@ -45,17 +45,17 @@
@click.alt="(e) => e.stopPropagation()"
>
<LayoutRow class="layer-type-icon">
<IconLabel v-if="listing.entry.layer_type === 'Folder'" :icon="'NodeFolder'" :iconStyle="'Node'" title="Folder" />
<IconLabel v-else-if="listing.entry.layer_type === 'Image'" :icon="'NodeImage'" :iconStyle="'Node'" title="Image" />
<IconLabel v-else-if="listing.entry.layer_type === 'Shape'" :icon="'NodeShape'" :iconStyle="'Node'" title="Shape" />
<IconLabel v-else-if="listing.entry.layer_type === 'Text'" :icon="'NodeText'" :iconStyle="'Node'" title="Path" />
<IconLabel v-if="listing.entry.layerType === 'Folder'" :icon="'NodeFolder'" :iconStyle="'Node'" title="Folder" />
<IconLabel v-else-if="listing.entry.layerType === 'Image'" :icon="'NodeImage'" :iconStyle="'Node'" title="Image" />
<IconLabel v-else-if="listing.entry.layerType === 'Shape'" :icon="'NodeShape'" :iconStyle="'Node'" title="Shape" />
<IconLabel v-else-if="listing.entry.layerType === 'Text'" :icon="'NodeText'" :iconStyle="'Node'" title="Path" />
</LayoutRow>
<LayoutRow class="layer-name" @dblclick="() => onEditLayerName(listing)">
<input
data-text-input
type="text"
:value="listing.entry.name"
:placeholder="listing.entry.layer_type"
:placeholder="listing.entry.layerType"
:disabled="!listing.editingName"
@blur="() => onEditLayerNameDeselect(listing)"
@keydown.esc="onEditLayerNameDeselect(listing)"
@@ -292,7 +292,6 @@ export default defineComponent({
// Layer data
layerCache: new Map() as Map<string, LayerPanelEntry>, // TODO: replace with BigUint64Array as index
layers: [] as LayerListingInfo[],
devMode: process.env.NODE_ENV === "development",
// Interactive dragging
draggable: true,
@@ -313,10 +312,10 @@ export default defineComponent({
return `${height}px`;
},
toggleLayerVisibility(path: BigUint64Array) {
this.editor.instance.toggle_layer_visibility(path);
this.editor.instance.toggleLayerVisibility(path);
},
handleExpandArrowClick(path: BigUint64Array) {
this.editor.instance.toggle_layer_expansion(path);
this.editor.instance.toggleLayerExpansion(path);
},
async onEditLayerName(listing: LayerListingInfo) {
if (listing.editingName) return;
@@ -337,7 +336,7 @@ export default defineComponent({
const name = (inputElement as HTMLInputElement).value;
listing.editingName = false;
this.editor.instance.set_layer_name(listing.entry.path, name);
this.editor.instance.setLayerName(listing.entry.path, name);
},
async onEditLayerNameDeselect(listing: LayerListingInfo) {
this.draggable = true;
@@ -354,14 +353,14 @@ export default defineComponent({
// Pressing the Ctrl key on a Mac, or the Cmd key on another platform, is a violation of the `.exact` qualifier so we filter it out here
const opposite = platformIsMac() ? ctrl : cmd;
if (!opposite) this.editor.instance.select_layer(listing.entry.path, ctrlOrCmd, shift);
if (!opposite) this.editor.instance.selectLayer(listing.entry.path, ctrlOrCmd, shift);
// We always want to stop propagation so the click event doesn't pass through the layer and cause a deselection by clicking the layer panel background
// This is also why we cover the remaining cases not considered by the `.exact` qualifier, in the last two bindings on the layer element, with a `stopPropagation()` call
event.stopPropagation();
},
async deselectAllLayers() {
this.editor.instance.deselect_all_layers();
this.editor.instance.deselectAllLayers();
},
calculateDragIndex(tree: HTMLElement, clientY: number): DraggingData {
const treeChildren = tree.children;
@@ -405,9 +404,9 @@ export default defineComponent({
}
// Inserting below current row
else if (distance > -closest && distance > -RANGE_TO_INSERT_WITHIN_BOTTOM_FOLDER_NOT_ROOT && distance < 0) {
insertFolder = layer.layer_type === "Folder" ? layer.path : layer.path.slice(0, layer.path.length - 1);
insertIndex = layer.layer_type === "Folder" ? 0 : folderIndex + 1;
highlightFolder = layer.layer_type === "Folder";
insertFolder = layer.layerType === "Folder" ? layer.path : layer.path.slice(0, layer.path.length - 1);
insertIndex = layer.layerType === "Folder" ? 0 : folderIndex + 1;
highlightFolder = layer.layerType === "Folder";
closest = -distance;
markerHeight = index === treeChildren.length - 1 ? rect.bottom - INSERT_MARK_OFFSET : rect.bottom;
}
@@ -426,7 +425,7 @@ export default defineComponent({
},
async dragStart(event: DragEvent, listing: LayerListingInfo) {
const layer = listing.entry;
if (!layer.layer_metadata.selected) this.selectLayer(event.ctrlKey, event.metaKey, event.shiftKey, listing, event);
if (!layer.layerMetadata.selected) this.selectLayer(event.ctrlKey, event.metaKey, event.shiftKey, listing, event);
// Set style of cursor for drag
if (event.dataTransfer) {
@@ -448,7 +447,7 @@ export default defineComponent({
if (this.draggingData) {
const { insertFolder, insertIndex } = this.draggingData;
this.editor.instance.move_layer_in_tree(insertFolder, insertIndex);
this.editor.instance.moveLayerInTree(insertFolder, insertIndex);
this.draggingData = undefined;
}

2
frontend/src/components/widgets/WidgetLayout.vue
View File

@@ -2,7 +2,7 @@
<template>
<div class="widget-layout">
<component :is="LayoutGroupType(layoutRow)" :widgetData="layoutRow" :layoutTarget="layout.layout_target" v-for="(layoutRow, index) in layout.layout" :key="index" />
<component :is="LayoutGroupType(layoutRow)" :widgetData="layoutRow" :layoutTarget="layout.layoutTarget" v-for="(layoutRow, index) in layout.layout" :key="index" />
</div>
</template>

2
frontend/src/components/widgets/WidgetRow.vue
View File

@@ -122,7 +122,7 @@ export default defineComponent({
},
methods: {
updateLayout(widgetId: bigint, value: unknown) {
this.editor.instance.update_layout(this.layoutTarget, widgetId, value);
this.editor.instance.updateLayout(this.layoutTarget, widgetId, value);
},
withoutValue(props: Record<string, unknown>): Record<string, unknown> {
const { value: _, ...rest } = props;

2
frontend/src/components/widgets/groups/WidgetSection.vue
View File

@@ -94,7 +94,7 @@ const WidgetSection = defineComponent({
}),
methods: {
updateLayout(widgetId: bigint, value: unknown) {
this.editor.instance.update_layout(this.layoutTarget, widgetId, value);
this.editor.instance.updateLayout(this.layoutTarget, widgetId, value);
},
layoutGroupType(layoutGroup: LayoutGroup): unknown {
if (isWidgetRow(layoutGroup)) return WidgetRow;

4
frontend/src/components/widgets/inputs/MenuBarInput.vue
View File

@@ -24,7 +24,7 @@
:direction="'Bottom'"
:minWidth="240"
:drawIcon="true"
:defaultAction="() => editor.instance.request_coming_soon_dialog()"
:defaultAction="() => editor.instance.requestComingSoonDialog()"
:ref="(ref: typeof MenuList) => ref && (entry.ref = ref)"
/>
</div>
@@ -111,7 +111,7 @@ export default defineComponent({
group.map((entry) => ({
...entry,
children: entry.children ? menuEntryToFrontendMenuEntry(entry.children) : undefined,
action: (): void => this.editor.instance.update_layout(updateMenuBarLayout.layout_target, entry.action.widgetId, undefined),
action: (): void => this.editor.instance.updateLayout(updateMenuBarLayout.layoutTarget, entry.action.widgetId, undefined),
shortcutRequiresLock: entry.shortcut ? shortcutRequiresLock(entry.shortcut.keys) : undefined,
}))
);

4
frontend/src/components/widgets/inputs/SwatchPairInput.vue
View File

@@ -105,11 +105,11 @@ export default defineComponent({
},
primaryColorChanged(color: RGBA) {
const newColor = rgbaToDecimalRgba(color);
this.editor.instance.update_primary_color(newColor.r, newColor.g, newColor.b, newColor.a);
this.editor.instance.updatePrimaryColor(newColor.r, newColor.g, newColor.b, newColor.a);
},
secondaryColorChanged(color: RGBA) {
const newColor = rgbaToDecimalRgba(color);
this.editor.instance.update_secondary_color(newColor.r, newColor.g, newColor.b, newColor.a);
this.editor.instance.updateSecondaryColor(newColor.r, newColor.g, newColor.b, newColor.a);
},
},
});

2
frontend/src/components/window/status-bar/StatusBar.vue
View File

@@ -70,7 +70,7 @@ export default defineComponent({
},
mounted() {
this.editor.subscriptions.subscribeJsMessage(UpdateInputHints, (updateInputHints) => {
this.hintData = updateInputHints.hint_data;
this.hintData = updateInputHints.hintData;
});
},
components: {

4
frontend/src/components/window/workspace/Panel.vue
View File

@@ -252,10 +252,10 @@ export default defineComponent({
},
methods: {
newDocument() {
this.editor.instance.new_document_dialog();
this.editor.instance.newDocumentDialog();
},
openDocument() {
this.editor.instance.document_open();
this.editor.instance.documentOpen();
},
platformModifiers(reservedKey: boolean): KeysGroup {
// TODO: Remove this by properly feeding these keys from a layout provided by the backend

4
frontend/src/components/window/workspace/Workspace.vue
View File

@@ -8,8 +8,8 @@
:tabCloseButtons="true"
:tabMinWidths="true"
:tabLabels="portfolio.state.documents.map((doc) => doc.displayName)"
:clickAction="(tabIndex) => editor.instance.select_document(portfolio.state.documents[tabIndex].id)"
:closeAction="(tabIndex) => editor.instance.close_document_with_confirmation(portfolio.state.documents[tabIndex].id)"
:clickAction="(tabIndex) => editor.instance.selectDocument(portfolio.state.documents[tabIndex].id)"
:closeAction="(tabIndex) => editor.instance.closeDocumentWithConfirmation(portfolio.state.documents[tabIndex].id)"
:tabActiveIndex="portfolio.state.activeDocumentIndex"
ref="documentsPanel"
/>