CAD/js/CAD.js

// 发布订阅,事件模型
var Event = (function () {
  var _default = 'default';
  var _shift = Array.prototype.shift;
  var _unshift = Array.prototype.unshift;


  function createEvent() {
    var namespaceCache = {}

    function _listen(cache, key, fn) {
      if (cache[key]) {
        cache[key].push(fn)
      } else {
        cache[key] = [fn]
      }
    }

    function _trigger() {
      var args = arguments
      return new Promise(function (resolve) {
        setTimeout(function () {
          var cache = _shift.call(args);
          var key = _shift.call(args);
          var stack = cache[key]

          if (!stack || stack.length === 0) return;

          stack.forEach(function (fn) {
            fn.apply(this, args)
          })

          resolve(stack);
        }, 100)
      })
    }

    function _remove(cache, key, fn) {
      var stack = cache[key]

      if (!stack || stack.length === 0) return
      if (fn) {
        for (var i = stack.length; i >= 0; i--) {
          if (stack[i] === fn) {
            stack.splice(i, 1)
          }
        }
      } else {
        stack.length = 0
      }
    }

    function _create(namespace) {
      namespace = namespace || _default
      if (namespaceCache[namespace]) {
        return namespaceCache[namespace]
      }

      var cache = {}
      var ret = {
        listen: function (key, fn) {
          _listen(cache, key, fn)
        },
        once: function (key, fn) {
          fn.__once = true
          _listen(cache, key, fn)
        },
        remove: function (key, fn) {
          _remove(cache, key, fn)
        },
        trigger: function () {
          _unshift.call(arguments, cache)
          _trigger.apply(this, arguments).then(function (stack) {
            if (stack) {
              for (var i = stack.length; i >= 0; i--) {
                if (stack[i] && stack[i].__once) {
                  stack.splice(i, 1)
                }
              }
            }
          })
        }
      }

      namespaceCache[namespace] = ret;
      return ret
    }

    return {
      create: _create,
      once: function () {
        this.create().once.apply(this, arguments)
      },
      listen: function () {
        this.create().listen.apply(this, arguments)
      },
      remove: function () {
        this.create().remove.apply(this, arguments)
      },
      trigger: function () {
        this.create().trigger.apply(this, arguments)
      }
    }
  }

  return createEvent()
})();


