|
|
@@ -8,14 +8,22 @@
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/pressure/2.1.2/jquery.pressure.min.js"></script>
|
|
|
<script src="../script/ao_module.js"></script>
|
|
|
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
|
|
|
+<script
|
|
|
+ src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
|
|
|
+ integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
|
|
|
+ crossorigin="anonymous"></script>
|
|
|
</head>
|
|
|
<body>
|
|
|
<div class="ts menu" style="position: absolute;width: 100vw;z-index: 2;">
|
|
|
<a class="item" onclick="save();">Save</a>
|
|
|
<a class="item" onclick="importimg();">Import</a>
|
|
|
<a class="item" id="mode" onclick="chgmode()">Normal</a>
|
|
|
+ <div class="right menu">
|
|
|
+ <a onclick="undo()" class="item">Undo</a>
|
|
|
+ <a onclick="redo()" class="item">Redo</a>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
-
|
|
|
+<img id="moveableimage" style="position: absolute;z-index:1"></img>
|
|
|
<canvas id="paintArea" width="100" height="100"></canvas>
|
|
|
|
|
|
<div style="position: fixed;bottom: 0;right: 0;">
|
|
|
@@ -25,6 +33,37 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+<div class="ts modals dimmer">
|
|
|
+ <dialog id="optionModal" class="ts modal">
|
|
|
+ <div class="header">
|
|
|
+ Save as
|
|
|
+ </div>
|
|
|
+ <div class="content">
|
|
|
+ <div class="ts form">
|
|
|
+
|
|
|
+ <div class="field">
|
|
|
+ <div class="ts labeled input" style="width:100%">
|
|
|
+ <div class="ts label">
|
|
|
+ /AOR/
|
|
|
+ </div>
|
|
|
+ <input type="text" id="path" placeholder="Enter path and filename here">
|
|
|
+ <button class="ts icon button" onClick="selectFolder();">
|
|
|
+ <i class="folder open icon"></i>
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="actions">
|
|
|
+ <button class="ts deny button">
|
|
|
+ Cancel
|
|
|
+ </button>
|
|
|
+ <button class="ts positive button" onclick="f_ok()">
|
|
|
+ Save
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </dialog>
|
|
|
+</div>
|
|
|
<div class="ts bottom right snackbar">
|
|
|
<div class="content"></div>
|
|
|
</div>
|
|
|
@@ -42,6 +81,11 @@ var currWidth = window.innerHeight;
|
|
|
$("#paintArea")[0].width = window.innerWidth;
|
|
|
$("#paintArea")[0].height = window.innerHeight;
|
|
|
|
|
|
+var action = [];
|
|
|
+var curractionid = -1;
|
|
|
+var hasunredo = false; // which indicates if user has done a redo or undo before touchdown
|
|
|
+addaction();
|
|
|
+
|
|
|
var color = ['#ff0000', '#ff8c00', '#fff600', '#00ff6e', '#00ffae', '#3b00ff', '#ae00ff', '#000000'];
|
|
|
color.forEach(function(element) {
|
|
|
$("#colorselector").prepend('<div class="cp" style="background-color: ' + element + ';width: 30px;height: 30px;border-radius: 50%;float: right;margin-right: 4px;" data-color="' + element + '" onclick="chgcolor(this)"></div>');
|
|
|
@@ -87,6 +131,11 @@ $(window).on('resize', function () {
|
|
|
var prevX = 0;
|
|
|
var prevY = 0;
|
|
|
$( "#paintArea" ).on('mousedown touchstart',function(e) {
|
|
|
+
|
|
|
+ if(hasunredo){
|
|
|
+ cleanaction();
|
|
|
+ }
|
|
|
+
|
|
|
console.log(e.pageX, e.pageY);
|
|
|
clicking = true;
|
|
|
if(!pmode){
|
|
|
@@ -115,18 +164,46 @@ $( "#paintArea" ).on('mousemove touchmove',function(e) {
|
|
|
|
|
|
$( "#paintArea" ).on('mouseup touchend',function(e) {
|
|
|
clicking = false;
|
|
|
+ addaction();
|
|
|
});
|
|
|
|
|
|
$("#width").on('change', function () {
|
|
|
width = $("#width").val() / 10;
|
|
|
});
|
|
|
|
|
|
-function save(){
|
|
|
- if (ao_module_virtualDesktop){
|
|
|
- ao_module_openFileSelector(Math.round(Math.random()*100,0),"setPathBySelector",undefined,undefined,false,"folder");
|
|
|
+function cleanaction(){
|
|
|
+ action.splice(curractionid + 1, action.length -1);
|
|
|
+}
|
|
|
+
|
|
|
+function addaction(){
|
|
|
+ var currImg = ctx.getImageData(0, 0, currWidth, currHeight);
|
|
|
+ action.push(currImg);
|
|
|
+ curractionid = curractionid + 1;
|
|
|
+}
|
|
|
+
|
|
|
+function undo(){
|
|
|
+ if(curractionid > 0){
|
|
|
+ curractionid = curractionid - 1;
|
|
|
+ console.log(curractionid);
|
|
|
+ ctx.putImageData(action[curractionid], 0, 0);
|
|
|
+ }else{
|
|
|
+ msgbox("Nothing to undo.","","");
|
|
|
+ }
|
|
|
+ hasunredo = true;
|
|
|
+}
|
|
|
+
|
|
|
+function redo(){
|
|
|
+ if(curractionid < action.length - 1){
|
|
|
+ curractionid = curractionid + 1;
|
|
|
+ ctx.putImageData(action[curractionid], 0, 0);
|
|
|
}else{
|
|
|
- ao_module_openFileSelectorTab(Math.round(Math.random()*100,0),"../",false,"folder",setPathBySelector);
|
|
|
+ msgbox("Nothing to redo.","","");
|
|
|
}
|
|
|
+ hasunredo = true;
|
|
|
+}
|
|
|
+
|
|
|
+function save(){
|
|
|
+ ts('#optionModal').modal("show");
|
|
|
}
|
|
|
|
|
|
function importimg(){
|
|
|
@@ -137,25 +214,49 @@ function importimg(){
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+var filepath = "";
|
|
|
function importselector(object){
|
|
|
var files = JSON.parse(object);
|
|
|
console.log(files);
|
|
|
+ filepath = "../" + files[0].filepath;
|
|
|
+ $("#moveableimage").attr("src","../" + files[0].filepath);
|
|
|
+ $("#moveableimage").draggable();
|
|
|
+ $(".ts.menu").html('<a class="item" onclick="confirmimport();">OK</a><a class="item" onclick="cancelimport();">Cancel</a><div class="right menu"> <a onclick="zin()" class="item">Zoom in</a> <a onclick="zout()" class="item">Zoom out</a></div></div>');
|
|
|
+}
|
|
|
+
|
|
|
+function confirmimport(){
|
|
|
+ if(hasunredo){
|
|
|
+ cleanaction();
|
|
|
+ }
|
|
|
+
|
|
|
var img = new Image();
|
|
|
img.onload = function() {
|
|
|
var ctx = document.getElementById('paintArea').getContext('2d');
|
|
|
- ctx.drawImage(img, 0, 0);
|
|
|
- msgbox("Imported /AOR/" + files[0].filepath);
|
|
|
+ var top = $("#moveableimage").position()["top"];
|
|
|
+ var left = $("#moveableimage").position()["left"];
|
|
|
+ console.log(top + " " + left);
|
|
|
+ ctx.drawImage(img, left, top, $("#moveableimage").width(), $("#moveableimage").height());
|
|
|
+ msgbox("Imported /AOR/" + filepath);
|
|
|
+ addaction();
|
|
|
+ cancelimport();
|
|
|
}
|
|
|
- img.src = "../" + files[0].filepath;
|
|
|
+ img.src = filepath;
|
|
|
}
|
|
|
|
|
|
-function setPathBySelector(object){
|
|
|
- var files = JSON.parse(object);
|
|
|
- console.log(files);
|
|
|
- $.post("save.php", { b64: $("#paintArea")[0].toDataURL('image/png'), path: files[0].filepath},
|
|
|
- function(data){
|
|
|
- msgbox("Saved as " + data);
|
|
|
- });
|
|
|
+function cancelimport(){
|
|
|
+ $(".ts.menu").html('<div class="ts menu" style="position: absolute;width: 100vw;z-index: 2;"> <a class="item" onclick="save();">Save</a> <a class="item" onclick="importimg();">Import</a> <a class="item" id="mode" onclick="chgmode()">Normal</a> <div class="right menu"> <a onclick="undo()" class="item">Undo</a> <a onclick="redo()" class="item">Redo</a> </div> </div>');
|
|
|
+ $("#moveableimage").removeAttr("src");
|
|
|
+ $("#moveableimage").removeAttr("style");
|
|
|
+ $("#moveableimage").removeAttr("class");
|
|
|
+ $("#moveableimage").attr("style","position: absolute;z-index:1");
|
|
|
+}
|
|
|
+
|
|
|
+function zin(){
|
|
|
+ $("#moveableimage").height($("#moveableimage").height() * 1.1);
|
|
|
+}
|
|
|
+
|
|
|
+function zout(){
|
|
|
+ $("#moveableimage").height($("#moveableimage").height() * 0.9);
|
|
|
}
|
|
|
|
|
|
function msgbox(content){
|
|
|
@@ -167,7 +268,7 @@ function msgbox(content){
|
|
|
});
|
|
|
}
|
|
|
|
|
|
- function preventPullToRefresh(element) {
|
|
|
+function preventPullToRefresh(element) {
|
|
|
var prevent = false;
|
|
|
|
|
|
document.querySelector(element).addEventListener('touchstart', function(e){
|
|
|
@@ -185,6 +286,31 @@ function msgbox(content){
|
|
|
});
|
|
|
}
|
|
|
|
|
|
- preventPullToRefresh('#paintArea') // pass #id or html tag into the method
|
|
|
+preventPullToRefresh('#paintArea'); // pass #id or html tag into the method
|
|
|
+
|
|
|
+
|
|
|
+//from 7z
|
|
|
+function f_ok(){
|
|
|
+ $.post("save.php", { b64: $("#paintArea")[0].toDataURL('image/png'), path: $("#path").val()},
|
|
|
+ function(data){
|
|
|
+ msgbox("Saved as " + data);
|
|
|
+ });
|
|
|
+}
|
|
|
+function getUUID(){
|
|
|
+ return new Date().getTime();
|
|
|
+}
|
|
|
+function selectFolder(){
|
|
|
+ if (ao_module_virtualDesktop){
|
|
|
+ ao_module_openFileSelector(getUUID(),setPathBySelector,undefined,undefined,false,"folder");
|
|
|
+ }else{
|
|
|
+ ao_module_openFileSelectorTab(getUUID(),"../",false,"folder",setPathBySelector);
|
|
|
+ }
|
|
|
+}
|
|
|
+function setPathBySelector(object){
|
|
|
+ var files = JSON.parse(object);
|
|
|
+ console.log(files);
|
|
|
+ $("#path").val(files[0].filepath);
|
|
|
+}
|
|
|
+
|
|
|
</script>
|
|
|
</html>
|
