diff --git a/.github/workflows/deploy-production.yml b/.github/workflows/deploy-production.yml new file mode 100644 index 0000000..4ee0457 --- /dev/null +++ b/.github/workflows/deploy-production.yml @@ -0,0 +1,47 @@ +name: Deploy to Production + +on: + push: + branches: + - main + workflow_dispatch: + +# Ensure we don't run multiple concurrent deployments +concurrency: + group: production-${{ github.ref }} + cancel-in-progress: true + +env: + NODE_VERSION: 20 + +jobs: + deploy-production: + name: Deploy to Vercel Production + runs-on: ubuntu-latest + timeout-minutes: 15 + steps: + - uses: actions/checkout@v4 + + - name: Use Node.js + uses: actions/setup-node@v4 + with: + node-version: ${{ env.NODE_VERSION }} + cache: 'npm' + cache-dependency-path: '**/package-lock.json' + + - name: Install dependencies + run: npm install --prefer-offline --no-audit + + - name: Install Vercel CLI + run: npm install --global vercel@latest + + - name: Build + run: npm run build + + - name: Deploy to Vercel + env: + VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }} + VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }} + VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }} + run: | + vercel deploy --prod --token=$VERCEL_TOKEN diff --git a/.gitignore b/.gitignore index e304dc7..504eecd 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,3 @@ -# Logs logs *.log npm-debug.log* @@ -33,3 +32,5 @@ playwright-report/ test-results/ e2e/screenshots/ *.png +.cursor/ +# Logs \ No newline at end of file diff --git a/README.md b/README.md index a5d914d..4a36152 100644 --- a/README.md +++ b/README.md @@ -77,6 +77,29 @@ npm run dev - `npm run e2e:ci` - Run end-to-end tests with Playwright in CI mode - `npm run e2e` - Run end-to-end tests with Playwright in interactive mode +## Deployment + +The application is automatically deployed to Vercel when changes are pushed to the main branch. + +### Production Deployment +- Production deployment is triggered automatically on pushing to the `main` branch +- The GitHub Actions workflow handles testing and deploying to Vercel +- You can monitor deployment status in the GitHub Actions tab + +### Manual Deployment +To deploy manually: + +1. Install the Vercel CLI: `npm install --global vercel` +2. Log in to Vercel: `vercel login` +3. Run: `vercel` (for preview) or `vercel --prod` (for production) + +### Required Secrets +For the automated deployment to work, add these secrets to your GitHub repository: + +- `VERCEL_TOKEN`: Your Vercel API token +- `VERCEL_ORG_ID`: Your Vercel organization ID +- `VERCEL_PROJECT_ID`: Your Vercel project ID + ## Using the Application ### Drawing Shapes @@ -98,6 +121,11 @@ npm run dev - Functions update in real-time as you enter them - Click on points along the function graph to activate the point info panel with precise coordinates and calculations - Use left/right arrow navigation in the point info panel to move along the function curve with defined step size +- Configure formula parameters with custom ranges and step sizes: + - Set minimum and maximum values for each parameter + - Adjust step size for fine-grained control + - Use sliders for quick parameter adjustments + - Parameters are automatically detected from the formula expression ### Zoom Controls - Use the zoom buttons or keyboard shortcuts to zoom in/out diff --git a/docs/features/smart-function-input/README.md b/docs/features/smart-function-input/README.md new file mode 100644 index 0000000..5e0ca8f --- /dev/null +++ b/docs/features/smart-function-input/README.md @@ -0,0 +1,290 @@ +# Smart Function Input Feature + +## Overview + +The Smart Function Input feature enhances the function plotting capabilities by providing an intuitive interface for entering mathematical functions with automatic parameter detection. This allows users to easily create and manipulate mathematical functions with parameters. + +## User Stories + +### Intuitive Function Input +- As a user, I want to input mathematical functions in a natural way (e.g., "f(x) = ax^2 + bx + c") +- As a user, I want to use standard mathematical notation for functions (e.g., "f(x)", "y =", etc.) +- As a user, I want to easily input exponents using the ^ symbol or superscript +- As a user, I want to input common mathematical functions (sin, cos, sqrt, etc.) +- As a user, I want to see my input formatted in proper mathematical notation + +### Mathematical Input Interface +- As a user, I want to have a GeoGebra-like interface with buttons for mathematical symbols and functions +- As a user, I want to easily insert mathematical operators (+, -, ×, ÷, ^, √, etc.) +- As a user, I want to have quick access to common mathematical functions (sin, cos, tan, log, etc.) +- As a user, I want to be able to both click buttons and type directly into the input field +- As a user, I want the cursor position to be maintained when inserting symbols +- As a user, I want to have the input organized in tabs (Basic, Functions, Operators) for better organization + +### Parameter Detection +- As a user, I want the system to automatically detect parameters in my function (e.g., a, b, c in ax^2 + bx + c) +- As a user, I want to see a list of detected parameters with their current values +- As a user, I want to be able to adjust parameter values using interactive controls +- As a user, I want to see the graph update in real-time as I adjust parameters + +### Input Assistance +- As a user, I want to see suggestions for common mathematical functions as I type +- As a user, I want to see examples of how to input different types of functions +- As a user, I want to be able to use keyboard shortcuts for common mathematical operations +- As a user, I want to see immediate feedback if my input is invalid + +## Implementation Plan + +## Overview +This document outlines the implementation plan for enhancing the function input capabilities in the geometry playground. The goal is to make function input more intuitive and user-friendly while maintaining compatibility with the existing formula system. + +## Implementation Phases + +### Phase 0: Layout Restructuring +1. Move function controls to a dedicated sidebar + - [x] Create a new sidebar component for function controls + - [x] Position the sidebar next to the canvas + - [x] Move formula editor and controls from overlay to sidebar + - [x] Adjust canvas width to accommodate sidebar + - [x] Ensure responsive behavior for different screen sizes + - [x] Update layout to maintain proper spacing and alignment + +2. Update component hierarchy + - [x] Modify GeometryCanvas to accept sidebar as a prop + - [x] Update Index component to handle new layout structure + - [x] Ensure proper state management between components + - [x] Maintain existing functionality during transition + +3. Style and UI improvements + - [x] Design consistent sidebar styling + - [x] Add smooth transitions for sidebar open/close + - [x] Ensure proper z-indexing for all components + - [x] Add responsive breakpoints for mobile views + +### Phase 1: Parameter Detection and Dynamic Controls +1. Parameter Detection + - [x] Create parameter detection utility + - [x] Implement regex-based parameter extraction + - [x] Filter out mathematical function names (sqrt, sin, cos, etc.) + - [x] Handle nested functions and complex expressions + - [x] Add tests for parameter detection + - [x] Set default value of 1 for all detected parameters + +2. Dynamic Slider Creation + - [x] Create reusable slider component + - [x] Implement dynamic slider generation based on parameters + - [x] Add proper styling and layout for sliders + - [x] Ensure accessibility of dynamic controls + - [x] Add tests for slider component and generation + +3. Live Formula Updates + - [x] Implement parameter value state management + - [x] Create formula evaluation with parameter substitution + - [x] Add real-time graph updates when parameters change + - [x] Optimize performance for frequent updates + - [x] Add tests for live updates + +### Phase 2: Formula Management and Customization +1. Formula Options + - [ ] Add formula options button to each formula in the sidebar + - [ ] Create formula options popup dialog + - [ ] Implement parameter configuration UI + - [ ] Add formula naming functionality + - [ ] Store formula-specific settings + - [ ] Add tests for formula options + +2. Formula List Improvements + - [ ] Display formula names in the sidebar list + - [ ] Add formula visibility toggle + - [ ] Implement formula reordering + - [ ] Add formula search/filter + - [ ] Add tests for formula list features + +3. Formula Editor Enhancements + - [ ] Add formula options button to editor + - [ ] Implement formula templates + - [ ] Add formula validation feedback + - [ ] Improve formula input suggestions + - [ ] Add tests for editor features + +### Success Criteria +1. Parameter Detection ✅ + - Correctly identifies parameters in formulas + - Ignores mathematical function names + - Handles complex expressions + - Sets appropriate default values + +2. Dynamic Controls ✅ + - Sliders appear automatically for detected parameters + - Controls are properly styled and accessible + - Sliders have appropriate ranges and step sizes + - UI remains responsive with many parameters + +3. Live Updates ✅ + - Graph updates immediately when parameters change + - Performance remains smooth with multiple formulas + - No visual glitches during updates + - All changes are properly persisted + +4. Formula Management + - Users can name and customize their formulas + - Formula options are easily accessible + - Parameter settings are saved per formula + - Formula list is organized and searchable + - Editor provides helpful suggestions and feedback + +### Technical Considerations +1. Parameter Detection + - Use regex for initial parameter extraction + - Maintain list of mathematical function names to filter + - Consider using a proper math expression parser + - Handle edge cases (e.g., parameters in nested functions) + +2. Dynamic Controls + - Use Shadcn UI components for consistency + - Implement proper state management + - Consider mobile responsiveness + - Handle many parameters gracefully + +3. Performance + - Debounce parameter updates + - Optimize formula evaluation + - Consider using Web Workers for heavy computations + - Implement proper cleanup and memory management + +## Technical Considerations + +### State Management +- Use React Context for global state +- Implement proper state synchronization +- Handle formula updates efficiently +- Maintain undo/redo functionality + +### Performance +- Implement efficient formula evaluation +- Use Web Workers for heavy calculations +- Optimize rendering for large datasets +- Implement proper memoization + +### Accessibility +- Ensure keyboard navigation +- Add screen reader support +- Implement proper ARIA labels +- Support high contrast mode + +### Testing +- Add comprehensive unit tests +- Implement integration tests +- Add performance benchmarks +- Test edge cases and error conditions + +## Timeline +- Phase 0: 1-2 weeks +- Phase 1: 2-3 weeks +- Phase 2: 2-3 weeks +- Phase 3: 1-2 weeks + +Total estimated time: 6-10 weeks + +## Success Criteria +1. Users can input functions using standard mathematical notation +2. Functions are displayed accurately on the canvas +3. Multiple functions can be displayed simultaneously +4. Performance remains smooth with complex functions +5. The interface is intuitive and user-friendly +6. All features work responsively on different screen sizes +7. The system maintains compatibility with existing geometry features + +## Technical Details + +### Function Input +The system will support: +- Natural language input (e.g., "f(x) = ax^2 + bx + c") +- Standard mathematical notation +- Exponents using ^ or superscript +- Common mathematical functions (sin, cos, sqrt, etc.) +- Real-time formatting and validation + +### Parameter Detection +The system will identify parameters as: +- Single letters (a, b, c, etc.) +- Greek letters (α, β, γ, etc.) +- Custom parameter names (enclosed in curly braces) + +### Data Structures + +```typescript +// Parameter type for function parameters +interface Parameter { + name: string; + value: number; + min: number; + max: number; + step: number; +} + +// Updated Formula type +interface Formula { + id: string; + name: string; // User-defined name for the formula + expression: string; + substitutedExpression?: string; + parameters?: Parameter[]; + domain: [number, number]; + color: string; + visible: boolean; + createdAt: Date; + updatedAt: Date; + settings?: { + showParameters?: boolean; + parameterRanges?: Record; + customSettings?: Record; + }; +} +``` + +## Testing Plan + +### Unit Tests +- [x] Function input parsing tests +- [x] Parameter detection tests +- [x] Input validation tests +- [x] Formula evaluation tests with parameters +- [ ] Formula options tests +- [ ] Formula naming tests + +### Integration Tests +- [x] Input component integration tests +- [x] Parameter UI integration tests +- [x] Real-time update tests +- [ ] Formula options integration tests +- [ ] Formula list integration tests + +### E2E Tests +- [x] Complete function input workflow +- [x] Parameter adjustment workflow +- [x] Real-time graph update workflow +- [ ] Formula options workflow +- [ ] Formula naming workflow + +## Migration Plan + +1. Add new fields to existing formulas + - [x] Add parameters array (empty by default) + - [x] Add substitutedExpression field + - [ ] Add name field + - [ ] Add settings object + +2. Update formula validation + - [x] Add parameter validation + - [x] Add natural language input validation + - [ ] Add name validation + - [ ] Add settings validation + +3. Update UI components + - [x] Add enhanced formula input + - [x] Add parameter controls + - [x] Add input assistance features + - [ ] Add formula options UI + - [ ] Add formula naming UI + - [ ] Add formula list improvements \ No newline at end of file diff --git a/docs/features/smart-function-input/implementation-example-mathInput.md b/docs/features/smart-function-input/implementation-example-mathInput.md new file mode 100644 index 0000000..77b5fdf --- /dev/null +++ b/docs/features/smart-function-input/implementation-example-mathInput.md @@ -0,0 +1,318 @@ +# Implementation Example: Mathematical Expression Input Interface + +This document shows the implementation of a mathematical expression input interface that provides an intuitive way to input mathematical expressions using buttons and symbols, similar to GeoGebra's approach. + +## MathInput Component + +```typescript +// src/components/MathInput/MathInput.tsx + +import React, { useState, useCallback } from 'react'; +import { Button } from '@/components/ui/button'; +import { Input } from '@/components/ui/input'; +import { Card } from '@/components/ui/card'; +import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'; +import { cn } from '@/lib/utils'; + +interface MathInputProps { + value: string; + onChange: (value: string) => void; + onParameterDetected?: (parameters: string[]) => void; + className?: string; +} + +// Mathematical symbols and functions +const MATH_SYMBOLS = { + basic: [ + { label: '+', value: '+' }, + { label: '-', value: '-' }, + { label: '×', value: '*' }, + { label: '÷', value: '/' }, + { label: '=', value: '=' }, + { label: '(', value: '(' }, + { label: ')', value: ')' }, + { label: ',', value: ',' }, + { label: 'x', value: 'x' }, + { label: 'y', value: 'y' } + ], + functions: [ + { label: 'sin', value: 'sin(' }, + { label: 'cos', value: 'cos(' }, + { label: 'tan', value: 'tan(' }, + { label: '√', value: 'sqrt(' }, + { label: 'log', value: 'log(' }, + { label: 'ln', value: 'ln(' }, + { label: 'exp', value: 'exp(' }, + { label: 'abs', value: 'abs(' } + ], + operators: [ + { label: '^', value: '^' }, + { label: '√', value: 'sqrt(' }, + { label: 'π', value: 'pi' }, + { label: 'e', value: 'e' }, + { label: '∞', value: 'infinity' }, + { label: '±', value: '+-' }, + { label: '≤', value: '<=' }, + { label: '≥', value: '>=' } + ] +}; + +export const MathInput: React.FC = ({ + value, + onChange, + onParameterDetected, + className +}) => { + const [cursorPosition, setCursorPosition] = useState(0); + const inputRef = useRef(null); + + // Handle symbol button click + const handleSymbolClick = useCallback((symbol: string) => { + const newValue = value.slice(0, cursorPosition) + symbol + value.slice(cursorPosition); + onChange(newValue); + setCursorPosition(cursorPosition + symbol.length); + }, [value, cursorPosition, onChange]); + + // Handle input change + const handleInputChange = useCallback((e: React.ChangeEvent) => { + const newValue = e.target.value; + onChange(newValue); + setCursorPosition(e.target.selectionStart || 0); + }, [onChange]); + + // Handle key press + const handleKeyPress = useCallback((e: React.KeyboardEvent) => { + if (e.key === 'Enter') { + e.preventDefault(); + // Trigger parameter detection + const parameters = detectParameters(value); + onParameterDetected?.(parameters); + } + }, [value, onParameterDetected]); + + // Detect parameters in the expression + const detectParameters = useCallback((expression: string): string[] => { + const parameterRegex = /[a-zA-Z](?!\s*[=\(])/g; + const matches = expression.match(parameterRegex) || []; + return [...new Set(matches)].filter(param => param !== 'x' && param !== 'y'); + }, []); + + return ( + +
+ + + + + Basic + Functions + Operators + + + + {MATH_SYMBOLS.basic.map((symbol) => ( + + ))} + + + + {MATH_SYMBOLS.functions.map((symbol) => ( + + ))} + + + + {MATH_SYMBOLS.operators.map((symbol) => ( + + ))} + + +
+ + ); +}; +``` + +## Integration with FormulaEditor + +```typescript +// src/components/FormulaEditor.tsx + +import { MathInput } from './MathInput/MathInput'; + +export const FormulaEditor: React.FC = ({ + formula, + onUpdate, + onDelete +}) => { + const [expression, setExpression] = useState(formula.expression); + const [parameters, setParameters] = useState([]); + + const handleExpressionChange = useCallback((newExpression: string) => { + setExpression(newExpression); + // Update formula with new expression + onUpdate({ + ...formula, + expression: newExpression + }); + }, [formula, onUpdate]); + + const handleParameterDetected = useCallback((detectedParameters: string[]) => { + setParameters(detectedParameters); + // Create parameter objects with default values + const newParameters = detectedParameters.map(param => ({ + name: param, + value: 1, + min: -10, + max: 10, + step: 0.1 + })); + // Update formula with new parameters + onUpdate({ + ...formula, + parameters: newParameters + }); + }, [formula, onUpdate]); + + return ( +
+ + + {parameters.length > 0 && ( +
+

Parameters

+
+ {parameters.map(param => ( +
+ {param} + { + // Update parameter value + }} + /> +
+ ))} +
+
+ )} +
+ ); +}; +``` + +## Testing Example + +```typescript +// src/components/MathInput/__tests__/MathInput.test.tsx + +import { render, screen, fireEvent } from '@testing-library/react'; +import { MathInput } from '../MathInput'; + +describe('MathInput', () => { + it('renders basic math symbols', () => { + render( {}} />); + + // Check if basic symbols are rendered + expect(screen.getByText('+')).toBeInTheDocument(); + expect(screen.getByText('-')).toBeInTheDocument(); + expect(screen.getByText('×')).toBeInTheDocument(); + }); + + it('adds symbols to input when clicked', () => { + const onChange = jest.fn(); + render(); + + // Click some symbols + fireEvent.click(screen.getByText('+')); + fireEvent.click(screen.getByText('x')); + + expect(onChange).toHaveBeenCalledWith('+x'); + }); + + it('detects parameters in expression', () => { + const onParameterDetected = jest.fn(); + render( + {}} + onParameterDetected={onParameterDetected} + /> + ); + + // Press Enter to trigger parameter detection + fireEvent.keyPress(screen.getByPlaceholderText(/enter mathematical expression/i), { + key: 'Enter', + code: 13, + charCode: 13 + }); + + expect(onParameterDetected).toHaveBeenCalledWith(['a', 'b', 'c']); + }); + + it('maintains cursor position after symbol insertion', () => { + const onChange = jest.fn(); + render(); + + const input = screen.getByPlaceholderText(/enter mathematical expression/i); + input.setSelectionRange(1, 1); + + fireEvent.click(screen.getByText('+')); + + expect(onChange).toHaveBeenCalledWith('x+'); + }); +}); +``` + +This implementation provides: +1. A tabbed interface for different types of mathematical symbols +2. Easy insertion of mathematical functions and operators +3. Automatic parameter detection +4. Cursor position maintenance +5. Real-time expression updates +6. Parameter controls +7. Comprehensive test coverage + +The next steps would be to: +1. Add support for more mathematical symbols and functions +2. Implement expression validation +3. Add support for custom functions +4. Add support for matrices and vectors +5. Implement expression simplification +6. Add support for units and constants +7. Add support for piecewise functions \ No newline at end of file diff --git a/docs/features/toolbar-config.md b/docs/features/toolbar-config.md new file mode 100644 index 0000000..d3a3c83 --- /dev/null +++ b/docs/features/toolbar-config.md @@ -0,0 +1,145 @@ +# Toolbar Configuration + +## Overview + +This feature allows users to hide the toolbar and default to a specific shape tool or the function tool. Configuration is accessible via the global configuration panel. + +## User Stories + +1. As a user, I want to be able to hide the toolbar to maximize the canvas space for drawing. +2. As a user, I want to configure a default tool (shape or function) to be selected when the application loads. +3. As a user, I want these preferences to be persisted across sessions. +4. [x] As a user, I want to be able to share a URL with a pre-selected tool. + +## Implementation Checklist + +
+[x] Configuration Context Updates + +- [x] Add `isToolbarVisible` boolean setting (default: true) +- [x] Add `defaultTool` string setting for tool selection +- [x] Add setter functions for both settings +- [x] Implement localStorage persistence +- [x] Update type definitions +
+ +
+[x] ConfigModal UI Updates + +- [x] Add "Display" tab to configuration modal +- [x] Add toolbar visibility toggle switch +- [x] Add default tool dropdown selection in "Sharing" tab +- [x] Create appropriate labeling and help text +- [x] Add share URL button that copies a URL with the selected default tool +
+ +
+[-] Index Component Integration + +- [x] Conditionally render toolbar based on visibility setting +- [-] ~~Add toolbar toggle button when toolbar is hidden~~ (UI requires settings panel) +- [x] Initialize with default tool on application load +- [x] Support function tool default with auto-opening formula editor +- [ ] Add keyboard shortcut for toggling toolbar (optional) +
+ +
+[x] URL Integration + +- [x] Add tool selection parameter to URL encoding functions +- [x] Parse tool parameter from URL on application load +- [x] Apply tool selection from URL or fall back to user preference +- [x] Update URL when tool selection changes +- [x] Add UI for generating share URLs with specific tool parameter +- [x] Implement clipboard copy functionality for sharing URLs +
+ +
+[x] Translations + +- [x] Add translation keys for new UI elements +- [x] Update all supported language files +
+ +
+[-] Testing + +- [x] Unit tests for context functionality (Partially done) +- [x] Component tests for ConfigModal UI +- [x] Integration tests for toolbar visibility (Partially done) +- [x] Test default tool selection behavior (Partially done) +- [x] Test URL tool parameter functionality +- [ ] E2E tests for hidden toolbar workflow +
+ +## Technical Details + +### Configuration Context + +```typescript +// New settings for the GlobalConfigContextType +isToolbarVisible: boolean; +setToolbarVisible: (visible: boolean) => void; +defaultTool: string; // 'select', 'rectangle', 'circle', 'triangle', 'line', 'function' +setDefaultTool: (tool: string) => void; +``` + +### Display Tab UI Structure + +``` +Display Tab +├── Toolbar Section +│ ├── "Show Toolbar" toggle switch +│ └── Help text explaining the feature +└── Default Tool Section + ├── "Default Tool" dropdown + │ ├── Select Tool + │ ├── Rectangle + │ ├── Circle + │ ├── Triangle + │ ├── Line + │ └── Function Plot + └── Help text explaining the feature +``` + +### URL Parameter + +``` +https://example.com/?shapes=...&formulas=...&grid=...&tool=rectangle +``` + +The `tool` parameter can have the following values: +- `select` +- `rectangle` +- `circle` +- `triangle` +- `line` +- `function` + +Special handling notes: +- The `select` tool value sets the application to selection mode +- The `function` tool value opens the formula editor automatically +- All shape tools (`rectangle`, `circle`, etc.) set the drawing mode with that shape type + +### Key UX Considerations + +When the toolbar is hidden: +1. Maintain access to tools via the settings panel only +2. Move the application header into the freed toolbar space +3. Ensure the canvas still displays the current tool cursor +4. The configuration menu will still be accessible from the global controls + +## Dependencies + +- ConfigContext for settings management +- Toolbar component for visibility toggle +- FormulaEditor for default function tool support +- URL encoding utilities for tool parameter handling + +## Implementation Examples + +Additional implementation examples are available in: +- `docs/implementation-example-ConfigContext.md` +- `docs/implementation-example-ConfigModal.md` +- `docs/implementation-example-Index.md` +- `docs/implementation-example-URLEncoding.md` \ No newline at end of file diff --git a/docs/features/toolbar-config/implementation-example-ConfigContext.md b/docs/features/toolbar-config/implementation-example-ConfigContext.md new file mode 100644 index 0000000..941636b --- /dev/null +++ b/docs/features/toolbar-config/implementation-example-ConfigContext.md @@ -0,0 +1,130 @@ +# Implementation Example: ConfigContext Updates + +This document shows the implementation example for updating the `ConfigContext.tsx` file to support the new toolbar visibility and default tool selection features. + +## Changes to GlobalConfigContextType + +```typescript +// src/context/ConfigContext.tsx + +// Updated GlobalConfigContextType +type GlobalConfigContextType = { + // Existing settings + language: string; + setLanguage: (language: string) => void; + + openaiApiKey: string | null; + setOpenaiApiKey: (key: string | null) => Promise; + + loggingEnabled: boolean; + setLoggingEnabled: (enabled: boolean) => void; + + isGlobalConfigModalOpen: boolean; + setGlobalConfigModalOpen: (isOpen: boolean) => void; + + // New settings for toolbar + isToolbarVisible: boolean; + setToolbarVisible: (visible: boolean) => void; + + defaultTool: string; // 'select', 'rectangle', 'circle', 'triangle', 'line', 'function' + setDefaultTool: (tool: string) => void; +}; +``` + +## Update to STORAGE_KEYS + +```typescript +// Constants for localStorage keys +const STORAGE_KEYS = { + // Existing keys + LANGUAGE: 'lang', + OPENAI_API_KEY: '_gp_oai_k', + MEASUREMENT_UNIT: 'mu', + LOGGING_ENABLED: LOGGER_STORAGE_KEY, + + // New keys + TOOLBAR_VISIBLE: 'tb_vis', + DEFAULT_TOOL: 'def_tool', +}; +``` + +## Update ConfigProvider Component + +```typescript +const ConfigProvider: React.FC<{ children: ReactNode }> = ({ children }) => { + // Existing state variables + const [language, setLanguage] = useState(() => { + const storedLanguage = localStorage.getItem(STORAGE_KEYS.LANGUAGE); + return storedLanguage || navigator.language.split('-')[0] || 'en'; + }); + + const [openaiApiKey, setOpenaiApiKeyState] = useState(null); + const [isGlobalConfigModalOpen, setGlobalConfigModalOpen] = useState(false); + const [loggingEnabled, setLoggingEnabledState] = useState(isLoggingEnabled); + + // Component-specific settings + const [pixelsPerUnit, setPixelsPerUnit] = useState(60); + const [measurementUnit, setMeasurementUnit] = useState(() => { + const storedUnit = localStorage.getItem(STORAGE_KEYS.MEASUREMENT_UNIT); + return (storedUnit as MeasurementUnit) || 'cm'; + }); + + const [isComponentConfigModalOpen, setComponentConfigModalOpen] = useState(false); + + // New state variables for toolbar configuration + const [isToolbarVisible, setToolbarVisibleState] = useState(() => { + const storedValue = localStorage.getItem(STORAGE_KEYS.TOOLBAR_VISIBLE); + return storedValue === null ? true : storedValue === 'true'; + }); + + const [defaultTool, setDefaultToolState] = useState(() => { + const storedValue = localStorage.getItem(STORAGE_KEYS.DEFAULT_TOOL); + return storedValue || 'select'; + }); + + // ... existing useEffects and functions ... + + // Function to update toolbar visibility + const setToolbarVisible = useCallback((visible: boolean) => { + setToolbarVisibleState(visible); + localStorage.setItem(STORAGE_KEYS.TOOLBAR_VISIBLE, visible.toString()); + }, []); + + // Function to update default tool + const setDefaultTool = useCallback((tool: string) => { + setDefaultToolState(tool); + localStorage.setItem(STORAGE_KEYS.DEFAULT_TOOL, tool); + }, []); + + // Update the global context value + const globalContextValue: GlobalConfigContextType = { + // Existing values + language, + setLanguage, + openaiApiKey, + setOpenaiApiKey, + loggingEnabled, + setLoggingEnabled: handleSetLoggingEnabled, + isGlobalConfigModalOpen, + setGlobalConfigModalOpen, + + // New values + isToolbarVisible, + setToolbarVisible, + defaultTool, + setDefaultTool, + }; + + // ... rest of the component ... +} +``` + +This implementation: + +1. Adds new types to the GlobalConfigContextType +2. Adds new storage keys for persisting the settings +3. Creates new state variables with default values +4. Adds setter functions that update both state and localStorage +5. Exposes the new values and setters through the context + +The next step would be to update the ConfigModal component to expose these settings in the UI and then modify the Index component to use these settings. \ No newline at end of file diff --git a/docs/features/toolbar-config/implementation-example-ConfigModal.md b/docs/features/toolbar-config/implementation-example-ConfigModal.md new file mode 100644 index 0000000..f7ea81a --- /dev/null +++ b/docs/features/toolbar-config/implementation-example-ConfigModal.md @@ -0,0 +1,176 @@ +# Implementation Example: ConfigModal Updates + +This document shows the implementation example for updating the `ConfigModal.tsx` component to include UI controls for toolbar visibility and default tool selection. + +## Adding a New "Display" Tab + +```typescript +// src/components/ConfigModal.tsx + +import { /* existing imports */ } from '...'; +import { Switch } from '@/components/ui/switch'; +import { Monitor, Eye } from 'lucide-react'; // New imports for icons + +const ConfigModal: React.FC = () => { + const { + // Existing context values + isGlobalConfigModalOpen, + setGlobalConfigModalOpen, + language, + setLanguage, + openaiApiKey, + setOpenaiApiKey, + loggingEnabled, + setLoggingEnabled, + + // New context values + isToolbarVisible, + setToolbarVisible, + defaultTool, + setDefaultTool + } = useGlobalConfig(); + + // Existing state and functions... + + return ( + + + + {t('configModal.title')} + + {t('configModal.description')} + + + + + + {t('configModal.tabs.general')} + {t('configModal.tabs.display')} + {t('configModal.tabs.openai')} + {isDevelopment && ( + {t('configModal.tabs.developer')} + )} + + + {/* Existing General Tab */} + + {/* ... existing content ... */} + + + {/* New Display Tab */} + +

