github/InvokeAI
1
1
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI.git synced 2026-02-13 13:55:08 -05:00
Code Issues Packages Projects Releases Wiki Activity

Revert "build(ui): adopt sonda over rollup-plugin-visualizer to examine bundle"

Browse Source 
This reverts commit e0cf2a8046.
This commit is contained in:
psychedelicious
2025-06-25 22:40:58 +10:00
parent 14f7c98e8a
commit 504daa0ae5
10 changed files with 70 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
invokeai/frontend/web/src/common/components/ColorPicker/RgbColorPicker.tsx
View File

@@ -4,8 +4,8 @@ import { RGB_COLOR_SWATCHES } from 'common/components/ColorPicker/swatches';
import { rgbColorToString } from 'common/util/colorCodeTransformers';
import type { CSSProperties } from 'react';
import { memo, useCallback } from 'react';
import type { RgbColor } from 'react-colorful';
import { RgbColorPicker as ColorfulRgbColorPicker } from 'react-colorful';
import type { RgbColor } from 'react-colorful/dist/types';
import { useTranslation } from 'react-i18next';
type Props = {

2
invokeai/frontend/web/src/common/components/ColorPicker/RgbaColorPicker.tsx
View File

@@ -4,8 +4,8 @@ import { RGBA_COLOR_SWATCHES } from 'common/components/ColorPicker/swatches';
import { rgbaColorToString } from 'common/util/colorCodeTransformers';
import type { CSSProperties } from 'react';
import { memo, useCallback } from 'react';
import type { RgbaColor } from 'react-colorful';
import { RgbaColorPicker as ColorfulRgbaColorPicker } from 'react-colorful';
import type { RgbaColor } from 'react-colorful/dist/types';
import { useTranslation } from 'react-i18next';
type Props = {

58
invokeai/frontend/web/src/common/components/Picker/Picker.tsx
View File

@@ -14,8 +14,9 @@ import { useStore } from '@nanostores/react';
import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent';
import { typedMemo } from 'common/util/typedMemo';
import { NO_DRAG_CLASS, NO_WHEEL_CLASS } from 'features/nodes/types/constants';
import type { ReadableAtom, WritableAtom } from 'nanostores';
import type { AnyStore, ReadableAtom, Task, WritableAtom } from 'nanostores';
import { atom, computed } from 'nanostores';
import type { StoreValues } from 'nanostores/computed';
import type { ChangeEvent, MouseEventHandler, PropsWithChildren, RefObject } from 'react';
import React, {
createContext,
@@ -471,6 +472,17 @@ const useKeyboardNavigation = <T extends object>() => {
return keyboardNavProps;
};
const useAtom = <T,>(initialValue: T) => {
return useState(() => atom<T>(initialValue))[0];
};
const useComputed = <Value, OriginStores extends AnyStore[]>(
stores: [...OriginStores],
cb: (...values: StoreValues<OriginStores>) => Task<Value> | Value
) => {
return useState(() => computed(stores, cb))[0];
};
const countOptions = <T extends object>(optionsOrGroups: OptionOrGroup<T>[]) => {
let count = 0;
for (const optionOrGroup of optionsOrGroups) {
@@ -503,20 +515,18 @@ export const Picker = typedMemo(<T extends object>(props: PickerProps<T>) => {
const rootRef = useRef<HTMLDivElement>(null);
const inputRef = useRef<HTMLInputElement>(null);
const { $groupStatusMap, $areAllGroupsDisabled, toggleGroup } = useTogglableGroups(optionsOrGroups);
const $activeOptionId = useState(() => atom(getFirstOptionId(optionsOrGroups, getOptionId)))[0];
const $compactView = useState(() => atom(true))[0];
const $optionsOrGroups = useState(() => atom(optionsOrGroups))[0];
const $totalOptionCount = useState(() => computed([$optionsOrGroups], countOptions))[0];
const $filteredOptions = useState(() => atom<OptionOrGroup<T>[]>([]))[0];
const $flattenedFilteredOptions = useState(() => computed([$filteredOptions], flattenOptions))[0];
const $hasOptions = useState(() => computed([$totalOptionCount], (count) => count > 0))[0];
const $filteredOptionsCount = useState(() => computed([$flattenedFilteredOptions], (options) => options.length))[0];
const $hasFilteredOptions = useState(() => computed([$filteredOptionsCount], (count) => count > 0))[0];
const $selectedItem = useState(() => atom<T | undefined>(undefined))[0];
const $searchTerm = useState(() => atom(''))[0];
const $selectedItemId = useState(() =>
computed([$selectedItem], (item) => (item ? getOptionId(item) : undefined))
)[0];
const $activeOptionId = useAtom(getFirstOptionId(optionsOrGroups, getOptionId));
const $compactView = useAtom(true);
const $optionsOrGroups = useAtom(optionsOrGroups);
const $totalOptionCount = useComputed([$optionsOrGroups], countOptions);
const $filteredOptions = useAtom<OptionOrGroup<T>[]>([]);
const $flattenedFilteredOptions = useComputed([$filteredOptions], flattenOptions);
const $hasOptions = useComputed([$totalOptionCount], (count) => count > 0);
const $filteredOptionsCount = useComputed([$flattenedFilteredOptions], (options) => options.length);
const $hasFilteredOptions = useComputed([$filteredOptionsCount], (count) => count > 0);
const $selectedItem = useAtom<T | undefined>(undefined);
const $searchTerm = useAtom('');
const $selectedItemId = useComputed([$selectedItem], (item) => (item ? getOptionId(item) : undefined));
const onSelectById = useCallback(
(id: string) => {
@@ -799,17 +809,15 @@ SearchInput.displayName = 'SearchInput';
const GroupToggleButtons = typedMemo(<T extends object>() => {
const { $optionsOrGroups, $groupStatusMap, $areAllGroupsDisabled } = usePickerContext<T>();
const { t } = useTranslation();
const $groups = useState(() =>
computed([$optionsOrGroups], (optionsOrGroups) => {
const _groups: Group<T>[] = [];
for (const optionOrGroup of optionsOrGroups) {
if (isGroup(optionOrGroup)) {
_groups.push(optionOrGroup);
}
const $groups = useComputed([$optionsOrGroups], (optionsOrGroups) => {
const _groups: Group<T>[] = [];
for (const optionOrGroup of optionsOrGroups) {
if (isGroup(optionOrGroup)) {
_groups.push(optionOrGroup);
}
return _groups;
})
)[0];
}
return _groups;
});
const groups = useStore($groups);
const areAllGroupsDisabled = useStore($areAllGroupsDisabled);