diff --git a/src/components/CanvasHeadline/CanvasHeadline.tsx b/src/components/CanvasHeadline/CanvasHeadline.tsx index 46aa294..4cdfbf3 100644 --- a/src/components/CanvasHeadline/CanvasHeadline.tsx +++ b/src/components/CanvasHeadline/CanvasHeadline.tsx @@ -14,6 +14,24 @@ export const CanvasHeadline: React.FunctionComponent = ( CanvasPreviewContextValues ); + const handleHorizontalAlignChange = ( + event: React.ChangeEvent + ) => { + setCanvasHeadlineValues({ + ...canvasHeadlineValues, + align: { ...canvasHeadlineValues.align, horizontal: event.target.value }, + }); + }; + + const handleVerticalAlignChange = ( + event: React.ChangeEvent + ) => { + setCanvasHeadlineValues({ + ...canvasHeadlineValues, + align: { ...canvasHeadlineValues.align, vertical: event.target.value }, + }); + }; + const handleHorizontalPositionChange = ( event: React.ChangeEvent ) => { @@ -95,7 +113,9 @@ export const CanvasHeadline: React.FunctionComponent = ( title="Headline Horizontal Position" id="headlineHorizontalRange" value={canvasHeadlineValues.position.x} + align={canvasHeadlineValues.align.horizontal} onChange={(e: any) => handleHorizontalPositionChange(e)} + onHorizontalAlignChange={(e: any) => handleHorizontalAlignChange(e)} labelTitle={"Horizontal Position"} labelValue={canvasHeadlineValues.position.x} type="horizontal-position" @@ -107,7 +127,9 @@ export const CanvasHeadline: React.FunctionComponent = ( title="Headline Vertical Position" id="headlineVerticalRange" value={canvasHeadlineValues.position.y} + align={canvasHeadlineValues.align.vertical} onChange={(e: any) => handleVerticalPositionChange(e)} + onVerticalAlignChange={(e: any) => handleVerticalAlignChange(e)} labelTitle={"Vertical Position"} labelValue={canvasHeadlineValues.position.y} type="vertical-position" diff --git a/src/components/CanvasLogo/CanvasLogo.tsx b/src/components/CanvasLogo/CanvasLogo.tsx index e6f994d..25b149b 100644 --- a/src/components/CanvasLogo/CanvasLogo.tsx +++ b/src/components/CanvasLogo/CanvasLogo.tsx @@ -22,6 +22,24 @@ export const CanvasLogo: React.FunctionComponent = (props) => { const max = 24; const maxStep = 1; + const handleHorizontalAlignChange = ( + event: React.ChangeEvent + ) => { + setCanvasLogoValues({ + ...canvasLogoValues, + align: { ...canvasLogoValues.align, horizontal: event.target.value }, + }); + }; + + const handleVerticalAlignChange = ( + event: React.ChangeEvent + ) => { + setCanvasLogoValues({ + ...canvasLogoValues, + align: { ...canvasLogoValues.align, vertical: event.target.value }, + }); + }; + return ( @@ -106,9 +124,11 @@ export const CanvasLogo: React.FunctionComponent = (props) => { id="logoHorizontalPosition" title="Logo Horizontal Position" value={canvasLogoValues.position.x} + align={canvasLogoValues.align.horizontal} min={1} max={max - 2} step={maxStep} + onHorizontalAlignChange={(e: any) => handleHorizontalAlignChange(e)} onChange={(e: any) => setCanvasLogoValues({ ...canvasLogoValues, @@ -125,10 +145,12 @@ export const CanvasLogo: React.FunctionComponent = (props) => { handleVerticalAlignChange(e)} onChange={(e: any) => setCanvasLogoValues({ ...canvasLogoValues, diff --git a/src/components/RangeControl/RangeControl.tsx b/src/components/RangeControl/RangeControl.tsx index 8a51387..0420590 100644 --- a/src/components/RangeControl/RangeControl.tsx +++ b/src/components/RangeControl/RangeControl.tsx @@ -7,7 +7,10 @@ type RangeControlProps = { id: any; title: string; value?: any; + align?: string; onChange: Function; + onHorizontalAlignChange?: any; + onVerticalAlignChange?: any; className?: any; defaultValue?: any; labelTitle?: string; @@ -24,6 +27,9 @@ export const RangeControl: React.FC = ({ title, value, onChange, + align, + onHorizontalAlignChange, + onVerticalAlignChange, defaultValue, className, labelTitle, @@ -41,6 +47,9 @@ export const RangeControl: React.FC = ({ className="btn-check" name={`${type}-${id}`} id={`${type}-${id}-start`} + value="start" + checked={align === "start"} + onChange={(e) => onHorizontalAlignChange(e)} /> ); diff --git a/src/contexts/CanvasPreviewContext.tsx b/src/contexts/CanvasPreviewContext.tsx index 5e924ba..ce26711 100644 --- a/src/contexts/CanvasPreviewContext.tsx +++ b/src/contexts/CanvasPreviewContext.tsx @@ -33,6 +33,10 @@ export const Provider = (props: { content: "Headline text goes here and it can get pretty long...", color: "#000000", size: 4, + align: { + horizontal: '', + vertical: '' + }, position: { x: 2, y: 2, @@ -78,6 +82,10 @@ export const Provider = (props: { content: "", color: "#000000", }, + align: { + horizontal: '', + vertical: '' + }, position: { x: 2, y: 22, diff --git a/src/interfaces/canvasPreviewInterfaces.ts b/src/interfaces/canvasPreviewInterfaces.ts index b8e9492..84a0692 100644 --- a/src/interfaces/canvasPreviewInterfaces.ts +++ b/src/interfaces/canvasPreviewInterfaces.ts @@ -23,6 +23,10 @@ export interface CanvasHeadlineValuesInterface { content: string; color: string; size: number; + align: { + horizontal: string; + vertical: string; + }; position: { x: number; y: number; @@ -65,6 +69,10 @@ export interface CanvasLogoValuesInterface { content: string; color: string; }; + align: { + horizontal: string; + vertical: string; + }; position: { x: number; y: number;