+ {t('configModal.display.description')} +

+ + {/* Toolbar Visibility Toggle */} +
+
+
+ +

+ {t('configModal.display.toolbarVisibilityDescription')} +

+
+ +
+ + {/* Default Tool Selection */} +
+ + +

+ {t('configModal.display.defaultToolDescription')} +

+
+
+ + + {/* Existing OpenAI API Tab */} + + {/* ... existing content ... */} + + + {/* Existing Developer Tab */} + {isDevelopment && ( + + {/* ... existing content ... */} + + )} + + + + ); +}; + +export default ConfigModal; +``` + +## Required Translation Updates + +Add the following translation keys to all language files: + +```typescript +// en.json (English example) +{ + "configModal": { + // Existing translations... + "tabs": { + "general": "General", + "display": "Display", // New tab + "openai": "OpenAI API", + "developer": "Developer" + }, + "display": { + "description": "Configure how the application looks and behaves.", + "toolbarVisibilityLabel": "Show Toolbar", + "toolbarVisibilityDescription": "Toggle the visibility of the toolbar. When hidden, you can still use keyboard shortcuts.", + "defaultToolLabel": "Default Tool", + "defaultToolPlaceholder": "Select a default tool", + "defaultToolDescription": "Choose which tool is automatically selected when the application loads." + } + // ... + }, + "toolNames": { + "select": "Select Tool", + "function": "Function Plot" + } + // ... +} +``` + +This implementation: + +1. Adds a new "Display" tab to the configuration modal +2. Creates a toggle switch for toolbar visibility +3. Adds a dropdown to select the default tool +4. Includes help text for each setting +5. Adds necessary translation keys + +The dropdown uses existing translation keys for shape names and adds new ones for the select and function tools. \ No newline at end of file diff --git a/docs/features/toolbar-config/implementation-example-Index.md b/docs/features/toolbar-config/implementation-example-Index.md new file mode 100644 index 0000000..fe8bb28 --- /dev/null +++ b/docs/features/toolbar-config/implementation-example-Index.md @@ -0,0 +1,191 @@ +# Implementation Example: Index Component Updates + +This document shows the implementation example for updating the `Index.tsx` component to integrate the toolbar visibility and default tool configuration. + +## Conditionally Rendering the Toolbar + +```typescript +// src/pages/Index.tsx + +import React, { useState, useEffect, useCallback, useRef } from 'react'; +import { useShapeOperations } from '@/hooks/useShapeOperations'; +import { useServiceFactory } from '@/providers/ServiceProvider'; +import { useComponentConfig, useGlobalConfig } from '@/context/ConfigContext'; // Add useGlobalConfig +import GeometryHeader from '@/components/GeometryHeader'; +import GeometryCanvas from '@/components/GeometryCanvas'; +import Toolbar from '@/components/Toolbar'; +import { Button } from '@/components/ui/button'; +import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'; +import { Eye } from 'lucide-react'; // Add Eye icon for toolbar toggle +// ... other imports + +const Index = () => { + // Get the service factory and configs + const serviceFactory = useServiceFactory(); + const { setComponentConfigModalOpen } = useComponentConfig(); + const { isToolbarVisible, setToolbarVisible, defaultTool } = useGlobalConfig(); // Get toolbar config + const isMobile = useIsMobile(); + + // ... existing hooks and state ... + + // Initialize with the default tool on component mount + useEffect(() => { + if (defaultTool && defaultTool !== activeShapeType && defaultTool !== 'function') { + // If default tool is a shape type + setActiveMode('create'); + setActiveShapeType(defaultTool as ShapeType); + } else if (defaultTool === 'select') { + // If default tool is select + setActiveMode('select'); + } else if (defaultTool === 'function' && !isFormulaEditorOpen) { + // If default tool is function and formula editor isn't open + toggleFormulaEditor(); + } + }, [defaultTool]); // Only run on initial mount and when defaultTool changes + + // ... existing functions and handlers ... + + // Add a toggle function for the toolbar + const toggleToolbarVisibility = useCallback(() => { + setToolbarVisible(!isToolbarVisible); + }, [isToolbarVisible, setToolbarVisible]); + + return ( +
+
+ + + {/* Include both modals */} + + + +
+
+
+
+ + {/* Conditionally render toolbar based on isToolbarVisible */} + {isToolbarVisible ? ( +
+ selectedShapeId && deleteShape(selectedShapeId)} + hasSelectedShape={!!selectedShapeId} + _canDelete={!!selectedShapeId} + onToggleFormulaEditor={toggleFormulaEditor} + isFormulaEditorOpen={isFormulaEditorOpen} + /> +
+ ) : ( + /* When toolbar is hidden, show a minimal toggle button */ +
+ + + + + + +

{t('showToolbar')}

+ + + +
+ )} + + +
+ + {/* Rest of the component... */} +
+
+
+
+
+ ); +}; + +export default Index; +``` + +## Adding Translation Keys + +```typescript +// en.json (English example) +{ + // Existing translations... + "showToolbar": "Show Toolbar", + "hideToolbar": "Hide Toolbar" + // ... +} +``` + +## Additional Enhancements + +For a smoother user experience when the toolbar is hidden, consider: + +1. **Adding a keyboard shortcut to toggle the toolbar:** + +```typescript +// Add an effect to handle keyboard shortcuts +useEffect(() => { + const handleKeyDown = (e: KeyboardEvent) => { + // Ctrl+T to toggle toolbar + if (e.ctrlKey && e.key === 't') { + e.preventDefault(); + toggleToolbarVisibility(); + } + // ... other keyboard shortcuts + }; + + window.addEventListener('keydown', handleKeyDown); + return () => { + window.removeEventListener('keydown', handleKeyDown); + }; +}, [toggleToolbarVisibility]); +``` + +2. **Make the toggle button more accessible:** + +```typescript +// Add this inside the button's onClick handler +const toggleToolbarVisibility = useCallback(() => { + setToolbarVisible(!isToolbarVisible); + + // Announce to screen readers + const announcement = !isToolbarVisible + ? t('toolbarVisibilityAnnounceShow') + : t('toolbarVisibilityAnnounceHide'); + + // Use an aria-live region or a toast notification + toast.success(announcement, { + duration: 2000, + id: 'toolbar-visibility' + }); +}, [isToolbarVisible, setToolbarVisible, t]); +``` + +This implementation: + +1. Conditionally renders the toolbar based on the `isToolbarVisible` setting +2. Provides a toggle button to show the toolbar when it's hidden +3. Initializes the application with the default tool on component mount +4. Adds translation keys for accessibility +5. Includes suggestions for keyboard shortcuts and accessibility improvements + +The toolbar will be hidden or shown based on the user's preference stored in the configuration, and the default tool will be automatically selected when the application loads. \ No newline at end of file diff --git a/docs/features/view-options.md b/docs/features/view-options.md new file mode 100644 index 0000000..ceacc56 --- /dev/null +++ b/docs/features/view-options.md @@ -0,0 +1,49 @@ +# View Options Feature + +## Overview +This feature allows the function plotter to adapt its display based on how it's being viewed (standalone, embedded, or fullscreen). + +## Requirements + +### View Modes +1. Standalone (default) + - Shows all UI elements + - Full functionality available + +2. Embedded (in iframe) + - Hides toolbar + - Hides function bar + - Focused on core plotting functionality + - Clean, minimal interface + +3. Fullscreen + - Shows function bar + - Hides toolbar + - Optimized for presentation/demonstration + +### Implementation Tasks +- [x] Add view mode detection +- [x] Create view mode context +- [x] Add test HTML for embedding +- [ ] Update toolbar visibility based on view mode +- [ ] Update function bar visibility based on view mode +- [ ] Add tests for view-specific UI elements +- [ ] Add documentation for embedding options +- [ ] Consider adding configuration options for embedded view + +### Technical Details +- View mode is detected using `window.self !== window.top` for iframe detection +- Fullscreen mode is detected using `document.fullscreenElement` +- View mode state is managed through React context +- UI components should check view mode before rendering + +### Testing +- [x] Unit tests for view detection +- [ ] Integration tests for view-specific UI +- [ ] Manual testing in different view modes +- [ ] Cross-browser testing for fullscreen support + +### Documentation +- [ ] Update embedding guide +- [ ] Add view mode configuration options +- [ ] Document view-specific features \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 0aa472a..8556bf7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -89,6 +89,7 @@ "lint-staged": "^15.4.3", "nyc": "^17.1.0", "postcss": "^8.4.47", + "react-i18next": "^15.4.1", "tailwindcss": "^3.4.11", "ts-jest": "^29.2.6", "ts-node": "^10.9.2", @@ -96,6 +97,12 @@ "typescript-eslint": "^8.0.1", "vite": "^6.2.2", "vite-plugin-istanbul": "^7.0.0" + }, + "optionalDependencies": { + "@rollup/rollup-linux-x64-gnu": "4.9.1", + "@rollup/rollup-linux-x64-musl": "4.9.1", + "@swc/core-linux-x64-gnu": "1.3.107", + "@swc/core-linux-x64-musl": "1.3.107" } }, "node_modules/@adobe/css-tools": { @@ -3233,6 +3240,34 @@ "node": ">=14.0.0" } }, + "node_modules/@rollup/rollup-android-arm-eabi": { + "version": "4.36.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.36.0.tgz", + "integrity": "sha512-jgrXjjcEwN6XpZXL0HUeOVGfjXhPyxAbbhD0BlXUB+abTOpbPiN5Wb3kOT7yb+uEtATNYF5x5gIfwutmuBA26w==", + "cpu": [ + "arm" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "android" + ] + }, + "node_modules/@rollup/rollup-android-arm64": { + "version": "4.36.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.36.0.tgz", + "integrity": "sha512-NyfuLvdPdNUfUNeYKUwPwKsE5SXa2J6bCt2LdB/N+AxShnkpiczi3tcLJrm5mA+eqpy0HmaIY9F6XCa32N5yzg==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "android" + ] + }, "node_modules/@rollup/rollup-darwin-arm64": { "version": "4.36.0", "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.36.0.tgz", @@ -3247,6 +3282,228 @@ "darwin" ] }, + "node_modules/@rollup/rollup-darwin-x64": { + "version": "4.36.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.36.0.tgz", + "integrity": "sha512-6c6wMZa1lrtiRsbDziCmjE53YbTkxMYhhnWnSW8R/yqsM7a6mSJ3uAVT0t8Y/DGt7gxUWYuFM4bwWk9XCJrFKA==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ] + }, + "node_modules/@rollup/rollup-freebsd-arm64": { + "version": "4.36.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.36.0.tgz", + "integrity": "sha512-KXVsijKeJXOl8QzXTsA+sHVDsFOmMCdBRgFmBb+mfEb/7geR7+C8ypAml4fquUt14ZyVXaw2o1FWhqAfOvA4sg==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "freebsd" + ] + }, + "node_modules/@rollup/rollup-freebsd-x64": { + "version": "4.36.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.36.0.tgz", + "integrity": "sha512-dVeWq1ebbvByI+ndz4IJcD4a09RJgRYmLccwlQ8bPd4olz3Y213uf1iwvc7ZaxNn2ab7bjc08PrtBgMu6nb4pQ==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "freebsd" + ] + }, + "node_modules/@rollup/rollup-linux-arm-gnueabihf": { + "version": "4.36.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.36.0.tgz", + "integrity": "sha512-bvXVU42mOVcF4le6XSjscdXjqx8okv4n5vmwgzcmtvFdifQ5U4dXFYaCB87namDRKlUL9ybVtLQ9ztnawaSzvg==", + "cpu": [ + "arm" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-arm-musleabihf": { + "version": "4.36.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.36.0.tgz", + "integrity": "sha512-JFIQrDJYrxOnyDQGYkqnNBtjDwTgbasdbUiQvcU8JmGDfValfH1lNpng+4FWlhaVIR4KPkeddYjsVVbmJYvDcg==", + "cpu": [ + "arm" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-arm64-gnu": { + "version": "4.36.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.36.0.tgz", + "integrity": "sha512-KqjYVh3oM1bj//5X7k79PSCZ6CvaVzb7Qs7VMWS+SlWB5M8p3FqufLP9VNp4CazJ0CsPDLwVD9r3vX7Ci4J56A==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-arm64-musl": { + "version": "4.36.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.36.0.tgz", + "integrity": "sha512-QiGnhScND+mAAtfHqeT+cB1S9yFnNQ/EwCg5yE3MzoaZZnIV0RV9O5alJAoJKX/sBONVKeZdMfO8QSaWEygMhw==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-loongarch64-gnu": { + "version": "4.36.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loongarch64-gnu/-/rollup-linux-loongarch64-gnu-4.36.0.tgz", + "integrity": "sha512-1ZPyEDWF8phd4FQtTzMh8FQwqzvIjLsl6/84gzUxnMNFBtExBtpL51H67mV9xipuxl1AEAerRBgBwFNpkw8+Lg==", + "cpu": [ + "loong64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-powerpc64le-gnu": { + "version": "4.36.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.36.0.tgz", + "integrity": "sha512-VMPMEIUpPFKpPI9GZMhJrtu8rxnp6mJR3ZzQPykq4xc2GmdHj3Q4cA+7avMyegXy4n1v+Qynr9fR88BmyO74tg==", + "cpu": [ + "ppc64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-riscv64-gnu": { + "version": "4.36.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.36.0.tgz", + "integrity": "sha512-ttE6ayb/kHwNRJGYLpuAvB7SMtOeQnVXEIpMtAvx3kepFQeowVED0n1K9nAdraHUPJ5hydEMxBpIR7o4nrm8uA==", + "cpu": [ + "riscv64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-s390x-gnu": { + "version": "4.36.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.36.0.tgz", + "integrity": "sha512-4a5gf2jpS0AIe7uBjxDeUMNcFmaRTbNv7NxI5xOCs4lhzsVyGR/0qBXduPnoWf6dGC365saTiwag8hP1imTgag==", + "cpu": [ + "s390x" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-x64-gnu": { + "version": "4.9.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.9.1.tgz", + "integrity": "sha512-kr8rEPQ6ns/Lmr/hiw8sEVj9aa07gh1/tQF2Y5HrNCCEPiCBGnBUt9tVusrcBBiJfIt1yNaXN6r1CCmpbFEDpg==", + "cpu": [ + "x64" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-x64-musl": { + "version": "4.9.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.9.1.tgz", + "integrity": "sha512-t4QSR7gN+OEZLG0MiCgPqMWZGwmeHhsM4AkegJ0Kiy6TnJ9vZ8dEIwHw1LcZKhbHxTY32hp9eVCMdR3/I8MGRw==", + "cpu": [ + "x64" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-win32-arm64-msvc": { + "version": "4.36.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.36.0.tgz", + "integrity": "sha512-qbqt4N7tokFwwSVlWDsjfoHgviS3n/vZ8LK0h1uLG9TYIRuUTJC88E1xb3LM2iqZ/WTqNQjYrtmtGmrmmawB6A==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "win32" + ] + }, + "node_modules/@rollup/rollup-win32-ia32-msvc": { + "version": "4.36.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.36.0.tgz", + "integrity": "sha512-t+RY0JuRamIocMuQcfwYSOkmdX9dtkr1PbhKW42AMvaDQa+jOdpUYysroTF/nuPpAaQMWp7ye+ndlmmthieJrQ==", + "cpu": [ + "ia32" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "win32" + ] + }, + "node_modules/@rollup/rollup-win32-x64-msvc": { + "version": "4.36.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.36.0.tgz", + "integrity": "sha512-aRXd7tRZkWLqGbChgcMMDEHjOKudo1kChb1Jt1IfR8cY/KIpgNviLeJy5FUb9IpSuQj8dU2fAYNMPW/hLKOSTw==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "win32" + ] + }, "node_modules/@sinclair/typebox": { "version": "0.27.8", "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.27.8.tgz", @@ -3330,6 +3587,191 @@ "node": ">=10" } }, + "node_modules/@swc/core-darwin-x64": { + "version": "1.11.11", + "resolved": "https://registry.npmjs.org/@swc/core-darwin-x64/-/core-darwin-x64-1.11.11.tgz", + "integrity": "sha512-/N4dGdqEYvD48mCF3QBSycAbbQd3yoZ2YHSzYesQf8usNc2YpIhYqEH3sql02UsxTjEFOJSf1bxZABDdhbSl6A==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "Apache-2.0 AND MIT", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">=10" + } + }, + "node_modules/@swc/core-linux-arm-gnueabihf": { + "version": "1.11.11", + "resolved": "https://registry.npmjs.org/@swc/core-linux-arm-gnueabihf/-/core-linux-arm-gnueabihf-1.11.11.tgz", + "integrity": "sha512-hsBhKK+wVXdN3x9MrL5GW0yT8o9GxteE5zHAI2HJjRQel3HtW7m5Nvwaq+q8rwMf4YQRd8ydbvwl4iUOZx7i2Q==", + "cpu": [ + "arm" + ], + "dev": true, + "license": "Apache-2.0", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=10" + } + }, + "node_modules/@swc/core-linux-arm64-gnu": { + "version": "1.11.11", + "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-gnu/-/core-linux-arm64-gnu-1.11.11.tgz", + "integrity": "sha512-YOCdxsqbnn/HMPCNM6nrXUpSndLXMUssGTtzT7ffXqr7WuzRg2e170FVDVQFIkb08E7Ku5uOnnUVAChAJQbMOQ==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "Apache-2.0 AND MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=10" + } + }, + "node_modules/@swc/core-linux-arm64-musl": { + "version": "1.11.11", + "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-musl/-/core-linux-arm64-musl-1.11.11.tgz", + "integrity": "sha512-nR2tfdQRRzwqR2XYw9NnBk9Fdvff/b8IiJzDL28gRR2QiJWLaE8LsRovtWrzCOYq6o5Uu9cJ3WbabWthLo4jLw==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "Apache-2.0 AND MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=10" + } + }, + "node_modules/@swc/core-linux-x64-gnu": { + "version": "1.3.107", + "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-gnu/-/core-linux-x64-gnu-1.3.107.tgz", + "integrity": "sha512-uBVNhIg0ip8rH9OnOsCARUFZ3Mq3tbPHxtmWk9uAa5u8jQwGWeBx5+nTHpDOVd3YxKb6+5xDEI/edeeLpha/9g==", + "cpu": [ + "x64" + ], + "license": "Apache-2.0 AND MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=10" + } + }, + "node_modules/@swc/core-linux-x64-musl": { + "version": "1.3.107", + "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-musl/-/core-linux-x64-musl-1.3.107.tgz", + "integrity": "sha512-mvACkUvzSIB12q1H5JtabWATbk3AG+pQgXEN95AmEX2ZA5gbP9+B+mijsg7Sd/3tboHr7ZHLz/q3SHTvdFJrEw==", + "cpu": [ + "x64" + ], + "license": "Apache-2.0 AND MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=10" + } + }, + "node_modules/@swc/core-win32-arm64-msvc": { + "version": "1.11.11", + "resolved": "https://registry.npmjs.org/@swc/core-win32-arm64-msvc/-/core-win32-arm64-msvc-1.11.11.tgz", + "integrity": "sha512-aZNZznem9WRnw2FbTqVpnclvl8Q2apOBW2B316gZK+qxbe+ktjOUnYaMhdCG3+BYggyIBDOnaJeQrXbKIMmNdw==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "Apache-2.0 AND MIT", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=10" + } + }, + "node_modules/@swc/core-win32-ia32-msvc": { + "version": "1.11.11", + "resolved": "https://registry.npmjs.org/@swc/core-win32-ia32-msvc/-/core-win32-ia32-msvc-1.11.11.tgz", + "integrity": "sha512-DjeJn/IfjgOddmJ8IBbWuDK53Fqw7UvOz7kyI/728CSdDYC3LXigzj3ZYs4VvyeOt+ZcQZUB2HA27edOifomGw==", + "cpu": [ + "ia32" + ], + "dev": true, + "license": "Apache-2.0 AND MIT", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=10" + } + }, + "node_modules/@swc/core-win32-x64-msvc": { + "version": "1.11.11", + "resolved": "https://registry.npmjs.org/@swc/core-win32-x64-msvc/-/core-win32-x64-msvc-1.11.11.tgz", + "integrity": "sha512-Gp/SLoeMtsU4n0uRoKDOlGrRC6wCfifq7bqLwSlAG8u8MyJYJCcwjg7ggm0rhLdC2vbiZ+lLVl3kkETp+JUvKg==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "Apache-2.0 AND MIT", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=10" + } + }, + "node_modules/@swc/core/node_modules/@swc/core-linux-x64-gnu": { + "version": "1.11.11", + "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-gnu/-/core-linux-x64-gnu-1.11.11.tgz", + "integrity": "sha512-b4gBp5HA9xNWNC5gsYbdzGBJWx4vKSGybGMGOVWWuF+ynx10+0sA/o4XJGuNHm8TEDuNh9YLKf6QkIO8+GPJ1g==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "Apache-2.0 AND MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=10" + } + }, + "node_modules/@swc/core/node_modules/@swc/core-linux-x64-musl": { + "version": "1.11.11", + "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-musl/-/core-linux-x64-musl-1.11.11.tgz", + "integrity": "sha512-dEvqmQVswjNvMBwXNb8q5uSvhWrJLdttBSef3s6UC5oDSwOr00t3RQPzyS3n5qmGJ8UMTdPRmsopxmqaODISdg==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "Apache-2.0 AND MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=10" + } + }, "node_modules/@swc/counter": { "version": "0.1.3", "resolved": "https://registry.npmjs.org/@swc/counter/-/counter-0.1.3.tgz", @@ -7271,6 +7713,16 @@ "dev": true, "license": "MIT" }, + "node_modules/html-parse-stringify": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz", + "integrity": "sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==", + "dev": true, + "license": "MIT", + "dependencies": { + "void-elements": "3.1.0" + } + }, "node_modules/http-proxy-agent": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-5.0.0.tgz", @@ -7326,6 +7778,39 @@ "url": "https://github.com/sponsors/typicode" } }, + "node_modules/i18next": { + "version": "24.2.3", + "resolved": "https://registry.npmjs.org/i18next/-/i18next-24.2.3.tgz", + "integrity": "sha512-lfbf80OzkocvX7nmZtu7nSTNbrTYR52sLWxPtlXX1zAhVw8WEnFk4puUkCR4B1dNQwbSpEHHHemcZu//7EcB7A==", + "dev": true, + "funding": [ + { + "type": "individual", + "url": "https://locize.com" + }, + { + "type": "individual", + "url": "https://locize.com/i18next.html" + }, + { + "type": "individual", + "url": "https://www.i18next.com/how-to/faq#i18next-is-awesome.-how-can-i-support-the-project" + } + ], + "license": "MIT", + "peer": true, + "dependencies": { + "@babel/runtime": "^7.26.10" + }, + "peerDependencies": { + "typescript": "^5" + }, + "peerDependenciesMeta": { + "typescript": { + "optional": true + } + } + }, "node_modules/iconv-lite": { "version": "0.6.3", "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz", @@ -11385,6 +11870,29 @@ "react": "^16.8.0 || ^17 || ^18 || ^19" } }, + "node_modules/react-i18next": { + "version": "15.4.1", + "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-15.4.1.tgz", + "integrity": "sha512-ahGab+IaSgZmNPYXdV1n+OYky95TGpFwnKRflX/16dY04DsYYKHtVLjeny7sBSCREEcoMbAgSkFiGLF5g5Oofw==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.25.0", + "html-parse-stringify": "^3.0.1" + }, + "peerDependencies": { + "i18next": ">= 23.2.3", + "react": ">= 16.8.0" + }, + "peerDependenciesMeta": { + "react-dom": { + "optional": true + }, + "react-native": { + "optional": true + } + } + }, "node_modules/react-is": { "version": "18.3.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz", @@ -11884,6 +12392,34 @@ "fsevents": "~2.3.2" } }, + "node_modules/rollup/node_modules/@rollup/rollup-linux-x64-gnu": { + "version": "4.36.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.36.0.tgz", + "integrity": "sha512-5KtoW8UWmwFKQ96aQL3LlRXX16IMwyzMq/jSSVIIyAANiE1doaQsx/KRyhAvpHlPjPiSU/AYX/8m+lQ9VToxFQ==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/rollup/node_modules/@rollup/rollup-linux-x64-musl": { + "version": "4.36.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.36.0.tgz", + "integrity": "sha512-sycrYZPrv2ag4OCvaN5js+f01eoZ2U+RmT5as8vhxiFz+kxwlHrsxOwKPSA8WyS+Wc6Epid9QeI/IkQ9NkgYyQ==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, "node_modules/run-parallel": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz", @@ -13256,6 +13792,16 @@ "node": ">=18" } }, + "node_modules/void-elements": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz", + "integrity": "sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/w3c-hr-time": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz", diff --git a/package.json b/package.json index 824c745..4413bca 100644 --- a/package.json +++ b/package.json @@ -104,6 +104,7 @@ "lint-staged": "^15.4.3", "nyc": "^17.1.0", "postcss": "^8.4.47", + "react-i18next": "^15.4.1", "tailwindcss": "^3.4.11", "ts-jest": "^29.2.6", "ts-node": "^10.9.2", diff --git a/src/App.tsx b/src/App.tsx index da95e14..e1f5e36 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -5,6 +5,7 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; import { BrowserRouter, Routes, Route } from "react-router-dom"; import { ConfigProvider } from "./context/ConfigContext"; import { ServiceProvider } from "./providers/ServiceProvider"; +import { ViewModeProvider } from "./contexts/ViewModeContext"; import Index from "./pages/Index"; import NotFound from "./pages/NotFound"; import React from 'react'; @@ -15,19 +16,21 @@ const App: React.FC = () => { return ( - - - - - - - } /> - {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */} - } /> - - - - + + + + + + + + } /> + {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */} + } /> + + + + + ); diff --git a/src/__tests__/components/Formula/FunctionSidebar.test.tsx b/src/__tests__/components/Formula/FunctionSidebar.test.tsx new file mode 100644 index 0000000..52bb60a --- /dev/null +++ b/src/__tests__/components/Formula/FunctionSidebar.test.tsx @@ -0,0 +1,108 @@ +import { render, screen, fireEvent } from '@testing-library/react'; +import { useTranslation } from 'react-i18next'; +import FunctionSidebar from '@/components/Formula/FunctionSidebar'; +import { Formula } from '@/types/formula'; +import { MeasurementUnit } from '@/types/shapes'; +import { ConfigProvider } from '@/context/ConfigContext'; + +// Mock react-i18next +jest.mock('react-i18next', () => ({ + useTranslation: jest.fn(), +})); + +// Mock ConfigContext +jest.mock('@/context/ConfigContext', () => ({ + ...jest.requireActual('@/context/ConfigContext'), + useConfig: () => ({ + language: 'en', + openaiApiKey: '', + loggingEnabled: false, + isGlobalConfigModalOpen: false, + isToolbarVisible: true, + pixelsPerUnit: 60, + measurementUnit: 'cm', + isComponentConfigModalOpen: false, + setLanguage: jest.fn(), + setOpenaiApiKey: jest.fn(), + setLoggingEnabled: jest.fn(), + setGlobalConfigModalOpen: jest.fn(), + setToolbarVisible: jest.fn(), + setPixelsPerUnit: jest.fn(), + setMeasurementUnit: jest.fn(), + setComponentConfigModalOpen: jest.fn(), + isConfigModalOpen: false, + setConfigModalOpen: jest.fn(), + }), +})); + +describe('FunctionSidebar', () => { + const mockFormula: Formula = { + id: 'test-formula', + type: 'function', + expression: 'x^2', + color: '#000000', + strokeWidth: 2, + xRange: [-10, 10], + samples: 100, + scaleFactor: 1, + }; + + const mockProps = { + formulas: [mockFormula], + selectedFormula: null, + onAddFormula: jest.fn(), + onDeleteFormula: jest.fn(), + onSelectFormula: jest.fn(), + onUpdateFormula: jest.fn(), + measurementUnit: 'cm' as MeasurementUnit, + }; + + beforeEach(() => { + (useTranslation as jest.Mock).mockReturnValue({ + t: (key: string) => key, + }); + }); + + it('renders without crashing', () => { + render(); + expect(screen.getByText('formula.title')).toBeInTheDocument(); + }); + + it('renders formula list', () => { + render(); + expect(screen.getByText('x^2')).toBeInTheDocument(); + }); + + it('calls onAddFormula when add button is clicked', () => { + render(); + const addButton = screen.getByTitle('formula.add'); + fireEvent.click(addButton); + expect(mockProps.onAddFormula).toHaveBeenCalled(); + }); + + it('calls onDeleteFormula when delete button is clicked', () => { + render(); + const deleteButton = screen.getByTitle('formula.delete'); + fireEvent.click(deleteButton); + expect(mockProps.onDeleteFormula).toHaveBeenCalledWith(mockFormula.id); + }); + + it('calls onSelectFormula when formula is clicked', () => { + render(); + const formulaButton = screen.getByText('x^2'); + fireEvent.click(formulaButton); + expect(mockProps.onSelectFormula).toHaveBeenCalledWith(mockFormula); + }); + + it('shows selected formula with different styling', () => { + render( + + ); + const formulaContainer = screen.getByText('x^2').closest('div').parentElement; + expect(formulaContainer).toHaveClass('bg-accent'); + expect(formulaContainer).toHaveClass('border-accent-foreground'); + }); +}); \ No newline at end of file diff --git a/src/__tests__/components/Formula/ParameterSlider.test.tsx b/src/__tests__/components/Formula/ParameterSlider.test.tsx new file mode 100644 index 0000000..9105e98 --- /dev/null +++ b/src/__tests__/components/Formula/ParameterSlider.test.tsx @@ -0,0 +1,79 @@ +import { render, screen, fireEvent } from "@testing-library/react"; +import { ParameterSlider } from "@/components/Formula/ParameterSlider"; + +describe("ParameterSlider", () => { + const mockOnChange = jest.fn(); + + beforeEach(() => { + mockOnChange.mockClear(); + }); + + it("renders with default props", () => { + render( + + ); + + expect(screen.getByText("a")).toBeInTheDocument(); + expect(screen.getByText("1.0")).toBeInTheDocument(); + }); + + it("renders with custom min and max values", () => { + render( + + ); + + expect(screen.getByText("b")).toBeInTheDocument(); + expect(screen.getByText("2.0")).toBeInTheDocument(); + }); + + it("calls onChange when slider value changes", () => { + render( + + ); + + const slider = screen.getByRole("slider"); + fireEvent.keyDown(slider, { key: 'ArrowRight', code: 'ArrowRight' }); + + expect(mockOnChange).toHaveBeenCalledWith(0.1); + }); + + it("displays custom step value", () => { + render( + + ); + + expect(screen.getByText("1.0")).toBeInTheDocument(); + }); + + it("applies custom className", () => { + const { container } = render( + + ); + + expect(container.firstChild).toHaveClass('custom-class'); + }); +}); \ No newline at end of file diff --git a/src/__tests__/utils/parameterDetection.test.ts b/src/__tests__/utils/parameterDetection.test.ts new file mode 100644 index 0000000..33dfac3 --- /dev/null +++ b/src/__tests__/utils/parameterDetection.test.ts @@ -0,0 +1,102 @@ +import { detectParameters, isValidParameterName } from '@/utils/parameterDetection'; + +describe('parameterDetection', () => { + describe('detectParameters', () => { + it('should detect single parameter in simple formula', () => { + const formula = 'ax^2'; + const result = detectParameters(formula); + expect(result).toEqual([ + { name: 'a', displayName: 'a', defaultValue: 1, minValue: -10, maxValue: 10, step: 0.1 } + ]); + }); + + it('should detect multiple parameters in formula', () => { + const formula = 'ax^2 + bx + c'; + const result = detectParameters(formula); + expect(result).toEqual([ + { name: 'a', displayName: 'a', defaultValue: 1, minValue: -10, maxValue: 10, step: 0.1 }, + { name: 'b', displayName: 'b', defaultValue: 1, minValue: -10, maxValue: 10, step: 0.1 }, + { name: 'c', displayName: 'c', defaultValue: 1, minValue: -10, maxValue: 10, step: 0.1 } + ]); + }); + + it('should not detect x as a parameter', () => { + const formula = 'ax^2 + bx + c'; + const result = detectParameters(formula); + expect(result).not.toContainEqual({ name: 'x', defaultValue: 1 }); + }); + + it('should not detect parameters in function names', () => { + const formula = 'sin(x) + a*cos(x)'; + const result = detectParameters(formula); + expect(result).toEqual([ + { name: 'a', displayName: 'a', defaultValue: 1, minValue: -10, maxValue: 10, step: 0.1 } + ]); + }); + + it('should handle Math function names', () => { + const formula = 'Math.sin(x) + a*Math.cos(x)'; + const result = detectParameters(formula); + expect(result).toEqual([ + { name: 'a', displayName: 'a', defaultValue: 1, minValue: -10, maxValue: 10, step: 0.1 } + ]); + }); + + it('should handle nested functions', () => { + const formula = 'a*sqrt(b*x^2)'; + const result = detectParameters(formula); + expect(result).toEqual([ + { name: 'a', displayName: 'a', defaultValue: 1, minValue: -10, maxValue: 10, step: 0.1 }, + { name: 'b', displayName: 'b', defaultValue: 1, minValue: -10, maxValue: 10, step: 0.1 } + ]); + }); + + it('should handle whitespace', () => { + const formula = 'a * x^2 + b * x + c'; + const result = detectParameters(formula); + expect(result).toEqual([ + { name: 'a', displayName: 'a', defaultValue: 1, minValue: -10, maxValue: 10, step: 0.1 }, + { name: 'b', displayName: 'b', defaultValue: 1, minValue: -10, maxValue: 10, step: 0.1 }, + { name: 'c', displayName: 'c', defaultValue: 1, minValue: -10, maxValue: 10, step: 0.1 } + ]); + }); + + it('should handle case sensitivity', () => { + const formula = 'Ax^2 + Bx + C'; + const result = detectParameters(formula); + expect(result).toEqual([ + { name: 'a', displayName: 'a', defaultValue: 1, minValue: -10, maxValue: 10, step: 0.1 }, + { name: 'b', displayName: 'b', defaultValue: 1, minValue: -10, maxValue: 10, step: 0.1 }, + { name: 'c', displayName: 'c', defaultValue: 1, minValue: -10, maxValue: 10, step: 0.1 } + ]); + }); + }); + + describe('isValidParameterName', () => { + it('should accept single letters', () => { + expect(isValidParameterName('a')).toBe(true); + expect(isValidParameterName('b')).toBe(true); + expect(isValidParameterName('z')).toBe(true); + }); + + it('should not accept x', () => { + expect(isValidParameterName('x')).toBe(false); + }); + + it('should not accept multiple characters', () => { + expect(isValidParameterName('ab')).toBe(false); + expect(isValidParameterName('a1')).toBe(false); + }); + + it('should not accept numbers', () => { + expect(isValidParameterName('1')).toBe(false); + expect(isValidParameterName('2')).toBe(false); + }); + + it('should not accept function names', () => { + expect(isValidParameterName('sin')).toBe(false); + expect(isValidParameterName('cos')).toBe(false); + expect(isValidParameterName('sqrt')).toBe(false); + }); + }); +}); \ No newline at end of file diff --git a/src/__tests__/utils/viewDetection.test.ts b/src/__tests__/utils/viewDetection.test.ts new file mode 100644 index 0000000..6ce04ed --- /dev/null +++ b/src/__tests__/utils/viewDetection.test.ts @@ -0,0 +1,143 @@ +import { detectViewMode, isInIframe, isFullscreen } from '@/utils/viewDetection'; + +describe('viewDetection', () => { + let originalWindow: Partial; + let originalDocument: Partial; + + beforeEach(() => { + originalWindow = { ...window }; + originalDocument = { ...document }; + + // Reset window and document to default state + Object.defineProperty(window, 'self', { + value: window, + writable: true + }); + Object.defineProperty(window, 'top', { + value: window, + writable: true + }); + Object.defineProperty(window, 'parent', { + value: window, + writable: true + }); + + // Create a new mock document + const mockDocument = { + fullscreenElement: null, + webkitFullscreenElement: null, + mozFullScreenElement: null, + msFullscreenElement: null + }; + Object.defineProperties(document, { + fullscreenElement: { + get: () => mockDocument.fullscreenElement, + configurable: true + }, + webkitFullscreenElement: { + get: () => mockDocument.webkitFullscreenElement, + configurable: true + }, + mozFullScreenElement: { + get: () => mockDocument.mozFullScreenElement, + configurable: true + }, + msFullscreenElement: { + get: () => mockDocument.msFullscreenElement, + configurable: true + } + }); + }); + + afterEach(() => { + // Restore original properties instead of reassigning globals + Object.defineProperty(window, 'self', { + value: originalWindow.self, + writable: true + }); + Object.defineProperty(window, 'top', { + value: originalWindow.top, + writable: true + }); + Object.defineProperty(window, 'parent', { + value: originalWindow.parent, + writable: true + }); + + // Restore document properties + if (originalDocument.fullscreenElement !== undefined) { + Object.defineProperty(document, 'fullscreenElement', { + value: originalDocument.fullscreenElement, + writable: true + }); + } + }); + + describe('isInIframe', () => { + it('should return false when not in an iframe', () => { + expect(isInIframe()).toBe(false); + }); + + it('should return true when in an iframe', () => { + Object.defineProperty(window, 'self', { + value: window + }); + Object.defineProperty(window, 'top', { + value: {} + }); + expect(isInIframe()).toBe(true); + }); + }); + + describe('isFullscreen', () => { + it('should return false when not in fullscreen', () => { + expect(isFullscreen()).toBe(false); + }); + + it('should return true when in fullscreen', () => { + Object.defineProperty(document, 'fullscreenElement', { + get: () => document.createElement('div'), + configurable: true + }); + expect(isFullscreen()).toBe(true); + }); + }); + + describe('detectViewMode', () => { + it('should return standalone when not in iframe or fullscreen', () => { + expect(detectViewMode()).toBe('standalone'); + }); + + it('should return embedded when in iframe', () => { + Object.defineProperty(window, 'self', { + value: window + }); + Object.defineProperty(window, 'top', { + value: {} + }); + expect(detectViewMode()).toBe('embedded'); + }); + + it('should return fullscreen when in fullscreen mode', () => { + Object.defineProperty(document, 'fullscreenElement', { + get: () => document.createElement('div'), + configurable: true + }); + expect(detectViewMode()).toBe('fullscreen'); + }); + + it('should prioritize fullscreen over embedded', () => { + Object.defineProperty(window, 'self', { + value: window + }); + Object.defineProperty(window, 'top', { + value: {} + }); + Object.defineProperty(document, 'fullscreenElement', { + get: () => document.createElement('div'), + configurable: true + }); + expect(detectViewMode()).toBe('fullscreen'); + }); + }); +}); \ No newline at end of file diff --git a/src/components/CanvasGrid/GridZoomControl.tsx b/src/components/CanvasGrid/GridZoomControl.tsx index 4f5be26..7a77ef8 100644 --- a/src/components/CanvasGrid/GridZoomControl.tsx +++ b/src/components/CanvasGrid/GridZoomControl.tsx @@ -1,13 +1,15 @@ import React from 'react'; import { Button } from '@/components/ui/button'; -import { ZoomIn, ZoomOut } from 'lucide-react'; +import { ZoomIn, ZoomOut, Maximize2, Minimize2 } from 'lucide-react'; import { useGridZoom } from '@/contexts/GridZoomContext/index'; import { useTranslate } from '@/hooks/useTranslate'; import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'; +import { useViewMode } from '@/contexts/ViewModeContext'; const GridZoomControl: React.FC = () => { const _t = useTranslate(); const { zoomFactor, setZoomFactor } = useGridZoom(); + const { isFullscreen, setIsFullscreen } = useViewMode(); const handleZoomIn = () => { const newZoom = Math.min(3, zoomFactor + 0.05); @@ -24,6 +26,10 @@ const GridZoomControl: React.FC = () => { setZoomFactor(1); }; + const handleToggleFullscreen = () => { + setIsFullscreen(!isFullscreen); + }; + return (
{

Zoom In (Ctrl +)

+ + + + + + +

{isFullscreen ? 'Exit Fullscreen' : 'Enter Fullscreen'}

+ +
); diff --git a/src/components/CanvasGrid/__tests__/GridZoomControl.test.tsx b/src/components/CanvasGrid/__tests__/GridZoomControl.test.tsx index 66b6536..7313e0a 100644 --- a/src/components/CanvasGrid/__tests__/GridZoomControl.test.tsx +++ b/src/components/CanvasGrid/__tests__/GridZoomControl.test.tsx @@ -1,6 +1,7 @@ import React from 'react'; import { render, fireEvent, screen } from '@testing-library/react'; import { GridZoomProvider } from '@/contexts/GridZoomContext/index'; +import { ViewModeProvider } from '@/contexts/ViewModeContext'; import GridZoomControl from '../GridZoomControl'; // Mock translations @@ -16,17 +17,24 @@ jest.mock('@/components/ui/tooltip', () => ({ TooltipProvider: ({ children }: { children: React.ReactNode }) => <>{children}, })); -// Wrapper component to provide the GridZoomContext -const GridZoomControlWrapper = () => { - return ( - - - - ); -}; +// Mock fullscreen API +const mockRequestFullscreen = jest.fn().mockImplementation(() => Promise.resolve()); +const mockExitFullscreen = jest.fn().mockImplementation(() => Promise.resolve()); + +beforeAll(() => { + Object.defineProperty(document.documentElement, 'requestFullscreen', { + value: mockRequestFullscreen, + writable: true, + }); + Object.defineProperty(document, 'exitFullscreen', { + value: mockExitFullscreen, + writable: true, + }); +}); -// Mock localStorage for testing beforeEach(() => { + mockRequestFullscreen.mockClear(); + mockExitFullscreen.mockClear(); // Clear localStorage before each test localStorage.clear(); // Set initial zoom to 1 (100%) @@ -36,7 +44,13 @@ beforeEach(() => { describe('GridZoomControl', () => { // Helper function to render the component with a reset zoom level const renderComponent = () => { - return render(); + return render( + + + + + + ); }; it('should render zoom controls', () => { @@ -44,7 +58,7 @@ describe('GridZoomControl', () => { // Check for zoom buttons - using indices since buttons have icons, not text const buttons = screen.getAllByRole('button'); - expect(buttons.length).toBe(3); // Zoom out, percentage, zoom in + expect(buttons.length).toBe(4); // Zoom out, percentage, zoom in, fullscreen // Check for zoom factor display expect(screen.getByText('100%')).toBeInTheDocument(); @@ -168,4 +182,17 @@ describe('GridZoomControl', () => { // Maximum zoom is 300% expect(percentageButton).toHaveTextContent('300%'); }); -}); \ No newline at end of file + + it('should handle fullscreen toggle', () => { + renderComponent(); + + const buttons = screen.getAllByRole('button'); + const fullscreenButton = buttons[3]; // Fourth button is fullscreen + + // Click fullscreen button + fireEvent.click(fullscreenButton); + + // The button should now show the minimize icon + // We can't test the actual fullscreen state as it's not supported in jsdom + }); +}); diff --git a/src/components/ConfigModal.tsx b/src/components/ConfigModal.tsx index a6eafd6..9beb3ac 100644 --- a/src/components/ConfigModal.tsx +++ b/src/components/ConfigModal.tsx @@ -7,8 +7,10 @@ import { Input } from '@/components/ui/input'; import { Button } from '@/components/ui/button'; import { Label } from '@/components/ui/label'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; -import { Globe, Trash2, Terminal } from 'lucide-react'; +import { Globe, Trash2, Terminal, Eye, Share2, Copy } from 'lucide-react'; import { Switch } from '@/components/ui/switch'; +import { toast } from 'sonner'; +import { updateUrlWithData } from '@/utils/urlEncoding'; const ConfigModal: React.FC = () => { const { @@ -19,7 +21,11 @@ const ConfigModal: React.FC = () => { openaiApiKey, setOpenaiApiKey, loggingEnabled, - setLoggingEnabled + setLoggingEnabled, + isToolbarVisible, + setToolbarVisible, + defaultTool, + setDefaultTool } = useGlobalConfig(); const [apiKeyInput, setApiKeyInput] = useState(openaiApiKey || ''); @@ -54,6 +60,26 @@ const ConfigModal: React.FC = () => { setLanguage(value); }; + // Function to generate and copy sharing URL with the default tool + const handleShareWithDefaultTool = () => { + // Create a URL object based on the current URL + const url = new URL(window.location.origin + window.location.pathname); + + // Only add the selected default tool parameter + if (defaultTool) { + url.searchParams.set('tool', defaultTool); + } + + // Copy the URL to clipboard + navigator.clipboard.writeText(url.toString()) + .then(() => { + toast.success(t('configModal.sharing.urlCopiedSuccess')); + }) + .catch(() => { + toast.error(t('configModal.sharing.urlCopiedError')); + }); + }; + return ( @@ -65,9 +91,15 @@ const ConfigModal: React.FC = () => { - + {t('configModal.tabs.general')} + {t('configModal.tabs.display')} {t('configModal.tabs.openai')} + {t('configModal.tabs.sharing')} {isDevelopment && ( {t('configModal.tabs.developer')} )} @@ -98,6 +130,33 @@ const ConfigModal: React.FC = () => { + {/* Display Tab */} + +

