commit cccc-lib

cccc-lib/base.css

@@ -0,0 +1,21 @@
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+html {
+    -moz-user-select: none; /*火狐*/
+    -webkit-user-select: none; /*webkit浏览器*/
+    -ms-user-select: none; /*IE10*/
+    -khtml-user-select: none; /*早期浏览器*/
+    user-select: none;
+    /*overflow: auto; !*避免出现滚动条*!*/
+    font-size: 12px; /* larger, smaller */
+    color: white;
+}
+html, body{
+    height: 100%;
+}
+html, body{
+    overflow: visible;
+}

cccc-lib/cccc-core.js

@@ -0,0 +1,263 @@
+(function () {
+    let obj = {}
+    obj.isArray = function (argu) {
+        let result = typeof argu != 'undefined';
+        result = result && argu;
+        result = result && argu instanceof Array;
+        return result === true;
+    }
+    obj.isUndefined = function (argu) {
+        return (typeof argu == 'undefined') === true;
+    }
+    obj.isNull = function (argu) {
+        return obj.isUndefined(argu) || argu == null;
+    }
+    obj.isNotNull = function (argu) {
+        return !obj.isNull(argu);
+    }
+    /*
+ * 判断为空字符串
+ */
+    obj.isEmpty = function (str) {
+        return obj.isNull(str) || str == "";
+    }
+    obj.isFunction = function (argu) {
+        return obj.isNotNull(argu) && argu instanceof Function
+    }
+    /**
+     * 判断是否为IE浏览器
+     * @return {boolean}
+     */
+    obj.isIE = function () {
+        if (!!window.ActiveXObject || "ActiveXObject" in window) {
+            return true;
+        } else {
+            return false;
+        }
+    }
+    /**
+     * 获取http url后面的查询参数
+     */
+    obj.getReqParameter = function (key) {
+        var re = new RegExp(key + '=([^&]*)(?:&)?');
+        var url = window.location.href;
+        return url.match(re) && url.match(re)[1];
+    }
+
+    /**
+     * 格式化字符串
+     * @param str: 包含占位符{n}的字符串
+     * @param str之后的参数列表中为替换占位符的值
+     * 举例 :   cccc.format('{1} hellow {0} ', 'world' , 'xiaoming'), 格式化结果:  xiaoming hello world
+     */
+    obj.format = function (str) {
+        let result = str
+        for (let index = 1; index < arguments.length; index++) {
+            let regex = new RegExp('\\{' + (index - 1) + '\\}', 'g')
+            result = result.replace(regex, arguments[index])
+        }
+        return result
+    }
+
+    obj.formatNumber = function (num) {
+        return (100 + num + '').substring(1)
+    }
+
+    obj.formatDate = function (date) {
+        if (date instanceof Date) {
+            let now = date
+            let y = now.getFullYear()
+            let m = obj.formatNumber(now.getMonth() + 1)
+            let d = obj.formatNumber(now.getDate())
+            let h = obj.formatNumber(now.getHours())
+            let minute = obj.formatNumber(now.getMinutes())
+            let sec = obj.formatNumber(now.getSeconds())
+            let datestr = cccc.format('{0}-{1}-{2}', y, m, d)
+            return datestr
+        }
+    }
+
+    obj.formatDateTime = function (date) {
+        if (date instanceof Date) {
+            let now = date
+            let h = obj.formatNumber(now.getHours())
+            let minute = obj.formatNumber(now.getMinutes())
+            let sec = obj.formatNumber(now.getSeconds())
+            let timeStr = cccc.format('{0}:{1}:{2}', h, minute, sec)
+            let dataStr = obj.formatDate(now)
+            return dataStr + ' ' + timeStr
+        } else
+            return ''
+    }
+
+//如果是IE浏览器
+    if (obj.isIE()) {
+        Object.assign = function (target, source) {
+            for (var item in source) {
+                target[item] = source[item]
+            }
+        }
+    }
+
+    function resizeWidth(e) {
+        pauseEvent(e);
+        if (e.buttons == 1) {
+            let offset = e.clientX - document.active_resizing_target.last_pos_x
+            document.active_resizing_target.style.width = document.active_resizing_target.clientWidth + offset + "px"
+            document.active_resizing_target.last_pos_x = e.clientX
+        }
+    }
+
+    function resizeHeight(e) {
+        pauseEvent(e);
+        if (e.buttons == 1) {
+            let offset = e.clientY - document.active_resizing_target.last_pos_y
+            document.active_resizing_target.style.height = document.active_resizing_target.clientHeight + offset + "px"
+            document.active_resizing_target.last_pos_y = e.clientY
+        }
+    }
+
+    let movelistener = {
+        handleEvent: function (e) {
+            pauseEvent(e);
+        }
+    }
+
+    /**
+     * 阻止事件冒泡
+     * 不仅仅要stopPropagation，还要preventDefault
+     * @param e
+     * @return {boolean}
+     */
+    function pauseEvent(e) {
+        //在事件中
+        e = e || window.event;
+        if (e.stopPropagation) e.stopPropagation();
+        if (e.preventDefault) e.preventDefault();
+        e.cancelBubble = true;
+        e.returnValue = false;
+        return e;
+    }
+
+    obj.enableResize = function (targetElement) {
+        if (obj.isNull(targetElement))
+            return
+        targetElement.className = typeof targetElement.className == 'undefined' || !targetElement.className ? 'enable-resizable' : targetElement.className + '  ' + 'enable-resizable'
+        let rightSide = document.createElement('div')
+        rightSide.className = 'right-side'
+        targetElement.appendChild(rightSide)
+        document.addEventListener('mousemove', movelistener)
+        rightSide.addEventListener('mousedown', function (e) {
+            pauseEvent(e);
+            document.active_resizing_target = targetElement
+            document.active_resizing_target.last_pos_x = e.clientX
+            movelistener.handleEvent = resizeWidth
+        })
+        let bottomSide = document.createElement('div')
+        bottomSide.className = 'bottom-side'
+        targetElement.appendChild(bottomSide)
+        bottomSide.addEventListener('mousedown', function (e) {
+            pauseEvent(e);
+            document.active_resizing_target = targetElement
+            document.active_resizing_target.last_pos_y = e.clientY
+            movelistener.handleEvent = resizeHeight
+        })
+        let thumb = document.createElement('div')
+        thumb.className = 'thumb'
+        targetElement.appendChild(thumb)
+        thumb.addEventListener('mousedown', function (e) {
+            pauseEvent(e);
+            document.active_resizing_target = targetElement
+            document.active_resizing_target.last_pos_y = e.clientY
+            document.active_resizing_target.last_pos_x = e.clientX
+            movelistener.handleEvent = function (e) {
+                pauseEvent(e);
+                resizeHeight(e)
+                resizeWidth(e)
+            }
+        })
+        document.addEventListener('mouseup', function (e) {
+            pauseEvent(e);
+            movelistener.handleEvent = function (e) {
+                pauseEvent(e);
+            }
+        })
+    }
+
+    obj.dialog = function (targetElement, title, dialogWrapId) {
+        let dialogWrap = document.createElement('div')
+        dialogWrap.id = dialogWrapId
+        dialogWrap.className = 'cccc-dialog'
+        let titlebar = document.createElement('div')
+        titlebar.className = 'title-bar'
+        let caption = document.createElement('div')
+        caption.innerHTML = title
+        caption.className = 'caption'
+        let closeBtn = document.createElement('span')
+        closeBtn.className = 'close'
+        titlebar.appendChild(caption)
+        titlebar.appendChild(closeBtn)
+        dialogWrap.appendChild(titlebar)
+        dialogWrap.appendChild(targetElement)
+        document.body.appendChild(dialogWrap)
+
+        function mousemoveListener(e) {
+            e = pauseEvent(e)
+            if (e.buttons == 1) {
+                let current_pos = {
+                    x: e.clientX,
+                    y: e.clientY
+                }
+                // console.log('this.parentNode.clientLeft = ' + this.parentNode.clientLeft)
+                titlebar.parentNode.style.left =
+                    titlebar.parentNode.offsetLeft + (current_pos.x - titlebar.last_pos.x) + 'px'
+                titlebar.parentNode.style.top =
+                    titlebar.parentNode.offsetTop + (current_pos.y - titlebar.last_pos.y) + 'px'
+                titlebar.last_pos = current_pos
+            }
+        }
+
+        titlebar.addEventListener('mousedown', function (e) {
+            e = pauseEvent(e)
+            this.last_pos = {
+                x: e.clientX,
+                y: e.clientY
+            }
+            document.addEventListener('mousemove', mousemoveListener)
+        })
+        document.addEventListener('mouseup', function (e) {
+            e = pauseEvent(e)
+            document.removeEventListener('mousemove', mousemoveListener)
+        })
+        closeBtn.addEventListener('click', function (e) {
+            dialogWrap.style.display = 'none'
+        })
+
+        return {}
+    }
+
+    /**
+     * 计算html元素在页面中的绝对边界(相对根元素)
+     * @param htmlElement
+     */
+    obj.getBound = function (htmlElement) {
+        let rect = {
+            left: $(htmlElement).offset().left, top: $(htmlElement).offset().top,
+            width: htmlElement.offsetWidth, height: htmlElement.offsetHeight
+        }
+        /*        if(htmlElement.tagName.toLowerCase() !== 'html')
+                {
+                   let outter = obj.getBound($(htmlElement).offsetParent().get(0))
+                    rect.left += outter.left
+                    rect.top += outter.top
+                }*/
+        return rect
+    }
+
+    if (typeof window.cccc == 'undefined' || obj.isNull(window.cccc))
+        window.cccc = {}
+    Object.assign(window.cccc, obj)
+}());
+
+
+

