mirror/FossFLOW
1
0
Fork 0
mirror of https://github.com/stan-smith/FossFLOW.git synced 2025-12-24 06:58:48 -05:00
Code Issues Packages Projects Releases Wiki Activity

refactor: remove unused layer ordering functionality (#118)

Browse Source 
- Remove layer ordering context menu for items
- Delete layer ordering reducer and tests
- Clean up related imports and types
- Layer ordering only worked for rectangles, not main diagram elements

Co-authored-by: Stan <stanleylsmith@pm.me>
This commit is contained in:
Stan
2025-08-27 11:04:11 +00:00
committed by GitHub
parent 556ef4a374
commit b5b28257a5
7 changed files with 3 additions and 246 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
packages/fossflow-lib/src/components/ContextMenu/ContextMenuManager.tsx
View File

@@ -89,48 +89,8 @@ export const ContextMenuManager = ({ anchorEl }: Props) => {
);
}
if (contextMenu.type === 'ITEM' && contextMenu.item) {
return (
<ContextMenu
anchorEl={anchorEl}
onClose={onClose}
position={CoordsUtils.multiply(
getTilePosition({ tile: contextMenu.tile }),
zoom
)}
menuItems={[
{
label: 'Send backward',
onClick: () => {
scene.changeLayerOrder('SEND_BACKWARD', contextMenu.item!);
onClose();
}
},
{
label: 'Bring forward',
onClick: () => {
scene.changeLayerOrder('BRING_FORWARD', contextMenu.item!);
onClose();
}
},
{
label: 'Send to back',
onClick: () => {
scene.changeLayerOrder('SEND_TO_BACK', contextMenu.item!);
onClose();
}
},
{
label: 'Bring to front',
onClick: () => {
scene.changeLayerOrder('BRING_TO_FRONT', contextMenu.item!);
onClose();
}
}
]}
/>
);
}
// Remove ITEM context menu since layer ordering only works for rectangles
// and provides no value for regular diagram items
return null;
};

27
packages/fossflow-lib/src/hooks/useScene.ts
View File

