@mwater/visualization 5.0.0

package/src/layouts/blocks/DraggableBlockComponent.ts

@@ -0,0 +1,219 @@
+import _ from "lodash"
+import React, { CSSProperties } from "react"
+import ReactDOM from "react-dom"
+const R = React.createElement
+
+import { DragSource, DropTarget } from "react-dnd"
+
+interface DraggableBlockComponentProps {
+  /** Block to display */
+  block: any
+  /** Called with (sourceBlock, targetBlock, side) when block is dropped on it. side is top, left, bottom, right */
+  onBlockDrop: any
+  /** Merge in style */
+  style?: any
+  /** True to only allow dropping at bottom (root block) */
+  onlyBottom?: boolean
+  /** Injected by React-dnd */
+  isDragging: boolean
+  /** internally used to check if an item is over the current component */
+  isOver: boolean
+  /** the drag source connector, supplied by React DND */
+  connectDragSource: any
+  /** the drop target connector, supplied by React DND */
+  connectDropTarget: any
+  connectDragPreview: any
+}
+
+interface DraggableBlockComponentState {
+  hoverSide: any
+}
+
+// Block which can be dragged around in block layout.
+class DraggableBlockComponent extends React.Component<DraggableBlockComponentProps, DraggableBlockComponentState> {
+  constructor(props: any) {
+    super(props)
+
+    this.state = {
+      hoverSide: null
+    }
+  }
+
+  renderHover() {
+    const lineStyle: CSSProperties = { position: "absolute" }
+
+    // Show
+    if (this.props.isOver) {
+      // style.backgroundColor = "#DDF"
+      switch (this.state.hoverSide) {
+        case "left":
+          lineStyle.borderLeft = "solid 3px #38D"
+          lineStyle.top = 0
+          lineStyle.bottom = 0
+          lineStyle.left = 0
+          break
+        case "right":
+          lineStyle.borderRight = "solid 3px #38D"
+          lineStyle.top = 0
+          lineStyle.right = 0
+          lineStyle.bottom = 0
+          break
+        case "top":
+          lineStyle.borderTop = "solid 3px #38D"
+          lineStyle.top = 0
+          lineStyle.left = 0
+          lineStyle.right = 0
+          break
+        case "bottom":
+          lineStyle.borderBottom = "solid 3px #38D"
+          lineStyle.bottom = 0
+          lineStyle.left = 0
+          lineStyle.right = 0
+          break
+      }
+
+      return R("div", { style: lineStyle })
+    } else {
+      return null
+    }
+  }
+
+  render() {
+    const style: CSSProperties = {}
+
+    // Hide if dragging
+    if (this.props.isDragging) {
+      style.visibility = "hidden"
+    }
+
+    return this.props.connectDropTarget(
+      R(
+        "div",
+        { style: this.props.style },
+        R(
+          "div",
+          { style: { position: "relative" } },
+          this.renderHover(),
+          React.cloneElement(React.Children.only(this.props.children!) as any, {
+            connectMoveHandle: this.props.connectDragSource,
+            connectDragPreview: this.props.connectDragPreview
+          })
+        )
+      )
+    )
+  }
+}
+
+// Gets the drop side (top, left, right, bottom)
+function getDropSide(monitor: any, component: any) {
+  // Get underlying component
+  let pos
+  const blockComponent = component.getDecoratedComponentInstance()
+
+  // Get bounds of component
+  const hoverBoundingRect = (ReactDOM.findDOMNode(blockComponent)! as Element).getBoundingClientRect()
+
+  const clientOffset = monitor.getClientOffset()
+
+  // Get position within hovered item
+  const hoverClientX = clientOffset.x - hoverBoundingRect.left
+  const hoverClientY = clientOffset.y - hoverBoundingRect.top
+
+  // Determine if over is more left, right, top or bottom
+  const fractionX = hoverClientX / (hoverBoundingRect.right - hoverBoundingRect.left)
+  const fractionY = hoverClientY / (hoverBoundingRect.bottom - hoverBoundingRect.top)
+
+  if (fractionX > fractionY) {
+    // top or right
+    if (1 - fractionX > fractionY) {
+      // top or left
+      pos = "top"
+    } else {
+      pos = "right"
+    }
+  } else {
+    // bottom or left
+    if (1 - fractionX > fractionY) {
+      // top or left
+      pos = "left"
+    } else {
+      pos = "bottom"
+    }
+  }
+
+  return pos
+}
+
+const blockTargetSpec = {
+  // Called when an block hovers over this component
+  hover(props: any, monitor: any, component: any) {
+    // Hovering over self does nothing
+    let side
+    const hoveringId = monitor.getItem().block.id
+    const myId = props.block.id
+    if (hoveringId === myId) {
+      return
+    }
+
+    if (props.onlyBottom) {
+      side = "bottom"
+    } else {
+      side = getDropSide(monitor, component)
+    }
+
+    // Set the state
+    return component.getDecoratedComponentInstance().setState({ hoverSide: side })
+  },
+
+  canDrop(props: any, monitor: any) {
+    const hoveringId = monitor.getItem().block.id
+    const myId = props.block.id
+    if (hoveringId === myId) {
+      return false
+    }
+
+    return true
+  },
+
+  drop(props: any, monitor: any, component: any) {
+    if (monitor.didDrop()) {
+      return
+    }
+
+    const side = component.getDecoratedComponentInstance().state.hoverSide
+    props.onBlockDrop(monitor.getItem().block, props.block, side)
+  }
+}
+
+const blockSourceSpec = {
+  beginDrag(props: any, monitor: any, component: any) {
+    return {
+      block: props.block
+    }
+  },
+
+  isDragging(props: any, monitor: any) {
+    return props.block.id === monitor.getItem().block.id
+  }
+}
+
+function collectTarget(connect: any, monitor: any) {
+  return {
+    connectDropTarget: connect.dropTarget(),
+    isOver: monitor.isOver({ shallow: true }),
+    canDrop: monitor.canDrop()
+  }
+}
+
+function collectSource(connect: any, monitor: any) {
+  return {
+    connectDragSource: connect.dragSource(),
+    connectDragPreview: connect.dragPreview(),
+    isDragging: monitor.isDragging()
+  }
+}
+
+export default _.flow(
+  DragSource("visualization-block", blockSourceSpec, collectSource),
+  DropTarget("visualization-block", blockTargetSpec, collectTarget)
+)(DraggableBlockComponent)