cccc-lib/cccc-graphic.js

@@ -0,0 +1,159 @@
+/*
+ 包含Web2D图形绘制及操作的接口
+ */
+let temp = (function () {
+
+  /*
+  将一组点依次连接起来形成路径
+   */
+  let createPath = function (points) {
+    if (typeof (points) == 'undefined' || !(points instanceof Array) || points.length == 0)
+      return;
+    let path = new Path2D();
+    path.moveTo(points[0].x, points[0].y);
+    for (let i = 0; i < points.length; i++)
+      path.lineTo(points[i].x, points[i].y);
+
+    return path;
+  };
+
+  //角度转弧度
+  function degToRad(degrees) {
+    return degrees * Math.PI / 180;
+  };
+
+  //在矩形中间绘制文本
+  // function centerTextInRect({ctx, text, textColor = 'black', rect:{x, y, w, h}, font = 0}) {
+  //   if (font)
+  //     ctx.font = font;
+  //   let textSize = ctx.measureText(text);
+  //   ctx.textBaseline = 'middle';
+  //   ctx.fillStyle = textColor;
+  //   ctx.fillText(text, x + (w - textSize.width) / 2, y + h / 2);
+  // }
+
+  /**
+   * 在矩形中间绘制文本
+   * @param options : {ctx, text, textColor = 'black', rect:{x, y, w, h}, font = 0}
+   */
+  function centerTextInRect(options) {
+    if (options.font)
+      options.ctx.font = options.font;
+    let textSize =options. ctx.measureText(options.text);
+    options.ctx.textBaseline = 'middle';
+    options.ctx.fillStyle = options.textColor;
+    options.ctx.fillText(options.text, options.rect.x + (options.rect.w - textSize.width) / 2, options.rect.y + options.rect.h / 2);
+  }
+
+  //计算一组点所占区域的矩形边界
+  function outerBound(points) {
+    if (typeof points == 'undefined') return null;
+    if (!points instanceof Array || points.length == 0)
+      return null;
+    let minX = points[0].x;
+    let maxX = minX;
+    let minY = points[0].y;
+    let maxY = minY;
+
+    points.forEach(function (p) {
+      if (p.x < minX)
+        minX = p.x;
+      else if (p.x > maxX)
+        maxX = p.x;
+      if (p.y < minY)
+        minY = p.y;
+      else if (p.y > maxY)
+        maxY = p.y;
+    });
+
+    return {
+      x: minX, y: minY, w: maxX - minX, h: maxY - minY
+    }
+  }
+
+  /**
+   * 多边形构造函数
+   * options: {
+                     ctx,  // CanvasRenderingContext2D类型绘图环境
+                     fillColor = 'rgba(0,0,0,0)',
+                     strokeColor = 'rgb(0,0,0)',
+                     canvasColor,
+                     lineWidth = 1
+                   }
+   */
+  function Polygon(option) {
+    for(let attr in option){
+      eval( 'var ' + attr + ' = option.' + attr )
+    }
+    if (cccc.isUndefined(ctx) || !(ctx instanceof CanvasRenderingContext2D))
+      throw '创建多边形Polygon时请提供CanvasRenderingContext2D类型绘图环境ctx选项';
+    this.ctx = ctx;
+    this.path = new Path2D();
+    this.points = [];
+    this.finished = false;
+    this.fillColor = fillColor;
+    this.strokeColor = strokeColor;
+    this.lineWidth = lineWidth;
+    this.canvasColor = canvasColor;
+  };
+  Polygon.prototype.addPoint = function (point) { //多边形添加点
+    for(let attr in point){
+      eval( 'var ' + attr + ' = point.' + attr )
+    }
+    if (this.finished)
+      throw '多边形polygon已经完成绘制，不能再添加坐标点'
+    this.points.push({x:x, y:y});
+    this.redraw();
+  };
+  Polygon.prototype.finish = function () {//多边形完成绘制,在绘制最后必须调用此方法，调用finish后不能再调用addPoint
+    let start = this.points[0];
+    this.addPoint(start);
+    this.finished = true;
+  };
+  Polygon.prototype.redraw = function () {
+    if (this.points.length == 0)
+      return;
+    let start = this.points[0];
+    this.path = new Path2D();
+    this.path.moveTo(start.x, start.y);
+    for (let i = 1; i < this.points.length; i++) {
+      let p = this.points[i];
+      this.path.lineTo(p.x, p.y);
+    }
+    this.ctx.save();
+    this.ctx.fillStyle = this.fillColor;
+    this.ctx.strokeStyle = this.strokeColor;
+    this.ctx.lineWidth = this.lineWidth;
+    this.ctx.fill(this.path);
+    if (this.lineWidth > 0)
+      this.ctx.stroke(this.path);
+    this.ctx.restore();
+  };
+  Polygon.prototype.undo = function () {
+    var savedStyle = {
+      strokeColor: this.strokeColor,
+      fillColor: this.fillColor
+    };
+    this.strokeColor = this.fillColor = this.canvasColor;
+    this.redraw();
+    this.points.pop();
+    this.finished = false;
+    this.strokeColor = savedStyle.strokeColor;
+    this.fillColor = savedStyle.fillColor;
+    this.redraw();
+  };
+  return {
+    createPath: createPath,
+    degToRad: degToRad,
+    centerTextInRect: centerTextInRect,
+    outerBound: outerBound,
+    Polygon: Polygon
+  };
+}());
+if (typeof cccc != 'undefined' && cccc)
+  Object.assign(cccc, temp);
+else
+  cccc = temp;
+
+
+

