Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fixes LUNA-218 text port id casing #378

Merged
merged 1 commit into from
Mar 22, 2024
Merged

fixes LUNA-218 text port id casing #378

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions packages/app/src/components/LoopControllerNodePorts.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,8 @@ import { useStableCallback } from '../hooks/useStableCallback.js';
import { Port } from './Port.js';
import { useDependsOnPlugins } from '../hooks/useDependsOnPlugins';
import { type DraggingWireDef } from '../state/graphBuilder';
import { useRecoilValue } from 'recoil';
import { preservePortTextCaseState } from '../state/settings.js';

export type NodePortsProps = {
node: ChartNode;
Expand Down Expand Up @@ -54,6 +56,8 @@ export const LoopControllerNodePorts: FC<NodePortsProps> = ({
}) => {
const { inputDefinitions, outputDefinitions } = useNodeIO(node.id)!;

const preservePortTextCase = useRecoilValue(preservePortTextCaseState);

const handlePortMouseDown = useStableCallback((event: MouseEvent<HTMLDivElement>, port: PortId, isInput: boolean) => {
event.stopPropagation();
event.preventDefault();
Expand Down Expand Up @@ -105,6 +109,7 @@ export const LoopControllerNodePorts: FC<NodePortsProps> = ({
(draggingWire?.endNodeId === node.id && draggingWire?.endPortId === input.id);
return (
<Port
preservePortCase={preservePortTextCase}
title={input.title}
id={input.id}
input
Expand Down Expand Up @@ -132,6 +137,7 @@ export const LoopControllerNodePorts: FC<NodePortsProps> = ({
(draggingWire?.startNodeId === node.id && draggingWire?.startPortId === output.id);
return (
<Port
preservePortCase={preservePortTextCase}
title={output.title}
id={output.id}
connected={connected}
Expand Down Expand Up @@ -165,6 +171,7 @@ export const LoopControllerNodePorts: FC<NodePortsProps> = ({
(draggingWire?.endNodeId === node.id && draggingWire?.endPortId === input.id);
return (
<Port
preservePortCase={preservePortTextCase}
title={input.title}
id={input.id}
input
Expand Down Expand Up @@ -196,6 +203,7 @@ export const LoopControllerNodePorts: FC<NodePortsProps> = ({
(draggingWire?.startNodeId === node.id && draggingWire?.startPortId === output.id);
return (
<Port
preservePortCase={preservePortTextCase}
title={output.title}
id={output.id}
connected={connected}
Expand Down
5 changes: 5 additions & 0 deletions packages/app/src/components/NodePorts.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,8 @@ import { ErrorBoundary } from 'react-error-boundary';
import { useDependsOnPlugins } from '../hooks/useDependsOnPlugins';
import { LoopControllerNodePorts } from './LoopControllerNodePorts';
import { type DraggingWireDef } from '../state/graphBuilder';
import { useRecoilState, useRecoilValue } from 'recoil';
import { preservePortTextCaseState } from '../state/settings.js';

export type NodePortsProps = {
node: ChartNode;
Expand Down Expand Up @@ -64,6 +66,7 @@ export const NodePorts: FC<NodePortsProps> = ({
onPortMouseOut,
}) => {
const { inputDefinitions, outputDefinitions } = useNodeIO(node.id)!;
const preservePortTextCase = useRecoilValue(preservePortTextCaseState);

const handlePortMouseDown = useStableCallback((event: MouseEvent<HTMLDivElement>, port: PortId, isInput: boolean) => {
event.stopPropagation();
Expand All @@ -88,6 +91,7 @@ export const NodePorts: FC<NodePortsProps> = ({
<Port
title={input.title}
id={input.id}
preservePortCase={preservePortTextCase}
input
connected={connected}
key={`input-${input.id}`}
Expand All @@ -111,6 +115,7 @@ export const NodePorts: FC<NodePortsProps> = ({
(draggingWire?.startNodeId === node.id && draggingWire?.startPortId === output.id);
return (
<Port
preservePortCase={preservePortTextCase}
title={output.title}
id={output.id}
connected={connected}
Expand Down
4 changes: 3 additions & 1 deletion packages/app/src/components/Port.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ export const Port: FC<{
connected?: boolean;
canDragTo: boolean;
closest: boolean;
preservePortCase?: boolean;
definition: NodeInputDefinition | NodeOutputDefinition;
draggingDataType?: DataType | Readonly<DataType[]>;
onMouseDown?: (event: MouseEvent<HTMLDivElement>, port: PortId, isInput: boolean) => void;
Expand Down Expand Up @@ -52,6 +53,7 @@ export const Port: FC<{
onMouseUp,
onMouseOver,
onMouseOut,
preservePortCase,
}) => {
const ref = useRef<HTMLDivElement>(null);

Expand Down Expand Up @@ -114,7 +116,7 @@ export const Port: FC<{
>
{canDragTo && <div className={clsx('port-hover-area')} />}
</div>
<div className="port-label" onMouseOver={handleMouseOver} onMouseOut={handleMouseOut}>
<div className={clsx("port-label", preservePortCase ? "" : "port-label-uppercase")} onMouseOver={handleMouseOver} onMouseOut={handleMouseOut}>
{title}
</div>
</div>
Expand Down
18 changes: 18 additions & 0 deletions packages/app/src/components/SettingsModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import {
checkForUpdatesState,
defaultExecutorState,
executorOptions,
preservePortTextCaseState,
previousDataPerNodeToKeepState,
recordExecutionsState,
settingsState,
Expand Down Expand Up @@ -123,6 +124,7 @@ export const GeneralSettingsPage: FC = () => {
const [defaultExecutor, setDefaultExecutor] = useRecoilState(defaultExecutorState);
const [previousDataPerNodeToKeep, setPreviousDataPerNodeToKeep] = useRecoilState(previousDataPerNodeToKeepState);
const [zoomSensitivity, setZoomSensitivity] = useRecoilState(zoomSensitivityState);
const [preservePortTextCase, setPreservePortTextCase] = useRecoilState(preservePortTextCaseState);

return (
<div css={fields}>
Expand All @@ -135,6 +137,22 @@ export const GeneralSettingsPage: FC = () => {
/>
)}
</Field>
<Field name="preserve-port-text-case" label="Preserve text case for node ports">
{() => (
<>
<Toggle
id="check-for-updates"
isChecked={preservePortTextCase}
onChange={(e) => {
setPreservePortTextCase(e.target.checked);
}}
/>
<HelperMessage>
This WILL preserve the text fromat of the node port names. e.g. `newInputPort` will be shown instead of `NEWINPUTPORT` when enabled
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
This WILL preserve the text fromat of the node port names. e.g. `newInputPort` will be shown instead of `NEWINPUTPORT` when enabled
This WILL preserve the text format of the node port names. e.g. `newInputPort` will be shown instead of `NEWINPUTPORT` when enabled

</HelperMessage>
</>
)}
</Field>
<Field name="recording-speed" label="Recording delay between chats (ms)">
{() => (
<>
Expand Down
5 changes: 4 additions & 1 deletion packages/app/src/components/nodeStyles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -240,10 +240,13 @@ export const nodeStyles = css`
position: relative;
}

.port-label-uppercase {
text-transform: uppercase;
}

.port-label {
color: var(--grey-lighter);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 1px;
margin: 0 4px;
white-space: nowrap;
Expand Down
6 changes: 6 additions & 0 deletions packages/app/src/state/settings.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,12 @@ export const previousDataPerNodeToKeepState = atom<number>({
effects: [persistAtom],
});

export const preservePortTextCaseState = atom<boolean>({
key: 'preservePortTextCase',
default: false,
effects: [persistAtom],
});

export const checkForUpdatesState = atom<boolean>({
key: 'checkForUpdates',
default: true,
Expand Down
Loading