Merge branch 'master' of https://github.com/viliusle/miniPaint into feature/clipped-layer-shadow-192

images/test-collection.json

@@ -1605,7 +1605,9 @@
 			"composition": "source-over",
 			"rotate": 0,
 			"data": null,
-			"params": {},
+			"params": {
+				"fill_color": "#555555"
+			},
 			"status": null,
 			"color": null,
 			"filters": [],

index.html

@@ -8,7 +8,7 @@
 	<meta name="keywords" content="photo, image, picture, transparent, layers, free, edit, html5, canvas, javascript, online, photoshop, gimp, effects, sharpen, blur, magic eraser tool, clone tool, rotate, resize, photoshop online, online tools, tilt shift, sprites, keypoints" />
 	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=0" />
 	<link rel="icon" sizes="192x192" href="images/favicon.png">
-	<!-- <link rel="manifest" href="manifest.json"> -->
+	<!-- <link rel="manifest" href="dist/manifest.json"> -->
 	<!-- Google -->
 	<meta itemprop="name" content="miniPaint" />
 	<meta itemprop="description" content="miniPaint is free online image editor using HTML5. Edit, adjust your images, add effects online in your browser, without installing anything..." />

manifest-disabled.json

@@ -8,9 +8,9 @@
 	"description": "miniPaint is free online image editor using HTML5.",
 	"icons": [
 		{
-		"src": "images/manifest/48x48.png",
-		"sizes": "48x48",
-		"type": "image/png"
+			"src": "images/manifest/48x48.png",
+			"sizes": "48x48",
+			"type": "image/png"
 		},
 		{
 			"src": "images/manifest/72x72.png",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "miniPaint",
-  "version": "4.9.1",
+  "version": "4.9.2",
   "author": "Vilius L.",
   "description": "Online graphics editing tool lets create, edit images using HTML5 technologies.",
   "keywords": [
@@ -31,7 +31,7 @@
     "style-loader": "^2.0.0",
     "webpack": "^5.38.1",
     "webpack-cli": "^4.7.2",
-    "webpack-dev-server": "^3.11.2"
+    "webpack-dev-server": "^4.3.1"
   },
   "dependencies": {
     "@babel/runtime": "^7.14.5",

src/js/config.js

@@ -348,7 +348,9 @@ config.TOOLS = [
 	{
 		name: 'cog',
 		visible: false,
-		attributes: {},
+		attributes: {
+			fill_color: '#555555',
+		},
 	},
 	{
 		name: 'moon',

src/js/core/gui/gui-preview.js

@@ -16,7 +16,7 @@ var template = `
 	<div class="canvas_preview_details">
 		<div class="details">
 			<button title="Zoom out" class="layer_add trn" id="zoom_less"">-</button>
-			<button title="Reset zoom level"  class="layer_add trn" id="zoom_100"">100%</button>
+			<button title="Reset zoom level"  class="layer_add trn" id="zoom_100">100%</button>
 			<button title="Zoom in" class="layer_add trn" id="zoom_more"">+</button>
 			<button class="layer_add trn" id="zoom_fit">Fit</button>
 		</div>
@@ -209,7 +209,7 @@ class GUI_preview_class {
 		this.canvas_preview.stroke();
 	}
 
-	zoom(recalc) {
+	async zoom(recalc) {
 		if (recalc != undefined) {
 			//zoom-in or zoom-out
 			if (recalc == 1 || recalc == -1) {
@@ -275,6 +275,10 @@ class GUI_preview_class {
 
 		config.need_render = true;
 		this.GUI.prepare_canvas();
+
+		//sleep after last image import, it maybe not be finished yet
+		await new Promise(r => setTimeout(r, 10));
+
 		return true;
 	}
 

src/js/modules/file/open.js

@@ -347,7 +347,7 @@ class File_open_class {
 			var items = e.dataTransfer.items;
 			for (var i=0; i<items.length; i++) {
 				var item = items[i].webkitGetAsEntry();
-				if (item) {
+				if (item && item.isDirectory == true) {
 					this.traverseFileTree(item);
 				}
 			}
@@ -365,7 +365,9 @@ class File_open_class {
 				FR.file = file;
 
 				FR.onload = function (event) {
-					if (this.file.type.match('image.*')) {
+					if (this.file.type.match('image.*')
+						//below is fix for firefox, it has empty type
+						|| (this.file.type == '' && this.file.name.match(/\.(png|jpg|jpeg|webp|gif|avif)/g))) {
 						//image
 						var new_layer = {
 							name: this.file.name,
@@ -426,7 +428,7 @@ class File_open_class {
 	}
 
 	/**
-	 * includes provided resource (iamge or json)
+	 * includes provided resource (image or json)
 	 *
 	 * @param string resource_url
 	 */
@@ -589,6 +591,9 @@ class File_open_class {
 
 		const actions = [];
 
+		//reset zoom
+		await this.Base_gui.GUI_preview.zoom(100); //reset zoom
+
 		//set attributes
 		actions.push(
 			new app.Actions.Refresh_action_attributes_action('undo'),

src/js/tools/shapes/cog.js

@@ -47,13 +47,11 @@ class Cog_class extends Base_tools_class {
 
 	render(ctx, layer) {
 		var params = layer.params;
-		var fill = params.fill;
 
 		ctx.save();
 
 		//set styles
-		ctx.fillStyle = config.COLOR;
-		ctx.strokeStyle = config.COLOR;
+		ctx.fillStyle = params.fill_color;
 		ctx.lineWidth = 1;
 
 		//draw with rotation support
@@ -76,7 +74,6 @@ class Cog_class extends Base_tools_class {
 		var p = new Path2D("M190.883 502.932c-4.517 0-9.082-.991-13.368-3.055l-63.216-30.438c-13.348-6.426-20.255-21.479-16.422-35.794 3.684-13.757 8.609-29.81 14.376-46.879a195.425 195.425 0 0 1-15.733-19.711c-17.979 1.837-34.736 3.07-48.937 3.594-14.773.515-27.899-9.536-31.195-23.975L.776 278.273c-3.297-14.444 4.167-29.229 17.748-35.156 13.056-5.697 28.669-11.851 45.59-17.977a193.78 193.78 0 0 1 5.601-24.614c-12.655-12.922-24.061-25.246-33.297-35.989-9.643-11.217-9.939-27.761-.706-39.339l43.744-54.854c9.239-11.584 25.453-14.963 38.552-8.043 12.556 6.636 27.096 15.004 42.466 24.433a194.25 194.25 0 0 1 22.746-10.969c2.209-17.923 4.735-34.522 7.381-48.468 2.757-14.532 15.506-25.079 30.315-25.079h70.161c14.815 0 27.569 10.567 30.325 25.126 2.646 13.983 5.17 30.564 7.377 48.422a193.854 193.854 0 0 1 22.75 10.971c15.42-9.466 29.975-17.843 42.506-24.458 13.079-6.901 29.275-3.512 38.509 8.066l43.743 54.855c9.237 11.582 8.928 28.142-.738 39.374-9.254 10.756-20.646 23.066-33.263 35.957a193.79 193.79 0 0 1 5.601 24.62c16.986 6.145 32.615 12.304 45.634 17.992h.001c13.553 5.923 20.997 20.699 17.701 35.137l-15.615 68.4c-3.299 14.446-16.455 24.532-31.247 23.972-14.229-.531-30.97-1.762-48.889-3.588a195.251 195.251 0 0 1-15.728 19.703c5.791 17.122 10.723 33.189 14.394 46.921 3.819 14.291-3.093 29.324-16.436 35.748l-63.214 30.438c-13.351 6.428-29.426 2.438-38.224-9.484-8.455-11.455-17.931-25.313-27.679-40.466-8.425.548-16.745.548-25.176 0-9.772 15.201-19.257 29.075-27.702 40.508-5.964 8.075-15.283 12.499-24.824 12.5zm-61.851-61.915l61.516 29.619c15.437-20.988 29.097-42.937 36.43-54.579 26.665 3.104 31.829 3.053 58.035.001 6.932 10.997 20.8 33.291 36.445 54.576l61.515-29.619c-6.794-25.207-15.471-49.669-19.957-62.54 19.028-18.834 22.066-22.637 36.219-45.367 13.048 1.451 39.007 4.495 65.388 5.533l15.195-66.562c-24.034-10.441-48.695-18.946-61.337-23.387-2.824-26.58-3.888-31.341-12.882-56.619 9.27-9.299 27.886-27.753 45.083-47.657l-42.566-53.381c-22.622 12.001-44 25.528-56.513 33.37-22.495-14.328-26.889-16.481-52.31-25.228-1.474-12.904-4.292-38.972-9.156-64.958H221.86c-4.53 24.145-7.144 47.395-9.144 64.955-25.185 8.667-29.587 10.755-52.309 25.223-11.055-6.923-33.256-21.009-56.521-33.362l-42.568 53.379c16.896 19.57 35.133 37.669 45.088 47.647-8.943 25.131-10.043 29.878-12.885 56.613-12.366 4.348-37.104 12.879-61.339 23.397l15.192 66.562c25.642-.998 50.721-3.907 65.381-5.542 14.147 22.727 17.192 26.54 36.221 45.377-4.265 12.257-13.059 37.034-19.944 62.549zm351.667-168.554l.009.004-.009-.004zM256 347.486c-50.446 0-91.486-41.041-91.486-91.486s41.041-91.486 91.486-91.486c50.445 0 91.486 41.041 91.486 91.486S306.445 347.486 256 347.486zm0-150.972c-32.801 0-59.486 26.686-59.486 59.486S223.2 315.486 256 315.486 315.486 288.8 315.486 256 288.801 196.514 256 196.514z");
 
 		ctx.closePath();
-		ctx.stroke(p);
 		ctx.fill(p);
 	}
 

webpack.config.js

@@ -48,7 +48,9 @@ module.exports = {
 	devtool: "cheap-module-source-map",
 	devServer: {
 		// host: '0.0.0.0',
-		contentBase: "./",
-		compress: true
+		//contentBase: "./",
+		static: {
+			directory: path.resolve(__dirname, "./"),
+		},
 	}
 };