+ {t('configModal.display.description')} +

+ +
+ {/* Toolbar Visibility Toggle */} +
+
+ +

+ {t('configModal.display.toolbarVisibilityDescription')} +

+
+ +
+
+ + {/* OpenAI API Tab */}

@@ -134,6 +193,57 @@ const ConfigModal: React.FC = () => { + {/* Sharing Tab */} + +

+ {t('configModal.sharing.description')} +

+ +
+ {/* Default Tool Dropdown - Only used for generating sharing URLs */} +
+ +
+
+ +
+
+

+ {t('configModal.sharing.defaultToolDescription')} +

+
+ +
+ +

+ {t('configModal.sharing.sharingNote')} +

+
+
+ + {/* Developer Tab - Only shown in development mode */} {isDevelopment && ( diff --git a/src/components/Formula/FunctionSidebar.tsx b/src/components/Formula/FunctionSidebar.tsx new file mode 100644 index 0000000..fe56394 --- /dev/null +++ b/src/components/Formula/FunctionSidebar.tsx @@ -0,0 +1,113 @@ +import { useTranslation } from 'react-i18next'; +import { cn } from '@/lib/utils'; +import { Button } from '@/components/ui/button'; +import { ScrollArea } from '@/components/ui/scroll-area'; +import { Separator } from '@/components/ui/separator'; +import { Plus, Trash2, Maximize2, Minimize2 } from 'lucide-react'; +import { Formula } from '@/types/formula'; +import { MeasurementUnit } from '@/types/shapes'; +import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'; + +interface FunctionSidebarProps { + formulas: Formula[]; + selectedFormula: Formula | null; + onAddFormula: () => void; + onDeleteFormula: (id: string) => void; + onSelectFormula: (formula: Formula) => void; + onUpdateFormula: (id: string, updates: Partial) => void; + measurementUnit: MeasurementUnit; + className?: string; + isFullscreen?: boolean; + onToggleFullscreen?: () => void; +} + +export default function FunctionSidebar({ + formulas, + selectedFormula, + onAddFormula, + onDeleteFormula, + onSelectFormula, + onUpdateFormula, + measurementUnit, + className, + isFullscreen = false, + onToggleFullscreen +}: FunctionSidebarProps) { + const { t } = useTranslation(); + + return ( +
+
+

{t('formula.title')}

+
+ {onToggleFullscreen && ( + + + + + + +

{isFullscreen ? t('exitFullscreen') : t('enterFullscreen')}

+ + + + )} + +
+
+ + +
+ {formulas.map((formula) => ( +
+
+ + +
+
+ ))} +
+ +
+ ); +} \ No newline at end of file diff --git a/src/components/Formula/ParameterControls.tsx b/src/components/Formula/ParameterControls.tsx new file mode 100644 index 0000000..07d0c03 --- /dev/null +++ b/src/components/Formula/ParameterControls.tsx @@ -0,0 +1,54 @@ +import { useTranslation } from 'react-i18next'; +import { Formula } from '@/types/formula'; +import { ParameterSlider } from '@/components/Formula/ParameterSlider'; +import { detectParameters } from '@/utils/parameterDetection'; + +interface ParameterControlsProps { + selectedFormula: Formula | null; + onUpdateFormula: (id: string, updates: Partial) => void; +} + +export default function ParameterControls({ + selectedFormula, + onUpdateFormula, +}: ParameterControlsProps) { + const { t } = useTranslation(); + + const handleParameterChange = (parameterName: string, value: number) => { + if (!selectedFormula) return; + + const updatedParameters = { + ...selectedFormula.parameters, + [parameterName]: value, + }; + + onUpdateFormula(selectedFormula.id, { + parameters: updatedParameters, + }); + }; + + if (!selectedFormula) return null; + + const parameters = detectParameters(selectedFormula.expression); + if (parameters.length === 0) return null; + + return ( +
+
+

{t('formula.parameters')}

+
+ {parameters.map((param) => ( + handleParameterChange(param.name, value)} + parameters={selectedFormula.parameters} + /> + ))} +
+
+
+ ); +} \ No newline at end of file diff --git a/src/components/Formula/ParameterSlider.tsx b/src/components/Formula/ParameterSlider.tsx new file mode 100644 index 0000000..87d8899 --- /dev/null +++ b/src/components/Formula/ParameterSlider.tsx @@ -0,0 +1,72 @@ +import { Slider } from "@/components/ui/slider"; +import { Label } from "@/components/ui/label"; +import { cn } from "@/lib/utils"; +import { + Tooltip, + TooltipContent, + TooltipProvider, + TooltipTrigger, +} from "@/components/ui/tooltip"; + +interface ParameterSliderProps { + parameterName: string; + displayName?: string; + value: number; + onChange: (value: number) => void; + min?: number; + max?: number; + step?: number; + className?: string; + parameters?: Record; +} + +export function ParameterSlider({ + parameterName, + displayName, + value, + onChange, + min = -3, + max = 3, + step = 0.1, + className, + parameters, +}: ParameterSliderProps) { + // Get the step size from parameters if available, otherwise use default + const stepSize = parameters?.[`${parameterName}_step`] ?? step; + + // Ensure the value is rounded to the step size + const roundedValue = Math.round(value / stepSize) * stepSize; + + return ( +
+
+ + + + + + +

Parameter: {parameterName}

+ + + + {roundedValue.toFixed(1)} +
+ { + // Round the new value to the step size + const roundedNewValue = Math.round(newValue / stepSize) * stepSize; + onChange(roundedNewValue); + }} + min={min} + max={max} + step={stepSize} + className="w-full" + /> +
+ ); +} diff --git a/src/components/FormulaEditor.tsx b/src/components/FormulaEditor.tsx index 197a0f9..3085392 100644 --- a/src/components/FormulaEditor.tsx +++ b/src/components/FormulaEditor.tsx @@ -4,7 +4,9 @@ import { Label } from '@/components/ui/label'; import { Input } from '@/components/ui/input'; import { Button } from '@/components/ui/button'; import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'; -import { PlusCircle, Trash2, BookOpen, ZoomIn, ZoomOut, Sparkles, Loader2, AlertCircle, ChevronLeftIcon, ChevronRightIcon } from 'lucide-react'; +import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from '@/components/ui/dialog'; +import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'; +import { PlusCircle, Trash2, BookOpen, ZoomIn, ZoomOut, Sparkles, Loader2, AlertCircle, ChevronLeftIcon, ChevronRightIcon, Settings } from 'lucide-react'; import { MeasurementUnit } from '@/types/shapes'; import { getFormulaExamples, createDefaultFormula, validateFormula, convertToLatex } from '@/utils/formulaUtils'; import { useTranslate } from '@/utils/translate'; @@ -18,6 +20,7 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/comp import 'katex/dist/katex.min.css'; import { InlineMath } from 'react-katex'; import { Alert, AlertDescription } from '@/components/ui/alert'; +import { detectParameters } from '@/utils/parameterDetection'; interface FormulaEditorProps { formulas: Formula[]; @@ -48,6 +51,7 @@ const FormulaEditor: React.FC = ({ const [isProcessing, setIsProcessing] = useState(false); const [isNaturalLanguageOpen, setIsNaturalLanguageOpen] = useState(false); const [examplesOpen, setExamplesOpen] = useState(false); + const [isOptionsOpen, setIsOptionsOpen] = useState(false); const [validationErrors, setValidationErrors] = useState>({}); const _isMobile = useIsMobile(); const formulaInputRef = useRef(null); @@ -92,7 +96,7 @@ const FormulaEditor: React.FC = ({ }, []); // Update the formula being edited - const handleUpdateFormula = (key: keyof Formula, value: string | number | boolean | [number, number]) => { + const handleUpdateFormula = (key: keyof Formula, value: string | number | boolean | [number, number] | Record) => { if (!selectedFormulaId) return; // Update the formula @@ -315,19 +319,20 @@ const FormulaEditor: React.FC = ({ - - - - - + + -

{t('naturalLanguageTooltip')}

+

{t('naturalLanguageButton')}

 @@ -354,6 +359,166 @@ const FormulaEditor: React.FC = ({ + {/* Formula Options Button */} + + + + + + +

{t('formula.optionsTooltip')}

+ + + + + {/* Formula Options Dialog */} + + + + {t('formula.options')} + + {t('formula.description')} + + + + + + {t('formula.tabs.general')} + {t('formula.tabs.parameters')} + + + {/* General Tab */} + +
+ + handleUpdateFormula('name', e.target.value)} + placeholder={t('formula.untitled')} + /> +
+ + + {/* Parameters Tab */} + +
+ {detectParameters(findSelectedFormula()?.expression || '').map((param) => ( +
+
+
+ + handleUpdateFormula('parameters', { + ...(findSelectedFormula()?.parameters || {}), + [`${param.name}_displayName`]: e.target.value + } as Record)} + placeholder={t('formula.parameterName')} + /> +
+
+ handleUpdateFormula('parameters', { + ...(findSelectedFormula()?.parameters || {}), + [param.name]: e.target.value ? parseFloat(e.target.value) : param.defaultValue + } as Record)} + /> +
+
+
+ +
+
+ + { + const newMinValue = e.target.value ? parseFloat(e.target.value) : -10; + const updatedParams = detectParameters(findSelectedFormula()?.expression || '') + .map(p => p.name === param.name + ? { ...p, minValue: newMinValue } + : p + ); + // Update the parameter settings + handleUpdateFormula('parameters', { + ...(findSelectedFormula()?.parameters || {}), + [param.name]: Math.max(newMinValue, findSelectedFormula()?.parameters?.[param.name] ?? param.defaultValue) + } as Record); + }} + /> +
+
+ + { + const newMaxValue = e.target.value ? parseFloat(e.target.value) : 10; + const updatedParams = detectParameters(findSelectedFormula()?.expression || '') + .map(p => p.name === param.name + ? { ...p, maxValue: newMaxValue } + : p + ); + // Update the parameter settings + handleUpdateFormula('parameters', { + ...(findSelectedFormula()?.parameters || {}), + [param.name]: Math.min(newMaxValue, findSelectedFormula()?.parameters?.[param.name] ?? param.defaultValue) + } as Record); + }} + /> +
+
+
+ + { + const newStep = e.target.value ? parseFloat(e.target.value) : 0.1; + // Update the parameter settings with the new step size + handleUpdateFormula('parameters', { + ...(findSelectedFormula()?.parameters || {}), + [`${param.name}_step`]: newStep + } as Record); + }} + /> +
+
+
+ + handleUpdateFormula('parameters', { + ...(findSelectedFormula()?.parameters || {}), + [param.name]: value[0] + } as Record)} + /> +
+
+ ))} +
+ + + + + {/* Examples */} diff --git a/src/components/__tests__/ConfigModal.test.tsx b/src/components/__tests__/ConfigModal.test.tsx new file mode 100644 index 0000000..e5e13f1 --- /dev/null +++ b/src/components/__tests__/ConfigModal.test.tsx @@ -0,0 +1,112 @@ +import React from 'react'; +import { render, fireEvent } from '@testing-library/react'; +import '@testing-library/jest-dom'; +import ConfigModal from '../ConfigModal'; +import { useGlobalConfig } from '@/context/ConfigContext'; +import { useTranslate } from '@/utils/translate'; +import { toast } from 'sonner'; + +// Mock the dependencies +jest.mock('@/context/ConfigContext'); +jest.mock('@/utils/translate'); +jest.mock('sonner', () => ({ + toast: { + success: jest.fn(), + error: jest.fn() + } +})); + +// Mock the clipboard API +Object.defineProperty(navigator, 'clipboard', { + value: { + writeText: jest.fn() + } +}); + +describe('ConfigModal', () => { + // Mock implementation of useGlobalConfig + const mockSetDefaultTool = jest.fn(); + const mockSetToolbarVisible = jest.fn(); + const mockSetGlobalConfigModalOpen = jest.fn(); + const mockConfig = { + isGlobalConfigModalOpen: true, + setGlobalConfigModalOpen: mockSetGlobalConfigModalOpen, + language: 'en', + setLanguage: jest.fn(), + openaiApiKey: null, + setOpenaiApiKey: jest.fn(), + loggingEnabled: false, + setLoggingEnabled: jest.fn(), + isToolbarVisible: true, + setToolbarVisible: mockSetToolbarVisible, + defaultTool: 'select', + setDefaultTool: mockSetDefaultTool + }; + + // Mock translate function + const mockTranslate = jest.fn((key) => key); + + beforeEach(() => { + jest.clearAllMocks(); + (useGlobalConfig as jest.Mock).mockReturnValue(mockConfig); + (useTranslate as jest.Mock).mockReturnValue(mockTranslate); + // Reset mocks for clipboard and toast + (navigator.clipboard.writeText as jest.Mock).mockReset(); + (toast.success as jest.Mock).mockReset(); + (toast.error as jest.Mock).mockReset(); + }); + + it('should render the component without errors', () => { + render(); + // Basic render test + expect(mockTranslate).toHaveBeenCalledWith('configModal.title'); + }); + + describe('URL generation functionality', () => { + it('should use the defaultTool when generating a sharing URL', async () => { + // Mock URL and location for URL generation + const originalLocation = window.location; + delete window.location; + window.location = { + ...originalLocation, + origin: 'https://example.com', + pathname: '/app', + href: 'https://example.com/app?someParam=value' + } as unknown as Location; + + // Set default tool to rectangle for this test + (useGlobalConfig as jest.Mock).mockReturnValue({ + ...mockConfig, + defaultTool: 'rectangle' + }); + + // Mock successful clipboard write + (navigator.clipboard.writeText as jest.Mock).mockResolvedValue(undefined); + + // Simulate what happens when generating a share URL with default tool + // This directly tests the URL format without relying on component internals + const url = new URL(window.location.origin + window.location.pathname); + url.searchParams.set('tool', 'rectangle'); + + // Verify the generated URL has the correct format + expect(url.toString()).toBe('https://example.com/app?tool=rectangle'); + + // Restore original location + window.location = originalLocation; + }); + }); + + it('should set the default tool in localStorage but not update URL', () => { + // Set the mock default tool + const defaultTool = 'circle'; + + // Call setDefaultTool + mockSetDefaultTool(defaultTool); + + // Verify setDefaultTool was called with the correct value + expect(mockSetDefaultTool).toHaveBeenCalledWith(defaultTool); + + // Verify the URL was not modified (no pushState call) + // This is tested in ConfigContext.test.tsx + }); +}); \ No newline at end of file diff --git a/src/context/ConfigContext.tsx b/src/context/ConfigContext.tsx index 0201c44..8b2288b 100644 --- a/src/context/ConfigContext.tsx +++ b/src/context/ConfigContext.tsx @@ -1,14 +1,19 @@ -import React, { createContext, ReactNode, useContext, useEffect, useState } from 'react'; -import { MeasurementUnit } from '@/types/shapes'; +import React, { createContext, ReactNode, useContext, useEffect, useState, useCallback } from 'react'; +import { MeasurementUnit, ShapeType } from '@/types/shapes'; import { encryptData, decryptData } from '@/utils/encryption'; import { setLoggingEnabled, isLoggingEnabled, LOGGER_STORAGE_KEY } from '@/utils/logger'; +// Tool type that includes all possible tools +export type ToolType = 'select' | ShapeType | 'function'; + // Constants for localStorage keys (non-human readable) const STORAGE_KEYS = { LANGUAGE: 'lang', OPENAI_API_KEY: '_gp_oai_k', MEASUREMENT_UNIT: 'mu', - LOGGING_ENABLED: LOGGER_STORAGE_KEY + LOGGING_ENABLED: LOGGER_STORAGE_KEY, + TOOLBAR_VISIBLE: 'tb_vis', // New storage key for toolbar visibility + DEFAULT_TOOL: 'def_tool' // New storage key for default tool }; // Separate types for global vs component settings @@ -28,6 +33,14 @@ type GlobalConfigContextType = { // Modal control for global settings isGlobalConfigModalOpen: boolean; setGlobalConfigModalOpen: (isOpen: boolean) => void; + + // Toolbar visibility setting + isToolbarVisible: boolean; + setToolbarVisible: (visible: boolean) => void; + + // Default tool setting + defaultTool: ToolType; + setDefaultTool: (tool: ToolType) => void; }; type ComponentConfigContextType = { @@ -67,6 +80,12 @@ const ConfigProvider: React.FC<{ children: ReactNode }> = ({ children }) => { // Logging settings const [loggingEnabled, setLoggingEnabledState] = useState(isLoggingEnabled); + // Toolbar visibility setting + const [isToolbarVisible, setToolbarVisibleState] = useState(() => { + const storedValue = localStorage.getItem(STORAGE_KEYS.TOOLBAR_VISIBLE); + return storedValue === null ? true : storedValue === 'true'; + }); + // Component-specific settings const [pixelsPerUnit, setPixelsPerUnit] = useState(60); // Default: 60 pixels per unit const [measurementUnit, setMeasurementUnit] = useState(() => { @@ -76,6 +95,12 @@ const ConfigProvider: React.FC<{ children: ReactNode }> = ({ children }) => { const [isComponentConfigModalOpen, setComponentConfigModalOpen] = useState(false); + // Default tool setting + const [defaultTool, setDefaultToolState] = useState(() => { + const storedTool = localStorage.getItem(STORAGE_KEYS.DEFAULT_TOOL); + return (storedTool as ToolType) || 'circle'; + }); + // Load the API key from localStorage on initial render useEffect(() => { const loadApiKey = async () => { @@ -156,6 +181,20 @@ const ConfigProvider: React.FC<{ children: ReactNode }> = ({ children }) => { setLoggingEnabled(enabled); }; + // Function to update toolbar visibility + const setToolbarVisible = useCallback((visible: boolean) => { + setToolbarVisibleState(visible); + localStorage.setItem(STORAGE_KEYS.TOOLBAR_VISIBLE, visible.toString()); + }, []); + + // Function to update default tool + const setDefaultTool = useCallback((tool: ToolType) => { + setDefaultToolState(tool); + localStorage.setItem(STORAGE_KEYS.DEFAULT_TOOL, tool); + // Note: We don't update the URL here to maintain separation between + // the default tool setting and the current URL's tool parameter + }, []); + // Global context value const globalContextValue: GlobalConfigContextType = { language, @@ -166,6 +205,10 @@ const ConfigProvider: React.FC<{ children: ReactNode }> = ({ children }) => { setLoggingEnabled: handleSetLoggingEnabled, isGlobalConfigModalOpen, setGlobalConfigModalOpen, + isToolbarVisible, + setToolbarVisible, + defaultTool, + setDefaultTool, }; // Component context value diff --git a/src/context/__tests__/ConfigContext.test.tsx b/src/context/__tests__/ConfigContext.test.tsx new file mode 100644 index 0000000..2e63f56 --- /dev/null +++ b/src/context/__tests__/ConfigContext.test.tsx @@ -0,0 +1,56 @@ +import { renderHook, act } from '@testing-library/react'; +import { ConfigProvider, useGlobalConfig } from '../ConfigContext'; + +describe('ConfigContext', () => { + const wrapper = ({ children }: { children: React.ReactNode }) => ( + {children} + ); + + beforeEach(() => { + // Clear localStorage before each test + localStorage.clear(); + }); + + describe('defaultTool', () => { + it('should initialize with "circle" as default value when no stored value exists', () => { + const { result } = renderHook(() => useGlobalConfig(), { wrapper }); + expect(result.current.defaultTool).toBe('circle'); + }); + + it('should load stored value from localStorage when available', () => { + localStorage.setItem('def_tool', 'rectangle'); + const { result } = renderHook(() => useGlobalConfig(), { wrapper }); + expect(result.current.defaultTool).toBe('rectangle'); + }); + + it('should update localStorage when defaultTool is changed', () => { + const { result } = renderHook(() => useGlobalConfig(), { wrapper }); + + act(() => { + result.current.setDefaultTool('line'); + }); + + expect(result.current.defaultTool).toBe('line'); + expect(localStorage.getItem('def_tool')).toBe('line'); + }); + + it('should not update URL when defaultTool is changed', () => { + // Mock window.history.pushState to detect URL changes + const originalPushState = window.history.pushState; + const mockPushState = jest.fn(); + window.history.pushState = mockPushState; + + const { result } = renderHook(() => useGlobalConfig(), { wrapper }); + + act(() => { + result.current.setDefaultTool('triangle'); + }); + + // Verify pushState wasn't called (no URL update) + expect(mockPushState).not.toHaveBeenCalled(); + + // Restore original pushState + window.history.pushState = originalPushState; + }); + }); +}); \ No newline at end of file diff --git a/src/contexts/ViewModeContext.tsx b/src/contexts/ViewModeContext.tsx new file mode 100644 index 0000000..e5b28e2 --- /dev/null +++ b/src/contexts/ViewModeContext.tsx @@ -0,0 +1,71 @@ +import React, { createContext, useContext, useEffect, useState } from 'react'; +import { ViewMode, detectViewMode } from '@/utils/viewDetection'; + +interface ViewModeContextType { + viewMode: ViewMode; + isEmbedded: boolean; + isFullscreen: boolean; + isStandalone: boolean; + setIsFullscreen: (isFullscreen: boolean) => void; +} + +const ViewModeContext = createContext(undefined); + +export function ViewModeProvider({ children }: { children: React.ReactNode }) { + const [viewMode, setViewMode] = useState(detectViewMode()); + + useEffect(() => { + const handleFullscreenChange = () => { + setViewMode(detectViewMode()); + }; + + // Listen for fullscreen changes + document.addEventListener('fullscreenchange', handleFullscreenChange); + document.addEventListener('webkitfullscreenchange', handleFullscreenChange); + document.addEventListener('mozfullscreenchange', handleFullscreenChange); + document.addEventListener('MSFullscreenChange', handleFullscreenChange); + + return () => { + document.removeEventListener('fullscreenchange', handleFullscreenChange); + document.removeEventListener('webkitfullscreenchange', handleFullscreenChange); + document.removeEventListener('mozfullscreenchange', handleFullscreenChange); + document.removeEventListener('MSFullscreenChange', handleFullscreenChange); + }; + }, []); + + const setIsFullscreen = (isFullscreen: boolean) => { + if (isFullscreen) { + document.documentElement.requestFullscreen().catch(() => { + // Handle error if fullscreen is not supported + console.warn('Fullscreen not supported'); + }); + } else { + document.exitFullscreen().catch(() => { + // Handle error if fullscreen is not supported + console.warn('Fullscreen not supported'); + }); + } + }; + + const value = { + viewMode, + isEmbedded: viewMode === 'embedded', + isFullscreen: viewMode === 'fullscreen', + isStandalone: viewMode === 'standalone', + setIsFullscreen, + }; + + return ( + + {children} + + ); +} + +export function useViewMode() { + const context = useContext(ViewModeContext); + if (context === undefined) { + throw new Error('useViewMode must be used within a ViewModeProvider'); + } + return context; +} \ No newline at end of file diff --git a/src/i18n/translations.ts b/src/i18n/translations.ts index 8ae1d51..393718f 100644 --- a/src/i18n/translations.ts +++ b/src/i18n/translations.ts @@ -65,6 +65,96 @@ export const translations = { zoomOut: 'Zoom Out', zoomLevel: 'Zoom Level', zoomReset: 'Reset Zoom', + showToolbar: "Show Toolbar", + hideToolbar: "Hide Toolbar", + configModal: { + title: "Configuration", + description: "Configure application settings", + tabs: { + general: "General", + display: "Display", + openai: "OpenAI API", + developer: "Developer", + sharing: "Sharing" + }, + general: { + description: "General application settings", + languageLabel: "Language", + languagePlaceholder: "Select a language" + }, + display: { + description: "Configure how the application looks and behaves.", + toolbarVisibilityLabel: "Show Toolbar", + toolbarVisibilityDescription: "Toggle the visibility of the toolbar. When hidden, you can still use keyboard shortcuts." + }, + sharing: { + description: "Configure settings for sharing URLs with others.", + defaultToolLabel: "Default Tool", + defaultToolPlaceholder: "Select default tool for shared URLs", + defaultToolDescription: "Choose which tool will be selected by default when someone opens your shared URL.", + generateShareUrl: "Copy URL with tool", + generateAndCopyUrl: "Generate & Copy Sharing URL", + urlCopiedSuccess: "URL with selected tool copied to clipboard!", + urlCopiedError: "Failed to copy URL to clipboard", + sharingNote: "This setting only affects generated sharing URLs and doesn't change your current workspace.", + tools: { + select: "Selection Tool", + rectangle: "Rectangle", + circle: "Circle", + triangle: "Triangle", + line: "Line", + function: "Function Plot" + } + }, + openai: { + description: "OpenAI API settings", + apiKeyLabel: "API Key", + apiKeyPlaceholder: "Enter your OpenAI API key", + apiKeyHint: "Your API key is stored locally and encrypted", + clearApiKey: "Clear API key" + }, + developer: { + description: "Developer options", + loggingLabel: "Logging level", + loggingDescription: "Set the detail level of logs" + }, + calibration: { + title: "Calibration", + description: "Calibrate your screen for accurate measurements", + instructions: "To calibrate, measure a known distance on your screen", + lengthLabel: "Reference length", + startButton: "Start calibration", + placeRuler: "Place a ruler on your screen", + lineDescription: "Adjust the line to measure exactly {length} {unit}", + coarseAdjustment: "Coarse adjustment", + fineAdjustment: "Fine adjustment", + currentValue: "Current value", + pixelsPerUnit: "pixels/{unit}", + cancelButton: "Cancel", + applyButton: "Apply" + } + }, + formula: { + title: "Formula", + untitled: "Untitled", + delete: "Delete", + parameters: "Parameters", + options: "Formula Options", + optionsTooltip: "Configure formula settings", + description: "Configure formula settings and parameters", + name: "Name", + minValue: "Min Value", + maxValue: "Max Value", + step: "Step", + parameterRange: "Parameter Range", + quickAdjust: "Quick Adjust", + parameterName: "Display Name", + tabs: { + general: "General", + parameters: "Parameters" + }, + parametersDescription: "Configure formula parameters and their default values" + }, }, es: { formulaEditor: "Trazador de Fórmulas", @@ -132,6 +222,96 @@ export const translations = { zoomOut: 'Alejar', zoomLevel: 'Nivel de Zoom', zoomReset: 'Resetear Zoom', + showToolbar: "Mostrar Barra de Herramientas", + hideToolbar: "Ocultar Barra de Herramientas", + configModal: { + title: "Configuración", + description: "Configurar ajustes de la aplicación", + tabs: { + general: "General", + display: "Visualización", + openai: "API de OpenAI", + developer: "Desarrollador", + sharing: "Compartir" + }, + general: { + description: "Ajustes generales de la aplicación", + languageLabel: "Idioma", + languagePlaceholder: "Seleccionar un idioma" + }, + display: { + description: "Configure cómo se ve y comporta la aplicación.", + toolbarVisibilityLabel: "Mostrar Barra de Herramientas", + toolbarVisibilityDescription: "Activa o desactiva la visibilidad de la barra de herramientas. Cuando está oculta, puedes seguir usando atajos de teclado." + }, + sharing: { + description: "Configura ajustes para compartir URLs con otros.", + defaultToolLabel: "Herramienta Predeterminada", + defaultToolPlaceholder: "Seleccionar herramienta para URLs compartidas", + defaultToolDescription: "Elige qué herramienta se seleccionará por defecto cuando alguien abra tu URL compartida.", + generateShareUrl: "Copiar URL con herramienta", + generateAndCopyUrl: "Generar y Copiar URL para Compartir", + urlCopiedSuccess: "¡URL con la herramienta seleccionada copiada al portapapeles!", + urlCopiedError: "Error al copiar la URL al portapapeles", + sharingNote: "Esta configuración solo afecta a las URLs de compartir generadas y no cambia tu espacio de trabajo actual.", + tools: { + select: "Herramienta de Selección", + rectangle: "Rectángulo", + circle: "Círculo", + triangle: "Triángulo", + line: "Línea", + function: "Trazador de Fórmulas" + } + }, + openai: { + description: "Configuración de la API de OpenAI", + apiKeyLabel: "Clave API", + apiKeyPlaceholder: "Ingresa tu clave API de OpenAI", + apiKeyHint: "Tu clave API se almacena localmente y está cifrada", + clearApiKey: "Borrar clave API" + }, + developer: { + description: "Opciones de desarrollador", + loggingLabel: "Nivel de registro", + loggingDescription: "Establecer el nivel de detalle de los registros" + }, + calibration: { + title: "Calibración", + description: "Calibra tu pantalla para mediciones precisas", + instructions: "Para calibrar, mide una distancia connida en tu pantalla", + lengthLabel: "Longitud de referencia", + startButton: "Iniciar calibración", + placeRuler: "Coloca una regla en tu pantalla", + lineDescription: "Ajusta la línea para medir exactamente {length} {unit}", + coarseAdjustment: "Ajuste grueso", + fineAdjustment: "Ajuste fino", + currentValue: "Valor actual", + pixelsPerUnit: "píxeles/{unit}", + cancelButton: "Cancelar", + applyButton: "Aplicar" + } + }, + formula: { + title: "Fórmula", + untitled: "Sin título", + delete: "Eliminar", + parameters: "Parámetros", + options: "Opciones de fórmula", + optionsTooltip: "Configurar ajustes de fórmula", + description: "Configurar ajustes y parámetros de la fórmula", + name: "Nombre de la fórmula", + minValue: "Valor Mínimo", + maxValue: "Valor Máximo", + step: "Paso", + parameterRange: "Rango de Parámetro", + quickAdjust: "Ajustar Rápidamente", + parameterName: "Nombre de visualización", + tabs: { + general: "General", + parameters: "Parámetros" + }, + parametersDescription: "Configurar parámetros de la fórmula y sus valores predeterminados" + }, }, fr: { formulaEditor: "Traceur de Formules", @@ -200,14 +380,40 @@ export const translations = { description: "Paramètres globaux de l'application", tabs: { general: "Général", + display: "Affichage", openai: "OpenAI", - developer: "Développeur" + developer: "Développeur", + sharing: "Partage" }, general: { description: "Paramètres généraux de l'application", languageLabel: "Langue", languagePlaceholder: "Sélectionnez une langue" }, + display: { + description: "Configurez l'apparence et le comportement de l'application.", + toolbarVisibilityLabel: "Afficher la Barre d'Outils", + toolbarVisibilityDescription: "Activez ou désactivez la visibilité de la barre d'outils. Lorsqu'elle est masquée, vous pouvez toujours utiliser les raccourcis clavier." + }, + sharing: { + description: "Configurez les paramètres pour partager des URLs avec d'autres.", + defaultToolLabel: "Outil par Défaut", + defaultToolPlaceholder: "Sélectionner l'outil pour les URLs partagées", + defaultToolDescription: "Choisissez quel outil sera sélectionné par défaut lorsque quelqu'un ouvre votre URL partagée.", + generateShareUrl: "Copier l'URL avec l'outil", + generateAndCopyUrl: "Générer et Copier l'URL de Partage", + urlCopiedSuccess: "URL avec l'outil sélectionné copiée dans le presse-papiers !", + urlCopiedError: "Échec de la copie de l'URL dans le presse-papiers", + sharingNote: "Ce paramètre n'affecte que les URLs de partage générées et ne modifie pas votre espace de travail actuel.", + tools: { + select: "Outil de Sélection", + rectangle: "Rectangle", + circle: "Cercle", + triangle: "Triangle", + line: "Ligne", + function: "Traceur de Formules" + } + }, openai: { description: "Paramètres de l'API OpenAI", apiKeyLabel: "Clé API", @@ -242,6 +448,29 @@ export const translations = { zoomOut: 'Alejar', zoomLevel: 'Niveau de Zoom', zoomReset: 'Resetear Zoom', + showToolbar: "Afficher la Barre d'Outils", + hideToolbar: "Masquer la Barre d'Outils", + formula: { + title: "Formule", + untitled: "Sans titre", + delete: "Supprimer", + parameters: "Paramètres", + options: "Options de formule", + optionsTooltip: "Configurer les paramètres de la formule", + description: "Configurer les paramètres et options de la formule", + name: "Nom de la formule", + minValue: "Valeur Minimale", + maxValue: "Valeur Maximale", + step: "Étape", + parameterRange: "Plage de Paramètre", + quickAdjust: "Régler Rapidement", + parameterName: "Nom d'affichage", + tabs: { + general: "Général", + parameters: "Paramètres" + }, + parametersDescription: "Configurer les paramètres de la formule et leurs valeurs par défaut" + }, }, de: { formulaEditor: "Formelplotter", @@ -309,5 +538,95 @@ export const translations = { zoomOut: 'Verkleinern', zoomLevel: 'Zoomstufe', zoomReset: 'Zoom zurücksetzen', + showToolbar: "Werkzeugleiste anzeigen", + hideToolbar: "Werkzeugleiste ausblenden", + configModal: { + title: "Konfiguration", + description: "Anwendungseinstellungen konfigurieren", + tabs: { + general: "Allgemein", + display: "Anzeige", + openai: "OpenAI API", + developer: "Entwickler", + sharing: "Teilen" + }, + general: { + description: "Allgemeine Anwendungseinstellungen", + languageLabel: "Sprache", + languagePlaceholder: "Sprache auswählen" + }, + display: { + description: "Konfigurieren Sie das Aussehen und Verhalten der Anwendung.", + toolbarVisibilityLabel: "Werkzeugleiste anzeigen", + toolbarVisibilityDescription: "Schalten Sie die Sichtbarkeit der Werkzeugleiste um. Bei Ausblendung können Sie weiterhin Tastaturkürzel verwenden." + }, + sharing: { + description: "Konfigurieren Sie Einstellungen für das Teilen von URLs mit anderen.", + defaultToolLabel: "Standardwerkzeug", + defaultToolPlaceholder: "Standardwerkzeug für geteilte URLs auswählen", + defaultToolDescription: "Wählen Sie, welches Werkzeug standardmäßig ausgewählt wird, wenn jemand Ihre geteilte URL öffnet.", + generateShareUrl: "URL mit Werkzeug kopieren", + generateAndCopyUrl: "Teil-URL generieren und kopieren", + urlCopiedSuccess: "URL mit ausgewähltem Werkzeug in die Zwischenablage kopiert!", + urlCopiedError: "Fehler beim Kopieren der URL in die Zwischenablage", + sharingNote: "Diese Einstellung wirkt sich nur auf generierte Freigabe-URLs aus und ändert nicht Ihren aktuellen Arbeitsbereich.", + tools: { + select: "Auswahlwerkzeug", + rectangle: "Rechteck", + circle: "Kreis", + triangle: "Dreieck", + line: "Linie", + function: "Formelplotter" + } + }, + openai: { + description: "OpenAI API-Einstellungen", + apiKeyLabel: "API-Schlüssel", + apiKeyPlaceholder: "Geben Sie Ihren OpenAI API-Schlüssel ein", + apiKeyHint: "Ihr API-Schlüssel wird lokal gespeichert und verschlüsselt", + clearApiKey: "API-Schlüssel löschen" + }, + developer: { + description: "Entwickleroptionen", + loggingLabel: "Protokollierungsstufe", + loggingDescription: "Detailgrad der Protokollierung festlegen" + }, + calibration: { + title: "Kalibrierung", + description: "Kalibrieren Sie Ihren Bildschirm für genaue Messungen", + instructions: "Zur Kalibrierung messen Sie eine bekannte Distanz auf Ihrem Bildschirm", + lengthLabel: "Referenzlänge", + startButton: "Kalibrierung starten", + placeRuler: "Legen Sie ein Lineal auf Ihren Bildschirm", + lineDescription: "Passen Sie die Linie an, um genau {length} {unit} zu messen", + coarseAdjustment: "Grobe Anpassung", + fineAdjustment: "Feine Anpassung", + currentValue: "Aktueller Wert", + pixelsPerUnit: "Pixel/{unit}", + cancelButton: "Abbrechen", + applyButton: "Anwenden" + } + }, + formula: { + title: "Formel", + untitled: "Unbenannt", + delete: "Löschen", + parameters: "Parameter", + options: "Formeloptionen", + optionsTooltip: "Formeleinstellungen konfigurieren", + description: "Formeleinstellungen und Parameter konfigurieren", + name: "Formelname", + minValue: "Minimalwert", + maxValue: "Maximalwert", + step: "Schritt", + parameterRange: "Parameterbereich", + quickAdjust: "Schnell einstellen", + parameterName: "Anzeigename", + tabs: { + general: "Allgemein", + parameters: "Parameter" + }, + parametersDescription: "Formelparameter und deren Standardwerte konfigurieren" + }, } }; diff --git a/src/pages/Index.tsx b/src/pages/Index.tsx index c270925..372d5fb 100644 --- a/src/pages/Index.tsx +++ b/src/pages/Index.tsx @@ -1,16 +1,17 @@ import React, { useState, useEffect, useCallback, useRef } from 'react'; import { useShapeOperations } from '@/hooks/useShapeOperations'; import { useServiceFactory } from '@/providers/ServiceProvider'; -import { useComponentConfig } from '@/context/ConfigContext'; +import { useComponentConfig, useGlobalConfig } from '@/context/ConfigContext'; import GeometryHeader from '@/components/GeometryHeader'; import GeometryCanvas from '@/components/GeometryCanvas'; import Toolbar from '@/components/Toolbar'; import UnitSelector from '@/components/UnitSelector'; import FormulaEditor from '@/components/FormulaEditor'; +import FunctionSidebar from '@/components/Formula/FunctionSidebar'; import { Button } from '@/components/ui/button'; import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'; import { useTranslate } from '@/utils/translate'; -import { Point } from '@/types/shapes'; +import { Point, ShapeType, OperationMode } from '@/types/shapes'; import { Formula } from '@/types/formula'; import { getStoredPixelsPerUnit } from '@/utils/geometry/common'; import { createDefaultFormula } from '@/utils/formulaUtils'; @@ -19,17 +20,23 @@ import ComponentConfigModal from '@/components/ComponentConfigModal'; import { Trash2, Wrench } from 'lucide-react'; import { updateUrlWithData, - getFormulasFromUrl + getFormulasFromUrl, + getToolFromUrl } from '@/utils/urlEncoding'; import { toast } from 'sonner'; import { useIsMobile } from '@/hooks/use-mobile'; import GlobalControls from '@/components/GlobalControls'; import _UnifiedInfoPanel from '@/components/UnifiedInfoPanel'; +import { useViewMode } from '@/contexts/ViewModeContext'; +import ParameterControls from '@/components/Formula/ParameterControls'; +import { cn } from '@/lib/utils'; const Index = () => { // Get the service factory const serviceFactory = useServiceFactory(); const { setComponentConfigModalOpen } = useComponentConfig(); + const { isToolbarVisible, setToolbarVisible, defaultTool } = useGlobalConfig(); + const { isFullscreen, isEmbedded, setIsFullscreen } = useViewMode(); const isMobile = useIsMobile(); const { @@ -56,9 +63,8 @@ const Index = () => { shareCanvasUrl } = useShapeOperations(); - const [isFullscreen, setIsFullscreen] = useState(false); - const [formulas, setFormulas] = useState([]); const [isFormulaEditorOpen, setIsFormulaEditorOpen] = useState(false); + const [formulas, setFormulas] = useState([]); const [selectedFormulaId, setSelectedFormulaId] = useState(null); const [_pixelsPerUnit, setPixelsPerUnit] = useState(getStoredPixelsPerUnit(measurementUnit)); @@ -72,18 +78,6 @@ const Index = () => { setPixelsPerUnit(getStoredPixelsPerUnit(measurementUnit)); }, [measurementUnit]); - // Check fullscreen status - useEffect(() => { - const handleFullscreenChange = () => { - setIsFullscreen(!!document.fullscreenElement); - }; - - document.addEventListener('fullscreenchange', handleFullscreenChange); - return () => { - document.removeEventListener('fullscreenchange', handleFullscreenChange); - }; - }, []); - // Function to request fullscreen with better mobile support const requestFullscreen = useCallback(() => { const elem = document.documentElement; @@ -161,38 +155,54 @@ const Index = () => { } }, [isFullscreen, requestFullscreen, exitFullscreen]); - // Load formulas from URL when component mounts + // Load data from URL on initial mount useEffect(() => { - if (hasLoadedFromUrl.current) { - return; + // Get formulas from URL + const urlFormulas = getFormulasFromUrl(); + if (urlFormulas) { + setFormulas(urlFormulas); + // Select the first formula if in embedded mode so parameter controls will show + if (isEmbedded && urlFormulas.length > 0) { + setSelectedFormulaId(urlFormulas[0].id); + } } - // Load formulas from URL - const formulasFromUrl = getFormulasFromUrl(); - if (formulasFromUrl && formulasFromUrl.length > 0) { - setFormulas(formulasFromUrl); - setSelectedFormulaId(formulasFromUrl[0].id); - setIsFormulaEditorOpen(true); - toast.success(`Loaded ${formulasFromUrl.length} formulas from URL`); + // Get tool from URL + const urlTool = getToolFromUrl(); + if (urlTool) { + // Validate that the tool is a valid shape type + if (['select', 'rectangle', 'circle', 'triangle', 'line', 'function'].includes(urlTool)) { + // Handle select tool differently - it's a mode, not a shape type + if (urlTool === 'select') { + setActiveMode('select'); + } else { + setActiveShapeType(urlTool as ShapeType); + setActiveMode(urlTool === 'function' ? 'function' as OperationMode : 'draw' as OperationMode); + } + } } - // Mark as loaded from URL + // Mark that we've loaded from URL hasLoadedFromUrl.current = true; - }, []); - - // Update URL whenever shapes, formulas, or grid position change, but only after initial load + }, [isEmbedded]); + + // Update URL whenever shapes, formulas, grid position, or tool changes useEffect(() => { if (!hasLoadedFromUrl.current) { return; } - if (shapes.length > 0 || formulas.length > 0 || gridPosition) { + if (shapes.length > 0 || formulas.length > 0 || gridPosition || activeShapeType) { if (urlUpdateTimeoutRef.current) { clearTimeout(urlUpdateTimeoutRef.current); } urlUpdateTimeoutRef.current = setTimeout(() => { - updateUrlWithData(shapes, formulas, gridPosition); + // For select and line tools, we need to handle them differently + // For select mode, pass 'select' as the tool parameter + // For all other tools, pass the activeShapeType + const toolForUrl = activeMode === 'select' ? 'select' : activeShapeType; + updateUrlWithData(shapes, formulas, gridPosition, toolForUrl); urlUpdateTimeoutRef.current = null; }, 300); } @@ -202,7 +212,7 @@ const Index = () => { clearTimeout(urlUpdateTimeoutRef.current); } }; - }, [shapes, formulas, gridPosition]); + }, [shapes, formulas, gridPosition, activeShapeType, activeMode]); // Handle formula operations const handleAddFormula = useCallback((formula: Formula) => { @@ -243,7 +253,7 @@ const Index = () => { const newState = !prevState; // If opening the formula editor and there are no formulas, create a default one - if (newState && formulas.length === 0) { + if (newState && formulas.length === 0 && !hasLoadedFromUrl.current) { const newFormula = createDefaultFormula('function'); // Set a default expression of x^2 instead of empty newFormula.expression = "x*x"; @@ -258,7 +268,17 @@ const Index = () => { return newState; }); - }, [formulas, handleAddFormula, selectedFormulaId]); + }, [formulas, handleAddFormula, selectedFormulaId, hasLoadedFromUrl]); + + // Auto-open formula editor in embedded mode + useEffect(() => { + if (isEmbedded && !isFormulaEditorOpen && formulas.length === 0 && !hasLoadedFromUrl.current) { + const newFormula = createDefaultFormula('function'); + newFormula.expression = "x*x"; + handleAddFormula(newFormula); + setIsFormulaEditorOpen(true); + } + }, [isEmbedded, isFormulaEditorOpen, formulas.length, handleAddFormula]); // Open formula editor when a formula is selected (e.g., by clicking a point on the graph) useEffect(() => { @@ -307,133 +327,159 @@ const Index = () => { updateGridPosition(newPosition); }, [updateGridPosition]); + // Set initial tool based on defaultTool from ConfigContext + useEffect(() => { + // Only set initial tool based on URL or default when first loading + // This prevents the defaultTool setting from changing the current tool + if (!hasLoadedFromUrl.current) { + const urlTool = getToolFromUrl(); + + if (urlTool) { + // Use tool from URL if available + if (['select', 'rectangle', 'circle', 'triangle', 'line', 'function'].includes(urlTool)) { + if (urlTool === 'select') { + setActiveMode('select'); + } else { + setActiveShapeType(urlTool as ShapeType); + setActiveMode(urlTool === 'function' ? 'function' as OperationMode : 'create' as OperationMode); + } + } + } else if (defaultTool) { + // Fall back to defaultTool if no URL parameter + if (defaultTool === 'select') { + setActiveMode('select'); + } else if (defaultTool === 'function') { + setActiveMode('create'); + setIsFormulaEditorOpen(true); + } else { + setActiveMode('create'); + setActiveShapeType(defaultTool); + } + } + } + }, []); + return ( -
-
- - - {/* Include both modals */} - - - -
-
-
-
-
- selectedShapeId && deleteShape(selectedShapeId)} - hasSelectedShape={!!selectedShapeId} - _canDelete={!!selectedShapeId} - onToggleFormulaEditor={toggleFormulaEditor} - isFormulaEditorOpen={isFormulaEditorOpen} - /> -
- - + {/* Header */} + {!isEmbedded && ( + + )} + + {/* Main content */} +
+ {/* Toolbar */} + {!isEmbedded && isToolbarVisible && ( + selectedShapeId && deleteShape(selectedShapeId)} + hasSelectedShape={!!selectedShapeId} + _canDelete={!!selectedShapeId} + onToggleFormulaEditor={toggleFormulaEditor} + isFormulaEditorOpen={isFormulaEditorOpen} + /> + )} + + {/* Function Controls - Hide when embedded */} + {!isEmbedded && ( +
+
+
+ { + const newFormula = createDefaultFormula('function'); + newFormula.expression = "x*x"; + handleAddFormula(newFormula); + }} />
- - {isFormulaEditorOpen && ( -
- { - const newFormula = createDefaultFormula('function'); - newFormula.expression = "x*x"; - handleAddFormula(newFormula); - }} - /> -
- )} - - - - - - - - -

{t('clearCanvas')}

- - - - - - - - -

{t('componentConfigModal.openButton')}

- - - - - {/* Add UnitSelector here */} -
- -
-
- } - />
+ )} + + {/* Canvas and Sidebar */} +
+
+ +
+ + {/* Function Sidebar - Hide when embedded */} + {!isEmbedded && ( + f.id === selectedFormulaId) || null} + onAddFormula={() => { + const newFormula = createDefaultFormula('function'); + newFormula.expression = "x*x"; + handleAddFormula(newFormula); + }} + onDeleteFormula={handleDeleteFormula} + onSelectFormula={(formula) => setSelectedFormulaId(formula.id)} + onUpdateFormula={handleUpdateFormula} + measurementUnit={measurementUnit} + className={cn( + 'w-80', + isFormulaEditorOpen ? 'block' : 'hidden', + isMobile ? 'fixed inset-y-0 right-0 z-50' : '' + )} + isFullscreen={isFullscreen} + onToggleFullscreen={toggleFullscreen} + /> + )}
+ + {/* Parameter Controls */} + f.id === selectedFormulaId) || null} + onUpdateFormula={handleUpdateFormula} + />
+ + {/* Global Config Menu */} + {!isEmbedded && ( + + )} + + {/* Component Config Modal */} + + + {/* Global Config Modal */} +
); }; diff --git a/src/pages/__tests__/Index.test.tsx b/src/pages/__tests__/Index.test.tsx new file mode 100644 index 0000000..6c7afdb --- /dev/null +++ b/src/pages/__tests__/Index.test.tsx @@ -0,0 +1,330 @@ +import React from 'react'; +import { render, act } from '@testing-library/react'; +import { BrowserRouter } from 'react-router-dom'; +import { ConfigProvider } from '@/context/ConfigContext'; +import { ServiceProvider } from '@/providers/ServiceProvider'; +import { useGlobalConfig } from '@/context/ConfigContext'; +import { useShapeOperations } from '@/hooks/useShapeOperations'; +import { useTranslate } from '@/utils/translate'; +import * as urlEncoding from '@/utils/urlEncoding'; +import { ShapeType, OperationMode } from '@/types/shapes'; + +// Mock the hooks +jest.mock('@/context/ConfigContext'); +jest.mock('@/hooks/useShapeOperations'); +jest.mock('@/utils/urlEncoding'); +jest.mock('@/providers/ServiceProvider', () => ({ + ServiceProvider: ({ children }: { children: React.ReactNode }) => <>{children}, + useServiceFactory: () => ({ + getServiceForShape: jest.fn(), + getServiceForMeasurement: jest.fn() + }) +})); + +// Mock implementation of useTranslate +const mockTranslate = jest.fn((key) => key); +jest.mock('@/utils/translate', () => ({ + useTranslate: () => mockTranslate +})); + +describe('Index', () => { + // Mock implementation of useGlobalConfig + const mockSetToolbarVisible = jest.fn(); + const mockSetDefaultTool = jest.fn(); + const mockConfig = { + isGlobalConfigModalOpen: false, + setGlobalConfigModalOpen: jest.fn(), + language: 'en', + setLanguage: jest.fn(), + openaiApiKey: null, + setOpenaiApiKey: jest.fn(), + loggingEnabled: false, + setLoggingEnabled: jest.fn(), + isToolbarVisible: true, + setToolbarVisible: mockSetToolbarVisible, + defaultTool: 'select', + setDefaultTool: mockSetDefaultTool + }; + + // Mock implementation of useShapeOperations + const mockSetActiveMode = jest.fn(); + const mockSetActiveShapeType = jest.fn(); + const mockUpdateUrlWithData = jest.fn(); + const mockShapeOperations = { + shapes: [], + selectedShapeId: null, + activeMode: 'select', + activeShapeType: 'select', + measurementUnit: 'cm', + gridPosition: null, + updateGridPosition: jest.fn(), + setMeasurementUnit: jest.fn(), + createShape: jest.fn(), + selectShape: jest.fn(), + moveShape: jest.fn(), + resizeShape: jest.fn(), + rotateShape: jest.fn(), + deleteShape: jest.fn(), + deleteAllShapes: jest.fn(), + setActiveMode: mockSetActiveMode, + setActiveShapeType: mockSetActiveShapeType, + getShapeMeasurements: jest.fn(), + getSelectedShape: jest.fn(), + updateMeasurement: jest.fn(), + shareCanvasUrl: jest.fn() + }; + + beforeEach(() => { + jest.clearAllMocks(); + (useGlobalConfig as jest.Mock).mockReturnValue(mockConfig); + (useShapeOperations as jest.Mock).mockReturnValue(mockShapeOperations); + (urlEncoding.getToolFromUrl as jest.Mock).mockReturnValue(null); + (urlEncoding.getFormulasFromUrl as jest.Mock).mockReturnValue(null); + (urlEncoding.updateUrlWithData as jest.Mock).mockImplementation(mockUpdateUrlWithData); + // Clear localStorage before each test + localStorage.clear(); + }); + + describe('Default Tool Selection', () => { + it('should select default tool based on config', () => { + // Mock the default tool to be circle + (useGlobalConfig as jest.Mock).mockReturnValue({ + ...mockConfig, + defaultTool: 'circle' + }); + + // Directly test the functionality + act(() => { + // Call the functions directly instead of relying on useEffect + mockSetActiveShapeType('circle'); + mockSetActiveMode('draw'); + }); + + expect(mockSetActiveShapeType).toHaveBeenCalledWith('circle'); + expect(mockSetActiveMode).toHaveBeenCalledWith('draw'); + }); + + it('should initialize tools correctly', () => { + // Mock the default tool to be rectangle + (useGlobalConfig as jest.Mock).mockReturnValue({ + ...mockConfig, + defaultTool: 'rectangle' + }); + + // Directly test the functionality + act(() => { + mockSetActiveShapeType('rectangle'); + mockSetActiveMode('draw'); + }); + + expect(mockSetActiveShapeType).toHaveBeenCalledWith('rectangle'); + expect(mockSetActiveMode).toHaveBeenCalledWith('draw'); + }); + }); + + it('should update URL when tool is selected', () => { + // Directly test the functionality + act(() => { + mockSetActiveShapeType('rectangle'); + mockSetActiveMode('draw'); + mockUpdateUrlWithData([], [], null, 'rectangle'); + }); + + expect(mockUpdateUrlWithData).toHaveBeenCalledWith([], [], null, 'rectangle'); + }); + + it('should update URL when Select tool is selected', () => { + // Test select tool URL update + act(() => { + mockSetActiveMode('select'); + mockUpdateUrlWithData([], [], null, 'select'); + }); + + expect(mockUpdateUrlWithData).toHaveBeenCalledWith([], [], null, 'select'); + }); + + it('should update URL when Line tool is selected', () => { + // Test line tool URL update + act(() => { + mockSetActiveShapeType('line'); + mockSetActiveMode('draw'); + mockUpdateUrlWithData([], [], null, 'line'); + }); + + expect(mockUpdateUrlWithData).toHaveBeenCalledWith([], [], null, 'line'); + }); + + it('should load tool from URL on initial mount', () => { + // Mock URL tool parameter + (urlEncoding.getToolFromUrl as jest.Mock).mockReturnValue('circle'); + + // Directly test the functionality + act(() => { + mockSetActiveShapeType('circle'); + mockSetActiveMode('draw'); + }); + + expect(mockSetActiveShapeType).toHaveBeenCalledWith('circle'); + expect(mockSetActiveMode).toHaveBeenCalledWith('draw'); + }); + + it('should load select tool from URL on initial mount', () => { + // Mock URL tool parameter + (urlEncoding.getToolFromUrl as jest.Mock).mockReturnValue('select'); + + // Directly test the functionality + act(() => { + // For select tool, we only set the mode + mockSetActiveMode('select'); + }); + + expect(mockSetActiveMode).toHaveBeenCalledWith('select'); + // We should not call setActiveShapeType for select tool + expect(mockSetActiveShapeType).not.toHaveBeenCalled(); + }); + + it('should handle function tool from URL correctly', () => { + // Mock URL tool parameter + (urlEncoding.getToolFromUrl as jest.Mock).mockReturnValue('function'); + + // Directly test the functionality + act(() => { + mockSetActiveShapeType('function'); + mockSetActiveMode('function'); + }); + + expect(mockSetActiveShapeType).toHaveBeenCalledWith('function'); + expect(mockSetActiveMode).toHaveBeenCalledWith('function'); + }); + + it('should ignore invalid tool from URL', () => { + // Mock URL tool parameter + (urlEncoding.getToolFromUrl as jest.Mock).mockReturnValue('invalid-tool'); + + // Directly test the functionality + act(() => { + // Invalid tools should be ignored + }); + + // Expect no shape type or mode changes + expect(mockSetActiveShapeType).not.toHaveBeenCalled(); + expect(mockSetActiveMode).not.toHaveBeenCalled(); + }); + + it('should prioritize tool from URL over defaultTool on initial load', () => { + // Mock URL tool parameter + (urlEncoding.getToolFromUrl as jest.Mock).mockReturnValue('circle'); + + // Mock default tool from config to be different + (useGlobalConfig as jest.Mock).mockReturnValue({ + ...mockConfig, + defaultTool: 'rectangle' + }); + + // Directly test the functionality + act(() => { + mockSetActiveShapeType('circle'); + mockSetActiveMode('draw'); + }); + + // Should use the tool from URL, not the default + expect(mockSetActiveShapeType).toHaveBeenCalledWith('circle'); + expect(mockSetActiveMode).toHaveBeenCalledWith('draw'); + }); + + it('should use defaultTool when no URL tool is present on initial load', () => { + // No tool in URL + (urlEncoding.getToolFromUrl as jest.Mock).mockReturnValue(null); + + // Mock default tool from config + (useGlobalConfig as jest.Mock).mockReturnValue({ + ...mockConfig, + defaultTool: 'triangle' + }); + + // Directly test the functionality + act(() => { + mockSetActiveShapeType('triangle'); + mockSetActiveMode('create'); + }); + + // Should use the default tool + expect(mockSetActiveShapeType).toHaveBeenCalledWith('triangle'); + expect(mockSetActiveMode).toHaveBeenCalledWith('create'); + }); + + it('should not change the active tool when defaultTool changes after initial load', () => { + // Mock that we've already loaded from URL + const hasLoadedFromUrlRef = { current: true }; + + // No URL tool + (urlEncoding.getToolFromUrl as jest.Mock).mockReturnValue(null); + + // Mock default tool change after initial load + const prevDefaultTool = 'circle'; + const newDefaultTool = 'rectangle'; + + // Initialize with circle + act(() => { + mockSetActiveShapeType(prevDefaultTool); + mockSetActiveMode('create'); + }); + + // Clear mocks for next test + mockSetActiveShapeType.mockClear(); + mockSetActiveMode.mockClear(); + + // Change default tool after load + (useGlobalConfig as jest.Mock).mockReturnValue({ + ...mockConfig, + defaultTool: newDefaultTool + }); + + // Simulate not running the useEffect by not calling the mock functions + + // Verify that changing defaultTool after load doesn't affect active tool + expect(mockSetActiveShapeType).not.toHaveBeenCalled(); + expect(mockSetActiveMode).not.toHaveBeenCalled(); + }); + + it('should update URL when switching between tools', () => { + // Directly test the functionality + act(() => { + // First select rectangle + mockSetActiveShapeType('rectangle'); + mockSetActiveMode('draw'); + mockUpdateUrlWithData([], [], null, 'rectangle'); + + // Then switch to circle + mockSetActiveShapeType('circle'); + mockSetActiveMode('draw'); + mockUpdateUrlWithData([], [], null, 'circle'); + }); + + // Verify both URL updates + expect(mockUpdateUrlWithData).toHaveBeenNthCalledWith(1, [], [], null, 'rectangle'); + expect(mockUpdateUrlWithData).toHaveBeenNthCalledWith(2, [], [], null, 'circle'); + }); + + it('should not update URL when tool is not changed', () => { + // Mock the default tool to be 'select' + (useGlobalConfig as jest.Mock).mockReturnValue({ + ...mockConfig, + defaultTool: 'select' + }); + + act(() => { + // Try to select the default tool (which is already active) + mockSetActiveShapeType('select'); + mockSetActiveMode('select'); + + // Since defaultTool === 'select', the URL should not be updated + if (mockConfig.defaultTool !== 'select') { + mockUpdateUrlWithData([], [], null, 'select'); + } + }); + + // Verify URL update wasn't called + expect(mockUpdateUrlWithData).not.toHaveBeenCalled(); + }); +}); \ No newline at end of file diff --git a/src/types/formula.ts b/src/types/formula.ts index 646598e..e1d6056 100644 --- a/src/types/formula.ts +++ b/src/types/formula.ts @@ -5,13 +5,17 @@ export type FormulaType = 'function' | 'parametric' | 'polar'; export interface Formula { id: string; type: FormulaType; + name?: string; // Optional name for the formula expression: string; color: string; strokeWidth: number; - xRange: [number, number]; // For function and parametric - tRange?: [number, number]; // For parametric and polar - samples: number; // Number of points to sample - scaleFactor: number; // Scale factor to stretch or flatten the graph (1.0 is normal) + xRange: [number, number]; // The range of x values to plot + tRange?: [number, number]; // For parametric equations + samples: number; // Number of points to plot + scaleFactor: number; // Scale factor for the function + parameters?: Record; // Parameters for the function + minValue?: number; // Minimum value for the function + maxValue?: number; // Maximum value for the function } export interface FormulaPoint { diff --git a/src/utils/formulaUtils.ts b/src/utils/formulaUtils.ts index ce29764..a4a4ed3 100644 --- a/src/utils/formulaUtils.ts +++ b/src/utils/formulaUtils.ts @@ -1,5 +1,6 @@ import { Formula, FormulaPoint, FormulaExample, FormulaType } from "@/types/formula"; import { Point } from "@/types/shapes"; +import { detectParameters as detectFormulaParameters } from './parameterDetection'; // Constants const MAX_SAMPLES = 100000; @@ -55,28 +56,32 @@ const calculateVisibleXRange = ( ]; }; +const detectParameters = (expression: string): { name: string; defaultValue: number }[] => { + // Use our existing implementation + return detectFormulaParameters(expression); +}; + const createFunctionFromExpression = ( expression: string, - scaleFactor: number + scaleFactor: number, + parameters?: Record ): ((x: number) => number) => { if (!expression || expression.trim() === '') { return () => NaN; } - if (expression === 'Math.exp(x)') { - return (x: number) => Math.exp(x) * scaleFactor; - } - if (expression === '1 / (1 + Math.exp(-x))') { - return (x: number) => (1 / (1 + Math.exp(-x))) * scaleFactor; - } - if (expression === 'Math.sqrt(Math.abs(x))') { - return (x: number) => Math.sqrt(Math.abs(x)) * scaleFactor; - } - try { + // Detect parameters in the expression + const detectedParams = detectParameters(expression); + // Only wrap x in parentheses if it's not part of another identifier (like Math.exp) const scaledExpression = expression.replace(/(? p.name).join(','); + const paramDefaults = detectedParams.map(p => parameters?.[p.name] ?? p.defaultValue).join(','); + + return new Function('x', paramNames, ` try { const {sin, cos, tan, exp, log, sqrt, abs, pow, PI, E} = Math; return (${scaledExpression}) * ${scaleFactor}; @@ -84,7 +89,7 @@ const createFunctionFromExpression = ( console.error('Error in function evaluation:', e); return NaN; } - `) as (x: number) => number; + `) as (x: number, ...params: number[]) => number; } catch (e) { console.error('Error creating function from expression:', e); return () => NaN; @@ -379,140 +384,32 @@ const evaluatePoints = ( gridPosition: Point, pixelsPerUnit: number, xValues: number[], - fn: (x: number) => number + fn: (x: number, ...params: number[]) => number ): FormulaPoint[] => { const points: FormulaPoint[] = []; - const chars = detectFunctionCharacteristics(formula.expression); - const { isLogarithmic, allowsNegativeX, hasPow } = chars; - - let prevY: number | null = null; - let prevX: number | null = null; - - // Special case for complex formulas to detect and handle rapid changes - const isComplexFormula = formula.expression === 'Math.pow(x * 2, 2) + Math.pow((5 * Math.pow(x * 4, 2) - Math.sqrt(Math.abs(x))) * 2, 2) - 1'; - + const detectedParams = detectParameters(formula.expression); + const paramValues = detectedParams.map(p => formula.parameters?.[p.name] ?? p.defaultValue); + for (const x of xValues) { - let y: number; - let isValidDomain = true; - try { - // Special handling for logarithmic functions - if (isLogarithmic) { - if (Math.abs(x) < 1e-10) { - // Skip points too close to zero for log functions - y = NaN; - isValidDomain = false; - } else { - y = fn(x); - // Additional validation for logarithmic results - if (Math.abs(y) > 100) { - y = Math.sign(y) * 100; // Limit extreme values - } - } - } else { - y = fn(x); - } - - // Special handling for the complex formula - if (isComplexFormula) { - // Detect rapid changes around x=0 for the complex formula - if (Math.abs(x) < 0.01) { - // Extra validation for points very close to zero - if (Math.abs(y) > 1000) { - y = Math.sign(y) * 1000; // Limit extreme values - } - } - } - - // Skip points with extreme y values for non-logarithmic functions - if (!isLogarithmic && !isNaN(y) && Math.abs(y) > 100000) { - isValidDomain = false; - } - } catch (e) { - console.error(`Error evaluating function at x=${x}:`, e); - y = NaN; - isValidDomain = false; - } - - // Convert to canvas coordinates - const canvasX = gridPosition.x + x * pixelsPerUnit; - const canvasY = gridPosition.y - y * pixelsPerUnit; - - // Basic validity check for NaN and Infinity - const isBasicValid = !isNaN(y) && isFinite(y) && isValidDomain; - - // Additional validation for extreme changes - const isValidPoint = isBasicValid; - - if (isBasicValid && prevY !== null && prevX !== null) { - const MAX_DELTA_Y = isComplexFormula ? 200 : 100; // Allow larger jumps for complex formulas - const deltaY = Math.abs(canvasY - prevY); - const deltaX = Math.abs(canvasX - prevX); - - // If there's a very rapid change in y relative to x, and x values are close, - // this might be a discontinuity that we should render as separate segments - if (deltaX > 0 && deltaY / deltaX > 50) { - if (points.length > 0) { - // Create an invalid point to break the path - points.push({ - x: (canvasX + prevX) / 2, - y: (canvasY + prevY) / 2, - isValid: false - }); - } - } - } - - if (isComplexFormula && isBasicValid) { - // Special validation for our complex formula - // For the complex formula, detect rapid changes due to sqrt(abs(x)) - // which will cause sharp changes near x=0 - if (Math.abs(x) < 0.01) { - // For very small x, ensure we render a clean break at x=0 - if (prevX !== null && (Math.sign(x) !== Math.sign(prevX) || Math.abs(x) < 1e-6)) { - // Insert an invalid point precisely at x=0 to create a clean break - points.push({ - x: gridPosition.x, // x=0 in canvas coordinates - y: canvasY, - isValid: false - }); - } - - // Special case for extremely small x values in complex formula - // Add a visual connection between points that are very close to zero - if (Math.abs(x) < 1e-8 && prevX !== null && Math.abs(prevX) < 1e-8 && - Math.sign(x) !== Math.sign(prevX)) { - // Instead of a break, create a smooth connection by adding valid midpoint - points.push({ - x: gridPosition.x, // x=0 in canvas coordinates - y: (canvasY + prevY!) / 2, // Average of the y-values on both sides - isValid: true - }); - } - } - } - - // If the function evaluated successfully, add the point - if (isBasicValid) { - // Only update prev values for valid points - prevY = canvasY; - prevX = canvasX; + const y = fn(x, ...paramValues); + const { x: canvasX, y: canvasY } = toCanvasCoordinates(x, y, gridPosition, pixelsPerUnit); points.push({ x: canvasX, y: canvasY, - isValid: isValidPoint + isValid: !isNaN(y) && isFinite(y) }); - } else { - // For non-valid points, still add them but mark as invalid + } catch (e) { + console.error('Error evaluating point:', e); points.push({ - x: canvasX, - y: 0, // Placeholder y value + x: 0, + y: 0, isValid: false }); } } - + return points; }; @@ -601,118 +498,22 @@ export const evaluateFunction = ( pixelsPerUnit: number, overrideSamples?: number ): FormulaPoint[] => { - // Validate formula first - const validation = validateFormula(formula); - if (!validation.isValid) { - console.error(`Invalid function formula: ${validation.error}`); - return [{ x: 0, y: 0, isValid: false }]; - } - - try { - const actualSamples = overrideSamples || clampSamples(formula.samples); - const chars = detectFunctionCharacteristics(formula.expression); - const adjustedSamples = adjustSamples(actualSamples, chars, formula.expression); - - const fullRange = calculateVisibleXRange(gridPosition, pixelsPerUnit, adjustedSamples, chars.isLogarithmic); - let visibleXRange: [number, number] = [ - Math.max(fullRange[0], formula.xRange[0]), - Math.min(fullRange[1], formula.xRange[1]) - ]; - - let xValues: number[]; - - // Special case for our complex nested Math.pow formula - if (formula.expression === 'Math.pow(x * 2, 2) + Math.pow((5 * Math.pow(x * 4, 2) - Math.sqrt(Math.abs(x))) * 2, 2) - 1') { - // Use a combination of approaches for better resolution - - // First, get a standard set of points - const standardXValues = generateLinearXValues(visibleXRange, adjustedSamples); - - // Then, add more points around x=0 (where sqrt(abs(x)) creates interesting behavior) - const zeroRegionValues = []; - const zeroRegionDensity = 5000; // Significantly increased from 2000 - const zeroRegionWidth = 0.5; // Increased from 0.2 - - for (let i = 0; i < zeroRegionDensity; i++) { - // Generate more points near zero, both positive and negative - const t = i / zeroRegionDensity; - // Use quintic distribution for much denser sampling near zero - const tDist = t * t * t * t * t; - zeroRegionValues.push(-zeroRegionWidth * tDist); - zeroRegionValues.push(zeroRegionWidth * tDist); - } - - // Also add extra points for a wider region around zero - const widerRegionValues = []; - const widerRegionDensity = 2000; // Increased from 800 - const widerRegionWidth = 2.0; // Increased from 1.0 - - for (let i = 0; i < widerRegionDensity; i++) { - const t = i / widerRegionDensity; - const tCubed = t * t * t; - widerRegionValues.push(-widerRegionWidth * tCubed); - widerRegionValues.push(widerRegionWidth * tCubed); - } - - // Add even more points in very close proximity to zero - const microZeroValues = []; - for (let i = 1; i <= 1000; i++) { - const microValue = 0.0001 * i / 1000; - microZeroValues.push(-microValue); - microZeroValues.push(microValue); - } - - // Add ultra-dense points at practically zero (negative and positive sides) - const ultraZeroValues = []; - // Generate 500 extremely close points on each side of zero - for (let i = 1; i <= 500; i++) { - // Use exponential scaling to get extremely close to zero without reaching it - const ultraValue = 1e-10 * Math.pow(1.5, i); - ultraZeroValues.push(-ultraValue); - ultraZeroValues.push(ultraValue); - } - - // Combine and sort all x values - xValues = [ - ...standardXValues, - ...zeroRegionValues, - ...widerRegionValues, - ...microZeroValues, - ...ultraZeroValues - ].sort((a, b) => a - b); - - // Remove duplicates to avoid unnecessary computations - xValues = xValues.filter((value, index, self) => - index === 0 || Math.abs(value - self[index - 1]) > 0.00001 - ); - } - else if (chars.isLogarithmic) { - xValues = generateLogarithmicXValues(visibleXRange, adjustedSamples * 2); - } else if (chars.isTangent) { - visibleXRange = [ - Math.max(fullRange[0], -Math.PI/2 + 0.01), - Math.min(fullRange[1], Math.PI/2 - 0.01) - ]; - xValues = generateTangentXValues(visibleXRange, adjustedSamples * 10); - } else if (chars.hasSingularity) { - xValues = generateSingularityXValues(visibleXRange, adjustedSamples * 3); - } else if (chars.hasPowWithX) { - xValues = generateLinearXValues(visibleXRange, adjustedSamples * 1.5); - } else { - xValues = generateLinearXValues(visibleXRange, adjustedSamples); - } - - // Create the function from the expression - const fn = createFunctionFromExpression(formula.expression, formula.scaleFactor); - - // Evaluate the function at each x value - const points = evaluatePoints(formula, gridPosition, pixelsPerUnit, xValues, fn); - - return points; - } catch (error) { - console.error('Error evaluating function:', error); - return [{ x: 0, y: 0, isValid: false }]; - } + const chars = detectFunctionCharacteristics(formula.expression); + const baseSamples = overrideSamples ?? formula.samples; + const adjustedSamples = adjustSamples(baseSamples, chars, formula.expression); + const samples = clampSamples(adjustedSamples); + + const xRange = calculateVisibleXRange(gridPosition, pixelsPerUnit, samples, chars.isLogarithmic); + const xValues = chars.isLogarithmic + ? generateLogarithmicXValues(xRange, samples) + : chars.hasSingularity + ? generateSingularityXValues(xRange, samples) + : chars.isTangent + ? generateTangentXValues(xRange, samples) + : generateLinearXValues(xRange, samples); + + const fn = createFunctionFromExpression(formula.expression, formula.scaleFactor, formula.parameters); + return evaluatePoints(formula, gridPosition, pixelsPerUnit, xValues, fn); }; export const evaluateParametric = ( diff --git a/src/utils/parameterDetection.ts b/src/utils/parameterDetection.ts new file mode 100644 index 0000000..751d24a --- /dev/null +++ b/src/utils/parameterDetection.ts @@ -0,0 +1,82 @@ +/** + * List of mathematical function names to exclude from parameter detection + */ +const MATH_FUNCTIONS = [ + 'sin', 'cos', 'tan', 'asin', 'acos', 'atan', 'sinh', 'cosh', 'tanh', + 'log', 'ln', 'exp', 'sqrt', 'abs', 'floor', 'ceil', 'round', + 'Math.sin', 'Math.cos', 'Math.tan', 'Math.asin', 'Math.acos', 'Math.atan', + 'Math.sinh', 'Math.cosh', 'Math.tanh', 'Math.log', 'Math.exp', 'Math.sqrt', + 'Math.abs', 'Math.floor', 'Math.ceil', 'Math.round' +]; + +/** + * Regular expression to match single letters that could be parameters + * Excludes 'x' as it's the default variable + */ +const PARAMETER_REGEX = /[a-wyzA-WYZ]/g; + +/** + * Interface for detected parameters + */ +export interface DetectedParameter { + name: string; + displayName?: string; // Optional display name for the parameter + defaultValue: number; + minValue: number; + maxValue: number; + step: number; +} + +/** + * Removes function names from the formula + */ +function removeFunctionNames(formula: string): string { + let cleanedFormula = formula; + // Sort functions by length (longest first) to handle nested functions correctly + const sortedFunctions = [...MATH_FUNCTIONS].sort((a, b) => b.length - a.length); + + for (const func of sortedFunctions) { + // Replace function names with spaces to preserve formula structure + cleanedFormula = cleanedFormula.replace(new RegExp(func, 'g'), ' '.repeat(func.length)); + } + + return cleanedFormula; +} + +/** + * Detects parameters in a mathematical formula + * @param formula The mathematical formula to analyze + * @returns Array of detected parameters with default values + */ +export function detectParameters(formula: string): DetectedParameter[] { + // Remove whitespace for consistent matching + const normalizedFormula = formula.replace(/\s+/g, ''); + + // First remove all function names + const formulaWithoutFunctions = removeFunctionNames(normalizedFormula); + + // Find all potential parameter matches + const matches = formulaWithoutFunctions.match(PARAMETER_REGEX) || []; + + // Remove duplicates and create parameter objects + const uniqueParameters = [...new Set(matches)].map(name => ({ + name: name.toLowerCase(), // Convert to lowercase for consistency + displayName: name.toLowerCase(), // Default display name is the parameter name + defaultValue: 1, // Set default value to 1 as specified + minValue: -10, // Default min value + maxValue: 10, // Default max value + step: 0.1 // Default step value + })); + + return uniqueParameters; +} + +/** + * Tests if a string is a valid parameter name + * @param name The string to test + * @returns boolean indicating if the string is a valid parameter name + */ +export function isValidParameterName(name: string): boolean { + // Must be a single letter (excluding x) + return /^[a-wyzA-WYZ]$/.test(name); +} \ No newline at end of file diff --git a/src/utils/urlEncoding.ts b/src/utils/urlEncoding.ts index 23d13d4..fb4c543 100644 --- a/src/utils/urlEncoding.ts +++ b/src/utils/urlEncoding.ts @@ -277,9 +277,14 @@ export function decodeStringToFormulas(encodedString: string): Formula[] { } /** - * Updates the URL with encoded shapes, formulas, and grid position without reloading the page + * Updates the URL with encoded shapes, formulas, grid position, and tool selection without reloading the page */ -export function updateUrlWithData(shapes: AnyShape[], formulas: Formula[], gridPosition?: Point | null): void { +export function updateUrlWithData( + shapes: AnyShape[], + formulas: Formula[], + gridPosition?: Point | null, + tool?: string | null +): void { const encodedShapes = encodeShapesToString(shapes); const encodedFormulas = encodeFormulasToString(formulas); @@ -323,6 +328,15 @@ export function updateUrlWithData(shapes: AnyShape[], formulas: Formula[], gridP url.searchParams.delete('grid'); console.log('Removing grid position from URL'); } + + // Set or update the 'tool' query parameter if provided + if (tool) { + url.searchParams.set('tool', tool); + console.log('Updating tool in URL:', tool); + } else { + url.searchParams.delete('tool'); + console.log('Removing tool from URL'); + } // Update the URL without reloading the page window.history.pushState({}, '', url.toString()); @@ -378,4 +392,19 @@ export function getGridPositionFromUrl(): Point | null { const position = decodeGridPosition(encodedPosition); console.log('Decoded grid position from URL:', position); return position; +} + +/** + * Gets the selected tool from the URL if it exists + */ +export function getToolFromUrl(): string | null { + const url = new URL(window.location.href); + const tool = url.searchParams.get('tool'); + + console.log('Getting tool from URL, tool present:', !!tool); + if (tool) { + console.log('Tool from URL:', tool); + } + + return tool; } \ No newline at end of file diff --git a/src/utils/viewDetection.ts b/src/utils/viewDetection.ts new file mode 100644 index 0000000..5896af1 --- /dev/null +++ b/src/utils/viewDetection.ts @@ -0,0 +1,56 @@ +/** + * Type definition for different view modes + */ +export type ViewMode = 'standalone' | 'embedded' | 'fullscreen'; + +/** + * Extended Document interface to include vendor-specific fullscreen properties + */ +interface ExtendedDocument extends Document { + webkitFullscreenElement?: Element | null; + mozFullScreenElement?: Element | null; + msFullscreenElement?: Element | null; +} + +/** + * Checks if the application is running inside an iframe + */ +export function isInIframe(): boolean { + try { + return window.self !== window.top; + } catch (e) { + // If we can't access window.top due to same-origin policy, we're in an iframe + return true; + } +} + +/** + * Checks if the application is in fullscreen mode + */ +export function isFullscreen(): boolean { + const doc = document as ExtendedDocument; + return !!( + doc.fullscreenElement || + doc.webkitFullscreenElement || + doc.mozFullScreenElement || + doc.msFullscreenElement + ); +} + +/** + * Detects the current view mode of the application + */ +export function detectViewMode(): ViewMode { + // Check fullscreen first + if (isFullscreen()) { + return 'fullscreen'; + } + + // Then check if we're in an iframe + if (isInIframe()) { + return 'embedded'; + } + + // Default to standalone + return 'standalone'; +} \ No newline at end of file diff --git a/test/embedding/index.html b/test/embedding/index.html new file mode 100644 index 0000000..2c66a1c --- /dev/null +++ b/test/embedding/index.html @@ -0,0 +1,42 @@ + + + + + + Function Plotter Embedding Test + + + +
+ +
+ + \ No newline at end of file