added feature to style svg container

AmKreta · Apr 16, 2022 · c1494c1 · c1494c1
1 parent c6b4fb4
commit c1494c1
Show file tree

Hide file tree

Showing 8 changed files with 109 additions and 11 deletions.
diff --git a/src/actions/pages/pages.actionTypes.ts b/src/actions/pages/pages.actionTypes.ts
@@ -35,5 +35,6 @@ export enum PAGES_ACTION_TYPES {
     SAVE_FILE = 'SAVE_FILE',
     SAVE_FILE_AS = 'SAVE_FILE_AS',
     CREATE_NEW_FILE = 'CREATE_NEW_FILE',
-    OPEN_A_FILE = 'OPEN_A_FILE'
+    OPEN_A_FILE = 'OPEN_A_FILE',
+    EDIT_SVG_STYLE = 'EDIT_SVG_STYLE'
 };
diff --git a/src/actions/pages/pages.actions.ts b/src/actions/pages/pages.actions.ts
@@ -59,7 +59,9 @@ import {
     SAVE_FILE_AS_ACTION,
     SAVE_FILE_AS_PAYLOAD,
     CREATE_NEW_FILE_ACTION,
-    CREATE_NEW_FILE_PAYLOAD
+    CREATE_NEW_FILE_PAYLOAD,
+    EDIT_SVG_STYLE_ACTION,
+    EDIT_SVG_STYLE_PAYLOAD
 } from "./pages.interface";
 import { getImageDefaultProps } from "../../shapes/image";
 import { getLineDefaultProps } from "../../shapes/line";
