{"version":3,"file":"ngx-stackedit-image-editor.component-xwGLjlWw.mjs","sources":["../../../src/app/editor/components/image-editor/image-editor.component.ts"],"sourcesContent":["import { Component, Input, OnInit, ViewContainerRef } from '@angular/core';\nimport FilerobotImageEditor from 'filerobot-image-editor';\nimport { FilerobotImageEditorConfig, TABS, TOOLS } from 'react-filerobot-image-editor';\nimport { Section } from '../../editor/highlighter';\nimport { MatDialogRef } from '@angular/material/dialog';\nimport { ThemeService } from '@dotglitch/ngx-common';\n\n// https://github.com/scaleflex/filerobot-image-editor\n\n@Component({\n  selector: 'app-image-editor',\n  template: '',\n  styleUrls: ['./image-editor.component.scss']\n})\nexport class ImageEditorComponent implements OnInit {\n\n    @Input() image: HTMLImageElement;\n    @Input() section: Section;\n\n    private editor: FilerobotImageEditor;\n\n    constructor(\n        private readonly viewContainer: ViewContainerRef,\n        private readonly dialogRef: MatDialogRef<any>,\n        private readonly theme: ThemeService\n    ) { }\n\n    ngOnInit() {\n    }\n\n    ngAfterViewInit() {\n        const config: FilerobotImageEditorConfig = {\n            source: this.image,\n            onSave: (editedImageObject, designState) => {\n                console.log('saved', editedImageObject, designState)\n            },\n            useZoomPresetsMenu: true,\n            annotationsCommon: {\n                fill: this.theme.value == 'dark' ? '#eeeeee' : '#121212',\n            },\n            theme: {\n                palette: {\n                    // 'bg-secondary': '#242424',\n                    // 'bg-primary': '#121212',\n                    // 'bg-primary-active': '#69f0ae',\n                    // 'accent-primary': '#69f0ae',\n                    // 'accent-primary-active': '#00ffff',\n                    // 'icons-primary': '#69f0ae',\n                    // 'icons-secondary': '#ff0000',\n                    // 'borders-secondary': '#808000',\n                    // 'borders-primary': '#0000ff',\n                    // 'borders-strong': '#00ff00',\n                    // 'light-shadow': '#ffff00',\n                    // 'warning': '....',\n\n                    \"txt-primary\": \"#eee\",\n                    \"txt-secondary\": \"#e0e\",\n                    \"txt-secondary-invert\": \"#12ff12\",\n                    \"txt-placeholder\": \"#eeeeee\",\n                    \"txt-warning\": \"#00ffff\",\n                    \"txt-error\": \"#ff00ff\",\n                    \"txt-info\": \"#ffff00\",\n                    // \"accent-primary\": \"#69f0ae\",\n                    // \"accent-primary-hover\": \"#07fa87\",\n                    \"accent-primary-active\": \"#69f0ae\",\n                    // \"accent-primary-disabled\": \"#69f0aeaa\",\n                    // \"accent-secondary-disabled\": \"#00ffff\",\n                    \"accent-stateless\": \"#69f0ae\",\n\n                    // \"accent-stateless_0_4_opacity\": \"#0000ff\",\n                    // \"accent_0_5_opacity\": \"#ffff00\",\n                    // \"accent_1_2_opacity\": \"#ffff00\",\n                    // \"accent_1_8_opacity\": \"#ffff00\",\n                    // \"accent_2_8_opacity\": \"#ffff00\",\n                    // \"accent_4_0_opacity\": \"#ffff00\",\n                    // \"bg-grey\": \"#0000ff\",\n                    \"bg-stateless\": \"#242424\",\n                    // \"bg-active\": \"#00ff00\",\n                    \"bg-base-light\": \"#363636\",\n                    // \"bg-base-medium\": \"#0000ff\",\n                    // \"bg-primary\": \"#ff00ff\",\n                    // \"bg-primary-light\": \"#ffff00\",\n                    // \"bg-primary-hover\": \"#00ffff\",\n                    \"bg-primary-active\": \"#434343\",\n                    // \"bg-primary-stateless\": \"#0000ff\",\n                    // \"bg-primary-0-5-opacity\": \"#0000ff\",\n                    \"bg-secondary\": \"#121212\",\n                    \"bg-hover\": \"#303030\",\n                    // \"bg-green\": \"#ff0000\",\n                    // \"bg-green-medium\": \"#ff0000\",\n                    // \"bg-blue\": \"#ff0000\",\n                    // \"bg-red\": \"#ff0000\",\n                    // \"background-red-medium\": \"#ff0000\",\n                    // \"bg-orange\": \"#ff0000\",\n                    // \"bg-tooltip\": \"#ff0000\",\n                    \"icon-primary\": \"#07fa87\",\n                    // \"icons-primary-opacity-0-6\": \"#0000ff\",\n                    \"icons-secondary\": \"#ccc\",\n                    \"icons-placeholder\": \"#ffff00\",\n                    // \"icons-invert\": \"#00f\",\n                    \"icons-muted\": \"#ccc\",\n                    // \"icons-primary-hover\": \"#ff0000\",\n                    // \"icons-secondary-hover\": \"#ff0000\",\n                    // \"btn-primary-text\": \"#0000ff\",\n                    // \"btn-primary-text-0-6\": \"#0000ff\",\n                    // \"btn-primary-text-0-4\": \"#0000ff\",\n                    // \"btn-disabled-text\": \"#0000ff\",\n                    // \"btn-secondary-text\": \"#0000ff\",\n                    // \"link-primary\": \"#ff0000\",\n                    // \"link-stateless\": \"#ff0000\",\n                    // \"link-hover\": \"#ff0000\",\n                    // \"link-active\": \"#ff0000\",\n                    // \"link-muted\": \"#ff0000\",\n                    // \"link-pressed\": \"#ff0000\",\n                    // \"borders-primary\": \"#0000ff\",\n                    \"borders-primary-hover\": \"#00ffff\",\n                    \"borders-secondary\": \"#444\",\n                    // \"borders-strong\": \"#ff00ff\",\n                    // \"borders-invert\": \"#ffff00\",\n                    // \"border-hover-bottom\": \"#ff0000\",\n                    // \"border-active-bottom\": \"#ff0000\",\n                    // \"border-primary-stateless\": \"#ff0000\",\n                    // \"borders-disabled\": \"#00ffff\",\n                    // \"borders-button\": \"#0000ff\",\n                    // \"borders-item\": \"#ff00ff\",\n                    // \"borders-base-light\": \"#ffff00\",\n                    // \"borders-base-medium\": \"#ff0000\",\n                    // \"borders-green\": \"#ff0000\",\n                    // \"borders-green-medium\": \"#ff0000\",\n                    // \"borders-red\": \"#ff0000\",\n                    // \"active-secondary\": \"#0000ff\",\n                    // \"active-secondary-hover\": \"#ff0000\",\n                    // \"tag\": \"#ff0000\",\n                    // \"states-error-disabled-text\": \"#ff0000\",\n                    // \"error\": \"#ff0000\",\n                    // \"error-0-28-opacity\": \"#ff0000\",\n                    // \"error-0-12-opacity\": \"#ff0000\",\n                    // \"error-hover\": \"#ff0000\",\n                    // \"error-active\": \"#ff0000\",\n                    // \"success\": \"#ff0000\",\n                    // \"success-hover\": \"#ff0000\",\n                    // \"success-Active\": \"#ff0000\",\n                    // \"warning\": \"#ff0000\",\n                    // \"warning-hover\": \"#ff0000\",\n                    // \"warning-active\": \"#ff0000\",\n                    // \"info\": \"#ff0000\",\n                    // \"modified\": \"#ff0000\",\n                    // \"red\": \"#ff0000\",\n                    // \"orange\": \"#ff0000\",\n                    // \"salad\": \"#ff0000\",\n                    // \"green\": \"#ff0000\",\n                    // \"blue\": \"#ff0000\",\n                    // \"indigo\": \"#ff0000\",\n                    // \"violet\": \"#ff0000\",\n                    // \"pink\": \"#ff0000\",\n                    // \"gradient-right\": \"#ff0000\",\n                    // \"extra-0-3-overlay\": \"#ff0000\",\n                    // \"gradient-right-active\": \"#ff0000\",\n                    // \"gradient-right-hover\": \"#ff0000\",\n                    // \"extra-0-5-overlay\": \"#ff0000\",\n                    // \"extra-0-7-overlay\": \"#ff0000\",\n                    // \"extra-0-9-overlay\": \"#ff0000\",\n                    // \"red-0-1-overlay\": \"#ff0000\",\n                    // \"orange-0-1-overlay\": \"#ff0000\",\n                    // \"accent-0-8-overlay\": \"#ff0000\",\n                    \"link\": \"#ffff00\",\n                    // \"camera\": \"#ff0000\",\n                    // \"google-drive\": \"#ff0000\",\n                    // \"dropbox\": \"#ff0000\",\n                    // \"one-drive\": \"#ff0000\",\n                    // \"device\": \"#ff0000\",\n                    // \"instagram\": \"#ff0000\",\n                    // \"free-images\": \"#ffff00\",\n                    // \"free-icons\": \"#ff00ff\",\n                    // \"canvas\": \"#00f\",\n                },\n                typography: {\n                    fontFamily: 'Fira Sans',\n                },\n            },\n            Rotate: { angle: 90, componentType: 'slider' },\n            Image: {\n                disableUpload: true,\n            },\n            defaultSavedImageType: \"webp\",\n            defaultSavedImageName: \"image.webp\",\n            defaultSavedImageQuality: 98,\n            tabsIds: [ TABS.RESIZE, TABS.ADJUST, TABS.FILTERS, TABS.ANNOTATE, TABS.WATERMARK ],\n            defaultTabId: TABS.ANNOTATE,\n            defaultToolId: TOOLS.TEXT,\n            savingPixelRatio: 1,\n            previewPixelRatio: 1\n        };\n\n        // Assuming we have a div with id=\"editor_container\"\n        const filerobotImageEditor = this.editor = new FilerobotImageEditor(\n            this.viewContainer.element.nativeElement,\n            config,\n        );\n\n        filerobotImageEditor.render({\n            onClose: (closingReason) => {\n                console.log('Closing reason', closingReason);\n                filerobotImageEditor.terminate();\n\n                this.dialogRef.close();\n            },\n        } as any);\n    }\n\n    ngOnDestroy() {\n        this.editor.terminate();\n    }\n}\n"],"names":[],"mappings":";;;;;;;AAOA;MAOa,oBAAoB,CAAA;AAQR,IAAA,aAAA,CAAA;AACA,IAAA,SAAA,CAAA;AACA,IAAA,KAAA,CAAA;AARZ,IAAA,KAAK,CAAmB;AACxB,IAAA,OAAO,CAAU;AAElB,IAAA,MAAM,CAAuB;AAErC,IAAA,WAAA,CACqB,aAA+B,EAC/B,SAA4B,EAC5B,KAAmB,EAAA;QAFnB,IAAa,CAAA,aAAA,GAAb,aAAa,CAAkB;QAC/B,IAAS,CAAA,SAAA,GAAT,SAAS,CAAmB;QAC5B,IAAK,CAAA,KAAA,GAAL,KAAK,CAAc;KACnC;IAEL,QAAQ,GAAA;KACP;IAED,eAAe,GAAA;AACX,QAAA,MAAM,MAAM,GAA+B;YACvC,MAAM,EAAE,IAAI,CAAC,KAAK;AAClB,YAAA,MAAM,EAAE,CAAC,iBAAiB,EAAE,WAAW,KAAI;gBACvC,OAAO,CAAC,GAAG,CAAC,OAAO,EAAE,iBAAiB,EAAE,WAAW,CAAC,CAAA;aACvD;AACD,YAAA,kBAAkB,EAAE,IAAI;AACxB,YAAA,iBAAiB,EAAE;AACf,gBAAA,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,IAAI,MAAM,GAAG,SAAS,GAAG,SAAS;AAC3D,aAAA;AACD,YAAA,KAAK,EAAE;AACH,gBAAA,OAAO,EAAE;;;;;;;;;;;;;AAcL,oBAAA,aAAa,EAAE,MAAM;AACrB,oBAAA,eAAe,EAAE,MAAM;AACvB,oBAAA,sBAAsB,EAAE,SAAS;AACjC,oBAAA,iBAAiB,EAAE,SAAS;AAC5B,oBAAA,aAAa,EAAE,SAAS;AACxB,oBAAA,WAAW,EAAE,SAAS;AACtB,oBAAA,UAAU,EAAE,SAAS;;;AAGrB,oBAAA,uBAAuB,EAAE,SAAS;;;AAGlC,oBAAA,kBAAkB,EAAE,SAAS;;;;;;;;AAS7B,oBAAA,cAAc,EAAE,SAAS;;AAEzB,oBAAA,eAAe,EAAE,SAAS;;;;;AAK1B,oBAAA,mBAAmB,EAAE,SAAS;;;AAG9B,oBAAA,cAAc,EAAE,SAAS;AACzB,oBAAA,UAAU,EAAE,SAAS;;;;;;;;AAQrB,oBAAA,cAAc,EAAE,SAAS;;AAEzB,oBAAA,iBAAiB,EAAE,MAAM;AACzB,oBAAA,mBAAmB,EAAE,SAAS;;AAE9B,oBAAA,aAAa,EAAE,MAAM;;;;;;;;;;;;;;;AAerB,oBAAA,uBAAuB,EAAE,SAAS;AAClC,oBAAA,mBAAmB,EAAE,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiD3B,oBAAA,MAAM,EAAE,SAAS;;;;;;;;;;AAUpB,iBAAA;AACD,gBAAA,UAAU,EAAE;AACR,oBAAA,UAAU,EAAE,WAAW;AAC1B,iBAAA;AACJ,aAAA;YACD,MAAM,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,aAAa,EAAE,QAAQ,EAAE;AAC9C,YAAA,KAAK,EAAE;AACH,gBAAA,aAAa,EAAE,IAAI;AACtB,aAAA;AACD,YAAA,qBAAqB,EAAE,MAAM;AAC7B,YAAA,qBAAqB,EAAE,YAAY;AACnC,YAAA,wBAAwB,EAAE,EAAE;YAC5B,OAAO,EAAE,CAAE,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,SAAS,CAAE;YAClF,YAAY,EAAE,IAAI,CAAC,QAAQ;YAC3B,aAAa,EAAE,KAAK,CAAC,IAAI;AACzB,YAAA,gBAAgB,EAAE,CAAC;AACnB,YAAA,iBAAiB,EAAE,CAAC;SACvB,CAAC;;AAGF,QAAA,MAAM,oBAAoB,GAAG,IAAI,CAAC,MAAM,GAAG,IAAI,oBAAoB,CAC/D,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,aAAa,EACxC,MAAM,CACT,CAAC;QAEF,oBAAoB,CAAC,MAAM,CAAC;AACxB,YAAA,OAAO,EAAE,CAAC,aAAa,KAAI;AACvB,gBAAA,OAAO,CAAC,GAAG,CAAC,gBAAgB,EAAE,aAAa,CAAC,CAAC;gBAC7C,oBAAoB,CAAC,SAAS,EAAE,CAAC;AAEjC,gBAAA,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,CAAC;aAC1B;AACG,SAAA,CAAC,CAAC;KACb;IAED,WAAW,GAAA;AACP,QAAA,IAAI,CAAC,MAAM,CAAC,SAAS,EAAE,CAAC;KAC3B;uGAtMQ,oBAAoB,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,gBAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,YAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,YAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAApB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,oBAAoB,wGAHrB,EAAE,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,qaAAA,CAAA,EAAA,CAAA,CAAA;;2FAGD,oBAAoB,EAAA,UAAA,EAAA,CAAA;kBALhC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,kBAAkB,YAClB,EAAE,EAAA,MAAA,EAAA,CAAA,qaAAA,CAAA,EAAA,CAAA;2IAKD,KAAK,EAAA,CAAA;sBAAb,KAAK;gBACG,OAAO,EAAA,CAAA;sBAAf,KAAK;;;;;"}