cccc-lib/cccc.css

@@ -0,0 +1,312 @@
+.font-larger {
+    font-size: 18px !important;
+}
+
+.font-large {
+    font-size: 16px !important;
+}
+
+.font-normal {
+    font-size: 14px !important;
+}
+
+.font-small {
+    font-size: 13px !important;
+}
+
+.font-smaller {
+    font-size: 12px !important; /* 这是chrome能支持的最小字体*/
+}
+
+/*
+实现文本两端对齐
+*/
+.text-justify {
+    text-align: justify;
+    text-justify: inter-ideograph; /* IE 浏览器必须加这个 */
+    line-height: 1rem;
+    height: 1rem;
+    overflow: hidden;
+}
+
+.text-justify:after {
+    content: "";
+    display: inline-block;
+    width: 100%;
+}
+
+
+/*
+按钮样式
+ */
+.cccc-btn-default {
+    display: inline-block;
+    border: 1px solid grey;
+    color: white;
+    background-color: grey;
+    line-height: 2em;
+    height: 2em;
+    text-align: center;
+    vertical-align: middle;
+    border-radius: 1em;
+    text-underline-style: none;
+}
+
+.cccc-btn-yellow {
+    display: inline-block;
+    width: 8em;
+    height: 2em;
+    line-height: 2em;
+    vertical-align: middle;
+    background-color: #f9bf11;
+    text-decoration: none;
+    color: grey;
+    text-align: center;
+    border-radius: 4em;
+}
+
+.cccc-btn-yellow:hover {
+    color: white;
+}
+
+.enable-resizable {
+    padding: 0;
+    position: absolute;
+    border-left: 3px solid #cccccc;
+    border-top: 3px solid #cccccc;
+    box-sizing: content-box !important;
+}
+
+.enable-resizable .right-side {
+    position: absolute;
+    right: -3px;
+    width: 3px;
+    bottom: 0px;
+    top: -3px;
+    background-color: #cccccc;
+    cursor: ew-resize;
+}
+
+.enable-resizable .bottom-side {
+    position: absolute;
+    left: -3px;
+    bottom: -3px;
+    right: 0px;
+    height: 3px;
+    background-color: #cccccc;
+    cursor: ns-resize;
+
+}
+
+.enable-resizable .thumb {
+    position: absolute;
+    right: -3px;
+    bottom: -3px;
+    width: 11px;
+    height: 10px;
+    background-color: #cccccc;
+    /*background-image: url("resize_thumb.png");*/
+    background-size: contain;
+    background-position: 1px 1px;
+    cursor: se-resize;
+    background-repeat: no-repeat;
+    border: 1px solid #cccccc;
+    border-top-left-radius: 10px;
+}
+
+.cccc-dialog {
+    position: absolute;
+}
+
+.cccc-dialog .title-bar {
+    display: flex;
+    align-items: center;
+    background-color: #007dcd;
+    height: 2em;
+}
+
+.cccc-dialog .title-bar .caption {
+    flex: 1 0 auto;
+    color: white;
+    padding-left: 1em;
+    font-size: x-small;
+    color: #f9bf11;
+}
+
+.cccc-dialog .title-bar .caption:hover {
+    cursor: move;
+}
+
+.cccc-dialog .title-bar .close {
+    background-image: url("close.png");
+    background-position: center;
+    background-size: contain;
+    background-repeat: no-repeat;
+}
+
+.cccc-dialog .title-bar .close {
+    width: 16px;
+    height: 16px;
+    display: inline-block;
+    flex: none;
+    border: 1px solid #4db3ff00;
+    margin-right: .5em;
+}
+
+.cccc-dialog .title-bar .close:hover {
+    border: 1px solid #4db3ff;
+}
+
+.left-arrow {
+    display: block;
+    position: absolute;
+    border-right: 20px solid #cccccc;
+    border-left-width: 0;
+    border-top: 10px solid transparent;
+    border-bottom: 10px solid transparent;
+}
+
+.round {
+    border-radius: 50%;
+}
+
+.cccc-input-box{
+    background-color: white;
+    border: 0px solid white;
+    outline: 0;
+    padding: .5em;
+    min-width: 5em;
+}
+
+
+/*滚动条样式*/
+.cccc-scrollbar::-webkit-scrollbar {/*滚动条整体样式*/
+    width: 4px;     /*高宽分别对应横竖滚动条的尺寸*/
+    height: 4px;
+}
+.cccc-scrollbar::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
+    border-radius: 5px;
+    -webkit-box-shadow: inset 0 0 5px rgba(0, 159, 255,0.2);
+    background: rgba(0, 159, 255,0.2);
+}
+.cccc-scrollbar::-webkit-scrollbar-track {/*滚动条里面轨道*/
+    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
+    border-radius: 0;
+    background: rgba(0,0,0,0.1);
+}
+
+.cccc-menu{
+    display: block;
+    padding: 0;
+}
+.cccc-menu > .cccc-menu-item{
+    display: inline-block;
+    height: 3em;
+    min-width: 3em;
+    padding: .5em;
+    padding-top: 2.5em;
+    padding-bottom: 1.5em;
+    background-position: center top;
+    background-size: auto 2em;
+    background-repeat: no-repeat;
+    /*margin: .5em;*/
+    border: 1px solid rgba(0,0,0,0);
+    border-radius: 2px;
+    font-size: 12px;
+}
+.cccc-menu > .cccc-menu-item:hover{
+    background-color: #0f98d1;
+}
+.cccc-menu > .cccc-menu-item:active{
+    opacity: .7;
+}
+
+
+
+.toggle-button-group {
+    flex: 0 1 auto;
+    border: 1px solid rgba(0, 159, 255, 0);
+    border-radius: .5em;
+    height: 2em;
+    text-align: center;
+    display: flex;
+    flex-flow: row nowrap;
+    line-height: 2em;
+}
+
+.toggle-button-group > .toggle-button-default, .toggle-button-group .toggle-button-checked {
+    flex: 1 1 auto;
+    padding-left: 1em;
+    padding-right: 1em;
+}
+
+
+.toggle-button-group > .toggle-button-checked:first-child, .toggle-button-group > .toggle-button-default:first-child {
+    border-bottom-left-radius: .5em;
+    border-top-left-radius: .5em;
+}
+
+.toggle-button-group > .toggle-button-checked:last-child, .toggle-button-group > .toggle-button-default:last-child {
+    border-bottom-right-radius: .5em;
+    border-top-right-radius: .5em;
+}
+
+.toggle-button-group > .toggle-button-default {
+    color: rgb(0, 159, 255);
+    border: 1px solid rgb(0, 159, 255);
+}
+
+.toggle-button-group > .toggle-button-checked {
+    background-color: rgb(0, 159, 255);
+    color: white;
+}
+
+.toggle-button-group > .toggle-button-default:hover, .toggle-button-group > .toggle-button-checked:hover {
+    color: orange;
+}
+
+.toggle-button-group > .toggle-button-default:active, .toggle-button-group > .toggle-button-checked:active {
+    opacity: .7;
+}
+
+input[type='checkbox'].cccc-checkbox{
+    width: 1em;
+    height: 1.5em;
+    background-color: #fff;
+    -webkit-appearance:none;
+    border-width: 0px;
+    outline: none;
+    background-image: url("unchecked_checkbox_26px_easyicon.net.png");
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+    opacity: .5;
+}
+
+input[type='checkbox'].cccc-checkbox:checked {
+    background-image: url("checked_checkbox_26px_easyicon.net.png");
+}
+
+button.cccc-button-default{
+    background-color: transparent;
+    border-width: 0;
+    background-image: url("button_bg.png");
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: contain;
+    width: 92px;
+    height: 29px;
+    line-height: 29px;
+    color: white;
+    font-weight: bold;
+    font-size: 14px;
+    outline: 0;
+}
+
+button.cccc-button-default:hover{
+    color: orange;
+}
+
+button.cccc-button-default:active{
+    opacity: .7;
+}