Bulkl path fix reverse

Admin/Activate.php

@@ -0,0 +1,44 @@
+<?php
+/**
+ * Orange Management
+ *
+ * PHP Version 7.1
+ *
+ * @category   TBD
+ * @package    TBD
+ * @author     OMS Development Team <dev@oms.com>
+ * @author     Dennis Eichhorn <d.eichhorn@oms.com>
+ * @copyright  Dennis Eichhorn
+ * @license    OMS License 1.0
+ * @version    1.0.0
+ * @link       http://orange-management.com
+ */
+namespace Modules\Draw\Admin;
+
+
+use phpOMS\DataStorage\Database\DatabasePool;
+use phpOMS\Module\ActivateAbstract;
+use phpOMS\Module\InfoManager;
+
+/**
+ * Navigation class.
+ *
+ * @category   Modules
+ * @package    Modules\Admin
+ * @author     OMS Development Team <dev@oms.com>
+ * @author     Dennis Eichhorn <d.eichhorn@oms.com>
+ * @license    OMS License 1.0
+ * @link       http://orange-management.com
+ * @since      1.0.0
+ */
+class Activate extends ActivateAbstract
+{
+
+    /**
+     * {@inheritdoc}
+     */
+    public static function activate(DatabasePool $dbPool, InfoManager $info)
+    {
+        parent::activate($dbPool, $info);
+    }
+}

Admin/Deactivate.php

@@ -0,0 +1,44 @@
+<?php
+/**
+ * Orange Management
+ *
+ * PHP Version 7.1
+ *
+ * @category   TBD
+ * @package    TBD
+ * @author     OMS Development Team <dev@oms.com>
+ * @author     Dennis Eichhorn <d.eichhorn@oms.com>
+ * @copyright  Dennis Eichhorn
+ * @license    OMS License 1.0
+ * @version    1.0.0
+ * @link       http://orange-management.com
+ */
+namespace Modules\Draw\Admin;
+
+
+use phpOMS\DataStorage\Database\DatabasePool;
+use phpOMS\Module\DeactivateAbstract;
+use phpOMS\Module\InfoManager;
+
+/**
+ * Navigation class.
+ *
+ * @category   Modules
+ * @package    Modules\Admin
+ * @author     OMS Development Team <dev@oms.com>
+ * @author     Dennis Eichhorn <d.eichhorn@oms.com>
+ * @license    OMS License 1.0
+ * @link       http://orange-management.com
+ * @since      1.0.0
+ */
+class Deactivate extends DeactivateAbstract
+{
+
+    /**
+     * {@inheritdoc}
+     */
+    public static function deactivate(DatabasePool $dbPool, InfoManager $info)
+    {
+        parent::deactivate($dbPool, $info);
+    }
+}

Admin/Install/Navigation.install.json

@@ -0,0 +1,48 @@
+[
+    {
+        "id": 1005201001,
+        "pid": "754a08ddf8bcb1cf22f310f09206dd783d42f7dd",
+        "type": 2,
+        "subtype": 1,
+        "name": "Draw",
+        "uri": "/{/lang}/backend/draw/list?{?}",
+        "target": "self",
+        "icon": null,
+        "order": 70,
+        "from": "Draw",
+        "permission": null,
+        "parent": 1003301001,
+        "children": [
+            {
+                "id": 1005202001,
+                "pid": "e19f4e17662b65bae885bc55cbb55797677ecc40",
+                "type": 3,
+                "subtype": 1,
+                "name": "List",
+                "uri": "/{/lang}/backend/draw/list?{?}",
+                "target": "self",
+                "icon": null,
+                "order": 1,
+                "from": "Draw",
+                "permission": null,
+                "parent": 1005201001,
+                "children": []
+            },
+            {
+                "id": 1005202101,
+                "pid": "e19f4e17662b65bae885bc55cbb55797677ecc40",
+                "type": 3,
+                "subtype": 5,
+                "name": "Create",
+                "uri": "/{/lang}/backend/draw/create?{?}",
+                "target": "self",
+                "icon": null,
+                "order": 15,
+                "from": "Draw",
+                "permission": null,
+                "parent": 1005201001,
+                "children": []
+            }
+        ]
+    }
+]

Admin/Install/Navigation.php

@@ -0,0 +1,40 @@
+<?php
+/**
+ * Orange Management
+ *
+ * PHP Version 7.1
+ *
+ * @category   TBD
+ * @package    TBD
+ * @author     OMS Development Team <dev@oms.com>
+ * @author     Dennis Eichhorn <d.eichhorn@oms.com>
+ * @copyright  Dennis Eichhorn
+ * @license    OMS License 1.0
+ * @version    1.0.0
+ * @link       http://orange-management.com
+ */
+namespace Modules\Draw\Admin\Install;
+use phpOMS\DataStorage\Database\DatabasePool;
+
+/**
+ * Navigation class.
+ *
+ * @category   Modules
+ * @package    Modules\Admin
+ * @author     OMS Development Team <dev@oms.com>
+ * @author     Dennis Eichhorn <d.eichhorn@oms.com>
+ * @license    OMS License 1.0
+ * @link       http://orange-management.com
+ * @since      1.0.0
+ */
+class Navigation
+{
+    public static function install(string $path, DatabasePool $dbPool)
+    {
+        $navData = json_decode(file_get_contents(__DIR__ . '/Navigation.install.json'), true);
+
+        $class = '\\Modules\\Navigation\\Admin\\Installer';
+        /** @var $class \Modules\Navigation\Admin\Installer */
+        $class::installExternal($dbPool, $navData);
+    }
+}

Admin/Installer.php

@@ -0,0 +1,78 @@
+<?php
+/**
+ * Orange Management
+ *
+ * PHP Version 7.1
+ *
+ * @category   TBD
+ * @package    TBD
+ * @author     OMS Development Team <dev@oms.com>
+ * @author     Dennis Eichhorn <d.eichhorn@oms.com>
+ * @copyright  Dennis Eichhorn
+ * @license    OMS License 1.0
+ * @version    1.0.0
+ * @link       http://orange-management.com
+ */
+namespace Modules\Draw\Admin;
+
+use phpOMS\DataStorage\Database\DatabaseType;
+use phpOMS\DataStorage\Database\DatabasePool;
+use phpOMS\Module\InfoManager;
+use phpOMS\Module\InstallerAbstract;
+
+/**
+ * Calendar install class.
+ *
+ * @category   Modules
+ * @package    Modules\Calendar
+ * @author     OMS Development Team <dev@oms.com>
+ * @author     Dennis Eichhorn <d.eichhorn@oms.com>
+ * @license    OMS License 1.0
+ * @link       http://orange-management.com
+ * @since      1.0.0
+ */
+class Installer extends InstallerAbstract
+{
+
+    /**
+     * {@inheritdoc}
+     */
+    public static function install(string $path, DatabasePool $dbPool, InfoManager $info)
+    {
+        parent::install($path, $dbPool, $info);
+
+        switch ($dbPool->get('core')->getType()) {
+            case DatabaseType::MYSQL:
+                $dbPool->get('core')->con->prepare(
+                    'CREATE TABLE if NOT EXISTS `' . $dbPool->get('core')->prefix . 'draw_image` (
+                            `draw_image_id` int(11) NOT NULL AUTO_INCREMENT,
+                            `draw_image_media` int(11) NOT NULL,
+                            `draw_image_path` varchar(255) NOT NULL,
+                            PRIMARY KEY (`draw_image_id`),
+                            KEY `draw_image_media` (`draw_image_media`)
+                        )ENGINE=InnoDB  DEFAULT CHARSET=utf8 AUTO_INCREMENT=1;'
+                )->execute();
+
+                $dbPool->get('core')->con->prepare(
+                    'ALTER TABLE `' . $dbPool->get('core')->prefix . 'draw_image`
+                            ADD CONSTRAINT `' . $dbPool->get('core')->prefix . 'draw_image_ibfk_1` FOREIGN KEY (`draw_image_media`) REFERENCES `' . $dbPool->get('core')->prefix . 'media` (`media_id`);'
+                )->execute();
+
+                $dbPool->get('core')->con->prepare(
+                    'CREATE TABLE if NOT EXISTS `' . $dbPool->get('core')->prefix . 'editor_tag` (
+                            `editor_tag_id` int(11) NOT NULL AUTO_INCREMENT,
+                            `editor_tag_doc` int(11) NOT NULL,
+                            `editor_tag_tag` varchar(20) NOT NULL,
+                            PRIMARY KEY (`editor_tag_id`),
+                            KEY `editor_tag_doc` (`editor_tag_doc`)
+                        )ENGINE=InnoDB  DEFAULT CHARSET=utf8 AUTO_INCREMENT=1;'
+                )->execute();
+
+                $dbPool->get('core')->con->prepare(
+                    'ALTER TABLE `' . $dbPool->get('core')->prefix . 'editor_tag`
+                            ADD CONSTRAINT `' . $dbPool->get('core')->prefix . 'editor_tag_ibfk_1` FOREIGN KEY (`editor_tag_doc`) REFERENCES `' . $dbPool->get('core')->prefix . 'draw_image` (`draw_image_id`);'
+                )->execute();
+                break;
+        }
+    }
+}

