<commit_before>/*eslint no-unused-vars: 0*/
'use strict';

import ReactDOM from 'react-dom';
import React, {Component, PropTypes} from 'react';
import PureRenderMixin from 'react-addons-pure-render-mixin';
import History from './history';
import {uuid4} from './utils';
import Select from './select';
import Pencil from './pencil';
import Line from './line';
import Rectangle from './rectangle';
import Circle from './circle';
import Pan from './pan';
import Tool from './tools';

const fabric = require('fabric').fabric;

/**
 * Sketch Tool based on FabricJS for React Applications
 */
class SketchField extends Component {

    static propTypes = {
        // the color of the line
        lineColor: PropTypes.string,
        // The width of the line
        lineWidth: PropTypes.number,
        // the fill color of the shape when applicable
        fillColor: PropTypes.string,
        // the background color of the sketch
        backgroundColor: PropTypes.string,
        // the opacity of the object
        opacity: PropTypes.number,
        // number of undo/redo steps to maintain
        undoSteps: PropTypes.number,
        // The tool to use, can be pencil, rectangle, circle, brush;
        tool: PropTypes.string,
        // image format when calling toDataURL
        imageFormat: PropTypes.string,
        // Default initial data
        defaultData: PropTypes.object,
        // Type of initial data
        defaultDataType: PropTypes.oneOf(['json', 'url']),
        // Specify some width correction which will be applied on auto resize
        widthCorrection: PropTypes.number,
        // Specify some height correction which will be applied on auto resize
        heightCorrection: PropTypes.number
    };

    static defaultProps = {
        lineColor: 'black',
        lineWidth: 10,
        fillColor: 'transparent',
        backgroundColor: 'transparent',
        opacity: 1.0,
        undoSteps: 25,
        tool: Tool.Pencil,
        defaultDataType: 'json',
        widthCorrection: 2,
        heightCorrection: 0
    };

    constructor(props, context) {
        super(props, context);
        // internal functions
        this._resize = this._resize.bind(this);
        this._initTools = this._initTools.bind(this);
        this._backgroundColor = this._backgroundColor.bind(this);
        // exposed
        this.zoom = this.zoom.bind(this);
        this.enableTouchScroll = this.enableTouchScroll.bind(this);
        this.disableTouchScroll = this.disableTouchScroll.bind(this);
        // events
        this._onMouseUp = this._onMouseUp.bind(this);
        this._onMouseOut = this._onMouseOut.bind(this);
        this._onMouseDown = this._onMouseDown.bind(this);
        this._onMouseMove = this._onMouseMove.bind(this);
        this._onObjectAdded = this._onObjectAdded.bind(this);
        this._onObjectMoving = this._onObjectMoving.bind(this);
        this._onObjectRemoved = this._onObjectRemoved.bind(this);
        this._onObjectScaling = this._onObjectScaling.bind(this);
        this._onObjectModified = this._onObjectModified.bind(this);
        this._onObjectRotating = this._onObjectRotating.bind(this);
        // pure render
        this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
    }

    state = {
        parentWidth: 550,
        action: true
    };

