diff --git a/public/icons/alarm.svg b/public/icons/alarm.svg new file mode 100644 index 00000000..a2f17aec --- /dev/null +++ b/public/icons/alarm.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/icons/arrowbendupleft.svg b/public/icons/arrowbendupleft.svg new file mode 100644 index 00000000..8622868d --- /dev/null +++ b/public/icons/arrowbendupleft.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/icons/arrowbendupright.svg b/public/icons/arrowbendupright.svg new file mode 100644 index 00000000..16929199 --- /dev/null +++ b/public/icons/arrowbendupright.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/icons/cursor.svg b/public/icons/cursor.svg new file mode 100644 index 00000000..1776f3bf --- /dev/null +++ b/public/icons/cursor.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/icons/cursorclick.svg b/public/icons/cursorclick.svg new file mode 100644 index 00000000..151300e7 --- /dev/null +++ b/public/icons/cursorclick.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/icons/dotssquare.svg b/public/icons/dotssquare.svg new file mode 100644 index 00000000..90e4c2b6 --- /dev/null +++ b/public/icons/dotssquare.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/icons/dotsvertical.svg b/public/icons/dotsvertical.svg new file mode 100644 index 00000000..e78d0c71 --- /dev/null +++ b/public/icons/dotsvertical.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/icons/drive.svg b/public/icons/drive.svg new file mode 100644 index 00000000..adcab6ac --- /dev/null +++ b/public/icons/drive.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/icons/emptybattery.svg b/public/icons/emptybattery.svg new file mode 100644 index 00000000..8d4cbada --- /dev/null +++ b/public/icons/emptybattery.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/icons/gitlab.svg b/public/icons/gitlab.svg new file mode 100644 index 00000000..bbc69a9c --- /dev/null +++ b/public/icons/gitlab.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/icons/linux.svg b/public/icons/linux.svg new file mode 100644 index 00000000..65615d6d --- /dev/null +++ b/public/icons/linux.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/icons/listdots.svg b/public/icons/listdots.svg new file mode 100644 index 00000000..bfb265e6 --- /dev/null +++ b/public/icons/listdots.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/icons/microphone.svg b/public/icons/microphone.svg new file mode 100644 index 00000000..be171729 --- /dev/null +++ b/public/icons/microphone.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/icons/microphoneslash.svg b/public/icons/microphoneslash.svg new file mode 100644 index 00000000..262343fa --- /dev/null +++ b/public/icons/microphoneslash.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/icons/moon.svg b/public/icons/moon.svg new file mode 100644 index 00000000..ba13967b --- /dev/null +++ b/public/icons/moon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/icons/signin.svg b/public/icons/signin.svg new file mode 100644 index 00000000..4290f3e8 --- /dev/null +++ b/public/icons/signin.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/icons/signout.svg b/public/icons/signout.svg new file mode 100644 index 00000000..26c94390 --- /dev/null +++ b/public/icons/signout.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/icons/webcam.svg b/public/icons/webcam.svg new file mode 100644 index 00000000..a28cd7ea --- /dev/null +++ b/public/icons/webcam.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/icons/webcamslash.svg b/public/icons/webcamslash.svg new file mode 100644 index 00000000..591edab2 --- /dev/null +++ b/public/icons/webcamslash.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/icons/windows.svg b/public/icons/windows.svg new file mode 100644 index 00000000..dbf56516 --- /dev/null +++ b/public/icons/windows.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/common/components/mock-components/front-components/icon/icon-shape.business.ts b/src/common/components/mock-components/front-components/icon/icon-shape.business.ts new file mode 100644 index 00000000..9378b3e3 --- /dev/null +++ b/src/common/components/mock-components/front-components/icon/icon-shape.business.ts @@ -0,0 +1,33 @@ +import { IconSize } from '@/core/model'; + +export const loadSvgWithFill = async (url: string, fillColor: string) => { + const response = await fetch(url); + const svgText = await response.text(); + + const modifiedSvg = svgText.replace(/fill="[^"]*"/g, `fill="${fillColor}"`); + + const svgBlob = new Blob([modifiedSvg], { type: 'image/svg+xml' }); + const objectURL = URL.createObjectURL(svgBlob); + + const img = new window.Image(); + img.src = objectURL; + + return img; +}; + +export const returnIconSize = (iconSize: IconSize): number[] => { + switch (iconSize) { + case 'XS': + return [25, 25]; + case 'S': + return [50, 50]; + case 'M': + return [100, 100]; + case 'L': + return [125, 125]; + case 'XL': + return [150, 150]; + default: + return [50, 50]; + } +}; diff --git a/src/common/components/mock-components/front-components/icon-shape.tsx b/src/common/components/mock-components/front-components/icon/icon-shape.tsx similarity index 66% rename from src/common/components/mock-components/front-components/icon-shape.tsx rename to src/common/components/mock-components/front-components/icon/icon-shape.tsx index 6e3936e2..f268a9ae 100644 --- a/src/common/components/mock-components/front-components/icon-shape.tsx +++ b/src/common/components/mock-components/front-components/icon/icon-shape.tsx @@ -1,18 +1,13 @@ import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions'; -import { - BASE_ICONS_URL, - IconSize, - ShapeSizeRestrictions, - ShapeType, -} from '@/core/model'; -import { forwardRef } from 'react'; +import { BASE_ICONS_URL, ShapeSizeRestrictions, ShapeType } from '@/core/model'; +import { forwardRef, useRef, useState, useEffect } from 'react'; import { Group, Image } from 'react-konva'; -import useImage from 'use-image'; -import { ShapeProps } from '../shape.model'; +import { ShapeProps } from '../../shape.model'; import { useModalDialogContext } from '@/core/providers/model-dialog-providers/model-dialog.provider'; import { IconModal } from '@/pods/properties/components/icon-selector/modal'; import { useCanvasContext } from '@/core/providers'; -import { useGroupShapeProps } from '../mock-components.utils'; +import { useGroupShapeProps } from '../../mock-components.utils'; +import { loadSvgWithFill, returnIconSize } from './icon-shape.business'; const iconShapeRestrictions: ShapeSizeRestrictions = { minWidth: 25, @@ -38,11 +33,13 @@ export const SvgIcon = forwardRef((props, ref) => { onSelected, iconInfo, iconSize, + stroke, ...shapeProps } = props; const { openModal } = useModalDialogContext(); const { selectionInfo } = useCanvasContext(); const { updateOtherPropsOnSelected } = selectionInfo; + const handleDoubleClick = () => { openModal( ((props, ref) => { 'Choose Icon' ); }; - const [image] = useImage(`${BASE_ICONS_URL}${iconInfo.filename}`); - - const returnIconSize = (iconSize: IconSize): number[] => { - switch (iconSize) { - case 'XS': - return [25, 25]; - case 'S': - return [50, 50]; - case 'M': - return [100, 100]; - case 'L': - return [125, 125]; - case 'XL': - return [150, 150]; - default: - return [50, 50]; - } - }; const [iconWidth, iconHeight] = returnIconSize(iconSize); @@ -88,15 +67,32 @@ export const SvgIcon = forwardRef((props, ref) => { ref ); + const [image, setImage] = useState(null); + const imageRef = useRef(null); + + useEffect(() => { + if (iconInfo?.filename) { + loadSvgWithFill( + `${BASE_ICONS_URL}${iconInfo.filename}`, + `${stroke}` + ).then(img => { + setImage(img); + }); + } + }, [iconInfo?.filename, stroke]); + return ( - + {image && ( + + )} ); }); diff --git a/src/common/components/mock-components/front-components/icon/index.ts b/src/common/components/mock-components/front-components/icon/index.ts new file mode 100644 index 00000000..076f313a --- /dev/null +++ b/src/common/components/mock-components/front-components/icon/index.ts @@ -0,0 +1 @@ +export * from './icon-shape'; diff --git a/src/common/components/mock-components/front-components/index.ts b/src/common/components/mock-components/front-components/index.ts index ae303ff1..3f9051c7 100644 --- a/src/common/components/mock-components/front-components/index.ts +++ b/src/common/components/mock-components/front-components/index.ts @@ -9,7 +9,7 @@ export * from './datepickerinput-shape'; export * from './button-shape'; export * from './timepickerinput-shape'; export * from './radiobutton-shape'; -export * from './icon-shape'; +export * from './icon'; export * from './verticalscrollbar-shape'; export * from './horizontalscrollbar-shape'; export * from './label-shape'; diff --git a/src/pods/canvas/model/shape-other-props.utils.ts b/src/pods/canvas/model/shape-other-props.utils.ts index ee6cf5c7..87597652 100644 --- a/src/pods/canvas/model/shape-other-props.utils.ts +++ b/src/pods/canvas/model/shape-other-props.utils.ts @@ -185,6 +185,7 @@ export const generateDefaultOtherProps = ( categories: ['IT'], }, iconSize: 'M', + stroke: BASIC_SHAPE.DEFAULT_STROKE_COLOR, }; case 'image': return { diff --git a/src/pods/canvas/shape-renderer/simple-component/icon.renderer.tsx b/src/pods/canvas/shape-renderer/simple-component/icon.renderer.tsx index 702c3ecb..6cb0573b 100644 --- a/src/pods/canvas/shape-renderer/simple-component/icon.renderer.tsx +++ b/src/pods/canvas/shape-renderer/simple-component/icon.renderer.tsx @@ -27,6 +27,7 @@ export const renderIcon = ( onTransformEnd={handleTransform} iconInfo={shape.otherProps?.icon} iconSize={shape.otherProps?.iconSize} + stroke={shape.otherProps?.stroke} /> ); }; diff --git a/src/pods/properties/components/icon-selector/modal/icons.ts b/src/pods/properties/components/icon-selector/modal/icons.ts index b3748605..efcce207 100644 --- a/src/pods/properties/components/icon-selector/modal/icons.ts +++ b/src/pods/properties/components/icon-selector/modal/icons.ts @@ -578,25 +578,13 @@ export const iconCollection: IconInfo[] = [ 'phone', 'smartphone', 'tablet', - 'application', - 'play store', - 'google play', ], categories: ['IT'], }, { name: 'Apple', filename: 'apple.svg', - searchTerms: [ - 'apple', - 'system', - 'mobile', - 'phone', - 'smartphone', - 'tablet', - 'application', - 'app store', - ], + searchTerms: ['apple', 'system', 'mobile', 'phone', 'smartphone', 'tablet'], categories: ['IT'], }, { @@ -1328,4 +1316,124 @@ export const iconCollection: IconInfo[] = [ searchTerms: ['calendar', 'days', 'date', 'hours', 'time', 'schedule'], categories: ['IT'], }, + { + name: 'Cursor', + filename: 'cursor.svg', + searchTerms: ['cursor', 'pointer', 'select', 'mouse'], + categories: ['IT'], + }, + { + name: 'Cursor click', + filename: 'cursorclick.svg', + searchTerms: ['cursor', 'click', 'pointer', 'select', 'mouse'], + categories: ['IT'], + }, + { + name: 'Microphone', + filename: 'microphone.svg', + searchTerms: ['microphone', 'record', 'micro', 'mic'], + categories: ['IT'], + }, + { + name: 'Microphone off', + filename: 'microphoneslash.svg', + searchTerms: ['microphone', 'mute', 'silence', 'mic'], + categories: ['IT'], + }, + { + name: 'Webcam', + filename: 'webcam.svg', + searchTerms: ['webcam', 'camera', 'video', 'camcorder'], + categories: ['IT'], + }, + { + name: 'Webcam off', + filename: 'webcamslash.svg', + searchTerms: ['webcam', 'camera', 'slash', 'camcorder', 'off'], + categories: ['IT'], + }, + { + name: 'Empty Battery', + filename: 'emptybattery.svg', + searchTerms: ['battery', 'empty', 'discharged', 'energy'], + categories: ['IT'], + }, + { + name: 'Sign in', + filename: 'signin.svg', + searchTerms: ['sign in', 'login', 'enter', 'access'], + categories: ['IT'], + }, + { + name: 'Sign out', + filename: 'signout.svg', + searchTerms: ['sign out', 'logout', 'exit', 'leave'], + categories: ['IT'], + }, + { + name: 'Arrow Bend left', + filename: 'arrowbendupleft.svg', + searchTerms: ['arrow', 'left', 'bend', 'move'], + categories: ['IT'], + }, + { + name: 'Arrow Bend right', + filename: 'arrowbendupright.svg', + searchTerms: ['arrow', 'right', 'bend', 'move'], + categories: ['IT'], + }, + { + name: 'Dots Square', + filename: 'dotssquare.svg', + searchTerms: ['dots', 'square', 'menu', 'more'], + categories: ['IT'], + }, + { + name: 'Dots Vertical', + filename: 'dotsvertical.svg', + searchTerms: ['dots', 'vertical', 'menu', 'options'], + categories: ['IT'], + }, + { + name: 'Google Drive', + filename: 'drive.svg', + searchTerms: ['drive', 'google', 'cloud', 'storage'], + categories: ['IT'], + }, + { + name: 'Linux', + filename: 'linux.svg', + searchTerms: ['linux', 'system', 'software', 'desktop'], + categories: ['IT'], + }, + { + name: 'Windows', + filename: 'windows.svg', + searchTerms: ['windows', 'system', 'software', 'desktop'], + categories: ['IT'], + }, + { + name: 'Moon', + filename: 'moon.svg', + searchTerms: ['moon', 'night', 'dark', 'sky'], + categories: ['IT'], + }, + { + name: 'Alarm', + filename: 'alarm.svg', + searchTerms: ['alarm', 'clock', 'alert', 'ring'], + categories: ['IT'], + }, + { + name: 'Gitlab', + filename: 'gitlab.svg', + searchTerms: ['gitlab', 'code', 'repository', 'version control'], + categories: ['IT'], + }, + { + name: 'List dots', + filename: 'listdots.svg', + searchTerms: ['list', 'categorize', 'unordered', 'classify'], + categories: ['IT'], + }, ];