all files / packages/image/ ImageComponent.js

0% Statements 0/19
0% Branches 0/8
0% Functions 0/6
0% Lines 0/19
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75                                                                                                                                                     
import { NodeComponent } from '../../ui'
 
class ImageComponent extends NodeComponent {
 
  didMount() {
    super.didMount.call(this)
    this.context.editorSession.onRender('document', this._onDocumentChange, this)
  }
 
  dispose() {
    super.dispose.call(this)
    this.context.editorSession.off(this)
  }
 
  // TODO: verify if this check is correct and efficient
  _onDocumentChange(change) {
    if (change.isAffected(this.props.node.id) ||
      change.isAffected(this.props.node.imageFile)) {
      this.rerender()
    }
  }
 
  render($$) {
    let el = super.render($$)
    el.addClass('sc-image')
    el.append(
      $$('img').attr({
        src: this.props.node.getUrl(),
      }).ref('image')
    )
    return el
  }
 
  /* Custom dropzone protocol */
  getDropzoneSpecs() {
    return [
      {
        component: this.refs['image'],
        message: 'Replace Image',
        dropParams: {
          action: 'replace-image',
          nodeId: this.props.node.id,
        }
      }
    ]
  }
 
  handleDrop(tx, dragState) {
    let newImageFile = dragState.data.files[0]
    if (dragState.external) {
      let imageFile = tx.create({
        type: 'file',
        fileType: 'image',
        mimeType: newImageFile.type,
        url: URL.createObjectURL(newImageFile)
      })
      // TODO: we should delete the old image file if there are no
      // referenecs to it anymore
      tx.set([this.props.node.id, 'imageFile'], imageFile.id)
    } else {
      let nodeId = dragState.sourceSelection.nodeId
      let node = tx.get(nodeId)
      if (node.type === 'image') {
        // Use the same filenode as the dragged source node
        tx.set([this.props.node.id, 'imageFile'], node.imageFile)
      }
    }
 
 
  }
 
}
 
export default ImageComponent