package/src/layouts/blocks/HorizontalBlockComponent.ts

@@ -0,0 +1,288 @@
+import _ from "lodash"
+import React, { ReactElement } from "react"
+import { LayoutBlock } from "./blockUtils"
+const R = React.createElement
+
+import DraggableBlockComponent from "./DraggableBlockComponent"
+
+export interface HorizontalBlockComponentProps {
+  block: LayoutBlock
+  collapseColumns?: boolean
+  renderBlock: any
+  /** Called with (sourceBlock, targetBlock, side) when block is dropped on it. side is top, left, bottom, right */
+  onBlockDrop?: any
+  /** Called with (block) when block is removed */
+  onBlockRemove?: any
+  onBlockUpdate?: any
+}
+
+interface HorizontalBlockComponentState {
+  dragInitialX: any
+  leftSize: any
+  rightSize: any
+  dragXOffset: any
+  dragIndex: any
+}
+
+export default class HorizontalBlockComponent extends React.Component<
+  HorizontalBlockComponentProps,
+  HorizontalBlockComponentState
+> {
+  blockRefs: { [blockId: string]: HTMLElement | null }
+
+  constructor(props: any) {
+    super(props)
+
+    this.state = {
+      dragIndex: null, // index of splitter being dragged
+      dragInitialX: null, // Initial drag x
+      dragXOffset: null, // Offset of drag (pixels dragged from start)
+      leftSize: null,
+      rightSize: null
+    }
+
+    this.blockRefs = {}
+  }
+
+  componentWillUnmount() {
+    // Remove listeners
+    document.removeEventListener("mousemove", this.handleMouseMove)
+    return document.removeEventListener("mouseup", this.handleMouseUp)
+  }
+
+  handleMouseDown = (index: any, ev: any) => {
+    // Prevent html5 drag
+    ev.preventDefault()
+
+    // Get sizes of two blocks
+    this.setState({
+      dragIndex: index,
+      leftSize: this.blockRefs[`block${index}`]!.offsetWidth,
+      rightSize: this.blockRefs[`block${index + 1}`]!.offsetWidth
+    })
+
+    document.addEventListener("mousemove", this.handleMouseMove)
+    return document.addEventListener("mouseup", this.handleMouseUp)
+  }
+
+  handleMouseMove = (ev: any) => {
+    if (!this.state.dragInitialX) {
+      this.setState({ dragInitialX: ev.clientX })
+      return
+    }
+
+    let dragXOffset = ev.clientX - this.state.dragInitialX
+
+    // Can't make left block too small
+    if (dragXOffset < -this.state.leftSize + 100) {
+      dragXOffset = -this.state.leftSize + 100
+    }
+
+    // Can't make right block too small
+    if (dragXOffset > this.state.rightSize - 100) {
+      dragXOffset = this.state.rightSize - 100
+    }
+
+    return this.setState({ dragXOffset })
+  }
+
+  handleMouseUp = (ev: any) => {
+    // Remove listeners
+    document.removeEventListener("mousemove", this.handleMouseMove)
+    document.removeEventListener("mouseup", this.handleMouseUp)
+
+    // Determine weights of two blocks
+    const weights = this.props.block.weights || []
+    const newLeftSize = this.state.leftSize + this.state.dragXOffset
+    const newRightSize = this.state.rightSize - this.state.dragXOffset
+
+    // Get current weights
+    const leftWeight = weights[this.state.dragIndex] || 1
+    const rightWeight = weights[this.state.dragIndex + 1] || 1
+
+    weights[this.state.dragIndex] = ((leftWeight + rightWeight) * newLeftSize) / (newLeftSize + newRightSize)
+    weights[this.state.dragIndex + 1] = ((leftWeight + rightWeight) * newRightSize) / (newLeftSize + newRightSize)
+
+    const block = _.extend({}, this.props.block, { weights })
+    this.props.onBlockUpdate(block)
+
+    return this.setState({ dragIndex: null, dragInitialX: null, dragXOffset: null })
+  }
+
+  render() {
+    // Handle simple case of collapseColumns (no editing allowed)
+    let index, weight
+    let asc, end
+    let asc1, end1
+    if (this.props.collapseColumns) {
+      return R(
+        "div",
+        null,
+        _.map(this.props.block.blocks!, (block, index) => this.props.renderBlock(block, true))
+      )
+    }
+
+    // Calculate widths (percentages)
+    let totalWeight = 0
+    for (
+      index = 0, end = this.props.block.blocks!.length, asc = 0 <= end;
+      asc ? index < end : index > end;
+      asc ? index++ : index--
+    ) {
+      weight = (this.props.block.weights || [])[index] || 1
+      totalWeight += (this.props.block.weights || [])[index] || 1
+    }
+
+    const percentages: any = []
+    for (
+      index = 0, end1 = this.props.block.blocks!.length, asc1 = 0 <= end1;
+      asc1 ? index < end1 : index > end1;
+      asc1 ? index++ : index--
+    ) {
+      weight = (this.props.block.weights || [])[index] || 1
+      percentages[index] = (weight * 100) / totalWeight
+    }
+
+    if (this.props.onBlockUpdate != null) {
+      let elem: ReactElement = R(
+        "table",
+        {
+          style: { width: "100%", tableLayout: "fixed", position: "relative", paddingTop: 5 },
+          className: "mwater-visualization-horizontal-block"
+        }, // Add padding to allow dropping
+        R(
+          "tbody",
+          null,
+          R(
+            "tr",
+            null,
+            _.map(this.props.block.blocks!, (block, index) => {
+              return [
+                index > 0 && this.props.onBlockUpdate != null
+                  ? R("td", {
+                      style: { width: 5, position: "relative", left: this.state.dragXOffset },
+                      key: `splitter${index}`,
+                      className: `mwater-visualization-horizontal-block-splitter ${
+                        index - 1 === this.state.dragIndex ? "active" : ""
+                      }`,
+                      onMouseDown: this.handleMouseDown.bind(null, index - 1)
+                    })
+                  : undefined,
+                R(
+                  "td",
+                  {
+                    style: { width: `${percentages[index]}%`, verticalAlign: "top" },
+                    key: block.id,
+                    ref: (c: any) => {
+                      return (this.blockRefs[`block${index}`] = c)
+                    }
+                  },
+                  this.props.renderBlock(block)
+                )
+              ]
+            })
+          )
+        )
+      )
+
+      // Allow dropping
+      elem = R(
+        DraggableBlockComponent,
+        {
+          block: this.props.block,
+          onBlockDrop: this.props.onBlockDrop
+        },
+        elem
+      )
+
+      return elem
+    } else {
+      // Simplify in this case for printing
+      return R(
+        "div",
+        { className: "mwater-visualization-horizontal-block" },
+        _.map(this.props.block.blocks!, (block, index) => {
+          return [
+            R(
+              "div",
+              {
+                style: { width: `${percentages[index]}%`, verticalAlign: "top", display: "inline-block" },
+                key: block.id,
+                ref: (c: any) => {
+                  return (this.blockRefs[`block${index}`] = c)
+                },
+                className: "mwater-visualization-horizontal-block-item"
+              },
+              this.props.renderBlock(block)
+            )
+          ]
+        })
+      )
+    }
+  }
+}
+
+// handleAspectMouseDown: (ev) =>
+//   # Get height of overall block
+//   @setState(aspectDragY: ev.currentTarget.parentElement.offsetHeight, initialAspectDragY: ev.currentTarget.parentElement.offsetHeight)
+
+//   document.addEventListener("mousemove", @handleMouseMove)
+//   document.addEventListener("mouseup", @handleMouseUp)
+
+// handleMouseMove: (ev) =>
+//   if @state.initialClientY?
+//     aspectDragY = @state.initialAspectDragY + ev.clientY - @state.initialClientY
+//     if aspectDragY > 20
+//       @setState(aspectDragY: aspectDragY)
+//   else
+//     @setState(initialClientY: ev.clientY)
+
+// handleMouseUp: (ev) =>
+//   # Remove listeners
+//   document.removeEventListener("mousemove", @handleMouseMove)
+//   document.removeEventListener("mouseup", @handleMouseUp)
+
+//   # Fire new aspect ratio
+//   @props.onAspectRatioChange(@props.aspectRatio / (@state.aspectDragY / @state.initialAspectDragY))
+//   @setState(aspectDragY: null, initialAspectDragY: null, initialClientY: null)
+
+// renderAspectDrag: ->
+//   if @state.aspectDragY?
+//     lineStyle = {
+//       position: "absolute"
+//       borderTop: "solid 3px #38D"
+//       top: @state.aspectDragY
+//       left: 0
+//       right: 0
+//     }
+//     return R 'div', style: lineStyle, key: "aspectDrag"
+//   else
+//     return null
+
+// render: ->
+//   elem = R 'div', className: "mwater-visualization-decorated-block", style: @props.style,
+//     @props.children
+
+//     @renderAspectDrag()
+
+//     if not @props.isDragging and @props.connectMoveHandle?
+//       @props.connectMoveHandle(R 'div', key: "move", className: "mwater-visualization-decorated-block-move",
+//         R 'i', className: "fa fa-arrows")
+
+//     if not @props.isDragging and @props.onBlockRemove?
+//       R 'div', key: "remove", className: "mwater-visualization-decorated-block-remove", onClick: @props.onBlockRemove,
+//         R 'i', className: "fa fa-times"
+
+//     if not @props.isDragging and @props.onAspectRatioChange?
+//       # TODO sometimes drags (onDragStart) and so doesn't work. Disable dragging?
+//       R 'div', key: "aspect", className: "mwater-visualization-decorated-block-aspect", onMouseDown: @handleAspectMouseDown,
+//         R 'i', className: "fa fa-arrows-v"
+
+//     if not @props.isDragging and @props.connectResizeHandle?
+//       @props.connectResizeHandle(R 'div', key: "resize", className: "mwater-visualization-decorated-block-resize",
+//         R 'i', className: "fa fa-expand fa-rotate-90")
+
+//   if @props.connectDragPreview
+//     elem = @props.connectDragPreview(elem)
+
+//   return elem