Admin/Routes/Web/Api.php

@@ -0,0 +1,12 @@
+<?php
+
+use phpOMS\Router\RouteVerb;
+
+return [
+    '^.*/api/draw.*$' => [
+        [
+            'dest' => '\Modules\Draw\Controller:apiDrawCreate', 
+            'verb' => RouteVerb::SET,
+        ],
+    ],
+];

Admin/Routes/Web/Backend.php

@@ -0,0 +1,32 @@
+<?php
+
+use phpOMS\Router\RouteVerb;
+
+return [
+    '^.*/backend/draw/create.*$' => [
+        [
+            'dest' => '\Modules\Draw\Controller:setUpDrawEditor', 
+            'verb' => RouteVerb::GET,
+        ],
+        [
+            'dest' => '\Modules\Draw\Controller:viewDrawCreate', 
+            'verb' => RouteVerb::GET,
+        ],
+    ],
+    '^.*/backend/draw/list.*$' => [
+        [
+            'dest' => '\Modules\Draw\Controller:viewDrawList', 
+            'verb' => RouteVerb::GET,
+        ],
+    ],
+    '^.*/backend/draw/single.*$' => [
+        [
+            'dest' => '\Modules\Draw\Controller:setUpDrawEditor', 
+            'verb' => RouteVerb::GET,
+        ],
+        [
+            'dest' => '\Modules\Draw\Controller:viewDrawSingle', 
+            'verb' => RouteVerb::GET,
+        ],
+    ],
+];

Admin/Routes/console.php

@@ -0,0 +1,3 @@
+<?php
+
+$moduleRoutes = [];

Admin/Routes/socket.php

@@ -0,0 +1,3 @@
+<?php
+
+$moduleRoutes = [];

Admin/Uninstall.php

@@ -0,0 +1,43 @@
+<?php
+/**
+ * Orange Management
+ *
+ * PHP Version 7.1
+ *
+ * @category   TBD
+ * @package    TBD
+ * @author     OMS Development Team <dev@oms.com>
+ * @author     Dennis Eichhorn <d.eichhorn@oms.com>
+ * @copyright  Dennis Eichhorn
+ * @license    OMS License 1.0
+ * @version    1.0.0
+ * @link       http://orange-management.com
+ */
+namespace Modules\Draw\Admin;
+
+
+use phpOMS\DataStorage\Database\DatabasePool;
+use phpOMS\Module\UninstallAbstract;
+
+/**
+ * Navigation class.
+ *
+ * @category   Modules
+ * @package    Modules\Admin
+ * @author     OMS Development Team <dev@oms.com>
+ * @author     Dennis Eichhorn <d.eichhorn@oms.com>
+ * @license    OMS License 1.0
+ * @link       http://orange-management.com
+ * @since      1.0.0
+ */
+class Uninstall extends UninstallAbstract
+{
+
+    /**
+     * {@inheritdoc}
+     */
+    public static function uninstall(DatabasePool $dbPool, InfoManager $info)
+    {
+        parent::uninstall($dbPool, $info);
+    }
+}

Admin/Update.php

@@ -0,0 +1,46 @@
+<?php
+/**
+ * Orange Management
+ *
+ * PHP Version 7.1
+ *
+ * @category   TBD
+ * @package    TBD
+ * @author     OMS Development Team <dev@oms.com>
+ * @author     Dennis Eichhorn <d.eichhorn@oms.com>
+ * @copyright  Dennis Eichhorn
+ * @license    OMS License 1.0
+ * @version    1.0.0
+ * @link       http://orange-management.com
+ */
+namespace Modules\Draw\Admin;
+
+
+use phpOMS\DataStorage\Database\DatabasePool;
+use phpOMS\Module\UpdateAbstract;
+use phpOMS\System\File\Directory;
+
+/**
+ * Navigation class.
+ *
+ * @category   Modules
+ * @package    Modules\Admin
+ * @author     OMS Development Team <dev@oms.com>
+ * @author     Dennis Eichhorn <d.eichhorn@oms.com>
+ * @license    OMS License 1.0
+ * @link       http://orange-management.com
+ * @since      1.0.0
+ */
+class Update extends UpdateAbstract
+{
+
+    /**
+     * {@inheritdoc}
+     */
+    public static function update(DatabasePool $dbPool, array $info)
+    {
+        Directory::deletePath(__DIR__ . '/Update');
+        mkdir('Update');
+        parent::update($dbPool, $info);
+    }
+}

Controller.js

@@ -0,0 +1,46 @@
+(function (jsOMS) {
+    "use strict";
+    /** @namespace jsOMS.Modules */
+    jsOMS.Autoloader.defineNamespace('jsOMS.Modules');
+
+    jsOMS.Modules.Draw = function (app) {
+        this.app = app;
+        this.editors = [];
+    };
+
+    jsOMS.Modules.Draw.prototype.bind = function (id) {
+        let temp = null;
+
+        if (typeof id !== 'undefined') {
+            temp = new jsOMS.Modules.Draw.Editor(document.getElementById(id));
+            temp.bind();
+
+            this.editors.push(temp);
+        } else {
+            const canvas = document.getElementsByClassName('m-draw'),
+                length = canvas.length;
+
+            this.editors = [];
+
+            /* Handle media forms */
+            for (let c = 0; c < canvas.length; c++) {
+                temp = new jsOMS.Modules.Draw.Editor(canvas[c]);
+                temp.bind();
+
+                this.editors.push(temp);
+            }
+        }
+    };
+
+    jsOMS.Modules.Draw.prototype.getElements = function() {
+        return this.editors;
+    };
+
+    jsOMS.Modules.Draw.prototype.count = function() {
+        return this.editors.length;
+    };
+}(window.jsOMS = window.jsOMS || {}));
+
+jsOMS.ready(function () {
+    window.omsApp.moduleManager.get('Draw').bind();
+});

Controller.php

