\n {isIcon ? (\n Sticker
\n The Sticker block in Exemplar adds a touch of creativity and customization to your canvas.
\n Key Features:
\n \n Non-Nestable : Stickers are designed to be standalone elements and cannot be nested within other blocks.View Mode Exclusivity : During view mode, Stickers are intentionally excluded from selection, ensuring that they don't interfere with your presentation.Versatile Attachment : Stickers can be attached to other blocks, allowing you to add context, labels, or visual cues to your diagrams. However, they cannot be attached to Connectors, other Stickers, or Drawings.Seamless Attachment : To attach a Sticker to another block, simply hold down the SPACE , CTRL , or CMD key while dragging the Sticker onto the target block. When the target block becomes transparent, release the Sticker to have it seamlessly adhere to the desired block.Visual Highlight : In view mode, a Sticker will be automatically highlighted when the block it's connected to is selected. This ensures that your audience can easily identify and understand the relationship between the Sticker and the associated block.Layout Mode Consideration : If you have set the layout mode to automatic in Exemplar settings, keep in mind that when a Sticker is already attached to a block, you'll need to hold SPACE , CTRL , or CMD during dragging to temporarily disable the attaching state. This allows for greater control over the placement of your Stickers. \n The Sticker block empowers you to add informative labels and visual elements to your canvas, enhancing the clarity and visual appeal of your work. Whether you're creating diagrams, presentations, or illustrations, Stickers provide an efficient way to convey information and enhance your designs.
\n \n);\n\nexport const GeneralSticker : IBlock = {\n type: config.type,\n block: memo(Block),\n element: {\n Help,\n group: config.group,\n search: config.search,\n styles: config.styles,\n options: ['element-sticker', 'no-selection-view-mode', 'parent-free', 'container-title-none', 'child-none', 'container-child-none'],\n constraints: {},\n onCreate: createCreator({\n type: config.type,\n memo: config.memo.key,\n styles: config.styles,\n properties: {\n url: '',\n color: 'dark',\n height: 64,\n width: 64,\n realHeight: 64,\n realWidth: 64,\n sticky: '',\n offset: [0, 0],\n lockKey: '',\n lock: false,\n },\n condition: (payload) => {\n const drag = getState((state) => state.graphic.drag);\n\n if (!drag || !payload.parent) {\n return payload;\n }\n\n payload.properties = {\n ...(payload.properties ?? {}),\n\n sticky: payload.parent,\n offset: [\n -(drag.frame.size[0] / 2),\n -(drag.frame.size[1] / 2),\n ],\n };\n\n payload.parent = '';\n\n return payload;\n },\n }),\n onCopy: createCopier({\n type: config.type,\n condition: (payload) => {\n const drag = getState((state) => state.graphic.drag);\n\n if (payload.native && drag && payload.parent) {\n payload.target = {\n ...(payload.target ?? {}),\n\n sticky: payload.parent,\n offset: [\n -(drag.frame.size[0] / 2 + drag.frame.offset[0]),\n -(drag.frame.size[1] / 2 + drag.frame.offset[1]),\n ],\n };\n } else if (payload.target.sticky && payload.target.sticky in payload.transition) {\n payload.target = {\n ...(payload.target ?? {}),\n\n sticky: payload.transition[payload.target.sticky],\n };\n } else {\n payload.target = {\n ...(payload.target ?? {}),\n\n sticky: '',\n offset: [0, 0],\n };\n }\n\n payload.parent = '';\n\n return payload;\n },\n }),\n title: config.title,\n size: [64, 64],\n icon,\n class: {\n title: 'Sticker',\n icon: iconWhite,\n },\n },\n button: {\n tool: () => = ({ value, placeholder }) => {\n const onClick = useEditLink({\n key: config.key,\n });\n\n const content = {\n __html: value ?? '',\n };\n\n if (optimizers.noHtml(content.__html) === '') {\n content.__html = `${placeholder}
`;\n }\n\n return (\n {}}\n aria-label=\"Text\"\n tabIndex={-1}\n role=\"button\"\n />\n );\n};\n","import React, { FC, useContext } from 'react';\nimport { deleteElements, getBlockContextElements, getBlockContextPathes, getState } from 'utils/store';\nimport optimizers from 'utils/optimizers';\nimport ReactQuill from 'react-quill';\nimport { blocks } from 'blocks';\n\nimport { storeGraphic } from 'store/graphic';\nimport { OptionEmptyTextBlur } from 'store/settings';\n\nimport { useEditable } from 'hooks/useEditable';\nimport { useEditableBlur } from 'hooks/useEditableBlur';\nimport { useEditableBindings } from 'hooks/useEditableBindings';\nimport { useEditableComponent } from 'hooks/useEditableComponent';\nimport { useTabGridText } from 'hooks/useTabGridText';\nimport { useStoreDispatch } from 'hooks/useStore';\n\nimport { ElementContext } from 'elements/Block/Element';\n\nimport { IComponent, config } from '.';\n\nimport style from '../../assets/style.module.css';\n\nexport const Edit: FC = ({ value: field, property, placeholder }) => {\n const dispatch = useStoreDispatch();\n\n const element = useContext(ElementContext);\n const onTab = useTabGridText();\n\n const bindings = useEditableBindings({\n key: config.key,\n shift: true,\n onNext: (input) => {\n input.blur();\n onTab(input.html, 'B');\n },\n onPrev: (input) => {\n input.blur();\n onTab(input.html, 'T');\n },\n onShiftEnter: (input) => {\n input.blur();\n onTab(input.html, 'B', true);\n },\n });\n\n const onBlur = useEditableBlur({\n property,\n key: config.key,\n onBefore: (value) => {\n const deleteable = getState((state) => state.diagram.file[element.id]?.deletable);\n\n if (optimizers.noHtml(value).trim() === '' && deleteable !== false) {\n const blur = getState((state) => state.settings.app.emptyTextBlur);\n const def = optimizers.noHtml(field).trim();\n const deletable = getState((state) => {\n const parent = state.diagram.file[element.id]?.parent;\n\n if (!parent) {\n return true;\n }\n\n if (blocks[state.diagram.file[parent]?.type].element.options.includes('element-wrap-grid')) {\n return !!state.diagram.childs[parent]?.find((id) => !!state.diagram.file[id]?.deletable);\n }\n\n return state.diagram.file[parent]?.deletable;\n });\n\n if ((def || deletable) && blur.includes(OptionEmptyTextBlur.ParentRemoving)) {\n deleteElements(getBlockContextElements(getBlockContextPathes([element.id])));\n dispatch(storeGraphic.setSelectionElements([]));\n } else if (blur.includes(OptionEmptyTextBlur.TextRemoving) || (!def && blur.includes(OptionEmptyTextBlur.ParentRemoving))) {\n deleteElements(getBlockContextElements([element.id]));\n dispatch(storeGraphic.setSelectionElements([]));\n }\n\n return false;\n }\n\n return true;\n },\n });\n\n const input = useEditable({\n value: field,\n bindings,\n formats: [\n 'paragraph',\n 'header',\n 'bold',\n 'link',\n 'italic',\n 'underline',\n 'strike',\n 'align',\n 'background',\n 'list',\n 'indent',\n 'code',\n 'code-block',\n ],\n onBlur: (value) => onBlur(value, input),\n });\n\n useEditableComponent(input);\n\n return (\n = ({ value, property, placeholder }) => {\n const element = useContext(ElementContext);\n\n const editing = useStoreSelector((state) => !(state.diagram.file[element.id]?.lock || state.diagram.captured[element.id] || state.graphic.options[element.id]?.invisible) && state.diagram.mode === 'edit' && state.graphic.component.key === config.key);\n const statement = useStoreSelector((state) => state.diagram.file[element.id]?.placeholder ?? placeholder);\n\n if (element.selected && editing) {\n return ({\n memo: {\n key: config.memo.key,\n properties: config.memo.styles,\n },\n block: ({ properties, element }) => {\n const component = useStoreSelector((state) => !!state.graphic.component.key);\n const limiter = useStoreSelector((state) => (\n blocks[state.diagram.file[properties.parent]?.type]?.element.options.includes('text-limiter')\n || blocks[state.diagram.file[state.diagram.file[properties.parent]?.parent]?.type]?.element.options.includes('text-limiter')\n ));\n\n const arrangement = useArrangementText();\n const resier = useResizer({\n fixed: true,\n maxWidth: limiter ? 120 : 640,\n });\n\n useEnterOnSelection({\n onPress: (dispatch) => dispatch(storeGraphic.setComponentKey('text')),\n mode: 'edit',\n });\n\n // Update Points on Property Change\n useLayoutEffect(() => {\n element.updatePoints();\n }, [properties.text, properties.size]);\n\n return (\n \n \n\n Text
\n The Text block in Exemplar is a versatile element that can be nested within other blocks, allowing you to add textual content wherever you need it.
\n \n Edit Mode : To edit the content of a Text block, simply select it and press Enter. This makes it easy to update text whenever you need.Navigation : When Text blocks are part of a layout, you can use the Tab key to navigate between them. Pressing Shift + Tab allows you to move in the reverse direction.Duplicate Blocks : If a Text block is within a layout, you can quickly create a copy of it and its parent blocks by pressing Shift + Enter. This is a handy way to replicate content efficiently.Auto Deletion : If you choose this option in Exemplar settings, leaving a Text block empty will result in its automatic deletion along with its parent blocks. This helps keep your canvas clean and clutter-free.Automatic Layout : While dragging text blocks, hold the SPACE key to control their placement within a layout. This feature ensures your content is neatly arranged.Nested Blocks : If you want to nest a text block within another block, hold CTRL or CMD while dragging. This action allows you to maintain a structured hierarchy.Layout Preview : Layouts are not visible by default. To make them visible, hold the CTRL or CMD key and hover over the target layout structure. This feature prevents overfilling with secondary elements and helps you ensure that your content is well-organized.Style Memorization : To memorize the style of a block, hold ALT while unselecting the block. The memorized styles will be applied automatically to the next block you create. This feature is useful for maintaining consistent formatting across your content. \n The Text block is a valuable tool for adding and managing text-based information within your Exemplar projects.
\n \n);\n\nexport const GeneralText : IBlock = {\n type: config.type,\n block: memo(Block),\n element: {\n Help,\n group: config.group,\n search: config.search,\n styles: config.styles,\n options: ['element-text'],\n constraints: {\n prevent: {\n color: [\n 'none',\n 'white',\n ],\n },\n },\n onCreate: createCreator({\n type: config.type,\n component: 'text',\n memo: config.memo.key,\n styles: config.styles,\n properties: {\n text: '',\n size: 'm',\n color: 'dark',\n width: undefined,\n vertical: false,\n lockKey: '',\n lock: false,\n },\n condition: (payload) => {\n const type = getState((state) => state.diagram.file[payload.parent]?.type);\n\n if (payload.canvas?.space && !payload.parent) {\n payload.properties = {\n ...(payload.properties ?? {}),\n\n deletable: false,\n };\n }\n\n if (!blocks[type]?.element.options.includes('element-wrap') || blocks[type]?.element.options.includes('element-wrap-inline')) {\n return payload;\n }\n\n if (!payload.properties?.text?.trim()) {\n payload.properties = {\n ...(payload.properties ?? {}),\n\n text: '
',\n };\n }\n\n return payload;\n },\n }),\n onCopy: createCopier({\n type: config.type,\n component: 'text',\n }),\n title: config.title,\n size: [66, 25],\n icon,\n class: {\n title: 'Text',\n icon: iconWhite,\n },\n },\n button: {\n tool: () => ({\n memo: {\n key: config.memo.key,\n properties: config.memo.styles,\n },\n block: ({ properties, element }) => {\n const exists = useStoreSelector((state) => !state.graphic.elements[element.id] && (!element.parent || !!state.graphic.elements[element.parent]));\n\n const loading = useProperty(exists);\n const failed = useProperty(false);\n\n const create = useTextCreatorWithWrapper({ properties: { text: properties.title } });\n const arrangement = useArrangementWrapper();\n const resier = useResizer({\n strict: true,\n realWidth: properties.realWidth,\n realHeight: properties.realHeight,\n minWidth: 16,\n minHeight: 16,\n });\n\n useEnterOnSelection({\n onPress: create('enter'),\n mode: 'edit',\n });\n\n useClickOnSelection({\n onClick: create('click'),\n mode: 'edit',\n });\n\n // Wait for image to be loaded\n useEffect(() => {\n loading.set(true);\n\n const img = new Image();\n\n img.onload = () => {\n loading.set(false);\n failed.set(false);\n };\n\n img.onerror = (e) => {\n loading.set(false);\n failed.set(true);\n };\n\n img.src = `${url}/diagrams/assets/${dir}/${properties.file}`;\n }, [properties.file]);\n\n return (\n \n \n \n );\n },\n});\n","import { IConfig } from 'blocks';\nimport { setLatest } from 'utils/store';\n\nimport { createCreator as creator } from 'blocks/factories/simple/Creator';\n\nexport interface IModel {\n file: string;\n width: number;\n height: number;\n realWidth: number;\n realHeight: number;\n title: string;\n lockKey: string;\n lock: boolean;\n}\n\ninterface ICreator {\n config: IConfig;\n tab: string;\n size?: number[];\n}\n\nexport const createCreator = ({ config, tab, size }: ICreator) => creator({\n type: config.type,\n memo: config.memo.key,\n styles: config.styles,\n properties: {\n file: '',\n title: '',\n height: size?.[0] ?? 48,\n width: size?.[1] ?? 48,\n realHeight: size?.[0] ?? 48,\n realWidth: size?.[1] ?? 48,\n lockKey: '',\n lock: false,\n },\n condition: (payload) => {\n if (payload.properties?.file && payload.properties?.slug && payload.properties?.title) {\n setLatest(tab)({\n file: payload.properties?.file,\n slug: payload.properties?.slug,\n title: payload.properties?.title,\n });\n }\n\n if (payload.properties?.slug) {\n payload.properties = {\n ...payload.properties,\n };\n\n delete payload.properties.slug;\n }\n\n if (payload.properties?.title) {\n payload.properties = {\n ...payload.properties,\n\n title: `${payload.properties.title}
`,\n };\n }\n\n return payload;\n },\n});\n","import React, { ComponentType, useContext } from 'react';\n\nimport { useMemoProperties } from 'hooks/useMemoProperties';\nimport { useStoreSelector } from 'hooks/useStore';\n\nimport { ElementContext, IElementContext } from 'elements/Block/Element';\n\nexport interface IElement {\n properties: Extract>;\n element: IElementContext;\n}\n\ninterface IBlock {\n id: string;\n}\n\ninterface IBlockConfig {\n memo: {\n key: string;\n properties: string[];\n };\n block: ComponentType>;\n}\n\nexport const createBlock = ({ memo, block: Block } : IBlockConfig) => {\n return ({ id }: IBlock) => {\n const properties = useStoreSelector((state) => state.diagram.file[id]);\n const element = useContext(ElementContext);\n\n useMemoProperties(properties, memo.key, memo.properties);\n\n return (\n (element: T, key: string, properties: string[]) => {\n const dispatch = useStoreDispatch();\n\n const id = useStoreSelector((state) => state.diagram.diagram.id);\n\n useUpdateEffect(() => {\n dispatch(storeCache.setGroup({\n id,\n data: {\n [key]: Object.fromEntries(properties.map((property) => [property, element[property]])),\n },\n }));\n }, [...properties.map((property) => element[property])]);\n};\n","import { ICopy } from 'blocks';\nimport { store } from 'store';\n\nimport { storeDiagram } from 'store/diagram';\nimport { storeGraphic } from 'store/graphic';\n\ninterface ICopierConfig {\n type: string;\n component?: string;\n condition?: (payload: ICopy) => ICopy;\n}\n\nexport const createCopier = (config: ICopierConfig) => {\n return (payload: ICopy) => {\n const { file, transition, target, position, parent, preventComponentStatus, auto } = config.condition?.(payload) ?? payload;\n\n const id = transition[target.id];\n\n file[id] = {\n ...target,\n\n id,\n type: config.type,\n position: auto ? target.position : position,\n parent,\n };\n\n store.dispatch(storeDiagram.addElement({\n element: file[id],\n }));\n\n if (!auto) {\n store.dispatch(storeGraphic.setSelectionElements([id]));\n\n if (config.component && auto === undefined) {\n store.dispatch(storeGraphic.setComponentKey(config.component));\n\n if (preventComponentStatus) {\n store.dispatch(storeGraphic.setComponentPreventStatus());\n }\n }\n }\n\n return id;\n };\n};\n","import { filterProperties, getGroupStyles, getMemoizedStyles } from 'utils/store';\nimport { getNextId } from 'utils';\nimport { ICreate } from 'blocks';\nimport { AppDispatch, store } from 'store';\n\nimport { storeDiagram } from 'store/diagram';\nimport { storeGraphic } from 'store/graphic';\n\ninterface ICreatorConfig {\n memo: string;\n type: string;\n styles: string[];\n properties: Extract>;\n condition?: (payload: ICreate) => ICreate;\n component?: string;\n history?: boolean;\n dispatch?: (dispatch: AppDispatch, id: string) => void;\n}\n\nexport const createCreator = (config: ICreatorConfig) => {\n return (payload: ICreate) => {\n const { file, position, parent, auto, preventComponentStatus, properties = {} } = config.condition?.(payload) ?? payload;\n\n const id = getNextId(file);\n\n file[id] = {\n ...config.properties,\n\n ...filterProperties({\n type: config.type,\n properties: {\n ...getGroupStyles(config.memo),\n ...getMemoizedStyles(config.styles),\n },\n }),\n\n ...properties,\n\n id,\n type: config.type,\n position,\n parent,\n };\n\n store.dispatch(storeDiagram.addElement({\n element: file[id],\n skip: !(config.history ?? true) && !auto,\n }));\n\n if (!auto) {\n store.dispatch(storeGraphic.setSelectionElements([id]));\n\n if (config.component && auto === undefined) {\n store.dispatch(storeGraphic.setComponentKey(config.component));\n\n if (preventComponentStatus) {\n store.dispatch(storeGraphic.setComponentPreventStatus());\n }\n }\n\n config.dispatch?.(store.dispatch, id);\n }\n\n return id;\n };\n};\n","import { useContext } from 'react';\n\nimport { ElementContext } from 'elements/Block/Element';\n\nimport { useStoreSelector } from './useStore';\n\nexport const useJoins = (type: 'from' | 'to', types: string[], condition: (join: [string, string]) => boolean = () => true) => {\n const element = useContext(ElementContext);\n\n const joins = useStoreSelector((state) => {\n return (state.diagram.joins[type][element.id] || []).map((join) => {\n return join.split('.') as [string, string];\n }).filter((join) => {\n return (types.length === 0 || types.includes(state.diagram.file[join[0]]?.type)) && condition(join);\n }).map((join) => {\n return join.join('.');\n }).join(',');\n });\n\n return {\n joins: joins ? joins.split(',').map((join) => join.split('.')[0]) : [],\n connectors: joins ? joins.split(',').map((join) => join.split('.')[1]) : [],\n };\n};\n","import { useContext } from 'react';\nimport { getCacheProperty } from 'utils/store';\n\nimport { ElementContext } from 'elements/Block/Element';\n\nimport { useOption } from './useOption';\nimport { useStoreSelector } from './useStore';\n\nexport const useClosed = (joins: string[]) => {\n const element = useContext(ElementContext);\n\n const closed = useStoreSelector((state) => {\n return joins.length > 0 && joins.every((id) => {\n const collapsed = getCacheProperty(state, id, 'collapsed') ?? false;\n const collapsable = !state.graphic.options[id]?.collapsed;\n const closed = state.graphic.options[id]?.closed;\n\n return closed || (collapsed && collapsable);\n });\n });\n\n useOption({\n id: element.id,\n key: 'closed',\n value: closed,\n deps: [closed],\n });\n\n return closed;\n};\n","import { useContext, useEffect } from 'react';\n\nimport { CanvasStaticContext } from 'elements/Canvas';\nimport { ElementContext } from 'elements/Block/Element';\n\nimport { useOption } from './useOption';\nimport { useStoreSelector } from './useStore';\n\nexport const useJoinsPath = (joins: string[], types: string[]) => {\n const element = useContext(ElementContext);\n const canvas = useContext(CanvasStaticContext);\n\n const path = useStoreSelector((state) => {\n const pathes = joins.map((join) => {\n return state.graphic.options[join]?.path;\n }).filter((path) => {\n return path;\n }).map((path) => {\n return path.split(',');\n }).flat(1);\n\n const path = new Set([...joins, ...pathes]);\n\n path.delete(element.id);\n\n return Array.from(path).filter((id) => {\n return types.includes(state.diagram.file[id]?.type);\n }).join(',');\n });\n\n useOption({\n id: element.id,\n key: 'path',\n value: path,\n deps: [path],\n });\n\n useEffect(() => {\n if (!canvas.loading) {\n element.updatePoints();\n }\n }, [canvas.loading]);\n\n return joins;\n};\n","import { useEffect, useMemo, useRef } from 'react';\nimport { getState } from 'utils/store';\nimport { lines } from 'utils/lines';\nimport { points } from 'utils/points';\n\nimport { useStoreSelector } from './useStore';\n\nexport const useJoinsSide = (connectors: string[]) => {\n const memo = useRef({} as Record);\n\n const links = useStoreSelector((state) => {\n return connectors.filter((id) => {\n return (\n state.graphic.options[id]?.closed\n );\n }).join(',');\n });\n\n useEffect(() => {\n const file = getState((state) => state.diagram.file);\n const elements = getState((state) => state.graphic.elements);\n\n connectors.forEach((id) => {\n const line = file[id]?.points || ['_'];\n const parent = line[0]?.parent;\n\n const side = elements[parent] ? lines.elements[`${id}.1`]?.side : undefined;\n\n if (side) {\n memo.current[id] = side;\n }\n });\n }, [connectors]);\n\n return useMemo(() => {\n const file = getState((state) => state.diagram.file);\n const elements = getState((state) => state.graphic.elements);\n\n const items = links.split(',');\n\n Object.keys(memo).forEach((id) => {\n if (!items.includes(id)) {\n delete memo.current[id];\n }\n });\n\n const sides = items.reduce((sides, id) => {\n const line = file[id]?.points || ['_'];\n const parent = line[0]?.parent;\n\n const side = !elements[parent] ? memo.current[id] : (lines.elements[`${id}.1`]?.side ?? memo.current[id]);\n\n if (side in sides) {\n sides[side] += 1;\n memo.current[id] = side;\n }\n\n return sides;\n }, { L: 0, T: 0, R: 0, B: 0 });\n\n const [side] = Object.entries(sides).reduce((side, item) => {\n return item[1] > side[1] ? item : side;\n }, ['B', 0]);\n\n return side as 'L' | 'T' | 'R' | 'B';\n }, [links]);\n};\n","import { useContext } from 'react';\n\nimport { ElementContext } from 'elements/Block/Element';\n\nimport { useStoreSelector } from './useStore';\n\nexport const usePathFilter = (joins: string[], filter: string[]) => {\n const element = useContext(ElementContext);\n\n const path = useStoreSelector((state) => {\n const links = joins.filter((id) => {\n return filter.includes(state.diagram.file[id]?.type);\n });\n\n const pathes = links.map((join) => {\n return state.graphic.options[join]?.path;\n }).filter((path) => {\n return path;\n }).map((path) => {\n return path.split(',');\n }).flat(1);\n\n const path = new Set([...links, ...pathes]);\n\n path.delete(element.id);\n\n return Array.from(path).filter((id) => {\n return filter.includes(state.diagram.file[id]?.type);\n }).join(',');\n });\n\n return path.split(',');\n};\n","import React, { ComponentType, useContext, useEffect } from 'react';\nimport { points } from 'utils/points';\n\nimport { ElementContext, IElementContext } from 'elements/Block/Element';\n\nimport { usePoints } from 'hooks/usePoints';\n\nexport interface IRender {\n properties: Extract>;\n elements: Extract>;\n}\n\ninterface IRenderConfig {\n render: ComponentType<{\n width: number;\n height: number;\n element: IElementContext;\n properties: Extract>;\n elements: Extract>;\n }>;\n}\n\nexport const createRender = ({ render: Render }: IRenderConfig) => {\n return ({ properties, elements } : IRender) => {\n const element = useContext(ElementContext);\n\n const { render, unrender } = usePoints();\n\n useEffect(() => {\n render(element.id);\n\n return () => {\n unrender(element.id);\n };\n }, []);\n\n const size = points.elements[element.id]?.size;\n\n if (!size) {\n return null;\n }\n\n return (\n = ({ value }) => {\n const onClick = useEditLink({\n key: config.key,\n });\n\n const content = {\n __html: value ?? '',\n };\n\n if (optimizers.noHtml(content.__html) === '') {\n content.__html = 'Type something
';\n }\n\n return (\n {}}\n aria-label=\"Text\"\n tabIndex={-1}\n role=\"button\"\n />\n );\n};\n","import React, { FC, useContext } from 'react';\nimport { deleteElements, getBlockContextElements, getState } from 'utils/store';\nimport optimizers from 'utils/optimizers';\nimport ReactQuill from 'react-quill';\n\nimport { storeGraphic } from 'store/graphic';\nimport { OptionEmptyTextBlur } from 'store/settings';\n\nimport { useEditable } from 'hooks/useEditable';\nimport { useUpdateEffect } from 'hooks/useUpdateEffect';\nimport { useEditableBlur } from 'hooks/useEditableBlur';\nimport { useEditableBindings } from 'hooks/useEditableBindings';\nimport { useEditableComponent } from 'hooks/useEditableComponent';\nimport { useStoreDispatch, useStoreSelector } from 'hooks/useStore';\n\nimport { ElementContext } from 'elements/Block/Element';\n\nimport { Hint } from 'components/Hint';\nimport { Pointer } from 'components/Pointer';\n\nimport { IComponent, config } from '.';\n\nimport style from '../../assets/style.module.css';\n\nexport const Edit: FC = ({ value, property }) => {\n const dispatch = useStoreDispatch();\n\n const element = useContext(ElementContext);\n\n const safe = useStoreSelector((state) => !!state.diagram.file[element.id]?.safe);\n\n const bindings = useEditableBindings({\n key: config.key,\n shift: false,\n });\n\n const onBlur = useEditableBlur({\n property,\n key: config.key,\n onBefore: (value, input) => {\n const blur = getState((state) => state.settings.app.emptyTextBlur);\n\n if (optimizers.noHtml(value).trim() === '') {\n if (optimizers.noHtml(input.default).trim() === '' && !blur.includes(OptionEmptyTextBlur.Disable)) {\n deleteElements(getBlockContextElements([element.id]));\n dispatch(storeGraphic.setSelectionElements([]));\n\n return false;\n }\n\n input.reset();\n\n return false;\n }\n\n return true;\n },\n });\n\n const input = useEditable({\n value,\n bindings,\n formats: [\n 'paragraph',\n 'bold',\n 'link',\n 'italic',\n 'underline',\n 'strike',\n 'background',\n ],\n validator: (value: string) => {\n if (!safe) {\n return '';\n }\n\n const file = getState((state) => state.diagram.file);\n const duplication = !Object.entries(file).every(([key, block]) => {\n if (config.effect.includes(block.type)) {\n if (key === element.id) {\n return true;\n }\n\n if (optimizers.noHtml(value).trim() === optimizers.noHtml(block.text).trim()) {\n return false;\n }\n }\n\n return true;\n });\n\n if (duplication) {\n return 'This object already exists';\n }\n\n return '';\n },\n onBlur: (value) => onBlur(value, input),\n });\n\n useEditableComponent(input);\n\n // Validate to Safe Mode Status Change\n useUpdateEffect(() => {\n if (!input.hasFocus()) {\n input.focus();\n }\n\n input.validate();\n }, [safe]);\n\n return (\n \n
\n {input.error && (\n
\n \n )}\n
= ({ value, property }) => {\n const element = useContext(ElementContext);\n\n const editing = useStoreSelector((state) => !(state.diagram.file[element.id]?.lock || state.diagram.captured[element.id] || state.graphic.options[element.id]?.invisible) && state.diagram.mode === 'edit' && state.graphic.component.key === config.key);\n\n return (\n \n {element.selected && editing ? (\n
\n );\n};\n\nexport const Text = {\n Component,\n toolbar: {\n key: config.key,\n tools: [\n 'link-back',\n 'safe',\n 'format-link',\n 'format-highlight-common',\n 'format-bold',\n 'format-italic',\n 'format-underline',\n 'format-strike',\n ],\n },\n};\n","import React, { FC } from 'react';\nimport optimizers from 'utils/optimizers';\n\nimport { useEditLink } from 'hooks/useEditLink';\n\nimport { IComponent, config } from '.';\n\nimport style from '../../assets/style.module.css';\n\nexport const View: FC = ({ value }) => {\n const onClick = useEditLink({\n key: config.key,\n });\n\n const content = {\n __html: value ?? '',\n };\n\n if (optimizers.noHtml(content.__html) === '') {\n content.__html = 'Stereotype
';\n }\n\n return (\n {}}\n aria-label=\"Text\"\n tabIndex={-1}\n role=\"button\"\n />\n );\n};\n","import React, { FC } from 'react';\nimport ReactQuill from 'react-quill';\n\nimport { useEditable } from 'hooks/useEditable';\nimport { useEditableBlur } from 'hooks/useEditableBlur';\nimport { useEditableBindings } from 'hooks/useEditableBindings';\nimport { useEditableComponent } from 'hooks/useEditableComponent';\n\nimport { IComponent, config } from '.';\n\nimport style from '../../assets/style.module.css';\n\nexport const Edit: FC = ({ value, property }) => {\n const bindings = useEditableBindings({\n key: config.key,\n shift: false,\n });\n\n const onBlur = useEditableBlur({\n property,\n key: config.key,\n });\n\n const input = useEditable({\n value,\n bindings,\n formats: [\n 'paragraph',\n 'bold',\n 'link',\n 'italic',\n 'underline',\n 'strike',\n 'background',\n ],\n onBlur: (value) => onBlur(value, input),\n });\n\n useEditableComponent(input);\n\n return (\n = ({ value, property }) => {\n const element = useContext(ElementContext);\n\n const editing = useStoreSelector((state) => !(state.diagram.file[element.id]?.lock || state.diagram.captured[element.id] || state.graphic.options[element.id]?.invisible) && state.diagram.mode === 'edit' && state.graphic.component.key === config.key);\n\n if ((!editing || !element.selected) && !optimizers.noHtml(value).trim()) {\n return null;\n }\n\n return (\n \n {element.selected && editing ? (\n
\n );\n};\n\nexport const Stereotype = {\n Component,\n toolbar: {\n key: config.key,\n tools: [\n 'link-back',\n 'format-link',\n 'format-highlight-common',\n 'format-bold',\n 'format-italic',\n 'format-underline',\n 'format-strike',\n ],\n },\n};\n","import React, { FC } from 'react';\nimport optimizers from 'utils/optimizers';\nimport { getDetailedLine } from 'utils';\n\nimport { useEditLink } from 'hooks/useEditLink';\n\nimport { IComponent, config } from '.';\n\nimport style from '../../assets/style.module.css';\n\nexport const View: FC = ({ value }) => {\n const onClick = useEditLink({\n key: config.key,\n });\n\n if (optimizers.noHtml(value) === '') {\n return null;\n }\n\n const content = {\n __html: getDetailedLine(value, style.detail),\n };\n\n return (\n {}}\n aria-label=\"Text\"\n tabIndex={-1}\n role=\"button\"\n />\n );\n};\n","import React, { FC } from 'react';\nimport ReactQuill from 'react-quill';\n\nimport { useEditable } from 'hooks/useEditable';\nimport { useEditableBlur } from 'hooks/useEditableBlur';\nimport { useEditableBindings } from 'hooks/useEditableBindings';\nimport { useEditableComponent } from 'hooks/useEditableComponent';\n\nimport { IComponent, config } from '.';\n\nimport style from '../../assets/style.module.css';\n\nexport const Edit: FC = ({ value, property }) => {\n const bindings = useEditableBindings({\n key: config.key,\n shift: true,\n });\n\n const onBlur = useEditableBlur({\n property,\n key: config.key,\n });\n\n const input = useEditable({\n value,\n bindings,\n formats: [\n 'paragraph',\n 'bold',\n 'link',\n 'italic',\n 'underline',\n 'strike',\n 'align',\n 'background',\n ],\n onBlur: (value) => onBlur(value, input),\n });\n\n useEditableComponent(input);\n\n return (\n = ({ value }) => {\n const onClick = useEditLink({\n key: config.key,\n });\n\n const context = useMemo(() => {\n return optimizers.noParagraphDuplication(value);\n }, [value]);\n\n if (optimizers.noHtml(optimizers.withSpaces(value)).trim() === '') {\n return null;\n }\n\n const content = {\n __html: context,\n };\n\n return (\n {}}\n aria-label=\"Text\"\n tabIndex={-1}\n role=\"button\"\n />\n );\n};\n","import React, { FC, useContext } from 'react';\nimport optimizers from 'utils/optimizers';\n\nimport { IElement } from 'hooks/useElement';\nimport { useStoreSelector } from 'hooks/useStore';\nimport { useCacheProperty } from 'hooks/useCacheProperty';\n\nimport { ElementContext } from 'elements/Block/Element';\n\nimport { View } from './View';\nimport { Edit } from './Edit';\nimport { Context } from './Context';\n\nimport style from '../../assets/style.module.css';\n\nexport const config = {\n key: 'attributes',\n};\n\nexport interface IComponent {\n value: string;\n property: string;\n element?: IElement;\n context?: string;\n}\n\nconst Component: FC = ({ value, property, element: wrap, context = '' }) => {\n const element = useContext(ElementContext);\n\n const editing = useStoreSelector((state) => !(state.diagram.file[element.id]?.lock || state.diagram.captured[element.id] || state.graphic.options[element.id]?.invisible) && state.diagram.mode === 'edit' && state.graphic.component.key === config.key);\n\n const shortened = useCacheProperty('shortened') ?? false;\n\n if (((!editing || !element.selected) && (!optimizers.noHtml(`${optimizers.withSpaces(context)}${value || ''}`).trim() || shortened))) {\n return null;\n }\n\n return (\n \n
\n );\n};\n\nexport const Attributes = {\n Component,\n toolbar: {\n key: config.key,\n tools: [\n 'link-back',\n 'format-alignment',\n 'format-link',\n 'format-highlight-common',\n 'format-bold',\n 'format-italic',\n 'format-underline',\n 'format-strike',\n ],\n },\n};\n","import React, { FC } from 'react';\nimport optimizers from 'utils/optimizers';\nimport { getDetailedLine } from 'utils';\n\nimport { useEditLink } from 'hooks/useEditLink';\n\nimport { IComponent, config } from '.';\n\nimport style from '../../assets/style.module.css';\n\nexport const View: FC = ({ value }) => {\n const onClick = useEditLink({\n key: config.key,\n });\n\n if (optimizers.noHtml(value) === '') {\n return null;\n }\n\n const content = {\n __html: getDetailedLine(value, style.detail),\n };\n\n return (\n {}}\n aria-label=\"Text\"\n tabIndex={-1}\n role=\"button\"\n />\n );\n};\n","import React, { FC } from 'react';\nimport ReactQuill from 'react-quill';\n\nimport { useEditable } from 'hooks/useEditable';\nimport { useEditableBlur } from 'hooks/useEditableBlur';\nimport { useEditableBindings } from 'hooks/useEditableBindings';\nimport { useEditableComponent } from 'hooks/useEditableComponent';\n\nimport { IComponent, config } from '.';\n\nimport style from '../../assets/style.module.css';\n\nexport const Edit: FC = ({ value, property }) => {\n const bindings = useEditableBindings({\n key: config.key,\n shift: true,\n });\n\n const onBlur = useEditableBlur({\n property,\n key: config.key,\n });\n\n const input = useEditable({\n value,\n bindings,\n formats: [\n 'paragraph',\n 'bold',\n 'link',\n 'italic',\n 'underline',\n 'strike',\n 'align',\n 'background',\n ],\n onBlur: (value) => onBlur(value, input),\n });\n\n useEditableComponent(input);\n\n return (\n = ({ value, detail = true }) => {\n const onClick = useEditLink({\n key: config.key,\n });\n\n const context = useMemo(() => {\n return optimizers.noParagraphDuplication(value);\n }, [value]);\n\n if (optimizers.noHtml(optimizers.withSpaces(value)).trim() === '') {\n return null;\n }\n\n const content = {\n __html: detail ? context : getDetailedLine(value, style.detail),\n };\n\n return (\n {}}\n aria-label=\"Text\"\n tabIndex={-1}\n role=\"button\"\n />\n );\n};\n","import React, { FC, useContext } from 'react';\nimport optimizers from 'utils/optimizers';\n\nimport { IElement } from 'hooks/useElement';\nimport { useStoreSelector } from 'hooks/useStore';\nimport { useCacheProperty } from 'hooks/useCacheProperty';\n\nimport { ElementContext } from 'elements/Block/Element';\n\nimport { View } from './View';\nimport { Edit } from './Edit';\nimport { Context } from './Context';\n\nimport style from '../../assets/style.module.css';\n\nexport const config = {\n key: 'operations',\n};\n\nexport interface IComponent {\n value: string;\n property: string;\n element?: IElement;\n context?: string;\n implementation?: string;\n}\n\nconst Component: FC = ({ value, property, element: wrap, context = '', implementation = '' }) => {\n const element = useContext(ElementContext);\n\n const editing = useStoreSelector((state) => !(state.diagram.file[element.id]?.lock || state.diagram.captured[element.id] || state.graphic.options[element.id]?.invisible) && state.diagram.mode === 'edit' && state.graphic.component.key === config.key);\n\n const shortened = useCacheProperty('shortened') ?? false;\n\n if (((!editing || !element.selected) && (!optimizers.noHtml(`${optimizers.withSpaces(`${context}${implementation}`)}${value}`).trim() || shortened))) {\n return null;\n }\n\n return (\n \n
\n );\n};\n\nexport const Operations = {\n Component,\n toolbar: {\n key: config.key,\n tools: [\n 'link-back',\n 'format-alignment',\n 'format-link',\n 'format-highlight-common',\n 'format-bold',\n 'format-italic',\n 'format-underline',\n 'format-strike',\n ],\n },\n};\n","var _path;\n\nvar _excluded = [\"title\", \"titleId\"];\n\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport * as React from \"react\";\n\nfunction SvgIconWhite(_ref, svgRef) {\n var title = _ref.title,\n titleId = _ref.titleId,\n props = _objectWithoutProperties(_ref, _excluded);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 28,\n height: 28,\n viewBox: \"0 0 28 28\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M21 10.5V8C21 7.44772 20.5523 7 20 7H8C7.44772 7 7 7.44772 7 8V10.5M21 10.5H7M21 10.5V15.75M7 10.5V15.75M21 15.75V20C21 20.5523 20.5523 21 20 21H8C7.44772 21 7 20.5523 7 20V15.75M21 15.75H7\",\n stroke: \"#FFFFFF\",\n strokeWidth: 1.5,\n strokeLinejoin: \"round\"\n })));\n}\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(SvgIconWhite);\nexport default __webpack_public_path__ + \"static/media/icon-white.e9872292ae9f8a0f905a0af37b514325.svg\";\nexport { ForwardRef as ReactComponent };","var _path;\n\nvar _excluded = [\"title\", \"titleId\"];\n\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport * as React from \"react\";\n\nfunction SvgIcon(_ref, svgRef) {\n var title = _ref.title,\n titleId = _ref.titleId,\n props = _objectWithoutProperties(_ref, _excluded);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 28,\n height: 28,\n viewBox: \"0 0 28 28\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M21 10.5V8C21 7.44772 20.5523 7 20 7H8C7.44772 7 7 7.44772 7 8V10.5M21 10.5H7M21 10.5V15.75M7 10.5V15.75M21 15.75V20C21 20.5523 20.5523 21 20 21H8C7.44772 21 7 20.5523 7 20V15.75M21 15.75H7\",\n stroke: \"#050022\",\n strokeWidth: 1.5,\n strokeLinejoin: \"round\"\n })));\n}\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(SvgIcon);\nexport default __webpack_public_path__ + \"static/media/icon.81aeb90d7c055c364c1651ea971d2d30.svg\";\nexport { ForwardRef as ReactComponent };","import React, { memo, useLayoutEffect } from 'react';\nimport optimizers from 'utils/optimizers';\nimport { IBlock, IConfig } from 'blocks';\nimport { getState } from 'utils/store';\n\nimport { storeGraphic } from 'store/graphic';\n\nimport { useJoins } from 'hooks/useJoins';\nimport { useClosed } from 'hooks/useClosed';\nimport { useOption } from 'hooks/useOption';\nimport { useResizer } from 'hooks/useResizer';\nimport { useJoinsPath } from 'hooks/useJoinsPath';\nimport { useJoinsSide } from 'hooks/useJoinsSide';\nimport { useStoreSelector } from 'hooks/useStore';\nimport { usePathFilter } from 'hooks/usePathFilter';\nimport { IElement, useElement } from 'hooks/useElement';\nimport { useCacheProperty } from 'hooks/useCacheProperty';\nimport { useEnterOnSelection } from 'hooks/useEnterOnSelection';\nimport { useArrangementElement } from 'hooks/useArrangementElement';\n\nimport { Shape } from 'elements/Block/Shape';\nimport { Button } from 'elements/Block/Button';\nimport { Resizer } from 'elements/Block/Resizer';\nimport { Selection } from 'elements/Block/Selection';\nimport { Arrangement } from 'elements/Block/Arrangement';\n\nimport { createBlock } from 'blocks/factories/simple/Block';\nimport { createCopier } from 'blocks/factories/simple/Copier';\nimport { createCreator } from 'blocks/factories/simple/Creator';\nimport { createRender } from 'blocks/factories/complex/Render';\nimport design from 'blocks/factories/assets/Simple.module.css';\n\nimport { Text } from './components/Text';\nimport { Stereotype } from './components/Stereotype';\nimport { Attributes } from './components/Attributes';\nimport { Operations } from './components/Operations';\n\nimport style from './assets/style.module.css';\nimport iconWhite from './assets/icon-white.svg';\nimport icon from './assets/icon.svg';\n\nexport const config: IConfig = {\n title: 'Class',\n type: 'uml-class-class',\n search: 'class uml unified modeling language',\n group: ['UML', 'UML Class Shape'],\n memo: {\n key: 'uml-class-shape',\n styles: [\n 'color',\n 'render',\n ],\n },\n styles: [\n 'color',\n 'render',\n ],\n};\n\ninterface IModel {\n stereotype: string;\n text: string;\n operations: string;\n attributes: string;\n color: string;\n render: number;\n safe: boolean;\n width?: number;\n detailed: boolean;\n shortened: boolean;\n lockKey: string;\n lock: boolean;\n}\n\ninterface IElements {\n attributes: IElement;\n operations: IElement;\n collapsed: boolean;\n shortened: boolean;\n side: 'L' | 'T' | 'R' | 'B';\n}\n\nconst Render = createRender({\n render: ({ width, height, elements }) => {\n const border = 2;\n\n const x = border / 2;\n const y = border / 2;\n const w = Math.max(width - border, 0);\n const h = Math.max(height - border, 0);\n\n const a = elements.attributes.ref?.offsetTop ?? 0;\n const b = elements.operations.ref?.offsetTop ?? 0;\n\n return (\n <>\n \n \n\n {elements.collapsed &&
}\n \n );\n },\n});\n\nconst Block = createBlock({\n memo: {\n key: config.memo.key,\n properties: config.memo.styles,\n },\n block: ({ properties, element }) => {\n const attributes = useElement();\n const operations = useElement();\n\n const detailed = useCacheProperty('detailed') ?? true;\n const shortened = useCacheProperty('shortened') ?? false;\n const collapsed = useCacheProperty('collapsed') ?? false;\n\n const { joins } = useJoins('from', [\n 'uml-class-interface-multiplicity',\n 'uml-class-class-multiplicity',\n 'uml-class-interface',\n 'uml-class-class',\n ], ([_, connector]) => {\n return getState((state) => state.diagram.file[connector]?.type === 'uml-class-connector' && state.diagram.file[connector]?.end === 2);\n });\n\n const { connectors } = useJoins('to', [\n 'uml-class-interface-multiplicity',\n 'uml-class-class-multiplicity',\n 'uml-class-interface',\n 'uml-class-class',\n ], ([_, connector]) => {\n return getState((state) => state.diagram.file[connector]?.type === 'uml-class-connector' && state.diagram.file[connector]?.end === 2);\n });\n\n const path = useJoinsPath(joins, [\n 'uml-class-interface-multiplicity',\n 'uml-class-class-multiplicity',\n 'uml-class-interface',\n 'uml-class-class',\n ]);\n\n const implementing = usePathFilter(path, [\n 'uml-class-interface-multiplicity',\n 'uml-class-interface',\n ]);\n\n const extending = usePathFilter(path, [\n 'uml-class-interface-multiplicity',\n 'uml-class-class-multiplicity',\n 'uml-class-interface',\n 'uml-class-class',\n ]).filter((id) => {\n return !implementing.includes(id);\n });\n\n const context = {\n operations: optimizers.withParagraphStart(['+', '#'], useStoreSelector((state) => {\n return extending.map((id) => {\n return state.diagram.file[id]?.operations;\n }).filter((value) => {\n return value;\n }).reverse().join('');\n })),\n attributes: optimizers.withParagraphStart(['+', '#'], useStoreSelector((state) => {\n return extending.map((id) => {\n return state.diagram.file[id]?.attributes;\n }).filter((value) => {\n return value;\n }).reverse().join('');\n })),\n implementations: optimizers.withParagraphStart(['+', '#'], useStoreSelector((state) => {\n return implementing.map((id) => {\n return state.diagram.file[id]?.operations;\n }).filter((value) => {\n return value;\n }).reverse().join('');\n })),\n };\n\n const validator = {\n operations: optimizers.noHtml(optimizers.withSpaces(context.operations)).trim(),\n attributes: optimizers.noHtml(optimizers.withSpaces(context.attributes)).trim(),\n };\n\n const detailable = validator.attributes || validator.operations || `${context.implementations || ''}${properties.attributes || ''}${properties.operations || ''}`.includes(':');\n const shortable = !!`${validator.attributes}${validator.operations}${context.implementations || properties.attributes || properties.operations || ''}`;\n const collapsable = connectors.length > 0;\n\n const closed = useClosed(path);\n const side = useJoinsSide(connectors);\n const arrangement = useArrangementElement();\n const resier = useResizer({\n fixed: true,\n maxWidth: 340,\n });\n\n useEnterOnSelection({\n onPress: (dispatch) => dispatch(storeGraphic.setComponentKey('text')),\n mode: 'edit',\n });\n\n useOption({\n id: element.id,\n key: 'detailed',\n value: !detailable ? 'disable' : '',\n deps: [!detailable],\n });\n\n useOption({\n id: element.id,\n key: 'shortened',\n value: !shortable ? 'disable' : '',\n deps: [!shortable],\n });\n\n useOption({\n id: element.id,\n key: 'collapsed',\n value: !collapsable ? 'disable' : '',\n deps: [!collapsable],\n });\n\n // Update Points on Property Change\n useLayoutEffect(() => {\n element.updatePoints();\n }, [\n closed,\n detailed,\n shortened,\n properties.stereotype,\n properties.text,\n properties.operations,\n properties.attributes,\n context.operations,\n context.attributes,\n context.implementations,\n ]);\n\n if (closed) {\n return null;\n }\n\n return (\n \n \n\n ({\n type: config.type,\n memo: config.memo.key,\n styles: config.styles,\n component: 'text',\n properties: {\n stereotype: '',\n text: '',\n operations: '',\n attributes: '',\n color: 'dark',\n render: 0,\n safe: false,\n detailed: true,\n shortened: false,\n lockKey: '',\n lock: false,\n },\n }),\n onCopy: createCopier({\n type: config.type,\n }),\n title: config.title,\n size: [144, 40],\n icon,\n class: {\n title: 'Class',\n icon: iconWhite,\n },\n },\n button: {\n tool: () => = ({ value }) => {\n const onClick = useEditLink({\n key: config.key,\n });\n\n const content = {\n __html: value ?? '',\n };\n\n if (optimizers.noHtml(content.__html) === '') {\n content.__html = 'Type something
';\n }\n\n return (\n {}}\n aria-label=\"Text\"\n tabIndex={-1}\n role=\"button\"\n />\n );\n};\n","import React, { FC, useContext } from 'react';\nimport { deleteElements, getBlockContextElements, getState } from 'utils/store';\nimport optimizers from 'utils/optimizers';\nimport ReactQuill from 'react-quill';\n\nimport { storeGraphic } from 'store/graphic';\nimport { OptionEmptyTextBlur } from 'store/settings';\n\nimport { useEditable } from 'hooks/useEditable';\nimport { useUpdateEffect } from 'hooks/useUpdateEffect';\nimport { useEditableBlur } from 'hooks/useEditableBlur';\nimport { useEditableBindings } from 'hooks/useEditableBindings';\nimport { useEditableComponent } from 'hooks/useEditableComponent';\nimport { useStoreDispatch, useStoreSelector } from 'hooks/useStore';\n\nimport { ElementContext } from 'elements/Block/Element';\n\nimport { Hint } from 'components/Hint';\nimport { Pointer } from 'components/Pointer';\n\nimport { IComponent, config } from '.';\n\nimport style from '../../assets/style.module.css';\n\nexport const Edit: FC = ({ value, property }) => {\n const dispatch = useStoreDispatch();\n\n const element = useContext(ElementContext);\n\n const safe = useStoreSelector((state) => !!state.diagram.file[element.id]?.safe);\n\n const bindings = useEditableBindings({\n key: config.key,\n shift: false,\n });\n\n const onBlur = useEditableBlur({\n property,\n key: config.key,\n onBefore: (value, input) => {\n const blur = getState((state) => state.settings.app.emptyTextBlur);\n\n if (optimizers.noHtml(value).trim() === '') {\n if (optimizers.noHtml(input.default).trim() === '' && !blur.includes(OptionEmptyTextBlur.Disable)) {\n deleteElements(getBlockContextElements([element.id]));\n dispatch(storeGraphic.setSelectionElements([]));\n\n return false;\n }\n\n input.reset();\n\n return false;\n }\n\n return true;\n },\n });\n\n const input = useEditable({\n value,\n bindings,\n formats: [\n 'paragraph',\n 'bold',\n 'link',\n 'italic',\n 'underline',\n 'strike',\n 'background',\n ],\n validator: (value: string) => {\n if (!safe) {\n return '';\n }\n\n const file = getState((state) => state.diagram.file);\n const duplication = !Object.entries(file).every(([key, block]) => {\n if (config.effect.includes(block.type)) {\n if (key === element.id) {\n return true;\n }\n\n if (optimizers.noHtml(value).trim() === optimizers.noHtml(block.text).trim()) {\n return false;\n }\n }\n\n return true;\n });\n\n if (duplication) {\n return 'This object already exists';\n }\n\n return '';\n },\n onBlur: (value) => onBlur(value, input),\n });\n\n useEditableComponent(input);\n\n // Validate to Safe Mode Status Change\n useUpdateEffect(() => {\n if (!input.hasFocus()) {\n input.focus();\n }\n\n input.validate();\n }, [safe]);\n\n return (\n \n
\n {input.error && (\n
\n \n )}\n
= ({ value, property }) => {\n const element = useContext(ElementContext);\n\n const editing = useStoreSelector((state) => !(state.diagram.file[element.id]?.lock || state.diagram.captured[element.id] || state.graphic.options[element.id]?.invisible) && state.diagram.mode === 'edit' && state.graphic.component.key === config.key);\n\n return (\n \n {element.selected && editing ? (\n
\n );\n};\n\nexport const Text = {\n Component,\n toolbar: {\n key: config.key,\n tools: [\n 'link-back',\n 'safe',\n 'format-link',\n 'format-highlight-common',\n 'format-bold',\n 'format-italic',\n 'format-underline',\n 'format-strike',\n ],\n },\n};\n","import React, { FC } from 'react';\nimport optimizers from 'utils/optimizers';\nimport { getDetailedLine } from 'utils';\n\nimport { useEditLink } from 'hooks/useEditLink';\n\nimport { IComponent, config } from '.';\n\nimport style from '../../assets/style.module.css';\n\nexport const View: FC = ({ value }) => {\n const onClick = useEditLink({\n key: config.key,\n });\n\n if (optimizers.noHtml(value) === '') {\n return null;\n }\n\n const content = {\n __html: getDetailedLine(value, style.detail),\n };\n\n return (\n {}}\n aria-label=\"Text\"\n tabIndex={-1}\n role=\"button\"\n />\n );\n};\n","import React, { FC } from 'react';\nimport ReactQuill from 'react-quill';\n\nimport { useEditable } from 'hooks/useEditable';\nimport { useEditableBlur } from 'hooks/useEditableBlur';\nimport { useEditableBindings } from 'hooks/useEditableBindings';\nimport { useEditableComponent } from 'hooks/useEditableComponent';\n\nimport { IComponent, config } from '.';\n\nimport style from '../../assets/style.module.css';\n\nexport const Edit: FC = ({ value, property }) => {\n const bindings = useEditableBindings({\n key: config.key,\n shift: true,\n });\n\n const onBlur = useEditableBlur({\n property,\n key: config.key,\n });\n\n const input = useEditable({\n value,\n bindings,\n formats: [\n 'paragraph',\n 'bold',\n 'link',\n 'italic',\n 'underline',\n 'strike',\n 'align',\n 'background',\n ],\n onBlur: (value) => onBlur(value, input),\n });\n\n useEditableComponent(input);\n\n return (\n = ({ value }) => {\n const onClick = useEditLink({\n key: config.key,\n });\n\n const context = useMemo(() => {\n return optimizers.noParagraphDuplication(value);\n }, [value]);\n\n if (optimizers.noHtml(optimizers.withSpaces(value)).trim() === '') {\n return null;\n }\n\n const content = {\n __html: context,\n };\n\n return (\n {}}\n aria-label=\"Text\"\n tabIndex={-1}\n role=\"button\"\n />\n );\n};\n","import React, { FC, useContext } from 'react';\nimport optimizers from 'utils/optimizers';\n\nimport { IElement } from 'hooks/useElement';\nimport { useStoreSelector } from 'hooks/useStore';\nimport { useCacheProperty } from 'hooks/useCacheProperty';\n\nimport { ElementContext } from 'elements/Block/Element';\n\nimport { View } from './View';\nimport { Edit } from './Edit';\nimport { Context } from './Context';\n\nimport style from '../../assets/style.module.css';\n\nexport const config = {\n key: 'operations',\n};\n\nexport interface IComponent {\n value: string;\n property: string;\n element?: IElement;\n context?: string;\n}\n\nconst Component: FC = ({ value, property, element: wrap, context = '' }) => {\n const element = useContext(ElementContext);\n\n const editing = useStoreSelector((state) => !(state.diagram.file[element.id]?.lock || state.diagram.captured[element.id] || state.graphic.options[element.id]?.invisible) && state.diagram.mode === 'edit' && state.graphic.component.key === config.key);\n\n const shortened = useCacheProperty('shortened') ?? false;\n\n if (((!editing || !element.selected) && (!optimizers.noHtml(`${optimizers.withSpaces(context)}${value || ''}`).trim() || shortened))) {\n return null;\n }\n\n return (\n \n
\n );\n};\n\nexport const Operations = {\n Component,\n toolbar: {\n key: config.key,\n tools: [\n 'link-back',\n 'format-alignment',\n 'format-link',\n 'format-highlight-common',\n 'format-bold',\n 'format-italic',\n 'format-underline',\n 'format-strike',\n ],\n },\n};\n","var _path;\n\nvar _excluded = [\"title\", \"titleId\"];\n\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport * as React from \"react\";\n\nfunction SvgIconWhite(_ref, svgRef) {\n var title = _ref.title,\n titleId = _ref.titleId,\n props = _objectWithoutProperties(_ref, _excluded);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 28,\n height: 28,\n viewBox: \"0 0 28 28\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M21 10.5V20C21 20.5523 20.5523 21 20 21H8C7.44772 21 7 20.5523 7 20V10.5M21 10.5V8C21 7.44772 20.5523 7 20 7H8C7.44772 7 7 7.44772 7 8V10.5M21 10.5H7\",\n stroke: \"#FFFFFF\",\n strokeWidth: 1.5,\n strokeLinejoin: \"round\"\n })));\n}\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(SvgIconWhite);\nexport default __webpack_public_path__ + \"static/media/icon-white.df7fc99f44e65a4be66f32ec01f0d407.svg\";\nexport { ForwardRef as ReactComponent };","var _path;\n\nvar _excluded = [\"title\", \"titleId\"];\n\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport * as React from \"react\";\n\nfunction SvgIcon(_ref, svgRef) {\n var title = _ref.title,\n titleId = _ref.titleId,\n props = _objectWithoutProperties(_ref, _excluded);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 28,\n height: 28,\n viewBox: \"0 0 28 28\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M21 10.5V20C21 20.5523 20.5523 21 20 21H8C7.44772 21 7 20.5523 7 20V10.5M21 10.5V8C21 7.44772 20.5523 7 20 7H8C7.44772 7 7 7.44772 7 8V10.5M21 10.5H7\",\n stroke: \"#050022\",\n strokeWidth: 1.5,\n strokeLinejoin: \"round\"\n })));\n}\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(SvgIcon);\nexport default __webpack_public_path__ + \"static/media/icon.fedcbab91804ac80a0ecf2574030ad1e.svg\";\nexport { ForwardRef as ReactComponent };","import React, { memo, useLayoutEffect } from 'react';\nimport optimizers from 'utils/optimizers';\nimport { IBlock, IConfig } from 'blocks';\nimport { getState } from 'utils/store';\n\nimport { storeGraphic } from 'store/graphic';\n\nimport { useJoins } from 'hooks/useJoins';\nimport { useClosed } from 'hooks/useClosed';\nimport { useOption } from 'hooks/useOption';\nimport { useResizer } from 'hooks/useResizer';\nimport { useJoinsPath } from 'hooks/useJoinsPath';\nimport { useJoinsSide } from 'hooks/useJoinsSide';\nimport { useStoreSelector } from 'hooks/useStore';\nimport { usePathFilter } from 'hooks/usePathFilter';\nimport { IElement, useElement } from 'hooks/useElement';\nimport { useCacheProperty } from 'hooks/useCacheProperty';\nimport { useEnterOnSelection } from 'hooks/useEnterOnSelection';\nimport { useArrangementElement } from 'hooks/useArrangementElement';\n\nimport { Shape } from 'elements/Block/Shape';\nimport { Button } from 'elements/Block/Button';\nimport { Resizer } from 'elements/Block/Resizer';\nimport { Selection } from 'elements/Block/Selection';\nimport { Arrangement } from 'elements/Block/Arrangement';\n\nimport { createBlock } from 'blocks/factories/simple/Block';\nimport { createCopier } from 'blocks/factories/simple/Copier';\nimport { createCreator } from 'blocks/factories/simple/Creator';\nimport { createRender } from 'blocks/factories/complex/Render';\nimport design from 'blocks/factories/assets/Simple.module.css';\n\nimport { Text } from './components/Text';\nimport { Operations } from './components/Operations';\n\nimport style from './assets/style.module.css';\nimport iconWhite from './assets/icon-white.svg';\nimport icon from './assets/icon.svg';\n\nexport const config: IConfig = {\n title: 'Interface',\n search: 'interface uml unified modeling language',\n type: 'uml-class-interface',\n group: ['UML', 'UML Class Shape'],\n memo: {\n key: 'uml-class-shape',\n styles: [\n 'color',\n 'render',\n ],\n },\n styles: [\n 'color',\n 'render',\n ],\n};\n\ninterface IModel {\n text: string;\n operations: string;\n color: string;\n render: number;\n safe: boolean;\n width?: number;\n detailed: boolean;\n shortened: boolean;\n lockKey: string;\n lock: boolean;\n}\n\ninterface IElements {\n operations: IElement;\n collapsed: boolean;\n shortened: boolean;\n side: 'L' | 'T' | 'R' | 'B';\n}\n\nconst Render = createRender({\n render: ({ width, height, elements }) => {\n const border = 2;\n\n const x = border / 2;\n const y = border / 2;\n const w = Math.max(width - border, 0);\n const h = Math.max(height - border, 0);\n\n const a = elements.operations.ref?.offsetTop ?? 0;\n\n return (\n <>\n \n \n\n {elements.collapsed &&
}\n \n );\n },\n});\n\nconst Block = createBlock({\n memo: {\n key: config.memo.key,\n properties: config.memo.styles,\n },\n block: ({ properties, element }) => {\n const operations = useElement();\n\n const detailed = useCacheProperty('detailed') ?? true;\n const shortened = useCacheProperty('shortened') ?? false;\n const collapsed = useCacheProperty('collapsed') ?? false;\n\n const { joins } = useJoins('from', [\n 'uml-class-interface-multiplicity',\n 'uml-class-class-multiplicity',\n 'uml-class-interface',\n 'uml-class-class',\n ], ([_, connector]) => {\n return getState((state) => state.diagram.file[connector]?.type === 'uml-class-connector' && state.diagram.file[connector]?.end === 2);\n });\n\n const { connectors } = useJoins('to', [\n 'uml-class-interface-multiplicity',\n 'uml-class-class-multiplicity',\n 'uml-class-interface',\n 'uml-class-class',\n ], ([_, connector]) => {\n return getState((state) => state.diagram.file[connector]?.type === 'uml-class-connector' && state.diagram.file[connector]?.end === 2);\n });\n\n const path = useJoinsPath(joins, [\n 'uml-class-interface-multiplicity',\n 'uml-class-class-multiplicity',\n 'uml-class-interface',\n 'uml-class-class',\n ]);\n\n const extending = usePathFilter(path, [\n 'uml-class-interface-multiplicity',\n 'uml-class-interface',\n ]);\n\n const context = {\n operations: optimizers.withParagraphStart(['+', '#'], useStoreSelector((state) => {\n return extending.map((id) => {\n return state.diagram.file[id]?.operations;\n }).filter((value) => {\n return value;\n }).reverse().join('');\n })),\n };\n\n const validator = {\n operations: optimizers.noHtml(optimizers.withSpaces(context.operations)).trim(),\n };\n\n const detailable = validator.operations || `${properties.operations || ''}`.includes(':');\n const shortable = !!`${validator.operations}${properties.operations || ''}`;\n const collapsable = connectors.length > 0;\n\n const closed = useClosed(path);\n const side = useJoinsSide(connectors);\n const arrangement = useArrangementElement();\n const resier = useResizer({\n fixed: true,\n maxWidth: 340,\n });\n\n useEnterOnSelection({\n onPress: (dispatch) => dispatch(storeGraphic.setComponentKey('text')),\n mode: 'edit',\n });\n\n useOption({\n id: element.id,\n key: 'detailed',\n value: !detailable ? 'disable' : '',\n deps: [!detailable],\n });\n\n useOption({\n id: element.id,\n key: 'shortened',\n value: !shortable ? 'disable' : '',\n deps: [!shortable],\n });\n\n useOption({\n id: element.id,\n key: 'collapsed',\n value: !collapsable ? 'disable' : '',\n deps: [!collapsable],\n });\n\n // Update Points on Property Change\n useLayoutEffect(() => {\n element.updatePoints();\n }, [\n closed,\n detailed,\n shortened,\n properties.text,\n properties.operations,\n context.operations,\n ]);\n\n if (closed) {\n return null;\n }\n\n return (\n \n \n\n «interface»
\n\n ({\n type: config.type,\n memo: config.memo.key,\n styles: config.styles,\n component: 'text',\n properties: {\n text: '',\n operations: '',\n color: 'dark',\n render: 0,\n safe: false,\n detailed: true,\n shortened: false,\n lockKey: '',\n lock: false,\n },\n }),\n onCopy: createCopier({\n type: config.type,\n }),\n title: config.title,\n size: [144, 40],\n icon,\n class: {\n title: 'Interface',\n icon: iconWhite,\n },\n },\n button: {\n tool: () => {\n properties: Extract>;\n}\n\ninterface IRenderConfig {\n render: ComponentType<{\n width: number;\n height: number;\n element: IElementContext;\n properties: Extract>;\n }>;\n}\n\nexport const createRender = ({ render: Render }: IRenderConfig) => {\n return ({ properties } : IRender) => {\n const element = useContext(ElementContext);\n\n const { render, unrender } = usePoints();\n\n useEffect(() => {\n render(element.id);\n\n return () => {\n unrender(element.id);\n };\n }, []);\n\n const size = points.elements[element.id]?.size;\n\n if (!size) {\n return null;\n }\n\n return (\n = (payload: {\n properties: Extract>;\n width: number;\n height: number;\n}) => [number, number, number, number];\n\ninterface IPaddingConfig {\n size: [0 | 1, 0 | 1];\n padding: [0 | 1, 0 | 1, 0 | 1, 0 | 1];\n creator: IPaddingCreator;\n}\n\nexport const createPadding = (payload: IPaddingConfig) => {\n return (id: string, frame: HTMLDivElement, wrap: HTMLDivElement) => {\n const properties = getState((state) => state.diagram.file[id]);\n const margin = config.margin[(properties.padding as 's' | 'm' | 'l') || 'm'];\n const size = [0, 0];\n\n const padding = payload.creator({\n properties,\n width: size[0],\n height: size[1],\n });\n\n if (!payload.padding[0]) wrap.style.paddingLeft = '';\n else if (parseFloat(wrap.style.paddingTop) !== padding[0] + margin) wrap.style.paddingLeft = `${padding[0] + margin}px`;\n\n if (!payload.padding[1]) wrap.style.paddingTop = '';\n else if (parseFloat(wrap.style.paddingTop) !== padding[1] + margin) wrap.style.paddingTop = `${padding[1] + margin}px`;\n\n if (!payload.padding[2]) wrap.style.paddingRight = '';\n else if (parseFloat(wrap.style.paddingRight) !== padding[2] + margin) wrap.style.paddingRight = `${padding[2] + margin}px`;\n\n if (!payload.padding[3]) wrap.style.paddingBottom = '';\n else if (parseFloat(wrap.style.paddingBottom) !== padding[3] + margin) wrap.style.paddingBottom = `${padding[3] + margin}px`;\n\n if (payload.size[0]) size[0] = frame.offsetWidth;\n if (payload.size[1]) size[1] = frame.offsetHeight;\n\n return payload.creator({\n properties,\n width: size[0],\n height: size[1],\n }).map((value) => {\n return value + margin;\n }) as [number, number, number, number];\n };\n};\n","import { useContext, useLayoutEffect } from 'react';\nimport { getState } from 'utils/store';\nimport { blocks } from 'blocks';\n\nimport { ElementContext } from 'elements/Block/Element';\n\nimport { useElement } from './useElement';\nimport { useStoreSelector } from './useStore';\n\nexport const useWrap = () => {\n const element = useContext(ElementContext);\n\n const file = getState((state) => state.diagram.file);\n const child = useStoreSelector((state) => state.diagram.childs[element.id]?.[0] || '');\n\n const wrap = useElement();\n\n const type = file[child]?.type;\n const status = type in blocks;\n\n // Update Points on Child Change\n useLayoutEffect(() => {\n element.updatePoints();\n }, [status]);\n\n return {\n status,\n id: child,\n type,\n element: wrap.ref,\n attributes: {\n point: [0, 0],\n element: wrap,\n id: child,\n },\n };\n};\n","import { useContext } from 'react';\nimport { getState } from 'utils/store';\nimport { blocks } from 'blocks';\n\nimport { OptionSecondElementClick } from 'store/settings';\n\nimport { config } from 'blocks/General/Text';\n\nimport { CanvasDynamicContext } from 'elements/Canvas';\nimport { ElementContext } from 'elements/Block/Element';\n\nimport { useTextSelector } from './useTextSelector';\nimport { useStoreSelector } from './useStore';\n\nexport const useTextCreator = () => {\n const element = useContext(ElementContext);\n const canvas = useContext(CanvasDynamicContext);\n\n const lock = useStoreSelector((state) => !!state.diagram.captured[element.id] || state.diagram.file[element.id]?.lock || state.graphic.options[element.id]?.invisible);\n\n const select = useTextSelector();\n\n if (lock) {\n return () => () => {};\n }\n\n return (type: 'click' | 'enter') => () => {\n const selected = select(type)();\n const click = getState((state) => state.settings.app.secondElementClick);\n\n if (selected || (type === 'click' && !click.includes(OptionSecondElementClick.TextCreating))) {\n return;\n }\n\n const file = { ...getState((state) => state.diagram.file) };\n\n blocks[config.type].element.onCreate({\n file,\n position: [0, 0],\n parent: element.id,\n auto: canvas?.space ? false : undefined,\n preventComponentStatus: true,\n });\n };\n};\n","import { useContext, useLayoutEffect } from 'react';\nimport { points } from 'utils/points';\n\nimport { ElementContext } from 'elements/Block/Element';\n\nexport type IPadding = (id: string, frame: HTMLDivElement, wrap: HTMLDivElement) => [number, number, number, number];\n\nexport const usePadding = (padding: IPadding, wrap: HTMLDivElement | null) => {\n const element = useContext(ElementContext);\n\n useLayoutEffect(() => {\n if (!wrap) {\n return () => {};\n }\n\n const preprocess = (frame: HTMLDivElement) => {\n const margin = padding(element.id, frame, wrap);\n\n wrap.style.paddingLeft = `${margin[0]}px`;\n wrap.style.paddingTop = `${margin[1]}px`;\n wrap.style.paddingRight = `${margin[2]}px`;\n wrap.style.paddingBottom = `${margin[3]}px`;\n };\n\n points.preprocess({\n id: element.id,\n callback: preprocess,\n });\n\n element.updatePoints();\n\n return () => {\n points.unpreprocess({\n id: element.id,\n callback: preprocess,\n });\n };\n }, [wrap]);\n};\n","// extracted by mini-css-extract-plugin\nexport default {\"element\":\"Shape_element__Fcyn-\",\"transparent\":\"Shape_transparent__KmfGM\",\"wrap\":\"Shape_wrap__PXGAh\",\"hidden\":\"Shape_hidden__XtQHQ\"};","var _path;\n\nvar _excluded = [\"title\", \"titleId\"];\n\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport * as React from \"react\";\n\nfunction SvgShape(_ref, svgRef) {\n var title = _ref.title,\n titleId = _ref.titleId,\n props = _objectWithoutProperties(_ref, _excluded);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 28,\n height: 28,\n viewBox: \"0 0 28 28\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n fillRule: \"evenodd\",\n clipRule: \"evenodd\",\n d: \"M7.52002 12.1254C7.52002 9.57085 9.59087 7.5 12.1454 7.5C14.6999 7.5 16.7708 9.57085 16.7708 12.1254C16.7708 14.6799 14.6999 16.7507 12.1454 16.7507C9.59087 16.7507 7.52002 14.6799 7.52002 12.1254ZM12.1454 6C8.76244 6 6.02002 8.74242 6.02002 12.1254C6.02002 14.2466 7.09825 16.116 8.73654 17.2153L8.47914 18.7919C8.32833 19.7157 9.04127 20.5544 9.97721 20.5544H20.4569C21.3928 20.5544 22.1057 19.7157 21.9549 18.7919L20.4505 9.57703C20.3306 8.84284 19.6963 8.30371 18.9524 8.30371H16.9326C15.8102 6.89952 14.0828 6 12.1454 6ZM17.8155 9.80371C18.1089 10.5197 18.2708 11.3036 18.2708 12.1254C18.2708 15.5083 15.5283 18.2507 12.1454 18.2507C11.4438 18.2507 10.7698 18.1328 10.1421 17.9156L9.95954 19.0336C9.95939 19.0346 9.95929 19.0353 9.95922 19.036C9.95908 19.0375 9.95911 19.0385 9.95914 19.039L9.95951 19.0411C9.95995 19.0426 9.96111 19.0452 9.96356 19.0481C9.96602 19.051 9.96844 19.0526 9.96988 19.0533L9.97191 19.054C9.9726 19.0541 9.97423 19.0544 9.97721 19.0544H20.4569C20.4598 19.0544 20.4615 19.0541 20.4622 19.054L20.4642 19.0533C20.4656 19.0526 20.4681 19.051 20.4705 19.0481C20.473 19.0452 20.4741 19.0426 20.4746 19.0411L20.4749 19.039L20.4749 19.0372L20.4745 19.0336L18.9701 9.81873C18.9687 9.81007 18.9612 9.80371 18.9524 9.80371H17.8155Z\",\n fill: \"#FFFFFF\"\n })));\n}\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(SvgShape);\nexport default __webpack_public_path__ + \"static/media/Shape.b40f9cee45fca32ece8fec107e561a44.svg\";\nexport { ForwardRef as ReactComponent };","import React, { ComponentType } from 'react';\nimport { IButton, IConfig, IOption } from 'blocks';\nimport { IOption as ITool } from 'tools';\n\nimport { useWrap } from 'hooks/useWrap';\nimport { useResizer } from 'hooks/useResizer';\nimport { useTextCreator } from 'hooks/useTextCreator';\nimport { IPadding, usePadding } from 'hooks/usePadding';\nimport { useEnterOnSelection } from 'hooks/useEnterOnSelection';\nimport { useClickOnSelection } from 'hooks/useClickOnSelection';\nimport { useArrangementElement } from 'hooks/useArrangementElement';\n\nimport { Wrap } from 'elements/Block/Wrap';\nimport { Frame } from 'elements/Wrap/Frame';\nimport { Shape } from 'elements/Block/Shape';\nimport { Button } from 'elements/Block/Button';\nimport { Resizer } from 'elements/Block/Resizer';\nimport { Selection } from 'elements/Block/Selection';\nimport { Arrangement } from 'elements/Block/Arrangement';\n\nimport { IRender } from 'blocks/factories/simple/Render';\nimport { IModel, Model } from 'blocks/factories/shape/Model';\nimport { createBlock as create } from 'blocks/factories/simple/Block';\nimport design from 'blocks/factories/assets/Simple.module.css';\n\nimport { createCreator } from '../simple/Creator';\nimport { createCopier } from '../simple/Copier';\n\nimport style from '../assets/Shape.module.css';\nimport icon from '../assets/Shape.svg';\n\ntype Optional = Omit & Partial>;\n\ninterface IBlockConfig {\n size?: [number, number];\n memo: {\n key: string;\n properties: string[];\n };\n Padding: IPadding;\n Render: ComponentType>>;\n contentClass?: string;\n}\n\nexport const createBlock = ({ size = [22, 22], memo, Render, Padding, contentClass } : IBlockConfig) => create>({\n memo,\n block: ({ properties, element }) => {\n const wrap = useWrap();\n const resier = useResizer();\n const arrangement = useArrangementElement();\n const create = useTextCreator();\n\n usePadding(Padding, wrap.element);\n\n useEnterOnSelection({\n onPress: create('enter'),\n mode: 'edit',\n });\n\n useClickOnSelection({\n onClick: create('click'),\n mode: 'edit',\n });\n\n return (\n \n \n (config: IConfig, properites: Optional) => createCreator({\n type: config.type,\n memo: config.memo.key,\n styles: config.styles,\n properties: {\n color: 'dark',\n render: 0,\n padding: 'm',\n transparent: true,\n lockKey: '',\n lock: false,\n\n ...properites,\n } as any,\n }),\n copier: (config: IConfig) => createCopier({\n type: config.type,\n }),\n button: (config: IConfig, options: ITool[] = []): IButton => ({\n tool: () => ({\n render: ({ width, height, element }) => {\n const border = 2;\n const offset = border / 2;\n\n const x = Math.max(width - offset, 0);\n const y = Math.max(height - offset, 0);\n\n let a = (30 / 64) * y;\n let b = 20;\n\n if ((x - 24) / y <= 30 / 64) a = x - 24;\n if (y - 20 * 2 < 34) b = (y - 34) / 2;\n\n const points = [\n { c: 'M', x: x, y: y - b },\n { c: 'V', y: offset + b },\n { c: 'L', x1: x, y1: y - b, x2: offset + a, y2: offset + b, x: offset + a, y: offset + b },\n { c: 'C', x1: offset + a, y1: offset + b, x2: offset + a, y2: offset, x: offset + a, y: offset },\n { c: 'L', x: offset, y: y / 2 },\n { c: 'L', x: offset + a, y: y },\n { c: 'C', x1: offset + a, y1: y, x2: offset + a, y2: y - b, x: offset + a, y: y - b },\n { c: 'Z' },\n ];\n\n return (\n \n \n );\n },\n});\n\nconst Padding = createPadding({\n size: [0, 1],\n padding: [0, 1, 1, 1],\n creator: ({ height }) => {\n const a = 20;\n const b = (30 / 64) * height - a;\n\n return [b, a, 0, a];\n },\n});\n\nconst Block = createBlock({\n size: [42, 36],\n memo: {\n key: config.memo.key,\n properties: config.memo.styles,\n },\n Render,\n Padding,\n});\n\nexport const BasicShapeArrowLeft : IBlock = {\n type: config.type,\n block: memo(Block),\n element: {\n group: config.group,\n search: config.search,\n styles: config.styles,\n options: block.element.options,\n constraints: block.element.constraints,\n onCreate: block.creator(config, {\n width: 88,\n height: 64,\n }),\n onCopy: block.copier(config),\n title: config.title,\n size: [88, 64],\n icon,\n class: block.element.class,\n },\n button: block.button(config),\n tools: ['shape-basic', ...block.tools],\n toolbars: block.toolbars,\n};\n","var _path;\n\nvar _excluded = [\"title\", \"titleId\"];\n\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport * as React from \"react\";\n\nfunction SvgIcon(_ref, svgRef) {\n var title = _ref.title,\n titleId = _ref.titleId,\n props = _objectWithoutProperties(_ref, _excluded);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 28,\n height: 28,\n viewBox: \"0 0 28 28\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M4.53349 14.6402L9.78256 20.9391C10.0819 21.2983 10.6667 21.0866 10.6667 20.619V17.6786C10.6667 17.5405 10.7786 17.4286 10.9167 17.4286H17.0833C17.2214 17.4286 17.3333 17.5405 17.3333 17.6786V20.619C17.3333 21.0866 17.9181 21.2983 18.2174 20.9391L23.4665 14.6402C23.7756 14.2693 23.7756 13.7307 23.4665 13.3598L18.2174 7.06093C17.9181 6.70168 17.3333 6.91338 17.3333 7.38103V10.3214C17.3333 10.4595 17.2214 10.5714 17.0833 10.5714H10.9167C10.7786 10.5714 10.6667 10.4595 10.6667 10.3214V7.38102C10.6667 6.91338 10.0819 6.70168 9.78256 7.06093L4.53349 13.3598C4.22445 13.7307 4.22445 14.2693 4.53349 14.6402Z\",\n stroke: \"#050022\",\n strokeWidth: 1.5,\n strokeLinejoin: \"round\"\n })));\n}\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(SvgIcon);\nexport default __webpack_public_path__ + \"static/media/icon.0e85007a44d33d31d6adb70a0c5b8b7f.svg\";\nexport { ForwardRef as ReactComponent };","import React, { memo } from 'react';\nimport { IBlock, IConfig } from 'blocks';\n\nimport { Model } from 'blocks/factories/shape/Model';\nimport { createRender } from 'blocks/factories/simple/Render';\nimport { createPadding } from 'blocks/factories/simple/Padding';\nimport { createBlock, block } from 'blocks/factories/shape/Block';\n\nimport icon from './assets/icon.svg';\n\nconst { serialize } = require('svg-path-round-corners/dist/es6/serialize');\nconst { roundCorners } = require('svg-path-round-corners/dist/es6/index');\n\ntype IModel = Model<{}>;\n\nexport const config: IConfig = {\n title: 'Arrow left-right',\n search: 'basic shape arrow left right',\n type: 'basic-shape-arrow-left-right',\n group: ['Shape', 'Basic Shape'],\n memo: {\n key: 'basic-shape',\n styles: block.element.memo,\n },\n styles: block.element.styles,\n};\n\nconst Render = createRender({\n render: ({ width, height, element }) => {\n const border = 2;\n const offset = border / 2;\n\n const x = Math.max(width - offset, 0);\n const y = Math.max(height - offset, 0);\n\n let a = (30 / 64) * y;\n let b = 20;\n\n if ((x / 2 - 8) / y <= 30 / 64) a = x / 2 - 8;\n if (y - 20 * 2 < 34) b = (y - 34) / 2;\n\n const points = [\n { c: 'M', x: offset, y: y / 2 },\n { c: 'L', x: offset + a, y: y },\n { c: 'C', x1: offset + a, y1: y, x2: offset + a, y2: y - b, x: offset + a, y: y - b },\n { c: 'H', x: x - a },\n { c: 'C', x1: x - a, y1: y - b, x2: x - a, y2: y, x: x - a, y: y },\n { c: 'L', x: x, y: y / 2 },\n { c: 'L', x: x - a, y: offset },\n { c: 'C', x1: x - a, y1: offset, x2: x - a, y2: offset + b, x: x - a, y: offset + b },\n { c: 'H', x: offset + a },\n { c: 'C', x1: offset + a, y1: offset + b, x2: offset + a, y2: offset, x: offset + a, y: offset },\n { c: 'Z' },\n ];\n\n return (\n \n \n );\n },\n});\n\nconst Padding = createPadding({\n size: [0, 1],\n padding: [0, 1, 0, 1],\n creator: ({ height }) => {\n const a = 20;\n const b = (30 / 64) * height - a;\n\n return [b, a, b, a];\n },\n});\n\nconst Block = createBlock({\n size: [42, 36],\n memo: {\n key: config.memo.key,\n properties: config.memo.styles,\n },\n Render,\n Padding,\n});\n\nexport const BasicShapeArrowLeftRight : IBlock = {\n type: config.type,\n block: memo(Block),\n element: {\n group: config.group,\n search: config.search,\n styles: config.styles,\n options: block.element.options,\n constraints: block.element.constraints,\n onCreate: block.creator(config, {\n width: 88,\n height: 64,\n }),\n onCopy: block.copier(config),\n title: config.title,\n size: [88, 64],\n icon,\n class: block.element.class,\n },\n button: block.button(config),\n tools: ['shape-basic', ...block.tools],\n toolbars: block.toolbars,\n};\n","var _path;\n\nvar _excluded = [\"title\", \"titleId\"];\n\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport * as React from \"react\";\n\nfunction SvgIcon(_ref, svgRef) {\n var title = _ref.title,\n titleId = _ref.titleId,\n props = _objectWithoutProperties(_ref, _excluded);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 28,\n height: 28,\n viewBox: \"0 0 28 28\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M6 16.4285V11.5714C6 11.0191 6.44772 10.5714 7 10.5714H14.8929C15.0309 10.5714 15.1429 10.4595 15.1429 10.3214V7.35159C15.1429 6.88738 15.7204 6.67374 16.0225 7.02619L21.4422 13.3492C21.7632 13.7237 21.7632 14.2763 21.4422 14.6507L16.0225 20.9737C15.7204 21.3262 15.1429 21.1125 15.1429 20.6483V17.6785C15.1429 17.5405 15.0309 17.4285 14.8929 17.4285H7C6.44772 17.4285 6 16.9808 6 16.4285Z\",\n stroke: \"#050022\",\n strokeWidth: 1.5,\n strokeLinejoin: \"round\"\n })));\n}\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(SvgIcon);\nexport default __webpack_public_path__ + \"static/media/icon.3ef0a69b9c30dc92b61ad7b794a64417.svg\";\nexport { ForwardRef as ReactComponent };","import React, { memo } from 'react';\nimport { IBlock, IConfig } from 'blocks';\n\nimport { Model } from 'blocks/factories/shape/Model';\nimport { createRender } from 'blocks/factories/simple/Render';\nimport { createPadding } from 'blocks/factories/simple/Padding';\nimport { createBlock, block } from 'blocks/factories/shape/Block';\n\nimport icon from './assets/icon.svg';\n\nconst { serialize } = require('svg-path-round-corners/dist/es6/serialize');\nconst { roundCorners } = require('svg-path-round-corners/dist/es6/index');\n\ntype IModel = Model<{}>;\n\nexport const config: IConfig = {\n title: 'Arrow right',\n search: 'basic shape arrow right',\n type: 'basic-shape-arrow-right',\n group: ['Basic', 'Basic Shape'],\n memo: {\n key: 'basic-shape',\n styles: block.element.memo,\n },\n styles: block.element.styles,\n};\n\nconst Render = createRender({\n render: ({ width, height, element }) => {\n const border = 2;\n const offset = border / 2;\n\n const x = Math.max(width - offset, 0);\n const y = Math.max(height - offset, 0);\n\n let a = (30 / 64) * y;\n let b = 20;\n\n if ((x - 24) / y <= 30 / 64) a = x - 24;\n if (y - 20 * 2 < 34) b = (y - 34) / 2;\n\n const points = [\n { c: 'M', x: offset, y: y - b },\n { c: 'V', y: offset + b },\n { c: 'L', x: x - a, y: offset + b },\n { c: 'C', x1: x - a, y1: offset + b, x2: x - a, y2: offset, x: x - a, y: offset },\n { c: 'L', x: x, y: y / 2 },\n { c: 'L', x: x - a, y: y },\n { c: 'C', x1: x - a, y1: y, x2: x - a, y2: y - b, x: x - a, y: y - b },\n { c: 'Z' },\n ];\n\n return (\n \n \n );\n },\n});\n\nconst Padding = createPadding({\n size: [0, 1],\n padding: [1, 1, 0, 1],\n creator: ({ height }) => {\n const a = 20;\n const b = (30 / 64) * height - a;\n\n return [0, a, b, a];\n },\n});\n\nconst Block = createBlock({\n size: [42, 36],\n memo: {\n key: config.memo.key,\n properties: config.memo.styles,\n },\n Render,\n Padding,\n});\n\nexport const BasicShapeArrowRight : IBlock = {\n type: config.type,\n block: memo(Block),\n element: {\n group: config.group,\n search: config.search,\n styles: config.styles,\n options: block.element.options,\n constraints: block.element.constraints,\n onCreate: block.creator(config, {\n width: 88,\n height: 64,\n }),\n onCopy: block.copier(config),\n title: config.title,\n size: [88, 64],\n icon,\n class: block.element.class,\n },\n button: block.button(config),\n tools: ['shape-basic', ...block.tools],\n toolbars: block.toolbars,\n};\n","var _path;\n\nvar _excluded = [\"title\", \"titleId\"];\n\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport * as React from \"react\";\n\nfunction SvgIcon(_ref, svgRef) {\n var title = _ref.title,\n titleId = _ref.titleId,\n props = _objectWithoutProperties(_ref, _excluded);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 28,\n height: 28,\n viewBox: \"0 0 28 28\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M21 9.5C21 8.11929 17.866 7 14 7C10.134 7 7 8.11929 7 9.5M21 9.5C21 10.8807 17.866 12 14 12C10.134 12 7 10.8807 7 9.5M21 9.5V19C21 20.1046 17.866 21 14 21C10.134 21 7 20.1046 7 19V9.5\",\n stroke: \"#050022\",\n strokeWidth: 1.5,\n strokeLinejoin: \"round\"\n })));\n}\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(SvgIcon);\nexport default __webpack_public_path__ + \"static/media/icon.faf50c4ab36d6cb776a29be91604b86b.svg\";\nexport { ForwardRef as ReactComponent };","import React, { memo } from 'react';\nimport { IBlock, IConfig } from 'blocks';\n\nimport { Model } from 'blocks/factories/shape/Model';\nimport { createRender } from 'blocks/factories/simple/Render';\nimport { createPadding } from 'blocks/factories/simple/Padding';\nimport { createBlock, block } from 'blocks/factories/shape/Block';\n\nimport icon from './assets/icon.svg';\n\nconst { serialize } = require('svg-path-round-corners/dist/es6/serialize');\n\ntype IModel = Model<{}>;\n\nexport const config: IConfig = {\n title: 'Barrel',\n search: 'basic shape barrel',\n type: 'basic-shape-barrel',\n group: ['Basic', 'Basic Shape'],\n memo: {\n key: 'basic-shape',\n styles: block.element.memo,\n },\n styles: block.element.styles,\n};\n\nconst Render = createRender({\n render: ({ width, height, element }) => {\n const border = 2;\n const offset = border / 2;\n\n const x = Math.max(width - offset, 0);\n const y = Math.max(height - offset, 0);\n const b = 6;\n\n let a = (21 / 64) * x;\n\n if (a > Math.max(y * 0.68, y - 40)) {\n a = Math.max(y * 0.68, y - 40);\n }\n\n const points = [\n { c: 'M', x: x, y: a / 2 },\n { c: 'C', x1: x, y1: a / 2 + ((b / 21) * a), x2: (49.6731 / 64) * x, y2: a, x: x / 2, y: a },\n { c: 'C', x1: (14.3269 / 64) * x, y1: a, x2: offset, y2: a / 2 + ((b / 21) * a), x: offset, y: a / 2 },\n { c: 'M', x: x, y: a / 2 },\n { c: 'C', x1: x, y1: offset + a / 2 - ((b / 21) * a), x2: (49.6731 / 64) * x, y2: offset, x: x / 2, y: offset },\n { c: 'C', x1: (14.3269 / 64) * x, y1: offset, x2: offset, y2: offset + a / 2 - ((b / 21) * a), x: offset, y: a / 2 },\n { c: 'M', x: x, y: a / 2 },\n { c: 'V', y: y - a / 2 - 2 },\n { c: 'C', x1: x, y1: y - a / 2 + ((b / 21) * a), x2: (49.6731 / 64) * x, y2: y, x: x / 2, y: y },\n { c: 'C', x1: (14.3269 / 64) * x, y1: y, x2: offset, y2: y - a / 2 + ((b / 21) * a), x: offset, y: y - a / 2 - 2 },\n { c: 'V', y: a / 2 },\n ];\n\n return (\n \n \n );\n },\n});\n\nconst Padding = createPadding({\n size: [1, 0],\n padding: [1, 0, 1, 1],\n creator: ({ width }) => {\n const a = (21 / 64) * width - 2;\n\n return [0, a, 0, 0];\n },\n});\n\nconst Block = createBlock({\n memo: {\n key: config.memo.key,\n properties: config.memo.styles,\n },\n Render,\n Padding,\n});\n\nexport const BasicShapeBarrel : IBlock = {\n type: config.type,\n block: memo(Block),\n element: {\n group: config.group,\n search: config.search,\n styles: config.styles,\n options: block.element.options,\n constraints: {\n prevent: {\n ...block.element.constraints.prevent,\n\n render: [7, 8],\n },\n },\n onCreate: block.creator(config, {\n width: 72,\n height: 64,\n }),\n onCopy: block.copier(config),\n title: config.title,\n size: [72, 64],\n icon,\n class: block.element.class,\n },\n button: block.button(config),\n tools: ['shape-basic', ...block.tools],\n toolbars: block.toolbars,\n};\n","/*\n * A fast javascript implementation of simplex noise by Jonas Wagner\n\nBased on a speed-improved simplex noise algorithm for 2D, 3D and 4D in Java.\nWhich is based on example code by Stefan Gustavson (stegu@itn.liu.se).\nWith Optimisations by Peter Eastman (peastman@drizzle.stanford.edu).\nBetter rank ordering method by Stefan Gustavson in 2012.\n\n Copyright (c) 2022 Jonas Wagner\n\n Permission is hereby granted, free of charge, to any person obtaining a copy\n of this software and associated documentation files (the \"Software\"), to deal\n in the Software without restriction, including without limitation the rights\n to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n copies of the Software, and to permit persons to whom the Software is\n furnished to do so, subject to the following conditions:\n\n The above copyright notice and this permission notice shall be included in all\n copies or substantial portions of the Software.\n\n THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n SOFTWARE.\n */\n\n\n// these #__PURE__ comments help uglifyjs with dead code removal\n// \nconst F2 = /*#__PURE__*/ 0.5 * (Math.sqrt(3.0) - 1.0);\nconst G2 = /*#__PURE__*/ (3.0 - Math.sqrt(3.0)) / 6.0;\nconst F3 = 1.0 / 3.0;\nconst G3 = 1.0 / 6.0;\nconst F4 = /*#__PURE__*/ (Math.sqrt(5.0) - 1.0) / 4.0;\nconst G4 = /*#__PURE__*/ (5.0 - Math.sqrt(5.0)) / 20.0;\n\n// I'm really not sure why this | 0 (basically a coercion to int)\n// is making this faster but I get ~5 million ops/sec more on the\n// benchmarks across the board or a ~10% speedup.\nconst fastFloor = (x: number) => Math.floor(x) | 0;\n\nconst grad2 = /*#__PURE__*/ new Float64Array([1, 1,\n -1, 1,\n 1, -1,\n\n -1, -1,\n 1, 0,\n -1, 0,\n\n 1, 0,\n -1, 0,\n 0, 1,\n\n 0, -1,\n 0, 1,\n 0, -1]);\n\n// double seems to be faster than single or int's\n// probably because most operations are in double precision\nconst grad3 = /*#__PURE__*/ new Float64Array([1, 1, 0,\n -1, 1, 0,\n 1, -1, 0,\n\n -1, -1, 0,\n 1, 0, 1,\n -1, 0, 1,\n\n 1, 0, -1,\n -1, 0, -1,\n 0, 1, 1,\n\n 0, -1, 1,\n 0, 1, -1,\n 0, -1, -1]);\n\n// double is a bit quicker here as well\nconst grad4 = /*#__PURE__*/ new Float64Array([0, 1, 1, 1, 0, 1, 1, -1, 0, 1, -1, 1, 0, 1, -1, -1,\n 0, -1, 1, 1, 0, -1, 1, -1, 0, -1, -1, 1, 0, -1, -1, -1,\n 1, 0, 1, 1, 1, 0, 1, -1, 1, 0, -1, 1, 1, 0, -1, -1,\n -1, 0, 1, 1, -1, 0, 1, -1, -1, 0, -1, 1, -1, 0, -1, -1,\n 1, 1, 0, 1, 1, 1, 0, -1, 1, -1, 0, 1, 1, -1, 0, -1,\n -1, 1, 0, 1, -1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, -1,\n 1, 1, 1, 0, 1, 1, -1, 0, 1, -1, 1, 0, 1, -1, -1, 0,\n -1, 1, 1, 0, -1, 1, -1, 0, -1, -1, 1, 0, -1, -1, -1, 0]);\n\n/**\n * A random() function, must return a number in the interval [0,1), just like Math.random().\n */\nexport type RandomFn = () => number;\n\n/**\n * Samples the noise field in two dimensions\n * \n * Coordinates should be finite, bigger than -2^31 and smaller than 2^31.\n * @param x\n * @param y\n * @returns a number in the interval [-1, 1]\n */\nexport type NoiseFunction2D = (x: number, y: number) => number;\n\n/**\n * Creates a 2D noise function\n * @param random the random function that will be used to build the permutation table\n * @returns {NoiseFunction2D}\n */\nexport function createNoise2D(random: RandomFn = Math.random): NoiseFunction2D {\n const perm = buildPermutationTable(random);\n // precalculating this yields a little ~3% performance improvement.\n const permGrad2x = new Float64Array(perm).map(v => grad2[(v % 12) * 2]);\n const permGrad2y = new Float64Array(perm).map(v => grad2[(v % 12) * 2 + 1]);\n return function noise2D(x: number, y: number): number {\n // if(!isFinite(x) || !isFinite(y)) return 0;\n let n0 = 0; // Noise contributions from the three corners\n let n1 = 0;\n let n2 = 0;\n // Skew the input space to determine which simplex cell we're in\n const s = (x + y) * F2; // Hairy factor for 2D\n const i = fastFloor(x + s);\n const j = fastFloor(y + s);\n const t = (i + j) * G2;\n const X0 = i - t; // Unskew the cell origin back to (x,y) space\n const Y0 = j - t;\n const x0 = x - X0; // The x,y distances from the cell origin\n const y0 = y - Y0;\n // For the 2D case, the simplex shape is an equilateral triangle.\n // Determine which simplex we are in.\n let i1, j1; // Offsets for second (middle) corner of simplex in (i,j) coords\n if (x0 > y0) {\n i1 = 1;\n j1 = 0;\n } // lower triangle, XY order: (0,0)->(1,0)->(1,1)\n else {\n i1 = 0;\n j1 = 1;\n } // upper triangle, YX order: (0,0)->(0,1)->(1,1)\n // A step of (1,0) in (i,j) means a step of (1-c,-c) in (x,y), and\n // a step of (0,1) in (i,j) means a step of (-c,1-c) in (x,y), where\n // c = (3-sqrt(3))/6\n const x1 = x0 - i1 + G2; // Offsets for middle corner in (x,y) unskewed coords\n const y1 = y0 - j1 + G2;\n const x2 = x0 - 1.0 + 2.0 * G2; // Offsets for last corner in (x,y) unskewed coords\n const y2 = y0 - 1.0 + 2.0 * G2;\n // Work out the hashed gradient indices of the three simplex corners\n const ii = i & 255;\n const jj = j & 255;\n // Calculate the contribution from the three corners\n let t0 = 0.5 - x0 * x0 - y0 * y0;\n if (t0 >= 0) {\n const gi0 = ii + perm[jj];\n const g0x = permGrad2x[gi0];\n const g0y = permGrad2y[gi0];\n t0 *= t0;\n // n0 = t0 * t0 * (grad2[gi0] * x0 + grad2[gi0 + 1] * y0); // (x,y) of grad3 used for 2D gradient\n n0 = t0 * t0 * (g0x * x0 + g0y * y0);\n }\n let t1 = 0.5 - x1 * x1 - y1 * y1;\n if (t1 >= 0) {\n const gi1 = ii + i1 + perm[jj + j1];\n const g1x = permGrad2x[gi1];\n const g1y = permGrad2y[gi1];\n t1 *= t1;\n // n1 = t1 * t1 * (grad2[gi1] * x1 + grad2[gi1 + 1] * y1);\n n1 = t1 * t1 * (g1x * x1 + g1y * y1);\n }\n let t2 = 0.5 - x2 * x2 - y2 * y2;\n if (t2 >= 0) {\n const gi2 = ii + 1 + perm[jj + 1];\n const g2x = permGrad2x[gi2];\n const g2y = permGrad2y[gi2];\n t2 *= t2;\n // n2 = t2 * t2 * (grad2[gi2] * x2 + grad2[gi2 + 1] * y2);\n n2 = t2 * t2 * (g2x * x2 + g2y * y2);\n }\n // Add contributions from each corner to get the final noise value.\n // The result is scaled to return values in the interval [-1,1].\n return 70.0 * (n0 + n1 + n2);\n };\n}\n\n/**\n * Samples the noise field in three dimensions\n * \n * Coordinates should be finite, bigger than -2^31 and smaller than 2^31.\n * @param x\n * @param y\n * @param z\n * @returns a number in the interval [-1, 1]\n */\nexport type NoiseFunction3D = (x: number, y: number, z: number) => number;\n\n/**\n * Creates a 3D noise function\n * @param random the random function that will be used to build the permutation table\n * @returns {NoiseFunction3D}\n */\nexport function createNoise3D(random: RandomFn = Math.random): NoiseFunction3D {\n const perm = buildPermutationTable(random);\n // precalculating these seems to yield a speedup of over 15%\n const permGrad3x = new Float64Array(perm).map(v => grad3[(v % 12) * 3]);\n const permGrad3y = new Float64Array(perm).map(v => grad3[(v % 12) * 3 + 1]);\n const permGrad3z = new Float64Array(perm).map(v => grad3[(v % 12) * 3 + 2]);\n return function noise3D(x: number, y: number, z: number): number {\n let n0, n1, n2, n3; // Noise contributions from the four corners\n // Skew the input space to determine which simplex cell we're in\n const s = (x + y + z) * F3; // Very nice and simple skew factor for 3D\n const i = fastFloor(x + s);\n const j = fastFloor(y + s);\n const k = fastFloor(z + s);\n const t = (i + j + k) * G3;\n const X0 = i - t; // Unskew the cell origin back to (x,y,z) space\n const Y0 = j - t;\n const Z0 = k - t;\n const x0 = x - X0; // The x,y,z distances from the cell origin\n const y0 = y - Y0;\n const z0 = z - Z0;\n // For the 3D case, the simplex shape is a slightly irregular tetrahedron.\n // Determine which simplex we are in.\n let i1, j1, k1; // Offsets for second corner of simplex in (i,j,k) coords\n let i2, j2, k2; // Offsets for third corner of simplex in (i,j,k) coords\n if (x0 >= y0) {\n if (y0 >= z0) {\n i1 = 1;\n j1 = 0;\n k1 = 0;\n i2 = 1;\n j2 = 1;\n k2 = 0;\n } // X Y Z order\n else if (x0 >= z0) {\n i1 = 1;\n j1 = 0;\n k1 = 0;\n i2 = 1;\n j2 = 0;\n k2 = 1;\n } // X Z Y order\n else {\n i1 = 0;\n j1 = 0;\n k1 = 1;\n i2 = 1;\n j2 = 0;\n k2 = 1;\n } // Z X Y order\n }\n else { // x0 number;\n\n/**\n * Creates a 4D noise function\n * @param random the random function that will be used to build the permutation table\n * @returns {NoiseFunction4D}\n */\nexport function createNoise4D(random: RandomFn = Math.random): NoiseFunction4D {\n const perm = buildPermutationTable(random);\n // precalculating these leads to a ~10% speedup\n const permGrad4x = new Float64Array(perm).map(v => grad4[(v % 32) * 4]);\n const permGrad4y = new Float64Array(perm).map(v => grad4[(v % 32) * 4 + 1]);\n const permGrad4z = new Float64Array(perm).map(v => grad4[(v % 32) * 4 + 2]);\n const permGrad4w = new Float64Array(perm).map(v => grad4[(v % 32) * 4 + 3]);\n return function noise4D(x: number, y: number, z: number, w: number): number {\n let n0, n1, n2, n3, n4; // Noise contributions from the five corners\n // Skew the (x,y,z,w) space to determine which cell of 24 simplices we're in\n const s = (x + y + z + w) * F4; // Factor for 4D skewing\n const i = fastFloor(x + s);\n const j = fastFloor(y + s);\n const k = fastFloor(z + s);\n const l = fastFloor(w + s);\n const t = (i + j + k + l) * G4; // Factor for 4D unskewing\n const X0 = i - t; // Unskew the cell origin back to (x,y,z,w) space\n const Y0 = j - t;\n const Z0 = k - t;\n const W0 = l - t;\n const x0 = x - X0; // The x,y,z,w distances from the cell origin\n const y0 = y - Y0;\n const z0 = z - Z0;\n const w0 = w - W0;\n // For the 4D case, the simplex is a 4D shape I won't even try to describe.\n // To find out which of the 24 possible simplices we're in, we need to\n // determine the magnitude ordering of x0, y0, z0 and w0.\n // Six pair-wise comparisons are performed between each possible pair\n // of the four coordinates, and the results are used to rank the numbers.\n let rankx = 0;\n let ranky = 0;\n let rankz = 0;\n let rankw = 0;\n if (x0 > y0) rankx++;\n else ranky++;\n if (x0 > z0) rankx++;\n else rankz++;\n if (x0 > w0) rankx++;\n else rankw++;\n if (y0 > z0) ranky++;\n else rankz++;\n if (y0 > w0) ranky++;\n else rankw++;\n if (z0 > w0) rankz++;\n else rankw++;\n // simplex[c] is a 4-vector with the numbers 0, 1, 2 and 3 in some order.\n // Many values of c will never occur, since e.g. x>y>z>w makes x= 3 ? 1 : 0;\n const j1 = ranky >= 3 ? 1 : 0;\n const k1 = rankz >= 3 ? 1 : 0;\n const l1 = rankw >= 3 ? 1 : 0;\n // The integer offsets for the third simplex corner\n const i2 = rankx >= 2 ? 1 : 0;\n const j2 = ranky >= 2 ? 1 : 0;\n const k2 = rankz >= 2 ? 1 : 0;\n const l2 = rankw >= 2 ? 1 : 0;\n\n // The integer offsets for the fourth simplex corner\n const i3 = rankx >= 1 ? 1 : 0;\n const j3 = ranky >= 1 ? 1 : 0;\n const k3 = rankz >= 1 ? 1 : 0;\n const l3 = rankw >= 1 ? 1 : 0;\n // The fifth corner has all coordinate offsets = 1, so no need to compute that.\n const x1 = x0 - i1 + G4; // Offsets for second corner in (x,y,z,w) coords\n const y1 = y0 - j1 + G4;\n const z1 = z0 - k1 + G4;\n const w1 = w0 - l1 + G4;\n const x2 = x0 - i2 + 2.0 * G4; // Offsets for third corner in (x,y,z,w) coords\n const y2 = y0 - j2 + 2.0 * G4;\n const z2 = z0 - k2 + 2.0 * G4;\n const w2 = w0 - l2 + 2.0 * G4;\n const x3 = x0 - i3 + 3.0 * G4; // Offsets for fourth corner in (x,y,z,w) coords\n const y3 = y0 - j3 + 3.0 * G4;\n const z3 = z0 - k3 + 3.0 * G4;\n const w3 = w0 - l3 + 3.0 * G4;\n const x4 = x0 - 1.0 + 4.0 * G4; // Offsets for last corner in (x,y,z,w) coords\n const y4 = y0 - 1.0 + 4.0 * G4;\n const z4 = z0 - 1.0 + 4.0 * G4;\n const w4 = w0 - 1.0 + 4.0 * G4;\n // Work out the hashed gradient indices of the five simplex corners\n const ii = i & 255;\n const jj = j & 255;\n const kk = k & 255;\n const ll = l & 255;\n // Calculate the contribution from the five corners\n let t0 = 0.6 - x0 * x0 - y0 * y0 - z0 * z0 - w0 * w0;\n if (t0 < 0) n0 = 0.0;\n else {\n const gi0 = ii + perm[jj + perm[kk + perm[ll]]];\n t0 *= t0;\n n0 = t0 * t0 * (permGrad4x[gi0] * x0 + permGrad4y[gi0] * y0 + permGrad4z[gi0] * z0 + permGrad4w[gi0] * w0);\n }\n let t1 = 0.6 - x1 * x1 - y1 * y1 - z1 * z1 - w1 * w1;\n if (t1 < 0) n1 = 0.0;\n else {\n const gi1 = ii + i1 + perm[jj + j1 + perm[kk + k1 + perm[ll + l1]]];\n t1 *= t1;\n n1 = t1 * t1 * (permGrad4x[gi1] * x1 + permGrad4y[gi1] * y1 + permGrad4z[gi1] * z1 + permGrad4w[gi1] * w1);\n }\n let t2 = 0.6 - x2 * x2 - y2 * y2 - z2 * z2 - w2 * w2;\n if (t2 < 0) n2 = 0.0;\n else {\n const gi2 = ii + i2 + perm[jj + j2 + perm[kk + k2 + perm[ll + l2]]];\n t2 *= t2;\n n2 = t2 * t2 * (permGrad4x[gi2] * x2 + permGrad4y[gi2] * y2 + permGrad4z[gi2] * z2 + permGrad4w[gi2] * w2);\n }\n let t3 = 0.6 - x3 * x3 - y3 * y3 - z3 * z3 - w3 * w3;\n if (t3 < 0) n3 = 0.0;\n else {\n const gi3 = ii + i3 + perm[jj + j3 + perm[kk + k3 + perm[ll + l3]]];\n t3 *= t3;\n n3 = t3 * t3 * (permGrad4x[gi3] * x3 + permGrad4y[gi3] * y3 + permGrad4z[gi3] * z3 + permGrad4w[gi3] * w3);\n }\n let t4 = 0.6 - x4 * x4 - y4 * y4 - z4 * z4 - w4 * w4;\n if (t4 < 0) n4 = 0.0;\n else {\n const gi4 = ii + 1 + perm[jj + 1 + perm[kk + 1 + perm[ll + 1]]];\n t4 *= t4;\n n4 = t4 * t4 * (permGrad4x[gi4] * x4 + permGrad4y[gi4] * y4 + permGrad4z[gi4] * z4 + permGrad4w[gi4] * w4);\n }\n // Sum up and scale the result to cover the range [-1,1]\n return 27.0 * (n0 + n1 + n2 + n3 + n4);\n };\n}\n\n/**\n * Builds a random permutation table.\n * This is exported only for (internal) testing purposes.\n * Do not rely on this export.\n * @private\n */\nexport function buildPermutationTable(random: RandomFn): Uint8Array {\n const tableSize = 512;\n const p = new Uint8Array(tableSize);\n for (let i = 0; i < tableSize / 2; i++) {\n p[i] = i;\n }\n for (let i = 0; i < tableSize / 2 - 1; i++) {\n const r = i + ~~(random() * (256 - i));\n const aux = p[i];\n p[i] = p[r];\n p[r] = aux;\n }\n for (let i = 256; i < tableSize; i++) {\n p[i] = p[i - 256];\n }\n return p;\n}","import { createNoise2D } from 'simplex-noise';\n\nconst { spline } = require('@georgedoescode/spline');\n\nconst PI = Math.PI;\nconst noise = createNoise2D(() => 1);\n\nexport function cloud(x: any, y: any, width: number, height: number, scale: number) {\n const n = Math.ceil((((width + height) / 2) * PI) / scale) * 2;\n\n const points: [number, number][] = new Array(Math.max(n, 0)).fill(0).map((_, i) => {\n const offset = {\n t: (1 / n / 2) * (i % 3 ? 0.6 : i % 5 ? 0.1 : 1),\n d: (1 / n / 2) * (i % 3 ? 0.6 : i % 5 ? 0.1 : 1),\n };\n\n const delta = {\n x: -24,\n y: -24,\n };\n\n const t = (i / n) + offset.t;\n\n return [\n x + Math.sin(t * 2 * PI) * (((width + delta.x) / 2) - (i % 2 ? delta.x : 0)) as number,\n y + Math.cos(t * 2 * PI) * (((height + delta.y) / 2) - (i % 2 ? delta.y : 0)) as number,\n ];\n });\n\n if (points.length > 0) {\n points.push({ ...points[0] });\n\n const d = points.map((point, i) => {\n if (i === 0) {\n return { c: 'M', x: point[0], y: point[1] };\n }\n\n if (i % 2 !== 0) {\n return { c: '' };\n }\n\n const prev = points[i - 1];\n\n const x1 = (prev[0]);\n const y1 = (prev[1]);\n\n return { c: 'C', x1, y1, x2: point[0], y2: point[1], x: point[0], y: point[1] };\n }).filter((point) => point.c);\n\n return {\n points,\n path: [\n ...d,\n { c: 'Z' },\n ],\n };\n }\n\n return {\n points,\n path: [],\n };\n}\n\nexport function blob({ x, y, width, height, scale, random }: { x: any, y: any, width: number, height: number, scale: number, random: number }) {\n const n = Math.max(Math.ceil((PI * (width + height)) / scale), 4);\n\n const points = new Array(Math.max(n, 0)).fill(0).map((_, i) => {\n const t = i / n;\n\n const diff = noise(i, random * 100);\n\n const w = 0.4;\n const h = 0.4;\n\n return [\n x + Math.sin(t * 2 * PI) * ((width / 2) * ((1 - w) + w * diff)) as number,\n y + Math.cos(t * 2 * PI) * ((height / 2) * ((1 - h) + h * diff)) as number,\n ] as [number, number];\n });\n\n if (points.length > 0) {\n return {\n points,\n path: spline(points.map((point) => ({ x: point[0], y: point[1] })), 1, true).split('C').slice(0, -1).join('C'),\n };\n }\n\n return {\n points,\n path: '',\n };\n}\n","var _path;\n\nvar _excluded = [\"title\", \"titleId\"];\n\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport * as React from \"react\";\n\nfunction SvgIcon(_ref, svgRef) {\n var title = _ref.title,\n titleId = _ref.titleId,\n props = _objectWithoutProperties(_ref, _excluded);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 28,\n height: 28,\n viewBox: \"0 0 28 28\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M10.2166 8.71628C7.51628 10.5535 6.25922 13.3405 7.45028 16.0898C9.20118 20.1312 17.9413 22.4652 20.4181 19.973C22.2639 18.1156 19.1648 16.3623 18.7543 13.9609C18.3778 11.7582 19.9288 9.87644 18.3125 8.24582C16.2431 6.15803 12.803 6.95652 10.2166 8.71628Z\",\n stroke: \"#050022\",\n strokeWidth: 1.5,\n strokeLinejoin: \"round\"\n })));\n}\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(SvgIcon);\nexport default __webpack_public_path__ + \"static/media/icon.75cbc4b735f02bc61320d742406c46c5.svg\";\nexport { ForwardRef as ReactComponent };","import React, { memo } from 'react';\nimport { IBlock, IConfig } from 'blocks';\nimport { blob } from 'utils/svg-shapes';\n\nimport { Model } from 'blocks/factories/shape/Model';\nimport { createRender } from 'blocks/factories/simple/Render';\nimport { createPadding } from 'blocks/factories/simple/Padding';\nimport { createBlock, block } from 'blocks/factories/shape/Block';\n\nimport icon from './assets/icon.svg';\n\ntype IModel = Model<{\n random: number;\n}>;\n\nexport const config: IConfig = {\n title: 'Blob',\n search: 'basic shape blob',\n type: 'basic-shape-blob',\n group: ['Basic', 'Basic Shape'],\n memo: {\n key: 'basic-shape',\n styles: block.element.memo,\n },\n styles: block.element.styles,\n};\n\nconst Render = createRender({\n render: ({ width, height, properties, element }) => {\n const border = 2;\n const offset = border / 2;\n\n const x = Math.max(width - border, 0);\n const y = Math.max(height - border, 0);\n\n const points = [\n [x / 2 + offset, y / 2 + offset],\n [x, y],\n ];\n\n const shape = blob({\n x: points[0][0],\n y: points[0][1],\n width: points[1][0],\n height: points[1][1],\n random: properties.random,\n scale: 200,\n });\n\n return (\n \n \n );\n },\n});\n\nconst Padding = createPadding({\n size: [0, 0],\n padding: [1, 1, 1, 1],\n creator: () => {\n return [2, 2, 2, 2];\n },\n});\n\nconst Block = createBlock({\n memo: {\n key: config.memo.key,\n properties: config.memo.styles,\n },\n Render,\n Padding,\n});\n\nexport const BasicShapeBlob : IBlock = {\n type: config.type,\n block: memo(Block),\n element: {\n group: config.group,\n search: config.search,\n styles: config.styles,\n options: block.element.options,\n constraints: block.element.constraints,\n onCreate: block.creator(config, {\n width: 84,\n height: 64,\n random: Math.random(),\n }),\n onCopy: block.copier(config),\n title: config.title,\n size: [84, 64],\n icon,\n class: block.element.class,\n },\n button: block.button(config),\n tools: ['shape-basic', 'random', ...block.tools],\n toolbars: block.toolbars,\n};\n","var _path;\n\nvar _excluded = [\"title\", \"titleId\"];\n\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport * as React from \"react\";\n\nfunction SvgIcon(_ref, svgRef) {\n var title = _ref.title,\n titleId = _ref.titleId,\n props = _objectWithoutProperties(_ref, _excluded);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 28,\n height: 28,\n viewBox: \"0 0 28 28\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M7 17.0385V10.5C7 9.11929 8.11929 8 9.5 8H18.5C19.8807 8 21 9.11929 21 10.5V17.0385C21 18.4192 19.8807 19.5385 18.5 19.5385H14.2055C14.0738 19.5385 13.9475 19.5904 13.8539 19.683L11.3516 22.1578C11.0358 22.4701 10.5 22.2464 10.5 21.8023V20.0385C10.5 19.7623 10.2761 19.5385 10 19.5385H9.5C8.11929 19.5385 7 18.4192 7 17.0385Z\",\n stroke: \"#050022\",\n strokeWidth: 1.5,\n strokeLinejoin: \"round\"\n })));\n}\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(SvgIcon);\nexport default __webpack_public_path__ + \"static/media/icon.dce9fc2ed2b83d260e1bbf21da295768.svg\";\nexport { ForwardRef as ReactComponent };","import React, { memo } from 'react';\nimport { IBlock, IConfig } from 'blocks';\n\nimport { Model } from 'blocks/factories/shape/Model';\nimport { createRender } from 'blocks/factories/simple/Render';\nimport { createPadding } from 'blocks/factories/simple/Padding';\nimport { createBlock, block } from 'blocks/factories/shape/Block';\n\nimport icon from './assets/icon.svg';\n\nconst { serialize } = require('svg-path-round-corners/dist/es6/serialize');\nconst { roundCorners } = require('svg-path-round-corners/dist/es6/index');\n\ntype IModel = Model<{}>;\n\nexport const config: IConfig = {\n title: 'Bubble',\n search: 'basic shape bubble',\n type: 'basic-shape-bubble',\n group: ['Basic', 'Basic Shape'],\n memo: {\n key: 'basic-shape',\n styles: block.element.memo,\n },\n styles: block.element.styles,\n};\n\nconst Render = createRender({\n render: ({ width, height, element }) => {\n const border = 2;\n const offset = border / 2;\n\n const x = Math.max(width - offset, 0);\n const y = Math.max(height - offset, 0);\n\n const points = [\n { c: 'M', x: offset, y: y - 9 },\n { c: 'V', y: offset },\n { c: 'H', x: x },\n { c: 'V', y: y - 9 },\n { c: 'H', x: offset + 26 },\n { c: 'L', x: offset + 10, y: y },\n { c: 'C', x1: offset + 10, y1: y, x2: offset + 10, y2: y, x: offset + 10, y: y },\n { c: 'V', y: y - 9 },\n { c: 'Z' },\n ];\n\n return (\n \n \n );\n },\n});\n\nconst Padding = createPadding({\n size: [0, 0],\n padding: [1, 1, 1, 1],\n creator: () => {\n return [0, 0, 0, 9];\n },\n});\n\nconst Block = createBlock({\n size: [34, 24],\n memo: {\n key: config.memo.key,\n properties: config.memo.styles,\n },\n Render,\n Padding,\n});\n\nexport const BasicShapeBubble : IBlock = {\n type: config.type,\n block: memo(Block),\n element: {\n group: config.group,\n search: config.search,\n styles: config.styles,\n options: block.element.options,\n constraints: block.element.constraints,\n onCreate: block.creator(config, {\n width: 72,\n height: 64,\n }),\n onCopy: block.copier(config),\n title: config.title,\n size: [72, 64],\n icon,\n class: block.element.class,\n },\n button: block.button(config),\n tools: ['shape-basic', ...block.tools],\n toolbars: block.toolbars,\n};\n","var _path;\n\nvar _excluded = [\"title\", \"titleId\"];\n\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport * as React from \"react\";\n\nfunction SvgIcon(_ref, svgRef) {\n var title = _ref.title,\n titleId = _ref.titleId,\n props = _objectWithoutProperties(_ref, _excluded);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 28,\n height: 28,\n viewBox: \"0 0 28 28\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M7.81341 12.8571C7.81341 12.8571 5.66543 12.6404 5.07095 14.8473C4.47646 17.0542 7.81343 17.4286 7.81343 17.4286C7.81343 17.4286 6.43583 19.9572 8.37527 20.8571C10.3147 21.7571 11.7464 19.7143 11.7464 19.7143C11.7464 19.7143 11.7464 22 13.9939 22C16.2413 22 16.8032 19.7143 16.8032 19.7143C16.8032 19.7143 19.2597 21.4286 20.7362 19.7143C22.2128 18 20.7362 16.8571 20.7362 16.8571C20.7362 16.8571 23.5455 15.1429 22.905 13.1921C22.2646 11.2414 20.1743 11.7143 20.1743 11.7143C20.1743 11.7143 20.7362 10 19.6125 8.85714C18.4888 7.71429 16.8032 8.85714 16.8032 8.85714C16.8032 8.85714 16.8032 6 13.9939 6C11.1846 6 11.1846 8.85714 11.1846 8.85714C11.1846 8.85714 9.499 7.71429 8.04329 8.96164C6.58759 10.209 7.81341 12.8571 7.81341 12.8571Z\",\n stroke: \"#050022\",\n strokeWidth: 1.5,\n strokeLinejoin: \"round\"\n })));\n}\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(SvgIcon);\nexport default __webpack_public_path__ + \"static/media/icon.63b5a47a92c9e3c5a3c8d5506f9f4d89.svg\";\nexport { ForwardRef as ReactComponent };","import React, { memo } from 'react';\nimport { IBlock, IConfig } from 'blocks';\nimport { cloud } from 'utils/svg-shapes';\n\nimport { Model } from 'blocks/factories/shape/Model';\nimport { createRender } from 'blocks/factories/simple/Render';\nimport { createPadding } from 'blocks/factories/simple/Padding';\nimport { createBlock, block } from 'blocks/factories/shape/Block';\n\nimport icon from './assets/icon.svg';\n\nconst { serialize } = require('svg-path-round-corners/dist/es6/serialize');\n\ntype IModel = Model<{}>;\n\nexport const config: IConfig = {\n title: 'Cloud',\n search: 'basic shape cloud',\n type: 'basic-shape-cloud',\n group: ['Basic', 'Basic Shape'],\n memo: {\n key: 'basic-shape',\n styles: block.element.memo,\n },\n styles: block.element.styles,\n};\n\nconst Render = createRender({\n render: ({ width, height, element }) => {\n const border = 2;\n const offset = border / 2;\n\n const x = Math.max(width - border, 0);\n const y = Math.max(height - border, 0);\n\n const points = [\n [x / 2 + offset, y / 2 + offset],\n [x, y],\n ];\n\n return (\n \n \n );\n },\n});\n\nconst Padding = createPadding({\n size: [0, 0],\n padding: [1, 1, 1, 1],\n creator: () => {\n return [10, 10, 10, 10];\n },\n});\n\nconst Block = createBlock({\n size: [34, 34],\n memo: {\n key: config.memo.key,\n properties: config.memo.styles,\n },\n Render,\n Padding,\n});\n\nexport const BasicShapeCloud : IBlock = {\n type: config.type,\n block: memo(Block),\n element: {\n group: config.group,\n search: config.search,\n styles: config.styles,\n options: block.element.options,\n constraints: block.element.constraints,\n onCreate: block.creator(config, {\n width: 64,\n height: 64,\n }),\n onCopy: block.copier(config),\n title: config.title,\n size: [64, 64],\n icon,\n class: block.element.class,\n },\n button: block.button(config),\n tools: ['shape-basic', ...block.tools],\n toolbars: block.toolbars,\n};\n","var _path;\n\nvar _excluded = [\"title\", \"titleId\"];\n\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport * as React from \"react\";\n\nfunction SvgIcon(_ref, svgRef) {\n var title = _ref.title,\n titleId = _ref.titleId,\n props = _objectWithoutProperties(_ref, _excluded);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 28,\n height: 28,\n viewBox: \"0 0 28 28\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M12.0833 7H15.9167C16.469 7 16.9167 7.44771 16.9167 8V10.8333C16.9167 10.9714 17.0286 11.0833 17.1667 11.0833H20C20.5523 11.0833 21 11.531 21 12.0833V15.9167C21 16.469 20.5523 16.9167 20 16.9167H17.1667C17.0286 16.9167 16.9167 17.0286 16.9167 17.1667V20C16.9167 20.5523 16.469 21 15.9167 21H12.0833C11.531 21 11.0833 20.5523 11.0833 20V17.1667C11.0833 17.0286 10.9714 16.9167 10.8333 16.9167H8C7.44772 16.9167 7 16.469 7 15.9167V12.0833C7 11.531 7.44771 11.0833 8 11.0833H10.8333C10.9714 11.0833 11.0833 10.9714 11.0833 10.8333V8C11.0833 7.44772 11.531 7 12.0833 7Z\",\n stroke: \"#050022\",\n strokeWidth: 1.5,\n strokeLinejoin: \"round\"\n })));\n}\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(SvgIcon);\nexport default __webpack_public_path__ + \"static/media/icon.4c5e1342c95e370154844c82212d8022.svg\";\nexport { ForwardRef as ReactComponent };","import React, { memo } from 'react';\nimport { IBlock, IConfig } from 'blocks';\n\nimport { Model } from 'blocks/factories/shape/Model';\nimport { createRender } from 'blocks/factories/simple/Render';\nimport { createPadding } from 'blocks/factories/simple/Padding';\nimport { createBlock, block } from 'blocks/factories/shape/Block';\n\nimport icon from './assets/icon.svg';\n\nconst { serialize } = require('svg-path-round-corners/dist/es6/serialize');\nconst { roundCorners } = require('svg-path-round-corners/dist/es6/index');\n\ntype IModel = Model<{}>;\n\nexport const config: IConfig = {\n title: 'Cross',\n search: 'basic shape cross',\n type: 'basic-shape-cross',\n group: ['Basic', 'Basic Shape'],\n memo: {\n key: 'basic-shape',\n styles: block.element.memo,\n },\n styles: block.element.styles,\n};\n\nconst Render = createRender({\n render: ({ width, height, element }) => {\n const border = 2;\n const offset = border / 2;\n\n const x = Math.max(width - offset, 0);\n const y = Math.max(height - offset, 0);\n const a = Math.min(Math.max(Math.min(x, y) / 4, 8), 24);\n\n const points = [\n { c: 'M', x: offset + a, y: offset },\n { c: 'L', x: x - a, y: offset },\n { c: 'L', x: x - a, y: offset + 12 },\n { c: 'C', x1: x - a, y1: offset + 12, x2: x - a, y2: offset + a, x: x - a, y: offset + a },\n { c: 'L', x: x, y: offset + a },\n { c: 'L', x: x, y: y - a },\n { c: 'L', x: x - 12, y: y - a },\n { c: 'C', x1: x - 12, y1: y - a, x2: x - a, y2: y - a, x: x - a, y: y - a },\n { c: 'L', x: x - a, y: y },\n { c: 'L', x: offset + a, y: y },\n { c: 'L', x: offset + a, y: y - 12 },\n { c: 'C', x1: offset + a, y1: y - 12, x2: offset + a, y2: y - a, x: offset + a, y: y - a },\n { c: 'L', x: offset, y: y - a },\n { c: 'L', x: offset, y: offset + a },\n { c: 'L', x: offset + 12, y: offset + a },\n { c: 'C', x1: offset + 12, y1: offset + a, x2: offset + a, y2: offset + a, x: offset + a, y: offset + a },\n { c: 'Z' },\n ];\n\n return (\n \n \n );\n },\n});\n\nconst Padding = createPadding({\n size: [0, 0],\n padding: [1, 1, 1, 1],\n creator: () => {\n return [10, 10, 10, 10];\n },\n});\n\nconst Block = createBlock({\n size: [28, 28],\n memo: {\n key: config.memo.key,\n properties: config.memo.styles,\n },\n Render,\n Padding,\n});\n\nexport const BasicShapeCross : IBlock = {\n type: config.type,\n block: memo(Block),\n element: {\n group: config.group,\n search: config.search,\n styles: config.styles,\n options: block.element.options,\n constraints: block.element.constraints,\n onCreate: block.creator(config, {\n width: 64,\n height: 64,\n }),\n onCopy: block.copier(config),\n title: config.title,\n size: [64, 64],\n icon,\n class: block.element.class,\n },\n button: block.button(config),\n tools: ['shape-basic', ...block.tools],\n toolbars: block.toolbars,\n};\n","var _path;\n\nvar _excluded = [\"title\", \"titleId\"];\n\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport * as React from \"react\";\n\nfunction SvgIcon(_ref, svgRef) {\n var title = _ref.title,\n titleId = _ref.titleId,\n props = _objectWithoutProperties(_ref, _excluded);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 28,\n height: 28,\n viewBox: \"0 0 28 28\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M14 7C17.866 7 21 10.134 21 14C21 17.866 17.866 21 14 21C10.134 21 7 17.866 7 14C7 10.134 10.134 7 14 7Z\",\n stroke: \"#050022\",\n strokeWidth: 1.5,\n strokeLinejoin: \"round\"\n })));\n}\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(SvgIcon);\nexport default __webpack_public_path__ + \"static/media/icon.931e0354db6cf45d8c2801cbf7986c04.svg\";\nexport { ForwardRef as ReactComponent };","import React, { memo } from 'react';\nimport { IBlock, IConfig } from 'blocks';\n\nimport { Model } from 'blocks/factories/shape/Model';\nimport { createRender } from 'blocks/factories/simple/Render';\nimport { createPadding } from 'blocks/factories/simple/Padding';\nimport { createBlock, block } from 'blocks/factories/shape/Block';\n\nimport icon from './assets/icon.svg';\n\ntype IModel = Model<{}>;\n\nexport const config: IConfig = {\n title: 'Elipse',\n search: 'basic shape ellipse',\n type: 'basic-shape-ellipse',\n group: ['Basic', 'Basic Shape'],\n memo: {\n key: 'basic-shape',\n styles: block.element.memo,\n },\n styles: block.element.styles,\n};\n\nconst Render = createRender({\n render: ({ width, height, element, properties }) => {\n const border = 2;\n const offset = border / 2;\n\n const x = Math.max(width - border, 0);\n const y = Math.max(height - border, 0);\n\n const points = [\n [x / 2 + offset, y / 2 + offset],\n [x / 2, y / 2],\n ];\n\n return (\n \n \n );\n },\n});\n\nconst Padding = createPadding({\n size: [0, 0],\n padding: [1, 1, 1, 1],\n creator: () => {\n return [10, 10, 10, 10];\n },\n});\n\nconst Block = createBlock({\n memo: {\n key: config.memo.key,\n properties: config.memo.styles,\n },\n Render,\n Padding,\n});\n\nexport const BasicShapeEllipse : IBlock = {\n type: config.type,\n block: memo(Block),\n element: {\n group: config.group,\n search: config.search,\n styles: config.styles,\n options: block.element.options,\n constraints: block.element.constraints,\n onCreate: block.creator(config, {\n width: 64,\n height: 64,\n }),\n onCopy: block.copier(config),\n title: config.title,\n size: [64, 64],\n icon,\n class: block.element.class,\n },\n button: block.button(config),\n tools: ['shape-basic', ...block.tools],\n toolbars: block.toolbars,\n};\n","var _path;\n\nvar _excluded = [\"title\", \"titleId\"];\n\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport * as React from \"react\";\n\nfunction SvgIcon(_ref, svgRef) {\n var title = _ref.title,\n titleId = _ref.titleId,\n props = _objectWithoutProperties(_ref, _excluded);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 28,\n height: 28,\n viewBox: \"0 0 28 28\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M21.7113 13.5C21.89 13.8094 21.89 14.1906 21.7113 14.5L18.2887 20.4282C18.1101 20.7376 17.7799 20.9282 17.4227 20.9282H10.5774C10.2201 20.9282 9.88998 20.7376 9.71135 20.4282L6.2887 14.5C6.11007 14.1906 6.11007 13.8094 6.2887 13.5L9.71135 7.57178C9.88998 7.26238 10.2201 7.07178 10.5774 7.07178L17.4227 7.07178C17.7799 7.07178 18.1101 7.26238 18.2887 7.57178L21.7113 13.5Z\",\n stroke: \"#050022\",\n strokeWidth: 1.5,\n strokeLinejoin: \"round\"\n })));\n}\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(SvgIcon);\nexport default __webpack_public_path__ + \"static/media/icon.73d7475922a15297ab6d2f9f2b03d47e.svg\";\nexport { ForwardRef as ReactComponent };","import React, { memo } from 'react';\nimport { IBlock, IConfig } from 'blocks';\n\nimport { Model } from 'blocks/factories/shape/Model';\nimport { createRender } from 'blocks/factories/simple/Render';\nimport { createPadding } from 'blocks/factories/simple/Padding';\nimport { createBlock, block } from 'blocks/factories/shape/Block';\n\nimport icon from './assets/icon.svg';\n\nconst { serialize } = require('svg-path-round-corners/dist/es6/serialize');\nconst { roundCorners } = require('svg-path-round-corners/dist/es6/index');\n\ntype IModel = Model<{}>;\n\nexport const config: IConfig = {\n title: 'Hexagon',\n search: 'basic shape hexagon',\n type: 'basic-shape-hexagon',\n group: ['Basic', 'Basic Shape'],\n memo: {\n key: 'basic-shape',\n styles: block.element.memo,\n },\n styles: block.element.styles,\n};\n\nconst Render = createRender({\n render: ({ width, height, element }) => {\n const border = 2;\n const offset = border / 2;\n\n const x = Math.max(width - offset, 0);\n const y = Math.max(height - offset, 0);\n\n const points = [\n { c: 'M', x: (64 / 64) * x, y: (32 / 64) * y },\n { c: 'L', x: (48 / 64) * x, y: (64 / 64) * y },\n { c: 'H', x: offset + (16 / 64) * x },\n { c: 'L', x: offset + (0 / 64) * x, y: (32 / 64) * y },\n { c: 'L', x: offset + (16 / 64) * x, y: offset + (0 / 64) * y },\n { c: 'H', x: (48 / 64) * x },\n { c: 'Z' },\n ];\n\n return (\n \n \n );\n },\n});\n\nconst Padding = createPadding({\n size: [0, 0],\n padding: [1, 1, 1, 1],\n creator: () => {\n return [10, 10, 10, 10];\n },\n});\n\nconst Block = createBlock({\n memo: {\n key: config.memo.key,\n properties: config.memo.styles,\n },\n Render,\n Padding,\n});\n\nexport const BasicShapeHexagon : IBlock = {\n type: config.type,\n block: memo(Block),\n element: {\n group: config.group,\n search: config.search,\n styles: config.styles,\n options: block.element.options,\n constraints: block.element.constraints,\n onCreate: block.creator(config, {\n width: 72,\n height: 64,\n }),\n onCopy: block.copier(config),\n title: config.title,\n size: [72, 64],\n icon,\n class: block.element.class,\n },\n button: block.button(config),\n tools: ['shape-basic', ...block.tools],\n toolbars: block.toolbars,\n};\n","var _path;\n\nvar _excluded = [\"title\", \"titleId\"];\n\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport * as React from \"react\";\n\nfunction SvgIcon(_ref, svgRef) {\n var title = _ref.title,\n titleId = _ref.titleId,\n props = _objectWithoutProperties(_ref, _excluded);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 28,\n height: 28,\n viewBox: \"0 0 28 28\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M10.9156 7.18493C11.034 7.06652 11.1946 7 11.362 7L16.638 7C16.8054 7 16.966 7.06652 17.0844 7.18493L20.8151 10.9156C20.9335 11.034 21 11.1946 21 11.362V16.638C21 16.8054 20.9335 16.966 20.8151 17.0844L17.0844 20.8151C16.966 20.9335 16.8054 21 16.638 21H11.362C11.1946 21 11.034 20.9335 10.9156 20.8151L7.18493 17.0844C7.06652 16.966 7 16.8054 7 16.638L7 11.362C7 11.1946 7.06652 11.034 7.18493 10.9156L10.9156 7.18493Z\",\n stroke: \"#050022\",\n strokeWidth: 1.5,\n strokeLinejoin: \"round\"\n })));\n}\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(SvgIcon);\nexport default __webpack_public_path__ + \"static/media/icon.9c21e83a9fdb31f0ba37cbddef04c619.svg\";\nexport { ForwardRef as ReactComponent };","import React, { memo } from 'react';\nimport { IBlock, IConfig } from 'blocks';\n\nimport { Model } from 'blocks/factories/shape/Model';\nimport { createRender } from 'blocks/factories/simple/Render';\nimport { createPadding } from 'blocks/factories/simple/Padding';\nimport { createBlock, block } from 'blocks/factories/shape/Block';\n\nimport icon from './assets/icon.svg';\n\nconst { serialize } = require('svg-path-round-corners/dist/es6/serialize');\nconst { roundCorners } = require('svg-path-round-corners/dist/es6/index');\n\ntype IModel = Model<{}>;\n\nexport const config: IConfig = {\n title: 'Octagon',\n search: 'basic shape octagon',\n type: 'basic-shape-octagon',\n group: ['Basic', 'Basic Shape'],\n memo: {\n key: 'basic-shape',\n styles: block.element.memo,\n },\n styles: block.element.styles,\n};\n\nconst Render = createRender({\n render: ({ width, height, element }) => {\n const border = 2;\n const offset = border / 2;\n\n const x = Math.max(width - offset, 0);\n const y = Math.max(height - offset, 0);\n\n const points = [\n { c: 'M', x: offset + (19 / 64) * x, y: offset + (0 / 64) * y },\n { c: 'H', x: (45 / 64) * x },\n { c: 'L', x: (64 / 64) * x, y: offset + (19 / 64) * y },\n { c: 'V', y: (45 / 64) * y },\n { c: 'L', x: (45 / 64) * x, y: (64 / 64) * y },\n { c: 'H', x: offset + (19 / 64) * x },\n { c: 'L', x: offset + (0 / 64) * x, y: (45 / 64) * y },\n { c: 'V', y: offset + (19 / 64) * y },\n { c: 'Z' },\n ];\n\n return (\n \n \n );\n },\n});\n\nconst Padding = createPadding({\n size: [0, 0],\n padding: [1, 1, 1, 1],\n creator: () => {\n return [10, 10, 10, 10];\n },\n});\n\nconst Block = createBlock({\n memo: {\n key: config.memo.key,\n properties: config.memo.styles,\n },\n Render,\n Padding,\n});\n\nexport const BasicShapeOctagon : IBlock = {\n type: config.type,\n block: memo(Block),\n element: {\n group: config.group,\n search: config.search,\n styles: config.styles,\n options: block.element.options,\n constraints: block.element.constraints,\n onCreate: block.creator(config, {\n width: 64,\n height: 64,\n }),\n onCopy: block.copier(config),\n title: config.title,\n size: [64, 64],\n icon,\n class: block.element.class,\n },\n button: block.button(config),\n tools: ['shape-basic', ...block.tools],\n toolbars: block.toolbars,\n};\n","var _path;\n\nvar _excluded = [\"title\", \"titleId\"];\n\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport * as React from \"react\";\n\nfunction SvgIcon(_ref, svgRef) {\n var title = _ref.title,\n titleId = _ref.titleId,\n props = _objectWithoutProperties(_ref, _excluded);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 28,\n height: 28,\n viewBox: \"0 0 28 28\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M5.41979 19.694L9.27693 7.69399C9.40986 7.28044 9.79457 7 10.229 7H21.6282C22.3062 7 22.7877 7.6605 22.5802 8.30601L18.7231 20.306C18.5901 20.7196 18.2054 21 17.771 21H6.37182C5.69378 21 5.21231 20.3395 5.41979 19.694Z\",\n stroke: \"#050022\",\n strokeWidth: 1.5,\n strokeLinejoin: \"round\"\n })));\n}\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(SvgIcon);\nexport default __webpack_public_path__ + \"static/media/icon.044f964a67568d5b49da75cbf2a16a4c.svg\";\nexport { ForwardRef as ReactComponent };","import React, { memo } from 'react';\nimport { IBlock, IConfig } from 'blocks';\n\nimport { Model } from 'blocks/factories/shape/Model';\nimport { createRender } from 'blocks/factories/simple/Render';\nimport { createPadding } from 'blocks/factories/simple/Padding';\nimport { createBlock, block } from 'blocks/factories/shape/Block';\n\nimport icon from './assets/icon.svg';\n\nconst { serialize } = require('svg-path-round-corners/dist/es6/serialize');\nconst { roundCorners } = require('svg-path-round-corners/dist/es6/index');\n\ntype IModel = Model<{}>;\n\nexport const config: IConfig = {\n title: 'Parallelogram',\n search: 'basic shape parallelogram',\n type: 'basic-shape-parallelogram',\n group: ['Basic', 'Basic Shape'],\n memo: {\n key: 'basic-shape',\n styles: block.element.memo,\n },\n styles: block.element.styles,\n};\n\nconst Render = createRender({\n render: ({ width, height, element }) => {\n const border = 2;\n const offset = border / 2;\n\n const x = Math.max(width - offset, 0);\n const y = Math.max(height - offset, 0);\n\n let a = (16 / 64) * y;\n\n if ((x - 40) / y <= 16 / 64) {\n a = x - 40;\n }\n\n const points = [\n { c: 'M', x: offset, y: y },\n { c: 'L', x: offset + a, y: offset },\n { c: 'H', x: x },\n { c: 'L', x: x - a, y: y },\n { c: 'Z' },\n ];\n\n return (\n \n \n );\n },\n});\n\nconst Padding = createPadding({\n size: [0, 1],\n padding: [0, 1, 0, 1],\n creator: ({ height }) => {\n const a = (16 / 64) * height - 2;\n\n return [a, 0, a, 0];\n },\n});\n\nconst Block = createBlock({\n size: [42, 22],\n memo: {\n key: config.memo.key,\n properties: config.memo.styles,\n },\n Render,\n Padding,\n});\n\nexport const BasicShapeParallelogram : IBlock = {\n type: config.type,\n block: memo(Block),\n element: {\n group: config.group,\n search: config.search,\n styles: config.styles,\n options: block.element.options,\n constraints: block.element.constraints,\n onCreate: block.creator(config, {\n width: 88,\n height: 64,\n }),\n onCopy: block.copier(config),\n title: config.title,\n size: [88, 64],\n icon,\n class: block.element.class,\n },\n button: block.button(config),\n tools: ['shape-basic', ...block.tools],\n toolbars: block.toolbars,\n};\n","var _path;\n\nvar _excluded = [\"title\", \"titleId\"];\n\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport * as React from \"react\";\n\nfunction SvgIcon(_ref, svgRef) {\n var title = _ref.title,\n titleId = _ref.titleId,\n props = _objectWithoutProperties(_ref, _excluded);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 28,\n height: 28,\n viewBox: \"0 0 28 28\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M13.4195 7.41392C13.7669 7.16623 14.2332 7.16622 14.5806 7.41392L20.8994 11.9193C21.2565 12.1739 21.406 12.6315 21.2682 13.0478L18.8623 20.3143C18.7268 20.7236 18.3442 21 17.913 21H10.0871C9.65591 21 9.27329 20.7236 9.13777 20.3143L6.7319 13.0478C6.59406 12.6315 6.74358 12.1739 7.10068 11.9193L13.4195 7.41392Z\",\n stroke: \"#050022\",\n strokeWidth: 1.5,\n strokeLinejoin: \"round\"\n })));\n}\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(SvgIcon);\nexport default __webpack_public_path__ + \"static/media/icon.5c8b094949529532df205d3a6c66796c.svg\";\nexport { ForwardRef as ReactComponent };","import React, { memo } from 'react';\nimport { IBlock, IConfig } from 'blocks';\n\nimport { Model } from 'blocks/factories/shape/Model';\nimport { createRender } from 'blocks/factories/simple/Render';\nimport { createPadding } from 'blocks/factories/simple/Padding';\nimport { createBlock, block } from 'blocks/factories/shape/Block';\n\nimport icon from './assets/icon.svg';\n\nconst { serialize } = require('svg-path-round-corners/dist/es6/serialize');\nconst { roundCorners } = require('svg-path-round-corners/dist/es6/index');\n\ntype IModel = Model<{}>;\n\nexport const config: IConfig = {\n title: 'Pentagon',\n search: 'basic shape pentagon',\n type: 'basic-shape-pentagon',\n group: ['Basic', 'Basic Shape'],\n memo: {\n key: 'basic-shape',\n styles: block.element.memo,\n },\n styles: block.element.styles,\n};\n\nconst Render = createRender({\n render: ({ width, height, element }) => {\n const border = 2;\n const offset = border / 2;\n\n const x = Math.max(width - offset, 0);\n const y = Math.max(height - offset, 0);\n\n const points = [\n { c: 'M', x: (32 / 64) * x, y: offset + (0 / 64) * y },\n { c: 'L', x: (64 / 64) * x, y: (25 / 64) * y },\n { c: 'L', x: (52 / 64) * x, y: (64 / 64) * y },\n { c: 'H', x: offset + (12 / 64) * x },\n { c: 'L', x: offset + (0 / 64) * x, y: (25 / 64) * y },\n { c: 'Z' },\n ];\n\n return (\n \n \n );\n },\n});\n\nconst Padding = createPadding({\n size: [1, 0],\n padding: [1, 0, 1, 1],\n creator: ({ width }) => {\n const a = Math.max(width * 0.1, 10);\n const b = Math.min(width * 0.05, 10);\n\n return [10, a, 10, b];\n },\n});\n\nconst Block = createBlock({\n memo: {\n key: config.memo.key,\n properties: config.memo.styles,\n },\n Render,\n Padding,\n});\n\nexport const BasicShapePentagon : IBlock = {\n type: config.type,\n block: memo(Block),\n element: {\n group: config.group,\n search: config.search,\n styles: config.styles,\n options: block.element.options,\n constraints: block.element.constraints,\n onCreate: block.creator(config, {\n width: 64,\n height: 64,\n }),\n onCopy: block.copier(config),\n title: config.title,\n size: [64, 64],\n icon,\n class: block.element.class,\n },\n button: block.button(config),\n tools: ['shape-basic', ...block.tools],\n toolbars: block.toolbars,\n};\n","var _path;\n\nvar _excluded = [\"title\", \"titleId\"];\n\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport * as React from \"react\";\n\nfunction SvgIcon(_ref, svgRef) {\n var title = _ref.title,\n titleId = _ref.titleId,\n props = _objectWithoutProperties(_ref, _excluded);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 28,\n height: 28,\n viewBox: \"0 0 28 28\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M7 20V8C7 7.44772 7.44772 7 8 7H20C20.5523 7 21 7.44772 21 8V20C21 20.5523 20.5523 21 20 21H8C7.44772 21 7 20.5523 7 20Z\",\n stroke: \"#050022\",\n strokeWidth: 1.5,\n strokeLinejoin: \"round\"\n })));\n}\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(SvgIcon);\nexport default __webpack_public_path__ + \"static/media/icon.8f9eb4abfb9ad6c55e488f4f9f9a0098.svg\";\nexport { ForwardRef as ReactComponent };","import React, { memo } from 'react';\nimport { IBlock, IConfig } from 'blocks';\n\nimport { Model } from 'blocks/factories/shape/Model';\nimport { createRender } from 'blocks/factories/simple/Render';\nimport { createPadding } from 'blocks/factories/simple/Padding';\nimport { createBlock, block } from 'blocks/factories/shape/Block';\n\nimport icon from './assets/icon.svg';\n\ntype IModel = Model<{}>;\n\nexport const config: IConfig = {\n title: 'Rectangle',\n search: 'basic shape rectangle',\n type: 'basic-shape-rectangle',\n group: ['Basic', 'Basic Shape'],\n memo: {\n key: 'basic-shape',\n styles: block.element.memo,\n },\n styles: block.element.styles,\n};\n\nconst Render = createRender({\n render: ({ width, height, element }) => {\n const border = 2;\n const offset = border / 2;\n\n const x = Math.max(width - border, 0);\n const y = Math.max(height - border, 0);\n\n const points = [\n [offset, offset],\n [x, y],\n ];\n\n return (\n \n \n );\n },\n});\n\nconst Padding = createPadding({\n size: [0, 0],\n padding: [1, 1, 1, 1],\n creator: () => {\n return [0, 0, 0, 0];\n },\n});\n\nconst Block = createBlock({\n memo: {\n key: config.memo.key,\n properties: config.memo.styles,\n },\n Render,\n Padding,\n});\n\nexport const BasicShapeRectangle : IBlock = {\n type: config.type,\n block: memo(Block),\n element: {\n group: config.group,\n search: config.search,\n styles: config.styles,\n options: block.element.options,\n constraints: block.element.constraints,\n onCreate: block.creator(config, {\n width: 64,\n height: 64,\n }),\n onCopy: block.copier(config),\n title: config.title,\n size: [64, 64],\n icon,\n class: block.element.class,\n },\n button: block.button(config),\n tools: ['shape-basic', ...block.tools],\n toolbars: block.toolbars,\n};\n","var _path;\n\nvar _excluded = [\"title\", \"titleId\"];\n\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport * as React from \"react\";\n\nfunction SvgIcon(_ref, svgRef) {\n var title = _ref.title,\n titleId = _ref.titleId,\n props = _objectWithoutProperties(_ref, _excluded);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 28,\n height: 28,\n viewBox: \"0 0 28 28\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M7 18V10C7 8.34315 8.34315 7 10 7H18C19.6569 7 21 8.34315 21 10V18C21 19.6569 19.6569 21 18 21H10C8.34315 21 7 19.6569 7 18Z\",\n stroke: \"#050022\",\n strokeWidth: 1.5,\n strokeLinejoin: \"round\"\n })));\n}\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(SvgIcon);\nexport default __webpack_public_path__ + \"static/media/icon.b92384ae9d2e75fd9b8ce7b9da7cba47.svg\";\nexport { ForwardRef as ReactComponent };","import React, { memo } from 'react';\nimport { IBlock, IConfig } from 'blocks';\n\nimport { Model } from 'blocks/factories/shape/Model';\nimport { createRender } from 'blocks/factories/simple/Render';\nimport { createPadding } from 'blocks/factories/simple/Padding';\nimport { createBlock, block } from 'blocks/factories/shape/Block';\n\nimport icon from './assets/icon.svg';\n\ntype IModel = Model<{}>;\n\nexport const config: IConfig = {\n title: 'Rectangle',\n search: 'basic shape rectangle rounded',\n type: 'basic-shape-rectangle-rounded',\n group: ['Basic', 'Basic Shape'],\n memo: {\n key: 'basic-shape',\n styles: block.element.memo,\n },\n styles: block.element.styles,\n};\n\nconst Render = createRender({\n render: ({ width, height, element }) => {\n const border = 2;\n const offset = border / 2;\n\n const x = Math.max(width - border, 0);\n const y = Math.max(height - border, 0);\n\n const points = [\n [offset, offset],\n [x, y],\n ];\n\n return (\n \n \n );\n },\n});\n\nconst Padding = createPadding({\n size: [0, 0],\n padding: [1, 1, 1, 1],\n creator: () => {\n return [0, 0, 0, 0];\n },\n});\n\nconst Block = createBlock({\n memo: {\n key: config.memo.key,\n properties: config.memo.styles,\n },\n Render,\n Padding,\n});\n\nexport const BasicShapeRectangleRounded : IBlock = {\n type: config.type,\n block: memo(Block),\n element: {\n group: config.group,\n search: config.search,\n styles: config.styles,\n options: block.element.options,\n constraints: block.element.constraints,\n onCreate: block.creator(config, {\n width: 64,\n height: 64,\n }),\n onCopy: block.copier(config),\n title: config.title,\n size: [64, 64],\n icon,\n class: block.element.class,\n },\n button: block.button(config),\n tools: ['shape-basic', ...block.tools],\n toolbars: block.toolbars,\n};\n","var _path;\n\nvar _excluded = [\"title\", \"titleId\"];\n\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport * as React from \"react\";\n\nfunction SvgIcon(_ref, svgRef) {\n var title = _ref.title,\n titleId = _ref.titleId,\n props = _objectWithoutProperties(_ref, _excluded);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 28,\n height: 28,\n viewBox: \"0 0 28 28\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M6.70711 13.2929L13.2929 6.70711C13.6834 6.31658 14.3166 6.31658 14.7071 6.70711L21.2929 13.2929C21.6834 13.6834 21.6834 14.3166 21.2929 14.7071L14.7071 21.2929C14.3166 21.6834 13.6834 21.6834 13.2929 21.2929L6.70711 14.7071C6.31658 14.3166 6.31658 13.6834 6.70711 13.2929Z\",\n stroke: \"#050022\",\n strokeWidth: 1.5,\n strokeLinejoin: \"round\"\n })));\n}\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(SvgIcon);\nexport default __webpack_public_path__ + \"static/media/icon.528ad61dcfedaf6584188354a667d517.svg\";\nexport { ForwardRef as ReactComponent };","import React, { memo } from 'react';\nimport { IBlock, IConfig } from 'blocks';\n\nimport { Model } from 'blocks/factories/shape/Model';\nimport { createRender } from 'blocks/factories/simple/Render';\nimport { createPadding } from 'blocks/factories/simple/Padding';\nimport { createBlock, block } from 'blocks/factories/shape/Block';\n\nimport icon from './assets/icon.svg';\n\nconst { serialize } = require('svg-path-round-corners/dist/es6/serialize');\nconst { roundCorners } = require('svg-path-round-corners/dist/es6/index');\n\ntype IModel = Model<{}>;\n\nexport const config: IConfig = {\n title: 'Rhombus',\n search: 'basic shape rhombus',\n type: 'basic-shape-rhombus',\n group: ['Basic', 'Basic Shape'],\n memo: {\n key: 'basic-shape',\n styles: block.element.memo,\n },\n styles: block.element.styles,\n};\n\nconst Render = createRender({\n render: ({ width, height, element }) => {\n const border = 2;\n const offset = border / 2;\n\n const x = Math.max(width - offset, 0);\n const y = Math.max(height - offset, 0);\n\n const points = [\n { c: 'M', x: x / 2, y: offset },\n { c: 'L', x: offset, y: y / 2 },\n { c: 'L', x: x / 2, y: y },\n { c: 'L', x: x, y: y / 2 },\n { c: 'Z' },\n ];\n\n return (\n \n \n );\n },\n});\n\nconst Padding = createPadding({\n size: [0, 0],\n padding: [1, 1, 1, 1],\n creator: () => {\n return [10, 10, 10, 10];\n },\n});\n\nconst Block = createBlock({\n memo: {\n key: config.memo.key,\n properties: config.memo.styles,\n },\n Render,\n Padding,\n});\n\nexport const BasicShapeRhombus : IBlock = {\n type: config.type,\n block: memo(Block),\n element: {\n group: config.group,\n search: config.search,\n styles: config.styles,\n options: block.element.options,\n constraints: block.element.constraints,\n onCreate: block.creator(config, {\n width: 64,\n height: 68,\n }),\n onCopy: block.copier(config),\n title: config.title,\n size: [64, 68],\n icon,\n class: block.element.class,\n },\n button: block.button(config),\n tools: ['shape-basic', ...block.tools],\n toolbars: block.toolbars,\n};\n","var _path;\n\nvar _excluded = [\"title\", \"titleId\"];\n\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport * as React from \"react\";\n\nfunction SvgIcon(_ref, svgRef) {\n var title = _ref.title,\n titleId = _ref.titleId,\n props = _objectWithoutProperties(_ref, _excluded);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 28,\n height: 28,\n viewBox: \"0 0 28 28\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M13.0919 5.9686C13.4493 5.19373 14.5506 5.19373 14.908 5.96861L16.5869 9.60837C16.7326 9.92417 17.0318 10.1416 17.3772 10.1826L21.3576 10.6545C22.205 10.755 22.5453 11.8024 21.9188 12.3817L18.976 15.1032C18.7207 15.3393 18.6064 15.6911 18.6741 16.0322L19.4553 19.9637C19.6216 20.8007 18.7307 21.448 17.986 21.0312L14.4884 19.0733C14.1849 18.9035 13.815 18.9035 13.5115 19.0733L10.0139 21.0312C9.2693 21.448 8.37834 20.8007 8.54464 19.9637L9.32581 16.0322C9.39359 15.6911 9.27928 15.3393 9.02394 15.1032L6.08112 12.3817C5.45462 11.8024 5.79493 10.755 6.64233 10.6545L10.6227 10.1826C10.9681 10.1416 11.2674 9.92417 11.4131 9.60837L13.0919 5.9686Z\",\n stroke: \"#050022\",\n strokeWidth: 1.5,\n strokeLinejoin: \"round\"\n })));\n}\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(SvgIcon);\nexport default __webpack_public_path__ + \"static/media/icon.b08825753db8cbeb8960ba873164e405.svg\";\nexport { ForwardRef as ReactComponent };","import React, { memo } from 'react';\nimport { IBlock, IConfig } from 'blocks';\n\nimport { Model } from 'blocks/factories/shape/Model';\nimport { createRender } from 'blocks/factories/simple/Render';\nimport { createPadding } from 'blocks/factories/simple/Padding';\nimport { createBlock, block } from 'blocks/factories/shape/Block';\n\nimport icon from './assets/icon.svg';\n\nconst { serialize } = require('svg-path-round-corners/dist/es6/serialize');\nconst { roundCorners } = require('svg-path-round-corners/dist/es6/index');\n\ntype IModel = Model<{}>;\n\nexport const config: IConfig = {\n title: 'Star',\n search: 'basic shape star',\n type: 'basic-shape-star',\n group: ['Basic', 'Basic Shape'],\n memo: {\n key: 'basic-shape',\n styles: block.element.memo,\n },\n styles: block.element.styles,\n};\n\nconst Render = createRender({\n render: ({ width, height, element }) => {\n const border = 2;\n const offset = border / 2;\n\n const x = Math.max(width - offset, 0);\n const y = Math.max(height - offset, 0);\n\n const points = [\n { c: 'M', x: (32 / 64) * x, y: (0 / 64) * y },\n { c: 'L', x: (41.493 / 64) * x, y: (21.6399 / 64) * y },\n { c: 'L', x: (64 / 64) * x, y: (24.4458 / 64) * y },\n { c: 'L', x: (47.36 / 64) * x, y: (40.6259 / 64) * y },\n { c: 'L', x: (51.7771 / 64) * x, y: (64 / 64) * y },\n { c: 'L', x: (32 / 64) * x, y: (52.3599 / 64) * y },\n { c: 'L', x: (12.2229 / 64) * x, y: (64 / 64) * y },\n { c: 'L', x: (16.64 / 64) * x, y: (40.6259 / 64) * y },\n { c: 'L', x: (0 / 64) * x, y: (24.4458 / 64) * y },\n { c: 'L', x: (22.507 / 64) * x, y: (21.6399 / 64) * y },\n { c: 'Z' },\n ];\n\n return (\n \n \n );\n },\n});\n\nconst Padding = createPadding({\n size: [1, 0],\n padding: [1, 0, 1, 1],\n creator: ({ width }) => {\n const a = Math.max(width * 0.1, 10);\n const b = Math.min(width * 0.05, 10);\n\n return [10, a, 10, b];\n },\n});\n\nconst Block = createBlock({\n size: [38, 36],\n memo: {\n key: config.memo.key,\n properties: config.memo.styles,\n },\n Render,\n Padding,\n});\n\nexport const BasicShapeStar : IBlock = {\n type: config.type,\n block: memo(Block),\n element: {\n group: config.group,\n search: config.search,\n styles: config.styles,\n options: block.element.options,\n constraints: block.element.constraints,\n onCreate: block.creator(config, {\n width: 68,\n height: 64,\n }),\n onCopy: block.copier(config),\n title: config.title,\n size: [68, 64],\n icon,\n class: block.element.class,\n },\n button: block.button(config),\n tools: ['shape-basic', ...block.tools],\n toolbars: block.toolbars,\n};\n","var _path;\n\nvar _excluded = [\"title\", \"titleId\"];\n\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport * as React from \"react\";\n\nfunction SvgIcon(_ref, svgRef) {\n var title = _ref.title,\n titleId = _ref.titleId,\n props = _objectWithoutProperties(_ref, _excluded);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 28,\n height: 28,\n viewBox: \"0 0 28 28\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M6.18958 19.8389L8.14876 7.83887C8.22773 7.35518 8.6456 7 9.13569 7H18.8643C19.3544 7 19.7723 7.35518 19.8512 7.83887L21.8104 19.8389C21.9098 20.4474 21.4401 21 20.8235 21H7.17651C6.55991 21 6.09022 20.4474 6.18958 19.8389Z\",\n stroke: \"#050022\",\n strokeWidth: 1.5,\n strokeLinejoin: \"round\"\n })));\n}\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(SvgIcon);\nexport default __webpack_public_path__ + \"static/media/icon.2df85f0a9169ef37cb0cfded2f8334d3.svg\";\nexport { ForwardRef as ReactComponent };","import React, { memo } from 'react';\nimport { IBlock, IConfig } from 'blocks';\n\nimport { Model } from 'blocks/factories/shape/Model';\nimport { createRender } from 'blocks/factories/simple/Render';\nimport { createPadding } from 'blocks/factories/simple/Padding';\nimport { createBlock, block } from 'blocks/factories/shape/Block';\n\nimport icon from './assets/icon.svg';\n\nconst { serialize } = require('svg-path-round-corners/dist/es6/serialize');\nconst { roundCorners } = require('svg-path-round-corners/dist/es6/index');\n\ntype IModel = Model<{}>;\n\nexport const config: IConfig = {\n title: 'Trapezoid',\n search: 'basic shape trapezoid',\n type: 'basic-shape-trapezoid',\n group: ['Basic', 'Basic Shape'],\n memo: {\n key: 'basic-shape',\n styles: block.element.memo,\n },\n styles: block.element.styles,\n};\n\nconst Render = createRender({\n render: ({ width, height, element }) => {\n const border = 2;\n const offset = border / 2;\n\n const x = Math.max(width - offset, 0);\n const y = Math.max(height - offset, 0);\n\n let a = (14 / 64) * y;\n\n if ((x / 2 - 8) / y <= 14 / 64) {\n a = x / 2 - 8;\n }\n\n const points = [\n { c: 'M', x: offset, y: y },\n { c: 'L', x: offset + a, y: offset },\n { c: 'L', x: x - a, y: offset },\n { c: 'L', x: x, y: y },\n { c: 'Z' },\n ];\n\n return (\n \n \n );\n },\n});\n\nconst Padding = createPadding({\n size: [0, 1],\n padding: [0, 1, 0, 1],\n creator: ({ height }) => {\n const a = (14 / 64) * height - 2;\n\n return [a, 0, a, 0];\n },\n});\n\nconst Block = createBlock({\n memo: {\n key: config.memo.key,\n properties: config.memo.styles,\n },\n Render,\n Padding,\n});\n\nexport const BasicShapeTrapezoid : IBlock = {\n type: config.type,\n block: memo(Block),\n element: {\n group: config.group,\n search: config.search,\n styles: config.styles,\n options: block.element.options,\n constraints: block.element.constraints,\n onCreate: block.creator(config, {\n width: 88,\n height: 64,\n }),\n onCopy: block.copier(config),\n title: config.title,\n size: [88, 64],\n icon,\n class: block.element.class,\n },\n button: block.button(config),\n tools: ['shape-basic', ...block.tools],\n toolbars: block.toolbars,\n};\n","var _path;\n\nvar _excluded = [\"title\", \"titleId\"];\n\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport * as React from \"react\";\n\nfunction SvgIcon(_ref, svgRef) {\n var title = _ref.title,\n titleId = _ref.titleId,\n props = _objectWithoutProperties(_ref, _excluded);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 28,\n height: 28,\n viewBox: \"0 0 28 28\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M6.78431 19.5294L13.1176 7.65441C13.4941 6.94853 14.5059 6.94853 14.8824 7.65441L21.2157 19.5294C21.5709 20.1955 21.0883 21 20.3333 21H7.66666C6.91174 21 6.42905 20.1955 6.78431 19.5294Z\",\n stroke: \"#050022\",\n strokeWidth: 1.5,\n strokeLinejoin: \"round\"\n })));\n}\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(SvgIcon);\nexport default __webpack_public_path__ + \"static/media/icon.757da64c7b0e482415ffd5681d9a89d3.svg\";\nexport { ForwardRef as ReactComponent };","import React, { memo } from 'react';\nimport { IBlock, IConfig } from 'blocks';\n\nimport { Model } from 'blocks/factories/shape/Model';\nimport { createRender } from 'blocks/factories/simple/Render';\nimport { createPadding } from 'blocks/factories/simple/Padding';\nimport { createBlock, block } from 'blocks/factories/shape/Block';\n\nimport icon from './assets/icon.svg';\n\nconst { serialize } = require('svg-path-round-corners/dist/es6/serialize');\nconst { roundCorners } = require('svg-path-round-corners/dist/es6/index');\n\ntype IModel = Model<{}>;\n\nexport const config: IConfig = {\n title: 'Triangle',\n search: 'basic shape triangle',\n type: 'basic-shape-triangle',\n group: ['Basic', 'Basic Shape'],\n memo: {\n key: 'basic-shape',\n styles: block.element.memo,\n },\n styles: block.element.styles,\n};\n\nconst Render = createRender({\n render: ({ width, height, element }) => {\n const border = 2;\n const offset = border / 2;\n\n const x = Math.max(width - offset, 0);\n const y = Math.max(height - offset, 0);\n\n const points = [\n { c: 'M', x: offset, y: y },\n { c: 'L', x: x / 2, y: offset },\n { c: 'L', x: x, y: y },\n { c: 'Z' },\n ];\n\n return (\n \n \n );\n },\n});\n\nconst Padding = createPadding({\n size: [1, 0],\n padding: [1, 0, 1, 1],\n creator: ({ width }) => {\n const a = width * 0.2;\n\n return [10, a, 10, 0];\n },\n});\n\nconst Block = createBlock({\n memo: {\n key: config.memo.key,\n properties: config.memo.styles,\n },\n Render,\n Padding,\n});\n\nexport const BasicShapeTriangle : IBlock = {\n type: config.type,\n block: memo(Block),\n element: {\n group: config.group,\n search: config.search,\n styles: config.styles,\n options: block.element.options,\n constraints: block.element.constraints,\n onCreate: block.creator(config, {\n width: 88,\n height: 64,\n }),\n onCopy: block.copier(config),\n title: config.title,\n size: [88, 64],\n icon,\n class: block.element.class,\n },\n button: block.button(config),\n tools: ['shape-basic', ...block.tools],\n toolbars: block.toolbars,\n};\n","var _path;\n\nvar _excluded = [\"title\", \"titleId\"];\n\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport * as React from \"react\";\n\nfunction SvgIcon(_ref, svgRef) {\n var title = _ref.title,\n titleId = _ref.titleId,\n props = _objectWithoutProperties(_ref, _excluded);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 28,\n height: 28,\n viewBox: \"0 0 28 28\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M21 19H7C6.44772 19 6 18.5523 6 18V13.4142C6 13.149 6.10536 12.8946 6.29289 12.7071L9.70711 9.29289C9.89464 9.10536 10.149 9 10.4142 9H21C21.5523 9 22 9.44772 22 10V18C22 18.5523 21.5523 19 21 19Z\",\n stroke: \"#050022\",\n strokeWidth: 1.5,\n strokeLinejoin: \"round\"\n })));\n}\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(SvgIcon);\nexport default __webpack_public_path__ + \"static/media/icon.75813268c94a21183e94c407f91044f0.svg\";\nexport { ForwardRef as ReactComponent };","import React, { memo } from 'react';\nimport { IBlock, IConfig } from 'blocks';\n\nimport { Model } from 'blocks/factories/shape/Model';\nimport { createRender } from 'blocks/factories/simple/Render';\nimport { createPadding } from 'blocks/factories/simple/Padding';\nimport { createBlock, block } from 'blocks/factories/shape/Block';\n\nimport icon from './assets/icon.svg';\n\nconst { serialize } = require('svg-path-round-corners/dist/es6/serialize');\nconst { roundCorners } = require('svg-path-round-corners/dist/es6/index');\n\ntype IModel = Model<{}>;\n\nexport const config: IConfig = {\n title: 'Card',\n search: 'flowchart shape card',\n type: 'flowchart-shape-card',\n group: ['Flowchart Shape'],\n memo: {\n key: 'flowchart-shape',\n styles: block.element.memo,\n },\n styles: block.element.styles,\n};\n\nconst Render = createRender({\n render: ({ width, height, element }) => {\n const border = 2;\n const offset = border / 2;\n\n const x = Math.max(width - border, 0);\n const y = Math.max(height - border, 0);\n\n const a = 18;\n\n const points = [\n { c: 'M', x: x, y: y },\n { c: 'L', x: offset, y: y },\n { c: 'L', x: offset, y: a },\n { c: 'L', x: a, y: offset },\n { c: 'L', x: x, y: offset },\n { c: 'Z' },\n ];\n\n return (\n \n \n );\n },\n});\n\nconst Padding = createPadding({\n size: [0, 0],\n padding: [1, 1, 1, 1],\n creator: () => {\n return [5, 0, 5, 0];\n },\n});\n\nconst Block = createBlock({\n size: [28, 28],\n memo: {\n key: config.memo.key,\n properties: config.memo.styles,\n },\n Render,\n Padding,\n});\n\nexport const FlowchartShapeCard : IBlock = {\n type: config.type,\n block: memo(Block),\n element: {\n group: config.group,\n search: config.search,\n styles: config.styles,\n options: block.element.options,\n constraints: block.element.constraints,\n onCreate: block.creator(config, {\n width: 64,\n height: 64,\n }),\n onCopy: block.copier(config),\n title: config.title,\n size: [64, 64],\n icon,\n class: block.element.class,\n },\n button: block.button(config),\n tools: ['shape-flowchart', ...block.tools],\n toolbars: block.toolbars,\n};\n","var _path;\n\nvar _excluded = [\"title\", \"titleId\"];\n\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport * as React from \"react\";\n\nfunction SvgIcon(_ref, svgRef) {\n var title = _ref.title,\n titleId = _ref.titleId,\n props = _objectWithoutProperties(_ref, _excluded);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 28,\n height: 28,\n viewBox: \"0 0 28 28\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M21 19H7C6.44772 19 6 18.5523 6 18V13.4142C6 13.149 6.10536 12.8946 6.29289 12.7071L9.70711 9.29289C9.89464 9.10536 10.149 9 10.4142 9H21C21.5523 9 22 9.44772 22 10V18C22 18.5523 21.5523 19 21 19Z\",\n stroke: \"#050022\",\n strokeWidth: 1.5,\n strokeLinejoin: \"round\"\n })));\n}\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(SvgIcon);\nexport default __webpack_public_path__ + \"static/media/icon.75813268c94a21183e94c407f91044f0.svg\";\nexport { ForwardRef as ReactComponent };","import React from 'react';\nimport { blocks, IBlock, IConfigBase } from 'blocks';\n\nimport { config as shape } from 'blocks/Flowchart/ShapeCard';\nimport { config as text } from 'blocks/General/Text';\n\nimport { Button } from 'elements/Block/Button';\n\nimport icon from './assets/icon.svg';\n\nexport const config: IConfigBase = {\n title: 'Card',\n search: 'flowchart card',\n type: 'flowchart-card',\n group: ['Flowchart'],\n};\n\nexport const FlowchartCard : IBlock = {\n type: config.type,\n block: () => null,\n element: {\n group: config.group,\n search: config.search,\n options: [],\n styles: [],\n constraints: {},\n onCreate: ({ file, position, parent, canvas }) => {\n const wrap = blocks[shape.type].element.onCreate({\n file,\n position,\n parent,\n auto: true,\n properties: {\n width: undefined,\n height: undefined,\n transparent: false,\n deletable: true,\n },\n });\n\n blocks[text.type].element.onCreate({\n file,\n position: [0, 0],\n parent: wrap,\n auto: canvas?.space ? false : undefined,\n preventComponentStatus: true,\n properties: {\n text: 'Card
',\n },\n });\n\n return wrap;\n },\n onCopy: () => '',\n title: config.title,\n size: [74, 50],\n icon,\n class: {\n title: '',\n icon: '',\n },\n },\n button: {\n tool: () => ({\n render: ({ width, height, element, properties }) => {\n const border = 2;\n const offset = border / 2;\n\n const x = Math.max(width - border, 0);\n const y = Math.max(height - border, 0);\n\n const points = [\n [x / 2 + offset, y / 2 + offset],\n [x / 2, y / 2],\n ];\n\n return (\n \n \n );\n },\n});\n\nconst Padding = createPadding({\n size: [0, 0],\n padding: [1, 1, 1, 1],\n creator: () => {\n return [10, 10, 10, 10];\n },\n});\n\nconst Block = createBlock({\n memo: {\n key: config.memo.key,\n properties: config.memo.styles,\n },\n Render,\n Padding,\n});\n\nexport const FlowchartShapeConnector : IBlock = {\n type: config.type,\n block: memo(Block),\n element: {\n group: config.group,\n search: config.search,\n styles: config.styles,\n options: block.element.options,\n constraints: block.element.constraints,\n onCreate: block.creator(config, {\n width: 64,\n height: 64,\n }),\n onCopy: block.copier(config),\n title: config.title,\n size: [64, 64],\n icon,\n class: block.element.class,\n },\n button: block.button(config),\n tools: ['shape-flowchart', ...block.tools],\n toolbars: block.toolbars,\n};\n","var _path;\n\nvar _excluded = [\"title\", \"titleId\"];\n\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport * as React from \"react\";\n\nfunction SvgIcon(_ref, svgRef) {\n var title = _ref.title,\n titleId = _ref.titleId,\n props = _objectWithoutProperties(_ref, _excluded);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 28,\n height: 28,\n viewBox: \"0 0 28 28\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M14 7C17.866 7 21 10.134 21 14C21 17.866 17.866 21 14 21C10.134 21 7 17.866 7 14C7 10.134 10.134 7 14 7Z\",\n stroke: \"#050022\",\n strokeWidth: 1.5,\n strokeLinejoin: \"round\"\n })));\n}\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(SvgIcon);\nexport default __webpack_public_path__ + \"static/media/icon.931e0354db6cf45d8c2801cbf7986c04.svg\";\nexport { ForwardRef as ReactComponent };","import React from 'react';\nimport { blocks, IBlock, IConfigBase } from 'blocks';\n\nimport { config as shape } from 'blocks/Flowchart/ShapeConnector';\nimport { config as text } from 'blocks/General/Text';\n\nimport { Button } from 'elements/Block/Button';\n\nimport icon from './assets/icon.svg';\n\nexport const config: IConfigBase = {\n title: 'Connector',\n search: 'flowchart connector',\n type: 'flowchart-connector',\n group: ['Flowchart'],\n};\n\nexport const FlowchartConnector : IBlock = {\n type: config.type,\n block: () => null,\n element: {\n group: config.group,\n search: config.search,\n options: [],\n styles: [],\n constraints: {},\n onCreate: ({ file, position, parent, canvas }) => {\n const wrap = blocks[shape.type].element.onCreate({\n file,\n position,\n parent,\n auto: true,\n properties: {\n width: 122,\n height: 122,\n transparent: false,\n deletable: true,\n },\n });\n\n blocks[text.type].element.onCreate({\n file,\n position: [0, 0],\n parent: wrap,\n auto: canvas?.space ? false : undefined,\n preventComponentStatus: true,\n properties: {\n text: 'Connector
',\n },\n });\n\n return wrap;\n },\n onCopy: () => '',\n title: config.title,\n size: [122, 122],\n icon,\n class: {\n title: '',\n icon: '',\n },\n },\n button: {\n tool: () => ({\n render: ({ width, height, element }) => {\n const border = 2;\n const offset = border / 2;\n\n const x = Math.max(width - offset, 0);\n const y = Math.max(height - offset, 0);\n\n let a = (16 / 64) * y;\n\n if ((x - 40) / y <= 16 / 64) {\n a = x - 40;\n }\n\n const points = [\n { c: 'M', x: offset, y: y },\n { c: 'L', x: offset + a, y: offset },\n { c: 'H', x: x },\n { c: 'L', x: x - a, y: y },\n { c: 'Z' },\n ];\n\n return (\n \n \n );\n },\n});\n\nconst Padding = createPadding({\n size: [0, 1],\n padding: [0, 1, 0, 1],\n creator: ({ height }) => {\n const a = (16 / 64) * height - 2;\n\n return [a, 0, a, 0];\n },\n});\n\nconst Block = createBlock({\n size: [42, 22],\n memo: {\n key: config.memo.key,\n properties: config.memo.styles,\n },\n Render,\n Padding,\n});\n\nexport const FlowchartShapeData : IBlock = {\n type: config.type,\n block: memo(Block),\n element: {\n group: config.group,\n search: config.search,\n styles: config.styles,\n options: block.element.options,\n constraints: block.element.constraints,\n onCreate: block.creator(config, {\n width: 88,\n height: 64,\n }),\n onCopy: block.copier(config),\n title: config.title,\n size: [88, 64],\n icon,\n class: block.element.class,\n },\n button: block.button(config),\n tools: ['shape-flowchart', ...block.tools],\n toolbars: block.toolbars,\n};\n","var _path;\n\nvar _excluded = [\"title\", \"titleId\"];\n\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport * as React from \"react\";\n\nfunction SvgIcon(_ref, svgRef) {\n var title = _ref.title,\n titleId = _ref.titleId,\n props = _objectWithoutProperties(_ref, _excluded);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 28,\n height: 28,\n viewBox: \"0 0 28 28\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M4.8862 17.7127L7.2862 9.71265C7.4131 9.28967 7.80242 9 8.24403 9H22.156C22.8258 9 23.3063 9.64574 23.1138 10.2873L20.7138 18.2873C20.5869 18.7103 20.1976 19 19.756 19H5.84403C5.17417 19 4.69372 18.3543 4.8862 17.7127Z\",\n stroke: \"#050022\",\n strokeWidth: 1.5,\n strokeLinejoin: \"round\"\n })));\n}\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(SvgIcon);\nexport default __webpack_public_path__ + \"static/media/icon.aad4e997821eb1547f876b176e3f7618.svg\";\nexport { ForwardRef as ReactComponent };","import React from 'react';\nimport { blocks, IBlock, IConfigBase } from 'blocks';\n\nimport { config as shape } from 'blocks/Flowchart/ShapeData';\nimport { config as text } from 'blocks/General/Text';\n\nimport { Button } from 'elements/Block/Button';\n\nimport icon from './assets/icon.svg';\n\nexport const config: IConfigBase = {\n title: 'Data',\n search: 'flowchart data',\n type: 'flowchart-data',\n group: ['Flowchart'],\n};\n\nexport const FlowchartData : IBlock = {\n type: config.type,\n block: () => null,\n element: {\n group: config.group,\n search: config.search,\n options: [],\n styles: [],\n constraints: {},\n onCreate: ({ file, position, parent, canvas }) => {\n const wrap = blocks[shape.type].element.onCreate({\n file,\n position,\n parent,\n auto: true,\n properties: {\n width: undefined,\n height: undefined,\n transparent: false,\n deletable: true,\n },\n });\n\n blocks[text.type].element.onCreate({\n file,\n position: [0, 0],\n parent: wrap,\n auto: canvas?.space ? false : undefined,\n preventComponentStatus: true,\n properties: {\n text: 'Data
',\n },\n });\n\n return wrap;\n },\n onCopy: () => '',\n title: config.title,\n size: [86, 50],\n icon,\n class: {\n title: '',\n icon: '',\n },\n },\n button: {\n tool: () => ({\n render: ({ width, height, element }) => {\n const border = 2;\n const offset = border / 2;\n\n const x = Math.max(width - offset, 0);\n const y = Math.max(height - offset, 0);\n const b = 6;\n\n let a = (21 / 64) * x;\n\n if (a > Math.max(y * 0.68, y - 40)) {\n a = Math.max(y * 0.68, y - 40);\n }\n\n const points = [\n { c: 'M', x: x, y: a / 2 },\n { c: 'C', x1: x, y1: a / 2 + ((b / 21) * a), x2: (49.6731 / 64) * x, y2: a, x: x / 2, y: a },\n { c: 'C', x1: (14.3269 / 64) * x, y1: a, x2: offset, y2: a / 2 + ((b / 21) * a), x: offset, y: a / 2 },\n { c: 'M', x: x, y: a / 2 },\n { c: 'C', x1: x, y1: offset + a / 2 - ((b / 21) * a), x2: (49.6731 / 64) * x, y2: offset, x: x / 2, y: offset },\n { c: 'C', x1: (14.3269 / 64) * x, y1: offset, x2: offset, y2: offset + a / 2 - ((b / 21) * a), x: offset, y: a / 2 },\n { c: 'M', x: x, y: a / 2 },\n { c: 'V', y: y - a / 2 - 2 },\n { c: 'C', x1: x, y1: y - a / 2 + ((b / 21) * a), x2: (49.6731 / 64) * x, y2: y, x: x / 2, y: y },\n { c: 'C', x1: (14.3269 / 64) * x, y1: y, x2: offset, y2: y - a / 2 + ((b / 21) * a), x: offset, y: y - a / 2 - 2 },\n { c: 'V', y: a / 2 },\n ];\n\n return (\n \n \n );\n },\n});\n\nconst Padding = createPadding({\n size: [1, 0],\n padding: [1, 0, 1, 1],\n creator: ({ width }) => {\n const a = (21 / 64) * width - 2;\n\n return [0, a, 0, 0];\n },\n});\n\nconst Block = createBlock({\n memo: {\n key: config.memo.key,\n properties: config.memo.styles,\n },\n Render,\n Padding,\n});\n\nexport const FlowchartShapeDatabase : IBlock = {\n type: config.type,\n block: memo(Block),\n element: {\n group: config.group,\n search: config.search,\n styles: config.styles,\n options: block.element.options,\n constraints: {\n prevent: {\n ...block.element.constraints.prevent,\n\n render: [7, 8],\n },\n },\n onCreate: block.creator(config, {\n width: 72,\n height: 64,\n }),\n onCopy: block.copier(config),\n title: config.title,\n size: [72, 64],\n icon,\n class: block.element.class,\n },\n button: block.button(config),\n tools: ['shape-flowchart', ...block.tools],\n toolbars: block.toolbars,\n};\n","var _path;\n\nvar _excluded = [\"title\", \"titleId\"];\n\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport * as React from \"react\";\n\nfunction SvgIcon(_ref, svgRef) {\n var title = _ref.title,\n titleId = _ref.titleId,\n props = _objectWithoutProperties(_ref, _excluded);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 28,\n height: 28,\n viewBox: \"0 0 28 28\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M21 8.85714C21 7.27919 18.5103 6 14 6C9.48967 6 7 7.27919 7 8.85714M21 8.85714C21 10.4351 18.5103 11.7143 14 11.7143C9.48967 11.7143 7 10.4351 7 8.85714M21 8.85714V19.7143C21 20.9767 18.5103 22 14 22C9.48967 22 7 20.9767 7 19.7143V8.85714\",\n stroke: \"#050022\",\n strokeWidth: 1.5,\n strokeLinejoin: \"round\"\n })));\n}\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(SvgIcon);\nexport default __webpack_public_path__ + \"static/media/icon.38c98785ddd5dc1585e3aca6b98d1ccb.svg\";\nexport { ForwardRef as ReactComponent };","import React from 'react';\nimport { blocks, IBlock, IConfigBase } from 'blocks';\n\nimport { config as shape } from 'blocks/Flowchart/ShapeDatabase';\nimport { config as text } from 'blocks/General/Text';\n\nimport { Button } from 'elements/Block/Button';\n\nimport icon from './assets/icon.svg';\n\nexport const config: IConfigBase = {\n title: 'Database',\n search: 'flowchart database',\n type: 'flowchart-database',\n group: ['Flowchart'],\n};\n\nexport const FlowchartDatabase : IBlock = {\n type: config.type,\n block: () => null,\n element: {\n group: config.group,\n search: config.search,\n options: [],\n styles: [],\n constraints: {},\n onCreate: ({ file, position, parent, canvas }) => {\n const wrap = blocks[shape.type].element.onCreate({\n file,\n position,\n parent,\n auto: true,\n properties: {\n width: undefined,\n height: undefined,\n transparent: false,\n deletable: true,\n },\n });\n\n blocks[text.type].element.onCreate({\n file,\n position: [0, 0],\n parent: wrap,\n auto: canvas?.space ? false : undefined,\n preventComponentStatus: true,\n properties: {\n text: 'Database
',\n },\n });\n\n return wrap;\n },\n onCopy: () => '',\n title: config.title,\n size: [96, 78],\n icon,\n class: {\n title: '',\n icon: '',\n },\n },\n button: {\n tool: () => ({\n render: ({ width, height, element }) => {\n const border = 2;\n const offset = border / 2;\n\n const x = Math.max(width - offset, 0);\n const y = Math.max(height - offset, 0);\n\n const points = [\n { c: 'M', x: x / 2, y: offset },\n { c: 'L', x: offset, y: y / 2 },\n { c: 'L', x: x / 2, y: y },\n { c: 'L', x: x, y: y / 2 },\n { c: 'Z' },\n ];\n\n return (\n \n \n );\n },\n});\n\nconst Padding = createPadding({\n size: [0, 0],\n padding: [1, 1, 1, 1],\n creator: () => {\n return [10, 10, 10, 10];\n },\n});\n\nconst Block = createBlock({\n memo: {\n key: config.memo.key,\n properties: config.memo.styles,\n },\n Render,\n Padding,\n});\n\nexport const FlowchartShapeDecision : IBlock = {\n type: config.type,\n block: memo(Block),\n element: {\n group: config.group,\n search: config.search,\n styles: config.styles,\n options: block.element.options,\n constraints: block.element.constraints,\n onCreate: block.creator(config, {\n width: 64,\n height: 68,\n }),\n onCopy: block.copier(config),\n title: config.title,\n size: [64, 68],\n icon,\n class: block.element.class,\n },\n button: block.button(config),\n tools: ['shape-flowchart', ...block.tools],\n toolbars: block.toolbars,\n};\n","var _path;\n\nvar _excluded = [\"title\", \"titleId\"];\n\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport * as React from \"react\";\n\nfunction SvgIcon(_ref, svgRef) {\n var title = _ref.title,\n titleId = _ref.titleId,\n props = _objectWithoutProperties(_ref, _excluded);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 28,\n height: 28,\n viewBox: \"0 0 28 28\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M13.4453 19.6302L6.24808 14.8321C5.65434 14.4362 5.65434 13.5638 6.24808 13.1679L13.4453 8.3698C13.7812 8.14587 14.2188 8.14587 14.5547 8.3698L21.7519 13.1679C22.3457 13.5638 22.3457 14.4362 21.7519 14.8321L14.5547 19.6302C14.2188 19.8541 13.7812 19.8541 13.4453 19.6302Z\",\n stroke: \"#050022\",\n strokeWidth: 1.5,\n strokeLinejoin: \"round\"\n })));\n}\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(SvgIcon);\nexport default __webpack_public_path__ + \"static/media/icon.2e02aec1c65203926aa3a1fea6b9cb33.svg\";\nexport { ForwardRef as ReactComponent };","import React from 'react';\nimport { blocks, IBlock, IConfigBase } from 'blocks';\n\nimport { config as shape } from 'blocks/Flowchart/ShapeDecision';\nimport { config as text } from 'blocks/General/Text';\n\nimport { Button } from 'elements/Block/Button';\n\nimport icon from './assets/icon.svg';\n\nexport const config: IConfigBase = {\n title: 'Decision',\n search: 'flowchart decision',\n type: 'flowchart-decision',\n group: ['Flowchart'],\n};\n\nexport const FlowchartDecision : IBlock = {\n type: config.type,\n block: () => null,\n element: {\n group: config.group,\n search: config.search,\n options: [],\n styles: [],\n constraints: {},\n onCreate: ({ file, position, parent, canvas }) => {\n const wrap = blocks[shape.type].element.onCreate({\n file,\n position,\n parent,\n auto: true,\n properties: {\n width: undefined,\n height: undefined,\n transparent: false,\n deletable: true,\n },\n });\n\n blocks[text.type].element.onCreate({\n file,\n position: [0, 0],\n parent: wrap,\n auto: canvas?.space ? false : undefined,\n preventComponentStatus: true,\n properties: {\n text: 'Decision
',\n },\n });\n\n return wrap;\n },\n onCopy: () => '',\n title: config.title,\n size: [112, 70],\n icon,\n class: {\n title: '',\n icon: '',\n },\n },\n button: {\n tool: () => ({\n render: ({ width, height, element }) => {\n const border = 2;\n const offset = border / 2;\n\n const x = Math.max(width - border, 0);\n const y = Math.max(height - border, 0);\n\n const a = Math.min(x - 6, y / 2.4) - offset;\n const b = a / 2.233555448;\n\n const points = [\n { c: 'M', x: offset, y: y },\n { c: 'L', x: offset, y: offset },\n { c: 'L', x: x - a, y: offset },\n { c: 'C', x1: x - b, y1: offset, x2: x, y2: b, x: x, y: y / 2 },\n { c: 'C', x1: x, y1: y - b, x2: x - b, y2: y, x: x - a, y: y },\n { c: 'Z' },\n ];\n\n return (\n \n \n );\n },\n});\n\nconst Padding = createPadding({\n size: [0, 1],\n padding: [1, 1, 0, 1],\n creator: ({ height }) => {\n const a = (14 / 64) * height - 6;\n\n return [0, 0, a, 0];\n },\n});\n\nconst Block = createBlock({\n memo: {\n key: config.memo.key,\n properties: config.memo.styles,\n },\n Render,\n Padding,\n});\n\nexport const FlowchartShapeDelay : IBlock = {\n type: config.type,\n block: memo(Block),\n element: {\n group: config.group,\n search: config.search,\n styles: config.styles,\n options: block.element.options,\n constraints: block.element.constraints,\n onCreate: block.creator(config, {\n width: 84,\n height: 64,\n }),\n onCopy: block.copier(config),\n title: config.title,\n size: [84, 64],\n icon,\n class: block.element.class,\n },\n button: block.button(config),\n tools: ['shape-flowchart', ...block.tools],\n toolbars: block.toolbars,\n};\n","var _path;\n\nvar _excluded = [\"title\", \"titleId\"];\n\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport * as React from \"react\";\n\nfunction SvgIcon(_ref, svgRef) {\n var title = _ref.title,\n titleId = _ref.titleId,\n props = _objectWithoutProperties(_ref, _excluded);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 28,\n height: 28,\n viewBox: \"0 0 28 28\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M7 19.7581V8.24194C7 8.10832 7.10832 8 7.24194 8H16C19.3137 8 22 10.6863 22 14C22 17.3137 19.3137 20 16 20H7.24194C7.10832 20 7 19.8917 7 19.7581Z\",\n stroke: \"#050022\",\n strokeWidth: 1.5,\n strokeLinejoin: \"round\"\n })));\n}\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(SvgIcon);\nexport default __webpack_public_path__ + \"static/media/icon.0a6b07fc14a8f6ffc0bd0520dae1204f.svg\";\nexport { ForwardRef as ReactComponent };","import React from 'react';\nimport { blocks, IBlock, IConfigBase } from 'blocks';\n\nimport { config as shape } from 'blocks/Flowchart/ShapeDelay';\nimport { config as text } from 'blocks/General/Text';\n\nimport { Button } from 'elements/Block/Button';\n\nimport icon from './assets/icon.svg';\n\nexport const config: IConfigBase = {\n title: 'Delay',\n search: 'flowchart delay',\n type: 'flowchart-delay',\n group: ['Flowchart'],\n};\n\nexport const FlowchartDelay : IBlock = {\n type: config.type,\n block: () => null,\n element: {\n group: config.group,\n search: config.search,\n options: [],\n styles: [],\n constraints: {},\n onCreate: ({ file, position, parent, canvas }) => {\n const wrap = blocks[shape.type].element.onCreate({\n file,\n position,\n parent,\n auto: true,\n properties: {\n width: undefined,\n height: undefined,\n transparent: false,\n deletable: true,\n },\n });\n\n blocks[text.type].element.onCreate({\n file,\n position: [0, 0],\n parent: wrap,\n auto: canvas?.space ? false : undefined,\n preventComponentStatus: true,\n properties: {\n text: 'Delay
',\n },\n });\n\n return wrap;\n },\n onCopy: () => '',\n title: config.title,\n size: [76, 50],\n icon,\n class: {\n title: '',\n icon: '',\n },\n },\n button: {\n tool: () => ({\n render: ({ width, height, element }) => {\n const border = 2;\n const offset = border / 2;\n\n const x = Math.max(width - offset, 0);\n const y = Math.max(height - offset, 0);\n const b = 6;\n\n let a = (21 / 64) * y;\n\n if (a > Math.max(x * 0.68, x - 40)) {\n a = Math.max(x * 0.68, x - 40);\n }\n\n const points = [\n { c: 'M', x: x - a / 2, y: y },\n { c: 'C', x1: x - (a / 2 + ((b / 21) * a)), y1: y, x2: x - a, y2: (49.6731 / 64) * y, x: x - a, y: y / 2 },\n { c: 'C', x1: x - a, y1: (14.3269 / 64) * y, x2: x - (a / 2 + ((b / 21) * a)), y2: offset, x: x - a / 2, y: offset },\n { c: 'M', x: x - a / 2, y: y },\n { c: 'C', x1: x - (a / 2 - ((b / 21) * a)), y1: y, x2: x, y2: (49.6731 / 64) * y, x: x, y: y / 2 },\n { c: 'C', x1: x, y1: (14.3269 / 64) * y, x2: x - (a / 2 - ((b / 21) * a)), y2: offset, x: x - a / 2, y: offset },\n { c: 'M', x: x - a / 2, y: y },\n { c: 'H', x: a / 2 + 2 },\n { c: 'C', x1: ((b / 21) * a), y1: y, x2: offset, y2: (49.6731 / 64) * y, x: offset, y: y / 2 },\n { c: 'C', x1: offset, y1: (14.3269 / 64) * y, x2: ((b / 21) * a), y2: offset, x: a / 2 + 2, y: offset },\n { c: 'H', x: x - a / 2 },\n ];\n\n return (\n \n \n );\n },\n});\n\nconst Padding = createPadding({\n size: [0, 1],\n padding: [1, 1, 0, 1],\n creator: ({ height }) => {\n const a = (21 / 64) * height - 2;\n\n return [0, 0, a, 0];\n },\n});\n\nconst Block = createBlock({\n memo: {\n key: config.memo.key,\n properties: config.memo.styles,\n },\n Render,\n Padding,\n});\n\nexport const FlowchartShapeDirectAccessStorage : IBlock = {\n type: config.type,\n block: memo(Block),\n element: {\n group: config.group,\n search: config.search,\n styles: config.styles,\n options: block.element.options,\n constraints: {\n prevent: {\n ...block.element.constraints.prevent,\n\n render: [7, 8],\n },\n },\n onCreate: block.creator(config, {\n width: 64,\n height: 72,\n }),\n onCopy: block.copier(config),\n title: config.title,\n size: [64, 72],\n icon,\n class: block.element.class,\n },\n button: block.button(config),\n tools: ['shape-flowchart', ...block.tools],\n toolbars: block.toolbars,\n};\n","var _path;\n\nvar _excluded = [\"title\", \"titleId\"];\n\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport * as React from \"react\";\n\nfunction SvgIcon(_ref, svgRef) {\n var title = _ref.title,\n titleId = _ref.titleId,\n props = _objectWithoutProperties(_ref, _excluded);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 28,\n height: 28,\n viewBox: \"0 0 28 28\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M20 20C21.3807 20 22.5 17.866 22.5 14C22.5 10.134 21.3807 8 20 8M20 20C18.6193 20 17.5 17.866 17.5 14C17.5 10.134 18.6193 8 20 8M20 20H7.5C6.39543 20 5.5 17.866 5.5 14C5.5 10.134 6.39543 8 7.5 8L20 8\",\n stroke: \"#050022\",\n strokeWidth: 1.5,\n strokeLinejoin: \"round\"\n })));\n}\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(SvgIcon);\nexport default __webpack_public_path__ + \"static/media/icon.27da891b6c341a7b5985a830eab4cd05.svg\";\nexport { ForwardRef as ReactComponent };","import React from 'react';\nimport { blocks, IBlock, IConfigBase } from 'blocks';\n\nimport { config as shape } from 'blocks/Flowchart/ShapeDirectAccessStorage';\nimport { config as text } from 'blocks/General/Text';\n\nimport { Button } from 'elements/Block/Button';\n\nimport icon from './assets/icon.svg';\n\nexport const config: IConfigBase = {\n title: 'Direct access storage',\n search: 'flowchart direct access storage',\n type: 'flowchart-direct-access-storage',\n group: ['Flowchart'],\n};\n\nexport const FlowchartDirectAccessStorage : IBlock = {\n type: config.type,\n block: () => null,\n element: {\n group: config.group,\n search: config.search,\n options: [],\n styles: [],\n constraints: {},\n onCreate: ({ file, position, parent, canvas }) => {\n const wrap = blocks[shape.type].element.onCreate({\n file,\n position,\n parent,\n auto: true,\n properties: {\n width: undefined,\n height: undefined,\n transparent: false,\n deletable: true,\n },\n });\n\n blocks[text.type].element.onCreate({\n file,\n position: [0, 0],\n parent: wrap,\n auto: canvas?.space ? false : undefined,\n preventComponentStatus: true,\n properties: {\n text: 'Direct access storage
',\n },\n });\n\n return wrap;\n },\n onCopy: () => '',\n title: config.title,\n size: [190, 50],\n icon,\n class: {\n title: '',\n icon: '',\n },\n },\n button: {\n tool: () => ({\n render: ({ width, height, element }) => {\n const border = 2;\n const offset = border / 2;\n\n const x = Math.max(width - border, 0);\n const y = Math.max(height - border, 0);\n\n const a = (((x - 6) > ((y / 2.4) * 2)) ? y / 2.4 : (x - 6) / 2) - offset;\n const b = a / 2.233555448;\n\n const points = [\n { c: 'M', x: offset + a, y: y },\n { c: 'L', x: offset, y: y / 2 },\n { c: 'L', x: offset + a, y: offset },\n { c: 'L', x: x - a, y: offset },\n { c: 'C', x1: x - b, y1: offset, x2: x, y2: b, x: x, y: y / 2 },\n { c: 'C', x1: x, y1: y - b, x2: x - b, y2: y, x: x - a, y: y },\n { c: 'Z' },\n ];\n\n return (\n \n \n );\n },\n});\n\nconst Padding = createPadding({\n size: [0, 1],\n padding: [0, 1, 0, 1],\n creator: ({ height }) => {\n const a = (20 / 64) * height - 6;\n const b = (12 / 64) * height - 6;\n\n return [a, 0, b, 0];\n },\n});\n\nconst Block = createBlock({\n memo: {\n key: config.memo.key,\n properties: config.memo.styles,\n },\n Render,\n Padding,\n});\n\nexport const FlowchartShapeDisplay : IBlock = {\n type: config.type,\n block: memo(Block),\n element: {\n group: config.group,\n search: config.search,\n styles: config.styles,\n options: block.element.options,\n constraints: block.element.constraints,\n onCreate: block.creator(config, {\n width: 96,\n height: 64,\n }),\n onCopy: block.copier(config),\n title: config.title,\n size: [96, 64],\n icon,\n class: block.element.class,\n },\n button: block.button(config),\n tools: ['shape-flowchart', ...block.tools],\n toolbars: block.toolbars,\n};\n","var _path;\n\nvar _excluded = [\"title\", \"titleId\"];\n\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport * as React from \"react\";\n\nfunction SvgIcon(_ref, svgRef) {\n var title = _ref.title,\n titleId = _ref.titleId,\n props = _objectWithoutProperties(_ref, _excluded);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 28,\n height: 28,\n viewBox: \"0 0 28 28\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M17.5 20C20 20 22.5 17.866 22.5 14C22.5 10.134 20 8 17.5 8H9.53518C9.20083 8 8.8886 8.1671 8.70313 8.4453L5.3698 13.4453C5.14587 13.7812 5.14587 14.2188 5.3698 14.5547L8.70313 19.5547C8.8886 19.8329 9.20083 20 9.53518 20H17.5Z\",\n stroke: \"#050022\",\n strokeWidth: 1.5,\n strokeLinejoin: \"round\"\n })));\n}\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(SvgIcon);\nexport default __webpack_public_path__ + \"static/media/icon.bd9c2eb1fc2904fd33676bd2010c9f0c.svg\";\nexport { ForwardRef as ReactComponent };","import React from 'react';\nimport { blocks, IBlock, IConfigBase } from 'blocks';\n\nimport { config as shape } from 'blocks/Flowchart/ShapeDisplay';\nimport { config as text } from 'blocks/General/Text';\n\nimport { Button } from 'elements/Block/Button';\n\nimport icon from './assets/icon.svg';\n\nexport const config: IConfigBase = {\n title: 'Display',\n search: 'flowchart display',\n type: 'flowchart-display',\n group: ['Flowchart'],\n};\n\nexport const FlowchartDisplay : IBlock = {\n type: config.type,\n block: () => null,\n element: {\n group: config.group,\n search: config.search,\n options: [],\n styles: [],\n constraints: {},\n onCreate: ({ file, position, parent, canvas }) => {\n const wrap = blocks[shape.type].element.onCreate({\n file,\n position,\n parent,\n auto: true,\n properties: {\n width: undefined,\n height: undefined,\n transparent: false,\n deletable: true,\n },\n });\n\n blocks[text.type].element.onCreate({\n file,\n position: [0, 0],\n parent: wrap,\n auto: canvas?.space ? false : undefined,\n preventComponentStatus: true,\n properties: {\n text: 'Display
',\n },\n });\n\n return wrap;\n },\n onCopy: () => '',\n title: config.title,\n size: [84, 50],\n icon,\n class: {\n title: '',\n icon: '',\n },\n },\n button: {\n tool: () => ({\n render: ({ width, height, element }) => {\n const border = 2;\n const offset = border / 2;\n\n const x = Math.max(width - offset, 0);\n const y = Math.max(height - offset, 0);\n\n const a = Math.min(x, y * 3.2) / 64;\n\n const points = [\n { c: 'M', x: offset, y: offset },\n { c: 'L', x: x, y: offset },\n { c: 'L', x: x, y: y },\n { c: 'C', x1: (59 / 64) * x, y1: y - a * 5, x2: (53 / 64) * x, y2: y - a * 8, x: (46 / 64) * x, y: y - a * 8 },\n { c: 'C', x1: (35 / 64) * x, y1: y - a * 8, x2: (30 / 64) * x, y2: y, x: (20 / 64) * x, y: y },\n { c: 'C', x1: (11 / 64) * x, y1: y, x2: (5 / 64) * x, y2: y - a * 4, x: offset, y: y - a * 10 },\n { c: 'Z' },\n ];\n\n return (\n \n \n );\n },\n});\n\nconst Padding = createPadding({\n size: [1, 0],\n padding: [1, 1, 1, 0],\n creator: ({ width }) => {\n const a = Math.min(width / 8, width - 14);\n\n return [0, 0, 0, a];\n },\n});\n\nconst Block = createBlock({\n memo: {\n key: config.memo.key,\n properties: config.memo.styles,\n },\n Render,\n Padding,\n});\n\nexport const FlowchartShapeDocument : IBlock = {\n type: config.type,\n block: memo(Block),\n element: {\n group: config.group,\n search: config.search,\n styles: config.styles,\n options: block.element.options,\n constraints: block.element.constraints,\n onCreate: block.creator(config, {\n width: 64,\n height: 64,\n }),\n onCopy: block.copier(config),\n title: config.title,\n size: [64, 64],\n icon,\n class: block.element.class,\n },\n button: block.button(config),\n tools: ['shape-flowchart', ...block.tools],\n toolbars: block.toolbars,\n};\n","var _path;\n\nvar _excluded = [\"title\", \"titleId\"];\n\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport * as React from \"react\";\n\nfunction SvgIcon(_ref, svgRef) {\n var title = _ref.title,\n titleId = _ref.titleId,\n props = _objectWithoutProperties(_ref, _excluded);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 28,\n height: 28,\n viewBox: \"0 0 28 28\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M6 17V9.99713C6 9.44485 6.44772 9 7 9H21C21.5523 9 22 9.44772 22 10V19C22 19 21 17 18 17C15 17 13 20 10 20C7 20 6 18 6 17Z\",\n stroke: \"#050022\",\n strokeWidth: 1.5,\n strokeLinejoin: \"round\"\n })));\n}\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(SvgIcon);\nexport default __webpack_public_path__ + \"static/media/icon.054b559c291ffad3a213390cc0906878.svg\";\nexport { ForwardRef as ReactComponent };","import React from 'react';\nimport { blocks, IBlock, IConfigBase } from 'blocks';\n\nimport { config as shape } from 'blocks/Flowchart/ShapeDocument';\nimport { config as text } from 'blocks/General/Text';\n\nimport { Button } from 'elements/Block/Button';\n\nimport icon from './assets/icon.svg';\n\nexport const config: IConfigBase = {\n title: 'Document',\n search: 'flowchart document',\n type: 'flowchart-document',\n group: ['Flowchart'],\n};\n\nexport const FlowchartDocument : IBlock = {\n type: config.type,\n block: () => null,\n element: {\n group: config.group,\n search: config.search,\n options: [],\n styles: [],\n constraints: {},\n onCreate: ({ file, position, parent, canvas }) => {\n const wrap = blocks[shape.type].element.onCreate({\n file,\n position,\n parent,\n auto: true,\n properties: {\n width: undefined,\n height: undefined,\n transparent: false,\n deletable: true,\n },\n });\n\n blocks[text.type].element.onCreate({\n file,\n position: [0, 0],\n parent: wrap,\n auto: canvas?.space ? false : undefined,\n preventComponentStatus: true,\n properties: {\n text: 'Document
',\n },\n });\n\n return wrap;\n },\n onCopy: () => '',\n title: config.title,\n size: [104, 62],\n icon,\n class: {\n title: '',\n icon: '',\n },\n },\n button: {\n tool: () => ({\n render: ({ width, height, element }) => {\n const border = 2;\n const offset = border / 2;\n\n const x = Math.max(width - offset, 0);\n const y = Math.max(height - offset, 0);\n\n const points = [\n { c: 'M', x: offset, y: y },\n { c: 'L', x: x / 2, y: offset },\n { c: 'L', x: x, y: y },\n { c: 'Z' },\n ];\n\n return (\n \n \n );\n },\n});\n\nconst Padding = createPadding({\n size: [1, 0],\n padding: [1, 0, 1, 1],\n creator: ({ width }) => {\n const a = width * 0.2;\n\n return [10, a, 10, 0];\n },\n});\n\nconst Block = createBlock({\n memo: {\n key: config.memo.key,\n properties: config.memo.styles,\n },\n Render,\n Padding,\n});\n\nexport const FlowchartShapeExtract : IBlock = {\n type: config.type,\n block: memo(Block),\n element: {\n group: config.group,\n search: config.search,\n styles: config.styles,\n options: block.element.options,\n constraints: block.element.constraints,\n onCreate: block.creator(config, {\n width: 88,\n height: 64,\n }),\n onCopy: block.copier(config),\n title: config.title,\n size: [88, 64],\n icon,\n class: block.element.class,\n },\n button: block.button(config),\n tools: ['shape-flowchart', ...block.tools],\n toolbars: block.toolbars,\n};\n","var _path;\n\nvar _excluded = [\"title\", \"titleId\"];\n\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport * as React from \"react\";\n\nfunction SvgIcon(_ref, svgRef) {\n var title = _ref.title,\n titleId = _ref.titleId,\n props = _objectWithoutProperties(_ref, _excluded);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 28,\n height: 28,\n viewBox: \"0 0 28 28\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M6.78431 19.5294L13.1176 7.65441C13.4941 6.94853 14.5059 6.94853 14.8824 7.65441L21.2157 19.5294C21.5709 20.1955 21.0883 21 20.3333 21H7.66666C6.91174 21 6.42905 20.1955 6.78431 19.5294Z\",\n stroke: \"#050022\",\n strokeWidth: 1.5,\n strokeLinejoin: \"round\"\n })));\n}\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(SvgIcon);\nexport default __webpack_public_path__ + \"static/media/icon.757da64c7b0e482415ffd5681d9a89d3.svg\";\nexport { ForwardRef as ReactComponent };","import React from 'react';\nimport { blocks, IBlock, IConfigBase } from 'blocks';\n\nimport { config as shape } from 'blocks/Flowchart/ShapeExtract';\nimport { config as text } from 'blocks/General/Text';\n\nimport { Button } from 'elements/Block/Button';\n\nimport icon from './assets/icon.svg';\n\nexport const config: IConfigBase = {\n title: 'Extract',\n search: 'flowchart extract',\n type: 'flowchart-extract',\n group: ['Flowchart'],\n};\n\nexport const FlowchartExtract : IBlock = {\n type: config.type,\n block: () => null,\n element: {\n group: config.group,\n search: config.search,\n options: [],\n styles: [],\n constraints: {},\n onCreate: ({ file, position, parent, canvas }) => {\n const wrap = blocks[shape.type].element.onCreate({\n file,\n position,\n parent,\n auto: true,\n properties: {\n width: undefined,\n height: undefined,\n transparent: false,\n deletable: true,\n },\n });\n\n blocks[text.type].element.onCreate({\n file,\n position: [0, 0],\n parent: wrap,\n auto: canvas?.space ? false : undefined,\n preventComponentStatus: true,\n properties: {\n text: 'Extract
',\n },\n });\n\n return wrap;\n },\n onCopy: () => '',\n title: config.title,\n size: [102, 70],\n icon,\n class: {\n title: '',\n icon: '',\n },\n },\n button: {\n tool: () => ({\n render: ({ width, height, element }) => {\n const border = 2;\n const offset = border / 2;\n\n const x = Math.max(width - border, 0);\n const y = Math.max(height - border, 0);\n\n const points = [\n { c: 'M', x: x - border, y: offset + 15 },\n { c: 'H', x: offset + border },\n { c: 'M', x: offset + 15, y: offset + border },\n { c: 'V', y: y - border },\n { c: 'M', x: offset, y: offset },\n { c: 'H', x: x },\n { c: 'V', y: y },\n { c: 'H', x: offset },\n { c: 'V', y: offset },\n { c: 'Z' },\n ];\n\n return (\n \n \n );\n },\n});\n\nconst Padding = createPadding({\n size: [0, 0],\n padding: [1, 1, 1, 1],\n creator: () => {\n return [15, 15, 0, 0];\n },\n});\n\nconst Block = createBlock({\n memo: {\n key: config.memo.key,\n properties: config.memo.styles,\n },\n Render,\n Padding,\n});\n\nexport const FlowchartShapeInternalStorage : IBlock = {\n type: config.type,\n block: memo(Block),\n element: {\n group: config.group,\n search: config.search,\n styles: config.styles,\n options: block.element.options,\n constraints: {\n prevent: {\n ...block.element.constraints.prevent,\n\n render: [7, 8],\n },\n },\n onCreate: block.creator(config, {\n width: 64,\n height: 64,\n }),\n onCopy: block.copier(config),\n title: config.title,\n size: [64, 64],\n icon,\n class: block.element.class,\n },\n button: block.button(config),\n tools: ['shape-flowchart', ...block.tools],\n toolbars: block.toolbars,\n};\n","var _path;\n\nvar _excluded = [\"title\", \"titleId\"];\n\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport * as React from \"react\";\n\nfunction SvgIcon(_ref, svgRef) {\n var title = _ref.title,\n titleId = _ref.titleId,\n props = _objectWithoutProperties(_ref, _excluded);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 28,\n height: 28,\n viewBox: \"0 0 28 28\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M9 9H21C21.5523 9 22 9.44772 22 10V12M9 9H7C6.44772 9 6 9.44772 6 10V12M9 9V19M9 19H7C6.44772 19 6 18.5523 6 18V12M9 19H21C21.5523 19 22 18.5523 22 18V12M6 12H22\",\n stroke: \"#050022\",\n strokeWidth: 1.5,\n strokeLinejoin: \"round\"\n })));\n}\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(SvgIcon);\nexport default __webpack_public_path__ + \"static/media/icon.f46dba977983f65e695089d6a81282a8.svg\";\nexport { ForwardRef as ReactComponent };","import React from 'react';\nimport { blocks, IBlock, IConfigBase } from 'blocks';\n\nimport { config as shape } from 'blocks/Flowchart/ShapeInternalStorage';\nimport { config as text } from 'blocks/General/Text';\n\nimport { Button } from 'elements/Block/Button';\n\nimport icon from './assets/icon.svg';\n\nexport const config: IConfigBase = {\n title: 'Internal Storage',\n search: 'flowchart internal storage',\n type: 'flowchart-internal-storage',\n group: ['Flowchart'],\n};\n\nexport const FlowchartInternalStorage : IBlock = {\n type: config.type,\n block: () => null,\n element: {\n group: config.group,\n search: config.search,\n options: [],\n styles: [],\n constraints: {},\n onCreate: ({ file, position, parent, canvas }) => {\n const wrap = blocks[shape.type].element.onCreate({\n file,\n position,\n parent,\n auto: true,\n properties: {\n width: undefined,\n height: undefined,\n transparent: false,\n deletable: true,\n },\n });\n\n blocks[text.type].element.onCreate({\n file,\n position: [0, 0],\n parent: wrap,\n auto: canvas?.space ? false : undefined,\n preventComponentStatus: true,\n properties: {\n text: 'Internal Storage
',\n },\n });\n\n return wrap;\n },\n onCopy: () => '',\n title: config.title,\n size: [158, 64],\n icon,\n class: {\n title: '',\n icon: '',\n },\n },\n button: {\n tool: () => ({\n render: ({ width, height, element }) => {\n const border = 2;\n const offset = border / 2;\n\n const x = Math.max(width - border, 0);\n const y = Math.max(height - border, 0);\n\n const a = 18;\n\n const points = [\n { c: 'M', x: x, y: y },\n { c: 'L', x: offset, y: y },\n { c: 'L', x: offset, y: a },\n { c: 'L', x: a, y: offset },\n { c: 'L', x: x - a, y: offset },\n { c: 'L', x: x, y: a },\n { c: 'Z' },\n ];\n\n return (\n \n \n );\n },\n});\n\nconst Padding = createPadding({\n size: [0, 0],\n padding: [1, 1, 1, 1],\n creator: () => {\n return [5, 0, 5, 0];\n },\n});\n\nconst Block = createBlock({\n size: [44, 28],\n memo: {\n key: config.memo.key,\n properties: config.memo.styles,\n },\n Render,\n Padding,\n});\n\nexport const FlowchartShapeLoopLimit : IBlock = {\n type: config.type,\n block: memo(Block),\n element: {\n group: config.group,\n search: config.search,\n styles: config.styles,\n options: block.element.options,\n constraints: block.element.constraints,\n onCreate: block.creator(config, {\n width: 64,\n height: 64,\n }),\n onCopy: block.copier(config),\n title: config.title,\n size: [64, 64],\n icon,\n class: block.element.class,\n },\n button: block.button(config),\n tools: ['shape-flowchart', ...block.tools],\n toolbars: block.toolbars,\n};\n","var _path;\n\nvar _excluded = [\"title\", \"titleId\"];\n\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport * as React from \"react\";\n\nfunction SvgIcon(_ref, svgRef) {\n var title = _ref.title,\n titleId = _ref.titleId,\n props = _objectWithoutProperties(_ref, _excluded);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 28,\n height: 28,\n viewBox: \"0 0 28 28\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M21 19H7C6.44772 19 6 18.5523 6 18V12.4142C6 12.149 6.10536 11.8946 6.29289 11.7071L8.70711 9.29289C8.89464 9.10536 9.149 9 9.41421 9H18.5858C18.851 9 19.1054 9.10536 19.2929 9.29289L21.7071 11.7071C21.8946 11.8946 22 12.149 22 12.4142V18C22 18.5523 21.5523 19 21 19Z\",\n stroke: \"#050022\",\n strokeWidth: 1.5,\n strokeLinejoin: \"round\"\n })));\n}\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(SvgIcon);\nexport default __webpack_public_path__ + \"static/media/icon.626898ee6f9078d80500292b20b36322.svg\";\nexport { ForwardRef as ReactComponent };","import React from 'react';\nimport { blocks, IBlock, IConfigBase } from 'blocks';\n\nimport { config as shape } from 'blocks/Flowchart/ShapeLoopLimit';\nimport { config as text } from 'blocks/General/Text';\n\nimport { Button } from 'elements/Block/Button';\n\nimport icon from './assets/icon.svg';\n\nexport const config: IConfigBase = {\n title: 'Loop Limit',\n search: 'flowchart loop limit',\n type: 'flowchart-loop-limit',\n group: ['Flowchart'],\n};\n\nexport const FlowchartLoopLimit : IBlock = {\n type: config.type,\n block: () => null,\n element: {\n group: config.group,\n search: config.search,\n options: [],\n styles: [],\n constraints: {},\n onCreate: ({ file, position, parent, canvas }) => {\n const wrap = blocks[shape.type].element.onCreate({\n file,\n position,\n parent,\n auto: true,\n properties: {\n width: undefined,\n height: undefined,\n transparent: false,\n deletable: true,\n },\n });\n\n blocks[text.type].element.onCreate({\n file,\n position: [0, 0],\n parent: wrap,\n auto: canvas?.space ? false : undefined,\n preventComponentStatus: true,\n properties: {\n text: 'Loop Limit
',\n },\n });\n\n return wrap;\n },\n onCopy: () => '',\n title: config.title,\n size: [116, 50],\n icon,\n class: {\n title: '',\n icon: '',\n },\n },\n button: {\n tool: () => ({\n render: ({ width, height, element }) => {\n const border = 2;\n const offset = border / 2;\n\n const x = Math.max(width - offset, 0);\n const y = Math.max(height - offset, 0);\n\n const a = Math.min(x / 8, y - 14);\n\n const points = [\n { c: 'M', x: offset, y: y },\n { c: 'L', x: offset, y: offset + a },\n { c: 'L', x: x, y: offset },\n { c: 'L', x: x, y: y },\n { c: 'Z' },\n ];\n\n return (\n \n \n );\n },\n});\n\nconst Padding = createPadding({\n size: [1, 0],\n padding: [1, 0, 1, 1],\n creator: ({ width }) => {\n const a = Math.min(width / 8, width - 14);\n\n return [0, a, 0, 0];\n },\n});\n\nconst Block = createBlock({\n memo: {\n key: config.memo.key,\n properties: config.memo.styles,\n },\n Render,\n Padding,\n});\n\nexport const FlowchartShapeManualInput : IBlock = {\n type: config.type,\n block: memo(Block),\n element: {\n group: config.group,\n search: config.search,\n styles: config.styles,\n options: block.element.options,\n constraints: block.element.constraints,\n onCreate: block.creator(config, {\n width: 64,\n height: 64,\n }),\n onCopy: block.copier(config),\n title: config.title,\n size: [64, 64],\n icon,\n class: block.element.class,\n },\n button: block.button(config),\n tools: ['shape-flowchart', ...block.tools],\n toolbars: block.toolbars,\n};\n","var _path;\n\nvar _excluded = [\"title\", \"titleId\"];\n\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport * as React from \"react\";\n\nfunction SvgIcon(_ref, svgRef) {\n var title = _ref.title,\n titleId = _ref.titleId,\n props = _objectWithoutProperties(_ref, _excluded);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 28,\n height: 28,\n viewBox: \"0 0 28 28\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M6 18V11.3299C6 10.8487 6.34274 10.4357 6.81571 10.3471L20.8157 7.72205C21.4311 7.60666 22 8.07879 22 8.70493V18C22 18.5523 21.5523 19 21 19H7C6.44772 19 6 18.5523 6 18Z\",\n stroke: \"#050022\",\n strokeWidth: 1.5,\n strokeLinejoin: \"round\"\n })));\n}\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(SvgIcon);\nexport default __webpack_public_path__ + \"static/media/icon.551e568ab60afe7876c36002eff424fb.svg\";\nexport { ForwardRef as ReactComponent };","import React from 'react';\nimport { blocks, IBlock, IConfigBase } from 'blocks';\n\nimport { config as shape } from 'blocks/Flowchart/ShapeManualInput';\nimport { config as text } from 'blocks/General/Text';\n\nimport { Button } from 'elements/Block/Button';\n\nimport icon from './assets/icon.svg';\n\nexport const config: IConfigBase = {\n title: 'Manual Input',\n search: 'flowchart manual input',\n type: 'flowchart-manual-input',\n group: ['Flowchart'],\n};\n\nexport const FlowchartManualInput : IBlock = {\n type: config.type,\n block: () => null,\n element: {\n group: config.group,\n search: config.search,\n options: [],\n styles: [],\n constraints: {},\n onCreate: ({ file, position, parent, canvas }) => {\n const wrap = blocks[shape.type].element.onCreate({\n file,\n position,\n parent,\n auto: true,\n properties: {\n width: undefined,\n height: undefined,\n transparent: false,\n deletable: true,\n },\n });\n\n blocks[text.type].element.onCreate({\n file,\n position: [0, 0],\n parent: wrap,\n auto: canvas?.space ? false : undefined,\n preventComponentStatus: true,\n properties: {\n text: 'Manual Input
',\n },\n });\n\n return wrap;\n },\n onCopy: () => '',\n title: config.title,\n size: [124, 66],\n icon,\n class: {\n title: '',\n icon: '',\n },\n },\n button: {\n tool: () => ({\n render: ({ width, height, element }) => {\n const border = 2;\n const offset = border / 2;\n\n const x = Math.max(width - offset, 0);\n const y = Math.max(height - offset, 0);\n\n let a = (14 / 64) * y;\n\n if ((x / 2 - 8) / y <= 14 / 64) {\n a = x / 2 - 8;\n }\n\n const points = [\n { c: 'M', x: offset + a, y: y },\n { c: 'L', x: offset, y: offset },\n { c: 'L', x: x, y: offset },\n { c: 'L', x: x - a, y: y },\n { c: 'Z' },\n ];\n\n return (\n \n \n );\n },\n});\n\nconst Padding = createPadding({\n size: [0, 1],\n padding: [0, 1, 0, 1],\n creator: ({ height }) => {\n const a = (14 / 64) * height - 2;\n\n return [a, 0, a, 0];\n },\n});\n\nconst Block = createBlock({\n memo: {\n key: config.memo.key,\n properties: config.memo.styles,\n },\n Render,\n Padding,\n});\n\nexport const FlowchartShapeManualOperation : IBlock = {\n type: config.type,\n block: memo(Block),\n element: {\n group: config.group,\n search: config.search,\n styles: config.styles,\n options: block.element.options,\n constraints: block.element.constraints,\n onCreate: block.creator(config, {\n width: 88,\n height: 64,\n }),\n onCopy: block.copier(config),\n title: config.title,\n size: [88, 64],\n icon,\n class: block.element.class,\n },\n button: block.button(config),\n tools: ['shape-flowchart', ...block.tools],\n toolbars: block.toolbars,\n};\n","var _path;\n\nvar _excluded = [\"title\", \"titleId\"];\n\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport * as React from \"react\";\n\nfunction SvgIcon(_ref, svgRef) {\n var title = _ref.title,\n titleId = _ref.titleId,\n props = _objectWithoutProperties(_ref, _excluded);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 28,\n height: 28,\n viewBox: \"0 0 28 28\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M8.81063 19.2425L6.31063 9.24254C6.15285 8.61139 6.6302 8 7.28078 8H20.7192C21.3698 8 21.8472 8.61139 21.6894 9.24253L19.1894 19.2425C19.0781 19.6877 18.6781 20 18.2192 20H9.78078C9.32191 20 8.92193 19.6877 8.81063 19.2425Z\",\n stroke: \"#050022\",\n strokeWidth: 1.5,\n strokeLinejoin: \"round\"\n })));\n}\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(SvgIcon);\nexport default __webpack_public_path__ + \"static/media/icon.dcbdd546fde4796278467ec997b6666c.svg\";\nexport { ForwardRef as ReactComponent };","import React from 'react';\nimport { blocks, IBlock, IConfigBase } from 'blocks';\n\nimport { config as shape } from 'blocks/Flowchart/ShapeManualOperation';\nimport { config as text } from 'blocks/General/Text';\n\nimport { Button } from 'elements/Block/Button';\n\nimport icon from './assets/icon.svg';\n\nexport const config: IConfigBase = {\n title: 'Manual Operation',\n search: 'flowchart manual operation',\n type: 'flowchart-manual-operation',\n group: ['Flowchart'],\n};\n\nexport const FlowchartManualOperation : IBlock = {\n type: config.type,\n block: () => null,\n element: {\n group: config.group,\n search: config.search,\n options: [],\n styles: [],\n constraints: {},\n onCreate: ({ file, position, parent, canvas }) => {\n const wrap = blocks[shape.type].element.onCreate({\n file,\n position,\n parent,\n auto: true,\n properties: {\n width: undefined,\n height: undefined,\n transparent: false,\n deletable: true,\n },\n });\n\n blocks[text.type].element.onCreate({\n file,\n position: [0, 0],\n parent: wrap,\n auto: canvas?.space ? false : undefined,\n preventComponentStatus: true,\n properties: {\n text: 'Manual Operation
',\n },\n });\n\n return wrap;\n },\n onCopy: () => '',\n title: config.title,\n size: [174, 50],\n icon,\n class: {\n title: '',\n icon: '',\n },\n },\n button: {\n tool: () => ({\n render: ({ width, height, element }) => {\n const border = 2;\n const offset = border / 2;\n\n const x = Math.max(width - offset, 0);\n const y = Math.max(height - offset, 0);\n\n const points = [\n { c: 'M', x: offset, y: offset },\n { c: 'L', x: x / 2, y: y },\n { c: 'L', x: x, y: offset },\n { c: 'Z' },\n ];\n\n return (\n \n \n );\n },\n});\n\nconst Padding = createPadding({\n size: [1, 0],\n padding: [1, 1, 1, 0],\n creator: ({ width }) => {\n const a = width * 0.2;\n\n return [10, 0, 10, a];\n },\n});\n\nconst Block = createBlock({\n memo: {\n key: config.memo.key,\n properties: config.memo.styles,\n },\n Render,\n Padding,\n});\n\nexport const FlowchartShapeMerge : IBlock = {\n type: config.type,\n block: memo(Block),\n element: {\n group: config.group,\n search: config.search,\n styles: config.styles,\n options: block.element.options,\n constraints: block.element.constraints,\n onCreate: block.creator(config, {\n width: 88,\n height: 64,\n }),\n onCopy: block.copier(config),\n title: config.title,\n size: [88, 64],\n icon,\n class: block.element.class,\n },\n button: block.button(config),\n tools: ['shape-flowchart', ...block.tools],\n toolbars: block.toolbars,\n};\n","var _path;\n\nvar _excluded = [\"title\", \"titleId\"];\n\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport * as React from \"react\";\n\nfunction SvgIcon(_ref, svgRef) {\n var title = _ref.title,\n titleId = _ref.titleId,\n props = _objectWithoutProperties(_ref, _excluded);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 28,\n height: 28,\n viewBox: \"0 0 28 28\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M6.78431 8.59559L13.1176 20.4706C13.4941 21.1765 14.5059 21.1765 14.8824 20.4706L21.2157 8.59559C21.5709 7.92948 21.0883 7.125 20.3333 7.125H7.66666C6.91174 7.125 6.42905 7.92948 6.78431 8.59559Z\",\n stroke: \"#050022\",\n strokeWidth: 1.5,\n strokeLinejoin: \"round\"\n })));\n}\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(SvgIcon);\nexport default __webpack_public_path__ + \"static/media/icon.86935db290fbf8d0295551b87030d94b.svg\";\nexport { ForwardRef as ReactComponent };","import React from 'react';\nimport { blocks, IBlock, IConfigBase } from 'blocks';\n\nimport { config as shape } from 'blocks/Flowchart/ShapeMerge';\nimport { config as text } from 'blocks/General/Text';\n\nimport { Button } from 'elements/Block/Button';\n\nimport icon from './assets/icon.svg';\n\nexport const config: IConfigBase = {\n title: 'Merge',\n search: 'flowchart merge',\n type: 'flowchart-merge',\n group: ['Flowchart'],\n};\n\nexport const FlowchartMerge : IBlock = {\n type: config.type,\n block: () => null,\n element: {\n group: config.group,\n search: config.search,\n options: [],\n styles: [],\n constraints: {},\n onCreate: ({ file, position, parent, canvas }) => {\n const wrap = blocks[shape.type].element.onCreate({\n file,\n position,\n parent,\n auto: true,\n properties: {\n width: undefined,\n height: undefined,\n transparent: false,\n deletable: true,\n },\n });\n\n blocks[text.type].element.onCreate({\n file,\n position: [0, 0],\n parent: wrap,\n auto: canvas?.space ? false : undefined,\n preventComponentStatus: true,\n properties: {\n text: 'Merge
',\n },\n });\n\n return wrap;\n },\n onCopy: () => '',\n title: config.title,\n size: [96, 68],\n icon,\n class: {\n title: '',\n icon: '',\n },\n },\n button: {\n tool: () => ({\n render: ({ width, height, element }) => {\n const border = 2;\n const offset = border / 2;\n\n const b = 8;\n const x = Math.max(width - offset, 0);\n const y = Math.max(height - offset, 0);\n\n const a = Math.min(x, y * 3.2) / 64;\n\n const points = [\n { c: 'M', x: b + offset, y: b + offset },\n { c: 'L', x: b + x, y: b + offset },\n { c: 'L', x: b + x, y: b + y },\n { c: 'C', x1: b + (59 / 64) * x, y1: b + y - a * 5, x2: b + (53 / 64) * x, y2: b + y - a * 8, x: b + (46 / 64) * x, y: b + y - a * 8 },\n { c: 'C', x1: b + (35 / 64) * x, y1: b + y - a * 8, x2: b + (30 / 64) * x, y2: b + y, x: b + (20 / 64) * x, y: b + y },\n { c: 'C', x1: b + (11 / 64) * x, y1: b + y, x2: b + (5 / 64) * x, y2: b + y - a * 4, x: b + offset, y: b + y - a * 10 },\n { c: 'L', x: b + offset, y: b + offset },\n { c: 'L', x: b + offset, y: b + offset },\n { c: 'M', x: offset + b, y: y - a * 10 },\n { c: 'C', x1: offset + b, y1: y - a * 10, x2: offset + 1, y2: y - a * 10 - b + 2, x: offset, y: y - a * 10 - b },\n { c: 'L', x: offset, y: offset },\n { c: 'L', x: x, y: offset },\n { c: 'L', x: x, y: offset + b },\n ];\n\n return (\n \n );\n },\n});\n\nconst Padding = createPadding({\n size: [1, 0],\n padding: [1, 1, 1, 0],\n creator: ({ width }) => {\n const a = Math.min(width / 8, width - 14);\n\n return [0, 0, 0, a];\n },\n});\n\nconst Block = createBlock({\n memo: {\n key: config.memo.key,\n properties: config.memo.styles,\n },\n Render,\n Padding,\n});\n\nexport const FlowchartShapeMultipleDocuments : IBlock = {\n type: config.type,\n block: memo(Block),\n element: {\n group: config.group,\n search: config.search,\n styles: config.styles,\n options: block.element.options,\n constraints: {\n prevent: {\n ...block.element.constraints.prevent,\n\n render: [7, 8],\n },\n },\n onCreate: block.creator(config, {\n width: 64,\n height: 64,\n }),\n onCopy: block.copier(config),\n title: config.title,\n size: [64, 64],\n icon,\n class: block.element.class,\n },\n button: block.button(config),\n tools: ['shape-flowchart', ...block.tools],\n toolbars: block.toolbars,\n};\n","var _path, _path2;\n\nvar _excluded = [\"title\", \"titleId\"];\n\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport * as React from \"react\";\n\nfunction SvgIcon(_ref, svgRef) {\n var title = _ref.title,\n titleId = _ref.titleId,\n props = _objectWithoutProperties(_ref, _excluded);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 28,\n height: 28,\n viewBox: \"0 0 28 28\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M6 17V9.99713C6 9.44485 6.44772 9 7 9H21C21.5523 9 22 9.44772 22 10V19C22 19 21 17 18 17C15 17 13 20 10 20C7 20 6 18 6 17Z\",\n stroke: \"#050022\",\n strokeWidth: 1.5,\n strokeLinejoin: \"round\"\n })), _path2 || (_path2 = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M3.5 16.5V8.5C3.5 7.39543 4.39543 6.5 5.5 6.5H20.5\",\n stroke: \"#050022\",\n strokeWidth: 1.5,\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\"\n })));\n}\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(SvgIcon);\nexport default __webpack_public_path__ + \"static/media/icon.c509faef4de18eda4bb62940f813d18c.svg\";\nexport { ForwardRef as ReactComponent };","import React from 'react';\nimport { blocks, IBlock, IConfigBase } from 'blocks';\n\nimport { config as shape } from 'blocks/Flowchart/ShapeMultipleDocuments';\nimport { config as text } from 'blocks/General/Text';\n\nimport { Button } from 'elements/Block/Button';\n\nimport icon from './assets/icon.svg';\n\nexport const config: IConfigBase = {\n title: 'Multiple Documents',\n search: 'flowchart multiple documents',\n type: 'flowchart-multiple-documents',\n group: ['Flowchart'],\n};\n\nexport const FlowchartMultipleDocuments : IBlock = {\n type: config.type,\n block: () => null,\n element: {\n group: config.group,\n search: config.search,\n options: [],\n styles: [],\n constraints: {},\n onCreate: ({ file, position, parent, canvas }) => {\n const wrap = blocks[shape.type].element.onCreate({\n file,\n position,\n parent,\n auto: true,\n properties: {\n width: undefined,\n height: undefined,\n transparent: false,\n deletable: true,\n },\n });\n\n blocks[text.type].element.onCreate({\n file,\n position: [0, 0],\n parent: wrap,\n auto: canvas?.space ? false : undefined,\n preventComponentStatus: true,\n properties: {\n text: 'Multiple Documents
',\n },\n });\n\n return wrap;\n },\n onCopy: () => '',\n title: config.title,\n size: [172, 70],\n icon,\n class: {\n title: '',\n icon: '',\n },\n },\n button: {\n tool: () => ({\n render: ({ width, height, element }) => {\n const border = 2;\n const offset = border / 2;\n\n const x = Math.max(width - offset, 0);\n const y = Math.max(height - offset, 0);\n\n const a = Math.min(x / 5, y - 14);\n\n const points = [\n { c: 'M', x: offset, y: y - a },\n { c: 'L', x: offset, y: offset },\n { c: 'L', x: x, y: offset },\n { c: 'L', x: x, y: y - a },\n { c: 'L', x: x / 2, y: y },\n { c: 'Z' },\n ];\n\n return (\n \n \n );\n },\n});\n\nconst Padding = createPadding({\n size: [1, 0],\n padding: [1, 1, 1, 0],\n creator: ({ width }) => {\n const a = Math.min(width / 5, width - 14);\n\n return [0, 0, 0, a - 4];\n },\n});\n\nconst Block = createBlock({\n memo: {\n key: config.memo.key,\n properties: config.memo.styles,\n },\n Render,\n Padding,\n});\n\nexport const FlowchartShapeOffPageConnector : IBlock = {\n type: config.type,\n block: memo(Block),\n element: {\n group: config.group,\n search: config.search,\n styles: config.styles,\n options: block.element.options,\n constraints: block.element.constraints,\n onCreate: block.creator(config, {\n width: 64,\n height: 64,\n }),\n onCopy: block.copier(config),\n title: config.title,\n size: [64, 64],\n icon,\n class: block.element.class,\n },\n button: block.button(config),\n tools: ['shape-flowchart', ...block.tools],\n toolbars: block.toolbars,\n};\n","var _path;\n\nvar _excluded = [\"title\", \"titleId\"];\n\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport * as React from \"react\";\n\nfunction SvgIcon(_ref, svgRef) {\n var title = _ref.title,\n titleId = _ref.titleId,\n props = _objectWithoutProperties(_ref, _excluded);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 28,\n height: 28,\n viewBox: \"0 0 28 28\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M6 15.4458V9C6 8.44772 6.44772 8 7 8H21C21.5523 8 22 8.44772 22 9V15.4458C22 15.7905 21.8224 16.111 21.53 16.2938L14.53 20.6688C14.2057 20.8714 13.7943 20.8714 13.47 20.6688L6.47 16.2938C6.17762 16.111 6 15.7905 6 15.4458Z\",\n stroke: \"#050022\",\n strokeWidth: 1.5,\n strokeLinejoin: \"round\"\n })));\n}\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(SvgIcon);\nexport default __webpack_public_path__ + \"static/media/icon.7ddf59a0422e2d3630101e1b89a98871.svg\";\nexport { ForwardRef as ReactComponent };","import React from 'react';\nimport { blocks, IBlock, IConfigBase } from 'blocks';\n\nimport { config as shape } from 'blocks/Flowchart/ShapeOffPageConnector';\nimport { config as text } from 'blocks/General/Text';\n\nimport { Button } from 'elements/Block/Button';\n\nimport icon from './assets/icon.svg';\n\nexport const config: IConfigBase = {\n title: 'Off-Page Connector',\n search: 'flowchart off page connector',\n type: 'flowchart-off-page-connector',\n group: ['Flowchart'],\n};\n\nexport const FlowchartOffPageConnector : IBlock = {\n type: config.type,\n block: () => null,\n element: {\n group: config.group,\n search: config.search,\n options: [],\n styles: [],\n constraints: {},\n onCreate: ({ file, position, parent, canvas }) => {\n const wrap = blocks[shape.type].element.onCreate({\n file,\n position,\n parent,\n auto: true,\n properties: {\n width: undefined,\n height: undefined,\n transparent: false,\n deletable: true,\n },\n });\n\n blocks[text.type].element.onCreate({\n file,\n position: [0, 0],\n parent: wrap,\n auto: canvas?.space ? false : undefined,\n preventComponentStatus: true,\n properties: {\n text: 'Off-Page Connector
',\n },\n });\n\n return wrap;\n },\n onCopy: () => '',\n title: config.title,\n size: [166, 78],\n icon,\n class: {\n title: '',\n icon: '',\n },\n },\n button: {\n tool: () => = Omit & Partial>;\n\ninterface IBlockConfig {\n memo: {\n key: string;\n properties: string[];\n };\n Render: ComponentType>>;\n symmetrically?: boolean;\n}\n\nexport const createBlock =