dirty

.gitignore

@@ -23,6 +23,8 @@ dist-ssr
 *.sln
 *.sw?
 
+misc
+
 .env
 
 .npmrc

packages/component/src/atom/HistoryAtom.ts

@@ -24,6 +24,8 @@ const CurrentHistoryAtom = atom((get) => {
   return get(HistoryAtom)[get(PointerAtom)];
 });
 
+const DirtyAtom = atom<boolean>(false);
+
 /**
  * Read history for debug and testing
  */
@@ -69,13 +71,15 @@ export const PushHistoryAtom = atom(null, (get, set, item: HistoryItem) => {
   history.push(newItem);
   set(HistoryAtom, history);
   set(PointerAtom, history.length - 1);
+  set(DirtyAtom, true);
 });
 
 const RestoreHistoryAtom = atom(null, (get, set) => {
   const item = get(CurrentHistoryAtom);
   if (item.report) {
     const report = JSON.parse(item.report);
     set(RestoreReportAtom, report);
+    set(DirtyAtom, true);
   }
 });
 
@@ -98,3 +102,8 @@ export const RedoHistoryAtom = atom(null, (get, set) => {
   set(RestoreHistoryAtom);
 });
 
+export const ClearDirtyAtom = atom(null, (_, set) => {
+  set(DirtyAtom, false);
+});
+
+export const ReadDirtyAtom = atom((get) => get(DirtyAtom));

packages/component/src/atom/ReportAtom.ts

@@ -23,7 +23,7 @@ import {
   updateLayerName,
   updateLayerShapes, UnitType
 } from '@sunvisor/super-leopard-core';