@@ -0,0 +1,241 @@
+<?php
+/**
+ * Orange Management
+ *
+ * PHP Version 7.1
+ *
+ * @category   TBD
+ * @package    TBD
+ * @author     OMS Development Team <dev@oms.com>
+ * @author     Dennis Eichhorn <d.eichhorn@oms.com>
+ * @copyright  Dennis Eichhorn
+ * @license    OMS License 1.0
+ * @version    1.0.0
+ * @link       http://orange-management.com
+ */
+namespace Modules\Draw;
+
+use Model\Message\FormValidation;
+use Modules\Draw\Models\DrawImage;
+use Modules\Draw\Models\DrawImageMapper;
+use Modules\Media\Models\UploadStatus;
+use phpOMS\Asset\AssetType;
+use phpOMS\Message\RequestAbstract;
+use phpOMS\Message\ResponseAbstract;
+use phpOMS\Model\Html\Head;
+use phpOMS\Module\ModuleAbstract;
+use phpOMS\Module\WebInterface;
+use Modules\Media\Controller as MediaController;
+use phpOMS\System\File\Local\File;
+use phpOMS\Utils\ImageUtils;
+use phpOMS\Views\View;
+
+/**
+ * Calendar controller class.
+ *
+ * @category   Modules
+ * @package    Draw
+ * @author     OMS Development Team <dev@oms.com>
+ * @author     Dennis Eichhorn <d.eichhorn@oms.com>
+ * @license    OMS License 1.0
+ * @link       http://orange-management.com
+ * @since      1.0.0
+ */
+class Controller extends ModuleAbstract implements WebInterface
+{
+
+    /**
+     * Module path.
+     *
+     * @var string
+     * @since 1.0.0
+     */
+    /* public */ const MODULE_PATH = __DIR__;
+
+    /**
+     * Module version.
+     *
+     * @var string
+     * @since 1.0.0
+     */
+    /* public */ const MODULE_VERSION = '1.0.0';
+
+    /**
+     * Module name.
+     *
+     * @var string
+     * @since 1.0.0
+     */
+    /* public */ const MODULE_NAME = 'Draw';
+
+    /**
+     * Providing.
+     *
+     * @var string
+     * @since 1.0.0
+     */
+    protected static $providing = [];
+
+    /**
+     * Dependencies.
+     *
+     * @var string
+     * @since 1.0.0
+     */
+    protected static $dependencies = [
+    ];
+
+    /**
+     * @param RequestAbstract  $request  Request
+     * @param ResponseAbstract $response Response
+     * @param mixed            $data     Generic data
+     *
+     * @return void
+     *
+     * @since  1.0.0
+     * @author Dennis Eichhorn <d.eichhorn@oms.com>
+     */
+    public function setUpDrawEditor(RequestAbstract $request, ResponseAbstract $response, $data = null)
+    {
+        /** @var Head $head */
+        $head = $response->get('Content')->getData('head');
+        $head->addAsset(AssetType::JSLATE, $request->getUri()->getBase() . 'Modules/Draw/Controller.js');
+        $head->addAsset(AssetType::JSLATE, $request->getUri()->getBase() . 'Modules/Draw/Models/DrawType.enum.js');
+        $head->addAsset(AssetType::JSLATE, $request->getUri()->getBase() . 'Modules/Draw/Models/Editor.js');
+    }
+
+    /**
+     * @param RequestAbstract  $request  Request
+     * @param ResponseAbstract $response Response
+     * @param mixed            $data     Generic data
+     *
+     * @return \Serializable
+     *
+     * @since  1.0.0
+     * @author Dennis Eichhorn <d.eichhorn@oms.com>
+     */
+    public function viewDrawCreate(RequestAbstract $request, ResponseAbstract $response, $data = null) : \Serializable
+    {
+        $view = new View($this->app, $request, $response);
+        $view->setTemplate('/Modules/Draw/Theme/Backend/draw-create');
+        $view->addData('nav', $this->app->moduleManager->get('Navigation')->createNavigationMid(1005201001, $request, $response));
+
+        return $view;
+    }
+
+    
+    /**
+     * @param RequestAbstract  $request  Request
+     * @param ResponseAbstract $response Response
+     * @param mixed            $data     Generic data
+     *
+     * @return \Serializable
+     *
+     * @since  1.0.0
+     * @author Dennis Eichhorn <d.eichhorn@oms.com>
+     */
+    public function viewDrawSingle(RequestAbstract $request, ResponseAbstract $response, $data = null) : \Serializable
+    {
+        $view = new View($this->app, $request, $response);
+        $view->setTemplate('/Modules/Draw/Theme/Backend/draw-single');
+        $view->addData('nav', $this->app->moduleManager->get('Navigation')->createNavigationMid(1005201001, $request, $response));
+
+        $view->addData('image', DrawImageMapper::get($request->getData('id')));
+
+        return $view;
+    }
+
+    /**
+     * @param RequestAbstract  $request  Request
+     * @param ResponseAbstract $response Response
+     * @param mixed            $data     Generic data
+     *
+     * @return \Serializable
+     *
+     * @since  1.0.0
+     * @author Dennis Eichhorn <d.eichhorn@oms.com>
+     */
+    public function viewDrawList(RequestAbstract $request, ResponseAbstract $response, $data = null) : \Serializable
+    {
+        $view = new View($this->app, $request, $response);
+        $view->setTemplate('/Modules/Draw/Theme/Backend/draw-list');
+        $view->addData('nav', $this->app->moduleManager->get('Navigation')->createNavigationMid(1005201001, $request, $response));
+
+        $images = DrawImageMapper::getNewest(25);
+        $view->addData('images', $images);
+
+        return $view;
+    }
+
+    private function validateDrawCreate(RequestAbstract $request) : array
+    {
+        $val = [];
+        if (
+            ($val['title'] = empty($request->getData('title')))
+            || ($val['image'] = empty($request->getData('image')))
+        ) {
+            return $val;
+        }
+
+        return [];
+    }
+
+    /**
+     * @param RequestAbstract  $request  Request
+     * @param ResponseAbstract $response Response
+     * @param mixed            $data     Generic data
+     *
+     * @since  1.0.0
+     * @author Dennis Eichhorn <d.eichhorn@oms.com>
+     */
+    public function apiDrawCreate(RequestAbstract $request, ResponseAbstract $response, $data = null)
+    {
+        if (!empty($val = $this->validateDrawCreate($request))) {
+            $response->set('draw_create', new FormValidation($val));
+
+            return;
+        }
+
+        $path = MediaController::createMediaPath();
+        $extension = 'png';
+        $filename = '';
+        $rnd = '';
+
+        // todo: implement limit since this could get exploited
+        do {
+            $filename = sha1($request->getData('image') . $rnd);
+            $filename .= '.' . $extension;
+
+            $rnd      = mt_rand();
+        } while (file_exists($path . '/' . $filename));
+
+        $fullPath = __DIR__ . '/../../' . $path . '/' . $filename;
+
+        $this->createLocalFile($fullPath, $request->getData('image'));
+
+        $status = [
+            'path' => $path,
+            'filename' => $filename,
+            'name' => $request->getData('title'),
+            'size' => File::size($fullPath),
+            'extension' => $extension,
+            'status' => UploadStatus::OK,
+        ];
+
+        $media = MediaController::createDbEntry($status, $request->getAccount());
+        $draw = DrawImage::fromMedia($media);
+
+        DrawImageMapper::create($draw);
+
+        $response->set('image', $draw->jsonSerialize());
+    }
+
+    private function createLocalFile(string $outputPath, string $raw) : bool
+    {
+        $imageData = ImageUtils::decodeBase64Image($raw);
+        File::put($outputPath, $imageData);
+
+        return true;
+    }
+
+}

Models/DrawImage.php

@@ -0,0 +1,154 @@
+<?php
+/**
+ * Orange Management
+ *
+ * PHP Version 7.1
+ *
+ * @category   TBD
+ * @package    TBD
+ * @author     OMS Development Team <dev@oms.com>
+ * @author     Dennis Eichhorn <d.eichhorn@oms.com>
+ * @copyright  2013 Dennis Eichhorn
+ * @license    OMS License 1.0
+ * @version    1.0.0
+ * @link       http://orange-management.com
+ */
+namespace Modules\Draw\Models;
+
+use Modules\Media\Models\Media;
+use phpOMS\Contract\ArrayableInterface;
+
+/**
+ * News article class.
+ *
+ * @category   Module
+ * @package    Framework
+ * @author     OMS Development Team <dev@oms.com>
+ * @author     Dennis Eichhorn <d.eichhorn@oms.com>
+ * @license    OMS License 1.0
+ * @link       http://orange-management.com
+ * @since      1.0.0
+ */
+class DrawImage implements ArrayableInterface, \JsonSerializable
+{
+
+    /**
+     * Article ID.
+     *
+     * @var int
+     * @since 1.0.0
+     */
+    private $id = 0;
+
+    /**
+     * Doc path for organizing.
+     *
+     * @var string
+     * @since 1.0.0
+     */
+    private $path = '';
+
+    /**
+     * Media object.
+     *
+     * @var Media
+     * @since 1.0.0
+     */
+    private $media = null;
+
+    /**
+     * Constructor.
+     *
+     * @since  1.0.0
+     * @author Dennis Eichhorn <d.eichhorn@oms.com>
+     */
+    public function __construct()
+    {
+    }
+
+    /**
+     * @return int
+     *
+     * @since  1.0.0
+     * @author Dennis Eichhorn <d.eichhorn@oms.com>
+     */
+    public function getId() : int
+    {
+        return $this->id;
+    }
+
+    /**
+     * @return string
+     *
+     * @since  1.0.0
+     * @author Dennis Eichhorn <d.eichhorn@oms.com>
+     */
+    public function getPath() : string
+    {
+        return $this->path;
+    }
+
+    /**
+     * @param string $path
+     *
+     * @return mixed
+     *
+     * @since  1.0.0
+     * @author Dennis Eichhorn <d.eichhorn@oms.com>
+     */
+    public function setPath(string $path)
+    {
+        $this->path = $path;
+    }
+
+    /**
+     * @return string
+     *
+     * @since  1.0.0
+     * @author Dennis Eichhorn <d.eichhorn@oms.com>
+     */
+    public function getMedia()
+    {
+        return $this->media;
+    }
+
+    /**
+     * @param string $media
+     *
+     * @return mixed
+     *
+     * @since  1.0.0
+     * @author Dennis Eichhorn <d.eichhorn@oms.com>
+     */
+    public function setMedia($media)
+    {
+        $this->media = $media;
+    }
+
+    public function toArray() : array
+    {
+        return [
+            'id' => $this->id,
+            'path' => $this->path,
+            'media' => $this->media->toArray(),
+        ];
+    }
+
+    public function __toString()
+    {
+        return json_encode($this->toArray());
+    }
+
+    public function jsonSerialize()
+    {
+        return $this->toArray();
+    }
+
+    public static function fromMedia(Media $media)
+    {
+        $image = new self();
+        $image->setMedia($media);
+
+        return $image;
+    }
+}