package/src/layouts/blocks/PaletteItemComponent.ts

@@ -0,0 +1,27 @@
+import React from "react"
+const R = React.createElement
+
+const DragSourceComponent = require("../DragSourceComponent").default("visualization-block")
+
+export interface PaletteItemComponentProps {
+  /** Create the drag item */
+  createItem: any
+  title?: any
+  subtitle?: any
+}
+
+// Item in a palette that can be dragged to add a widget or other item
+export default class PaletteItemComponent extends React.Component<PaletteItemComponentProps> {
+  render() {
+    return R(
+      DragSourceComponent,
+      { createDragItem: this.props.createItem },
+      R(
+        "div",
+        { className: "mwater-visualization-palette-item" },
+        R("div", { className: "title", key: "title" }, this.props.title),
+        R("div", { className: "subtitle", key: "subtitle" }, this.props.subtitle)
+      )
+    )
+  }
+}

package/src/layouts/blocks/README.md

@@ -0,0 +1,11 @@
+Layout that does blocks that are stacked vertically or horizontally alternately. That is, first is vertical stack, which can contain horizontal stack, etc.
+
+Contents:
+
+id: id of block
+type: "root"/"vertical"/"horizontal"/"widget"/"spacer"
+widgetType: if a widget
+aspectRatio: w/h if not autoHeight
+design: widget design
+weights: weights for proportioning horizontal blocks. Default is 1
+blocks: other blocks if not a widget