Jingga/oms-Draw
1
0
Fork 0
mirror of https://github.com/Karaka-Management/oms-Draw.git synced 2026-01-11 14:28:40 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

more tests and some fixes

Browse Source
This commit is contained in:
Dennis Eichhorn 2024-04-24 03:20:46 +00:00
parent 5c8a89bb1c
commit 1c8641439b
4 changed files with 63 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
.github/workflows/main.yml vendored
View File

@ -13,10 +13,15 @@ on:
- cron: '0 0 1,15 * *' - cron: '0 0 1,15 * *'
jobs: jobs:
general_module_workflow: general_module_workflow_php:
uses: Karaka-Management/Karaka/.github/workflows/php_template.yml@develop uses: Karaka-Management/Karaka/.github/workflows/php_template.yml@develop
secrets: secrets:
GH_TOKEN: ${{ secrets.GITHUB_TOKEN }} GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
GH_PAT: ${{ secrets.GH_PAT }} GH_PAT: ${{ secrets.GH_PAT }}
CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }} CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
general_module_workflow_js:
uses: Karaka-Management/Karaka/.github/workflows/js_template.yml@develop
secrets:
GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
GH_PAT: ${{ secrets.GH_PAT }}
CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}

12
Controller.js
View File

@ -1,5 +1,5 @@
(function (jsOMS) { (function (jsOMS) {
"use strict"; 'use strict';
/** @namespace jsOMS.Modules */ /** @namespace jsOMS.Modules */
jsOMS.Autoloader.defineNamespace('jsOMS.Modules.Draw'); jsOMS.Autoloader.defineNamespace('jsOMS.Modules.Draw');
@ -18,13 +18,13 @@
this.editors.push(temp); this.editors.push(temp);
} else { } else {
const canvas = document.getElementsByClassName('m-draw'), const canvas = document.getElementsByClassName('m-draw');
length = canvas.length; const length = canvas.length;
this.editors = []; this.editors = [];
/* Handle media forms */ /* Handle media forms */
for (let c = 0; c < canvas.length; ++c) { for (let c = 0; c < length; ++c) {
temp = new jsOMS.Modules.Draw.Editor(canvas[c], this.app); temp = new jsOMS.Modules.Draw.Editor(canvas[c], this.app);
temp.bind(); temp.bind();
@ -33,11 +33,11 @@
} }
}; };
jsOMS.Modules.Draw.prototype.getElements = function() { jsOMS.Modules.Draw.prototype.getElements = function () {
return this.editors; return this.editors;
}; };
jsOMS.Modules.Draw.prototype.count = function() { jsOMS.Modules.Draw.prototype.count = function () {
return this.editors.length; return this.editors.length;
}; };
}(window.jsOMS = window.jsOMS || {})); }(window.jsOMS = window.jsOMS || {}));

2
Models/DrawType.js
View File