Models/DrawImageMapper.php

@@ -0,0 +1,126 @@
+<?php
+/**
+ * Orange Management
+ *
+ * PHP Version 7.1
+ *
+ * @category   TBD
+ * @package    TBD
+ * @author     OMS Development Team <dev@oms.com>
+ * @author     Dennis Eichhorn <d.eichhorn@oms.com>
+ * @copyright  2013 Dennis Eichhorn
+ * @license    OMS License 1.0
+ * @version    1.0.0
+ * @link       http://orange-management.com
+ */
+namespace Modules\Draw\Models;
+
+use Modules\Admin\Models\AccountMapper;
+use phpOMS\DataStorage\Database\DataMapperAbstract;
+use phpOMS\DataStorage\Database\Query\Builder;
+use phpOMS\DataStorage\Database\Query\Column;
+use phpOMS\DataStorage\Database\RelationType;
+
+class DrawImageMapper extends DataMapperAbstract
+{
+
+    /**
+     * Columns.
+     *
+     * @var array
+     * @since 1.0.0
+     */
+    static protected $columns = [
+        'draw_image_id'         => ['name' => 'draw_image_id', 'type' => 'int', 'internal' => 'id'],
+        'draw_image_media'    => ['name' => 'draw_image_media', 'type' => 'int', 'internal' => 'media'],
+        'draw_image_path'       => ['name' => 'draw_image_path', 'type' => 'string', 'internal' => 'path'],
+    ];
+
+    /**
+     * Has one relation.
+     *
+     * @var array
+     * @since 1.0.0
+     */
+    protected static $ownsOne = [
+        'media' => [
+            'mapper' => \Modules\Media\Models\MediaMapper::class,
+            'src'    => 'draw_image_media',
+        ],
+    ];
+
+    /**
+     * Primary table.
+     *
+     * @var string
+     * @since 1.0.0
+     */
+    protected static $table = 'draw_image';
+
+    /**
+     * Primary field name.
+     *
+     * @var string
+     * @since 1.0.0
+     */
+    protected static $primaryField = 'draw_image_id';
+
+    /**
+     * Create object.
+     *
+     * @param mixed $obj       Object
+     * @param int   $relations Behavior for relations creation
+     *
+     * @return mixed
+     *
+     * @since  1.0.0
+     * @author Dennis Eichhorn <d.eichhorn@oms.com>
+     */
+    public static function create($obj, int $relations = RelationType::ALL)
+    {
+        try {
+            $objId = parent::create($obj, $relations);
+            $query = new Builder(self::$db);
+            $query->prefix(self::$db->getPrefix())
+                ->insert(
+                    'account_permission_account',
+                    'account_permission_from',
+                    'account_permission_for',
+                    'account_permission_id1',
+                    'account_permission_id2',
+                    'account_permission_r',
+                    'account_permission_w',
+                    'account_permission_m',
+                    'account_permission_d',
+                    'account_permission_p'
+                )
+                ->into('account_permission')
+                ->values($obj->getMedia()->getCreatedBy(), 'draw', 'draw', 1, $objId, 1, 1, 1, 1, 1);
+
+            self::$db->con->prepare($query->toSql())->execute();
+        } catch (\Exception $e) {
+            return false;
+        }
+
+        return $objId;
+    }
+
+    /**
+     * Find.
+     *
+     * @param array $columns Columns to select
+     *
+     * @return Builder
+     *
+     * @since  1.0.0
+     * @author Dennis Eichhorn <d.eichhorn@oms.com>
+     */
+    public static function find(...$columns) : Builder
+    {
+        return parent::find(...$columns)->from('account_permission')
+            ->where('account_permission.account_permission_for', '=', 'editor')
+            ->where('account_permission.account_permission_id1', '=', 1)
+            ->where('news.news_id', '=', new Column('account_permission.account_permission_id2'))
+            ->where('account_permission.account_permission_r', '=', 1);
+    }
+}

Models/DrawType.enum.js

@@ -0,0 +1,22 @@
+/**
+ * DrawType.
+ *
+ * @author     OMS Development Team <dev@oms.com>
+ * @author     Dennis Eichhorn <d.eichhorn@oms.com>
+ * @copyright  Dennis Eichhorn
+ * @license    OMS License 1.0
+ * @version    1.0.0 * @since      1.0.0
+ */
+(function (jsOMS)
+{
+    "use strict";
+    /** @namespace jsOMS.Modules.Draw */
+    jsOMS.Autoloader.defineNamespace('jsOMS.Modules.Draw');
+    
+    jsOMS.Modules.Draw.DrawTypeEnum = Object.freeze({
+        DRAW: 0,
+        LINE: 1,
+        RECTANGLE: 2,
+        CIRCLE: 3
+    });
+}(window.jsOMS = window.jsOMS || {}));

Models/Editor.js

