add more interaction tests

.github/workflows/test-ui.yaml → .github/workflows/build-and-test.yaml

@@ -1,11 +1,34 @@
-name: UI Tests
+name: Build and Test
 
 on:
   pull_request:
     branches:
       - main
 
 jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "24.x"
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Run build
+        run: pnpm build
+
+      - name: Run tsc check
+        run: pnpm tsc --project tsconfig.json
+
   test:
     runs-on: ubuntu-latest
     container:
@@ -27,5 +50,8 @@ jobs:
       - name: Install dependencies
         run: pnpm install
 
-      - name: Run tests
+      - name: Run unit tests
+        run: pnpm test
+
+      - name: Run UI tests
         run: pnpm test-storybook

README.md

@@ -1,5 +1,9 @@
 # React Paint
 
+[![npm version](https://img.shields.io/npm/v/@yorab/react-paint)](https://www.npmjs.com/package/@yorab/react-paint)
+[![License: MIT](https://img.shields.io/npm/l/@yorab/react-paint)](https://github.com/YoRab/react-paint-editor/blob/main/LICENSE.txt)
+[![Build and Test](https://github.com/YoRab/react-paint-editor/actions/workflows/build-and-test.yaml/badge.svg)](https://github.com/YoRab/react-paint-editor/actions/workflows/build-and-test.yaml)
+
 An open-source canvas-based library for React used for image annotation or as a digital whiteboard.
 
 ## Features

src/canvas/utils/shapes/line.ts

@@ -118,7 +118,7 @@ export const buildTriangleOnLine = (center: Point, rotation: number, lineStyle:
 export const drawLine = (ctx: CanvasRenderingContext2D, shape: ShapeEntity<'line'>): void => {
   drawPathWithFillAndStroke(ctx, shape.path, shape.style)
   for (const arrow of shape.arrows ?? []) {
-    updateCanvasContext(ctx, arrow.style)
+    updateCanvasContext(ctx, { ...arrow.style, opacity: 100 })
     drawTriangle(ctx, arrow)
   }
 }

src/canvas/utils/shapes/picture.ts

@@ -42,7 +42,10 @@ const createPictureShape = (
       height,
       ratio: height === 0 ? 1 : width / height,
       src: storedSrc,
-      img
+      img,
+      style: {
+        opacity: 100
+      }
     },
     settings
   )

src/editor/components/settings/SettingsBar.tsx

@@ -142,6 +142,7 @@ const SettingsItems = ({
             disabled={disabled}
             field='fontBold'
             icon={boldIcon}
+            title='Gras'
             valueChanged={handleShapeFontFamilyChange}
             values={selectedShapeTool.settings.fontBold.values}
             value={selectedShape.style?.fontBold}
@@ -154,6 +155,7 @@ const SettingsItems = ({
             disabled={disabled}
             field='fontItalic'
             icon={italicIcon}
+            title='Italique'
             valueChanged={handleShapeFontFamilyChange}
             values={selectedShapeTool.settings.fontItalic.values}
             value={selectedShape.style?.fontItalic}
@@ -275,6 +277,7 @@ const SettingsItems = ({
           disabled={disabled}
           field='fontBold'
           icon={boldIcon}
+          title='Gras'
           valueChanged={handleShapeFontFamilyChange}
           values={activeTool.settings.fontBold.values}
           value={activeTool.settings.fontBold.default}
@@ -287,6 +290,7 @@ const SettingsItems = ({
           disabled={disabled}
           field='fontItalic'
           icon={italicIcon}
+          title='Italique'
           valueChanged={handleShapeFontFamilyChange}
           values={activeTool.settings.fontItalic.values}
           value={activeTool.settings.fontItalic.default}

src/editor/components/settings/ToggleField.tsx

@@ -8,12 +8,13 @@ type ShapeStyleSelectType = {
   disabled?: boolean | undefined
   field: string
   icon: string
+  title?: string
   values: boolean[]
   value?: boolean | undefined
   valueChanged: (field: string, value: boolean) => void
 }
 
-const ToggleField = ({ setSelectedSettings, disabled = false, field, icon, values, value = false, valueChanged }: ShapeStyleSelectType) => {
+const ToggleField = ({ setSelectedSettings, disabled = false, field, icon, title, values, value = false, valueChanged }: ShapeStyleSelectType) => {
   const [customKey] = useState(uniqueId('settings_'))
 
   const handleClick = () => {
@@ -25,7 +26,7 @@ const ToggleField = ({ setSelectedSettings, disabled = false, field, icon, value
 
   if (values.length !== 2) return null
 
-  return <Button onClick={handleClick} selected={value} disabled={disabled} icon={icon} />
+  return <Button onClick={handleClick} selected={value} disabled={disabled} icon={icon} title={title} />
 }
 
 export default ToggleField