<commit_before>'use strict'

let React = require('react')
let _ = require('lodash')
import EditableComponent from 'components/widgets/editableComponent'
import AutoScale from 'components/mixins/autoScale'
import Draggable from 'components/mixins/draggable'
import Scalable from 'components/mixins/scalable'
import Selectable from 'components/mixins/selectable'
import Rotatable from 'components/mixins/rotatable'
import Killable from 'components/mixins/killable'
import lang from 'i18n/lang'
import GridImage from './img/grid.svg'
let key = require('mousetrap')

require('./operatingTable.less')

let OperatingTable = React.createClass({
  mixins: [AutoScale, Selectable, Draggable(function () {
      return this.props.selectedWidgets
    }, function (e) {
      return {
        x: this.props.component.components[e].x || 0,
        y: this.props.component.components[e].y || 0,
        z: this.props.component.components[e].z || 0
      }
    },
    function (e, updatedProps) {
      this.props.onSelectedWidgetUpdated && this.props.onSelectedWidgetUpdated({
        container: this.props.component,
        index: e
      }, updatedProps)
    }, function (e, updatedProps) {
      this.props.onSelectedWidgetUpdated && this.props.onSelectedWidgetUpdated({
          container: this.props.component,
          index: e
        }, updatedProps, lang.moveComponents
      )
    }), Scalable, Rotatable, Killable],
  getInitialState: function () {
    return {draggable: true, ctrlKeyPressed: false}
  },
  componentWillMount: function () {
    this.mouseDownHdlrs = []
    this.mouseUpHdlrs = []
  },
  componentDidMount: function () {
    this._resized()
    window.addEventListener('resize', this._resized)
    key.bind('ctrl', this.onCtrlKey, 'keydown')
    key.bind('ctrl', this.onCtrlKey, 'keyup')
  },
  onCtrlKey: function (ev) {
    this.setState({ctrlKeyPressed: !!(ev.type === 'keydown')})
  },
  _resized: function () {
    let deck = this.props.deck
    let slideWidth = deck.slideWidth
    let slideHeight = deck.slideHeight
    this._scale({width: slideWidth, height: slideHeight})
  },
  onMouseUp: function () {
    this.mouseUpHdlrs.forEach(e=>e.apply(this, arguments))
  },
  onMouseDown: function () {
    this.mouseDownHdlrs.forEach(e=>e.apply(this, arguments))
  },
  setDraggable: function (draggable) {
    this.setState({draggable: draggable})
  },
  componentWillUnmount: function () {
    window.removeEventListener('resize', this._resized)
    key.unbind('ctrl', 'keydown')
    key.unbind('ctrl', 'keyup')

  },
  render: function () {
    try {
      let slide = this.props.deck.getActiveSlide()
      let selectedWidgets = slide.components.reduce((pv, e, i, a)=> {
        if (e.selected) pv.push(i)
        return pv
      }, [])
      let componentsView = slide.components.map((component, index) => {
        return (
          <EditableComponent
            component={component}
            container={slide}
            onSelectedWidgetUpdated={this.props.onSelectedWidgetUpdated}
            key={index}
            idx={index}
            ref={index}
            scale={this.state.scale}
            selected={selectedWidgets.indexOf(index) >= 0}
            onMouseDown={this.onMouseDown}
            onMouseUp={this.onMouseUp}
            onScaleMouseDown={this.onScaleMouseDown}
            onRotateMouseDown={this.onRotateMouseDown}
            onKillMouseDown={this.onKillMouseDown}
            setDraggable={this.setDraggable}
          />
        )
      })
      let otSlideStyle = _.merge({}, this.state.scaleStyle, this.props.thisSlideStyle || this.props.component.style || this.props.defaultSlideStyle || this.props.deck.defaultSlideStyle)
      if (this.props.deck.perspective) {
        otSlideStyle.perspective = (this.props.deck.perspective / this.state.scale) + 'px'
      }
      if (this.state.ctrlKeyPressed) {
        otSlideStyle.background = 'url(' + GridImage + ')'
      }
      else{
        console.log('here')
      }
      return (
        <div className="sp-operating-table"
             onMouseDown={this.onSelectionMouseDown}
        >
          <div className="sp-ot-slide"
               style={otSlideStyle}>
            {componentsView}
          </div>
        </div>
      )
    }<commit_msg>changed grid key to g from ctrl<commit_after>'use strict'

let React = require('react')
let _ = require('lodash')
import EditableComponent from 'components/widgets/editableComponent'
import AutoScale from 'components/mixins/autoScale'
import Draggable from 'components/mixins/draggable'
import Scalable from 'components/mixins/scalable'
import Selectable from 'components/mixins/selectable'
import Rotatable from 'components/mixins/rotatable'
import Killable from 'components/mixins/killable'
import lang from 'i18n/lang'
import GridImage from './img/grid.svg'
let key = require('mousetrap')

require('./operatingTable.less')

let OperatingTable = React.createClass({
  mixins: [AutoScale, Selectable, Draggable(function () {
      return this.props.selectedWidgets
    }, function (e) {
      return {
        x: this.props.component.components[e].x || 0,
        y: this.props.component.components[e].y || 0,
        z: this.props.component.components[e].z || 0
      }
    },
    function (e, updatedProps) {
      this.props.onSelectedWidgetUpdated && this.props.onSelectedWidgetUpdated({
        container: this.props.component,
        index: e
      }, updatedProps)
    }, function (e, updatedProps) {
      this.props.onSelectedWidgetUpdated && this.props.onSelectedWidgetUpdated({
          container: this.props.component,
          index: e
        }, updatedProps, lang.moveComponents
      )
    }), Scalable, Rotatable, Killable],
  getInitialState: function () {
    return {draggable: true, ctrlKeyPressed: false}
  },
  componentWillMount: function () {
    this.mouseDownHdlrs = []
    this.mouseUpHdlrs = []
  },
  componentDidMount: function () {
    this._resized()
    window.addEventListener('resize', this._resized)
    key.bind('g', this.onToggleGrid)
  },
  componentWillUnmount: function () {
    window.removeEventListener('resize', this._resized)
    key.unbind('g')
  },
  onToggleGrid: function (ev) {
    this.setState({showGrid: !this.state.showGrid})
  },
  _resized: function () {
    let deck = this.props.deck
    let slideWidth = deck.slideWidth
    let slideHeight = deck.slideHeight
    this._scale({width: slideWidth, height: slideHeight})
  },
  onMouseUp: function () {
    this.mouseUpHdlrs.forEach(e=>e.apply(this, arguments))
  },
  onMouseDown: function () {
    this.mouseDownHdlrs.forEach(e=>e.apply(this, arguments))
  },
  setDraggable: function (draggable) {
    this.setState({draggable: draggable})
  },
  render: function () {
    try {
      let slide = this.props.deck.getActiveSlide()
      let selectedWidgets = slide.components.reduce((pv, e, i, a)=> {
        if (e.selected) pv.push(i)
        return pv
      }, [])
      let componentsView = slide.components.map((component, index) => {
        return (
          <EditableComponent
            component={component}
            container={slide}
            onSelectedWidgetUpdated={this.props.onSelectedWidgetUpdated}
            key={index}
            idx={index}
            ref={index}
            scale={this.state.scale}
            selected={selectedWidgets.indexOf(index) >= 0}
            onMouseDown={this.onMouseDown}
            onMouseUp={this.onMouseUp}
            onScaleMouseDown={this.onScaleMouseDown}
            onRotateMouseDown={this.onRotateMouseDown}
            onKillMouseDown={this.onKillMouseDown}
            setDraggable={this.setDraggable}
          />
        )
      })
      let otSlideStyle = _.merge({}, this.state.scaleStyle, this.props.thisSlideStyle || this.props.component.style || this.props.defaultSlideStyle || this.props.deck.defaultSlideStyle)
      if (this.props.deck.perspective) {
        otSlideStyle.perspective = (this.props.deck.perspective / this.state.scale) + 'px'
      }
      if (this.state.showGrid) {
        otSlideStyle.background = 'url(' + GridImage + ')'
      }
      else {
        console.log('here')
      }
      return (
        <div className="sp-operating-table"
             onMouseDown={this.onSelectionMouseDown}
        >
          <div className="sp-ot-slide"
               style={otSlideStyle}>
            {componentsView}
          </div>
        </div>
      )
    }
{'fraction_non_alphanumeric': 0.12744516893894486, 'fraction_numerical': 0.0014226437462951985, 'mean_word_length': 2.8034265103697025, 'pattern_counts': {'":': 0, '<': 13, '<?xml version=': 0, '>': 23, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3008811', 'n_tokens_mistral': 2538, 'n_tokens_neox': 2519, 'n_words': 448}