@@ -0,0 +1,213 @@
+(function (jsOMS)
+{
+    "use strict";
+    /** @namespace jsOMS.Modules.Draw */
+    jsOMS.Autoloader.defineNamespace('jsOMS.Modules.Draw');
+
+    jsOMS.Modules.Draw.Editor = function (editor)
+    {
+        this.editor = editor;
+        this.canvas = document.getElementsByTagName('canvas')[0];
+        this.canvasContainer = this.canvas.parentElement;
+        this.ctx = this.canvas.getContext("2d");
+
+        let canvasStyle = window.getComputedStyle(this.canvas, null),
+            canvasContainerStyle = window.getComputedStyle(this.canvasContainer, null);
+
+        this.resize({
+            width: parseFloat(canvasContainerStyle.width) - parseFloat(canvasContainerStyle.paddingLeft) - parseFloat(canvasContainerStyle.paddingRight) - parseFloat(canvasContainerStyle.borderLeftWidth) - parseFloat(canvasStyle.borderLeftWidth),
+            height: parseFloat(canvasContainerStyle.height) - parseFloat(canvasContainerStyle.paddingTop) - parseFloat(canvasContainerStyle.paddingBottom) - parseFloat(canvasContainerStyle.borderRightWidth) - parseFloat(canvasStyle.borderRightWidth)
+        });
+
+        // Backup for undo.
+        this.canvasBackup = document.createElement('canvas');
+        this.ctxBackup = this.canvasBackup.getContext("2d");
+
+        this.size = 1;
+        this.type = jsOMS.Modules.Draw.DrawTypeEnum.DRAW;
+        this.color = '#000000';
+        this.drawFlag = false;
+        this.oldPos = {x: 0, y: 0};
+        this.newPos = {x: 0, y: 0};
+
+        // All backup steps need to be stored here (draw, resize etc.)
+        // Undo means the whole canvas will be redrawn on the canvasBackup without the last step
+        this.undoHistory = [];
+        this.redoHistory = [];
+    };
+
+    jsOMS.Modules.Draw.Editor.prototype.bind = function ()
+    {
+        const self = this;
+
+        this.initCanvas();
+
+        this.canvasContainer.addEventListener('DOMAttrModified', function(evt) {
+            self.canvasStyle = window.getComputedStyle(self.canvas, null);
+            self.canvasContainerStyle = window.getComputedStyle(self.canvasContainer, null);
+
+            this.resize({
+                width: parseFloat(self.canvasContainerStyle.width) - parseFloat(self.canvasContainerStyle.paddingLeft) - parseFloat(self.canvasContainerStyle.paddingRight) - parseFloat(self.canvasContainerStyle.borderLeftWidth) - parseFloat(self.canvasStyle.borderLeftWidth),
+                height: parseFloat(self.canvasContainerStyle.height) - parseFloat(self.canvasContainerStyle.paddingTop) - parseFloat(self.canvasContainerStyle.paddingBottom) - parseFloat(self.canvasContainerStyle.borderRightWidth) - parseFloat(self.canvasStyle.borderRightWidth)
+            });
+        });
+
+        // Handle draw and resize
+        this.canvas.addEventListener('mousemove', function (evt)
+        {
+            if (!self.drawFlag || self.type === jsOMS.Modules.Draw.DrawTypeEnum.DRAW) {
+                self.oldPos = self.newPos;
+                self.newPos = self.mousePosition(evt);
+
+                if (self.type === jsOMS.Modules.Draw.DrawTypeEnum.DRAW) {
+                    self.draw(self.oldPos, self.newPos);
+                }
+            }
+        }, false);
+
+        this.canvas.addEventListener("mousedown", function (evt)
+        {
+            self.drawFlag = true;
+            self.oldPos = self.newPos;
+            self.newPos = self.mousePosition(evt);
+
+            if (self.drawFlag && self.type === jsOMS.Modules.Draw.DrawTypeEnum.DRAW) {
+                self.draw(self.newPos, self.newPos);
+            } else if (self.drawFlag && self.type === jsOMS.Modules.Draw.DrawTypeEnum.RECTANGLE || self.type === jsOMS.Modules.Draw.DrawTypeEnum.LINE || self.type === jsOMS.Modules.Draw.DrawTypeEnum.CIRCLE) {
+                self.oldPos = self.newPos;
+                self.newPos = self.mousePosition(evt);
+            }
+        }, false);
+
+        this.canvas.addEventListener("mouseup", function (evt)
+        {
+            self.oldPos = self.newPos;
+            self.newPos = self.mousePosition(evt);
+
+            if (self.drawFlag && self.type === jsOMS.Modules.Draw.DrawTypeEnum.RECTANGLE || self.type === jsOMS.Modules.Draw.DrawTypeEnum.LINE || self.type === jsOMS.Modules.Draw.DrawTypeEnum.CIRCLE) {
+                self.draw(self.oldPos, self.newPos);
+            }
+
+            self.drawFlag = false;
+        }, false);
+
+        this.canvas.addEventListener("mouseout", function (evt)
+        {
+            self.oldPos = self.newPos;
+            self.newPos = self.mousePosition(evt);
+
+            self.draw(self.oldPos, self.newPos);
+            self.drawFlag = false;
+            document.body.style.cursor = 'default';
+        }, false);
+    };
+
+    jsOMS.Modules.Draw.Editor.prototype.initCanvas = function()
+    {
+        const img = this.canvas.getAttribute('data-src'),
+            self = this;
+
+        if(typeof img !== 'undefined' && img.length > 0) {
+            let imgObj = new Image();
+
+            imgObj.addEventListener('load', function() {
+                self.canvas.width = imgObj.width;
+                self.canvas.height = imgObj.height;
+                self.canvas.getContext("2d").drawImage(imgObj, 0, 0);
+            });
+
+            imgObj.src = img;
+        }
+    };
+
+    jsOMS.Modules.Draw.Editor.prototype.draw = function (start, end)
+    {
+        if (this.drawFlag) {
+            this.ctx.beginPath();
+            this.ctx.strokeStyle = this.color;
+            this.ctx.lineWidth = this.size;
+
+            if (this.type === jsOMS.Modules.Draw.DrawTypeEnum.DRAW) {
+                this.ctx.moveTo(start.x, start.y);
+                this.ctx.lineTo(end.x, end.y);
+            } else if (this.type === jsOMS.Modules.Draw.DrawTypeEnum.RECTANGLE) {
+                this.ctx.rect(start.x, start.y, end.x - start.x, end.y - start.y);
+            } else if (this.type === jsOMS.Modules.Draw.DrawTypeEnum.CIRCLE) {
+                this.ctx.arc(start.x, start.y, Math.sqrt((end.x - start.x) * (end.x - start.x) + (end.y - start.y) * (end.y - start.y)), 0, 2 * Math.PI);
+            } else if (this.type === jsOMS.Modules.Draw.DrawTypeEnum.LINE) {
+                this.ctx.moveTo(start.x, start.y);
+                this.ctx.lineTo(end.x, end.y);
+            }
+
+            this.ctx.stroke();
+            // this.ctx.closePath();
+
+            // check if undo has space
+            // create backup to backup canvas
+            // remove x first undos from history
+            // add this step to undo
+        }
+    };
+
+    jsOMS.Modules.Draw.Editor.prototype.setSize = function (size)
+    {
+        this.size = size;
+    };
+
+    jsOMS.Modules.Draw.Editor.prototype.setType = function (type)
+    {
+        this.type = type;
+    };
+
+    jsOMS.Modules.Draw.Editor.prototype.setColor = function (color)
+    {
+        this.color = color;
+    };
+
+    jsOMS.Modules.Draw.Editor.prototype.toImage = function (callback)
+    {
+        const image = new Image();
+        image.onload = function ()
+        {
+            callback(image);
+        };
+
+        image.src = this.canvas.toDataURL('image/png');
+
+        // return image;
+    };
+
+    jsOMS.Modules.Draw.Editor.prototype.mousePosition = function (evt)
+    {
+        const rect = this.canvas.getBoundingClientRect();
+        return {
+            x: evt.clientX - rect.left - 0.5,
+            y: evt.clientY - rect.top - 0.5
+        };
+    };
+
+    jsOMS.Modules.Draw.Editor.prototype.resize = function (size)
+    {
+        const tmpCanvas = document.createElement('canvas');
+        tmpCanvas.width = this.canvas.width;
+        tmpCanvas.height = this.canvas.height;
+
+        tmpCanvas.getContext('2d').drawImage(this.canvas, 0, 0);
+
+        this.canvas.width = size.width;
+        this.canvas.height = size.height;
+
+        this.canvas.getContext('2d').drawImage(tmpCanvas, 0, 0, tmpCanvas.width, tmpCanvas.height, 0, 0, this.canvas.width, this.canvas.height);
+    };
+
+    jsOMS.Modules.Draw.Editor.prototype.scale = function (scale)
+    {
+        const tmpCanvas = document.createElement('canvas');
+        tmpCanvas.width = this.canvas.width;
+        tmpCanvas.height = this.canvas.height;
+
+        tmpCanvas.getContext('2d').drawImage(this.canvas, 0, 0);
+
+        this.canvas.getContext('2d').drawImage(tmpCanvas, 0, 0, tmpCanvas.width, tmpCanvas.height, 0, 0, scale.width, scale.height);
+    };
+}(window.jsOMS = window.jsOMS || {}));

Models/NullDrawImage.php

@@ -0,0 +1,31 @@
+<?php
+/**
+ * Orange Management
+ *
+ * PHP Version 7.1
+ *
+ * @category   TBD
+ * @package    TBD
+ * @author     OMS Development Team <dev@oms.com>
+ * @author     Dennis Eichhorn <d.eichhorn@oms.com>
+ * @copyright  2013 Dennis Eichhorn
+ * @license    OMS License 1.0
+ * @version    1.0.0
+ * @link       http://orange-management.com
+ */
+namespace Modules\Draw\Models;
+
+/**
+ * News article class.
+ *
+ * @category   Module
+ * @package    Framework
+ * @author     OMS Development Team <dev@oms.com>
+ * @author     Dennis Eichhorn <d.eichhorn@oms.com>
+ * @license    OMS License 1.0
+ * @link       http://orange-management.com
+ * @since      1.0.0
+ */
+class NullDrawImage extends DrawImage
+{
+}

