mirror of
https://github.com/GoogleChromeLabs/squoosh.git
synced 2025-11-17 11:09:41 +00:00
Add Transform modal
This commit is contained in:
Jason Miller
committed by
Jake Archibald
Jake Archibald
parent
7aeef5ff37
commit
bde3a93b6e
388
src/client/lazy-app/Compress/Transform/Cropper/index.tsx
Normal file
388
src/client/lazy-app/Compress/Transform/Cropper/index.tsx
Normal file
@@ -0,0 +1,388 @@
|
||||
import { h, Component, ComponentChildren } from 'preact';
|
||||
import * as style from './style.css';
|
||||
import 'add-css:./style.css';
|
||||
import { shallowEqual } from 'client/lazy-app/util';
|
||||
|
||||
export interface CropBox {
|
||||
left: number;
|
||||
top: number;
|
||||
right: number;
|
||||
bottom: number;
|
||||
}
|
||||
|
||||
// Minimum CropBox size
|
||||
const MIN_SIZE = 2;
|
||||
|
||||
export interface Props {
|
||||
size: { width: number; height: number };
|
||||
scale?: number;
|
||||
lockAspect?: boolean;
|
||||
crop: CropBox;
|
||||
onChange?(crop: CropBox): void;
|
||||
}
|
||||
|
||||
type Edge = keyof CropBox;
|
||||
|
||||
interface PointerTrack {
|
||||
x: number;
|
||||
y: number;
|
||||
edges: { edge: Edge; value: number }[];
|
||||
}
|
||||
|
||||
interface State {
|
||||
crop: CropBox;
|
||||
pan: boolean;
|
||||
}
|
||||
|
||||
export default class Cropper extends Component<Props, State> {
|
||||
private pointers = new Map<number, PointerTrack>();
|
||||
|
||||
state = {
|
||||
crop: this.normalizeCrop({ ...this.props.crop }),
|
||||
pan: false,
|
||||
};
|
||||
|
||||
shouldComponentUpdate(nextProps: Props, nextState: State) {
|
||||
if (!shallowEqual(nextState, this.state)) return true;
|
||||
const { size, scale, lockAspect, crop } = this.props;
|
||||
return (
|
||||
size.width !== nextProps.size.width ||
|
||||
size.height !== nextProps.size.height ||
|
||||
scale !== nextProps.scale ||
|
||||
lockAspect !== nextProps.lockAspect ||
|
||||
!shallowEqual(crop, nextProps.crop)
|
||||
);
|
||||
}
|
||||
|
||||
componentWillReceiveProps({ crop }: Props, nextState: State) {
|
||||
const current = nextState.crop || this.state.crop;
|
||||
if (crop !== this.props.crop && !shallowEqual(crop, current)) {
|
||||
// this.setState({ crop: nextProps.crop });
|
||||
this.setCrop(crop);
|
||||
}
|
||||
}
|
||||
|
||||
private normalizeCrop(crop: CropBox) {
|
||||
crop.left = Math.round(Math.max(0, crop.left));
|
||||
crop.top = Math.round(Math.max(0, crop.top));
|
||||
crop.right = Math.round(Math.max(0, crop.right));
|
||||
crop.bottom = Math.round(Math.max(0, crop.bottom));
|
||||
return crop;
|
||||
}
|
||||
|
||||
private setCrop(cropUpdate: Partial<CropBox>) {
|
||||
const crop = this.normalizeCrop({ ...this.state.crop, ...cropUpdate });
|
||||
// ignore crop updates that normalize to the same values
|
||||
const old = this.state.crop;
|
||||
if (
|
||||
crop.left === old.left &&
|
||||
crop.right === old.right &&
|
||||
crop.top === old.top &&
|
||||
crop.bottom === old.bottom
|
||||
) {
|
||||
return;
|
||||
}
|
||||
// crop.left = Math.max(0, crop.left) | 0;
|
||||
// crop.top = Math.max(0, crop.top) | 0;
|
||||
// crop.right = Math.max(0, crop.right) | 0;
|
||||
// crop.bottom = Math.max(0, crop.bottom) | 0;
|
||||
this.setState({ crop });
|
||||
if (this.props.onChange) {
|
||||
this.props.onChange(crop);
|
||||
}
|
||||
}
|
||||
|
||||
private onPointerDown = (event: PointerEvent) => {
|
||||
if (event.button !== 0 || this.state.pan) return;
|
||||
|
||||
const target = event.target as SVGElement;
|
||||
const edgeAttr = target.getAttribute('data-edge');
|
||||
if (edgeAttr) {
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
|
||||
const edges = edgeAttr.split(/ *, */) as Edge[];
|
||||
// console.log(this.props.lockAspect);
|
||||
if (this.props.lockAspect && edges.length === 1) return;
|
||||
|
||||
this.pointers.set(event.pointerId, {
|
||||
x: event.x,
|
||||
y: event.y,
|
||||
edges: edges.map((edge) => ({ edge, value: this.state.crop[edge] })),
|
||||
});
|
||||
target.setPointerCapture(event.pointerId);
|
||||
}
|
||||
};
|
||||
|
||||
private onPointerMove = (event: PointerEvent) => {
|
||||
const target = event.target as SVGElement;
|
||||
const down = this.pointers.get(event.pointerId);
|
||||
if (down && target.hasPointerCapture(event.pointerId)) {
|
||||
const { size } = this.props;
|
||||
const oldCrop = this.state.crop;
|
||||
const aspect =
|
||||
(size.width - oldCrop.left - oldCrop.right) /
|
||||
(size.height - oldCrop.top - oldCrop.bottom);
|
||||
const scale = this.props.scale || 1;
|
||||
let dx = (event.x - down.x) / scale;
|
||||
let dy = (event.y - down.y) / scale;
|
||||
// console.log(this.props.lockAspect, aspect);
|
||||
if (this.props.lockAspect) {
|
||||
const dir = (dx + dy) / 2;
|
||||
dx = dir * aspect;
|
||||
dy = dir / aspect;
|
||||
}
|
||||
const crop: Partial<CropBox> = {};
|
||||
for (const { edge, value } of down.edges) {
|
||||
let edgeValue = value;
|
||||
switch (edge) {
|
||||
case 'left':
|
||||
edgeValue += dx;
|
||||
break;
|
||||
case 'right':
|
||||
edgeValue -= dx;
|
||||
break;
|
||||
case 'top':
|
||||
edgeValue += dy;
|
||||
break;
|
||||
case 'bottom':
|
||||
edgeValue -= dy;
|
||||
break;
|
||||
}
|
||||
crop[edge] = edgeValue;
|
||||
}
|
||||
// Prevent MOVE from resizing the cropbox:
|
||||
if (crop.left && crop.right) {
|
||||
if (crop.left < 0) crop.right += crop.left;
|
||||
if (crop.right < 0) crop.left += crop.right;
|
||||
} else {
|
||||
// enforce minimum 1px cropbox width
|
||||
if (crop.left)
|
||||
crop.left = Math.min(
|
||||
crop.left,
|
||||
size.width - oldCrop.right - MIN_SIZE,
|
||||
);
|
||||
if (crop.right)
|
||||
crop.right = Math.min(
|
||||
crop.right,
|
||||
size.width - oldCrop.left - MIN_SIZE,
|
||||
);
|
||||
}
|
||||
if (crop.top && crop.bottom) {
|
||||
if (crop.top < 0) crop.bottom += crop.top;
|
||||
if (crop.bottom < 0) crop.top += crop.bottom;
|
||||
} else {
|
||||
// enforce minimum 1px cropbox height
|
||||
if (crop.top)
|
||||
crop.top = Math.min(
|
||||
crop.top,
|
||||
size.height - oldCrop.bottom - MIN_SIZE,
|
||||
);
|
||||
if (crop.bottom)
|
||||
crop.bottom = Math.min(
|
||||
crop.bottom,
|
||||
size.height - oldCrop.top - MIN_SIZE,
|
||||
);
|
||||
}
|
||||
this.setCrop(crop);
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
}
|
||||
};
|
||||
|
||||
private onPointerUp = (event: PointerEvent) => {
|
||||
const target = event.target as SVGElement;
|
||||
const down = this.pointers.get(event.pointerId);
|
||||
if (down && target.hasPointerCapture(event.pointerId)) {
|
||||
this.onPointerMove(event);
|
||||
target.releasePointerCapture(event.pointerId);
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
this.pointers.delete(event.pointerId);
|
||||
}
|
||||
};
|
||||
|
||||
private onKeyDown = (event: KeyboardEvent) => {
|
||||
if (event.key === ' ') {
|
||||
if (!this.state.pan) {
|
||||
this.setState({ pan: true });
|
||||
}
|
||||
event.preventDefault();
|
||||
}
|
||||
};
|
||||
|
||||
private onKeyUp = (event: KeyboardEvent) => {
|
||||
if (event.key === ' ') this.setState({ pan: false });
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
addEventListener('keydown', this.onKeyDown);
|
||||
addEventListener('keyup', this.onKeyUp);
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
addEventListener('keydown', this.onKeyDown);
|
||||
addEventListener('keyup', this.onKeyUp);
|
||||
}
|
||||
|
||||
render({ size, scale }: Props, { crop, pan }: State) {
|
||||
const x = crop.left;
|
||||
const y = crop.top;
|
||||
const width = size.width - crop.left - crop.right;
|
||||
const height = size.height - crop.top - crop.bottom;
|
||||
// const x = crop.left.toFixed(2);
|
||||
// const y = crop.top.toFixed(2);
|
||||
// const width = (size.width - crop.left - crop.right).toFixed(2);
|
||||
// const height = (size.height - crop.top - crop.bottom).toFixed(2);
|
||||
|
||||
return (
|
||||
<svg
|
||||
class={`${style.cropper} ${pan ? style.pan : ''}`}
|
||||
width={size.width + 20}
|
||||
height={size.height + 20}
|
||||
viewBox={`-10 -10 ${size.width + 20} ${size.height + 20}`}
|
||||
style={{
|
||||
// this is hack to force style invalidation in Chrome
|
||||
zoom: (scale || 1).toFixed(3),
|
||||
}}
|
||||
onPointerDown={this.onPointerDown}
|
||||
onPointerMove={this.onPointerMove}
|
||||
onPointerUp={this.onPointerUp}
|
||||
>
|
||||
<defs>
|
||||
{/*
|
||||
<clipPath id="bg">
|
||||
<rect x={x} y={y} width={width} height={height} />
|
||||
</clipPath>
|
||||
*/}
|
||||
{/*
|
||||
<filter id="shadow" x="-2" y="-2" width="4" height="4">
|
||||
<feDropShadow
|
||||
dx="0"
|
||||
dy="0.5"
|
||||
stdDeviation="1.5"
|
||||
flood-color="#000"
|
||||
/>
|
||||
</filter>
|
||||
<filter id="shadow2" x="-2" y="-2" width="4" height="4">
|
||||
<feDropShadow
|
||||
dx="0"
|
||||
dy="0.25"
|
||||
stdDeviation="0.5"
|
||||
flood-color="rgba(0,0,0,0.5)"
|
||||
/>
|
||||
</filter>
|
||||
*/}
|
||||
</defs>
|
||||
<rect
|
||||
class={style.background}
|
||||
width={size.width}
|
||||
height={size.height}
|
||||
// mask="url(#bg)"
|
||||
// clip-path="url(#bg)"
|
||||
// style={{
|
||||
// clipPath: `polygon(0 0, 0 100%, 100% 100%, 100% 0, 0 0, ${x}px ${y}px, ${x+width}px ${y}px, ${x+width}px ${y+height}px, ${x}px ${y+height}px, ${x}px ${y}px)`
|
||||
// }}
|
||||
clip-path={`polygon(0 0, 0 100%, 100% 100%, 100% 0, 0 0, ${x}px ${y}px, ${
|
||||
x + width
|
||||
}px ${y}px, ${x + width}px ${y + height}px, ${x}px ${
|
||||
y + height
|
||||
}px, ${x}px ${y}px)`}
|
||||
/>
|
||||
<svg x={x} y={y} width={width} height={height}>
|
||||
<Freezer>
|
||||
<rect
|
||||
id="box"
|
||||
class={style.cropbox}
|
||||
data-edge="left,right,top,bottom"
|
||||
width="100%"
|
||||
height="100%"
|
||||
// filter="url(#shadow2)"
|
||||
/>
|
||||
|
||||
<rect class={style.edge} data-edge="top" width="100%" />
|
||||
<rect class={style.edge} data-edge="bottom" width="100%" y="100%" />
|
||||
<rect class={style.edge} data-edge="left" height="100%" />
|
||||
<rect class={style.edge} data-edge="right" height="100%" x="100%" />
|
||||
|
||||
<circle
|
||||
class={style.corner}
|
||||
data-edge="left,top"
|
||||
// filter="url(#shadow)"
|
||||
/>
|
||||
<circle
|
||||
class={style.corner}
|
||||
data-edge="right,top"
|
||||
cx="100%"
|
||||
// filter="url(#shadow)"
|
||||
/>
|
||||
<circle
|
||||
class={style.corner}
|
||||
data-edge="right,bottom"
|
||||
cx="100%"
|
||||
cy="100%"
|
||||
// filter="url(#shadow)"
|
||||
/>
|
||||
<circle
|
||||
class={style.corner}
|
||||
data-edge="left,bottom"
|
||||
cy="100%"
|
||||
// filter="url(#shadow)"
|
||||
/>
|
||||
</Freezer>
|
||||
</svg>
|
||||
{/*
|
||||
<rect
|
||||
id="box"
|
||||
class={style.cropbox}
|
||||
data-edge="left,right,top,bottom"
|
||||
x={x}
|
||||
y={y}
|
||||
width={width}
|
||||
height={height}
|
||||
/>
|
||||
<rect
|
||||
class={`${style.edge} ${style.top}`}
|
||||
data-edge="top"
|
||||
x={x}
|
||||
y={y}
|
||||
width={width}
|
||||
/>
|
||||
<rect
|
||||
class={`${style.edge} ${style.bottom}`}
|
||||
data-edge="bottom"
|
||||
x={x}
|
||||
y={size.height - crop.bottom}
|
||||
width={width}
|
||||
/>
|
||||
<rect
|
||||
class={`${style.edge} ${style.left}`}
|
||||
data-edge="left"
|
||||
x={x}
|
||||
y={y}
|
||||
height={height}
|
||||
/>
|
||||
<rect
|
||||
class={`${style.edge} ${style.right}`}
|
||||
data-edge="right"
|
||||
x={size.width - crop.right}
|
||||
y={y}
|
||||
height={height}
|
||||
/>
|
||||
*/}
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
interface FreezerProps {
|
||||
children: ComponentChildren;
|
||||
}
|
||||
class Freezer extends Component<FreezerProps> {
|
||||
shouldComponentUpdate() {
|
||||
return false;
|
||||
}
|
||||
render({ children }: FreezerProps) {
|
||||
return children;
|
||||
}
|
||||
}
|
||||
119
src/client/lazy-app/Compress/Transform/Cropper/style.css
Normal file
119
src/client/lazy-app/Compress/Transform/Cropper/style.css
Normal file
@@ -0,0 +1,119 @@
|
||||
.cropper {
|
||||
position: absolute;
|
||||
left: calc(-10px / var(--scale, 1));
|
||||
top: calc(-10px / var(--scale, 1));
|
||||
right: calc(-10px / var(--scale, 1));
|
||||
bottom: calc(-10px / var(--scale, 1));
|
||||
shape-rendering: crispedges;
|
||||
overflow: hidden;
|
||||
contain: strict;
|
||||
transform-origin: 0 0;
|
||||
transform: scale(calc(1 / var(--scale))) !important;
|
||||
zoom: var(--scale, 1);
|
||||
|
||||
&.pan {
|
||||
cursor: grabbing;
|
||||
& * {
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
& > svg {
|
||||
margin: -10px;
|
||||
padding: 10px;
|
||||
overflow: visible;
|
||||
contain: strict;
|
||||
/* overflow: visible; */
|
||||
}
|
||||
}
|
||||
|
||||
.background {
|
||||
pointer-events: none;
|
||||
fill: rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.cropbox {
|
||||
fill: none;
|
||||
stroke: white;
|
||||
stroke-width: calc(1.5 / var(--scale, 1));
|
||||
stroke-dasharray: calc(5 / var(--scale, 1)), calc(5 / var(--scale, 1));
|
||||
stroke-dashoffset: 50%;
|
||||
/* Accept pointer input even though this is unpainted transparent */
|
||||
pointer-events: all;
|
||||
cursor: move;
|
||||
|
||||
/* animation: ants 1s linear forwards infinite; */
|
||||
}
|
||||
/*
|
||||
@keyframes ants {
|
||||
0% { stroke-dashoffset: 0; }
|
||||
100% { stroke-dashoffset: -12; }
|
||||
}
|
||||
*/
|
||||
|
||||
.edge {
|
||||
fill: #aaa;
|
||||
opacity: 0;
|
||||
transition: opacity 250ms ease;
|
||||
z-index: 2;
|
||||
pointer-events: all;
|
||||
--edge-width: calc(10px / var(--scale, 1));
|
||||
|
||||
@media (max-width: 779px) {
|
||||
--edge-width: calc(20px / var(--scale, 1));
|
||||
fill: rgba(0, 0, 0, 0.01);
|
||||
}
|
||||
|
||||
&[data-edge='left'],
|
||||
&[data-edge='right'] {
|
||||
cursor: ew-resize;
|
||||
transform: translate(calc(var(--edge-width, 10px) / -2), 0);
|
||||
width: var(--edge-width, 10px);
|
||||
}
|
||||
&[data-edge='top'],
|
||||
&[data-edge='bottom'] {
|
||||
cursor: ns-resize;
|
||||
transform: translate(0, calc(var(--edge-width, 10px) / -2));
|
||||
height: var(--edge-width, 10px);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
opacity: 0.1;
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
.corner {
|
||||
r: calc(4 / var(--scale, 1));
|
||||
stroke-width: calc(4 / var(--scale, 1));
|
||||
stroke: rgba(225, 225, 225, 0.01);
|
||||
fill: white;
|
||||
shape-rendering: geometricprecision;
|
||||
pointer-events: all;
|
||||
transition: fill 250ms ease, stroke 250ms ease;
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
stroke: rgba(225, 225, 225, 0.5);
|
||||
transition: none;
|
||||
}
|
||||
|
||||
@media (max-width: 779px) {
|
||||
r: calc(10 / var(--scale, 1));
|
||||
stroke-width: calc(2 / var(--scale, 1));
|
||||
}
|
||||
|
||||
&[data-edge='left,top'] {
|
||||
cursor: nw-resize;
|
||||
}
|
||||
&[data-edge='right,top'] {
|
||||
cursor: ne-resize;
|
||||
}
|
||||
&[data-edge='right,bottom'] {
|
||||
cursor: se-resize;
|
||||
}
|
||||
&[data-edge='left,bottom'] {
|
||||
cursor: sw-resize;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user