Merge 721eabe into f596740

.eslintrc

@@ -86,5 +86,6 @@ rules:
   space-before-function-paren: [2, { anonymous: 'always', named: 'never' }]
   space-infix-ops: 2
   space-unary-ops: 2
+  space-in-parens: 2
   strict: [2, 'global']
   wrap-regex: 2

.stylelintrc

@@ -10,4 +10,3 @@ rules:
   unit-no-unknown: [true, { ignoreFunctions: ["-webkit-image-set"] }]
   selector-pseudo-element-no-unknown: [true, { ignorePseudoElements: ["-webkit"] }]
   no-descending-specificity: null
-

scripts/compile.js

@@ -24,7 +24,7 @@ const js = (pattern = 'src/**/*.{js,jsx}') =>
         check(src.startsWith('src'), 'not a src path')
 
         jsRender(src)
-          .catch((reason) => { error(reason ) })
+          .catch((reason) => { error(reason) })
       })
   })
 

src/actions/metadata.js

@@ -12,6 +12,14 @@ module.exports = {
     }
   },
 
+  copy({ id, ...payload }, meta) {
+    return {
+      type: METADATA.COPY,
+      payload: { id: array(id), ...payload },
+      meta: { cmd: 'project', history: 'add', ...meta }
+    }
+  },
+
   delete(payload, meta) {
     return {
       type: METADATA.DELETE,

src/commands/metadata.js

@@ -21,6 +21,67 @@ class Load extends Command {
   }
 }
 
+class Copy extends Command {
+  static get ACTION() {
+    return METADATA.COPY
+  }
+
+  *exec() {
+    let { db } = this.options
+    let { payload, meta } = this.action
+
+    let data = yield this.fetch()
+
+    yield put(act.merge(data))
+
+    yield call(db.transaction, async tx => {
+      for (let id of payload.id) {
+        await mod.update(tx, {
+          id,
+          data: data[id],
+          timestamp: meta.now
+        })
+      }
+    })
+
+    return payload
+  }
+
+  *fetch() {
+    let { payload, meta } = this.action
+    let { from, to } = payload
+
+    let copy = {}
+    let data = {}
+
+    yield select(({ metadata }) => {
+      let props = meta.cut ? [from, to] : [to]
+
+      for (let id of payload.id) {
+        let md = metadata[id] || {}
+
+        copy[id] = pick(md, props, {}, true)
+        data[id] = { [to]: md[from] }
+
+        if (meta.cut) {
+          data[id][from] = null
+        }
+      }
+    })
+
+    this.undo = act.restore(copy)
+    this.original = copy
+
+    return data
+  }
+
+  *abort() {
+    if (this.original) {
+      yield put(act.merge(this.original))
+    }
+  }
+}
+
 class Restore extends Command {
   static get ACTION() { return METADATA.RESTORE }
 
@@ -143,6 +204,7 @@ class Delete extends Command {
 
 module.exports = {
   Add,
+  Copy,
   Delete,
   Load,
   Restore,

src/common/ontology.js

@@ -118,7 +118,7 @@ class Ontology extends Resource {
       const store = new N3.Store()
 
       new N3.Parser({ format: 'N3' })
-        .parse(is, (error, quad ) => {
+        .parse(is, (error, quad) => {
           if (error) return reject(error)
           if (quad) return store.addQuad(quad)
           resolve(store)

src/components/drag-layer.js

@@ -6,7 +6,10 @@ const { ItemDragPreview } = require('./item')
 const { PhotoDragPreview } = require('./photo')
 const { SelectionDragPreview } = require('./selection')
 const { ListDragPreview } = require('./list')
+const { FieldDragPreview } = require('./metadata')
 const { DND } = require('../constants')
+const { on, off } = require('../dom')
+const throttle = require('lodash.throttle')
 const { bool, number, object, shape, string } = require('prop-types')
 
 const coords = shape({
@@ -15,26 +18,16 @@ const coords = shape({
 })
 
 class DragLayer extends React.Component {
-  get position() {
-    let { position, item } = this.props
-    let x = 0
-    let y = 0
-
-    if (position) {
-      x = position.x
-      y = position.y
-
-      switch (item.position) {
-        case 'relative': {
-          let { offset } = this
-          x -= offset.x
-          y -= offset.y
-          break
-        }
-      }
-    }
+  state = {
+    dropEffect: 'none'
+  }
 
-    return { x, y }
+  componentDidMount() {
+    on(window, 'dragover', this.handleDragOver, { passive: true })
+  }
+
+  componentWillUnmount() {
+    off(window, 'dragover', this.handleDragOver, { passive: true })
   }
 
   get offset() {
@@ -48,12 +41,34 @@ class DragLayer extends React.Component {
   }
 
   get style() {
-    let { x, y } = this.position
-    return {
-      transform: `translate(${x}px, ${y}px)`
+    let { position, item } = this.props
+
+    if (position == null || item == null)
+      return null
+
+    let style = {}
+    let { x, y } = position
+
+    if (item.position === 'relative') {
+      let { offset } = this
+      style['--offset-x'] = `${offset.x}px`
+      style['--offset-y'] = `${offset.y}px`
+      x -= offset.x
+      y -= offset.y
     }
+
+    style.transform = `translate(${x}px, ${y}px)`
+
+    return style
   }
 
+  handleDragOver = throttle((event) => {
+    let { dropEffect } = event.dataTransfer
+    if (dropEffect !== this.state.dropEffect) {
+      this.setState({ dropEffect })
+    }
+  }, 100)
+
   renderItemPreview() {
     let { item, type, ...props } = this.props
 
@@ -66,6 +81,8 @@ class DragLayer extends React.Component {
         return <SelectionDragPreview {...props} items={[item]}/>
       case DND.LIST:
         return <ListDragPreview list={item}/>
+      case DND.FIELD:
+        return <FieldDragPreview {...props} field={item}/>
     }
   }
 
@@ -74,7 +91,7 @@ class DragLayer extends React.Component {
     let preview = isDragging && type && this.renderItemPreview()
 
     return (!preview) ? null : (
-      <div id="project-drag-layer" className="drag-layer">
+      <div className={`drag-layer on-drop-${this.state.dropEffect}`}>
         <div className="drag-preview-positioner" style={this.style}>
           {preview}
         </div>
@@ -90,7 +107,7 @@ class DragLayer extends React.Component {
     initialClientOffset: coords,
     initialSourceClientOffset: coords,
     tags: object.isRequired,
-    type: string,
+    type: string
   }
 }
 

src/components/list/drag-preview.js

@@ -15,9 +15,11 @@ class ListDragPreview extends React.PureComponent {
   render() {
     return (
       <div className="list drag-preview" style={this.style}>
-        <IconFolder/>
-        <div className="name">
-          {this.props.list.name}
+        <div className="drag-preview-container">
+          <IconFolder/>
+          <div className="name">
+            {this.props.list.name}
+          </div>
         </div>
       </div>
     )

src/components/metadata/drag-preview.js

@@ -0,0 +1,36 @@
+'use strict'
+
+const React = require('react')
+
+const {
+  arrayOf,
+  bool,
+  number,
+  oneOfType,
+  shape,
+  string
+} = require('prop-types')
+
+const FieldDragPreview = ({ field }) => (
+  <div className="metadata-field drag-preview">
+    <div className="drag-preview-container">
+      {field.value}
+      {field.isMixed && <span>+</span>}
+    </div>
+    {field.id.length &&
+      <div className="badge">{field.id.length}</div>
+    }
+  </div>
+)
+
+FieldDragPreview.propTypes = {
+  field: shape({
+    id: oneOfType([number, arrayOf(number)]).isRequired,
+    isMixed: bool,
+    value: string
+  }).isRequired,
+}
+
+module.exports = {
+  FieldDragPreview
+}