ModuleDraw.js

@@ -0,0 +1,259 @@
+(function (jsOMS)
+{
+    "use strict";
+    
+    jsOMS.Modules.Draw = function (app)
+    {
+        this.app = app;
+        this.editors = [];
+    };
+
+    jsOMS.Modules.Draw.prototype.bind = function (id)
+    {
+        var temp = null;
+
+        if (typeof id !== 'undefined') {
+            temp = new jsOMS.Modules.Draw.Editor(document.getElementById(id));
+            temp.bind();
+
+            this.editors.push(temp);
+        } else {
+            var canvas = document.getElementsByClassName('m-draw');
+
+            this.editors = [];
+
+            /* Handle media forms */
+            for (var c = 0; c < canvas.length; c++) {
+                temp = new jsOMS.Modules.Draw.Editor(canvas[c]);
+                temp.bind();
+
+                this.editors.push(temp);
+            }
+        }
+    };
+
+    jsOMS.Modules.Draw.prototype.getElements = function ()
+    {
+        return this.editors;
+    };
+
+    jsOMS.Modules.Draw.prototype.count = function ()
+    {
+        return this.editors.length;
+    };
+}(window.jsOMS = window.jsOMS || {}));
+
+jsOMS.ready(function ()
+{
+    window.omsApp.moduleManager.get('Draw').bind();
+});
+
+/**
+ * DrawType.
+ *
+ * @author     OMS Development Team <dev@oms.com>
+ * @author     Dennis Eichhorn <d.eichhorn@oms.com>
+ * @copyright  Dennis Eichhorn
+ * @license    OMS License 1.0
+ * @version    1.0.0 * @since      1.0.0
+ */
+(function (jsOMS)
+{
+    "use strict";
+    
+    jsOMS.Modules.Draw.DrawTypeEnum = Object.freeze({
+        DRAW: 0,
+        LINE: 1,
+        RECTANGLE: 2,
+        CIRCLE: 3,
+    });
+}(window.jsOMS = window.jsOMS || {}));
+
+(function (jsOMS)
+{
+    "use strict";
+    
+    jsOMS.Modules.Draw.Editor = function (editor)
+    {
+        this.editor = editor;
+        this.canvas = document.getElementsByTagName('canvas')[0];
+        this.canvasContainer = this.canvas.parentElement;
+        this.ctx = this.canvas.getContext("2d");
+
+        var canvasStyle = window.getComputedStyle(this.canvas, null);
+        var canvasContainerStyle = window.getComputedStyle(this.canvasContainer, null);
+
+        this.resize({
+            width: parseFloat(canvasContainerStyle.width) - parseFloat(canvasContainerStyle.paddingLeft) - parseFloat(canvasContainerStyle.paddingRight) - parseFloat(canvasContainerStyle.borderLeftWidth) - parseFloat(canvasStyle.borderLeftWidth),
+            height: parseFloat(canvasContainerStyle.height) - parseFloat(canvasContainerStyle.paddingTop) - parseFloat(canvasContainerStyle.paddingBottom) - parseFloat(canvasContainerStyle.borderRightWidth) - parseFloat(canvasStyle.borderRightWidth)
+        });
+
+        // Backup for undo.
+        this.canvasBackup = document.createElement('canvas');
+        this.ctxBackup = this.canvasBackup.getContext("2d");
+
+        this.size = 1;
+        this.type = jsOMS.Modules.Draw.DrawTypeEnum.RECTANGLE;
+        this.color = '#000000';
+        this.drawFlag = false;
+        this.oldPos = {x: 0, y: 0};
+        this.newPos = {x: 0, y: 0};
+
+        // All backup steps need to be stored here (draw, resize etc.)
+        // Undo means the whole canvas will be redrawn on the canvasBackup without the last step
+        this.undoHistory = [];
+        this.redoHistory = [];
+    };
+
+    jsOMS.Modules.Draw.Editor.prototype.bind = function ()
+    {
+        var self = this;
+
+        // Handle draw and resize
+        this.canvas.addEventListener('mousemove', function (evt)
+        {
+            if (!self.drawFlag || self.type === jsOMS.Modules.Draw.DrawTypeEnum.DRAW) {
+                self.oldPos = self.newPos;
+                self.newPos = self.mousePosition(evt);
+
+                if (self.newPos.x < self.canvas.width - 1 && self.newPos.x > self.canvas.width - 5 && self.newPos.y < self.canvas.height - 1 && self.newPos.y > self.canvas.height - 5) {
+                    document.body.style.cursor = 'nwse-resize';
+                } else if (self.newPos.x > 1 && self.newPos.x < 5 && self.newPos.y > 1 && self.newPos.y < 5) {
+                    document.body.style.cursor = 'nwse-resize';
+                } else if (self.newPos.x > 1 && self.newPos.x < 5 && self.newPos.y < self.canvas.height - 1 && self.newPos.y > self.canvas.height - 5) {
+                    document.body.style.cursor = 'nesw-resize';
+                } else if (self.newPos.x < self.canvas.width - 1 && self.newPos.x > self.canvas.width - 5 && self.newPos.y > 1 && self.newPos.y < 5) {
+                    document.body.style.cursor = 'nesw-resize';
+                } else if (self.newPos.x < self.canvas.width - 1 && self.newPos.x > self.canvas.width - 5 && self.newPos.y > 5 && self.newPos.y < self.canvas.height - 5) {
+                    document.body.style.cursor = 'ew-resize';
+                } else if (self.newPos.x > 1 && self.newPos.x < 5 && self.newPos.y > 5 && self.newPos.y < self.canvas.height - 5) {
+                    document.body.style.cursor = 'ew-resize';
+                } else if (self.newPos.x > 5 && self.newPos.x < self.canvas.width - 5 && self.newPos.y < self.canvas.height - 1 && self.newPos.y > self.canvas.height - 5) {
+                    document.body.style.cursor = 'ns-resize';
+                } else if (self.newPos.x > 5 && self.newPos.x < self.canvas.width - 5 && self.newPos.y > 1 && self.newPos.y < 5) {
+                    document.body.style.cursor = 'ns-resize';
+                } else {
+                    document.body.style.cursor = 'default';
+                }
+
+                if (self.type === jsOMS.Modules.Draw.DrawTypeEnum.DRAW) {
+                    self.draw(self.oldPos, self.newPos);
+                }
+            }
+        }, false);
+
+        this.canvas.addEventListener("mousedown", function (evt)
+        {
+            self.drawFlag = true;
+            self.oldPos = self.newPos;
+            self.newPos = self.mousePosition(evt);
+
+            if (self.drawFlag && self.type === jsOMS.Modules.Draw.DrawTypeEnum.DRAW) {
+                self.draw(self.newPos, self.newPos);
+            } else if (self.drawFlag && self.type === jsOMS.Modules.Draw.DrawTypeEnum.RECTANGLE || self.type === jsOMS.Modules.Draw.DrawTypeEnum.LINE || self.type === jsOMS.Modules.Draw.DrawTypeEnum.CIRCLE) {
+                self.oldPos = self.newPos;
+                self.newPos = self.mousePosition(evt);
+            }
+        }, false);
+
+        this.canvas.addEventListener("mouseup", function (evt)
+        {
+            self.oldPos = self.newPos;
+            self.newPos = self.mousePosition(evt);
+
+            if (self.drawFlag && self.type === jsOMS.Modules.Draw.DrawTypeEnum.RECTANGLE || self.type === jsOMS.Modules.Draw.DrawTypeEnum.LINE || self.type === jsOMS.Modules.Draw.DrawTypeEnum.CIRCLE) {
+                self.draw(self.oldPos, self.newPos);
+            }
+
+            self.drawFlag = false;
+        }, false);
+
+        this.canvas.addEventListener("mouseout", function (evt)
+        {
+            self.oldPos = self.newPos;
+            self.newPos = self.mousePosition(evt);
+
+            self.draw(self.oldPos, self.newPos);
+            self.drawFlag = false;
+            document.body.style.cursor = 'default';
+        }, false);
+    };
+
+    jsOMS.Modules.Draw.Editor.prototype.draw = function (start, end)
+    {
+        if (this.drawFlag) {
+            this.ctx.beginPath();
+            this.ctx.strokeStyle = this.color;
+            this.ctx.lineWidth = this.size;
+
+            if (this.type === jsOMS.Modules.Draw.DrawTypeEnum.DRAW) {
+                this.ctx.moveTo(start.x, start.y);
+                this.ctx.lineTo(end.x, end.y);
+            } else if (this.type === jsOMS.Modules.Draw.DrawTypeEnum.RECTANGLE) {
+                this.ctx.rect(start.x, start.y, end.x - start.x, end.y - start.y);
+            } else if (this.type === jsOMS.Modules.Draw.DrawTypeEnum.CIRCLE) {
+                this.ctx.arc(start.x, start.y, Math.sqrt((end.x - start.x) * (end.x - start.x) + (end.y - start.y) * (end.y - start.y)), 0, 2 * Math.PI);
+            } else if (this.type === jsOMS.Modules.Draw.DrawTypeEnum.LINE) {
+                this.ctx.moveTo(start.x, start.y);
+                this.ctx.lineTo(end.x, end.y);
+            }
+
+            this.ctx.stroke();
+            // this.ctx.closePath();
+
+            // check if undo has space
+            // create backup to backup canvas
+            // remove x first undos from history
+            // add this step to undo
+        }
+    };
+
+    jsOMS.Modules.Draw.Editor.prototype.setSize = function (size)
+    {
+        this.size = size;
+    };
+
+    jsOMS.Modules.Draw.Editor.prototype.setType = function (type)
+    {
+        this.type = type;
+    };
+
+    jsOMS.Modules.Draw.Editor.prototype.setColor = function (color)
+    {
+        this.color = color;
+    };
+
+    jsOMS.Modules.Draw.Editor.prototype.mousePosition = function (evt)
+    {
+        var rect = this.canvas.getBoundingClientRect();
+        return {
+            x: evt.clientX - rect.left - 0.5,
+            y: evt.clientY - rect.top - 0.5
+        };
+    };
+
+    jsOMS.Modules.Draw.Editor.prototype.resize = function (size)
+    {
+        var tmpCanvas = document.createElement('canvas');
+        tmpCanvas.width = this.canvas.width;
+        tmpCanvas.height = this.canvas.height;
+
+        tmpCanvas.getContext('2d').drawImage(this.canvas, 0, 0);
+
+        this.canvas.width = size.width;
+        this.canvas.height = size.height;
+
+        this.canvas.getContext('2d').drawImage(tmpCanvas, 0, 0, tmpCanvas.width, tmpCanvas.height, 0, 0, this.canvas.width, this.canvas.height);
+    };
+
+    jsOMS.Modules.Draw.Editor.prototype.scale = function (scale)
+    {
+        var tmpCanvas = document.createElement('canvas');
+        tmpCanvas.width = this.canvas.width;
+        tmpCanvas.height = this.canvas.height;
+
+        tmpCanvas.getContext('2d').drawImage(this.canvas, 0, 0);
+
+        this.canvas.getContext('2d').drawImage(tmpCanvas, 0, 0, tmpCanvas.width, tmpCanvas.height, 0, 0, scale.width, scale.height);
+    };
+}(window.jsOMS = window.jsOMS || {}));

