diff --git a/app/images/reticle.png b/app/images/reticle.png deleted file mode 100644 index 1bcb3d261..000000000 Binary files a/app/images/reticle.png and /dev/null differ diff --git a/app/soapbox/features/ui/components/focal_point_modal.js b/app/soapbox/features/ui/components/focal_point_modal.js deleted file mode 100644 index b45b367eb..000000000 --- a/app/soapbox/features/ui/components/focal_point_modal.js +++ /dev/null @@ -1,125 +0,0 @@ -import classNames from 'clsx'; -import React from 'react'; -import ImmutablePropTypes from 'react-immutable-proptypes'; -import ImmutablePureComponent from 'react-immutable-pure-component'; -import { connect } from 'react-redux'; - -import { changeUploadCompose } from '../../../actions/compose'; -import { getPointerPosition } from '../../video'; - -import ImageLoader from './image_loader'; - -const mapStateToProps = (state, { id }) => ({ - 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;