Pien-Studio/apps/web/hooks/use-editor-bindings.ts

import React from "react";
import { useShallow } from "zustand/react/shallow";
import { useEditorStore } from "../store/editor-store";

export function useEditorBindings() {
  const state = useEditorStore(
    useShallow((s) => ({
      project: s.project,
      selectedLayerId: s.selectedLayerId,
      canUndo: s.canUndo,
      canRedo: s.canRedo,
      history: s.history,
      isDirty: s.isDirty,
      tool: s.tool,
    })),
  );

  const bindings = useEditorStore(
    useShallow((s) => ({
      loadProjectById: s.loadProjectById,
      setProject: s.setProject,
      saveCurrentProject: s.saveCurrentProject,
      selectLayer: s.selectLayer,
      setSelectedLayerPosition: s.setSelectedLayerPosition,
      setSelectedLayerPositionDraft: s.setSelectedLayerPositionDraft,
      setSelectedLayerSize: s.setSelectedLayerSize,
      setSelectedLayerSizeDraft: s.setSelectedLayerSizeDraft,
      setSelectedLayerRotation: s.setSelectedLayerRotation,
      setSelectedLayerRotationDraft: s.setSelectedLayerRotationDraft,
      startTransaction: s.startTransaction,
      commitTransaction: s.commitTransaction,
      removeSelectedLayer: s.removeSelectedLayer,
      addLayerByType: s.addLayerByType,
      moveSelectedLayerOrder: s.moveSelectedLayerOrder,
      addCanvasSizedLayer: s.addCanvasSizedLayer,
      importImageFromFile: s.importImageFromFile,
      updateImageLayerSource: s.updateImageLayerSource,
      setLayerEffect: s.setLayerEffect,
      removeLayerEffect: s.removeLayerEffect,
      setLayerVisible: s.setLayerVisible,
      setEffectEnabled: s.setEffectEnabled,
      setCanvasSize: s.setCanvasSize,
      setTool: s.setTool,
      undo: s.undo,
      redo: s.redo,
      exportProjectToJson: s.exportProjectToJson,
      jumpToPast: s.jumpToPast,
      jumpToFuture: s.jumpToFuture,
      copySelectedLayer: s.copySelectedLayer,
      cutSelectedLayer: s.cutSelectedLayer,
      pasteLayer: s.pasteLayer,
    })),
  );

  const selectedLayer = React.useMemo(
    () =>
      state.project.layers.find(
        (layer) => layer.id === state.selectedLayerId,
      ) ?? null,
    [state.project.layers, state.selectedLayerId],
  );

  return { state: { ...state, selectedLayer }, actions: bindings };
}