Theme/Backend/Lang/Navigation.en.lang.php

@@ -0,0 +1,20 @@
+<?php
+/**
+ * Orange Management
+ *
+ * PHP Version 7.1
+ *
+ * @category   TBD
+ * @package    TBD
+ * @author     OMS Development Team <dev@oms.com>
+ * @author     Dennis Eichhorn <d.eichhorn@oms.com>
+ * @copyright  Dennis Eichhorn
+ * @license    OMS License 1.0
+ * @version    1.0.0
+ * @link       http://orange-management.com
+ */
+return ['Navigation' => [
+    'Create' => 'Create',
+    'Draw'   => 'Draw',
+    'List'   => 'List',
+]];

Theme/Backend/Lang/api.en.lang.php

@@ -0,0 +1,17 @@
+<?php
+/**
+ * Orange Management
+ *
+ * PHP Version 7.1
+ *
+ * @category   TBD
+ * @package    TBD
+ * @author     OMS Development Team <dev@oms.com>
+ * @author     Dennis Eichhorn <d.eichhorn@oms.com>
+ * @copyright  Dennis Eichhorn
+ * @license    OMS License 1.0
+ * @version    1.0.0
+ * @link       http://orange-management.com
+ */
+return ['Navigation' => [
+]];

Theme/Backend/Lang/en.lang.php

@@ -0,0 +1,26 @@
+<?php
+/**
+ * Orange Management
+ *
+ * PHP Version 7.1
+ *
+ * @category   TBD
+ * @package    TBD
+ * @author     OMS Development Team <dev@oms.com>
+ * @author     Dennis Eichhorn <d.eichhorn@oms.com>
+ * @copyright  Dennis Eichhorn
+ * @license    OMS License 1.0
+ * @version    1.0.0
+ * @link       http://orange-management.com
+ */
+return ['Draw' => [
+    'Created'    => 'Created',
+    'Creator'    => 'Creator',
+    'Draw'       => 'Draw',
+    'GroupUser'  => 'Group/User',
+    'Images'     => 'Images',
+    'Layout'     => 'Layout',
+    'Name'       => 'Name',
+    'Permission' => 'Permission',
+    'Start'      => 'Start',
+]];

Theme/Backend/draw-create.tpl.php

@@ -0,0 +1,100 @@
+<?php
+/**
+ * Orange Management
+ *
+ * PHP Version 7.1
+ *
+ * @category   TBD
+ * @package    TBD
+ * @author     OMS Development Team <dev@oms.com>
+ * @author     Dennis Eichhorn <d.eichhorn@oms.com>
+ * @copyright  Dennis Eichhorn
+ * @license    OMS License 1.0
+ * @version    1.0.0
+ * @link       http://orange-management.com
+ */
+/**
+ * @var \phpOMS\Views\View $this
+ */
+
+echo $this->getData('nav')->render(); ?>
+
+<div class="row">
+    <div class="col-xs-12">
+        <section class="box wf-100">
+            <div class="inner">
+                <form id="drawForm" action="<?= \phpOMS\Uri\UriFactory::build('/{/lang}/api/draw?{?}&csrf={$CSRF}'); ?>" method="POST">
+                    <input type="text" id="iTitle" name="title" class="wf-100"><input type="submit" value="<?= $this->getText('Create', 0, 0); ?>">
+                </form>
+            </div>
+        </section>
+    </div>
+</div>
+
+<div class="row">
+    <div class="col-xs-12">
+        <div class="box wf-100">
+            <div class="tabular">
+                <ul class="tab-links">
+                    <li><label for="c-tab-1"><?= $this->getText('Start') ?></label>
+                    <li><label for="c-tab-2"><?= $this->getText('Layout') ?></label>
+                </ul>
+                <div class="tab-content">
+                    <input type="radio" id="c-tab-1" name="tabular-1" checked>
+                    <div class="tab">
+                        <ul class="h-list">
+                            <li><i class="fa fa-lg fa-floppy-o"></i>
+                            <li><i class="fa fa-lg fa-cloud-download"></i>
+                            <li><i class="fa fa-lg fa-undo"></i>
+                            <li><i class="fa fa-lg fa-repeat"></i>
+                            <li><i class="fa fa-lg fa-pencil"></i>
+                            <li><i class="fa fa-lg fa-paint-brush"></i>
+                            <li><i class="fa fa-lg fa-eraser"></i>
+                            <li><i class="fa fa-lg fa-minus"></i>
+                            <li><i class="fa fa-lg fa-square-o"></i>
+                            <li><i class="fa fa-lg fa-circle-thin"></i>
+                            <li><i class="fa fa-lg fa-tint"></i>
+                            <li><i class="fa fa-lg fa-bars"></i>
+                            <li><i class="fa fa-lg fa-i-cursor"></i>
+                            <li><i class="fa fa-lg fa-text-height"></i>
+                        </ul>
+                    </div>
+                    <input type="radio" id="c-tab-2" name="tabular-1">
+                    <div class="tab">
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div class="row">
+    <div class="col-xs-12">
+        <div class="m-draw">
+            <section class="box wf-100" style="height: 30%;">
+                <div class="inner resizable">
+                    <canvas id="canvasImage resizable" name="image" form="drawForm"></canvas>
+                </div>
+            </section>
+        </div>
+    </div>
+</div>
+
+<div class="row">
+    <div class="col-xs-12">
+        <section class="box wf-100">
+            <div class="inner">
+                <form>
+                    <table class="layout">
+                        <tr><td colspan="2"><label><?= $this->getText('Permission') ?></label>
+                        <tr><td><select>
+                                    <option>
+                                </select>
+                        <tr><td colspan="2"><label><?= $this->getText('GroupUser') ?></label>
+                        <tr><td><input id="iPermission" name="group" type="text" placeholder="&#xf084;"><td><button><?= $this->getText('Add', 0, 0) ?></button>
+                    </table>
+                </form>
+            </div>
+        </section>
+    </div>
+</div>

