From 21cba06d448cdb13ebefbf2faa94f3f30bdb3df1 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Wed, 12 Oct 2022 13:24:36 -0500 Subject: [PATCH] Delete focal point code --- app/images/reticle.png | Bin 1456 -> 0 bytes .../ui/components/focal_point_modal.js | 125 ------------------ .../features/ui/components/modal_root.js | 2 - .../features/ui/util/async-components.ts | 4 - app/styles/components/compose-form.scss | 36 ----- app/styles/components/modal.scss | 6 - 6 files changed, 173 deletions(-) delete mode 100644 app/images/reticle.png delete mode 100644 app/soapbox/features/ui/components/focal_point_modal.js diff --git a/app/images/reticle.png b/app/images/reticle.png deleted file mode 100644 index 1bcb3d261a277d466a6fbb97edc98a79c8f8e99f..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1456 zcmeAS@N?(olHy`uVBq!ia0vp^DIm5v>UQt<9T~k}%*51+C)7v*;;-tw_rp=f+YxdkliD$|K&5q48X?L70`v3iEW52}(WwCYouebJWHv8x9v_dw% z?!})M{c-o=-2TeX<)3~$oAtvLqjHtj{%z@QR#InkKzN@;+ofoXaAU~8Op!!Rj}HhBOAHzmC5`F z>|IBiK#2sBK_(xJ-`@`Iw#}|C4V7$-qFD~H4SMDFHZu3hmxBZb- zFKcp*|3j-lE>rKa84L!xiUFKkna(uvhOFUcC^li$3U*I$St%8=N|mvG6?e1Wl4(zW z2)>Z%-5hg|Y3|w7Y5Zvp>CY6suM523*&SJz#XNVLzfQ8+1;e9}abnGWA5~AUwz+U} zcUmR4>z+7`!qr*+d+bcB7oE23lyp2Uk^Xa~WXUZ1jU~KI=O#oSPZ$3i9I^g8=iAvE z{f?L0^r<pz%XxvJjn?*F>P zyA1Wx+vbO>XuS+qd2nN4d~~DdD)#u&Ns{)_)vWvC)?HkG$Cu^P<#mqJ8s~4yu)nm? zj@|zJ8jsZtk9U1Ij_+pDap|6IuAf7xGmZRh*-Mcu&W;YAk733DH=+&*L5XuE}b~NqRU;U}yJ~q~cPG%LI zu-fTr3ghgFHw>Kk9v}Nzs~oaw;k<7NTF?GkJ`elzSyV=?Aj$D{#VyV`g?hpkJs0*> zsI=bC@#Eh*%iFbM>9cDKU!FBje3`K^_JOsi>Be6tYGthV@7!zIFS}cQt=|={AM1be Za=I^0n3a?H2bj+pJYD@<);T3K0RU ({ - media: state.getIn(['compose', 'media_attachments']).find(item => item.get('id') === id), -}); - -const mapDispatchToProps = (dispatch, { id }) => ({ - - onSave: (x, y) => { - dispatch(changeUploadCompose(id, { focus: `${x.toFixed(2)},${y.toFixed(2)}` })); - }, - -}); - -export default @connect(mapStateToProps, mapDispatchToProps) -class FocalPointModal extends ImmutablePureComponent { - - static propTypes = { - media: ImmutablePropTypes.map.isRequired, - }; - - state = { - x: 0, - y: 0, - focusX: 0, - focusY: 0, - dragging: false, - }; - - componentDidMount() { - this.updatePositionFromMedia(this.props.media); - } - - componentDidUpdate(prevProps) { - const { media } = this.props; - if (prevProps.media.get('id') !== media.get('id')) { - this.updatePositionFromMedia(media); - } - } - - componentWillUnmount() { - document.removeEventListener('mousemove', this.handleMouseMove); - document.removeEventListener('mouseup', this.handleMouseUp); - } - - handleMouseDown = e => { - document.addEventListener('mousemove', this.handleMouseMove); - document.addEventListener('mouseup', this.handleMouseUp); - - this.updatePosition(e); - this.setState({ dragging: true }); - } - - handleMouseMove = e => { - this.updatePosition(e); - } - - handleMouseUp = () => { - document.removeEventListener('mousemove', this.handleMouseMove); - document.removeEventListener('mouseup', this.handleMouseUp); - - this.setState({ dragging: false }); - this.props.onSave(this.state.focusX, this.state.focusY); - } - - updatePosition = e => { - const { x, y } = getPointerPosition(this.node, e); - const focusX = (x - .5) * 2; - const focusY = (y - .5) * -2; - - this.setState({ x, y, focusX, focusY }); - } - - updatePositionFromMedia = media => { - const focusX = media.getIn(['meta', 'focus', 'x']); - const focusY = media.getIn(['meta', 'focus', 'y']); - - if (focusX && focusY) { - const x = (focusX / 2) + .5; - const y = (focusY / -2) + .5; - - this.setState({ x, y, focusX, focusY }); - } else { - this.setState({ x: 0.5, y: 0.5, focusX: 0, focusY: 0 }); - } - } - - setRef = c => { - this.node = c; - } - - render() { - const { media } = this.props; - const { x, y, dragging } = this.state; - - const width = media.getIn(['meta', 'original', 'width']) || null; - const height = media.getIn(['meta', 'original', 'height']) || null; - - return ( -
-
- - -
-
-
-
- ); - } - -} diff --git a/app/soapbox/features/ui/components/modal_root.js b/app/soapbox/features/ui/components/modal_root.js index 2c2de0530..32425cffd 100644 --- a/app/soapbox/features/ui/components/modal_root.js +++ b/app/soapbox/features/ui/components/modal_root.js @@ -15,7 +15,6 @@ import { ListAdder, MissingDescriptionModal, ActionsModal, - FocalPointModal, HotkeysModal, ComposeModal, ReplyMentionsModal, @@ -51,7 +50,6 @@ const MODAL_COMPONENTS = { 'ACTIONS': ActionsModal, 'EMBED': EmbedModal, 'LIST_EDITOR': ListEditor, - 'FOCAL_POINT': FocalPointModal, 'LIST_ADDER': ListAdder, 'HOTKEYS': HotkeysModal, 'COMPOSE': ComposeModal, diff --git a/app/soapbox/features/ui/util/async-components.ts b/app/soapbox/features/ui/util/async-components.ts index 9f1826fe8..18bbf71cf 100644 --- a/app/soapbox/features/ui/util/async-components.ts +++ b/app/soapbox/features/ui/util/async-components.ts @@ -146,10 +146,6 @@ export function ActionsModal() { return import(/* webpackChunkName: "features/ui" */'../components/actions_modal'); } -export function FocalPointModal() { - return import(/* webpackChunkName: "features/ui" */'../components/focal_point_modal'); -} - export function HotkeysModal() { return import(/* webpackChunkName: "features/ui" */'../components/hotkeys_modal'); } diff --git a/app/styles/components/compose-form.scss b/app/styles/components/compose-form.scss index 890016d61..0d76263d3 100644 --- a/app/styles/components/compose-form.scss +++ b/app/styles/components/compose-form.scss @@ -242,39 +242,3 @@ @apply block shadow-md; } } - -.focal-point { - position: relative; - cursor: pointer; - overflow: hidden; - - &.dragging { - cursor: move; - } - - img { - max-width: 80vw; - max-height: 80vh; - width: auto; - height: auto; - margin: auto; - } - - &__reticle { - position: absolute; - width: 100px; - height: 100px; - transform: translate(-50%, -50%); - background: url('../images/reticle.png') no-repeat 0 0; - border-radius: 50%; - box-shadow: 0 0 0 9999em rgba($base-shadow-color, 0.35); - } - - &__overlay { - position: absolute; - width: 100%; - height: 100%; - top: 0; - left: 0; - } -} diff --git a/app/styles/components/modal.scss b/app/styles/components/modal.scss index 435c07c65..4410bdae0 100644 --- a/app/styles/components/modal.scss +++ b/app/styles/components/modal.scss @@ -387,12 +387,6 @@ } } -.focal-point-modal { - max-width: 80vw; - max-height: 80vh; - position: relative; -} - .column-inline-form { padding: 7px 15px; padding-right: 5px;