    componentDidMount() {
        let {
            tool,
            undoSteps,
            defaultData,
            defaultDataType
        } = this.props;

        let canvas = this._fc = new fabric.Canvas(this._canvas.id/*, {
         preserveObjectStacking: false,
         renderOnAddRemove: false,
         skipTargetFind: true
         }*/);

        this._initTools(canvas);

        let selectedTool = this._tools[tool];
        selectedTool.configureCanvas(this.props);
        this._selectedTool = selectedTool;

        // Control resize
        window.addEventListener('resize', this._resize, false);

        // Initialize History, with maximum number of undo steps
        this._history = new History(undoSteps);

        // Events binding
        canvas.on('object:added', this._onObjectAdded);
        canvas.on('object:modified', this._onObjectModified);<commit_msg>create fabric canvas by DOM object instead of id in order to enable the SketchFieldTest<commit_after>/*eslint no-unused-vars: 0*/
'use strict';

import ReactDOM from 'react-dom';
import React, {Component, PropTypes} from 'react';
import PureRenderMixin from 'react-addons-pure-render-mixin';
import History from './history';
import {uuid4} from './utils';
import Select from './select';
import Pencil from './pencil';
import Line from './line';
import Rectangle from './rectangle';
import Circle from './circle';
import Pan from './pan';
import Tool from './tools';

const fabric = require('fabric').fabric;

/**
 * Sketch Tool based on FabricJS for React Applications
 */
class SketchField extends Component {

    static propTypes = {
        // the color of the line
        lineColor: PropTypes.string,
        // The width of the line
        lineWidth: PropTypes.number,
        // the fill color of the shape when applicable
        fillColor: PropTypes.string,
        // the background color of the sketch
        backgroundColor: PropTypes.string,
        // the opacity of the object
        opacity: PropTypes.number,
        // number of undo/redo steps to maintain
        undoSteps: PropTypes.number,
        // The tool to use, can be pencil, rectangle, circle, brush;
        tool: PropTypes.string,
        // image format when calling toDataURL
        imageFormat: PropTypes.string,
        // Default initial data
        defaultData: PropTypes.object,
        // Type of initial data
        defaultDataType: PropTypes.oneOf(['json', 'url']),
        // Specify some width correction which will be applied on auto resize
        widthCorrection: PropTypes.number,
        // Specify some height correction which will be applied on auto resize
        heightCorrection: PropTypes.number
    };

    static defaultProps = {
        lineColor: 'black',
        lineWidth: 10,
        fillColor: 'transparent',
        backgroundColor: 'transparent',
        opacity: 1.0,
        undoSteps: 25,
        tool: Tool.Pencil,
        defaultDataType: 'json',
        widthCorrection: 2,
        heightCorrection: 0
    };

    constructor(props, context) {
        super(props, context);
        // internal functions
        this._resize = this._resize.bind(this);
        this._initTools = this._initTools.bind(this);
        this._backgroundColor = this._backgroundColor.bind(this);
        // exposed
        this.zoom = this.zoom.bind(this);
        this.enableTouchScroll = this.enableTouchScroll.bind(this);
        this.disableTouchScroll = this.disableTouchScroll.bind(this);
        // events
        this._onMouseUp = this._onMouseUp.bind(this);
        this._onMouseOut = this._onMouseOut.bind(this);
        this._onMouseDown = this._onMouseDown.bind(this);
        this._onMouseMove = this._onMouseMove.bind(this);
        this._onObjectAdded = this._onObjectAdded.bind(this);
        this._onObjectMoving = this._onObjectMoving.bind(this);
        this._onObjectRemoved = this._onObjectRemoved.bind(this);
        this._onObjectScaling = this._onObjectScaling.bind(this);
        this._onObjectModified = this._onObjectModified.bind(this);
        this._onObjectRotating = this._onObjectRotating.bind(this);
        // pure render
        this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
    }

    state = {
        parentWidth: 550,
        action: true
    };

    componentDidMount() {
        let {
            tool,
            undoSteps,
            defaultData,
            defaultDataType
        } = this.props;

        let canvas = this._fc = new fabric.Canvas(this._canvas/*, {
         preserveObjectStacking: false,
         renderOnAddRemove: false,
         skipTargetFind: true
         }*/);

        this._initTools(canvas);

        let selectedTool = this._tools[tool];
        selectedTool.configureCanvas(this.props);
        this._selectedTool = selectedTool;

        // Control resize
        window.addEventListener('resize', this._resize, false);

        // Initialize History, with maximum number of undo steps
        this._history = new History(undoSteps);

        // Events binding
        canvas.on('object:added', this._onObjectAdded);
        canvas.on('object:modified', this._onObjectModified);
{'fraction_non_alphanumeric': 0.10179640718562874, 'fraction_numerical': 0.003052718093225314, 'mean_word_length': 2.468241042345277, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, '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': '3351062', 'n_tokens_mistral': 2280, 'n_tokens_neox': 2235, 'n_words': 601}