Theme/Backend/draw-list.tpl.php

@@ -0,0 +1,55 @@
+<?php
+/**
+ * Orange Management
+ *
+ * PHP Version 7.1
+ *
+ * @category   TBD
+ * @package    TBD
+ * @author     OMS Development Team <dev@oms.com>
+ * @author     Dennis Eichhorn <d.eichhorn@oms.com>
+ * @copyright  Dennis Eichhorn
+ * @license    OMS License 1.0
+ * @version    1.0.0
+ * @link       http://orange-management.com
+ */
+/**
+ * @var \phpOMS\Views\View $this
+ */
+
+$footerView = new \Web\Views\Lists\PaginationView($this->app, $this->request, $this->response);
+$footerView->setTemplate('/Web/Templates/Lists/Footer/PaginationBig');
+$footerView->setPages(20);
+$footerView->setPage(1);
+
+$images = $this->getData('images');
+
+echo $this->getData('nav')->render(); ?>
+<div class="row">
+    <div class="col-xs-12">
+        <div class="box wf-100">
+            <table class="table">
+                <caption><?= $this->getText('Images'); ?></caption>
+                <thead>
+                <tr>
+                    <td class="wf-100"><?= $this->getText('Name'); ?>
+                    <td><?= $this->getText('Creator'); ?>
+                    <td><?= $this->getText('Created'); ?>
+                <tfoot>
+                <tr>
+                    <td colspan="3"><?= $footerView->render(); ?>
+                <tbody>
+                <?php $count = 0; foreach($images as $key => $value) : $count++;
+                $url = \phpOMS\Uri\UriFactory::build('/{/lang}/backend/draw/single?{?}&id=' . $value->getId()); ?>
+                    <tr>
+                        <td><a href="<?= $url; ?>"><?= $value->getMedia()->getName(); ?></a>
+                        <td><a href="<?= $url; ?>"><?= $value->getMedia()->getCreatedBy(); ?></a>
+                        <td><a href="<?= $url; ?>"><?= $value->getMedia()->getCreatedAt()->format('Y-m-d'); ?></a>
+                <?php endforeach; ?>
+                <?php if($count === 0) : ?>
+                <tr><td colspan="5" class="empty"><?= $this->getText('Empty', 0, 0); ?>
+                        <?php endif; ?>
+            </table>
+        </div>
+    </div>
+</div>

Theme/Backend/draw-single.tpl.php

@@ -0,0 +1,102 @@
+<?php
+/**
+ * Orange Management
+ *
+ * PHP Version 7.1
+ *
+ * @category   TBD
+ * @package    TBD
+ * @author     OMS Development Team <dev@oms.com>
+ * @author     Dennis Eichhorn <d.eichhorn@oms.com>
+ * @copyright  Dennis Eichhorn
+ * @license    OMS License 1.0
+ * @version    1.0.0
+ * @link       http://orange-management.com
+ */
+/**
+ * @var \phpOMS\Views\View $this
+ */
+
+$image = $this->getData('image');
+
+echo $this->getData('nav')->render(); ?>
+
+<div class="row">
+    <div class="col-xs-12">
+        <section class="box wf-100">
+            <div class="inner">
+                <form id="drawForm" action="<?= \phpOMS\Uri\UriFactory::build('/{/lang}/api/draw?{?}&csrf={$CSRF}'); ?>" method="POST">
+                    <input type="text" id="iTitle" name="title" class="wf-100" value="<?= $image->getMedia()->getName(); ?>"><input type="submit" value="<?= $this->getText('Save', 0, 0); ?>">
+                </form>
+            </div>
+        </section>
+    </div>
+</div>
+
+<div class="row">
+    <div class="col-xs-12">
+        <div class="box wf-100">
+            <div class="tabular">
+                <ul class="tab-links">
+                    <li><label for="c-tab-1"><?= $this->getText('Start') ?></label>
+                    <li><label for="c-tab-2"><?= $this->getText('Layout') ?></label>
+                </ul>
+                <div class="tab-content">
+                    <input type="radio" id="c-tab-1" name="tabular-1" checked>
+                    <div class="tab">
+                        <ul class="h-list">
+                            <li><i class="fa fa-lg fa-floppy-o"></i>
+                            <li><i class="fa fa-lg fa-cloud-download"></i>
+                            <li><i class="fa fa-lg fa-undo"></i>
+                            <li><i class="fa fa-lg fa-repeat"></i>
+                            <li><i class="fa fa-lg fa-pencil"></i>
+                            <li><i class="fa fa-lg fa-paint-brush"></i>
+                            <li><i class="fa fa-lg fa-eraser"></i>
+                            <li><i class="fa fa-lg fa-minus"></i>
+                            <li><i class="fa fa-lg fa-square-o"></i>
+                            <li><i class="fa fa-lg fa-circle-thin"></i>
+                            <li><i class="fa fa-lg fa-tint"></i>
+                            <li><i class="fa fa-lg fa-bars"></i>
+                            <li><i class="fa fa-lg fa-i-cursor"></i>
+                            <li><i class="fa fa-lg fa-text-height"></i>
+                        </ul>
+                    </div>
+                    <input type="radio" id="c-tab-2" name="tabular-1">
+                    <div class="tab">
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div class="row">
+    <div class="col-xs-12">
+        <div class="m-draw">
+            <section class="box wf-100" style="height: 30%;">
+                <div class="inner resizable">
+                    <canvas data-src="<?= $this->request->getUri()->getBase() . $image->getMedia()->getPath(); ?>" id="canvasImage resizable" name="image" form="drawForm"></canvas>
+                </div>
+            </section>
+        </div>
+    </div>
+</div>
+
+<div class="row">
+    <div class="col-xs-12">
+        <section class="box wf-100">
+            <div class="inner">
+                <form>
+                    <table class="layout">
+                        <tr><td colspan="2"><label><?= $this->getText('Permission') ?></label>
+                        <tr><td><select>
+                                    <option>
+                                </select>
+                        <tr><td colspan="2"><label><?= $this->getText('GroupUser') ?></label>
+                        <tr><td><input id="iPermission" name="group" type="text" placeholder="&#xf084;"><td><button><?= $this->getText('Add', 0, 0) ?></button>
+                    </table>
+                </form>
+            </div>
+        </section>
+    </div>
+</div>

info.json

@@ -0,0 +1,45 @@
+{
+    "name": {
+        "id": 1005200000,
+        "internal": "Draw",
+        "external": "OMS Draw"
+    },
+    "version": "1.0.0",
+    "requirements": {
+        "phpOMS": "1.0.0",
+        "phpOMS-db": "1.0.0"
+    },
+    "creator": {
+        "name": "Orange Management",
+        "website": "www.spl1nes.com"
+    },
+    "description": "The administration module.",
+    "directory": "Draw",
+    "dependencies": {
+        "Admin" : "1.0.0",
+        "Media" : "1.0.0"
+    },
+    "providing": {
+        "Navigation": "*"
+    },
+    "load": [
+        {
+            "pid": [
+                "e19f4e17662b65bae885bc55cbb55797677ecc40"
+            ],
+            "type": 4,
+            "for": "Content",
+            "file": "Draw",
+            "from": "Draw"
+        },
+        {
+            "pid": [
+                "754a08ddf8bcb1cf22f310f09206dd783d42f7dd"
+            ],
+            "type": 5,
+            "from": "Draw",
+            "for": "Navigation",
+            "file": "Navigation"
+        }
+    ]
+}