@@ -4,9 +4,7 @@ import {
ViewItem,
Connector,
TextBox,
Rectangle,
ItemReference,
LayerOrderingAction
Rectangle
} from 'src/types';
import { useUiStateStore } from 'src/stores/uiStateStore';
import { useModelStore } from 'src/stores/modelStore';
@@ -468,28 +466,6 @@ export const useScene = () => {
]
);
const changeLayerOrder = useCallback(
(action: LayerOrderingAction, item: ItemReference) => {
if (!model?.actions || !scene?.actions || !currentViewId) return;
saveToHistoryBeforeChange();
const newState = reducers.view({
action: 'CHANGE_LAYER_ORDER',
payload: { action, item },
ctx: { viewId: currentViewId, state: getState() }
});
setState(newState);
},
[
getState,
setState,
currentViewId,
saveToHistoryBeforeChange,
model?.actions,
scene?.actions
]
);
const transaction = useCallback(
(operations: () => void) => {
if (!model?.actions || !scene?.actions) return;
@@ -571,7 +547,6 @@ export const useScene = () => {
createRectangle,
updateRectangle,
deleteRectangle,
changeLayerOrder,
transaction,
placeIcon
};

121
packages/fossflow-lib/src/stores/reducers/__tests__/layerOrdering.test.ts
View File

@@ -1,121 +0,0 @@
import { produce } from 'immer';
import { model as modelFixture } from 'src/fixtures/model';
import { ItemReference } from 'src/types';
import * as reducers from 'src/stores/reducers';
const getModel = () => {
return produce(modelFixture, (draft) => {
draft.views[0].rectangles = [
{
id: 'rect1',
from: { x: 0, y: 0 },
to: { x: 1, y: 1 }
},
{
id: 'rect2',
from: { x: 0, y: 0 },
to: { x: 1, y: 1 }
},
{
id: 'rect3',
from: { x: 0, y: 0 },
to: { x: 1, y: 1 }
}
];
});
};
const scene = {
connectors: {},
textBoxes: {}
};
describe('Layer ordering reducers works correctly', () => {
test('Brings layer forwards correctly', () => {
const model = getModel();
const item: ItemReference = {
type: 'RECTANGLE',
id: 'rect3'
};
const result = reducers.view({
action: 'CHANGE_LAYER_ORDER',
payload: {
action: 'BRING_FORWARD',
item
},
ctx: {
viewId: 'view1',
state: { model, scene }
}
});
expect(result.model.views[0].rectangles?.[1].id).toBe('rect3');
});
test('Brings layer to front correctly', () => {
const model = getModel();
const item: ItemReference = {
type: 'RECTANGLE',
id: 'rect3'
};
const result = reducers.view({
action: 'CHANGE_LAYER_ORDER',
payload: {
action: 'BRING_TO_FRONT',
item
},
ctx: {
viewId: 'view1',
state: { model, scene }
}
});
expect(result.model.views[0].rectangles?.[0].id).toBe('rect3');
});
test('Sends layer backward correctly', () => {
const model = getModel();
const item: ItemReference = {
type: 'RECTANGLE',
id: 'rect1'
};
const result = reducers.view({
action: 'CHANGE_LAYER_ORDER',
payload: {
action: 'SEND_BACKWARD',
item
},
ctx: {
viewId: 'view1',
state: { model, scene }
}
});
expect(result.model.views[0].rectangles?.[1].id).toBe('rect1');
});
test('Sends layer to back correctly', () => {
const model = getModel();
const item: ItemReference = {
type: 'RECTANGLE',
id: 'rect1'
};
const result = reducers.view({
action: 'CHANGE_LAYER_ORDER',
payload: {
action: 'SEND_TO_BACK',
item
},
ctx: {
viewId: 'view1',
state: { model, scene }
}
});
expect(result.model.views[0].rectangles?.[2].id).toBe('rect1');
});
});

40
packages/fossflow-lib/src/stores/reducers/layerOrdering.ts
View File

@@ -1,40 +0,0 @@
import { produce } from 'immer';
import { ItemReference, LayerOrderingAction, View } from 'src/types';
import { getItemByIdOrThrow } from 'src/utils';
import { State, ViewReducerContext } from './types';
export const changeLayerOrder = (
{ action, item }: { action: LayerOrderingAction; item: ItemReference },
{ viewId, state }: ViewReducerContext
): State => {
const newState = produce(state, (draft) => {
const view = getItemByIdOrThrow(draft.model.views, viewId);
let arr: View['rectangles'];
switch (item.type) {
case 'RECTANGLE':
arr = view.value.rectangles ?? [];
break;
default:
throw new Error('Invalid item type');
}
const target = getItemByIdOrThrow(arr, item.id);
if (action === 'SEND_BACKWARD' && target.index < arr.length - 1) {
arr.splice(target.index, 1);
arr.splice(target.index + 1, 0, target.value);
} else if (action === 'SEND_TO_BACK' && target.index !== arr.length - 1) {
arr.splice(target.index, 1);
arr.splice(arr.length, 0, target.value);
} else if (action === 'BRING_FORWARD' && target.index > 0) {
arr.splice(target.index, 1);
arr.splice(target.index - 1, 0, target.value);
} else if (action === 'BRING_TO_FRONT' && target.index !== 0) {
arr.splice(target.index, 1);
arr.splice(0, 0, target.value);
}
});
return newState;
};

5
packages/fossflow-lib/src/stores/reducers/types.ts
View File

@@ -4,7 +4,6 @@ import type * as viewItemReducers from './viewItem';
import type * as connectorReducers from './connector';
import type * as textBoxReducers from './textBox';
import type * as rectangleReducers from './rectangle';
import type * as layerOrderingReducers from './layerOrdering';
export interface State {
model: Model;
@@ -84,10 +83,6 @@ type ViewReducerAction =
| {
action: 'DELETE_RECTANGLE';
payload: Parameters<typeof rectangleReducers.deleteRectangle>[0];
}
| {
action: 'CHANGE_LAYER_ORDER';
payload: Parameters<typeof layerOrderingReducers.changeLayerOrder>[0];
};
export type ViewReducerParams = ViewReducerAction & { ctx: ViewReducerContext };

4
packages/fossflow-lib/src/stores/reducers/view.ts
View File

@@ -9,7 +9,6 @@ import * as viewItemReducers from './viewItem';
import * as connectorReducers from './connector';
import * as textBoxReducers from './textBox';
import * as rectangleReducers from './rectangle';
import * as layerOrderingReducers from './layerOrdering';
export const updateViewTimestamp = (ctx: ViewReducerContext): State => {
const now = new Date().toISOString();
@@ -138,9 +137,6 @@ export const view = ({ action, payload, ctx }: ViewReducerParams) => {
case 'DELETE_RECTANGLE':
newState = rectangleReducers.deleteRectangle(payload, ctx);
break;
case 'CHANGE_LAYER_ORDER':
newState = layerOrderingReducers.changeLayerOrder(payload, ctx);
break;
default:
throw new Error('Invalid action.');
}

8
packages/fossflow-lib/src/types/ui.ts
View File

@@ -133,14 +133,6 @@ export interface ContextMenu {
tile: Coords;
}
export const LayerOrderingActionOptions = {
BRING_TO_FRONT: 'BRING_TO_FRONT',
SEND_TO_BACK: 'SEND_TO_BACK',
BRING_FORWARD: 'BRING_FORWARD',
SEND_BACKWARD: 'SEND_BACKWARD'
} as const;
export type LayerOrderingAction = keyof typeof LayerOrderingActionOptions;
export type ConnectorInteractionMode = 'click' | 'drag';