@ -8,7 +8,7 @@
*/ */
(function (jsOMS) (function (jsOMS)
{ {
"use strict"; 'use strict';
/** @namespace jsOMS.Modules.Draw */ /** @namespace jsOMS.Modules.Draw */
jsOMS.Autoloader.defineNamespace('jsOMS.Modules.Draw'); jsOMS.Autoloader.defineNamespace('jsOMS.Modules.Draw');

74
Models/Editor.js
View File

@ -1,6 +1,6 @@
(function (jsOMS) (function (jsOMS)
{ {
"use strict"; 'use strict';
/** @namespace jsOMS.Modules.Draw */ /** @namespace jsOMS.Modules.Draw */
jsOMS.Autoloader.defineNamespace('jsOMS.Modules.Draw'); jsOMS.Autoloader.defineNamespace('jsOMS.Modules.Draw');
@ -10,26 +10,34 @@
this.app = app; this.app = app;
this.canvas = document.getElementsByTagName('canvas')[0]; this.canvas = document.getElementsByTagName('canvas')[0];
this.canvasContainer = this.canvas.parentElement; this.canvasContainer = this.canvas.parentElement;
this.ctx = this.canvas.getContext("2d"); this.ctx = this.canvas.getContext('2d');
let canvasStyle = window.getComputedStyle(this.canvas, null), const canvasStyle = window.getComputedStyle(this.canvas, null);
canvasContainerStyle = window.getComputedStyle(this.canvasContainer, null); const canvasContainerStyle = window.getComputedStyle(this.canvasContainer, null);
this.resize({ this.resize({
width: parseFloat(canvasContainerStyle.width) - parseFloat(canvasContainerStyle.paddingLeft) - parseFloat(canvasContainerStyle.paddingRight) - parseFloat(canvasContainerStyle.borderLeftWidth) - parseFloat(canvasStyle.borderLeftWidth), width: parseFloat(canvasContainerStyle.width)
height: parseFloat(canvasContainerStyle.height) - parseFloat(canvasContainerStyle.paddingTop) - parseFloat(canvasContainerStyle.paddingBottom) - parseFloat(canvasContainerStyle.borderRightWidth) - parseFloat(canvasStyle.borderRightWidth) - 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. // Backup for undo.
this.canvasBackup = document.createElement('canvas'); this.canvasBackup = document.createElement('canvas');
this.ctxBackup = this.canvasBackup.getContext("2d"); this.ctxBackup = this.canvasBackup.getContext('2d');
this.size = 1; this.size = 1;
this.type = jsOMS.Modules.Draw.DrawTypeEnum.DRAW; this.type = jsOMS.Modules.Draw.DrawTypeEnum.DRAW;
this.color = '#000000'; this.color = '#000000';
this.drawFlag = false; this.drawFlag = false;
this.oldPos = {x: 0, y: 0}; this.oldPos = { x: 0, y: 0 };
this.newPos = {x: 0, y: 0}; this.newPos = { x: 0, y: 0 };
// All backup steps need to be stored here (draw, resize etc.) // 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 // Undo means the whole canvas will be redrawn on the canvasBackup without the last step
@ -43,16 +51,24 @@
this.initCanvas(); this.initCanvas();
this.app.eventManager.attach(this.canvasContainer.id, function(evt) { this.app.eventManager.attach(this.canvasContainer.id, function (evt) {
self.canvasStyle = window.getComputedStyle(self.canvas, null); self.canvasStyle = window.getComputedStyle(self.canvas, null);
self.canvasContainerStyle = window.getComputedStyle(self.canvasContainer, null); self.canvasContainerStyle = window.getComputedStyle(self.canvasContainer, null);
this.resize({ this.resize({
width: parseFloat(self.canvasContainerStyle.width) - parseFloat(self.canvasContainerStyle.paddingLeft) - parseFloat(self.canvasContainerStyle.paddingRight) - parseFloat(self.canvasContainerStyle.borderLeftWidth) - parseFloat(self.canvasStyle.borderLeftWidth), width: parseFloat(self.canvasContainerStyle.width)
height: parseFloat(self.canvasContainerStyle.height) - parseFloat(self.canvasContainerStyle.paddingTop) - parseFloat(self.canvasContainerStyle.paddingBottom) - parseFloat(self.canvasContainerStyle.borderRightWidth) - parseFloat(self.canvasStyle.borderRightWidth) - 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)
}); });
}); });
this.app.uiManager.getDOMObserver().observe(this.canvasContainer, {childList: true, subtree: true}); this.app.uiManager.getDOMObserver().observe(this.canvasContainer, { childList: true, subtree: true });
// Handle draw and resize // Handle draw and resize
this.canvas.addEventListener('mousemove', function (evt) this.canvas.addEventListener('mousemove', function (evt)
@ -67,7 +83,7 @@
} }
}, false); }, false);
this.canvas.addEventListener("mousedown", function (evt) this.canvas.addEventListener('mousedown', function (evt)
{ {
self.drawFlag = true; self.drawFlag = true;
self.oldPos = self.newPos; self.oldPos = self.newPos;
@ -75,25 +91,31 @@
if (self.drawFlag && self.type === jsOMS.Modules.Draw.DrawTypeEnum.DRAW) { if (self.drawFlag && self.type === jsOMS.Modules.Draw.DrawTypeEnum.DRAW) {
self.draw(self.newPos, self.newPos); 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) { } 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.oldPos = self.newPos;
self.newPos = self.mousePosition(evt); self.newPos = self.mousePosition(evt);
} }
}, false); }, false);
this.canvas.addEventListener("mouseup", function (evt) this.canvas.addEventListener('mouseup', function (evt)
{ {
self.oldPos = self.newPos; self.oldPos = self.newPos;
self.newPos = self.mousePosition(evt); 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) { 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.draw(self.oldPos, self.newPos);
} }
self.drawFlag = false; self.drawFlag = false;
}, false); }, false);
this.canvas.addEventListener("mouseout", function (evt) this.canvas.addEventListener('mouseout', function (evt)
{ {
self.oldPos = self.newPos; self.oldPos = self.newPos;
self.newPos = self.mousePosition(evt); self.newPos = self.mousePosition(evt);
@ -104,19 +126,19 @@
}, false); }, false);
}; };
jsOMS.Modules.Draw.Editor.prototype.initCanvas = function() jsOMS.Modules.Draw.Editor.prototype.initCanvas = function ()
{ {
const img = this.canvas.getAttribute('data-src'), const img = this.canvas.getAttribute('data-src');
self = this; const self = this;
if (img !== null && typeof img !== 'undefined' && img.length > 0) { if (img !== null && typeof img !== 'undefined' && img.length > 0) {
/** global: Image */ /** global: Image */
let imgObj = new Image(); const imgObj = new Image();
imgObj.addEventListener('load', function() { imgObj.addEventListener('load', function () {
self.canvas.width = imgObj.width; self.canvas.width = imgObj.width;
self.canvas.height = imgObj.height; self.canvas.height = imgObj.height;
self.canvas.getContext("2d").drawImage(imgObj, 0, 0); self.canvas.getContext('2d').drawImage(imgObj, 0, 0);
}); });
imgObj.src = img; imgObj.src = img;
@ -136,7 +158,9 @@
} else if (this.type === jsOMS.Modules.Draw.DrawTypeEnum.RECTANGLE) { } else if (this.type === jsOMS.Modules.Draw.DrawTypeEnum.RECTANGLE) {
this.ctx.rect(start.x, start.y, end.x - start.x, end.y - start.y); this.ctx.rect(start.x, start.y, end.x - start.x, end.y - start.y);
} else if (this.type === jsOMS.Modules.Draw.DrawTypeEnum.CIRCLE) { } 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); 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) { } else if (this.type === jsOMS.Modules.Draw.DrawTypeEnum.LINE) {
this.ctx.moveTo(start.x, start.y); this.ctx.moveTo(start.x, start.y);
this.ctx.lineTo(end.x, end.y); this.ctx.lineTo(end.x, end.y);