@@ -238,4 +240,8 @@ export const openFile = function (id: OPEN_A_FILE_PAYLOAD): OPEN_A_FILE_ACTION {
 
 export const createNewFile = function (json?: CREATE_NEW_FILE_PAYLOAD): CREATE_NEW_FILE_ACTION {
     return { type: PAGES_ACTION_TYPES.CREATE_NEW_FILE, payload: json };
+}
+
+export const editSvgStyle = function (style: EDIT_SVG_STYLE_PAYLOAD): EDIT_SVG_STYLE_ACTION {
+    return { type: PAGES_ACTION_TYPES.EDIT_SVG_STYLE, payload: style };
 }
diff --git a/src/actions/pages/pages.interface.ts b/src/actions/pages/pages.interface.ts
@@ -7,6 +7,7 @@ import { AVAILABLE_FILTERS, FILTER_TYPES } from "../../filters/availableFilters"
 export interface CONTEXT_MENU_INTERFACE { show: boolean; x: number; y: number; clipboard: { x: number, y: number } };
 export type ACTIVE_SHAPE_INFO = Array<{ id: string }>;
 export type RENDER_TREE = { id: string; children?: RENDER_TREE[] }[];
+export interface SVG_STYLE { backgroundColor: string, height: number, width: number };
 export type SHAPE_COLLECTION = {
     id: string;
     activeShapes: string[];
@@ -15,6 +16,7 @@ export type SHAPE_COLLECTION = {
     filters: {
         [key: string]: AVAILABLE_FILTERS
     };
+    svgStyle: SVG_STYLE;
 };
 
 export interface GRADIENT {
@@ -183,6 +185,8 @@ export type SAVE_FILE_AS_ACTION = ACTION<PAGES_ACTION_TYPES.SAVE_FILE_AS, SAVE_F
 export type CREATE_NEW_FILE_PAYLOAD = PAGES | undefined;
 export type CREATE_NEW_FILE_ACTION = ACTION<PAGES_ACTION_TYPES.CREATE_NEW_FILE, CREATE_NEW_FILE_PAYLOAD>;
 
+export type EDIT_SVG_STYLE_PAYLOAD = Partial<SVG_STYLE>;
+export type EDIT_SVG_STYLE_ACTION = ACTION<PAGES_ACTION_TYPES.EDIT_SVG_STYLE, EDIT_SVG_STYLE_PAYLOAD>;
 
 
 export type PAGE_ACTION = SET_ACTIVE_PAGE_ACTION
@@ -214,6 +218,7 @@ export type PAGE_ACTION = SET_ACTIVE_PAGE_ACTION
     | SCALE_ACTIVE_SHAPE_ACTION
     | OPEN_A_FILE_ACTION
     | SAVE_FILE_AS_ACTION
-    | CREATE_NEW_FILE_ACTION;
+    | CREATE_NEW_FILE_ACTION
+    | EDIT_SVG_STYLE_ACTION;
 
 
diff --git a/src/components/uiEditor/elementFormatter.tsx b/src/components/uiEditor/elementFormatter.tsx
@@ -15,6 +15,7 @@ import SvgTextEditor from '../../shapeEditor/SvgTextEditor';
 import ImageEditor from '../../shapeEditor/imageEditor';
 import GroupEditor from '../../shapeEditor/groupEditor';
 import PathEditor from '../../shapeEditor/pathEditor';
+import SvgContainerEditor from '../../shapeEditor/svgEditor';
 
 const ElementFormatter: React.FC<{}> = function () {
 
@@ -109,7 +110,7 @@ const ElementFormatter: React.FC<{}> = function () {
                             }
                         </div>
                     )
-                    : null
+                    :<SvgContainerEditor />
             }
         </StyledDiv>
     );

diff --git a/src/components/uiEditor/svgEditor.tsx b/src/components/uiEditor/svgEditor.tsx
@@ -1,7 +1,7 @@
 import React, { useState, useRef, useEffect } from 'react';
 import styled from 'styled-components';
 import { useSelector } from 'react-redux';
-import { getActiveShapesInfo, getActiveTool, getHoveredShapeId, getShapesOfCurrentPage, getContextMenuState, getHelpers } from '../../selector/selector';
+import { getActiveShapesInfo, getActiveTool, getHoveredShapeId, getShapesOfCurrentPage, getContextMenuState, getHelpers, getSvgStyle } from '../../selector/selector';
 import { State } from '../../store/store';
 import { AVAILABLE_SHAPES } from '../../shapes/availableShapes';
 import { multiPointShpes, SHAPE_TYPES, TRANSFORM_CURSOR_MAPPING } from '../../utils/constant';
@@ -27,6 +27,7 @@ const SvgEditor: React.FC<{}> = function () {
     const activeShapes = useSelector<State, string[]>(getActiveShapesInfo, isEqual);
     const hoveredShapeId = useSelector<State, string | null>(getHoveredShapeId);
     const helpers = useSelector<State, HELPERS>(getHelpers, isEqual);
+    const svgStyle = useSelector(getSvgStyle);
 
     const [shapeSelectorProps, setShapeSelectorProps] = useState<SHAPE_SELECTOR_PROPS>(initialShapeSelectorProps);
     const [pointsArray, setPointsArray] = useState<Array<[number, number]>>([]);
@@ -172,22 +173,23 @@ const SvgEditor: React.FC<{}> = function () {
     }
 
     return (
-        <SvgContainer onContextMenu={e => { e.preventDefault(); e.stopPropagation(); }}>
+        <SvgContainer onContextMenu={e => { e.preventDefault(); e.stopPropagation(); }} style={{overflow:'scroll'}}>
             {
                 helpers.gridHelpers
                     ? <GridHelper />
                     : null
             }
             <StyledSvg
-                height='100%'
-                width='100%'
+                height={`${svgStyle.height}%`}
+                width={`${svgStyle.width}%`}
                 onMouseDown={mouseDownHandler}
                 onMouseUp={mouseUpHandler}
                 id='svgEditor'
                 ref={svgEditorRef}
                 xmlns='http://www.w3.org/2000/svg'
                 xmlnsXlink='http://www.w3.org/1999/xlink'
                 version='1.1'
+                style={{ backgroundColor: svgStyle.backgroundColor }}
             >
                 <defs>
                     <Filters />

diff --git a/src/reducers/pages.reducer.ts b/src/reducers/pages.reducer.ts
@@ -18,7 +18,7 @@ const initialState: PAGES = {
     clipboard: [],
     contextMenu: { show: false, x: 0, y: 0, clipboard: { x: 0, y: 0 } },
     pages: [
-        { id: id, activeShapes: [], shapes: {}, filters: {}, renderTree: [] }
+        { id: id, activeShapes: [], shapes: {}, filters: {}, renderTree: [], svgStyle: { backgroundColor: 'white', height: 100, width: 100 } }
     ],
     colors: {},
     gradients: {},
@@ -300,7 +300,8 @@ const pagesReducer: Reducer<PAGES, PAGE_ACTION> = function (state: PAGES = clone
                     activeShapes: [],
                     shapes: {},
                     filters: {},
-                    renderTree: []
+                    renderTree: [],
+                    svgStyle: { backgroundColor: 'white', height: 100, width: 100 }
                 });
                 state.pages = [...state.pages];
                 state.activePageIndex = state.pages.length - 1;
@@ -372,6 +373,13 @@ const pagesReducer: Reducer<PAGES, PAGE_ACTION> = function (state: PAGES = clone
             return state;
         }
 
+        case PAGES_ACTION_TYPES.EDIT_SVG_STYLE: {
+            const currentPage = state.pages[state.activePageIndex];
+            currentPage.svgStyle = { ...currentPage.svgStyle, ...action.payload };
+            state.pages[state.activePageIndex] = { ...currentPage };
+            return { ...state };
+        }
+
         default: return state;
     }
 };

diff --git a/src/selector/selector.ts b/src/selector/selector.ts
@@ -1,7 +1,7 @@
 import { State } from "../store/store";
 import { AVAILABLE_SHAPES } from "../shapes/availableShapes";
 import { SHAPE_TYPES } from "../utils/constant";
-import { CONTEXT_MENU_INTERFACE, ACTIVE_SHAPE_INFO, GRADIENT } from "../actions/pages/pages.interface";
+import { CONTEXT_MENU_INTERFACE, ACTIVE_SHAPE_INFO, GRADIENT, SVG_STYLE } from "../actions/pages/pages.interface";
 import { AVAILABLE_FILTERS } from "../filters/availableFilters";
 import { HELPERS } from "../actions/helpers/helpers.interface";
 import { SHAPE_COLLECTION } from "../actions/pages/pages.interface";
@@ -97,3 +97,7 @@ export function getActivePageIndex(state: State): number {
 export function getCurrentDocName(state: State): string {
     return state.page.name;
 }
+
+export function getSvgStyle(state: State): SVG_STYLE {
+    return state.page.pages[state.page.activePageIndex].svgStyle;
+}
diff --git a/src/shapeEditor/svgEditor.tsx b/src/shapeEditor/svgEditor.tsx
@@ -0,0 +1,71 @@
+import React from 'react';
+import NumberEditor from '../components/valueEditor/numberEditor';
+import { useDispatch, useSelector } from 'react-redux';
+import { getSvgStyle } from '../selector/selector';
+import { editSvgStyle } from '../actions/pages/pages.actions';
+import styled, { css } from 'styled-components';
+import { THEME } from '../theme/theme';
+import ColorEditor from '../components/valueEditor/colorEditor';
+
+const SvgContainerEditor: React.FC = function () {
+
+    const svgStyle = useSelector(getSvgStyle);
+    const dispatch = useDispatch();
+
+    return (
+        <EditorContainer>
+            <div className='EditorCaegoryContainer'>
+                <div className='editorCategory'>Size</div>
+                <NumberEditor
+                    value={svgStyle.height}
+                    label='height'
+                    onChange={val => {
+                        val > 100 && dispatch(editSvgStyle({ height: val }));
+                    }}
+                    step={5}
+                />
+                <NumberEditor
+                    value={svgStyle.width}
+                    label='width'
+                    onChange={val => {
+                        val > 100 && dispatch(editSvgStyle({ width: val }));
+                    }}
+                    step={5}
+                />
+            </div>
+            <div className='EditorCaegoryContainer'>
+                <div className='editorCategory'>Background Color</div>
+                <ColorEditor
+                    value={svgStyle.backgroundColor}
+                    label='color'
+                    onChange={val => dispatch(editSvgStyle({ backgroundColor: val }))}
+                    showPalette
+                />
+            </div>
+        </EditorContainer>
+    );
+}
+
+const EditorContainer = styled.div`
+    ${props => {
+        const theme = props.theme as THEME;
+        return css`
+            flex-grow: 1;
+            overflow-y: scroll;
+            &>.EditorCaegoryContainer{
+                border:1px solid #ccc;
+                padding:${theme.spacing(1)}px ${theme.spacing(.3)}px;
+                margin:${theme.spacing(1)}px ${theme.spacing(.5)}px;
+                text-align: left;
+                &>.editorCategory{
+                    text-align: center;
+                    font-weight: bold;
+                    opacity:.5;
+                    font-size: .8em;
+                }
+            }
+        `;
+    }}
+`;
+
+export default SvgContainerEditor;