-import { ClearHistoryAtom, PushHistoryAtom } from './HistoryAtom';
+import { ClearDirtyAtom, ClearHistoryAtom, PushHistoryAtom } from './HistoryAtom';
 
 const emptyReport: ReportData = {
   page: {
@@ -74,6 +74,7 @@ export const SetReportAtom = atom(null, (_, set, report: ReportData, activeLayer
   set(PushHistoryAtom, {
     report,
   });
+  set(ClearDirtyAtom);
   set(ScaleAtom, createScale(report.page.unit, report.page.margin));
 });
 

packages/component/src/component/index.ts

@@ -4,5 +4,7 @@ export type ImageListData = {
 }
 import ReportEditor, {ReportId, OnSaveHandler} from './reportEditor/ReportEditor';
 import Report from './report/report/Report';
+import useReportStates from './reportEditor/hooks/useReportStates';
 export { ReportEditor, Report }
 export type { ReportId, OnSaveHandler }
+export { useReportStates }

packages/component/src/component/reportEditor/ReportEditor.stories.tsx

@@ -18,23 +18,46 @@ import { testImageListData } from '../../__test_assets__';
 import { fn } from '@storybook/test';
 import { testSettings } from '../../__test_assets__/settings';
 import { billTestData, en } from '@sunvisor/super-leopard-test-assets';
+import NoteAddIcon from '@mui/icons-material/NoteAdd';
+import FileOpenIcon from '@mui/icons-material/FileOpen';
+import useReportStates from './hooks/useReportStates';
+import { useEffect } from 'react';
 
 
 type Story = StoryObj<typeof ReportEditor>
 
 const store = createStore();
 
+// test for useReportStates
+function Flame({ children } : { children: any}) {
+  const {report, dirty} = useReportStates();
+  useEffect(() => {
+    console.log('report', report);
+    console.log('dirty', dirty);
+  }, [report ,dirty]);
+
+  return (
+    <>
+      {children}
+    </>
+  );
+}
+
 const meta: Meta<typeof ReportEditor> = {
   component: ReportEditor,
   title: 'component/reportEditor/ReportEditor',
   decorators: [
     (Story) => {
       store.set(SetReportAtom, emptyReport);
+
+
       return (
 
         <Provider store={store}>
           <div data-testid="test">
-            <Story/>
+            <Flame>
+              <Story/>
+            </Flame>
           </div>
         </Provider>
       );
@@ -84,6 +107,27 @@ export const Empty: Story = {
   }
 }
 
+export const AdditionalTools: Story = {
+  args: {
+    title: 'Empty',
+    reportId: 1,
+    language: 'ja',
+    additionalTools: {
+      before: <NoteAddIcon />,
+      after: <FileOpenIcon />,
+    }
+  }
+}
+
+export const HideSaveButton: Story = {
+  args: {
+    title: 'Empty',
+    reportId: 1,
+    language: 'ja',
+    showSaveButton: false,
+  }
+}
+
 export const AnotherSettings: Story = {
   args: {
     title: 'Bill',

packages/component/src/component/reportEditor/ReportEditor.tsx

@@ -4,7 +4,7 @@
  * Created by sunvisor on 2024/03/06.
  * Copyright (C) Sunvisor Lab. 2024.
  */
-import React, { useCallback, useEffect, useState } from "react";
+import React, { ReactNode, useCallback, useEffect, useState } from "react";
 import { AppBar, Box } from '@mui/material';
 import ReportWorkArea from '../reportEditor/ReportWorkArea';
 import EditToolbar from '../toolbar/EditToolbar';
@@ -19,6 +19,7 @@ import SidePanel from './side/SidePanel';
 import { setLanguage } from '../../captions/getCaptions';
 import { setSettings, SettingData } from '../../settings';
 
+
 export type OnSaveHandler = (id: ReportId, title: string, report: ReportData) => void;
 export type ReportId = number | 'new';
 
@@ -29,6 +30,11 @@ type Props = {
   language?: string;
   onSave: OnSaveHandler;
   settings?: SettingData;
+  showSaveButton?: boolean;
+  additionalTools?: {
+    before?: ReactNode;
+    after?: ReactNode;
+  }
 }
 
 export default function ReportEditor(props: Props) {
@@ -67,13 +73,15 @@ export default function ReportEditor(props: Props) {
   }, [applyShapes, onSave, title, report, clearSelection]);
 
   return (
-    <Box sx={{ width: '100vw', height: '100vh', padding: 0 }}>
+    <Box sx={{ width: '100%', height: '100%', padding: 0 }}>
       <AppBar position="sticky">
         <EditToolbar
           title={title}
           onSave={handleSave}
           onChangeTitle={handleChangeTitle}
           onPropertyOpen={() => setOpen(true)}
+          additionalTools={props.additionalTools}
+          showSaveButton={props.showSaveButton}
         />
       </AppBar>
       <Box sx={{ width: '100%', height: '100%', padding: 0, display: 'flex' }}>

packages/component/src/component/reportEditor/hooks/useReportStates.test.ts

@@ -0,0 +1,45 @@
+/**
+ * Test for UseReportStates
+ *
+ * Created by sunvisor on 2025/03/05.
+ * Copyright (C) Sunvisor Lab. 2025.
+ */
+import { renderHook, act } from '@testing-library/react';
+import { useSetAtom } from 'jotai';
+import { SetReportAtom, SetShapesAtom } from '../../../atom/ReportAtom';
+import { ClearDirtyAtom } from '../../../atom/HistoryAtom';
+import useReportStates from './useReportStates';
+import { billTestData, shapeTestData } from '@sunvisor/super-leopard-test-assets';
+import { createShapes } from '@sunvisor/super-leopard-core';
+
+describe('Tests for useReportStates', () => {
+  const reportData = billTestData;
+
+  beforeEach(() => {
+    const { result } = renderHook(() => useSetAtom(SetReportAtom));
+    act(() => {
+      result.current(reportData);
+    });
+    renderHook(() => useSetAtom(ClearDirtyAtom));
+  });
+
+  it('Should returns report and dirty state', () => {
+    const { result } = renderHook(() => useReportStates());
+    expect(result.current.report).toEqual(reportData);
+    expect(result.current.dirty).toBe(false);
+  });
+
+  test('Should dirty when shapes changes', () => {
+    const { result } = renderHook(() => useSetAtom(SetShapesAtom));
+    const newShapes = createShapes(shapeTestData);
+    act(() => {
+      result.current(newShapes);
+    });
+
+    const { result: reportStatesResult } = renderHook(() => useReportStates());
+    const newReport = reportStatesResult.current.report;
+    expect(newReport.layers[0].shapes).toEqual(shapeTestData); // should update shapes
+    expect(reportStatesResult.current.dirty).toEqual(true);    // should be dirty
+  });
+
+});

packages/component/src/component/reportEditor/hooks/useReportStates.ts

@@ -0,0 +1,16 @@
+/**
+ * UseReportStates
+ *
+ * Created by sunvisor on 2025/03/05.
+ * Copyright (C) Sunvisor Lab. 2025.
+ */
+import { useAtomValue } from 'jotai';
+import { ReadReportAtom } from '../../../atom/ReportAtom';
+import { ReadDirtyAtom } from '../../../atom/HistoryAtom';
+
+export default function useReportStates() {
+  const report = useAtomValue(ReadReportAtom);
+  const dirty = useAtomValue(ReadDirtyAtom);
+
+  return { report, dirty };
+}

packages/component/src/component/reportEditor/side/SidePanel.tsx

@@ -91,7 +91,7 @@ export default function SidePanel(props: Props) {
         <Tab label={captions.layer} value={1}/>
         <Tab label={captions.object} value={2}/>
       </Tabs>
-      <Box sx={{ width: 430, height: '100vw', overflow: 'scroll' }}>
+      <Box sx={{ width: 430, height: '100vw', overflow: 'auto' }}>
         {
           tabIndex === 0 && <PropertyTab
             mode={mode}

packages/component/src/component/toolbar/EditToolbar.stories.tsx

@@ -9,6 +9,8 @@
 import EditToolbar from "./EditToolbar";
 import { Meta, StoryObj } from '@storybook/react';
 import { fn } from '@storybook/test';
+import FileOpenIcon from '@mui/icons-material/FileOpen';
+import NoteAddIcon from '@mui/icons-material/NoteAdd';
 
 
 type Story = StoryObj<typeof EditToolbar>
@@ -28,4 +30,49 @@ export const Normal: Story = {
   }
 };
 
+export const Before: Story = {
+  args: {
+    title: 'Title',
+    additionalTools: {
+      before: <><NoteAddIcon /><FileOpenIcon /></>,
+    },
+  }
+}
+
+export const BeforeAfter: Story = {
+  args: {
+    title: 'Title',
+    additionalTools: {
+      before: <NoteAddIcon />,
+      after: <FileOpenIcon />,
+    },
+  }
+};
+
+export const After: Story = {
+  args: {
+    title: 'Title',
+    additionalTools: {
+      after: <><NoteAddIcon /><FileOpenIcon /></>,
+    },
+  }
+}
+
+export const HideSaveButton: Story = {
+  args: {
+    title: 'Title',
+    showSaveButton: false,
+  }
+}
+
 export default meta;
+export const HideSaveButtonAndAfter: Story = {
+  args: {
+    title: 'Title',
+    showSaveButton: false,
+    additionalTools: {
+      after: <><NoteAddIcon /><FileOpenIcon /></>,
+    },
+  }
+}
+

packages/component/src/component/toolbar/EditToolbar.tsx

@@ -4,7 +4,7 @@
  * Created by sunvisor on 2024/02/02.
  * Copyright (C) Sunvisor Lab. 2024.
  */
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { Box, Divider, IconButton, Input, Toolbar, Tooltip } from "@mui/material";
 import SaveIcon from '@mui/icons-material/Save';
 import ListAltIcon from '@mui/icons-material/ListAlt';
@@ -16,10 +16,16 @@ type Props = {
   onSave: (event: React.MouseEvent<HTMLElement>) => void;
   onPropertyOpen: (event: React.MouseEvent<HTMLElement>) => void;
   onChangeTitle: (title: string) => void;
+  showSaveButton?: boolean;
+  additionalTools?: {
+    before?: ReactNode;
+    after?: ReactNode;
+  }
 }
 
 export default function EditToolbar(props: Props) {
   const [title, setTitle] = React.useState<string>(props.title);
+  const showSaveButton = props.showSaveButton !== undefined ? props.showSaveButton : true;
   const captions = getCaptions().editTool;
   const [editTitle, setEditTitle] = React.useState<boolean>(false);
 
@@ -50,12 +56,22 @@ export default function EditToolbar(props: Props) {
 
   return (
     <Toolbar variant="dense">
-      <Tooltip title={captions.save}>
-        <IconButton size="small" color="inherit" onClick={props.onSave} aria-label={captions.save}>
-          <SaveIcon/>
-        </IconButton>
-      </Tooltip>
-      <Divider orientation="vertical" variant="middle" flexItem sx={{ ml: 2 }}/>
+      {
+        props.additionalTools?.before && props.additionalTools.before
+      }
+      {
+        showSaveButton && <Tooltip title={captions.save}>
+          <IconButton size="small" color="inherit" onClick={props.onSave} aria-label={captions.save}>
+            <SaveIcon/>
+          </IconButton>
+        </Tooltip>
+      }
+      {
+        props.additionalTools?.after && props.additionalTools.after
+      }
+      {
+        (showSaveButton || props.additionalTools) && <Divider orientation="vertical" variant="middle" flexItem sx={{ ml: 2 }}/>
+      }
       <Tooltip title={captions.rename}>
         <IconButton size="small" color="inherit" onClick={handleEdit} aria-label={captions.rename}>
           <DriveFileRenameOutlineIcon />