diff options
Diffstat (limited to 'scraper/client/search/search.query.js')
| -rw-r--r-- | scraper/client/search/search.query.js | 227 |
1 files changed, 0 insertions, 227 deletions
diff --git a/scraper/client/search/search.query.js b/scraper/client/search/search.query.js deleted file mode 100644 index 276f1943..00000000 --- a/scraper/client/search/search.query.js +++ /dev/null @@ -1,227 +0,0 @@ -import React, { Component } from 'react' -import { Link } from 'react-router-dom' -import { bindActionCreators } from 'redux' -import { connect } from 'react-redux' -import toBlob from 'data-uri-to-blob' - -import { clamp, px } from '../util' -import { Loader } from '../common' - -import * as searchActions from './search.actions' -import SearchMeta from './search.meta' - -const defaultState = { - dragging: false, - draggingBox: false, - bounds: null, - mouseX: 0, - mouseY: 0, - box: { - x: 0, - y: 0, - w: 0, - h: 0, - } -} - -class SearchQuery extends Component { - state = { - ...defaultState - } - - constructor() { - super() - this.handleMouseDown = this.handleMouseDown.bind(this) - this.handleMouseDownOnBox = this.handleMouseDownOnBox.bind(this) - this.handleMouseMove = this.handleMouseMove.bind(this) - this.handleMouseUp = this.handleMouseUp.bind(this) - } - - componentDidMount() { - document.body.addEventListener('mousemove', this.handleMouseMove) - document.body.addEventListener('mouseup', this.handleMouseUp) - } - - componentDidUpdate(prevProps) { - // console.log(this.props.query.query, !prevProps.query.query) - if (this.state.bounds && (!this.props.query.query || !prevProps.query.query || this.props.query.query.url !== prevProps.query.query.url)) { - this.setState({ ...defaultState }) - } - } - - componentWillUnmount() { - document.body.removeEventListener('mousemove', this.handleMouseMove) - document.body.removeEventListener('mouseup', this.handleMouseUp) - } - - handleMouseDown(e) { - e.preventDefault() - const bounds = this.imgRef.getBoundingClientRect() - const mouseX = e.pageX - const mouseY = e.pageY - const x = mouseX - bounds.left - const y = mouseY - bounds.top - const w = 1 - const h = 1 - this.setState({ - dragging: true, - bounds, - mouseX, - mouseY, - box: { - x, y, w, h, - } - }) - } - - handleMouseDownOnBox(e) { - const bounds = this.imgRef.getBoundingClientRect() - const mouseX = e.pageX - const mouseY = e.pageY - this.setState({ - draggingBox: true, - bounds, - mouseX, - mouseY, - initialBox: { - ...this.state.box - }, - box: { - ...this.state.box - } - }) - } - - handleMouseMove(e) { - const { - dragging, draggingBox, - bounds, mouseX, mouseY, initialBox, box - } = this.state - if (dragging) { - e.preventDefault() - let { x, y } = box - let w = clamp(e.pageX - mouseX, 0, bounds.width - x) - let h = clamp(e.pageY - mouseY, 0, bounds.height - y) - this.setState({ - box: { - x, y, w, h, - } - }) - } else if (draggingBox) { - e.preventDefault() - let { x, y, w, h } = initialBox - let dx = (e.pageX - mouseX) - let dy = (e.pageY - mouseY) - this.setState({ - box: { - x: clamp(x + dx, 0, bounds.width - w), - y: clamp(y + dy, 0, bounds.height - h), - w, - h, - } - }) - } - } - - handleMouseUp(e) { - const { actions } = this.props - const { dragging, draggingBox, bounds, box } = this.state - if (!dragging && !draggingBox) return - e.preventDefault() - const { x, y, w, h } = box - // console.log(x, y, w, h) - const img = this.imgRef - const canvas = document.createElement('canvas') - const ctx = canvas.getContext('2d') - const ratio = img.naturalWidth / bounds.width - canvas.width = w * ratio - canvas.height = h * ratio - if (w < 10 || h < 10) { - this.setState({ dragging: false, draggingBox: false, box: { x: 0, y: 0, w: 0, h: 0 } }) - return - } - this.setState({ dragging: false, draggingBox: false }) - // query_div.appendChild(canvas) - const newImage = new Image() - let loaded = false - newImage.onload = () => { - if (loaded) return - loaded = true - newImage.onload = null - ctx.drawImage( - newImage, - Math.round(x * ratio), - Math.round(y * ratio), - Math.round(w * ratio), - Math.round(h * ratio), - 0, 0, canvas.width, canvas.height - ) - const blob = toBlob(canvas.toDataURL('image/jpeg', 0.9)) - actions.upload(blob, { - ...this.props.query.query, - crop: { - x, y, w, h, - } - }) - } - // console.log(img.src) - newImage.crossOrigin = 'anonymous' - newImage.src = img.src - if (newImage.complete) { - newImage.onload() - } - } - - render() { - const { query } = this.props.query - const { box } = this.state - const { x, y, w, h } = box - if (!query) return null - if (query.loading) { - return <div className="searchQuery column"><h2>Loading results...</h2><Loader /></div> - } - let { url } = query - if (url && url.indexOf('static') === 0) { - url = '/search/' + url - } - return ( - <div className="searchQuery row"> - <div className="searchBox"> - <img - src={url} - ref={ref => this.imgRef = ref} - onMouseDown={this.handleMouseDown} - crossOrigin='anonymous' - /> - {!!w && - <div - className="box" - style={{ - left: x, - top: y, - width: w, - height: h, - }} - onMouseDown={this.handleMouseDownOnBox} - /> - } - </div> - <div> - <h3>Your Query</h3> - <SearchMeta query={query} /> - </div> - </div> - ) - } -} - -const mapStateToProps = state => ({ - query: state.search.query, - options: state.search.options, -}) - -const mapDispatchToProps = dispatch => ({ - actions: bindActionCreators({ ...searchActions }, dispatch), -}) - -export default connect(mapStateToProps, mapDispatchToProps)(SearchQuery) |