The MiniPaint integration

assets/js/src/core/lib/mini-paint/mini-paint.styles.ts

@@ -0,0 +1,33 @@
+/**
+* Pimcore
+*
+* This source file is available under two different licenses:
+* - Pimcore Open Core License (POCL)
+* - Pimcore Commercial License (PCL)
+* Full copyright and license information is available in
+* LICENSE.md which is distributed with this source code.
+*
+*  @copyright  Copyright (c) Pimcore GmbH (http://www.pimcore.org)
+*  @license    https://github.com/pimcore/studio-ui-bundle/blob/1.x/LICENSE.md POCL and PCL
+*/
+
+import { createStyles } from 'antd-style'
+
+interface StylesProps {
+  isLoaded: boolean
+}
+
+export const useStyle = createStyles(({ css }, props: StylesProps) => {
+  return {
+    imageIframeContainer: css`
+      width: 100%;
+      height: 100%;
+    `,
+
+    imageIframe: css`
+      width: 100%;
+      height: 100%;
+      display: ${props.isLoaded ? 'block' : 'none'};
+    `
+  }
+})

assets/js/src/core/lib/mini-paint/mini-paint.tsx

@@ -0,0 +1,50 @@
+/**
+* Pimcore
+*
+* This source file is available under two different licenses:
+* - Pimcore Open Core License (POCL)
+* - Pimcore Commercial License (PCL)
+* Full copyright and license information is available in
+* LICENSE.md which is distributed with this source code.
+*
+*  @copyright  Copyright (c) Pimcore GmbH (http://www.pimcore.org)
+*  @license    https://github.com/pimcore/studio-ui-bundle/blob/1.x/LICENSE.md POCL and PCL
+*/
+
+import React, { useState } from 'react'
+import { useElementContext } from '@Pimcore/modules/element/hooks/use-element-context'
+import { Spin } from '@Pimcore/components/spin/spin'
+import { Flex } from '@Pimcore/components/flex/flex'
+import { useStyle } from './mini-paint.styles'
+
+export const MiniPaint = (): React.JSX.Element => {
+  const { id } = useElementContext()
+
+  const [isLoaded, setIsLoaded] = useState(false)
+  const { styles } = useStyle({ isLoaded })
+
+  const iframeSrc = `/pimcore-studio/api/image-editor?id=${id}`
+
+  const handleIframeLoad = (): void => { setIsLoaded(true) }
+
+  return (
+    <Flex
+      align="center"
+      className={ styles.imageIframeContainer }
+      justify="center"
+    >
+      {!isLoaded && (
+        <Spin
+          asContainer
+          tip='Loading'
+        />
+      )}
+      <iframe
+        className={ styles.imageIframe }
+        onLoad={ handleIframeLoad }
+        src={ iframeSrc }
+        title="Image Editor"
+      />
+    </Flex>
+  )
+}

assets/js/src/core/modules/asset/editor/types/image/tab-manager/tabs/edit/edit-container.tsx

@@ -11,17 +11,14 @@
 *  @license    https://github.com/pimcore/studio-ui-bundle/blob/1.x/LICENSE.md POCL and PCL
 */
 
-import { Content } from '@Pimcore/components/content/content'
-import { Header } from '@Pimcore/components/header/header'
 import React from 'react'
+import { Content } from '@Pimcore/components/content/content'
+import { MiniPaint } from '@Pimcore/lib/mini-paint/mini-paint'
 
 export const EditTabContainer = (): React.JSX.Element => {
   return (
-    <Content padded>
-      <Header
-        title={ 'Edit' }
-      />
+    <Content>
+      <MiniPaint />
     </Content>
-
   )
 }

assets/tsconfig.json

@@ -22,8 +22,7 @@
     "outDir": "./dist/build/types",
     "composite": true
   },
-
   "include": [
     "./js/**/*"
-  ],
+  ]
 }

config/pimcore/routing.yaml

@@ -1,5 +1,10 @@
 pimcore_studio_ui:
-    resource: "@PimcoreStudioUiBundle/src/Controller/"
+    resource: "@PimcoreStudioUiBundle/src/Controller/DefaultController.php"
     type:     annotation
     prefix:   '%pimcore_studio_ui.url_path%'
 
+pimcore_studio_ui_backend:
+    resource: "@PimcoreStudioUiBundle/src/Controller/ImageEditorController.php"
+    type:     annotation
+    prefix:   '%pimcore_studio_backend.url_prefix%'
+

public/build/23b2086b-21d1-414d-949c-8218dcfe349b/entrypoints.json

@@ -0,0 +1,12 @@
+{
+  "entrypoints": {
+    "core-dll": {
+      "css": [
+        "/bundles/pimcorestudioui/build/23b2086b-21d1-414d-949c-8218dcfe349b/core-dll.css"
+      ],
+      "js": [
+        "/bundles/pimcorestudioui/build/23b2086b-21d1-414d-949c-8218dcfe349b/core-dll.js"
+      ]
+    }
+  }
+}

public/build/9d539d85-7607-4385-931c-769d0dc02691/entrypoints.json

@@ -0,0 +1,9 @@
+{
+  "entrypoints": {
+    "main": {
+      "js": [
+        "/bundles/pimcorestudioui/build/9d539d85-7607-4385-931c-769d0dc02691/main.js"
+      ]
+    }
+  }
+}

public/build/9d539d85-7607-4385-931c-769d0dc02691/manifest.json

@@ -0,0 +1,3 @@
+{
+  "bundles/pimcorestudioui/build/9d539d85-7607-4385-931c-769d0dc02691/main.js": "/bundles/pimcorestudioui/build/9d539d85-7607-4385-931c-769d0dc02691/main.js"
+}

public/build/c48f2b95-ec12-4512-b8cc-453248237a1f/entrypoints.json

@@ -0,0 +1,9 @@
+{
+  "entrypoints": {
+    "vendor": {
+      "js": [
+        "/bundles/pimcorestudioui/build/c48f2b95-ec12-4512-b8cc-453248237a1f/vendor.js"
+      ]
+    }
+  }
+}

public/build/c48f2b95-ec12-4512-b8cc-453248237a1f/manifest.json

@@ -0,0 +1,3 @@
+{
+  "bundles/pimcorestudioui/build/c48f2b95-ec12-4512-b8cc-453248237a1f/vendor.js": "/bundles/pimcorestudioui/build/c48f2b95-ec12-4512-b8cc-453248237a1f/vendor.js"
+}

public/js/lib/minipaint/MIT-LICENSE.txt

@@ -0,0 +1,21 @@
+Copyright (c) ViliusL
+https://github.com/viliusle
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

public/js/lib/minipaint/dist/bundle.js.LICENSE.txt

@@ -0,0 +1,47 @@
+/*
+object-assign
+(c) Sindre Sorhus
+@license MIT
+*/
+
+/*!
+
+pica
+https://github.com/nodeca/pica
+
+*/
+
+/*!
+ * Block below copied from Protovis: http://mbostock.github.com/protovis/
+ * Copyright 2010 Stanford Visualization Group
+ * Licensed under the BSD License: http://www.opensource.org/licenses/bsd-license.php
+ * @license
+ */
+
+/*!
+ * jQuery JavaScript Library v3.7.1
+ * https://jquery.com/
+ *
+ * Copyright OpenJS Foundation and other contributors
+ * Released under the MIT license
+ * https://jquery.org/license
+ *
+ * Date: 2023-08-28T13:37Z
+ */
+
+/*!
+ * quantize.js Copyright 2008 Nick Rabinowitz.
+ * Licensed under the MIT license: http://www.opensource.org/licenses/mit-license.php
+ * @license
+ */
+
+/*! alertifyjs - v1.13.1 - Mohammad Younes <[email protected]> (http://alertifyjs.com) */
+
+/*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */
+
+/**
+ * hermite-resize - Canvas image resize/resample using Hermite filter with JavaScript.
+ * @version v2.2.10
+ * @link https://github.com/viliusle/miniPaint
+ * @license MIT
+ */