var grendCAD = (function grentWall() {
  var util = {
    /**
     * 计算直线向量
     * @param {*} line 
     */
    lineVector(line) {
      var cpoint = {
        x: line.points[1].x - line.points[0].x,
        y: line.points[1].y - line.points[0].y
      }
      var xd = Math.abs(cpoint.x / 1)
      var yd = Math.abs(cpoint.y / 1)
      var js = xd > yd ? xd : yd
      var verctor = {
        x: cpoint.x / js,
        y: cpoint.y / js,
      }

      return verctor
    },

    /**
     * 获取向量获取固定长度时倍数
     * @param {*} v 向量
     * @param {*} width 长度
     */
    vectorWidth (v, w) {
      return Math.sqrt(Math.pow(w, 2) / (Math.pow(v.x, 2) + Math.pow(v.y, 2)))
    },

    /**
     * 计算直线与X轴夹角
     * @param {*} line1 
     */
    lineAngle(line1) {
      var height = line1[0].y - line1[1].y,
        width = line1[0].x - line1[1].x;
      if (width == 0) {
        // 如果和y轴平行，角度为90或270
        return line1[0].y >= line1[1].y ? 90 : 270;
      } else {
        var tan = Math.atan(height / width),
          angle = tan * 180 / Math.PI;

        return tan > 0 ? (line1[0].x > line1[1].x ? angle : angle + 180) : (line1[0].x > line1[1].x ? angle + 360 : angle + 180);
      }
    },

    /**
     * 计算直线的长度
     * @param {*} line 
     */
    lineDistance(line) {
      return Math.sqrt(Math.pow(line[0].x - line[1].x, 2) + Math.pow(line[0].y - line[1].y, 2))
    },

    isInfinity(num) {
      return num === Infinity || num === -Infinity
    },

    /**
     * 获取一组坐标的XY坐标区间
     * @param {*} points 
     */
    getSection(points) {
      var ret = {
        minx: points[0].x,
        maxx: points[0].x,
        miny: points[0].y,
        maxy: points[0].y
      }

      points.forEach(function (point) {
        if (ret.minx > point.x) {
          ret.minx = point.x
        }
        if (ret.maxx < point.x) {
          ret.maxx = point.x
        }
        if (ret.miny > point.y) {
          ret.miny = point.y
        }
        if (ret.maxy < point.y) {
          ret.maxy = point.y
        }
      })

      return ret
    },

    /**
     * 计算垂直向量
     * @param {向量} arr
     */
    verticalLine(line) {
      var arr = [
        line.points[1].x - line.points[0].x,
        line.points[1].y - line.points[0].y
      ]

      if (arr.length !== 0) {
        var x, y;

        y = Math.sqrt(1 / ((arr[1] * arr[1]) / (arr[0] * arr[0]) + 1));
        x = Math.sqrt(1 - y * y);
        return [x, y];
      }
      return [];
    },

    /**
     * 将所有坐标转化为指定范围之间的值，但是保持比例不变
     * @param {*} points 要转化的坐标
     * @param {*} section 指定范围
     * @returns Array 转化后的值
     */
    tranProp(points, section) {
      var args = util.getSection(points)
      var xlen = args.maxx - args.minx
      var ylen = args.maxy - args.miny
      var prop = xlen > ylen ? xlen : ylen
      var offsetX = -(args.minx + xlen / 2)
      var offsetY = -(args.miny + ylen / 2)
      var range = section[1] - section[0]

      return {
        offset: {
          x: offsetX,
          y: offsetY
        },
        prop,
        range: range
      }
    },

    /**
     * 将屏幕转化为真实坐标
     * @param {*} point 
     * @param {*} section 
     */
    tranPoint(point, section) {
      return {
        x: point.x + section.minx,
        y: point.y + section.miny
      }
    },

    /**
     * 点到直线的距离
     */
    pointLineDis(line, point) {
      var dis = 0
      var s1 = line[1].x - line[0].x
      var s2 = point.x - line[0].x
      var s3 = point.x - line[1].x
      var k1 = line[1].y - line[0].y
      var k2 = point.y - line[0].y
      var k3 = point.y - line[1].y

      var cross = s1 * s2 + k1 * k2;
      var d2 = s1 * s1 + k1 * k1;

      if (cross <= 0) {
        dis = Math.sqrt(s2 * s2 + k2 * k2);
      } else if (cross >= d2) {
        dis = Math.sqrt(s3 * s3 + k3 * k3);
      } else {
        var r = cross / d2;
        var px = line[0].x + s1 * r;
        var py = line[0].y + k1 * r;
        dis = Math.sqrt((point.x - px) * (point.x - px) + (py - point.y) * (py - point.y));
      }

      return dis
    },

    /**
     * 判断点是否在线上
     * @param {*} point 要判断的点
     * @param {*} line 线段
     * @param {*} width 线宽
     */
    isContainPoint(point, line, width) {
      var dis = util.pointLineDis(line, point)
      var max = width / 2
      var min = 0 - max


      return dis >= min && dis <= max
    },

    /**
     * 判断两条线段是否相交
     * @param {*} line1 
     * @param {*} line2 
     */
    isLineIntersect(line1, line2) {
      var a1 = line1[1].y - line1[0].y;
      var b1 = line1[0].x - line1[1].x;
      var c1 = a1 * line1[0].x + b1 * line1[0].y;
      //转换成一般式: Ax+By = C
      var a2 = line2[1].y - line2[0].y;
      var b2 = line2[0].x - line2[1].x;
      var c2 = a2 * line2[0].x + b2 * line2[0].y;
      // 计算交点		
      var d = a1 * b2 - a2 * b1;

      // 当d==0时，两线平行
      if (d == 0) {
        return false;
      } else {
        var x = (b2 * c1 - b1 * c2) / d;
        var y = (a1 * c2 - a2 * c1) / d;

        // 检测交点是否在两条线段上
        if ((isInBetween(line1[0].x, x, line1[1].x) || isInBetween(line1[0].y, y, line1[1].y)) &&
          (isInBetween(line2[0].x, x, line2[1].x) || isInBetween(line2[0].y, y, line2[1].y))) {
          return true;
        }
      }

      function isInBetween(a, b, c) {
        // 如果b几乎等于a或c，返回false.为了避免浮点运行时两值几乎相等，但存在相差0.00000...0001的这种情况出现使用下面方式进行避免

        if (Math.abs(a - b) < 0.000001 || Math.abs(b - c) < 0.000001) {
          return false;
        }

        return (a <= b && b <= c) || (c <= b && b <= a);
      }

      return false;
    },

    /**
     * 判断两个点是否相同
     * @param {*} point1 
     * @param {*} poin2 
     */
    equalPoint(point1, poin2) {
      return point1.x === poin2.x && point1.y === poin2.y
    },

    /**
     * 判断两个面是否相交, 
     * @param {*} face1 
     * @param {*} face2 
     */
    isFaceIntersect(face1, face2) {
      for (var i = 0; i < face1.length; i++) {
        var next = i + 1 === face1.length ? 0 : i + 1
        var line1 = [face1[i], face1[next]]

        for (var j = 0; j < face2.length; j++) {
          var next = j + 1 === face2.length ? 0 : j + 1
          var line2 = [face2[j], face2[next]]
          var isIntersect1 = util.isLineIntersect(line2, line1)
          var isIntersect2 = util.isLineIntersect(line1, line2)

          if (isIntersect1 && isIntersect2) {
            return true
          }
        }
      }
    },

    /**
     * 判断一个点是否在面上
     * @param {*} face1 
     * @param {*} face2 
     */
    pointInside(point, face) {
      var inside = false;
      var x = point.x,
        y = point.y;

      for (var i = 0, j = face.length - 1; i < face.length; j = i++) {
        var xi = face[i].x,
          yi = face[i].y;
        var xj = face[j].x,
          yj = face[j].y;

        if (((yi > y) != (yj > y)) &&
          (x < (xj - xi) * (y - yi) / (yj - yi) + xi)) {
          inside = !inside;
        }
      }
      return inside;
    }
  }

  /**
   * 获取一个元素在指定父元素或文档中的位置
   */
  function getPosition(dom, parent) {
    var ret = {
      x: 0,
      y: 0
    }
    while (dom && dom !== parent && dom !== document.documentElement) {
      ret.x += dom.offsetLeft
      ret.y += dom.offsetTop
      dom = dom.offsetParent
    }

    return ret
  }

  /**
   * 添加拖拽事件
   */
  function addMouseEvent(dom, event) {
    dom.addEventListener('mousemove', function(ev) {
      event.move({x: ev.pageX, y: ev.pageY})
    }, {
      passive: false
    })

    dom.addEventListener('mousedown', function downHandle(ev) {
      var prevPoint = {
        x: ev.pageX,
        y: ev.pageY
      }
      var con = event.down(prevPoint)
      if (!con) return;

      document.documentElement.addEventListener('mousemove', moveHandle, {
        passive: false
      })
      document.documentElement.addEventListener('mouseup', endHandle, {
        passive: false
      })

      function moveHandle(ev) {
        event.move({
          x: ev.pageX,
          y: ev.pageY
        }, prevPoint)
        prevPoint = {
          x: ev.pageX,
          y: ev.pageY
        }
      }

      function endHandle(ev) {
        document.documentElement.removeEventListener('mousemove', moveHandle, {
          passive: false
        })
        document.documentElement.removeEventListener('mouseup', endHandle, {
          passive: false
        })
        event.up()
      }
    }, false)
  }

  /**
   * 包含对象
   */
  function inherit(origin, target) {
    for (var key in target) {
      origin.prototype[key] = target[key]
    }
  }

  /**
   * 墙面跟相机
   */
  var Wall = (function Wall() {
    /**
     * 获取面的所有点
     * @param {*} face 
     */
    function getFacePoints(face) {
      var start = face[0]
      var ret = []
      var iteration = start

      do {
        ret.push(iteration.points[0])
        iteration = face.find(function (item) {
          return item.id === iteration.linkedLineID[1]
        })
      } while (start !== iteration)


      return ret
    }


    function Wall(data, cameras) {
      this.lineWidth = 4
      this.cameras = cameras
      this.stateStack = []
      var faces = {}
      data.forEach(function (line) {
        if (faces[line.roomIndex]) {
          faces[line.roomIndex].push(line)
        } else {
          faces[line.roomIndex] = [line]
        }
      })
      this.faces = faces
      // this.regEvent()
      // this.init()
      // this.draw()
    }

    Wall.prototype._down = function (point, renderer) {
      this.preservationState()
      var rets = []
      for (var key in this.faces) {
        var face = this.faces[key]

        for (var i = 0, line; line = face[i]; i++) {
          var p1d = util.lineDistance([point, line.points[0]]) < 0.2
          var p2d = util.lineDistance([point, line.points[1]]) < 0.2

          if (p1d || p2d) {
            var cpoint = p1d ? line.points[0] : line.points[1]
            var lline = face.find(function(fline) {
              return fline !== line && (util.equalPoint(fline.points[0], cpoint) || util.equalPoint(fline.points[1], cpoint))
            })
            rets.push({
              face: face,
              line: line,
              dire: util.verticalLine(line)
            }, {
              face: face,
              line: lline,
              dire: util.verticalLine(lline)
            })
            rets.horn = true
            break
          } else if (util.isContainPoint(point, line.points, (this.lineWidth + 4) / renderer.status.prop)) {
            rets.push({
              face: face,
              line: line,
              dire: util.verticalLine(line)
            })
          }
        }
        if (i !== face.length) break;
      }
      return rets.length > 0 ? rets : null
    }

    Wall.prototype.updateLine = function (line, x, y) {
      if (!x && !y) return;

      var face
      for (var key in this.faces) {
        var index = this.faces[key].findIndex(function (item) {
          return item === line
        })

        if (~index) {
          face = this.faces[key]
          break
        }
      }

      if (!face) return

      var prevLine = face.find(function (cLine) {
        return line.linkedLineID[0] === cLine.id
      })
      var lastLine = face.find(function (cLine) {
        return line.linkedLineID[1] === cLine.id
      })
      var prevK = (prevLine.points[1].y - prevLine.points[0].y) / (prevLine.points[1].x - prevLine.points[0].x)
      var lastK = (lastLine.points[1].y - lastLine.points[0].y) / (lastLine.points[1].x - lastLine.points[0].x)
      var prevX, prevY, lastX, lastY

      if (x) {
        prevX = prevLine.points[1].x + x
        prevY = (prevX - prevLine.points[0].x) * prevK + prevLine.points[0].y
        lastX = lastLine.points[0].x + x
        lastY = (lastX - lastLine.points[0].x) * lastK + lastLine.points[0].y
      } else {
        prevY = prevLine.points[1].y + y
        prevX = (prevY - prevLine.points[0].y) / prevK + prevLine.points[0].x
        lastY = lastLine.points[0].y + y
        lastX = (lastY - lastLine.points[0].y) / lastK + lastLine.points[0].x
      }

      if (util.isInfinity(prevX) ||
        util.isInfinity(prevY) ||
        util.isInfinity(lastX) ||
        util.isInfinity(lastY)) {
        prevX = prevLine.points[1].x + x
        prevY = prevLine.points[1].y + y
        lastX = lastLine.points[0].x + x
        lastY = lastLine.points[0].y + y
      }

      prevLine.points[1].x = prevX
      prevLine.points[1].y = prevY
      lastLine.points[0].x = lastX
      lastLine.points[0].y = lastY
      line.points[0].x = prevLine.points[1].x
      line.points[0].y = prevLine.points[1].y
      line.points[1].x = lastLine.points[0].x
      line.points[1].y = lastLine.points[0].y
    }

    Wall.prototype.detection = function (movePosition) {
      var revoke = false
      var activeFacePoint = getFacePoints(movePosition.face)
      for (let key in this.faces) {
        if (this.faces[key] !== movePosition.face &&
          util.isFaceIntersect(activeFacePoint, getFacePoints(this.faces[key]))) {
          revoke = true;
          break;
        }
      }

      var cameras;
      if (this.cameras && (cameras = this.cameras[movePosition.face[0].roomIndex])) {
        for (var i = 0, camera; camera = cameras[i]; i++) {
          if (!util.pointInside(camera, activeFacePoint)) {
            revoke = true
            break;
          }
        }
      }

      return revoke
    }

    Wall.prototype._move = function (point, prevPoint, movePositions, renderer) {
      for (var i = 0; i < movePositions.length; i++) {
        var movePosition = movePositions[i]
        if (!movePositions.horn && this.movePositioning && this.movePositioning != movePosition) {
          movePosition.line.selected = false
          continue;
        };

        var xdis = point.x - prevPoint.x
        var ydis = point.y - prevPoint.y
        var dire = movePosition.dire[0] - movePosition.dire[1] > 0 ? 'X' : 'Y'
        if (dire === 'X') {
          this.updateLine(movePosition.line, xdis, 0)
        } else {
          this.updateLine(movePosition.line, 0, ydis)
        }

        var revoke = this.detection(movePosition)


        if (revoke) {
          if (dire === 'X') {
            this.updateLine(movePosition.line, -xdis, 0)
          } else {
            this.updateLine(movePosition.line, 0, -ydis)
          }
        } else {
          this.trigger('changePosition', movePosition.line)
          renderer.render()
          if (!movePositions.horn && !this.movePositioning && (xdis || ydis)) {
            this.movePositioning = movePosition
          }
        }
      }
    }

    Wall.prototype._up = function () {
      this.movePositioning = null
    }

    Wall.prototype._hover = function (point, prevPoint, renderer) {
      var rets = []
      for (var key in this.faces) {
        for (var i = 0, line; line = this.faces[key][i]; i++) {
          delete line.selected
          delete line.horn
        }
      }

      for (var key in this.faces) {
        var face = this.faces[key]

        for (var i = 0, line; line = face[i]; i++) {
          var p1d = util.lineDistance([point, line.points[0]]) < 0.2
          var p2d = util.lineDistance([point, line.points[1]]) < 0.2

          if (p1d || p2d) {
            var cpoint = p1d ? line.points[0] : line.points[1]
            var lline = face.find(function (fline) {
              return fline !== line && (util.equalPoint(fline.points[0], cpoint) || util.equalPoint(fline.points[1], cpoint))
            })
            rets.push(line, lline)
            line.selected = true
            lline.selected = true
            line.horn = cpoint
            rets.horn = true
            break
          } else if (util.isContainPoint(point, line.points, (this.lineWidth + 4) / renderer.status.prop)) {
            rets.push(line)
            line.selected = true
          }
        }
        if (i !== face.length) {
          break;
        }
      }
      renderer.render()

      return rets.length > 0
    }

    Wall.prototype.drawSelectedPoint = function (context, point) {
      context.beginPath()
      context.fillStyle = 'rgba(245, 255, 255, 0.3)'
      context.arc(point.x, point.y, 12, 0, 2 * Math.PI)
      context.fill()
      context.closePath()

      context.beginPath()
      context.fillStyle = 'rgba(245, 255, 0, 0.7)'
      context.arc(point.x, point.y, 6, 0, 2 * Math.PI)
      context.fill()
      context.closePath()

      var pointsArr = [
        [
          {
            x: point.x + 20,
            y: point.y
          }, {
            x: point.x + 36,
            y: point.y
          }, {
            x: point.x + 28,
            y: point.y - 8
          }, {
            x: point.x + 28,
            y: point.y + 8
          }
        ],
        [
          {
            x: point.x - 20,
            y: point.y
          }, {
            x: point.x - 36,
            y: point.y
          }, {
            x: point.x - 28,
            y: point.y - 8
          }, {
            x: point.x - 28,
            y: point.y + 8
          }
        ],
        [
          {
            x: point.x,
            y: point.y + 20
          }, {
            x: point.x,
            y: point.y + 36
          }, {
            x: point.x - 8,
            y: point.y + 28
          }, {
            x: point.x + 8,
            y: point.y + 28
          }
        ],
        [
          {
            x: point.x,
            y: point.y - 20
          }, {
            x: point.x,
            y: point.y - 36
          }, {
            x: point.x - 8,
            y: point.y - 28
          }, {
            x: point.x + 8,
            y: point.y - 28
          }
        ]
      ]

      var lines = [[0, 1], [1, 2], [1, 3]]

      pointsArr.forEach(function (points) {
        context.strokeStyle = '#fff';
        context.lineWidth = 8;
        context.lineCap = 'round'
        lines.forEach(function (line) {
          context.beginPath()
          context.moveTo(points[line[0]].x, points[line[0]].y)
          context.lineTo(points[line[1]].x, points[line[1]].y)
          context.stroke()
          context.closePath()
        })

        context.strokeStyle = '#01c7ae';
        context.lineWidth = 3;
        lines.forEach(function (line) {
          context.beginPath()
          context.moveTo(points[line[0]].x, points[line[0]].y)
          context.lineTo(points[line[1]].x, points[line[1]].y)
          context.stroke()
          context.closePath()
        })
      })
    }

    Wall.prototype.drawSelectedLine = function (context, _line) {
      var width = 8
      var lV = util.lineVector({points: _line})
      var vV = util.verticalLine({points: _line})
      vV = {x: vV[0], y: vV[1]}
      var center = {
        x: (_line[0].x + _line[1].x) / 2 + vV.x * 4,
        y: (_line[0].y + _line[1].y) / 2 + vV.y * 4
      }
      w = util.vectorWidth(lV, width)
      h = util.vectorWidth(vV, width)

      var shape = [
        {x: center.x + lV.x * w, y: center.y + lV.y * w},
        {x: center.x - lV.x * w, y: center.y - lV.y * w},
        {x: center.x + vV.x * h, y: center.y + vV.y * h}
      ]

      context.beginPath();
      context.lineWidth = 3
      context.strokeStyle = '#fff';
      context.fillStyle = '#00c7b0'
      context.moveTo(shape[0].x, shape[0].y);
      context.lineTo(shape[1].x, shape[1].y);
      context.lineTo(shape[2].x, shape[2].y);
      context.closePath();
      context.stroke();
      context.fill();

      center = {
        x: (_line[0].x + _line[1].x) / 2 - vV.x * 4,
        y: (_line[0].y + _line[1].y) / 2 - vV.y * 4
      }
      shape = [
        {x: center.x + lV.x * w, y: center.y + lV.y * w},
        {x: center.x - lV.x * w, y: center.y - lV.y * w},
        {x: center.x - vV.x * h, y: center.y - vV.y * h}
      ]

      context.beginPath();
      context.moveTo(shape[0].x, shape[0].y);
      context.lineTo(shape[1].x, shape[1].y);
      context.lineTo(shape[2].x, shape[2].y);
      context.closePath();
      context.stroke();
      context.fill();
    }

    Wall.prototype.drawLine = function (context, _line) {
      context.beginPath();
      context.strokeStyle = '#fff';
      context.lineWidth = this.lineWidth;
      context.lineCap = 'round'
      context.moveTo(_line[0].x, _line[0].y);
      context.lineTo(_line[1].x, _line[1].y);
      context.closePath();
      context.stroke();
    }

    Wall.prototype.draw = function (renderer, context) {
      var selected = false
      for (var key in this.faces) {
        var face = this.faces[key]
        for (var i = 0, line; line = face[i]; i++) {
          var _line = [
            renderer.transScreenPoint(line.points[0]),
            renderer.transScreenPoint(line.points[1])
          ]
          this.drawLine(context, _line)
        }
      }

      for (var key in this.faces) {
        var face = this.faces[key]
        for (var i = 0, line; line = face[i]; i++) {
          var _line = [
            renderer.transScreenPoint(line.points[0]),
            renderer.transScreenPoint(line.points[1])
          ]
          if (line.selected) {
            context.beginPath();
            context.strokeStyle = '#f3ff33';
            context.lineWidth = this.lineWidth;
            context.lineCap = 'round'
            context.moveTo(_line[0].x, _line[0].y);
            context.lineTo(_line[1].x, _line[1].y);
            context.closePath();
            context.stroke();
          }
        }
      }

      for (var key in this.faces) {
        var face = this.faces[key]
        for (var i = 0, line; line = face[i]; i++) {
          var _line = [
            renderer.transScreenPoint(line.points[0]),
            renderer.transScreenPoint(line.points[1])
          ]
          if (line.selected) {
            if (!selected) {
              selected = true
              if (line.horn) {
                this.drawSelectedPoint(context, renderer.transScreenPoint(line.horn))
              } else {
                this.drawSelectedLine(context, _line)
              }
            }
          }
        }
      }

      if (this.cameras) {
        for (var key in this.cameras) {
          for (var i = 0; i < this.cameras[key].length; i++) {
            var point = renderer.transScreenPoint(this.cameras[key][i])
            context.fillStyle = "#00cc00";
            context.fillRect(point.x - this.lineWidth / 2, point.y - this.lineWidth / 2, this.lineWidth, this.lineWidth);
          }
        }
      }
    }

    Wall.prototype.preservationState = function (renderer) {
      var state = {}
      for (var key in this.faces) {
        state[key] = {}
        for (var i = 0; i < this.faces[key].length; i++) {
          var line = this.faces[key][i]
          state[key][line.id] = [{
              x: line.points[0].x,
              y: line.points[0].y
            },
            {
              x: line.points[1].x,
              y: line.points[1].y
            }
          ]
        }
      }
      this.stateStack.push(state)
    }

    Wall.prototype.revokeState = function (renderer) {
      var state = this.stateStack.pop()

      for (var key in state) {
        for (var id in state[key]) {
          var cline = state[key][id]
          var line = this.faces[key].find(function (line) {
            return line.id === id
          })
          line.points[0].x = cline[0].x
          line.points[0].y = cline[0].y
          line.points[1].x = cline[1].x
          line.points[1].y = cline[1].y
        }
      }
      renderer.render();
    }

    Wall.prototype.getIndex = function() {
      return -1
    }

    inherit(Wall, Event.create('__wall__'))
    return Wall
  })();

  /**
   * 当前所在位置
   */
  var Position = (function Position() {
    function Position(point, angle) {
      this.point = point
      this.angle = angle
      this.withinW = 6
      this.abroadW = 2
      this.lightW = 12
      this.lightrRdian = 1 / 2.5 * Math.PI
    }

    Position.prototype.draw = function (renderer, context) {
      var point = renderer.transScreenPoint(this.point)
      var startRdian = this.angle - this.lightrRdian / 2
      var endRdian = this.angle + this.lightrRdian / 2
      var ligWidth = this.withinW + this.abroadW + this.lightW
      var abroadWidth = this.withinW + this.abroadW

      var grd = context.createRadialGradient(point.x, point.y, abroadWidth, point.x, point.y, ligWidth);
      grd.addColorStop(0, "rgba(0,200,175,0.9)");
      grd.addColorStop(1, "rgba(0,200,175,0.3)");

      context.beginPath();
      context.fillStyle = grd;
      context.moveTo(point.x, point.y);
      context.arc(point.x, point.y, ligWidth, startRdian, endRdian, false);
      context.fill()
      context.closePath();

      context.beginPath();
      context.fillStyle = "#ffffff";
      context.arc(point.x, point.y, abroadWidth, 0, 2 * Math.PI, false);
      context.fill()
      context.closePath();

      context.beginPath();
      context.fillStyle = "rgba(0,200,175,1)";
      context.arc(point.x, point.y, this.withinW, 0, 2 * Math.PI, false);
      context.fill()
      context.closePath();

    }

    inherit(Position, Event.create('__position__'))
    return Position
  })();

  /**
   * 门，正式版本
   */
  var Door = (function Door() {
    var count = 0

    function Door(line, points, link) {
      count++
      this.line = line
      this.linkedLines = link
      this.points = points
      this.color = 'rgba(0,200,175,1)'
    }

    Door.prototype.getIndex = function() {
      return 1;
    }

    Door.prototype.detection = function (origin) {
      if (origin) {
        var oV = util.lineVector({points: origin})
        var pV = util.lineVector({points: this.points})
        if (oV.x * pV.x < 0 || oV.y * pV.y < 0) {
          return false
        }
      }

      var collision = true
      var detection = []
      this.line.__doors && detection.push.apply(detection, this.line.__doors)
      this.line.__casements && detection.push.apply(detection, this.line.__casements)
      this.line.__columns && detection.push.apply(detection, this.line.__columns)
      for (var i = 0; i < detection.length; i++) {
        if (detection[i].points !== this.points && (
            util.isContainPoint(this.points[0], detection[i].points, 0.3) ||
            util.isContainPoint(this.points[1], detection[i].points, 0.3)
          )) {
          collision = false
        }
      }

      return collision && util.isContainPoint(this.points[0], this.line.points, 0.1) &&
        util.isContainPoint(this.points[1], this.line.points, 0.1) &&
        util.pointLineDis(this.linkedLines[0].points, this.points[0]) > 0.2 && 
        util.pointLineDis(this.linkedLines[0].points, this.points[1]) > 0.2 &&
        util.pointLineDis(this.linkedLines[1].points, this.points[0]) > 0.2 &&
        util.pointLineDis(this.linkedLines[1].points, this.points[1]) > 0.2
    }

    Door.prototype._down = function (point) {
      var info = {
        vector: util.lineVector(this.line)
      };

      if (util.lineDistance([point, this.points[0]]) < 0.3) {
        info.scalePoint = 0
      } else if (util.lineDistance([point, this.points[1]]) < 0.3) {
        info.scalePoint = 1
      } else if (!util.isContainPoint(point, this.points, 0.5)) {
        info = null
      }
      return info
    }

    Door.prototype.getMoveChange = function (vector, curr, prev) {
      var move = {
        x: vector.x < 0 ? (prev.x - curr.x) : (curr.x - prev.x),
        y: vector.y < 0 ? (prev.y - curr.y) : (curr.y - prev.y)
      }

      if (Math.abs(vector.x) > Math.abs(vector.y)) {
        move = {
          x: move.x * vector.x,
          y: move.x * vector.y
        }
      } else {
        move = {
          x: move.y * vector.x,
          y: move.y * vector.y
        }
      }
      return move
    }

    Door.prototype._move = function (point, prevPoint, info, renderer) {
      if (info.scalePoint !== undefined) {
        this.scale(point, prevPoint, info, renderer)
      } else {
        this.move(point, prevPoint, info.vector, renderer)
      }
    }

    Door.prototype.move = function (point, prevPoint, vector, renderer) {
      var move = this.getMoveChange(vector, point, prevPoint)
      this.points.forEach(function (point) {
        point.x += move.x
        point.y += move.y
      })


      if (this.detection()) {
        renderer.render()
        this.trigger('changePoints')
      } else {
        this.points.forEach(function (point) {
          point.x -= move.x
          point.y -= move.y
        })
      }
    }

    Door.prototype._hover = function (point, prevPoint, renderer) {
      this.selected = util.isContainPoint(point, this.points, 0.5)
      renderer.render()
      return this.selected
    }

    Door.prototype.scale = function (point, prevPoint, info, renderer) {
      var move = this.getMoveChange(info.vector, point, prevPoint)
      var origin = this.points.map(function(point) {
        return {
          x: point.x,
          y: point.y
        }
      })

      this.points[info.scalePoint].x += move.x
      this.points[info.scalePoint].y += move.y

      if (this.detection(origin)) {
        renderer.render()
        this.trigger('changePoints')
      } else {
        this.points[info.scalePoint].x -= move.x
        this.points[info.scalePoint].y -= move.y
      }
    }

    Door.prototype.draw = function (renderer, context) {
      var vpoint = util.verticalLine({points: this.points})
      var width = util.lineDistance(this.points)

      var points = this.points.concat([{
        x: this.points[0].x + vpoint[0] * width,
        y: this.points[0].y + vpoint[1] * width
      }])

      points = points.map(function (point) {
        return renderer.transScreenPoint(point)
      })

      var startDeg = util.lineAngle([points[1], points[0]]) * Math.PI / 180
      var endDeg = util.lineAngle([points[2], points[0]]) * Math.PI / 180
      var deg = endDeg - startDeg
      var router = ((deg > Math.PI || (deg < 0 && deg > -Math.PI)) ? true : false)
      var r = util.lineDistance([points[1], points[0]])


      context.strokeStyle = this.color;
      context.lineWidth = 4;
      // context.lineCap = 'round'
      context.strokeStyle = '#181c1d';

      context.beginPath();
      context.moveTo(points[0].x, points[0].y);
      context.lineTo(points[1].x, points[1].y);
      context.stroke()
      context.closePath();

      context.lineWidth = 1;
      context.strokeStyle = '#fff';
      context.beginPath();
      context.moveTo(points[0].x, points[0].y);
      context.arc(points[0].x, points[0].y, r, startDeg, endDeg, router);
      context.lineTo(points[0].x, points[0].y);
      context.stroke()
      if (this.selected) {
        context.fillStyle = 'rgba(243, 255, 0, 0.6)'
        context.fill()
      }
      context.closePath();
    }
    
    inherit(Door, Event.create('__door' + count + '__'))
    return Door
  })();


  /**
   * 窗
   */
  var Casement = (function Casement() {
    var count = 0
    function Casement(line, points, links) {
      count++
      this.line = line
      this.linkedLines = links
      this.points = points
      this.lineWidth = 4
      this.color = '#202123'
    }

    Casement.prototype.getIndex = function () {
      return 1;
    }

    Casement.prototype.detection = function (origin) {
      if (origin) {
        var oV = util.lineVector({
          points: origin
        })
        var pV = util.lineVector({
          points: this.points
        })
        if (oV.x * pV.x < 0 || oV.y * pV.y < 0) {
          return false
        }
      }

      var collision = true
      var detection = []
      this.line.__doors && detection.push.apply(detection, this.line.__doors)
      this.line.__casements && detection.push.apply(detection, this.line.__casements)
      this.line.__columns && detection.push.apply(detection, this.line.__columns)

      for (var i = 0; i < detection.length; i++) {
        if (detection[i].points !== this.points &&(
              util.isContainPoint(this.points[0], detection[i].points, 0.3) ||
              util.isContainPoint(this.points[1], detection[i].points, 0.3)
            )
          ) {
          collision = false
        }
      }

      return collision && util.isContainPoint(this.points[0], this.line.points, 0.1) &&
        util.isContainPoint(this.points[1], this.line.points, 0.1) &&
        util.pointLineDis(this.linkedLines[0].points, this.points[0]) > 0.2 && 
        util.pointLineDis(this.linkedLines[0].points, this.points[1]) > 0.2 &&
        util.pointLineDis(this.linkedLines[1].points, this.points[0]) > 0.2 &&
        util.pointLineDis(this.linkedLines[1].points, this.points[1]) > 0.2
    }

    Casement.prototype._down = function (point) {
      var info = {
        vector: util.lineVector(this.line)
      };

      if (util.lineDistance([point, this.points[0]]) < 0.3) {
        info.scalePoint = 0
      } else if (util.lineDistance([point, this.points[1]]) < 0.3) {
        info.scalePoint = 1
      } else if (!util.isContainPoint(point, this.points, 0.5)) {
        info = null
      }
      return info
    }

    Casement.prototype.getMoveChange = function (vector, curr, prev) {
      var move = {
        x: vector.x < 0 ? (prev.x - curr.x) : (curr.x - prev.x),
        y: vector.y < 0 ? (prev.y - curr.y) : (curr.y - prev.y)
      }

      if (Math.abs(vector.x) > Math.abs(vector.y)) {
        move = {
          x: move.x * vector.x,
          y: move.x * vector.y
        }
      } else {
        move = {
          x: move.y * vector.x,
          y: move.y * vector.y
        }
      }
      return move
    }

    Casement.prototype._hover = function (point, prevPoint, renderer) {
      this.selected = util.isContainPoint(point, this.points, 0.5)
      renderer.render()
      return this.selected
    }

    Casement.prototype._move = function (point, prevPoint, info, renderer) {
      if (info.scalePoint !== undefined) {
        this.scale(point, prevPoint, info, renderer)
      } else {
        this.move(point, prevPoint, info.vector, renderer)
      }
    }

    Casement.prototype.move = function (point, prevPoint, vector, renderer) {
      var move = this.getMoveChange(vector, point, prevPoint)
      this.points.forEach(function (point) {
        point.x += move.x
        point.y += move.y
      })

      if (this.detection()) {
        renderer.render()
        this.trigger('changePoints')
      } else {
        this.points.forEach(function (point) {
          point.x -= move.x
          point.y -= move.y
        })
      }
    }

    Casement.prototype.scale = function (point, prevPoint, info, renderer) {
      var move = this.getMoveChange(info.vector, point, prevPoint)
      var origin = this.points.map(function (point) {
        return {
          x: point.x,
          y: point.y
        }
      })

      this.points[info.scalePoint].x += move.x
      this.points[info.scalePoint].y += move.y

      if (this.detection(origin)) {
        renderer.render()
        this.trigger('changePoints')
      } else {
        this.points[info.scalePoint].x -= move.x
        this.points[info.scalePoint].y -= move.y
      }
    }

    Casement.prototype.draw = function (renderer, context) {
      var points = this.points.map(function (point) {
        return renderer.transScreenPoint(point)
      })

      context.strokeStyle = this.color;
      context.lineWidth = this.lineWidth;
      context.beginPath();
      context.moveTo(points[0].x, points[0].y);
      context.lineTo(points[1].x, points[1].y);
      context.stroke()
      context.closePath();

      context.strokeStyle = '#fff';
      context.lineWidth = 1;
      context.beginPath();
      context.moveTo(points[0].x, points[0].y);
      context.lineTo(points[1].x, points[1].y);
      context.stroke()
      context.closePath();

      // if (this.selected) {
      //   context.strokeStyle = 'rgba(243, 255, 0, 0.9)'
      //   context.lineWidth = this.lineWidth;
      //   context.beginPath();
      //   context.moveTo(points[0].x, points[0].y);
      //   context.lineTo(points[1].x, points[1].y);
      //   context.closePath();
      //   context.stroke()
      // }
    }

    inherit(Casement, Event.create('__casement' + count + '__'))
    return Casement
  })();

  /**
   *  柱子
   */
  var Column = (function Column() {
    var count = 0

    function Column(line, points, links) {
      count++
      this.line = line
      this.linkedLines = links
      this.points = points
      this.color = '#ffffff'
    }

    Column.prototype.getIndex = function () {
      return 1;
    }

    Column.prototype.detection = function (origin) {
      if (origin) {
        var oV = util.lineVector({
          points: origin
        })
        var pV = util.lineVector({
          points: this.points
        })
        if (oV.x * pV.x < 0 || oV.y * pV.y < 0) {
          return false
        }
      }

      var collision = true
      var detection = []
      this.line.__doors && detection.push.apply(detection, this.line.__doors)
      this.line.__casements && detection.push.apply(detection, this.line.__casements)
      this.line.__columns && detection.push.apply(detection, this.line.__columns)

      for (var i = 0; i < detection.length; i++) {
        if (detection[i].points !== this.points && (
            util.isContainPoint(this.points[0], detection[i].points, 0.3) ||
            util.isContainPoint(this.points[1], detection[i].points, 0.3)
          )) {
          collision = false
        }
      }

      return collision && util.isContainPoint(this.points[0], this.line.points, 0.1) &&
        util.isContainPoint(this.points[1], this.line.points, 0.1) &&
        util.pointLineDis(this.linkedLines[0].points, this.points[0]) > 0.2 && 
        util.pointLineDis(this.linkedLines[0].points, this.points[1]) > 0.2 &&
        util.pointLineDis(this.linkedLines[1].points, this.points[0]) > 0.2 &&
        util.pointLineDis(this.linkedLines[1].points, this.points[1]) > 0.2
    }

    Column.prototype._down = function (point) {
      var info = {
        vector: util.lineVector(this.line)
      };

      if (util.isContainPoint(point, [this.points[1], this.points[2]], 0.3)) {
        info.scalePoint = 0
      } else if (util.isContainPoint(point, [this.points[2], this.points[3]], 0.3)) {
        info.scalePoint = 1
      } else if (util.isContainPoint(point, [this.points[3], this.points[0]], 0.3)) {
        info.scalePoint = 2
      } else if (!util.pointInside(point, this.points)) {
        info = null
      }
      return info
    }

    Column.prototype.getMoveChange = function (vector, curr, prev) {
      var move = {
        x: vector.x < 0 ? (prev.x - curr.x) : (curr.x - prev.x),
        y: vector.y < 0 ? (prev.y - curr.y) : (curr.y - prev.y)
      }

      if (Math.abs(vector.x) > Math.abs(vector.y)) {
        move = {
          x: move.x * vector.x,
          y: move.x * vector.y
        }
      } else {
        move = {
          x: move.y * vector.x,
          y: move.y * vector.y
        }
      }
      return move
    }

    Column.prototype._hover = function (point, prevPoint, renderer) {
      this.selected = util.isContainPoint(point, [this.points[1], this.points[2]], 0.3) ||
        util.isContainPoint(point, [this.points[2], this.points[3]], 0.3) ||
        util.isContainPoint(point, [this.points[3], this.points[0]], 0.3) ||
        util.pointInside(point, this.points)

      renderer.render()
      return this.selected
    }

    Column.prototype._move = function (point, prevPoint, info, renderer) {
      if (info.scalePoint !== undefined) {
        this.scale(point, prevPoint, info, renderer)
      } else {
        this.move(point, prevPoint, info.vector, renderer)
      }
    }

    Column.prototype.move = function (point, prevPoint, vector, renderer) {
      var move = this.getMoveChange(vector, point, prevPoint)
      this.points.forEach(function (point) {
        point.x += move.x
        point.y += move.y
      })

      if (this.detection()) {
        renderer.render()
        this.trigger('changePoints')
      } else {
        this.points.forEach(function (point) {
          point.x -= move.x
          point.y -= move.y
        })
      }
    }

    Column.prototype.scale = function (point, prevPoint, info, renderer) {
      var origin = this.points.map(function (point) {
        return {
          x: point.x,
          y: point.y
        }
      })
      var prev = (info.scalePoint + 1) % this.points.length
      var next = (info.scalePoint + 2) % this.points.length
      var vV = util.verticalLine({points: [this.points[prev], this.points[next]]})
      vV = {x: vV[0], y: vV[1]}
      var move = this.getMoveChange(vV,point, prevPoint)

      this.points[prev].x += move.x
      this.points[prev].y += move.y
      this.points[next].x += move.x
      this.points[next].y += move.y

      if (this.detection(origin)) {
        renderer.render()
        this.trigger('changePoints')
      } else {
        this.points[prev].x -= move.x
        this.points[prev].y -= move.y
        this.points[next].x -= move.x
        this.points[next].y -= move.y
      }
    }

    Column.prototype.draw = function (renderer, context) {
      var points = this.points.map(function (point) {
        return renderer.transScreenPoint(point)
      })

      context.strokeStyle = this.color;
      context.lineWidth = 1;
      context.beginPath();
      context.moveTo(points[0].x, points[0].y);
      for (var i = 0; i < points.length; i++) {
        context.lineTo(points[i].x, points[i].y);
      }
      context.lineTo(points[0].x, points[0].y);
      context.stroke();
      if (this.selected) {
        context.fillStyle = 'rgba(243, 255, 0, 0.6)'
        context.fill()
      }
      context.closePath();

      context.beginPath();
      context.moveTo(points[0].x, points[0].y);
      context.lineTo(points[2].x, points[2].y);
      context.stroke();
      context.closePath();

      context.beginPath();
      context.moveTo(points[1].x, points[1].y);
      context.lineTo(points[3].x, points[3].y);
      context.closePath();
      context.stroke();
    }

    inherit(Column, Event.create('__column' + count + '__'))
    return Column

  })();


  /**
   * 总控制
   */
  var Renderer = (function Renderer() {
    var execFilter = 'FUNCTION_EXEC'

    /**
     * 渲染器
     * @param {*} canvas 画布
     * @param {*} wallData 墙面数据
     */
    function Renderer(canvas, wallData) {
      this.canvas = canvas
      this.context = canvas.getContext('2d')
      this.origin = wallData
      this.models = []
      this.init()
      this.regEvent()
    }

    /**
     * 计算所有需要的信息，渲染器需要的宽高，真实比例等
     */
    Renderer.prototype.init = function () {
      this.width = this.canvas.width
      this.height = this.canvas.height
      this.wMultiple = this.canvas.width / this.canvas.offsetWidth
      this.hMultiple = this.canvas.height / this.canvas.offsetHeight
      this.context.translate(this.width / 2, this.height / 2);
      this.screenOffset = getPosition(this.canvas)

      this.section = {
        minx: -this.width / 2,
        maxx: this.width / 2,
        miny: -this.height / 2,
        maxy: this.height / 2
      }

      var points = []
      this.origin.forEach(function (line) {
        points = points.concat(...line.points)
      })

      var result = util.tranProp(points, [-0.8, 0.8])
      this.status = {
        offset: result.offset,
        prop: result.prop,
        range: result.range
      }
    }

    /**
     * 真实点位转化为画布点位
     */
    Renderer.prototype.transScreenPoint = function (point) {
      var spoint = {
        x: point.x,
        y: point.y
      }
      spoint.x += this.status.offset.x
      spoint.y += this.status.offset.y

      spoint.x = (spoint.x * this.status.range / this.status.prop) * (this.width / 2)
      spoint.y = (spoint.y * this.status.range / this.status.prop) * (this.height / 2)

      return spoint
    }

    /**
     * 画布点位转化为真实点位
     */
    Renderer.prototype.transRealPoint = function (point) {
      return {
        x: (point.x * this.status.prop) / (this.status.range * this.width / 2) - this.status.offset.x,
        y: (point.y * this.status.prop) / (this.status.range * this.height / 2) - this.status.offset.y
      }
    }


    Renderer.prototype.regEvent = function () {
      var sinfo, model;
      var startPoint = null
      var prevPoint = null
      var models = null

      var event = {
        down(offset) {
          offset.x = (offset.x - this.screenOffset.x) * this.wMultiple
          offset.y = (offset.y - this.screenOffset.y) * this.hMultiple
          startPoint = this.transRealPoint(util.tranPoint(offset, this.section))
          prevPoint = startPoint

          models = Object.assign([], this.models).sort(function(a, b) {
            return ((b.getIndex && b.getIndex()) || 0) - ((a.getIndex && a.getIndex()) || 0)
          })

          for (var i = 0; i < models.length; i++) {
            sinfo = models[i]._down && models[i]._down(startPoint, this)
            if (sinfo) {
              model = models[i]
              break;
            }
          }

          return true
        },
        move(move) {
          if (!models) {
            models = Object.assign([], this.models).sort(function (a, b) {
              return ((b.getIndex && b.getIndex()) || 0) - ((a.getIndex && a.getIndex()) || 0)
            })
          }

          move.x = (move.x - this.screenOffset.x) * this.wMultiple
          move.y = (move.y - this.screenOffset.y) * this.hMultiple
          var point = this.transRealPoint(util.tranPoint(move, this.section))
          if (model) {
            model._move(point, prevPoint, sinfo, this, this.context)
          } else {
            for (var i = 0; i < models.length; i++) {
              if (models[i]._hover && models[i]._hover(point, prevPoint, this, this.context)) {
                break;
              }
            }
            if (i === models.length) {
              this.canvas.style.cursor = 'inherit';
            } else {
              this.canvas.style.cursor = 'pointer';
            }
          }
          prevPoint = point
        },
        up() {
          model && model._up && model._up(startPoint, prevPoint, this, this.context)
          startPoint = null
          prevPoint = null
          model = null
          sinfo = null
          models = null
        }
      }

      event.down = event.down.bind(this)
      event.move = event.move.bind(this)
      event.up = event.up.bind(this)

      addMouseEvent(this.canvas, event)
    }

    /**
     * 统一执行命令
     */
    Renderer.prototype.unifiedExec = function () {
      var args = Array.from(arguments)
      var command = args.shift()
      var ret = []
      var filter = args[args.length - 1] === execFilter

      this.models.map(function (model) {
        if (model[command]) {
          if (filter) {
            ret.push(args[0].apply(model, [model, args.slice(1, args.length - 1)]))
          } else {
            ret.push(model[command].apply(model, args))
          }
        } else {
          ret.push(null)
        }
      })
      return ret
    }

    /**
     * 保存状态
     */
    Renderer.prototype.preservationState = function () {
      this.unifiedExec('preservationState', this)
    }

    Renderer.prototype.revokeState = function () {
      this.unifiedExec('revokeState', this)
    }

    /**
     * 渲染所有依赖了渲染器的模型
     */
    Renderer.prototype.render = function () {
      var that = this
      if (!that.rendering) {
        that.rendering = true
        requestAnimationFrame(render)
      }

      function render() {
        that.context.clearRect(-that.width / 2, -that.height / 2, that.width, that.height)
        that.unifiedExec('draw', function (model) {
          that.context.save()
          model.draw(that, that.context)
          that.context.restore()
        }, execFilter);
        that.rendering = false
      }
    }

    return Renderer
  })();


  function update3D(line) {
    if (line.updateLine3D) {
      line.updateLine3D()
    } else {
      // console.error('当前线条没有注册3D线条方法')
    }
  }

  function update2d(wall, line) {
    if (line.___loadUpdate) {
      return;
    }
    var update = line.update
    line.___loadUpdate = true
    line.update = function (dirs, len, renderer) {
      var args = [{
          x: 0,
          y: 0
        },
        {
          x: 0,
          y: 0
        },
        {
          line: this,
          face: wall.faces[this.roomIndex],
          dire: dirs[1]
        },
        renderer
      ]
      args[0][dirs[0]] = len;

      wall._move.apply(wall, args)
      update && update.bind(this)()
    }
  }


  /**
   * 装载门窗，并拦截线段移动碰到门窗
   * @param {*} line2Ds 
   * @param {*} wall 
   */
  function loadComponents(line2Ds, wall, renderer) {
    var doors = []
    var casements = []
    var columns = []

    line2Ds.forEach(function (line) {
      line.__doors = line.__doors || []
      line.__casements = line.__casements || []
      line.__columns = line.__columns || []

      
      line.otherobjs && line.otherobjs.forEach(function (obj) {
        function check(_obj) {
          return _obj.origin === obj
        }
        if (~line.__doors.findIndex(check) || ~line.__casements.findIndex(check)) return;

        var links = line.linkedLineID.map(function(id) {
          return line2Ds.find(function(line) {
            return line.id === id
          })
        })
        var _obj
        if (~obj.id.indexOf('door')) {
          _obj = new Door(line, obj.points2d, links)
          // 创建线段中的门
          line.__doors.push(_obj)
          doors.push(_obj)
        } else if (~obj.id.indexOf('window')) {
          _obj = new Casement(line, obj.points2d, links)
          // 创建线段中的窗
          line.__casements.push(_obj)
          casements.push(_obj)
        } else if (~obj.id.indexOf('column')) {
          _obj = new Column(line, obj.points2d, links)
          // 创建线段中的柱子
          line.__columns.push(_obj)
          columns.push(_obj)
        }

        _obj.origin = obj
        var update = obj.update2d
        /**
         * x 偏移  y偏移
         */
        obj.update2d = function(x, y) {
          update && update()
          // var ret = renderer.transScreenPoint({x: x, y: y})
          var args = [
            {x: 0, y: 0},
            {x: -x, y: -y},
            {
              vector: util.lineVector(obj),
              scalePoint: 0  //0为移动  1为放大缩小
            },
            renderer
          ]
          
          _obj._move.apply(_obj, args)
        }
      })

      // 3D改变同步状态改变2D方法注册
      update2d(wall, line, renderer)
    })


    if (!wall.__additional__detection) {
      // 创建拦截，拦截移动墙面碰到门窗
      wall.__additional__detection = true
      var detection = wall.detection.bind(wall)
      wall.detection = function (movePos) {
        if (detection(movePos)) {
          return true
        }

        var line = movePos.line
        // var objs = [(line.__doors || []).concat(line.__casements || [])]
        var objs = []
        var reject = false

        for (var i = 0; i < line2Ds.length; i++) {
          if (line2Ds[i].id === line.linkedLineID[0] || line2Ds[i].id === line.linkedLineID[1]) {
            line2Ds[i].__doors && objs.push.apply(objs, line2Ds[i].__doors)
            line2Ds[i].__casements && objs.push.apply(objs, line2Ds[i].__casements)
            line2Ds[i].__columns && objs.push.apply(objs, line2Ds[i].__columns)
          }
        }
        objs.forEach(function (obj) {
          if (!obj.detection()) {
            reject = true
          }
        })
        return reject
      }
    }

    return doors.concat(casements).concat(columns)
  }

  return function (dom, line2Ds, cameras) {
    var renderer = new Renderer(dom, line2Ds)
    var wall = new Wall(line2Ds, cameras)

    // 当墙面位置发生改变时同步3D
    wall.listen('changePosition', function(line2D) {
      line2Ds.forEach(function (line) {
        if (line.id === line2D.linkedLineID[0] ||
          line.id === line2D.linkedLineID[1]) {
          update3D(line)
        }
      })
      update3D(line2D)
    })


    renderer.models.push(wall)
    renderer.render()

    function load () {
      var objs = loadComponents(line2Ds, wall, renderer)
      // 当门窗位置大小发生改变时同步3D
      objs.forEach(function (obj) {
        obj.listen('changePoints', function () {
          if (obj.origin.update3D) {
            obj.origin.update3D()
          } else {
            // console.log(obj.origin, '组件未绑定更新3D方法')
          }
        })
      })
      renderer.models.push.apply(renderer.models, objs)
      renderer.render()
    }
    load();

    var position;
    return {
      // 设置当前位置
      position: function (posPoint, angle) {
        if (!position) {
          position = new Position(posPoint, angle)
          renderer.models.push(position)
        } else {
          position.point = posPoint
          position.angle = angle
        }
        renderer.render()
      },
      renderer: renderer,
      updateComponents: load
    }
  }
})();