+
+ 
+
+
+
+ )
+}
+```
+
+import Callout from 'nextra-theme-docs/callout'
+
+
+
+ )
+}
+```
+
+import Callout from 'nextra-theme-docs/callout'
+
+
+
+ )
+}
+```
+
+import Callout from 'nextra-theme-docs/callout'
+
+
+
+ )
+}
+```
+
+import Callout from 'nextra-theme-docs/callout'
+
+
+
+ )
+}
+```
+
+import Callout from 'nextra-theme-docs/callout'
+
+
+
+ )
+}
+```
+
+import Callout from 'nextra-theme-docs/callout'
+
+
+ {loaded ? <>{children} :
+ )
+}
+
+export default Container
diff --git a/example/src/Providers.tsx b/example/src/Providers.tsx
new file mode 100644
index 0000000..f0869ed
--- /dev/null
+++ b/example/src/Providers.tsx
@@ -0,0 +1,22 @@
+import * as React from 'react'
+import { FC } from 'react'
+import { Client as Styletron } from 'styletron-engine-atomic'
+import { Provider as StyletronProvider } from 'styletron-react'
+import { LightTheme, BaseProvider } from 'baseui'
+import { EditorProvider } from '../../src'
+import { AppProvider } from './contexts/AppContext'
+const engine = new Styletron()
+
+const Providers: FC = ({ children }) => {
+ return (
+
+
+
+ )
+}
+
+export default Loading
diff --git a/example/src/components/Loading/index.ts b/example/src/components/Loading/index.ts
new file mode 100644
index 0000000..cff6dc4
--- /dev/null
+++ b/example/src/components/Loading/index.ts
@@ -0,0 +1,3 @@
+import Loading from "./Loading";
+
+export default Loading
\ No newline at end of file
diff --git a/example/src/components/icons/Background.tsx b/example/src/components/icons/Background.tsx
new file mode 100644
index 0000000..efa60f1
--- /dev/null
+++ b/example/src/components/icons/Background.tsx
@@ -0,0 +1,13 @@
+import * as React from 'react'
+function Background({ size }: { size: number }) {
+ return (
+
+ )
+}
+
+export default Background
diff --git a/example/src/components/icons/Elements.tsx b/example/src/components/icons/Elements.tsx
new file mode 100644
index 0000000..be219a8
--- /dev/null
+++ b/example/src/components/icons/Elements.tsx
@@ -0,0 +1,16 @@
+import * as React from 'react'
+function Elements({ size }: { size: number }) {
+ return (
+
+ )
+}
+
+export default Elements
diff --git a/example/src/components/icons/Illustrations.tsx b/example/src/components/icons/Illustrations.tsx
new file mode 100644
index 0000000..15a9f08
--- /dev/null
+++ b/example/src/components/icons/Illustrations.tsx
@@ -0,0 +1,13 @@
+import * as React from 'react'
+function Illustrations({ size }: { size: number }) {
+ return (
+
+ )
+}
+
+export default Illustrations
diff --git a/example/src/components/icons/Images.tsx b/example/src/components/icons/Images.tsx
new file mode 100644
index 0000000..3333aff
--- /dev/null
+++ b/example/src/components/icons/Images.tsx
@@ -0,0 +1,13 @@
+import * as React from 'react'
+function Images({ size }: { size: number }) {
+ return (
+
+ )
+}
+
+export default Images
diff --git a/example/src/components/icons/Logo.tsx b/example/src/components/icons/Logo.tsx
new file mode 100644
index 0000000..cee32d8
--- /dev/null
+++ b/example/src/components/icons/Logo.tsx
@@ -0,0 +1,33 @@
+import * as React from 'react'
+function Logo({ size }: { size: number }) {
+ return (
+
+ )
+}
+
+export default Logo
diff --git a/example/src/components/icons/Search.tsx b/example/src/components/icons/Search.tsx
new file mode 100644
index 0000000..ba9e6b3
--- /dev/null
+++ b/example/src/components/icons/Search.tsx
@@ -0,0 +1,13 @@
+import * as React from 'react'
+function Search({ size }: { size: number }) {
+ return (
+
+ )
+}
+
+export default Search
diff --git a/example/src/components/icons/Templates.tsx b/example/src/components/icons/Templates.tsx
new file mode 100644
index 0000000..f64b0b3
--- /dev/null
+++ b/example/src/components/icons/Templates.tsx
@@ -0,0 +1,14 @@
+import * as React from 'react'
+function Templates({ size }: { size: number }) {
+ return (
+
+ )
+}
+
+export default Templates
diff --git a/example/src/components/icons/Text.tsx b/example/src/components/icons/Text.tsx
new file mode 100644
index 0000000..9c086f9
--- /dev/null
+++ b/example/src/components/icons/Text.tsx
@@ -0,0 +1,13 @@
+import * as React from 'react'
+function Text({ size }: { size: number }) {
+ return (
+
+ )
+}
+export default Text
diff --git a/example/src/components/icons/Uploads.tsx b/example/src/components/icons/Uploads.tsx
new file mode 100644
index 0000000..04711a3
--- /dev/null
+++ b/example/src/components/icons/Uploads.tsx
@@ -0,0 +1,13 @@
+import * as React from 'react'
+function Uploads({ size }: { size: number }) {
+ return (
+
+ )
+}
+
+export default Uploads
diff --git a/example/src/components/icons/index.ts b/example/src/components/icons/index.ts
new file mode 100644
index 0000000..75ca6e1
--- /dev/null
+++ b/example/src/components/icons/index.ts
@@ -0,0 +1,18 @@
+import Background from './Background'
+import Elements from './Elements'
+import Text from './Text'
+import Templates from './Templates'
+import Search from './Search'
+import Images from './Images'
+import Illustrations from './Illustrations'
+class Icons {
+ static Background = Background
+ static Elements = Elements
+ static Text = Text
+ static Templates = Templates
+ static Search = Search
+ static Images = Images
+ static Illustrations = Illustrations
+}
+
+export default Icons
diff --git a/example/src/constants/app-options.ts b/example/src/constants/app-options.ts
new file mode 100644
index 0000000..aaf7ca8
--- /dev/null
+++ b/example/src/constants/app-options.ts
@@ -0,0 +1,31 @@
+export const panelListItems = [
+ {
+ id: 'templates',
+ name: 'Templates',
+ },
+ {
+ id: 'elements',
+ name: 'Elements',
+ },
+ {
+ id: 'image',
+ name: 'Images',
+ },
+ {
+ id: 'text',
+ name: 'Text',
+ },
+ {
+ id: 'illustrations',
+ name: 'Illustrations',
+ },
+ {
+ id: 'background',
+ name: 'Background',
+ },
+]
+
+export enum PanelType {
+ TEMPLATES = 'Templates',
+ BACKGROUND = 'Background',
+}
diff --git a/example/src/constants/contants.ts b/example/src/constants/contants.ts
new file mode 100644
index 0000000..48c9cac
--- /dev/null
+++ b/example/src/constants/contants.ts
@@ -0,0 +1 @@
+export const propertiesToInclude = ['id', 'selectable']
diff --git a/example/src/constants/editor.ts b/example/src/constants/editor.ts
new file mode 100644
index 0000000..25b61b0
--- /dev/null
+++ b/example/src/constants/editor.ts
@@ -0,0 +1,9 @@
+export const SecondLevelMenus = ['FontFamily']
+export const FirstLevelMenus = ['Background']
+
+export enum SubMenuType {
+ FONT_FAMILY = 'FontFamily',
+ BACKGROUND = 'Background',
+ COLOR = 'Color',
+ ANIMATIONS = 'Animations'
+}
diff --git a/example/src/constants/fonts.ts b/example/src/constants/fonts.ts
new file mode 100644
index 0000000..54f15e0
--- /dev/null
+++ b/example/src/constants/fonts.ts
@@ -0,0 +1,887 @@
+import { IFontFamily } from '../common/interfaces'
+
+export const editorFonts = ([
+ {
+ family: 'ABeeZee',
+ variants: ['regular', 'italic'],
+ subsets: ['latin'],
+ version: 'v14',
+ lastModified: '2020-09-02',
+ files: {
+ regular: 'http://fonts.gstatic.com/s/abeezee/v14/esDR31xSG-6AGleN6tKukbcHCpE.ttf',
+ italic: 'http://fonts.gstatic.com/s/abeezee/v14/esDT31xSG-6AGleN2tCklZUCGpG-GQ.ttf'
+ },
+ category: 'sans-serif',
+ kind: 'webfonts#webfont',
+ id: 'XlkY15br4YAcR5t4XkOLbqMa'
+ },
+ {
+ family: 'Abel',
+ variants: ['regular'],
+ subsets: ['latin'],
+ version: 'v12',
+ lastModified: '2020-09-10',
+ files: {
+ regular: 'http://fonts.gstatic.com/s/abel/v12/MwQ5bhbm2POE6VhLPJp6qGI.ttf'
+ },
+ category: 'sans-serif',
+ kind: 'webfonts#webfont',
+ id: '8scXWwSI9TCSHsrYS10BnvVd'
+ },
+ {
+ family: 'Abhaya Libre',
+ variants: ['regular', '500', '600', '700', '800'],
+ subsets: ['latin', 'latin-ext', 'sinhala'],
+ version: 'v6',
+ lastModified: '2020-09-02',
+ files: {
+ '500': 'http://fonts.gstatic.com/s/abhayalibre/v6/e3t5euGtX-Co5MNzeAOqinEYj2ryqtxI6oYtBA.ttf',
+ '600': 'http://fonts.gstatic.com/s/abhayalibre/v6/e3t5euGtX-Co5MNzeAOqinEYo23yqtxI6oYtBA.ttf',
+ '700': 'http://fonts.gstatic.com/s/abhayalibre/v6/e3t5euGtX-Co5MNzeAOqinEYx2zyqtxI6oYtBA.ttf',
+ '800': 'http://fonts.gstatic.com/s/abhayalibre/v6/e3t5euGtX-Co5MNzeAOqinEY22_yqtxI6oYtBA.ttf',
+ regular: 'http://fonts.gstatic.com/s/abhayalibre/v6/e3tmeuGtX-Co5MNzeAOqinEge0PWovdU4w.ttf'
+ },
+ category: 'serif',
+ kind: 'webfonts#webfont',
+ id: '4yllXEs7lVlXuC5EDWcpSO7V'
+ },
+ {
+ family: 'Abril Fatface',
+ variants: ['regular'],
+ subsets: ['latin', 'latin-ext'],
+ version: 'v12',
+ lastModified: '2020-09-02',
+ files: {
+ regular: 'http://fonts.gstatic.com/s/abrilfatface/v12/zOL64pLDlL1D99S8g8PtiKchm-BsjOLhZBY.ttf'
+ },
+ category: 'display',
+ kind: 'webfonts#webfont',
+ id: 'LAVPVVaQbPAS5XjpQDbXYWR6'
+ },
+ {
+ family: 'Aclonica',
+ variants: ['regular'],
+ subsets: ['latin'],
+ version: 'v11',
+ lastModified: '2020-09-02',
+ files: {
+ regular: 'http://fonts.gstatic.com/s/aclonica/v11/K2FyfZJVlfNNSEBXGb7TCI6oBjLz.ttf'
+ },
+ category: 'sans-serif',
+ kind: 'webfonts#webfont',
+ id: 'AxM9S32XRblijwyz1DtpnjhY'
+ },
+ {
+ family: 'Acme',
+ variants: ['regular'],
+ subsets: ['latin'],
+ version: 'v11',
+ lastModified: '2020-10-22',
+ files: {
+ regular: 'http://fonts.gstatic.com/s/acme/v11/RrQfboBx-C5_bx3Lb23lzLk.ttf'
+ },
+ category: 'sans-serif',
+ kind: 'webfonts#webfont',
+ id: 'QgIstLeC4d8s_PF5Xd8dkqTM'
+ },
+ {
+ family: 'Actor',
+ variants: ['regular'],
+ subsets: ['latin'],
+ version: 'v10',
+ lastModified: '2020-09-02',
+ files: {
+ regular: 'http://fonts.gstatic.com/s/actor/v10/wEOzEBbCkc5cO3ekXygtUMIO.ttf'
+ },
+ category: 'sans-serif',
+ kind: 'webfonts#webfont',
+ id: 'xIYnUtn9yQ3DOtF7QLhqnzmN'
+ },
+ {
+ family: 'Adamina',
+ variants: ['regular'],
+ subsets: ['latin'],
+ version: 'v14',
+ lastModified: '2020-09-02',
+ files: {
+ regular: 'http://fonts.gstatic.com/s/adamina/v14/j8_r6-DH1bjoc-dwu-reETl4Bno.ttf'
+ },
+ category: 'serif',
+ kind: 'webfonts#webfont',
+ id: '_Mnig6JlzNfT2gEJ4Y9LP89Q'
+ },
+ {
+ family: 'Advent Pro',
+ variants: ['100', '200', '300', 'regular', '500', '600', '700'],
+ subsets: ['greek', 'latin', 'latin-ext'],
+ version: 'v11',
+ lastModified: '2020-09-02',
+ files: {
+ '100': 'http://fonts.gstatic.com/s/adventpro/v11/V8mCoQfxVT4Dvddr_yOwjVmtLZxcBtItFw.ttf',
+ '200': 'http://fonts.gstatic.com/s/adventpro/v11/V8mDoQfxVT4Dvddr_yOwjfWMDbZyCts0DqQ.ttf',
+ '300': 'http://fonts.gstatic.com/s/adventpro/v11/V8mDoQfxVT4Dvddr_yOwjZGPDbZyCts0DqQ.ttf',
+ '500': 'http://fonts.gstatic.com/s/adventpro/v11/V8mDoQfxVT4Dvddr_yOwjcmODbZyCts0DqQ.ttf',
+ '600': 'http://fonts.gstatic.com/s/adventpro/v11/V8mDoQfxVT4Dvddr_yOwjeWJDbZyCts0DqQ.ttf',
+ '700': 'http://fonts.gstatic.com/s/adventpro/v11/V8mDoQfxVT4Dvddr_yOwjYGIDbZyCts0DqQ.ttf',
+ regular: 'http://fonts.gstatic.com/s/adventpro/v11/V8mAoQfxVT4Dvddr_yOwtT2nKb5ZFtI.ttf'
+ },
+ category: 'sans-serif',
+ kind: 'webfonts#webfont',
+ id: 'OEjH4UArZ0tMpUlGPctLvYuT'
+ },
+ {
+ family: 'Aguafina Script',
+ variants: ['regular'],
+ subsets: ['latin', 'latin-ext'],
+ version: 'v9',
+ lastModified: '2020-07-23',
+ files: {
+ regular: 'http://fonts.gstatic.com/s/aguafinascript/v9/If2QXTv_ZzSxGIO30LemWEOmt1bHqs4pgicOrg.ttf'
+ },
+ category: 'handwriting',
+ kind: 'webfonts#webfont',
+ id: 'efJfnAlLK1Z2PnhrQKOhG2n7'
+ },
+ {
+ family: 'Akaya Kanadaka',
+ variants: ['regular'],
+ subsets: ['kannada', 'latin', 'latin-ext'],
+ version: 'v4',
+ lastModified: '2021-03-24',
+ files: {
+ regular: 'http://fonts.gstatic.com/s/akayakanadaka/v4/N0bM2S5CPO5oOQqvazoRRb-8-PfRS5VBBSSF.ttf'
+ },
+ category: 'display',
+ kind: 'webfonts#webfont',
+ id: 'OB3Qf9cBFhsWPhYJTz5_Y_G5'
+ },
+ {
+ family: 'Akaya Telivigala',
+ variants: ['regular'],
+ subsets: ['latin', 'latin-ext', 'telugu'],
+ version: 'v13',
+ lastModified: '2021-07-01',
+ files: {
+ regular: 'http://fonts.gstatic.com/s/akayatelivigala/v13/lJwc-oo_iG9wXqU3rCTD395tp0uifdLdsIH0YH8.ttf'
+ },
+ category: 'display',
+ kind: 'webfonts#webfont',
+ id: 'SbH_scxtOIXhEDvsFKHG_n6g'
+ },
+ {
+ family: 'Akronim',
+ variants: ['regular'],
+ subsets: ['latin', 'latin-ext'],
+ version: 'v12',
+ lastModified: '2021-03-19',
+ files: {
+ regular: 'http://fonts.gstatic.com/s/akronim/v12/fdN-9sqWtWZZlHRp-gBxkFYN-a8.ttf'
+ },
+ category: 'display',
+ kind: 'webfonts#webfont',
+ id: 'q7Yzt5p1GYumb79TSnwN2BIT'
+ },
+ {
+ family: 'Aladin',
+ variants: ['regular'],
+ subsets: ['latin', 'latin-ext'],
+ version: 'v9',
+ lastModified: '2020-07-23',
+ files: {
+ regular: 'http://fonts.gstatic.com/s/aladin/v9/ZgNSjPJFPrvJV5f16Sf4pGT2Ng.ttf'
+ },
+ category: 'handwriting',
+ kind: 'webfonts#webfont',
+ id: '0GeK50POPDZgOiIQO4KBSVqQ'
+ },
+ {
+ family: 'Alata',
+ variants: ['regular'],
+ subsets: ['latin', 'latin-ext', 'vietnamese'],
+ version: 'v2',
+ lastModified: '2020-07-23',
+ files: {
+ regular: 'http://fonts.gstatic.com/s/alata/v2/PbytFmztEwbIofe6xKcRQEOX.ttf'
+ },
+ category: 'sans-serif',
+ kind: 'webfonts#webfont',
+ id: 'AqaSuLdqsHNu0gP1GP_oeQa9'
+ },
+ {
+ family: 'Alatsi',
+ variants: ['regular'],
+ subsets: ['latin', 'latin-ext', 'vietnamese'],
+ version: 'v2',
+ lastModified: '2020-07-23',
+ files: {
+ regular: 'http://fonts.gstatic.com/s/alatsi/v2/TK3iWkUJAxQ2nLNGHjUHte5fKg.ttf'
+ },
+ category: 'sans-serif',
+ kind: 'webfonts#webfont',
+ id: 'XHZ8LjaOCuCwR5NGjNWGZYxj'
+ },
+ {
+ family: 'Aldrich',
+ variants: ['regular'],
+ subsets: ['latin'],
+ version: 'v11',
+ lastModified: '2020-09-02',
+ files: {
+ regular: 'http://fonts.gstatic.com/s/aldrich/v11/MCoTzAn-1s3IGyJMZaAS3pP5H_E.ttf'
+ },
+ category: 'sans-serif',
+ kind: 'webfonts#webfont',
+ id: 'UQsCEpD9MbWatsslBDDELfIH'
+ },
+ {
+ family: 'Alef',
+ variants: ['regular', '700'],
+ subsets: ['hebrew', 'latin'],
+ version: 'v12',
+ lastModified: '2020-09-02',
+ files: {
+ '700': 'http://fonts.gstatic.com/s/alef/v12/FeVQS0NQpLYglo50L5la2bxii28.ttf',
+ regular: 'http://fonts.gstatic.com/s/alef/v12/FeVfS0NQpLYgrjJbC5FxxbU.ttf'
+ },
+ category: 'sans-serif',
+ kind: 'webfonts#webfont',
+ id: 'Bp9jSqLHoWQI0kXY6o5UhfyD'
+ },
+ {
+ family: 'Alegreya',
+ variants: [
+ 'regular',
+ '500',
+ '600',
+ '700',
+ '800',
+ '900',
+ 'italic',
+ '500italic',
+ '600italic',
+ '700italic',
+ '800italic',
+ '900italic'
+ ],
+ subsets: ['cyrillic', 'cyrillic-ext', 'greek', 'greek-ext', 'latin', 'latin-ext', 'vietnamese'],
+ version: 'v19',
+ lastModified: '2021-02-12',
+ files: {
+ '500': 'http://fonts.gstatic.com/s/alegreya/v19/4UacrEBBsBhlBjvfkQjt71kZfyBzPgNGxBUI_KCisSGVrw.ttf',
+ '600': 'http://fonts.gstatic.com/s/alegreya/v19/4UacrEBBsBhlBjvfkQjt71kZfyBzPgNGKBII_KCisSGVrw.ttf',
+ '700': 'http://fonts.gstatic.com/s/alegreya/v19/4UacrEBBsBhlBjvfkQjt71kZfyBzPgNGERII_KCisSGVrw.ttf',
+ '800': 'http://fonts.gstatic.com/s/alegreya/v19/4UacrEBBsBhlBjvfkQjt71kZfyBzPgNGdhII_KCisSGVrw.ttf',
+ '900': 'http://fonts.gstatic.com/s/alegreya/v19/4UacrEBBsBhlBjvfkQjt71kZfyBzPgNGXxII_KCisSGVrw.ttf',
+ regular: 'http://fonts.gstatic.com/s/alegreya/v19/4UacrEBBsBhlBjvfkQjt71kZfyBzPgNG9hUI_KCisSGVrw.ttf',
+ italic: 'http://fonts.gstatic.com/s/alegreya/v19/4UaSrEBBsBhlBjvfkSLk3abBFkvpkARTPlbgv6qmkySFr9V9.ttf',
+ '500italic':
+ 'http://fonts.gstatic.com/s/alegreya/v19/4UaSrEBBsBhlBjvfkSLk3abBFkvpkARTPlbSv6qmkySFr9V9.ttf',
+ '600italic':
+ 'http://fonts.gstatic.com/s/alegreya/v19/4UaSrEBBsBhlBjvfkSLk3abBFkvpkARTPlY-uKqmkySFr9V9.ttf',
+ '700italic':
+ 'http://fonts.gstatic.com/s/alegreya/v19/4UaSrEBBsBhlBjvfkSLk3abBFkvpkARTPlYHuKqmkySFr9V9.ttf',
+ '800italic':
+ 'http://fonts.gstatic.com/s/alegreya/v19/4UaSrEBBsBhlBjvfkSLk3abBFkvpkARTPlZguKqmkySFr9V9.ttf',
+ '900italic':
+ 'http://fonts.gstatic.com/s/alegreya/v19/4UaSrEBBsBhlBjvfkSLk3abBFkvpkARTPlZJuKqmkySFr9V9.ttf'
+ },
+ category: 'serif',
+ kind: 'webfonts#webfont',
+ id: 'MgEE7nBReRp_ASHRjd0tH8yy'
+ },
+ {
+ family: 'Alegreya SC',
+ variants: [
+ 'regular',
+ 'italic',
+ '500',
+ '500italic',
+ '700',
+ '700italic',
+ '800',
+ '800italic',
+ '900',
+ '900italic'
+ ],
+ subsets: ['cyrillic', 'cyrillic-ext', 'greek', 'greek-ext', 'latin', 'latin-ext', 'vietnamese'],
+ version: 'v15',
+ lastModified: '2021-03-24',
+ files: {
+ '500': 'http://fonts.gstatic.com/s/alegreyasc/v15/taiTGmRtCJ62-O0HhNEa-ZZc-rUxQqu2FXKD.ttf',
+ '700': 'http://fonts.gstatic.com/s/alegreyasc/v15/taiTGmRtCJ62-O0HhNEa-ZYU_LUxQqu2FXKD.ttf',
+ '800': 'http://fonts.gstatic.com/s/alegreyasc/v15/taiTGmRtCJ62-O0HhNEa-ZYI_7UxQqu2FXKD.ttf',
+ '900': 'http://fonts.gstatic.com/s/alegreyasc/v15/taiTGmRtCJ62-O0HhNEa-ZYs_rUxQqu2FXKD.ttf',
+ regular: 'http://fonts.gstatic.com/s/alegreyasc/v15/taiOGmRtCJ62-O0HhNEa-a6o05E5abe_.ttf',
+ italic: 'http://fonts.gstatic.com/s/alegreyasc/v15/taiMGmRtCJ62-O0HhNEa-Z6q2ZUbbKe_DGs.ttf',
+ '500italic': 'http://fonts.gstatic.com/s/alegreyasc/v15/taiRGmRtCJ62-O0HhNEa-Z6q4WEySK-UEGKDBz4.ttf',
+ '700italic': 'http://fonts.gstatic.com/s/alegreyasc/v15/taiRGmRtCJ62-O0HhNEa-Z6q4Sk0SK-UEGKDBz4.ttf',
+ '800italic': 'http://fonts.gstatic.com/s/alegreyasc/v15/taiRGmRtCJ62-O0HhNEa-Z6q4TU3SK-UEGKDBz4.ttf',
+ '900italic': 'http://fonts.gstatic.com/s/alegreyasc/v15/taiRGmRtCJ62-O0HhNEa-Z6q4RE2SK-UEGKDBz4.ttf'
+ },
+ category: 'serif',
+ kind: 'webfonts#webfont',
+ id: 'TqvUhSZ_J59Fncjxsf5xmKCG'
+ },
+ {
+ family: 'Alegreya Sans',
+ variants: [
+ '100',
+ '100italic',
+ '300',
+ '300italic',
+ 'regular',
+ 'italic',
+ '500',
+ '500italic',
+ '700',
+ '700italic',
+ '800',
+ '800italic',
+ '900',
+ '900italic'
+ ],
+ subsets: ['cyrillic', 'cyrillic-ext', 'greek', 'greek-ext', 'latin', 'latin-ext', 'vietnamese'],
+ version: 'v14',
+ lastModified: '2021-03-24',
+ files: {
+ '100': 'http://fonts.gstatic.com/s/alegreyasans/v14/5aUt9_-1phKLFgshYDvh6Vwt5TltuGdShm5bsg.ttf',
+ '300': 'http://fonts.gstatic.com/s/alegreyasans/v14/5aUu9_-1phKLFgshYDvh6Vwt5fFPmE18imdCqxI.ttf',
+ '500': 'http://fonts.gstatic.com/s/alegreyasans/v14/5aUu9_-1phKLFgshYDvh6Vwt5alOmE18imdCqxI.ttf',
+ '700': 'http://fonts.gstatic.com/s/alegreyasans/v14/5aUu9_-1phKLFgshYDvh6Vwt5eFImE18imdCqxI.ttf',
+ '800': 'http://fonts.gstatic.com/s/alegreyasans/v14/5aUu9_-1phKLFgshYDvh6Vwt5f1LmE18imdCqxI.ttf',
+ '900': 'http://fonts.gstatic.com/s/alegreyasans/v14/5aUu9_-1phKLFgshYDvh6Vwt5dlKmE18imdCqxI.ttf',
+ '100italic': 'http://fonts.gstatic.com/s/alegreyasans/v14/5aUv9_-1phKLFgshYDvh6Vwt7V9V3G1WpGtLsgu7.ttf',
+ '300italic':
+ 'http://fonts.gstatic.com/s/alegreyasans/v14/5aUo9_-1phKLFgshYDvh6Vwt7V9VFE92jkVHuxKiBA.ttf',
+ regular: 'http://fonts.gstatic.com/s/alegreyasans/v14/5aUz9_-1phKLFgshYDvh6Vwt3V1nvEVXlm4.ttf',
+ italic: 'http://fonts.gstatic.com/s/alegreyasans/v14/5aUt9_-1phKLFgshYDvh6Vwt7V9tuGdShm5bsg.ttf',
+ '500italic':
+ 'http://fonts.gstatic.com/s/alegreyasans/v14/5aUo9_-1phKLFgshYDvh6Vwt7V9VTE52jkVHuxKiBA.ttf',
+ '700italic':
+ 'http://fonts.gstatic.com/s/alegreyasans/v14/5aUo9_-1phKLFgshYDvh6Vwt7V9VBEh2jkVHuxKiBA.ttf',
+ '800italic':
+ 'http://fonts.gstatic.com/s/alegreyasans/v14/5aUo9_-1phKLFgshYDvh6Vwt7V9VGEt2jkVHuxKiBA.ttf',
+ '900italic':
+ 'http://fonts.gstatic.com/s/alegreyasans/v14/5aUo9_-1phKLFgshYDvh6Vwt7V9VPEp2jkVHuxKiBA.ttf'
+ },
+ category: 'sans-serif',
+ kind: 'webfonts#webfont',
+ id: 'n5JBM4UQdzAxK3rFrqZfyYlD'
+ },
+ {
+ family: 'Alegreya Sans SC',
+ variants: [
+ '100',
+ '100italic',
+ '300',
+ '300italic',
+ 'regular',
+ 'italic',
+ '500',
+ '500italic',
+ '700',
+ '700italic',
+ '800',
+ '800italic',
+ '900',
+ '900italic'
+ ],
+ subsets: ['cyrillic', 'cyrillic-ext', 'greek', 'greek-ext', 'latin', 'latin-ext', 'vietnamese'],
+ version: 'v13',
+ lastModified: '2021-03-24',
+ files: {
+ '100': 'http://fonts.gstatic.com/s/alegreyasanssc/v13/mtGn4-RGJqfMvt7P8FUr0Q1j-Hf1Dipl8g5FPYtmMg.ttf',
+ '300': 'http://fonts.gstatic.com/s/alegreyasanssc/v13/mtGm4-RGJqfMvt7P8FUr0Q1j-Hf1DuJH0iRrMYJ_K-4.ttf',
+ '500': 'http://fonts.gstatic.com/s/alegreyasanssc/v13/mtGm4-RGJqfMvt7P8FUr0Q1j-Hf1DrpG0iRrMYJ_K-4.ttf',
+ '700': 'http://fonts.gstatic.com/s/alegreyasanssc/v13/mtGm4-RGJqfMvt7P8FUr0Q1j-Hf1DvJA0iRrMYJ_K-4.ttf',
+ '800': 'http://fonts.gstatic.com/s/alegreyasanssc/v13/mtGm4-RGJqfMvt7P8FUr0Q1j-Hf1Du5D0iRrMYJ_K-4.ttf',
+ '900': 'http://fonts.gstatic.com/s/alegreyasanssc/v13/mtGm4-RGJqfMvt7P8FUr0Q1j-Hf1DspC0iRrMYJ_K-4.ttf',
+ '100italic':
+ 'http://fonts.gstatic.com/s/alegreyasanssc/v13/mtGl4-RGJqfMvt7P8FUr0Q1j-Hf1BkxdlgRBH452Mvds.ttf',
+ '300italic':
+ 'http://fonts.gstatic.com/s/alegreyasanssc/v13/mtGk4-RGJqfMvt7P8FUr0Q1j-Hf1BkxdXiZhNaB6O-51OA.ttf',
+ regular: 'http://fonts.gstatic.com/s/alegreyasanssc/v13/mtGh4-RGJqfMvt7P8FUr0Q1j-Hf1Nk5v9ixALYs.ttf',
+ italic: 'http://fonts.gstatic.com/s/alegreyasanssc/v13/mtGn4-RGJqfMvt7P8FUr0Q1j-Hf1Bkxl8g5FPYtmMg.ttf',
+ '500italic':
+ 'http://fonts.gstatic.com/s/alegreyasanssc/v13/mtGk4-RGJqfMvt7P8FUr0Q1j-Hf1BkxdBidhNaB6O-51OA.ttf',
+ '700italic':
+ 'http://fonts.gstatic.com/s/alegreyasanssc/v13/mtGk4-RGJqfMvt7P8FUr0Q1j-Hf1BkxdTiFhNaB6O-51OA.ttf',
+ '800italic':
+ 'http://fonts.gstatic.com/s/alegreyasanssc/v13/mtGk4-RGJqfMvt7P8FUr0Q1j-Hf1BkxdUiJhNaB6O-51OA.ttf',
+ '900italic':
+ 'http://fonts.gstatic.com/s/alegreyasanssc/v13/mtGk4-RGJqfMvt7P8FUr0Q1j-Hf1BkxddiNhNaB6O-51OA.ttf'
+ },
+ category: 'sans-serif',
+ kind: 'webfonts#webfont',
+ id: '3C3qEHvn7LuHz2ExN20P1Xz9'
+ },
+ {
+ family: 'Aleo',
+ variants: ['300', '300italic', 'regular', 'italic', '700', '700italic'],
+ subsets: ['latin', 'latin-ext'],
+ version: 'v4',
+ lastModified: '2020-09-02',
+ files: {
+ '300': 'http://fonts.gstatic.com/s/aleo/v4/c4mg1nF8G8_syKbr9DVDno985KM.ttf',
+ '700': 'http://fonts.gstatic.com/s/aleo/v4/c4mg1nF8G8_syLbs9DVDno985KM.ttf',
+ '300italic': 'http://fonts.gstatic.com/s/aleo/v4/c4mi1nF8G8_swAjxeDdJmq159KOnWA.ttf',
+ regular: 'http://fonts.gstatic.com/s/aleo/v4/c4mv1nF8G8_s8ArD0D1ogoY.ttf',
+ italic: 'http://fonts.gstatic.com/s/aleo/v4/c4mh1nF8G8_swAjJ1B9tkoZl_Q.ttf',
+ '700italic': 'http://fonts.gstatic.com/s/aleo/v4/c4mi1nF8G8_swAjxaDBJmq159KOnWA.ttf'
+ },
+ category: 'serif',
+ kind: 'webfonts#webfont',
+ id: 'gW7TNTmQ90r8cslT6aaP9KhD'
+ },
+ {
+ family: 'Alex Brush',
+ variants: ['regular'],
+ subsets: ['latin', 'latin-ext', 'vietnamese'],
+ version: 'v13',
+ lastModified: '2021-07-01',
+ files: {
+ regular: 'http://fonts.gstatic.com/s/alexbrush/v13/SZc83FzrJKuqFbwMKk6EtUL57DtOmCc.ttf'
+ },
+ category: 'handwriting',
+ kind: 'webfonts#webfont',
+ id: 'xDQf1x4zU1yQBLcPXAQjME6p'
+ },
+ {
+ family: 'Alfa Slab One',
+ variants: ['regular'],
+ subsets: ['latin', 'latin-ext', 'vietnamese'],
+ version: 'v10',
+ lastModified: '2020-09-02',
+ files: {
+ regular: 'http://fonts.gstatic.com/s/alfaslabone/v10/6NUQ8FmMKwSEKjnm5-4v-4Jh6dVretWvYmE.ttf'
+ },
+ category: 'display',
+ kind: 'webfonts#webfont',
+ id: '19uFlX_LbzMmnG0AR5_zPuuT'
+ },
+ {
+ family: 'Alice',
+ variants: ['regular'],
+ subsets: ['cyrillic', 'cyrillic-ext', 'latin'],
+ version: 'v12',
+ lastModified: '2020-09-02',
+ files: {
+ regular: 'http://fonts.gstatic.com/s/alice/v12/OpNCnoEEmtHa6FcJpA_chzJ0.ttf'
+ },
+ category: 'serif',
+ kind: 'webfonts#webfont',
+ id: 'cJUIp3B1EZEAFeCsX3xuxFri'
+ },
+ {
+ family: 'Alike',
+ variants: ['regular'],
+ subsets: ['latin'],
+ version: 'v13',
+ lastModified: '2020-07-23',
+ files: {
+ regular: 'http://fonts.gstatic.com/s/alike/v13/HI_EiYEYI6BIoEjBSZXAQ4-d.ttf'
+ },
+ category: 'serif',
+ kind: 'webfonts#webfont',
+ id: 'ylFapnyHVAUY3530lapwftwW'
+ },
+ {
+ family: 'Alike Angular',
+ variants: ['regular'],
+ subsets: ['latin'],
+ version: 'v13',
+ lastModified: '2021-03-19',
+ files: {
+ regular: 'http://fonts.gstatic.com/s/alikeangular/v13/3qTrojWunjGQtEBlIcwMbSoI3kM6bB7FKjE.ttf'
+ },
+ category: 'serif',
+ kind: 'webfonts#webfont',
+ id: 'JJKojhgOrIxttW0CR9Vn4Peh'
+ },
+ {
+ family: 'Allan',
+ variants: ['regular', '700'],
+ subsets: ['latin', 'latin-ext'],
+ version: 'v13',
+ lastModified: '2020-09-02',
+ files: {
+ '700': 'http://fonts.gstatic.com/s/allan/v13/ea8aadU7WuTxEu5KEPCN2WpNgEKU.ttf',
+ regular: 'http://fonts.gstatic.com/s/allan/v13/ea8XadU7WuTxEtb2P9SF8nZE.ttf'
+ },
+ category: 'display',
+ kind: 'webfonts#webfont',
+ id: 'vYb0wSKygKOZceYs5iF8gjIA'
+ },
+ {
+ family: 'Allerta',
+ variants: ['regular'],
+ subsets: ['latin'],
+ version: 'v11',
+ lastModified: '2020-09-02',
+ files: {
+ regular: 'http://fonts.gstatic.com/s/allerta/v11/TwMO-IAHRlkbx940UnEdSQqO5uY.ttf'
+ },
+ category: 'sans-serif',
+ kind: 'webfonts#webfont',
+ id: 'K0gsYg7XcVJthiicYMcdkH_A'
+ },
+ {
+ family: 'Allerta Stencil',
+ variants: ['regular'],
+ subsets: ['latin'],
+ version: 'v11',
+ lastModified: '2020-09-02',
+ files: {
+ regular: 'http://fonts.gstatic.com/s/allertastencil/v11/HTx0L209KT-LmIE9N7OR6eiycOeF-zz313DuvQ.ttf'
+ },
+ category: 'sans-serif',
+ kind: 'webfonts#webfont',
+ id: 'MHke7JsMQ4JUbr8ZIl6xtO9T'
+ },
+ {
+ family: 'Allison',
+ variants: ['regular'],
+ subsets: ['latin', 'latin-ext', 'vietnamese'],
+ version: 'v1',
+ lastModified: '2021-08-18',
+ files: {
+ regular: 'http://fonts.gstatic.com/s/allison/v1/X7nl4b88AP2nkbvZOCaQ4MTgAgk.ttf'
+ },
+ category: 'handwriting',
+ kind: 'webfonts#webfont',
+ id: 'KyNYqe6TTTPfBykKWozHNmVF'
+ },
+ {
+ family: 'Allura',
+ variants: ['regular'],
+ subsets: ['latin', 'latin-ext', 'vietnamese'],
+ version: 'v15',
+ lastModified: '2021-11-04',
+ files: {
+ regular: 'http://fonts.gstatic.com/s/allura/v15/9oRPNYsQpS4zjuAPjAIXPtrrGA.ttf'
+ },
+ category: 'handwriting',
+ kind: 'webfonts#webfont',
+ id: 'xpkYqszH89nZ48FFsdBv8s0b'
+ },
+ {
+ family: 'Almarai',
+ variants: ['300', 'regular', '700', '800'],
+ subsets: ['arabic'],
+ version: 'v5',
+ lastModified: '2021-03-24',
+ files: {
+ '300': 'http://fonts.gstatic.com/s/almarai/v5/tssoApxBaigK_hnnS_anhnicoq72sXg.ttf',
+ '700': 'http://fonts.gstatic.com/s/almarai/v5/tssoApxBaigK_hnnS-aghnicoq72sXg.ttf',
+ '800': 'http://fonts.gstatic.com/s/almarai/v5/tssoApxBaigK_hnnS_qjhnicoq72sXg.ttf',
+ regular: 'http://fonts.gstatic.com/s/almarai/v5/tsstApxBaigK_hnnc1qPonC3vqc.ttf'
+ },
+ category: 'sans-serif',
+ kind: 'webfonts#webfont',
+ id: 'MGDB89vntp85yHZi0zqfPUwx'
+ },
+ {
+ family: 'Almendra',
+ variants: ['regular', 'italic', '700', '700italic'],
+ subsets: ['latin', 'latin-ext'],
+ version: 'v15',
+ lastModified: '2021-03-19',
+ files: {
+ '700': 'http://fonts.gstatic.com/s/almendra/v15/H4cjBXKAlMnTn0Cskx6G7Zu4qKK-aihq.ttf',
+ regular: 'http://fonts.gstatic.com/s/almendra/v15/H4ckBXKAlMnTn0CskyY6wr-wg763.ttf',
+ italic: 'http://fonts.gstatic.com/s/almendra/v15/H4ciBXKAlMnTn0CskxY4yLuShq63czE.ttf',
+ '700italic': 'http://fonts.gstatic.com/s/almendra/v15/H4chBXKAlMnTn0CskxY48Ae9oqacbzhqDtg.ttf'
+ },
+ category: 'serif',
+ kind: 'webfonts#webfont',
+ id: 'Bm6p10ZUl9oI_G9pEj9eMv5P'
+ },
+ {
+ family: 'Almendra Display',
+ variants: ['regular'],
+ subsets: ['latin', 'latin-ext'],
+ version: 'v13',
+ lastModified: '2021-03-19',
+ files: {
+ regular: 'http://fonts.gstatic.com/s/almendradisplay/v13/0FlPVOGWl1Sb4O3tETtADHRRlZhzXS_eTyer338.ttf'
+ },
+ category: 'display',
+ kind: 'webfonts#webfont',
+ id: 'lIcnBcEBw6zuy54eQfQwVPhi'
+ },
+ {
+ family: 'Almendra SC',
+ variants: ['regular'],
+ subsets: ['latin'],
+ version: 'v13',
+ lastModified: '2021-03-19',
+ files: {
+ regular: 'http://fonts.gstatic.com/s/almendrasc/v13/Iure6Yx284eebowr7hbyTZZJprVA4XQ0.ttf'
+ },
+ category: 'serif',
+ kind: 'webfonts#webfont',
+ id: 'c0UV9cgkABPRAoKaNRM3W_QL'
+ },
+ {
+ family: 'Alumni Sans',
+ variants: [
+ '100',
+ '200',
+ '300',
+ 'regular',
+ '500',
+ '600',
+ '700',
+ '800',
+ '900',
+ '100italic',
+ '200italic',
+ '300italic',
+ 'italic',
+ '500italic',
+ '600italic',
+ '700italic',
+ '800italic',
+ '900italic'
+ ],
+ subsets: ['cyrillic', 'cyrillic-ext', 'latin', 'latin-ext', 'vietnamese'],
+ version: 'v1',
+ lastModified: '2021-08-18',
+ files: {
+ '100':
+ 'http://fonts.gstatic.com/s/alumnisans/v1/nwpHtKqkOwdO2aOIwhWudEWpx_zq_Xna-Xd9OO5QqFsJ3C8qng.ttf',
+ '200':
+ 'http://fonts.gstatic.com/s/alumnisans/v1/nwpHtKqkOwdO2aOIwhWudEWpx_zq_Xna-Xd9uO9QqFsJ3C8qng.ttf',
+ '300':
+ 'http://fonts.gstatic.com/s/alumnisans/v1/nwpHtKqkOwdO2aOIwhWudEWpx_zq_Xna-Xd9Zu9QqFsJ3C8qng.ttf',
+ '500':
+ 'http://fonts.gstatic.com/s/alumnisans/v1/nwpHtKqkOwdO2aOIwhWudEWpx_zq_Xna-Xd9Cu9QqFsJ3C8qng.ttf',
+ '600':
+ 'http://fonts.gstatic.com/s/alumnisans/v1/nwpHtKqkOwdO2aOIwhWudEWpx_zq_Xna-Xd95uhQqFsJ3C8qng.ttf',
+ '700':
+ 'http://fonts.gstatic.com/s/alumnisans/v1/nwpHtKqkOwdO2aOIwhWudEWpx_zq_Xna-Xd93-hQqFsJ3C8qng.ttf',
+ '800':
+ 'http://fonts.gstatic.com/s/alumnisans/v1/nwpHtKqkOwdO2aOIwhWudEWpx_zq_Xna-Xd9uOhQqFsJ3C8qng.ttf',
+ '900':
+ 'http://fonts.gstatic.com/s/alumnisans/v1/nwpHtKqkOwdO2aOIwhWudEWpx_zq_Xna-Xd9kehQqFsJ3C8qng.ttf',
+ regular:
+ 'http://fonts.gstatic.com/s/alumnisans/v1/nwpHtKqkOwdO2aOIwhWudEWpx_zq_Xna-Xd9OO9QqFsJ3C8qng.ttf',
+ '100italic':
+ 'http://fonts.gstatic.com/s/alumnisans/v1/nwpBtKqkOwdO2aOIwhWudG-g9QMylBJAV3Bo8Ky46lEN_io6npfB.ttf',
+ '200italic':
+ 'http://fonts.gstatic.com/s/alumnisans/v1/nwpBtKqkOwdO2aOIwhWudG-g9QMylBJAV3Bo8Kw461EN_io6npfB.ttf',
+ '300italic':
+ 'http://fonts.gstatic.com/s/alumnisans/v1/nwpBtKqkOwdO2aOIwhWudG-g9QMylBJAV3Bo8Kzm61EN_io6npfB.ttf',
+ italic:
+ 'http://fonts.gstatic.com/s/alumnisans/v1/nwpBtKqkOwdO2aOIwhWudG-g9QMylBJAV3Bo8Ky461EN_io6npfB.ttf',
+ '500italic':
+ 'http://fonts.gstatic.com/s/alumnisans/v1/nwpBtKqkOwdO2aOIwhWudG-g9QMylBJAV3Bo8KyK61EN_io6npfB.ttf',
+ '600italic':
+ 'http://fonts.gstatic.com/s/alumnisans/v1/nwpBtKqkOwdO2aOIwhWudG-g9QMylBJAV3Bo8Kxm7FEN_io6npfB.ttf',
+ '700italic':
+ 'http://fonts.gstatic.com/s/alumnisans/v1/nwpBtKqkOwdO2aOIwhWudG-g9QMylBJAV3Bo8Kxf7FEN_io6npfB.ttf',
+ '800italic':
+ 'http://fonts.gstatic.com/s/alumnisans/v1/nwpBtKqkOwdO2aOIwhWudG-g9QMylBJAV3Bo8Kw47FEN_io6npfB.ttf',
+ '900italic':
+ 'http://fonts.gstatic.com/s/alumnisans/v1/nwpBtKqkOwdO2aOIwhWudG-g9QMylBJAV3Bo8KwR7FEN_io6npfB.ttf'
+ },
+ category: 'sans-serif',
+ kind: 'webfonts#webfont',
+ id: 'yshzhsGTjx_oSjODYpf9AkwY'
+ },
+ {
+ family: 'Amarante',
+ variants: ['regular'],
+ subsets: ['latin', 'latin-ext'],
+ version: 'v10',
+ lastModified: '2021-03-19',
+ files: {
+ regular: 'http://fonts.gstatic.com/s/amarante/v10/xMQXuF1KTa6EvGx9bq-3C3rAmD-b.ttf'
+ },
+ category: 'display',
+ kind: 'webfonts#webfont',
+ id: 'sriH_XoNVnQoFQXIHKTKhfn_'
+ },
+ {
+ family: 'Amaranth',
+ variants: ['regular', 'italic', '700', '700italic'],
+ subsets: ['latin'],
+ version: 'v11',
+ lastModified: '2020-09-02',
+ files: {
+ '700': 'http://fonts.gstatic.com/s/amaranth/v11/KtkpALODe433f0j1zMF-OPWi6WDfFpuc.ttf',
+ regular: 'http://fonts.gstatic.com/s/amaranth/v11/KtkuALODe433f0j1zPnCF9GqwnzW.ttf',
+ italic: 'http://fonts.gstatic.com/s/amaranth/v11/KtkoALODe433f0j1zMnAHdWIx2zWD4I.ttf',
+ '700italic': 'http://fonts.gstatic.com/s/amaranth/v11/KtkrALODe433f0j1zMnAJWmn42T9E4ucRY8.ttf'
+ },
+ category: 'sans-serif',
+ kind: 'webfonts#webfont',
+ id: 'ATIEhaVInF5ahKbOn7hh_NHr'
+ },
+ {
+ family: 'Amatic SC',
+ variants: ['regular', '700'],
+ subsets: ['cyrillic', 'hebrew', 'latin', 'latin-ext', 'vietnamese'],
+ version: 'v16',
+ lastModified: '2021-03-24',
+ files: {
+ '700': 'http://fonts.gstatic.com/s/amaticsc/v16/TUZ3zwprpvBS1izr_vOMscG6eb8D3WTy-A.ttf',
+ regular: 'http://fonts.gstatic.com/s/amaticsc/v16/TUZyzwprpvBS1izr_vO0De6ecZQf1A.ttf'
+ },
+ category: 'handwriting',
+ kind: 'webfonts#webfont',
+ id: '9ABwLd4UBbQLkT4Hmiu7L5ga'
+ },
+ {
+ family: 'Amethysta',
+ variants: ['regular'],
+ subsets: ['latin'],
+ version: 'v9',
+ lastModified: '2020-07-23',
+ files: {
+ regular: 'http://fonts.gstatic.com/s/amethysta/v9/rP2Fp2K15kgb_F3ibfWIGDWCBl0O8Q.ttf'
+ },
+ category: 'serif',
+ kind: 'webfonts#webfont',
+ id: 'EhOjI9NSHbUAT9B67DTTclR_'
+ },
+ {
+ family: 'Amiko',
+ variants: ['regular', '600', '700'],
+ subsets: ['devanagari', 'latin', 'latin-ext'],
+ version: 'v5',
+ lastModified: '2020-07-23',
+ files: {
+ '600': 'http://fonts.gstatic.com/s/amiko/v5/WwkdxPq1DFK04uJ9XXrEGoQAUco5.ttf',
+ '700': 'http://fonts.gstatic.com/s/amiko/v5/WwkdxPq1DFK04uIZXHrEGoQAUco5.ttf',
+ regular: 'http://fonts.gstatic.com/s/amiko/v5/WwkQxPq1DFK04tqlc17MMZgJ.ttf'
+ },
+ category: 'sans-serif',
+ kind: 'webfonts#webfont',
+ id: 'KQ_f9GlfOU7IRGBfDaLT0LfM'
+ },
+ {
+ family: 'Amiri',
+ variants: ['regular', 'italic', '700', '700italic'],
+ subsets: ['arabic', 'latin', 'latin-ext'],
+ version: 'v17',
+ lastModified: '2021-03-24',
+ files: {
+ '700': 'http://fonts.gstatic.com/s/amiri/v17/J7acnpd8CGxBHp2VkZY4xJ9CGyAa.ttf',
+ regular: 'http://fonts.gstatic.com/s/amiri/v17/J7aRnpd8CGxBHqUpvrIw74NL.ttf',
+ italic: 'http://fonts.gstatic.com/s/amiri/v17/J7afnpd8CGxBHpUrtLYS6pNLAjk.ttf',
+ '700italic': 'http://fonts.gstatic.com/s/amiri/v17/J7aanpd8CGxBHpUrjAo9zptgHjAavCA.ttf'
+ },
+ category: 'serif',
+ kind: 'webfonts#webfont',
+ id: 'ozZcWXJsujk20wcgM5zZ4TwA'
+ },
+ {
+ family: 'Amita',
+ variants: ['regular', '700'],
+ subsets: ['devanagari', 'latin', 'latin-ext'],
+ version: 'v9',
+ lastModified: '2021-03-24',
+ files: {
+ '700': 'http://fonts.gstatic.com/s/amita/v9/HhyXU5si9Om7PTHTLtCCOopCTKkI.ttf',
+ regular: 'http://fonts.gstatic.com/s/amita/v9/HhyaU5si9Om7PQlvAfSKEZZL.ttf'
+ },
+ category: 'handwriting',
+ kind: 'webfonts#webfont',
+ id: 'a39EypF2FgsnZuP3X4CMZ_8l'
+ },
+ {
+ family: 'Anaheim',
+ variants: ['regular'],
+ subsets: ['latin', 'latin-ext'],
+ version: 'v8',
+ lastModified: '2020-07-23',
+ files: {
+ regular: 'http://fonts.gstatic.com/s/anaheim/v8/8vII7w042Wp87g4G0UTUEE5eK_w.ttf'
+ },
+ category: 'sans-serif',
+ kind: 'webfonts#webfont',
+ id: 'Q3kn0VGzzZ3uI6Wp8logpApr'
+ },
+ {
+ family: 'Andada Pro',
+ variants: [
+ 'regular',
+ '500',
+ '600',
+ '700',
+ '800',
+ 'italic',
+ '500italic',
+ '600italic',
+ '700italic',
+ '800italic'
+ ],
+ subsets: ['latin', 'latin-ext', 'vietnamese'],
+ version: 'v2',
+ lastModified: '2021-09-16',
+ files: {
+ '500': 'http://fonts.gstatic.com/s/andadapro/v2/HhyEU5Qi9-SuOEhPe4LtKoVCuWGURPcg3DP7BY8cFLzvIt2S.ttf',
+ '600': 'http://fonts.gstatic.com/s/andadapro/v2/HhyEU5Qi9-SuOEhPe4LtKoVCuWGURPcg3DMXAo8cFLzvIt2S.ttf',
+ '700': 'http://fonts.gstatic.com/s/andadapro/v2/HhyEU5Qi9-SuOEhPe4LtKoVCuWGURPcg3DMuAo8cFLzvIt2S.ttf',
+ '800': 'http://fonts.gstatic.com/s/andadapro/v2/HhyEU5Qi9-SuOEhPe4LtKoVCuWGURPcg3DNJAo8cFLzvIt2S.ttf',
+ regular: 'http://fonts.gstatic.com/s/andadapro/v2/HhyEU5Qi9-SuOEhPe4LtKoVCuWGURPcg3DPJBY8cFLzvIt2S.ttf',
+ italic:
+ 'http://fonts.gstatic.com/s/andadapro/v2/HhyGU5Qi9-SuOEhPe4LtAIxwRrn9L22O2yYBRmdfHrjNJ82Stjw.ttf',
+ '500italic':
+ 'http://fonts.gstatic.com/s/andadapro/v2/HhyGU5Qi9-SuOEhPe4LtAIxwRrn9L22O2yYBRlVfHrjNJ82Stjw.ttf',
+ '600italic':
+ 'http://fonts.gstatic.com/s/andadapro/v2/HhyGU5Qi9-SuOEhPe4LtAIxwRrn9L22O2yYBRrlYHrjNJ82Stjw.ttf',
+ '700italic':
+ 'http://fonts.gstatic.com/s/andadapro/v2/HhyGU5Qi9-SuOEhPe4LtAIxwRrn9L22O2yYBRoBYHrjNJ82Stjw.ttf',
+ '800italic':
+ 'http://fonts.gstatic.com/s/andadapro/v2/HhyGU5Qi9-SuOEhPe4LtAIxwRrn9L22O2yYBRudYHrjNJ82Stjw.ttf'
+ },
+ category: 'serif',
+ kind: 'webfonts#webfont',
+ id: '9XbFDIS3bIqFA7LLupXgLMfL'
+ },
+ {
+ family: 'Andika',
+ variants: ['regular'],
+ subsets: ['cyrillic', 'cyrillic-ext', 'latin', 'latin-ext', 'vietnamese'],
+ version: 'v12',
+ lastModified: '2020-07-23',
+ files: {
+ regular: 'http://fonts.gstatic.com/s/andika/v12/mem_Ya6iyW-LwqgAbbwRWrwGVA.ttf'
+ },
+ category: 'sans-serif',
+ kind: 'webfonts#webfont',
+ id: 'H0klrPPeX_1Y4XzczCqKuC1x'
+ },
+ {
+ family: 'Andika New Basic',
+ variants: ['regular', 'italic', '700', '700italic'],
+ subsets: ['latin', 'latin-ext', 'vietnamese'],
+ version: 'v5',
+ lastModified: '2021-03-24',
+ files: {
+ '700': 'http://fonts.gstatic.com/s/andikanewbasic/v5/taiWGn9tCp-44eleq5Q-mszJivxScBO7NGqoGzdME84.ttf',
+ regular: 'http://fonts.gstatic.com/s/andikanewbasic/v5/taiRGn9tCp-44eleq5Q-mszJivxSSK-UEGKDBz4.ttf',
+ italic: 'http://fonts.gstatic.com/s/andikanewbasic/v5/taiXGn9tCp-44eleq5Q-mszJivxSeK2eFECGFz5VCg.ttf',
+ '700italic':
+ 'http://fonts.gstatic.com/s/andikanewbasic/v5/taiUGn9tCp-44eleq5Q-mszJivxSeK2mqG-iHxVJA85Okw.ttf'
+ },
+ category: 'sans-serif',
+ kind: 'webfonts#webfont',
+ id: 'WvO5mApFjJUjV9XCVE4RZE_X'
+ },
+ {
+ family: 'Angkor',
+ variants: ['regular'],
+ subsets: ['khmer', 'latin'],
+ version: 'v19',
+ lastModified: '2021-09-16',
+ files: {
+ regular: 'http://fonts.gstatic.com/s/angkor/v19/H4cmBXyAlsPdnlb-8iw-4Lqggw.ttf'
+ },
+ category: 'display',
+ kind: 'webfonts#webfont',
+ id: 'GwrZ3dBMobS7qbYQq9hGK1Ud'
+ }
+] as unknown) as IFontFamily[]
diff --git a/example/src/constants/format-sizes.ts b/example/src/constants/format-sizes.ts
new file mode 100644
index 0000000..a9c433c
--- /dev/null
+++ b/example/src/constants/format-sizes.ts
@@ -0,0 +1,121 @@
+const formatSizes = [
+ {
+ id: 1,
+ name: 'Facebook Image',
+ description: '1200 x 1200',
+ size: {
+ width: 1200,
+ height: 1200,
+ },
+ },
+ {
+ id: 2,
+ name: 'Facebook Link',
+ description: '1200 x 627',
+ size: {
+ width: 1200,
+ height: 627,
+ },
+ },
+ {
+ id: 3,
+ name: 'Facebook Cover',
+ description: '820 x 312',
+ size: {
+ width: 820,
+ height: 312,
+ },
+ },
+ {
+ id: 4,
+ name: 'Facebook Mobile Cover',
+ description: '640 x 360',
+ size: {
+ width: 640,
+ height: 360,
+ },
+ },
+ {
+ id: 5,
+ name: 'Facebook Story',
+ description: '1080 x 1920',
+ size: {
+ width: 1080,
+ height: 1920,
+ },
+ },
+ {
+ id: 6,
+ name: 'Instagram Story',
+ description: '1080 x 1920',
+ size: {
+ width: 1080,
+ height: 1920,
+ },
+ },
+ {
+ id: 7,
+ name: 'Instagram Post',
+ description: '1080 x 1080',
+ size: {
+ width: 1080,
+ height: 1080,
+ },
+ },
+ {
+ id: 8,
+ name: 'Twitter Post',
+ description: '1024 x 521',
+ size: {
+ width: 1024,
+ height: 512,
+ },
+ },
+ {
+ id: 9,
+ name: 'Twitter Banner',
+ description: '1500 x 500',
+ size: {
+ width: 1500,
+ height: 500,
+ },
+ },
+ {
+ id: 10,
+ name: 'Pinterest Post',
+ description: '736 x 1128',
+ size: {
+ width: 736,
+ height: 1128,
+ },
+ },
+ {
+ id: 11,
+ name: 'Email Header',
+ description: '600 x 300',
+ size: {
+ width: 600,
+ height: 300,
+ },
+ },
+ {
+ id: 12,
+ name: 'Presentation',
+ description: '1024 x 768',
+ size: {
+ width: 1024,
+ height: 768,
+ },
+ },
+ {
+ id: 13,
+ name: 'Coupon',
+ description: '1800 x 750',
+ size: {
+ width: 1800,
+ height: 750,
+ },
+ },
+]
+
+export default formatSizes
diff --git a/example/src/contexts/AppContext.tsx b/example/src/contexts/AppContext.tsx
new file mode 100644
index 0000000..3e0f355
--- /dev/null
+++ b/example/src/contexts/AppContext.tsx
@@ -0,0 +1,52 @@
+import * as React from 'react'
+import { PanelType } from '../constants/app-options'
+import { SubMenuType } from '../constants/editor'
+import { createContext, useState, FC } from 'react'
+
+type Template = any
+interface IAppContext {
+ isMobile: boolean | undefined
+ setIsMobile: React.Dispatch
+
+ )
+}
+
+export default App
diff --git a/example/src/scenes/Editor/components/Footer/Footer.tsx b/example/src/scenes/Editor/components/Footer/Footer.tsx
new file mode 100644
index 0000000..459bbae
--- /dev/null
+++ b/example/src/scenes/Editor/components/Footer/Footer.tsx
@@ -0,0 +1,105 @@
+import * as React from 'react'
+import { Button, KIND, SHAPE, SIZE } from 'baseui/button'
+import { styled } from 'baseui'
+import { Plus, CheckIndeterminate } from 'baseui/icon'
+import { StatefulPopover, PLACEMENT } from 'baseui/popover'
+import { Scrollbars } from 'react-custom-scrollbars'
+import { useEditor, useEditorContext } from '../../../../../../src'
+
+const Container = styled('div', props => ({
+ backgroundColor: '#f6f7f9',
+ display: 'flex',
+ position: 'absolute',
+ bottom: '20px',
+ right: '20px'
+}))
+
+const zoomValues = [0.27, 0.5, 0.75, 0.92, 1, 1.25, 1.5, 1.75, 2, 3, 4, 5]
+
+const ZoomItemContainer = styled('div', () => ({
+ height: '38px',
+ display: 'flex',
+ alignItems: 'center',
+ fontSize: '0.85rem',
+ paddingLeft: '1rem',
+ ':hover': {
+ backgroundColor: 'rgba(0,0,0,0.075)',
+ cursor: 'pointer'
+ }
+}))
+function Footer() {
+ const editor = useEditor()
+ const { zoomRatio } = useEditorContext()
+ return (
+
+
+
+
+
+
+
+
+
+ (
+
+
+
+
+
+ {
+ editor.zoomToFit()
+ close()
+ }}
+ >
+ Fit canvas
+
+ {zoomValues.map(zv => (
+ {
+ editor.zoomToRatio(zv)
+ close()
+ }}
+ key={zv}
+ >
+ {Math.round(zv * 100) + '%'}
+
+ ))}
+
+
+ )}
+ >
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
+
+const Container = styled('div', props => ({
+ background: props.$theme.colors.background,
+ color: props.$theme.colors.primary,
+ width: '320px',
+ fontFamily: 'Uber Move Text',
+ padding: '2rem 2rem'
+}))
+
+export default function Resize() {
+ const editor = useEditor()
+ const [value, setValue] = useState{option.name}
+ {option.description}
+
+
+ Size templates
+
+
+ Custom size
+
+ setCustomSize({ ...customSize, width: (e.target as any).value })}
+ startEnhancer="W"
+ placeholder="width"
+ />
+ setCustomSize({ ...customSize, height: (e.target as any).value })}
+ startEnhancer="H"
+ placeholder="width"
+ />
+
+
+
+
+
+ Page animations
+
+
+ {/* Tab 3 content */}
+
+
+
+ )
+}
+
+export default Panel
diff --git a/example/src/scenes/Editor/components/Panels/PanelItems/Background.tsx b/example/src/scenes/Editor/components/Panels/PanelItems/Background.tsx
new file mode 100644
index 0000000..3ceaf95
--- /dev/null
+++ b/example/src/scenes/Editor/components/Panels/PanelItems/Background.tsx
@@ -0,0 +1,133 @@
+import * as React from 'react'
+import { useState } from 'react'
+import { Scrollbars } from 'react-custom-scrollbars'
+import { Input } from 'baseui/input'
+import Icons from '../../../../../components/icons'
+import { useEditor } from '../../../../../../../src'
+import { HexColorPicker } from 'react-colorful'
+import { StatefulPopover, PLACEMENT } from 'baseui/popover'
+import { Plus } from 'baseui/icon'
+// @ts-ignore
+import throttle from 'lodash/throttle'
+
+const colors = [
+ '#f19066',
+ '#f5cd79',
+ '#546de5',
+ '#e15f41',
+ '#c44569',
+ '#574b90',
+ '#f78fb3',
+ '#3dc1d3',
+ '#e66767',
+ '#303952'
+]
+function Background() {
+ const editor = useEditor()
+ const [color, setColor] = useState('#b32aa9')
+ const [value, setValue] = useState('')
+
+ const updateBackgrounColor = throttle((color: string) => {
+ editor.background.setBackgroundColor(color)
+ setColor(color)
+ }, 100)
+
+ return (
+
+ {animations.map(animation => {
+ return (
+
+ editor.animate(animation.type)}
+ style={{
+ alignItems: 'center',
+ cursor: 'pointer',
+ padding: '10px',
+ display: 'flex',
+ justifyContent: 'center',
+ flexDirection: 'column',
+ fontSize: '12px'
+ }}
+ >
+ 
+
+ )
+ })}
+
+ {animation.name}
+
+
+
+ )
+}
+
+export default Background
diff --git a/example/src/scenes/Editor/components/Panels/PanelItems/Color.tsx b/example/src/scenes/Editor/components/Panels/PanelItems/Color.tsx
new file mode 100644
index 0000000..3010598
--- /dev/null
+++ b/example/src/scenes/Editor/components/Panels/PanelItems/Color.tsx
@@ -0,0 +1,133 @@
+import * as React from 'react'
+import { useState } from 'react'
+import { Scrollbars } from 'react-custom-scrollbars'
+import { Input } from 'baseui/input'
+import Icons from '../../../../../components/icons'
+import { useEditor } from '../../../../../../../src'
+import { HexColorPicker } from 'react-colorful'
+import { StatefulPopover, PLACEMENT } from 'baseui/popover'
+import { Plus } from 'baseui/icon'
+// @ts-ignore
+import throttle from 'lodash/throttle'
+
+const colors = [
+ '#f19066',
+ '#f5cd79',
+ '#546de5',
+ '#e15f41',
+ '#c44569',
+ '#574b90',
+ '#f78fb3',
+ '#3dc1d3',
+ '#e66767',
+ '#303952'
+]
+function Color() {
+ const editor = useEditor()
+ const [color, setColor] = useState('#b32aa9')
+ const [value, setValue] = useState('')
+
+ const updateObjectFill = throttle((color: string) => {
+ editor.update({ fill: color })
+ setColor(color)
+ }, 100)
+
+ return (
+
+
+
+
+
+
+
+
+ }
+ accessibilityType={'tooltip'}
+ >
+ Document colors
+
+
+
+
+
+
+
+
+
+
+ Default colors
+
+ {colors.map(color => (
+
+
+ editor.background.setBackgroundColor(color)}
+ key={color}
+ style={{ height: '42px', background: color, borderRadius: '4px', cursor: 'pointer' }}
+ >
+ ))}
+
+
+
+ )
+}
+
+export default Color
diff --git a/example/src/scenes/Editor/components/Panels/PanelItems/Elements.tsx b/example/src/scenes/Editor/components/Panels/PanelItems/Elements.tsx
new file mode 100644
index 0000000..0050fa2
--- /dev/null
+++ b/example/src/scenes/Editor/components/Panels/PanelItems/Elements.tsx
@@ -0,0 +1,57 @@
+import * as React from 'react'
+import { Input } from 'baseui/input'
+import Icons from '../../../../../components/icons'
+import { Scrollbars } from 'react-custom-scrollbars'
+import { useState } from 'react'
+import useAppContext from '../../../../../hooks/useAppContext'
+import { useEditor } from '../../../../../../../src'
+
+function Panel() {
+ const editor = useEditor()
+ const [value, setValue] = useState('')
+ const { shapes } = useAppContext()
+ return (
+
+
+
+
+
+
+
+
+ }
+ accessibilityType={'tooltip'}
+ >
+ Document colors
+
+
+
+
+
+
+
+
+
+
+ Default colors
+
+ {colors.map(color => (
+
+
+ editor.update({ fill: color })}
+ key={color}
+ style={{ height: '42px', background: color, borderRadius: '4px', cursor: 'pointer' }}
+ >
+ ))}
+
+
+ )
+}
+
+export default Panel
diff --git a/example/src/scenes/Editor/components/Panels/PanelItems/FontFamily.tsx b/example/src/scenes/Editor/components/Panels/PanelItems/FontFamily.tsx
new file mode 100644
index 0000000..ed06106
--- /dev/null
+++ b/example/src/scenes/Editor/components/Panels/PanelItems/FontFamily.tsx
@@ -0,0 +1,76 @@
+import * as React from 'react'
+import { useState } from 'react'
+import { Scrollbars } from 'react-custom-scrollbars'
+import { Input } from 'baseui/input'
+import { styled } from 'baseui'
+import { IFontFamily } from '../../../../../common/interfaces'
+import { useEditor } from '../../../../../../../src'
+import { editorFonts } from '../../../../../constants/fonts'
+import Icons from '../../icons'
+
+function FontFamily() {
+ const [value, setValue] = useState('')
+ const editor = useEditor()
+ const handleFontFamilyChange = async (fontFamily: IFontFamily) => {
+ if (editor) {
+ const fontFile = fontFamily.files['regular' as any]
+ const font = {
+ name: fontFamily.family,
+ url: fontFile,
+ options: { style: 'normal', weight: 400 }
+ }
+ // @ts-ignore
+ const fontFace = new FontFace(font.name, `url(${font.url})`, font.options)
+ fontFace
+ .load()
+ .then(loadedFont => {
+ // @ts-ignore
+ document.fonts.add(loadedFont)
+ fontFace.loaded.then(() => {
+ editor.update({
+ fontFamily: fontFamily.family,
+ metadata: {
+ fontURL: font.url
+ }
+ })
+ })
+ })
+ .catch(err => console.log(err))
+ }
+ }
+
+ return (
+
+
+
+
+
+
+
+ {shapes.map(shape => (
+
+ editor.add({ ...shape, originX: 'center', originY: 'center' })}
+ >
+ 
+
+ ))}
+
+
+ )
+}
+
+const FontItem = styled('div', props => ({
+ cursor: 'pointer',
+ padding: '14px 5px 14px 5px',
+ ':hover': {
+ background: 'rgba(0,0,0,0.045)'
+ }
+}))
+
+export default FontFamily
diff --git a/example/src/scenes/Editor/components/Panels/PanelItems/Illustrations.tsx b/example/src/scenes/Editor/components/Panels/PanelItems/Illustrations.tsx
new file mode 100644
index 0000000..3840826
--- /dev/null
+++ b/example/src/scenes/Editor/components/Panels/PanelItems/Illustrations.tsx
@@ -0,0 +1,78 @@
+import * as React from 'react'
+import { useEffect, useState } from 'react'
+import { Scrollbars } from 'react-custom-scrollbars'
+import { Input } from 'baseui/input'
+import Icons from '../../../../../components/icons'
+import { getImage, getImages } from '../../../../../services/iconscout'
+import { useEditor } from '../../../../../../../src'
+import { useDebounce } from 'use-debounce'
+
+function Illustrations() {
+ const [search, setSearch] = useState('')
+ const [objects, setObjects] = useState
+
+
+
+
+
+
+ {editorFonts.map(font => (
+ handleFontFamilyChange(font)} key={font.id}>
+ {font.family}
+
+ ))}
+
+
+
+ )
+}
+
+export default Illustrations
diff --git a/example/src/scenes/Editor/components/Panels/PanelItems/Images.tsx b/example/src/scenes/Editor/components/Panels/PanelItems/Images.tsx
new file mode 100644
index 0000000..278a63b
--- /dev/null
+++ b/example/src/scenes/Editor/components/Panels/PanelItems/Images.tsx
@@ -0,0 +1,74 @@
+import * as React from 'react'
+
+import { useEffect, useState } from 'react'
+import { Scrollbars } from 'react-custom-scrollbars'
+import { Input } from 'baseui/input'
+import Icons from '../../../../../components/icons'
+import { getPixabayImages, PixabayImage } from '../../../../../services/pixabay'
+import { useEditor } from '../../../../../../../src'
+import { useDebounce } from 'use-debounce'
+
+function Images() {
+ const [search, setSearch] = useState('')
+ const [images, setImages] = useState
+
+
+
+
+
+
+ {objects.map(obj => (
+
+ downloadImage(obj.uuid)}
+ >
+ 
+
+ ))}
+
+
+ )
+}
+
+export default Images
diff --git a/example/src/scenes/Editor/components/Panels/PanelItems/Layers.tsx b/example/src/scenes/Editor/components/Panels/PanelItems/Layers.tsx
new file mode 100644
index 0000000..4286e73
--- /dev/null
+++ b/example/src/scenes/Editor/components/Panels/PanelItems/Layers.tsx
@@ -0,0 +1,9 @@
+import * as React from 'react'
+
+import { Fragment } from 'react'
+
+function Panel() {
+ return
+
+
+
+
+
+
+ {images.map(img => (
+
+ addImageToCanvas(img.webformatURL)}
+ >
+ 
+
+ ))}
+
+
+ )
+}
+
+export default Templates
diff --git a/example/src/scenes/Editor/components/Panels/PanelItems/Text.tsx b/example/src/scenes/Editor/components/Panels/PanelItems/Text.tsx
new file mode 100644
index 0000000..85d5c1b
--- /dev/null
+++ b/example/src/scenes/Editor/components/Panels/PanelItems/Text.tsx
@@ -0,0 +1,127 @@
+import * as React from 'react'
+
+import { useEditor } from '../../../../../../../src'
+import { Scrollbars } from 'react-custom-scrollbars'
+import { Input } from 'baseui/input'
+import Icons from '../../../../../components/icons'
+import { useState } from 'react'
+
+function Panel() {
+ const [value, setValue] = useState('')
+ const editor = useEditor()
+
+ const addHeading = () => {
+ const options = {
+ type: 'StaticText',
+ width: 800,
+ metadata: {
+ fontWeight: 700,
+ fontFamily: 'Lexend',
+ textAlign: 'center',
+ fontSize: 80,
+ value: 'Add a heading'
+ }
+ }
+ editor.add(options)
+ }
+
+ const addSubheading = () => {
+ const options = {
+ type: 'StaticText',
+ width: 800,
+ metadata: {
+ value: 'Add a subheading',
+ fontSize: 60,
+ fontWeight: 500,
+ fontFamily: 'Lexend',
+ textAlign: 'center'
+ }
+ }
+ editor.add(options)
+ }
+
+ const addTextBody = () => {
+ const options = {
+ type: 'StaticText',
+ width: 800,
+ metadata: {
+ value: 'Add a little bit of body text',
+ fontSize: 40,
+ fontWeight: 300,
+ fontFamily: 'Lexend',
+ textAlign: 'center'
+ }
+ }
+ editor.add(options)
+ }
+ return (
+
+
+
+
+
+
+
+ {templates.map(template => (
+
+ editor.importFromJSON(template)}
+ >
+ 
+
+ ))}
+
+
+ )
+}
+
+export default Panel
diff --git a/example/src/scenes/Editor/components/Panels/PanelItems/index.tsx b/example/src/scenes/Editor/components/Panels/PanelItems/index.tsx
new file mode 100644
index 0000000..3eb8402
--- /dev/null
+++ b/example/src/scenes/Editor/components/Panels/PanelItems/index.tsx
@@ -0,0 +1,25 @@
+import Background from './Background'
+import Templates from './Templates'
+import Layers from './Layers'
+import Text from './Text'
+import Elements from './Elements'
+import FontFamily from './FontFamily'
+import Color from './Color'
+import Images from './Images'
+import Illustrations from './Illustrations'
+import Animations from './Animations'
+
+class PanelItems {
+ static Background = Background
+ static Text = Text
+ static Layers = Layers
+ static Templates = Templates
+ static Elements = Elements
+ static FontFamily = FontFamily
+ static Color = Color
+ static Images = Images
+ static Illustrations = Illustrations
+ static Animations = Animations
+}
+
+export default PanelItems
diff --git a/example/src/scenes/Editor/components/Panels/PanelListItem.tsx b/example/src/scenes/Editor/components/Panels/PanelListItem.tsx
new file mode 100644
index 0000000..dbf7bbc
--- /dev/null
+++ b/example/src/scenes/Editor/components/Panels/PanelListItem.tsx
@@ -0,0 +1,40 @@
+import * as React from 'react'
+import { useStyletron } from 'baseui'
+import Icons from '../../../../components/icons'
+import useAppContext from '../../../../hooks/useAppContext'
+
+function PanelListItem({ label, icon, activePanel }: any) {
+ const { setActivePanel } = useAppContext()
+ const [css, theme] = useStyletron()
+ const Icon = Icons[icon]
+ return (
+
+
+
+
+
+
+
+
+
+ Add a heading
+
+
+ Add a subheading
+
+
+ Add a litle bit of body text
+
+ setActivePanel(label)}
+ className={css({
+ width: '84px',
+ height: '80px',
+ backgroundColor: label === activePanel ? theme.colors.background : theme.colors.primary100,
+ display: 'flex',
+ alignItems: 'center',
+ flexDirection: 'column',
+ justifyContent: 'center',
+ fontFamily: 'Uber Move Text',
+ fontWeight: 500,
+ fontSize: '0.8rem',
+ userSelect: 'none',
+ transition: 'all 0.5s',
+ gap: '0.1rem',
+ ':hover': {
+ cursor: 'pointer',
+ backgroundColor: theme.colors.background,
+ transition: 'all 1s'
+ }
+ })}
+ >
+
+ )
+}
+
+export default PanelListItem
diff --git a/example/src/scenes/Editor/components/Panels/Panels.tsx b/example/src/scenes/Editor/components/Panels/Panels.tsx
new file mode 100644
index 0000000..749141c
--- /dev/null
+++ b/example/src/scenes/Editor/components/Panels/Panels.tsx
@@ -0,0 +1,15 @@
+import * as React from 'react'
+import { Fragment } from 'react'
+import PanelItem from './PanelItem'
+import PanelsList from './PanelsList'
+
+function Panels() {
+ return (
+ {label}
+
+
+
+ )
+}
+
+export default Default
diff --git a/example/src/scenes/Editor/components/Toolbox/ToolboxItems/Illustration.tsx b/example/src/scenes/Editor/components/Toolbox/ToolboxItems/Illustration.tsx
new file mode 100644
index 0000000..300b2a8
--- /dev/null
+++ b/example/src/scenes/Editor/components/Toolbox/ToolboxItems/Illustration.tsx
@@ -0,0 +1,43 @@
+import * as React from 'react'
+import Icons from '../../icons'
+import { Button, SHAPE, KIND, SIZE } from 'baseui/button'
+import useAppContext from '../../../../../hooks/useAppContext'
+import { SubMenuType } from '../../../../../constants/editor'
+import Delete from './components/Delete'
+import Duplicate from './components/Duplicate'
+import Opacity from './components/Opacity'
+import Position from './components/Position'
+import Animate from './components/Animate'
+function Illustration() {
+ const { setActiveSubMenu } = useAppContext()
+
+ return (
+
+
+
+ )
+}
+
+export default Illustration
diff --git a/example/src/scenes/Editor/components/Toolbox/ToolboxItems/Image.tsx b/example/src/scenes/Editor/components/Toolbox/ToolboxItems/Image.tsx
new file mode 100644
index 0000000..c91cb40
--- /dev/null
+++ b/example/src/scenes/Editor/components/Toolbox/ToolboxItems/Image.tsx
@@ -0,0 +1,46 @@
+import * as React from 'react'
+import Icons from '../../icons'
+import { Button, SHAPE, KIND, SIZE } from 'baseui/button'
+import useAppContext from '../../../../../hooks/useAppContext'
+import { SubMenuType } from '../../../../../constants/editor'
+import Delete from './components/Delete'
+import Duplicate from './components/Duplicate'
+import Opacity from './components/Opacity'
+import Position from './components/Position'
+import { useEditor } from '../../../../../../../src'
+import Animate from './components/Animate'
+
+function Image() {
+ const { setActiveSubMenu } = useAppContext()
+ return (
+
+
+
+
+ )
+}
+
+export default Image
diff --git a/example/src/scenes/Editor/components/Toolbox/ToolboxItems/Path.tsx b/example/src/scenes/Editor/components/Toolbox/ToolboxItems/Path.tsx
new file mode 100644
index 0000000..539e0bd
--- /dev/null
+++ b/example/src/scenes/Editor/components/Toolbox/ToolboxItems/Path.tsx
@@ -0,0 +1,44 @@
+import * as React from 'react'
+import Icons from '../../icons'
+import { Button, SHAPE, KIND, SIZE } from 'baseui/button'
+import useAppContext from '../../../../../hooks/useAppContext'
+import { SubMenuType } from '../../../../../constants/editor'
+import Delete from './components/Delete'
+import Duplicate from './components/Duplicate'
+import Opacity from './components/Opacity'
+import Position from './components/Position'
+import Animate from './components/Animate'
+function Path() {
+ const { setActiveSubMenu } = useAppContext()
+ return (
+
+
+
+
+
+
+
+ )
+}
+
+export default Path
diff --git a/example/src/scenes/Editor/components/Toolbox/ToolboxItems/Text.tsx b/example/src/scenes/Editor/components/Toolbox/ToolboxItems/Text.tsx
new file mode 100644
index 0000000..5ae73ba
--- /dev/null
+++ b/example/src/scenes/Editor/components/Toolbox/ToolboxItems/Text.tsx
@@ -0,0 +1,280 @@
+// @ts-nocheck
+import * as React from 'react'
+import Icons from '../../icons'
+import { Button, SHAPE, KIND, SIZE } from 'baseui/button'
+import { ChevronDown } from 'baseui/icon'
+import useAppContext from '../../../../../hooks/useAppContext'
+import { SubMenuType } from '../../../../../constants/editor'
+import { useEffect, useState } from 'react'
+import { useActiveObject, useEditor } from '../../../../../../../src'
+import { StatefulPopover, PLACEMENT } from 'baseui/popover'
+import { StatefulMenu } from 'baseui/menu'
+import Delete from './components/Delete'
+import Duplicate from './components/Duplicate'
+import Opacity from './components/Opacity'
+import Position from './components/Position'
+import Animate from './components/Animate'
+
+interface TextOptions {
+ fontFamily: string
+ fontSize: number
+ fontWeight: string | number
+ opacity: number[]
+ italic: string
+ textAligh: string
+ underline: string
+ fill: string
+}
+
+const defaultOptions = {
+ fontFamily: 'Open Sans',
+ fontWeight: 'normal',
+ fontSize: 12,
+ opacity: [1],
+ italic: 'true',
+ textAligh: 'center',
+ underline: 'true',
+ fill: '#000000'
+}
+
+const ITEMS = [
+ { label: 8 },
+ { label: 10 },
+ { label: 12 },
+ { label: 14 },
+ { label: 16 },
+ { label: 18 },
+ { label: 20 },
+ { label: 22 },
+ { label: 24 },
+ { label: 32 },
+ { label: 36 },
+ { label: 64 }
+]
+
+function Text() {
+ const { setActiveSubMenu } = useAppContext()
+ const activeObject = useActiveObject
+
+
+
+
+
+
+ )
+}
+
+export default Text
diff --git a/example/src/scenes/Editor/components/Toolbox/ToolboxItems/components/Animate.tsx b/example/src/scenes/Editor/components/Toolbox/ToolboxItems/components/Animate.tsx
new file mode 100644
index 0000000..2ebb659
--- /dev/null
+++ b/example/src/scenes/Editor/components/Toolbox/ToolboxItems/components/Animate.tsx
@@ -0,0 +1,30 @@
+import * as React from 'react'
+import { useEditor } from '../../../../../../../../src'
+import { Button, SHAPE, KIND, SIZE } from 'baseui/button'
+import Icons from '../../../icons'
+import useAppContext from '../../../../../../hooks/useAppContext'
+import { SubMenuType } from '../../../../../../constants/editor'
+
+function Duplicate() {
+ const { setActiveSubMenu } = useAppContext()
+
+ return (
+
+ )
+}
+
+export default Duplicate
diff --git a/example/src/scenes/Editor/components/Toolbox/ToolboxItems/components/Delete.tsx b/example/src/scenes/Editor/components/Toolbox/ToolboxItems/components/Delete.tsx
new file mode 100644
index 0000000..8f992f2
--- /dev/null
+++ b/example/src/scenes/Editor/components/Toolbox/ToolboxItems/components/Delete.tsx
@@ -0,0 +1,15 @@
+import * as React from 'react'
+import { useEditor } from '../../../../../../../../src'
+import { Button, SHAPE, KIND, SIZE } from 'baseui/button'
+import Icons from '../../../icons'
+
+function Delete() {
+ const editor = useEditor()
+ return (
+
+ )
+}
+
+export default Delete
diff --git a/example/src/scenes/Editor/components/Toolbox/ToolboxItems/components/Duplicate.tsx b/example/src/scenes/Editor/components/Toolbox/ToolboxItems/components/Duplicate.tsx
new file mode 100644
index 0000000..3d01e95
--- /dev/null
+++ b/example/src/scenes/Editor/components/Toolbox/ToolboxItems/components/Duplicate.tsx
@@ -0,0 +1,22 @@
+import * as React from 'react'
+import { useEditor } from '../../../../../../../../src'
+import { Button, SHAPE, KIND, SIZE } from 'baseui/button'
+import Icons from '../../../icons'
+
+function Duplicate() {
+ const editor = useEditor()
+ return (
+
+ )
+}
+
+export default Duplicate
diff --git a/example/src/scenes/Editor/components/Toolbox/ToolboxItems/components/Opacity.tsx b/example/src/scenes/Editor/components/Toolbox/ToolboxItems/components/Opacity.tsx
new file mode 100644
index 0000000..1f2deb6
--- /dev/null
+++ b/example/src/scenes/Editor/components/Toolbox/ToolboxItems/components/Opacity.tsx
@@ -0,0 +1,86 @@
+// @ts-nocheck
+import * as React from 'react'
+import Icons from '../../../icons'
+import { Button, SHAPE, KIND, SIZE } from 'baseui/button'
+import { StatefulPopover, PLACEMENT } from 'baseui/popover'
+import { Slider } from 'baseui/slider'
+import { useActiveObject, useEditor } from '../../../../../../../../src'
+import { useEffect, useState } from 'react'
+
+function Opacity() {
+ const [value, setValue] = useState([1])
+ const activeObject = useActiveObject()
+ const editor = useEditor()
+ useEffect(() => {
+ updateOptions(activeObject)
+ }, [activeObject])
+
+ useEffect(() => {
+ editor.on('history:changed', () => {
+ updateOptions(activeObject)
+ })
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [editor])
+
+ const updateOptions = (object: fabric.IObjectOptions) => {
+ const updatedValue = [object.opacity * 100]
+ setValue(updatedValue)
+ }
+
+ const updateOpacity = (value: number[]) => {
+ const opacityValue = value[0] / 100
+ editor.update({ opacity: opacityValue })
+ }
+
+ return (
+
+
+
+ (
+ {
+ updateFontSize(event.item.label)
+ close()
+ }}
+ overrides={{
+ List: { style: { width: '72px', textAlign: 'center', height: '240px' } }
+ }}
+ />
+ )}
+ >
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )}
+ >
+
+
+ null,
+ ThumbValue: () => null,
+ TickBar: () => null,
+ Thumb: {
+ style: {
+ height: '20px',
+ width: '20px'
+ }
+ }
+ }}
+ min={0}
+ max={100}
+ marks={false}
+ value={value}
+ onChange={({ value }) => updateOpacity(value)}
+ />
+
+ Transparency
+ {Math.round(value[0])}
+
+
+ )}
+ >
+
+
+
+
+
+
+
+ onClick()} style={{ display: 'flex', alignItems: 'center' }}>
+
+ )
+}
+
+export default Position
diff --git a/example/src/scenes/Editor/components/Toolbox/ToolboxItems/index.ts b/example/src/scenes/Editor/components/Toolbox/ToolboxItems/index.ts
new file mode 100644
index 0000000..89c3402
--- /dev/null
+++ b/example/src/scenes/Editor/components/Toolbox/ToolboxItems/index.ts
@@ -0,0 +1,14 @@
+import Default from './Default'
+import Text from './Text'
+import Path from './Path'
+import Illustration from './Illustration'
+import Image from './Image'
+class ToolboxItems {
+ static Default = Default
+ static StaticText = Text
+ static StaticPath = Path
+ static StaticVector = Illustration
+ static StaticImage = Image
+}
+
+export default ToolboxItems
diff --git a/example/src/scenes/Editor/components/Toolbox/index.tsx b/example/src/scenes/Editor/components/Toolbox/index.tsx
new file mode 100644
index 0000000..a862285
--- /dev/null
+++ b/example/src/scenes/Editor/components/Toolbox/index.tsx
@@ -0,0 +1,2 @@
+import Toolbox from './Toolbox'
+export default Toolbox
diff --git a/example/src/scenes/Editor/components/icons/Background.tsx b/example/src/scenes/Editor/components/icons/Background.tsx
new file mode 100644
index 0000000..efa60f1
--- /dev/null
+++ b/example/src/scenes/Editor/components/icons/Background.tsx
@@ -0,0 +1,13 @@
+import * as React from 'react'
+function Background({ size }: { size: number }) {
+ return (
+
+ )
+}
+
+export default Background
diff --git a/example/src/scenes/Editor/components/icons/Backward.tsx b/example/src/scenes/Editor/components/icons/Backward.tsx
new file mode 100644
index 0000000..fc7f2cb
--- /dev/null
+++ b/example/src/scenes/Editor/components/icons/Backward.tsx
@@ -0,0 +1,13 @@
+import * as React from 'react'
+function Backward({ size }: { size: number }) {
+ return (
+
+ )
+}
+
+export default Backward
diff --git a/example/src/scenes/Editor/components/icons/Bold.tsx b/example/src/scenes/Editor/components/icons/Bold.tsx
new file mode 100644
index 0000000..d02c63e
--- /dev/null
+++ b/example/src/scenes/Editor/components/icons/Bold.tsx
@@ -0,0 +1,14 @@
+import * as React from 'react'
+function Bold({ size }: { size: number }) {
+ return (
+
+ )
+}
+
+export default Bold
diff --git a/example/src/scenes/Editor/components/icons/Delete.tsx b/example/src/scenes/Editor/components/icons/Delete.tsx
new file mode 100644
index 0000000..ce011ee
--- /dev/null
+++ b/example/src/scenes/Editor/components/icons/Delete.tsx
@@ -0,0 +1,13 @@
+import * as React from 'react'
+function Delete({ size }: { size: number }) {
+ return (
+
+ )
+}
+
+export default Delete
diff --git a/example/src/scenes/Editor/components/icons/Duplicate.tsx b/example/src/scenes/Editor/components/icons/Duplicate.tsx
new file mode 100644
index 0000000..5b4657c
--- /dev/null
+++ b/example/src/scenes/Editor/components/icons/Duplicate.tsx
@@ -0,0 +1,21 @@
+import * as React from 'react'
+function Duplicate({ size }: { size: number }) {
+ return (
+
+ )
+}
+
+export default Duplicate
diff --git a/example/src/scenes/Editor/components/icons/Elements.tsx b/example/src/scenes/Editor/components/icons/Elements.tsx
new file mode 100644
index 0000000..be219a8
--- /dev/null
+++ b/example/src/scenes/Editor/components/icons/Elements.tsx
@@ -0,0 +1,16 @@
+import * as React from 'react'
+function Elements({ size }: { size: number }) {
+ return (
+
+ )
+}
+
+export default Elements
diff --git a/example/src/scenes/Editor/components/icons/FillColor.tsx b/example/src/scenes/Editor/components/icons/FillColor.tsx
new file mode 100644
index 0000000..7b38066
--- /dev/null
+++ b/example/src/scenes/Editor/components/icons/FillColor.tsx
@@ -0,0 +1,17 @@
+import * as React from 'react'
+// @ts-ignore
+import FullColor from '../../../../assets/images/full-color.png'
+
+function FillColor({ color = '#000000' }: { size?: number; color: string }) {
+ return (
+
+
+ {label}
+ {shortcut}
+
+ {color === '#000000' || color === '#ffffff' ? (
+ 
+ ) : (
+
+ )}
+
+ )
+}
+
+export default FillColor
diff --git a/example/src/scenes/Editor/components/icons/Forward.tsx b/example/src/scenes/Editor/components/icons/Forward.tsx
new file mode 100644
index 0000000..64b9a95
--- /dev/null
+++ b/example/src/scenes/Editor/components/icons/Forward.tsx
@@ -0,0 +1,13 @@
+import * as React from 'react'
+function Forward({ size }: { size: number }) {
+ return (
+
+ )
+}
+
+export default Forward
diff --git a/example/src/scenes/Editor/components/icons/Images.tsx b/example/src/scenes/Editor/components/icons/Images.tsx
new file mode 100644
index 0000000..885738a
--- /dev/null
+++ b/example/src/scenes/Editor/components/icons/Images.tsx
@@ -0,0 +1,14 @@
+import * as React from 'react'
+
+function Images({ size }: { size: number }) {
+ return (
+
+ )
+}
+
+export default Images
diff --git a/example/src/scenes/Editor/components/icons/Italic.tsx b/example/src/scenes/Editor/components/icons/Italic.tsx
new file mode 100644
index 0000000..b394841
--- /dev/null
+++ b/example/src/scenes/Editor/components/icons/Italic.tsx
@@ -0,0 +1,15 @@
+import * as React from 'react'
+
+function Italic({ size }: { size: number }) {
+ return (
+
+ )
+}
+
+export default Italic
diff --git a/example/src/scenes/Editor/components/icons/Locked.tsx b/example/src/scenes/Editor/components/icons/Locked.tsx
new file mode 100644
index 0000000..f67e2db
--- /dev/null
+++ b/example/src/scenes/Editor/components/icons/Locked.tsx
@@ -0,0 +1,14 @@
+import * as React from 'react'
+
+function Locked({ size }: { size: number }) {
+ return (
+
+ )
+}
+
+export default Locked
diff --git a/example/src/scenes/Editor/components/icons/Logo.tsx b/example/src/scenes/Editor/components/icons/Logo.tsx
new file mode 100644
index 0000000..7d5debf
--- /dev/null
+++ b/example/src/scenes/Editor/components/icons/Logo.tsx
@@ -0,0 +1,34 @@
+import * as React from 'react'
+
+function Logo({ size }: { size: number }) {
+ return (
+
+ )
+}
+
+export default Logo
diff --git a/example/src/scenes/Editor/components/icons/Opacity..tsx b/example/src/scenes/Editor/components/icons/Opacity..tsx
new file mode 100644
index 0000000..638d9c4
--- /dev/null
+++ b/example/src/scenes/Editor/components/icons/Opacity..tsx
@@ -0,0 +1,29 @@
+import * as React from 'react'
+
+function Opacity({ size }: { size: number }) {
+ return (
+
+ )
+}
+
+export default Opacity
diff --git a/example/src/scenes/Editor/components/icons/Redo.tsx b/example/src/scenes/Editor/components/icons/Redo.tsx
new file mode 100644
index 0000000..85e3204
--- /dev/null
+++ b/example/src/scenes/Editor/components/icons/Redo.tsx
@@ -0,0 +1,14 @@
+import * as React from 'react'
+
+function Redo({ size }: { size: number }) {
+ return (
+
+ )
+}
+
+export default Redo
diff --git a/example/src/scenes/Editor/components/icons/Search.tsx b/example/src/scenes/Editor/components/icons/Search.tsx
new file mode 100644
index 0000000..ba9e6b3
--- /dev/null
+++ b/example/src/scenes/Editor/components/icons/Search.tsx
@@ -0,0 +1,13 @@
+import * as React from 'react'
+function Search({ size }: { size: number }) {
+ return (
+
+ )
+}
+
+export default Search
diff --git a/example/src/scenes/Editor/components/icons/Spacing.tsx b/example/src/scenes/Editor/components/icons/Spacing.tsx
new file mode 100644
index 0000000..d71026f
--- /dev/null
+++ b/example/src/scenes/Editor/components/icons/Spacing.tsx
@@ -0,0 +1,26 @@
+import * as React from 'react'
+
+function Spacing({ size }: { size: number }) {
+ return (
+
+ )
+}
+
+export default Spacing
diff --git a/example/src/scenes/Editor/components/icons/Templates.tsx b/example/src/scenes/Editor/components/icons/Templates.tsx
new file mode 100644
index 0000000..9eb25a8
--- /dev/null
+++ b/example/src/scenes/Editor/components/icons/Templates.tsx
@@ -0,0 +1,15 @@
+import * as React from 'react'
+
+function Templates({ size }: { size: number }) {
+ return (
+
+ )
+}
+
+export default Templates
diff --git a/example/src/scenes/Editor/components/icons/Text.tsx b/example/src/scenes/Editor/components/icons/Text.tsx
new file mode 100644
index 0000000..26c9672
--- /dev/null
+++ b/example/src/scenes/Editor/components/icons/Text.tsx
@@ -0,0 +1,14 @@
+import * as React from 'react'
+
+function Text({ size }: { size: number }) {
+ return (
+
+ )
+}
+export default Text
diff --git a/example/src/scenes/Editor/components/icons/TextAlignCenter.tsx b/example/src/scenes/Editor/components/icons/TextAlignCenter.tsx
new file mode 100644
index 0000000..5395e81
--- /dev/null
+++ b/example/src/scenes/Editor/components/icons/TextAlignCenter.tsx
@@ -0,0 +1,14 @@
+import * as React from 'react'
+
+function TextAlignCenter({ size }: { size: number }) {
+ return (
+
+ )
+}
+export default TextAlignCenter
diff --git a/example/src/scenes/Editor/components/icons/TextAlignJustify.tsx b/example/src/scenes/Editor/components/icons/TextAlignJustify.tsx
new file mode 100644
index 0000000..0927c2e
--- /dev/null
+++ b/example/src/scenes/Editor/components/icons/TextAlignJustify.tsx
@@ -0,0 +1,16 @@
+import * as React from 'react'
+
+function TextAlignJustify({ size }: { size: number }) {
+ return (
+
+ )
+}
+
+export default TextAlignJustify
diff --git a/example/src/scenes/Editor/components/icons/TextAlignLeft.tsx b/example/src/scenes/Editor/components/icons/TextAlignLeft.tsx
new file mode 100644
index 0000000..2b43248
--- /dev/null
+++ b/example/src/scenes/Editor/components/icons/TextAlignLeft.tsx
@@ -0,0 +1,15 @@
+import * as React from 'react'
+
+function TextAlignLeft({ size }: { size: number }) {
+ return (
+
+ )
+}
+
+export default TextAlignLeft
diff --git a/example/src/scenes/Editor/components/icons/TextAlignRight.tsx b/example/src/scenes/Editor/components/icons/TextAlignRight.tsx
new file mode 100644
index 0000000..5ae49f4
--- /dev/null
+++ b/example/src/scenes/Editor/components/icons/TextAlignRight.tsx
@@ -0,0 +1,12 @@
+import * as React from 'react'
+
+function TextAlignRight({ size }: { size: number }) {
+ return (
+
+ )
+}
+
+export default TextAlignRight
diff --git a/example/src/scenes/Editor/components/icons/TextColor.tsx b/example/src/scenes/Editor/components/icons/TextColor.tsx
new file mode 100644
index 0000000..440912d
--- /dev/null
+++ b/example/src/scenes/Editor/components/icons/TextColor.tsx
@@ -0,0 +1,30 @@
+import * as React from 'react'
+
+function TextColor({ size, color = '#000000' }: { size: number; color: string }) {
+ return (
+
+
+ {color === '#000000' || color === '#ffffff' ? (
+
+ )
+}
+
+export default TextColor
diff --git a/example/src/scenes/Editor/components/icons/TimeFast.tsx b/example/src/scenes/Editor/components/icons/TimeFast.tsx
new file mode 100644
index 0000000..8dce3c3
--- /dev/null
+++ b/example/src/scenes/Editor/components/icons/TimeFast.tsx
@@ -0,0 +1,14 @@
+import * as React from 'react'
+
+function Underline({ size }: { size: number }) {
+ return (
+
+ )
+}
+
+export default Underline
diff --git a/example/src/scenes/Editor/components/icons/ToBack.tsx b/example/src/scenes/Editor/components/icons/ToBack.tsx
new file mode 100644
index 0000000..5d6cfcf
--- /dev/null
+++ b/example/src/scenes/Editor/components/icons/ToBack.tsx
@@ -0,0 +1,14 @@
+import * as React from 'react'
+
+function ToBack({ size }: { size: number }) {
+ return (
+
+ )
+}
+
+export default ToBack
diff --git a/example/src/scenes/Editor/components/icons/ToFront.tsx b/example/src/scenes/Editor/components/icons/ToFront.tsx
new file mode 100644
index 0000000..b8c4ca1
--- /dev/null
+++ b/example/src/scenes/Editor/components/icons/ToFront.tsx
@@ -0,0 +1,13 @@
+import * as React from 'react'
+
+function ToFront({ size }: { size: number }) {
+ return (
+
+ )
+}
+export default ToFront
diff --git a/example/src/scenes/Editor/components/icons/Underline.tsx b/example/src/scenes/Editor/components/icons/Underline.tsx
new file mode 100644
index 0000000..07ed2b7
--- /dev/null
+++ b/example/src/scenes/Editor/components/icons/Underline.tsx
@@ -0,0 +1,14 @@
+import * as React from 'react'
+
+function Underline({ size }: { size: number }) {
+ return (
+
+ )
+}
+
+export default Underline
diff --git a/example/src/scenes/Editor/components/icons/Undo.tsx b/example/src/scenes/Editor/components/icons/Undo.tsx
new file mode 100644
index 0000000..9052372
--- /dev/null
+++ b/example/src/scenes/Editor/components/icons/Undo.tsx
@@ -0,0 +1,14 @@
+import * as React from 'react'
+
+function Undo({ size }: { size: number }) {
+ return (
+
+ )
+}
+
+export default Undo
diff --git a/example/src/scenes/Editor/components/icons/Unlocked.tsx b/example/src/scenes/Editor/components/icons/Unlocked.tsx
new file mode 100644
index 0000000..d50e01d
--- /dev/null
+++ b/example/src/scenes/Editor/components/icons/Unlocked.tsx
@@ -0,0 +1,14 @@
+import * as React from 'react'
+
+function Elements({ size }: { size: number }) {
+ return (
+
+ )
+}
+
+export default Elements
diff --git a/example/src/scenes/Editor/components/icons/Uploads.tsx b/example/src/scenes/Editor/components/icons/Uploads.tsx
new file mode 100644
index 0000000..2d53e7c
--- /dev/null
+++ b/example/src/scenes/Editor/components/icons/Uploads.tsx
@@ -0,0 +1,14 @@
+import * as React from 'react'
+
+function Uploads({ size }: { size: number }) {
+ return (
+
+ )
+}
+
+export default Uploads
diff --git a/example/src/scenes/Editor/components/icons/index.ts b/example/src/scenes/Editor/components/icons/index.ts
new file mode 100644
index 0000000..5756282
--- /dev/null
+++ b/example/src/scenes/Editor/components/icons/index.ts
@@ -0,0 +1,59 @@
+import Background from './Background'
+import Elements from './Elements'
+import Text from './Text'
+import Templates from './Templates'
+import Delete from './Delete'
+import Locked from './Locked'
+import UnLocked from './Unlocked'
+import Bold from './Bold'
+import Italic from './Italic'
+import TextColor from './TextColor'
+import FillColor from './FillColor'
+import Images from './Images'
+import TextAlignCenter from './TextAlignCenter'
+import TextAlignRight from './TextAlignRight'
+import TextAlignLeft from './TextAlignLeft'
+import TextAlignJustify from './TextAlignJustify'
+import Underline from './Underline'
+import Opacity from './Opacity.'
+import Duplicate from './Duplicate'
+import ToFront from './ToFront'
+import Forward from './Forward'
+import ToBack from './ToBack'
+import Backward from './Backward'
+import Undo from './Undo'
+import Redo from './Redo'
+import TimeFast from './TimeFast'
+import Search from './Search'
+
+class Icons {
+ static Background = Background
+ static Elements = Elements
+ static Text = Text
+ static Templates = Templates
+ static Delete = Delete
+ static Locked = Locked
+ static UnLocked = UnLocked
+ static Bold = Bold
+ static Italic = Italic
+ static TextColor = TextColor
+ static FillColor = FillColor
+ static Images = Images
+ static TextAlignRight = TextAlignRight
+ static TextAlignCenter = TextAlignCenter
+ static TextAlignLeft = TextAlignLeft
+ static TextAlignJustify = TextAlignJustify
+ static Underline = Underline
+ static Opacity = Opacity
+ static Duplicate = Duplicate
+ static ToFront = ToFront
+ static Forward = Forward
+ static ToBack = ToBack
+ static Backward = Backward
+ static Undo = Undo
+ static Redo = Redo
+ static TimeFast = TimeFast
+ static Search = Search
+}
+
+export default Icons
diff --git a/example/src/scenes/Editor/index.ts b/example/src/scenes/Editor/index.ts
new file mode 100644
index 0000000..ecf8d4c
--- /dev/null
+++ b/example/src/scenes/Editor/index.ts
@@ -0,0 +1,2 @@
+import Editor from './Editor'
+export default Editor
diff --git a/example/src/services/api.ts b/example/src/services/api.ts
new file mode 100644
index 0000000..9bb70e9
--- /dev/null
+++ b/example/src/services/api.ts
@@ -0,0 +1,66 @@
+import axios, { AxiosInstance } from 'axios'
+
+type Template = any
+class ApiService {
+ base: AxiosInstance
+ constructor() {
+ this.base = axios.create({
+ baseURL: 'https://api.scenify.io',
+ })
+ }
+
+ createTemplate(props: Partial): Promise {
+ return new Promise((resolve, reject) => {
+ this.base
+ .post('/templates', props)
+ .then(({ data }) => {
+ resolve(data)
+ })
+ .catch(err => reject(err))
+ })
+ }
+
+ downloadTemplate(props: Partial): Promise<{ source: string }> {
+ return new Promise((resolve, reject) => {
+ this.base
+ .post('/templates/download', props)
+ .then(({ data }) => {
+ resolve(data)
+ })
+ .catch(err => reject(err))
+ })
+ }
+
+ getTemplates(): Promise
+ 
+
+ ) : (
+
+ )}
+
+
+
+ )
+}
+
+export default Canvas
diff --git a/src/Editor.tsx b/src/Editor.tsx
new file mode 100644
index 0000000..7fd952a
--- /dev/null
+++ b/src/Editor.tsx
@@ -0,0 +1,204 @@
+import { EditorOptions } from './common/interfaces'
+import Handlers from './handlers'
+import EventManager from './EventManager'
+import ZoomController from './controllers/ZoomController'
+import BackgroundController from './controllers/BackgroundController'
+import { IEditorContext } from '.'
+import CanvasController from './controllers/CanvasController'
+import FrameController from './controllers/FrameController'
+class Editor extends EventManager {
+ private handlers: Handlers
+ private context: IEditorContext
+ public zoom: ZoomController
+ public background: BackgroundController
+ public canvas: CanvasController
+ public frame: FrameController
+ constructor(props: EditorOptions) {
+ super()
+ this.context = props.context
+ this.handlers = new Handlers({ ...props, editor: this })
+ this.zoom = new ZoomController(this.handlers.zoomHandler)
+ this.background = new BackgroundController(this.handlers.backgroundHandler)
+ this.canvas = new CanvasController(this.handlers.canvasHandler)
+ this.frame = new FrameController(this.handlers.frameHandler)
+ }
+
+ // BASIC FUNCTIONS
+
+ // Add objects to editor
+ public add = (options: any) => {
+ this.handlers.objectsHandler.add(options)
+ }
+ // Update selected object properties
+ public update = (options: any) => {
+ this.handlers.objectsHandler.update(options)
+ }
+
+ public copy = () => {
+ this.handlers.objectsHandler.copy()
+ }
+
+ public copyStyle = () => {
+ this.handlers.objectsHandler.copyStyle()
+ }
+
+ public cut = () => {
+ this.handlers.objectsHandler.cut()
+ }
+
+ public paste = () => {
+ this.handlers.objectsHandler.paste()
+ }
+
+ public clone = () => {
+ this.handlers.objectsHandler.clone()
+ }
+
+ public delete = () => {
+ this.handlers.objectsHandler.remove()
+ }
+
+ public clear = () => {
+ this.handlers.objectsHandler.clear()
+ }
+
+ public deselect = () => {
+ this.handlers.objectsHandler.deselect()
+ }
+
+ // QUERY
+ public findByName = (name: string) => {
+ return this.handlers.objectsHandler.findByName(name)
+ }
+
+ public removeByName = (name: string) => {
+ this.handlers.objectsHandler.removeByName(name)
+ }
+
+ public findById = (id: string) => {
+ return this.handlers.objectsHandler.findById(id)
+ }
+
+ public removeById = (id: string) => {
+ this.handlers.objectsHandler.removeById(id)
+ }
+
+ // HISTORY
+ public undo = () => {
+ this.handlers.historyHandler.undo()
+ }
+ public redo = () => {
+ this.handlers.historyHandler.redo()
+ }
+
+ // ZOOM
+ public zoomIn = () => {
+ this.handlers.zoomHandler.zoomIn()
+ }
+ public zoomOut = () => {
+ this.handlers.zoomHandler.zoomOut()
+ }
+ public zoomToOne = () => {
+ this.handlers.zoomHandler.zoomToOne()
+ }
+ public zoomToFit = () => {
+ this.handlers.zoomHandler.zoomToFit()
+ }
+ public zoomToRatio = (zoomRatio: number) => {
+ this.handlers.zoomHandler.zoomToRatio(zoomRatio)
+ }
+
+ // ALIGMENT
+ public alignTop = () => {
+ this.handlers.objectsHandler.alignTop()
+ }
+ public alignMiddle = () => {
+ this.handlers.objectsHandler.alignMiddle()
+ }
+ public alignBottom = () => {
+ this.handlers.objectsHandler.alignBottom()
+ }
+ public alignLeft = () => {
+ this.handlers.objectsHandler.alignLeft()
+ }
+ public alignCenter = () => {
+ this.handlers.objectsHandler.alignCenter()
+ }
+ public alignRight = () => {
+ this.handlers.objectsHandler.alignRight()
+ }
+
+ //LAYERS
+ public bringForward = () => {
+ this.handlers.objectsHandler.bringForward()
+ }
+ public bringToFront = () => {
+ this.handlers.objectsHandler.bringToFront()
+ }
+ public sendBackwards = () => {
+ this.handlers.objectsHandler.sendBackwards()
+ }
+ public sendToBack = () => {
+ this.handlers.objectsHandler.sendToBack()
+ }
+
+ // GROUP
+ public group = () => {
+ this.handlers.objectsHandler.group()
+ }
+
+ public ungroup = () => {
+ this.handlers.objectsHandler.ungroup()
+ }
+
+ // LOCK - UNLOCK
+ public lock = () => {
+ this.handlers.objectsHandler.lock()
+ }
+
+ public unlock = () => {
+ this.handlers.objectsHandler.unlock()
+ }
+
+ // GRADIENT
+ public setGradient = options => {
+ this.handlers.objectsHandler.setGradient(options)
+ }
+
+ // SHADOW
+ public setShadow = options => {
+ this.handlers.objectsHandler.setShadow(options)
+ }
+
+ // DESIGN
+ public exportToJSON = () => {
+ return this.handlers.templateHandler.exportToJSON()
+ }
+ public importFromJSON = data => {
+ this.handlers.templateHandler.importFromJSON(data)
+ }
+ public toSVG = () => {}
+ public toPNG = (options: any) => {
+ return this.handlers.designHandler.toDataURL(options)
+ }
+
+ public toGif = options => {
+ return this.handlers.gifHandler.toGif(options)
+ }
+
+ // CONTEXT MENU
+ public cancelContextMenu = () => {
+ this.context.setContextMenuRequest(null)
+ }
+
+ public destroy = () => {
+ this.handlers.destroy()
+ }
+
+ // ANIMATIONS
+ public animate = (name: any) => {
+ this.handlers.animationHandler.animate(name)
+ }
+}
+
+export default Editor
diff --git a/src/EventManager.ts b/src/EventManager.ts
new file mode 100644
index 0000000..79a9d78
--- /dev/null
+++ b/src/EventManager.ts
@@ -0,0 +1,97 @@
+export type EventType = string | symbol
+
+// An event handler can take an optional event argument
+// and should not return a value
+export type Handler
+
+
+