Merge branch 'finder' of github.com:django-cms/django-filer into finder

Author: jrief

client/browser/FinderFileSelect.tsx

@@ -1,9 +1,10 @@
-import React, {useEffect, useRef, useState} from 'react';
+import React, {RefObject, useEffect, useRef, useState} from 'react';
 import FileSelectDialog from './FileSelectDialog';
 
 
 export default function FinderFileSelect(props) {
 	const shadowRoot = props.container;
+	const hostRef = useRef(shadowRoot.host);
 	const baseUrl = props['base-url'];
 	const styleUrl = props['style-url'];
 	const selectRef = useRef(null);
@@ -13,6 +14,12 @@ export default function FinderFileSelect(props) {
 	const csrfToken = getCSRFToken();
 	const uuid5Regex = new RegExp(/^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i);
 
+	useMutationObserver(hostRef, (mutationList) => {
+		for (const mutation of mutationList) {
+			console.log(`The ${mutation.attributeName} attribute was modified.`);
+		}
+	}, {attributes: true});
+
 	useEffect(() => {
 		// Create a styles element for the shadow DOM
 		const link = document.createElement('link');

client/common/DropDownMenu.tsx

@@ -47,11 +47,11 @@ export default function DropDownMenu(props){
 			className={props.className}
 		>
 			<Tooltip>
-				<TooltipTrigger><i>{props.icon}</i></TooltipTrigger>
+				<TooltipTrigger>{props.label ? props.label : ''}{props.icon && <i>{props.icon}</i>}</TooltipTrigger>
 				<TooltipContent root={props.root}>{props.tooltip}</TooltipContent>
-			<ul role="listbox">
-				{props.children}
-			</ul>
+				<ul role="listbox">
+					{props.children}
+				</ul>
 			</Tooltip>
 		</WrapperElement>
 	)

client/common/Tooltip.tsx

@@ -106,10 +106,9 @@ export const TooltipTrigger = forwardRef<
 	HTMLProps<HTMLElement>
 >(({children, ...props}, forwardedRef) => {
 	const context = useTooltipContext();
-	const childrenRef = (children as any).ref;
-	const ref = useMergeRefs([context.refs.setReference, forwardedRef, childrenRef]);
+	const ref = useMergeRefs([context.refs.setReference, forwardedRef]);
 
-		return (
+	return (
 		<div
 			ref={ref}
 			// The user can style the trigger based on the state

client/components/editor/Image.tsx

@@ -1,5 +1,6 @@
 import React, {Fragment, useEffect, useRef, useState} from 'react';
 import ReactCrop, {Crop} from 'react-image-crop';
+import DropDownMenu from '../../common/DropDownMenu';
 import FileDetails from '../../admin/FileDetails';
 import ClearCropIcon from '../../icons/clear-crop.svg';
 
@@ -13,8 +14,15 @@ export default function Image(props) {
 		width: document.getElementById('id_width') as HTMLInputElement,
 		height: document.getElementById('id_height') as HTMLInputElement,
 	};
+	const gravityField = document.getElementById('id_gravity') as HTMLInputElement;
 	const [crop, setCrop] = useState<Crop>(null);
+	const [gravity, setGravity] = useState<string>(gravityField.value);
 	const ref = useRef(null);
+	const gravityOptions = {
+		'': gettext("Center"), 'n': gettext("North"), 'ne': gettext("Northeast"),
+		 'e': gettext("East"), 'se': gettext("Southeast"), 's': gettext("South"),
+		 'sw': gettext("Southwest"), 'w': gettext("West"), 'nw': gettext("Northwest"),
+	};
 
 	useEffect(() => {
 		const crop = () => {
@@ -52,9 +60,23 @@ export default function Image(props) {
 		}
 	}
 
+	function getItemProps(value: string) {
+		return {
+			role: 'option',
+			'aria-selected': gravity === value,
+			onClick: () => {
+				setGravity(value);
+				gravityField.value = value;
+			},
+		};
+	}
+
 	const controlButtons = [
 		<Fragment key="clear-crop">
 			<button type="button" onClick={() => handleChange(null)}><ClearCropIcon/>{gettext("Clear selection")}</button>
+			<DropDownMenu className="with-caret" wrapperElement="div" label={gettext("Gravity") + ": " + gravityOptions[gravity]} tooltip={gettext("Align image before cropping")}>
+				{Object.entries(gravityOptions).map(([value, label]) => (<li {...getItemProps(value)}>{label}</li>))}
+			</DropDownMenu>
 		</Fragment>
 	];
 

client/scss/_dropdown.scss

@@ -48,7 +48,7 @@
 				background-color: $selected-row-color;
 
 				&::after {
-					content: "✔";
+					content: "✓";
 					position: absolute;
 					right: 10px;
 				}

client/scss/finder-admin.scss

@@ -690,6 +690,46 @@ ul.messagelist {
 					width: 20px;
 				}
 			}
+			[role="combobox"] {
+				font-weight: 400;
+				border-radius: 4px;
+				padding: 5px 15px;
+				line-height: 25px;
+				color: var(--button-fg);
+				background: var(--default-button-bg);
+				margin-right: 10px;
+				margin-bottom: 10px;
+				&[aria-expanded="false"] {
+					cursor: pointer;
+					&:hover {
+						background: var(--default-button-hover-bg);
+					}
+				}
+				&::after {
+					margin-left: 10px;
+					border-top-color: var(--button-fg);
+				}
+				[role="listbox"] {
+					color: inherit;
+					background-color: inherit;
+					padding: 5px;
+					> li {
+						padding: 0 30px 0 10px;
+						cursor: pointer;
+						&:hover {
+							background-color: var(--default-button-hover-bg);
+						}
+						&[aria-selected=true] {
+							color: $selected-row-color;
+							background-color: inherit;
+
+							&::after {
+								content: "✓";
+							}
+						}
+					}
+				}
+			}
 		}
 	}
 

finder/contrib/image/forms.py

@@ -22,12 +22,16 @@ class ImageFileForm(EntangledModelFormMixin, FileForm):
     )
     width = IntegerField(widget=HiddenInput())
     height = IntegerField(widget=HiddenInput())
+    gravity = CharField(
+        widget=HiddenInput(),
+        required=False,
+    )
     alt_text = CharField(
         widget=TextInput(attrs={'size': 100}),
         required=False,
     )
 
     class Meta:
         model = ImageFileModel
-        entangled_fields = {'meta_data': ['crop_x', 'crop_y', 'crop_size', 'alt_text']}
+        entangled_fields = {'meta_data': ['crop_x', 'crop_y', 'crop_size', 'gravity', 'alt_text']}
         untangled_fields = ['name', 'labels', 'width', 'height']

finder/contrib/image/models.py

@@ -29,21 +29,22 @@ class Meta:
     def summary(self):
         return "{width}×{height}px ({size})".format(size=super().summary, width=self.width, height=self.height)
 
-    def get_thumbnail_path(self, crop_x=None, crop_y=None, crop_size=None):
+    def get_thumbnail_path(self, crop_x=None, crop_y=None, crop_size=None, gravity=None):
         id = str(self.id)
         thumbnail_folder = self.filer_public_thumbnails / f'{id[0:2]}/{id[2:4]}/{id}'
         thumbnail_path = Path(self.file_name)
         if crop_x is None or crop_y is None or crop_size is None:
             thumbnail_path_template = '{stem}__{width}x{height}{suffix}'
         else:
             crop_x, crop_y, crop_size = int(crop_x), int(crop_y), int(crop_size)
-            thumbnail_path_template = '{stem}__{width}x{height}__{crop_x}_{crop_y}_{crop_size}{suffix}'
+            thumbnail_path_template = '{stem}__{width}x{height}__{crop_x}_{crop_y}_{crop_size}{gravity}{suffix}'
         return thumbnail_folder / thumbnail_path_template.format(
             stem=thumbnail_path.stem,
             width=self.thumbnail_size,
             height=self.thumbnail_size,
             crop_x=crop_x,
             crop_y=crop_y,
             crop_size=crop_size,
+            gravity=gravity or '',
             suffix=thumbnail_path.suffix,
         )

finder/contrib/image/pil/models.py

@@ -44,46 +44,19 @@ def save(self, **kwargs):
         super().save(**kwargs)
 
     def get_thumbnail_url(self):
-        crop_x, crop_y, crop_size = (
-            self.meta_data.get('crop_x'), self.meta_data.get('crop_y'), self.meta_data.get('crop_size')
+        crop_x, crop_y, crop_size, gravity = (
+            self.meta_data.get('crop_x'), self.meta_data.get('crop_y'), self.meta_data.get('crop_size'),
+            self.meta_data.get('gravity')
         )
-        thumbnail_path = self.get_thumbnail_path(crop_x, crop_y, crop_size)
+        thumbnail_path = self.get_thumbnail_path(crop_x, crop_y, crop_size, gravity)
         if not default_storage.exists(thumbnail_path):
             try:
                 image = Image.open(default_storage.open(self.file_path))
                 image = self.orientate_top(image)
                 if crop_x is None or crop_y is None or crop_size is None:
                     image = self.crop_centered(image)
                 else:
-                    # with cropping, the expected resizing could be done using:
-                    # `image = image.crop((crop_x, crop_y, crop_x + crop_size, crop_y + crop_size))`
-                    # however, for small selections or images in low resolution this might result
-                    # in blurry preview images. We therefore want to use at least `thumbnail_size`
-                    # pixels from the original image
-                    min_size = max(crop_size, self.thumbnail_size)
-                    off_size = min_size / 2 - crop_size / 2
-                    min_x = max(crop_x - off_size, 0)
-                    min_y = max(crop_y - off_size, 0)
-                    if min_x + min_size > image.width:
-                        min_x = max(image.width - min_size, 0)
-                        max_x = image.width
-                    else:
-                        max_x = min_x + min_size
-                    if min_y + min_size > image.height:
-                        min_y = max(image.height - min_size, 0)
-                        max_y = image.height
-                    else:
-                        max_y = min_y + min_size
-                    # correct thumbnailing for low resolution images with an aspect ratio unequal to 1
-                    if round(max_x - min_x) > round(max_y - min_y):
-                        off_size = (max_x - min_x - max_y + min_y) / 2
-                        min_x += off_size
-                        max_x -= off_size
-                    elif round(max_x - min_x) < round(max_y - min_y):
-                        off_size = (max_y - min_y - max_x + min_x) / 2
-                        min_y += off_size
-                        max_y -= off_size
-                    image = image.crop((min_x, min_y, max_x, max_y))
+                    image = self.crop_eccentric(image, crop_x, crop_y, crop_size, gravity)
                 image.thumbnail((self.thumbnail_size, self.thumbnail_size))
                 (default_storage.base_location / thumbnail_path.parent).mkdir(parents=True, exist_ok=True)
                 image.save(default_storage.open(thumbnail_path, 'wb'), image.format)
@@ -124,3 +97,54 @@ def crop_centered(self, image):
             right = width
             bottom = (height + width) / 2
         return image.crop((left, top, right, bottom))
+
+    def crop_eccentric(self, image, crop_x, crop_y, crop_size, gravity):
+        """
+        with cropping, the expected resizing could be done using:
+        `image = image.crop((crop_x, crop_y, crop_x + crop_size, crop_y + crop_size))`
+        however, for small selections or images in low resolution this might result
+        in blurry preview images. We therefore want to use at least `thumbnail_size`
+        pixels from the original image
+        """
+        min_size = max(crop_size, self.thumbnail_size)
+        off_size = min_size - crop_size
+
+        # horizontal thumbnailing
+        if gravity in ('e', 'ne', 'se'):
+            max_x = min(crop_x + min_size, image.width)
+            min_x = max(max_x - min_size, 0)
+        elif gravity in ('w', 'nw', 'sw'):
+            min_x = max(crop_x - off_size, 0)
+        else:
+            min_x = max(crop_x - off_size / 2, 0)
+        if min_x + min_size > image.width:
+            min_x = max(image.width - min_size, 0)
+            max_x = image.width
+        else:
+            max_x = min_x + min_size
+
+        # vertical thumbnailing
+        if gravity in ('s', 'se', 'sw'):
+            max_y = min(crop_y + min_size, image.height)
+            min_y = max(max_y - min_size, 0)
+        elif gravity in ('n', 'ne', 'nw'):
+            min_y = max(crop_y - off_size, 0)
+        else:
+            min_y = max(crop_y - off_size / 2, 0)
+        if min_y + min_size > image.height:
+            min_y = max(image.height - min_size, 0)
+            max_y = image.height
+        else:
+            max_y = min_y + min_size
+
+        # correct thumbnailing for low resolution images with an aspect ratio unequal to 1
+        if round(max_x - min_x) > round(max_y - min_y):
+            off_size = (max_x - min_x - max_y + min_y) / 2
+            min_x += off_size
+            max_x -= off_size
+        elif round(max_x - min_x) < round(max_y - min_y):
+            off_size = (max_y - min_y - max_x + min_x) / 2
+            min_y += off_size
+            max_y -= off_size
+
+        return image.crop((min_x, min_y, max_x, max_y))

package.json

@@ -10,21 +10,21 @@
   "devDependencies": {
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/modifiers": "^6.0.1",
-    "@floating-ui/react": "^0.27.12",
-    "@r2wc/react-to-web-component": "^2.0.3",
-    "@types/react-dom": "^18.3.5",
-    "@wavesurfer/react": "^1.0.9",
-    "bootstrap": "^5.3.3",
+    "@floating-ui/react": "^0.27.13",
+    "@r2wc/react-to-web-component": "^2.0.4",
+    "@types/react-dom": "^18.3.7",
+    "@wavesurfer/react": "^1.0.11",
+    "bootstrap": "^5.3.7",
     "concurrently": "^8.2.0",
     "downshift": "^9.0.8",
-    "esbuild": "^0.25.5",
+    "esbuild": "^0.25.8",
     "esbuild-plugin-svgr": "^3.1.1",
-    "react-image-crop": "^11.0.7",
+    "react-image-crop": "^11.0.10",
     "react-intersection-observer": "^9.13.1",
-    "react-player": "^2.16.0",
+    "react-player": "^2.16.1",
     "request": "^2.88.2",
     "sass": "^1.78.0",
-    "typescript": "^5.6.3",
+    "typescript": "^5.8.3",
     "yargs-parser": "^21.1.1"
   }
 }