1580158
/
a1111-mini-paint
mirror of https://github.com/0Tick/a1111-mini-paint
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Pan Tool 

Implementation of a simple tool to pan around the canvas. Also fixes some bugs and removes leftover code
pan-tool
0Tick 2023-05-29 00:17:30 +02:00
parent 038d5731ba
commit dd66edd797
10 changed files with 163 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
miniPaint/dist/bundle.js vendored
View File

File diff suppressed because one or more lines are too long

2
miniPaint/dist/bundle.js.map vendored
View File

File diff suppressed because one or more lines are too long

4
miniPaint/images/icons/pan.svg Normal file
View File

@ -0,0 +1,4 @@
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg width="800px" height="800px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path fill="none" stroke="#000000" stroke-width="2" d="M8.5,5.5 L12,2 L15.5,5.5 M22,12 L2,12 M5.5,8.5 L2,12 L5.5,15.5 M18.5,15.5 L22,12 L18.5,8.5 M12,22 L12,2 M8.5,18.5 L12,22 L15.5,18.5"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 407 B

1
miniPaint/service-worker.js
View File

@ -34,6 +34,7 @@ self.addEventListener('install', function(e) {
'./images/icons/magic_erase.svg',
'./images/icons/media.svg',
'./images/icons/menu.svg',
'./images/icons/pan.svg',
'./images/icons/pencil.svg',
'./images/icons/pick_color.svg',
'./images/icons/refresh.svg',

1
miniPaint/src/css/layout.css
View File

@ -302,6 +302,7 @@ body .sp-preview{
/*
IMPORTANT: any new icon should also must be added on /service-worker.js + its version should be updated - FEATURE DISABLED
*/
.sidebar_left .pan:after{ background-image: url('images/icons/pan.svg'); }
.sidebar_left .select:after{ background-image: url('images/icons/select.svg'); }
.sidebar_left .selection:after{ background-image: url('images/icons/selection.svg'); }
.sidebar_left .brush:after{ background-image: url('images/icons/brush.svg'); }

48
miniPaint/src/js/actions/reset-selection.js
View File

@ -17,13 +17,15 @@ export class Reset_selection_action extends Base_action {
async do() {
super.do();
this.settings_reference = app.Layers.Base_selection.find_settings();
this.old_settings_data = JSON.parse(JSON.stringify(this.settings_reference.data));
this.settings_reference.data = {
x: null,
y: null,
width: null,
height: null
if (app.Layers.Base_selection.find_settings != undefined) {
this.settings_reference = app.Layers.Base_selection.find_settings();
this.old_settings_data = JSON.parse(JSON.stringify(this.settings_reference.data));
this.settings_reference.data = {
x: null,
y: null,
width: null,
height: null
}
}
if (this.mirror_selection_settings) {
this.mirror_selection_settings.x = null;
@ -35,23 +37,23 @@ export class Reset_selection_action extends Base_action {
}
async undo() {
super.undo();
if (this.old_settings_data) {
for (let prop of ['x', 'y', 'width', 'height']) {
this.settings_reference.data[prop] = this.old_settings_data[prop];
if (this.mirror_selection_settings) {
this.mirror_selection_settings[prop] = this.old_settings_data[prop];
}
super.undo();
if (this.old_settings_data) {
for (let prop of ['x', 'y', 'width', 'height']) {
this.settings_reference.data[prop] = this.old_settings_data[prop];
if (this.mirror_selection_settings) {
this.mirror_selection_settings[prop] = this.old_settings_data[prop];
}
}
this.settings_reference = null;
this.old_settings_data = null;
config.need_render = true;
}
free() {
this.settings_reference = null;
this.old_settings_data = null;
this.mirror_selection_settings = null;
}
this.settings_reference = null;
this.old_settings_data = null;
config.need_render = true;
}
free() {
this.settings_reference = null;
this.old_settings_data = null;
this.mirror_selection_settings = null;
}
}

5
miniPaint/src/js/config.js
View File

@ -92,6 +92,11 @@ config.TOOLS = [
attributes: {},
on_leave: 'on_leave',
},
{
name: 'pan',
title: 'Pan around the canvas',
attributes: {}
},
{
name: 'brush',
attributes: {

33
miniPaint/src/js/modules/file/send.js
View File

@ -31,19 +31,7 @@ class File_send_class {
window.parent.a1111minipaint.createSendButton = this.createSendToMiniPaintButton
}
set_events() {
window.parent.a1111minipaint.recieveImage
document.addEventListener('keydown', (event) => {
var code = event.key.toLowerCase();
if (this.Helper.is_input(event.target))
return;
else if (code == "e" && event.shiftKey) {
this.sendImageGeneral();
event.preventDefault();
}
}, false);
}
dataURLtoFile(dataurl, filename) {
var arr = dataurl.split(','),
@ -225,13 +213,20 @@ class File_send_class {
}
createSendToMiniPaintButton(queryId, gallery) {
const existingButton = window.parent.gradioApp().querySelector(`#${queryId} button`);
const newButton = existingButton.cloneNode(true);
newButton.id = `${queryId}_open_in_minipaint`;
newButton.textContent = "Send to miniPaint";
var t = new File_send_class()
newButton.addEventListener("click", () => t.recieveImage(gallery));
window.parent.gradioApp().querySelector(`#${queryId}`).appendChild(newButton);
var existingButton = window.parent.gradioApp().querySelector(`#${queryId} button`);
const FSC = new File_send_class();
const addButton = () => {FSC.recieveImage(gallery)}
if (window.parent.gradioApp().querySelector(`#${queryId}_open_in_minipaint`) == null){
const newButton = existingButton.cloneNode(true);
newButton.id = `${queryId}_open_in_minipaint`;
newButton.textContent = "Send to miniPaint";
newButton.addEventListener("click", addButton);
window.parent.gradioApp().querySelector(`#${queryId}`).appendChild(newButton);
}
else {
existingButton = window.parent.gradioApp().querySelector(`#${queryId}_open_in_minipaint`);
existingButton.addEventListener("click", addButton);
}
}
recieveImage(gallery) {

106
miniPaint/src/js/tools/pan.js Normal file
View File

@ -0,0 +1,106 @@
import app from './../app.js';
import config from './../config.js';
import Base_tools_class from './../core/base-tools.js';
import Base_layers_class from './../core/base-layers.js';
import Helper_class from './../libs/helpers.js';
import Dialog_class from './../libs/popup.js';
import zoomView from '../libs/zoomView.js';
class Pan_tool_class extends Base_tools_class {
constructor(ctx) {
super();
this.Base_layers = new Base_layers_class();
this.name = 'pan';
this.last_x = null;
this.last_y = null;
}
load() {
var _this = this;
//mouse events
document.addEventListener('mousedown', function (e) {
_this.dragStart(e);
});
document.addEventListener('mousemove', function (e) {
_this.dragMove(e);
});
document.addEventListener('mouseup', function (e) {
_this.dragEnd(e);
});
// collect touch events
document.addEventListener('touchstart', function (e) {
_this.dragStart(e);
});
document.addEventListener('touchmove', function (e) {
_this.dragMove(e);
});
document.addEventListener('touchend', function (e) {
_this.dragEnd(e);
});
}
dragStart(event) {
var mouse = this.get_mouse_info(event);
if (config.TOOL.name != this.name)
return;
if (mouse.click_valid == false) {
return;
}
this.last_x = mouse.x;
this.last_y = mouse.y;
this.mousedown(event);
}
dragMove(event) {
var mouse = this.get_mouse_info(event);
if (config.TOOL.name != this.name)
return;
if (mouse.click_valid == false) {
return;
}
this.mousemove(event);
}
dragEnd(event) {
var mouse = this.get_mouse_info(event);
if (config.TOOL.name != this.name)
return;
if (mouse.click_valid == false) {
return;
}
this.Base_layers.render();
}
async mousedown(e) {
var mouse = this.get_mouse_info(e);
if (mouse.click_valid == false || config.mouse_lock === true) {
return;
}
this.mousedown_dimensions = {
x: Math.round(config.layer.x),
y: Math.round(config.layer.y),
width: Math.round(config.layer.width),
height: Math.round(config.layer.height)
};
}
mousemove(e) {
var mouse = this.get_mouse_info(e);
if (mouse.is_drag == false || mouse.click_valid == false || config.mouse_lock === true) {
return;
}
zoomView.move(Math.floor((this.last_x-mouse.x)*-zoomView.getScale()*0.9), Math.floor((this.last_y-mouse.y)*-zoomView.getScale()*0.9))
zoomView.apply()
this.last_x = mouse.x;
this.last_y = mouse.y;
config.need_render = true;
}
}
export default Pan_tool_class;

8
miniPaint/src/js/tools/selection.js
View File

@ -323,9 +323,11 @@ class Selection_class extends Base_tools_class {
let actions = [
new app.Actions.Reset_selection_action(this.selection)
];
delete config.layer.link_canvas;
this.reset_tmp_canvas();
return actions;
try {delete config.layer.link_canvas;}
finally{
this.reset_tmp_canvas();
return actions;
}
}
clear_selection() {