vislite 0.1.0 → 0.2.0-alpha.7

package/src/common/svg/config.ts

@@ -1,127 +1,128 @@
-import { setAttribute } from "./tool"
-import setStyle from "../setStyle"
-import arc from '../canvas/arc'
-
-// 文字统一设置方法
-export let initText = (el: SVGElement, config: any, x: number, y: number, deg: number) => {
-    if (el.nodeName.toLowerCase() !== 'text') throw new Error('Need a <text> !')
-
-    // 垂直对齐采用dy实现
-    setAttribute(el, "dy", {
-        "top": config['font-size'] * 0.5,
-        "middle": 0,
-        "bottom": -config['font-size'] * 0.5,
-    }[config.textBaseline])
-
-    setStyle(el, {
-
-        // 文字对齐方式
-        "text-anchor": {
-            "left": "start",
-            "right": "end",
-            "center": "middle"
-        }[config.textAlign],
-        "dominant-baseline": "central",
-
-        // 文字大小和字体设置
-        "font-size": config['font-size'] + "px",
-        "font-family": config['font-family']
-    })
-
-    // 位置
-    setAttribute(el, "x", x)
-    setAttribute(el, "y", y)
-
-    // 旋转
-    if (typeof deg == "number") {
-        deg = deg % 360
-        setAttribute(el, "transform", "rotate(" + deg + "," + x + "," + y + ")")
-    }
-}
-
-// 画圆统一设置方法
-export let initCircle = (el: SVGElement, cx: number, cy: number, r: number) => {
-    if (el.nodeName.toLowerCase() !== 'circle') throw new Error('Need a <circle> !')
-    setAttribute(el, 'cx', cx)
-    setAttribute(el, 'cy', cy)
-    setAttribute(el, 'r', r)
-}
-
-// 路径统一设置方法
-export let initPath = (el: SVGElement, path: string) => {
-    if (el.nodeName.toLowerCase() !== 'path') throw new Error('Need a <path> !')
-    setAttribute(el, 'd', path)
-}
-
-// 画矩形统一设置方法
-export let initRect = (el: SVGElement, x: number, y: number, width: number, height: number) => {
-    if (el.nodeName.toLowerCase() !== 'rect') throw new Error('Need a <rect> !')
-
-    // 由于高和宽不可以是负数，校对一下
-    if (height < 0) { height *= -1; y -= height }
-    if (width < 0) { width *= -1; x -= width }
-
-    setAttribute(el, 'x', x)
-    setAttribute(el, 'y', y)
-    setAttribute(el, 'width', width)
-    setAttribute(el, 'height', height)
-}
-
-// 画弧统一设置方法
-export let initArc = (el: SVGElement, config: any, cx: number, cy: number, r1: number, r2: number, beginDeg: number, deg: number) => {
-
-    if (el.nodeName.toLowerCase() !== 'path') throw new Error('Need a <path> !')
-
-    beginDeg = beginDeg % (Math.PI * 2)
-
-    if (r1 > r2) {
-        let temp = r1
-        r1 = r2
-        r2 = temp
-    }
-
-    // 当|deg|>=2π的时候都认为是一个圆环
-    if (deg >= Math.PI * 1.999999 || deg <= -Math.PI * 1.999999) {
-        deg = Math.PI * 1.999999
-    } else {
-        deg = deg % (Math.PI * 2)
-    }
-
-    arc(beginDeg, deg, cx, cy, r1, r2, function (
-        beginA: number, endA: number,
-        begInnerX: number, begInnerY: number,
-        begOuterX: number, begOuterY: number,
-        endInnerX: number, endInnerY: number,
-        endOuterX: number, endOuterY: number,
-        r: number
-    ) {
-
-        let f = (endA - beginA) > Math.PI ? 1 : 0,
-            d = "M" + begInnerX + " " + begInnerY
-        if (r < 0) r = -r
-        d +=
-            // 横半径 竖半径 x轴偏移角度 0小弧/1大弧 0逆时针/1顺时针 终点x 终点y
-            "A" + r1 + " " + r1 + " 0 " + f + " 1 " + endInnerX + " " + endInnerY
-
-        // 结尾
-        if (config["arc-end-cap"] == 'round')
-            d += "A" + r + " " + r + " " + " 0 1 0 " + endOuterX + " " + endOuterY
-        else if (config["arc-end-cap"] == '-round')
-            d += "A" + r + " " + r + " " + " 0 1 1 " + endOuterX + " " + endOuterY
-        else
-            d += "L" + endOuterX + " " + endOuterY
-        d += "A" + r2 + " " + r2 + " 0 " + f + " 0 " + begOuterX + " " + begOuterY
-
-        // 开头
-        if (config["arc-start-cap"] == 'round')
-            d += "A" + r + " " + r + " " + " 0 1 0 " + begInnerX + " " + begInnerY
-        else if (config["arc-start-cap"] == '-round')
-            d += "A" + r + " " + r + " " + " 0 1 1 " + begInnerX + " " + begInnerY
-        else
-            d += "L" + begInnerX + " " + begInnerY
-
-        if (config["arc-start-cap"] == 'butt') d += "Z"
-
-        setAttribute(el, 'd', d)
-    })
+import { setAttribute } from "./tool"
+import setStyle from "../setStyle"
+import arc from '../canvas/arc'
+import SVGConfigType from '../../../types/SVGConfig'
+
+// 文字统一设置方法
+export let initText = (el: SVGElement, config: SVGConfigType, x: number, y: number, deg: number) => {
+    if (el.nodeName.toLowerCase() !== 'text') throw new Error('Need a <text> !')
+
+    // 垂直对齐采用dy实现
+    setAttribute(el, "dy", {
+        "top": config['font-size'] * 0.5,
+        "middle": 0,
+        "bottom": -config['font-size'] * 0.5,
+    }[config.textBaseline])
+
+    setStyle(el, {
+
+        // 文字对齐方式
+        "text-anchor": {
+            "left": "start",
+            "right": "end",
+            "center": "middle"
+        }[config.textAlign],
+        "dominant-baseline": "central",
+
+        // 文字大小和字体设置
+        "font-size": config['font-size'] + "px",
+        "font-family": config['font-family']
+    })
+
+    // 位置
+    setAttribute(el, "x", x)
+    setAttribute(el, "y", y)
+
+    // 旋转
+    if (typeof deg == "number") {
+        deg = deg % 360
+        setAttribute(el, "transform", "rotate(" + deg + "," + x + "," + y + ")")
+    }
+}
+
+// 画圆统一设置方法
+export let initCircle = (el: SVGElement, cx: number, cy: number, r: number) => {
+    if (el.nodeName.toLowerCase() !== 'circle') throw new Error('Need a <circle> !')
+    setAttribute(el, 'cx', cx)
+    setAttribute(el, 'cy', cy)
+    setAttribute(el, 'r', r)
+}
+
+// 路径统一设置方法
+export let initPath = (el: SVGElement, path: string) => {
+    if (el.nodeName.toLowerCase() !== 'path') throw new Error('Need a <path> !')
+    setAttribute(el, 'd', path)
+}
+
+// 画矩形统一设置方法
+export let initRect = (el: SVGElement, x: number, y: number, width: number, height: number) => {
+    if (el.nodeName.toLowerCase() !== 'rect') throw new Error('Need a <rect> !')
+
+    // 由于高和宽不可以是负数，校对一下
+    if (height < 0) { height *= -1; y -= height }
+    if (width < 0) { width *= -1; x -= width }
+
+    setAttribute(el, 'x', x)
+    setAttribute(el, 'y', y)
+    setAttribute(el, 'width', width)
+    setAttribute(el, 'height', height)
+}
+
+// 画弧统一设置方法
+export let initArc = (el: SVGElement, config: SVGConfigType, cx: number, cy: number, r1: number, r2: number, beginDeg: number, deg: number) => {
+
+    if (el.nodeName.toLowerCase() !== 'path') throw new Error('Need a <path> !')
+
+    beginDeg = beginDeg % (Math.PI * 2)
+
+    if (r1 > r2) {
+        let temp = r1
+        r1 = r2
+        r2 = temp
+    }
+
+    // 当|deg|>=2π的时候都认为是一个圆环
+    if (deg >= Math.PI * 1.999999 || deg <= -Math.PI * 1.999999) {
+        deg = Math.PI * 1.999999
+    } else {
+        deg = deg % (Math.PI * 2)
+    }
+
+    arc(beginDeg, deg, cx, cy, r1, r2, function (
+        beginA: number, endA: number,
+        begInnerX: number, begInnerY: number,
+        begOuterX: number, begOuterY: number,
+        endInnerX: number, endInnerY: number,
+        endOuterX: number, endOuterY: number,
+        r: number
+    ) {
+
+        let f = (endA - beginA) > Math.PI ? 1 : 0,
+            d = "M" + begInnerX + " " + begInnerY
+        if (r < 0) r = -r
+        d +=
+            // 横半径 竖半径 x轴偏移角度 0小弧/1大弧 0逆时针/1顺时针 终点x 终点y
+            "A" + r1 + " " + r1 + " 0 " + f + " 1 " + endInnerX + " " + endInnerY
+
+        // 结尾
+        if (config["arc-end-cap"] == 'round')
+            d += "A" + r + " " + r + " " + " 0 1 0 " + endOuterX + " " + endOuterY
+        else if (config["arc-end-cap"] == '-round')
+            d += "A" + r + " " + r + " " + " 0 1 1 " + endOuterX + " " + endOuterY
+        else
+            d += "L" + endOuterX + " " + endOuterY
+        d += "A" + r2 + " " + r2 + " 0 " + f + " 0 " + begOuterX + " " + begOuterY
+
+        // 开头
+        if (config["arc-start-cap"] == 'round')
+            d += "A" + r + " " + r + " " + " 0 1 0 " + begInnerX + " " + begInnerY
+        else if (config["arc-start-cap"] == '-round')
+            d += "A" + r + " " + r + " " + " 0 1 1 " + begInnerX + " " + begInnerY
+        else
+            d += "L" + begInnerX + " " + begInnerY
+
+        if (config["arc-start-cap"] == 'butt') d += "Z"
+
+        setAttribute(el, 'd', d)
+    })
 }

package/src/common/svg/index.ts

@@ -1,6 +1,15 @@
 import { initText, initCircle, initPath, initRect, initArc } from "./config"
 import { toNode, setAttribute, getAttribute, full, fill, stroke } from "./tool"
 import rotate from "../../rotate"
+import SVGConfigType from '../../../types/SVGConfig'
+
+// 属性名向下兼容
+let oldAttrName = {
+    "font-size": "fontSize",
+    "font-family": "fontFamily",
+    "arc-start-cap": "arcStartCap",
+    "arc-end-cap": "arcEndCap"
+}
 
 class SVG {
     readonly name: string = "SVG"
@@ -42,12 +51,13 @@ class SVG {
     }
 
     // 属性设置或获取
-    config(params: any) {
+    config(params: SVGConfigType) {
         if (typeof params !== 'object') {
-            return this.__config[params]
+            return this.__config[oldAttrName[params] || params]
         } else {
             for (let key in params) {
-                this.__config[key] = params[key]
+                let _key = oldAttrName[key] || key
+                this.__config[_key] = params[key]
             }
         }
         return this

package/src/common/svg/tool.ts

@@ -1,43 +1,44 @@
-import { XLINK_ATTRIBUTE } from "./dictionary"
-
-// 新建节点
-export function toNode(tagname: string) {
-    return document.createElementNS('http://www.w3.org/2000/svg', tagname)
-}
-
-// 设置属性
-let _setAttribute = function (el: SVGElement, key: string, value: string | number) {
-
-    // 需要使用xlink命名空间的xml属性
-    if (XLINK_ATTRIBUTE.indexOf(key) > -1) {
-        el.setAttributeNS("http://www.w3.org/1999/xlink", 'xlink:' + key, value + "")
-    }
-
-    // 否则
-    else {
-        el.setAttribute(key, value + "")
-    }
-}
-export let setAttribute = _setAttribute
-
-// 获取属性
-export function getAttribute(el: SVGElement, key: string) {
-    if (XLINK_ATTRIBUTE.indexOf(key) > -1) key = 'xlink:' + key
-    return el.getAttribute(key)
-}
-
-export function full(el: SVGElement, config: any) {
-    _setAttribute(el, "stroke", config.strokeStyle)
-    _setAttribute(el, "fill", config.fillStyle)
-    _setAttribute(el, "stroke-dasharray", config.lineDash.join(','))
-}
-
-export function fill(el: SVGElement, config: any) {
-    _setAttribute(el, "fill", config.fillStyle)
-}
-
-export function stroke(el: SVGElement, config: any) {
-    _setAttribute(el, "stroke", config.strokeStyle)
-    _setAttribute(el, "fill", "none")
-    _setAttribute(el, "stroke-dasharray", config.lineDash.join(','))
+import { XLINK_ATTRIBUTE } from "./dictionary"
+import SVGConfigType from '../../../types/SVGConfig'
+
+// 新建节点
+export function toNode(tagname: string) {
+    return document.createElementNS('http://www.w3.org/2000/svg', tagname)
+}
+
+// 设置属性
+let _setAttribute = function (el: SVGElement, key: string, value: string | number) {
+
+    // 需要使用xlink命名空间的xml属性
+    if (XLINK_ATTRIBUTE.indexOf(key) > -1) {
+        el.setAttributeNS("http://www.w3.org/1999/xlink", 'xlink:' + key, value + "")
+    }
+
+    // 否则
+    else {
+        el.setAttribute(key, value + "")
+    }
+}
+export let setAttribute = _setAttribute
+
+// 获取属性
+export function getAttribute(el: SVGElement, key: string) {
+    if (XLINK_ATTRIBUTE.indexOf(key) > -1) key = 'xlink:' + key
+    return el.getAttribute(key)
+}
+
+export function full(el: SVGElement, config: SVGConfigType) {
+    _setAttribute(el, "stroke", config.strokeStyle)
+    _setAttribute(el, "fill", config.fillStyle)
+    _setAttribute(el, "stroke-dasharray", config.lineDash.join(','))
+}
+
+export function fill(el: SVGElement, config: SVGConfigType) {
+    _setAttribute(el, "fill", config.fillStyle)
+}
+
+export function stroke(el: SVGElement, config: SVGConfigType) {
+    _setAttribute(el, "stroke", config.strokeStyle)
+    _setAttribute(el, "fill", "none")
+    _setAttribute(el, "stroke-dasharray", config.lineDash.join(','))
 }

package/src/common/webgl/buffer.ts

@@ -0,0 +1,80 @@
+// 缓冲区分为两种：
+// 1.缓冲区中保存了包含顶点的数据
+// 2.缓冲区保存了包含顶点的索引值
+
+// 获取一个新的缓冲区
+// isElement默认false，创建第一种缓冲区，为true创建第二种
+let newBuffer = (painter: WebGLRenderingContext) => {
+    return painter.createBuffer()
+}
+
+// 数据写入缓冲区
+// data是一个类型化数组，表示写入的数据
+// usage表示程序如何使用存储在缓冲区的数据
+let writeBuffer = (painter: WebGLRenderingContext, data: ArrayBuffer, isElement: boolean, usage: number) => {
+    let TYPE = isElement ? painter.ELEMENT_ARRAY_BUFFER : painter.ARRAY_BUFFER
+    painter.bufferData(TYPE, data, usage)
+}
+
+// 使用缓冲区数据
+// location指定待分配的attribute变量的存储位置
+// size每个分量个数
+// type数据类型，应该是以下的某个：
+//      gl.UNSIGNED_BYTE    Uint8Array
+//      gl.SHORT            Int16Array
+//      gl.UNSIGNED_SHORT   Uint16Array
+//      gl.INT              Int32Array
+//      gl.UNSIGNED_INT     Uint32Array
+//      gl.FLOAT            Float32Array
+// stride相邻两个数据项的字节数
+// offset数据的起点字节位置
+// normalized是否把非浮点型的数据归一化到[0,1]或[-1,1]区间
+let useBuffer = (painter: WebGLRenderingContext, location: number, size: number, type: number, stride: number, offset: number, normalized: boolean) => {
+
+    // 把缓冲区对象分配给目标变量
+    painter.vertexAttribPointer(location, size, type, normalized, stride, offset)
+
+    // 连接目标对象和缓冲区对象
+    painter.enableVertexAttribArray(location)
+}
+
+class BufferObject {
+
+    private __painter: WebGLRenderingContext
+    private __isElement: boolean
+
+    private __buffer: WebGLBuffer
+    private __type: number
+    private __fsize: number
+
+    constructor(painter: WebGLRenderingContext, isElement: boolean = false) {
+        this.__painter = painter
+        this.__isElement = isElement
+
+        this.__buffer = newBuffer(painter)
+        this.__type = isElement ? painter.ELEMENT_ARRAY_BUFFER : painter.ARRAY_BUFFER
+    }
+
+    // 使用这个缓冲区对象
+    // （先于写入和分配）
+    use() {
+        this.__painter.bindBuffer(this.__type, this.__buffer) // 绑定到目标
+        return this
+    }
+
+    // 写入数据
+    write(data: Uint8Array | Int16Array | Uint16Array | Int32Array | Uint32Array | Float32Array) {
+        writeBuffer(this.__painter, data, this.__isElement, this.__painter.STATIC_DRAW)
+        this.__fsize = data.BYTES_PER_ELEMENT
+        return this
+    }
+
+    // 分配使用
+    // 第2～4位参数分别表示：一个完整数据的长度、一组数据的长度、读取位置偏移
+    divide(location: number, size: number, stride: number, offset: number = 0) {
+        useBuffer(this.__painter, location, size, this.__painter.FLOAT, stride * this.__fsize, offset * this.__fsize, false)
+        return this
+    }
+}
+
+export default BufferObject

package/src/common/webgl/doDraw.ts

@@ -0,0 +1,97 @@
+import BufferObject from './buffer'
+
+import getTexture from './getTexture'
+import getShader from './getShader'
+
+interface MeshWorldType {
+    matrix: number[]
+}
+
+interface GlobalWorldType {
+    matrix: number[]
+    proporion: number[]
+}
+
+import { meshType } from '../../../types/Object3D'
+
+export default function (type: string, painter: WebGLRenderingContext, mesh: meshType, meshWorld: MeshWorldType, globalWorld: GlobalWorldType) {
+    let shader = getShader(type, painter, mesh)
+
+    // 点数据写入缓冲区
+    new BufferObject(painter).use()
+        .write(mesh.geometry.attributes.position.array as Float32Array)
+        .divide(painter.getAttribLocation(shader.program, "a_position"), mesh.geometry.attributes.position.itemSize, 3, 0)
+
+    // 写入矩阵
+    painter.uniformMatrix4fv(painter.getUniformLocation(shader.program, "u_matrix_world"), false, globalWorld.matrix)
+    painter.uniformMatrix4fv(painter.getUniformLocation(shader.program, "u_matrix_proporion"), false, globalWorld.proporion)
+    painter.uniformMatrix4fv(painter.getUniformLocation(shader.program, "u_matrix_mesh"), false, meshWorld.matrix)
+
+    // 如果有法向量数据
+    if (mesh.geometry.attributes.normal) {
+        new BufferObject(painter).use()
+            .write(mesh.geometry.attributes.normal.array as Float32Array)
+            .divide(painter.getAttribLocation(shader.program, "a_normal"), mesh.geometry.attributes.normal.itemSize, 3, 0)
+    }
+
+    // 颜色
+    if ("color" in mesh.material) {
+
+        // 写入颜色
+        painter.uniform4f(painter.getUniformLocation(shader.program, "u_color")
+            , mesh.material.color.r
+            , mesh.material.color.g
+            , mesh.material.color.b
+            , mesh.material.color.alpha)
+    }
+
+    // 立方纹理
+    else if ("cube" in mesh.material) {
+
+        let size = mesh.material.cube.right.image.value.width
+
+        getTexture(type, painter, 'cube').useCube([
+            mesh.material.cube.right.image.value,
+            mesh.material.cube.left.image.value,
+            mesh.material.cube.top.image.value,
+            mesh.material.cube.bottom.image.value,
+            mesh.material.cube.far.image.value,
+            mesh.material.cube.near.image.value
+        ], size, size)
+
+    }
+
+    // 二维纹理
+    else if ("image" in mesh.material) {
+
+        painter.uniform1i(painter.getUniformLocation(shader.program, "u_sampler"), 0)
+
+        new BufferObject(painter).use()
+            .write(mesh.geometry.attributes.uv.array as Float32Array)
+            .divide(painter.getAttribLocation(shader.program, "a_textcoord"), mesh.geometry.attributes.uv.itemSize, 2, 0)
+
+        getTexture(type, painter, '2d').useImage(mesh.material.image.value)
+
+    }
+
+    // 如果使用了索引
+    if (mesh.geometry.index) {
+
+        // 索引数据
+        new BufferObject(painter, true).use()
+            .write(mesh.geometry.index.array as Uint8Array)
+
+        // 绘制
+        painter.drawElements(painter[mesh.geometry.type], mesh.geometry.index.count, painter.UNSIGNED_BYTE, 0)
+
+    }
+
+    // 否则
+    else {
+
+        // 绘制
+        painter.drawArrays(painter[mesh.geometry.type], 0, mesh.geometry.attributes.position.count)
+
+    }
+
+}

package/src/common/webgl/getColorFactory.ts

@@ -0,0 +1,27 @@
+export default function (painter: WebGLRenderingContext) {
+    let width = painter.drawingBufferWidth, height = painter.drawingBufferHeight
+
+    let pixels = new Uint8Array(
+        4 * width * height
+    )
+    painter.readPixels(
+        0,
+        0,
+        width,
+        height,
+        painter.RGBA,
+        painter.UNSIGNED_BYTE,
+        pixels
+    )
+
+    return function (x: number, y: number): string {
+        y = height - y
+
+        let pixelR = pixels[4 * (y * width + x)]
+        let pixelG = pixels[4 * (y * width + x) + 1]
+        let pixelB = pixels[4 * (y * width + x) + 2]
+        let pixelA = pixels[4 * (y * width + x) + 3]
+
+        return "rgba(" + pixelR + "," + pixelG + "," + pixelB + "," + pixelA + ")"
+    }
+}

package/src/common/webgl/getShader.ts

@@ -0,0 +1,62 @@
+import ShaderObject from './shader'
+
+import { meshType } from '../../../types/Object3D'
+
+let shaders = {}
+export default function (type: string, painter: WebGLRenderingContext, mesh: meshType) {
+
+    let uniqueName = type +
+        (mesh.geometry.attributes.normal ? "1" : "0") +
+        (mesh.material.image ? "1" : "0") +
+        (mesh.material.color ? "1" : "0") +
+        (mesh.material.cube ? "1" : "0")
+    if (shaders[uniqueName]) return shaders[uniqueName].use()
+
+    // 顶点着色器
+    let vertexShader = `
+     attribute vec4 a_position;
+
+     ${mesh.geometry.attributes.normal ? 'attribute vec4 a_normal;varying vec3 v_normal;' : ''}
+
+    uniform mat4 u_matrix_world;
+    uniform mat4 u_matrix_mesh;
+    uniform mat4 u_matrix_proporion;
+
+    ${mesh.material.image ? 'attribute vec2 a_textcoord;varying vec2 v_textcoord;' : ''}
+
+    void main(){
+        vec4 temp = u_matrix_proporion * u_matrix_world * u_matrix_mesh * a_position;
+
+        // 表示眼睛距离vec4(0.0,0.0,1.0)的距离
+        float dist = 4.0;
+
+        // 使用投影直接计算
+        gl_Position = vec4((dist + 1.0) * temp.x, (dist + 1.0) * temp.y, dist * (dist + temp.z) + 1.0 - dist * dist, temp.w * 2.0 * (dist + temp.z));
+
+        ${mesh.geometry.attributes.normal ? 'v_normal = normalize(vec3(a_normal));' : ''}
+        ${mesh.material.image ? 'v_textcoord = a_textcoord;' : ''}
+     }
+ `
+
+    // 片段（元）着色器
+    let fragmentShader = `
+    precision mediump float;
+
+    ${mesh.geometry.attributes.normal ? 'varying vec3 v_normal;' : ''}
+    ${mesh.material.color ? 'uniform vec4 u_color;' : ''}
+    ${mesh.material.cube ? 'uniform samplerCube u_texture;' : ''}
+    ${mesh.material.image ? 'uniform sampler2D u_sampler;varying vec2 v_textcoord;' : ''}
+
+    void main(){
+        ${mesh.material.color ? 'gl_FragColor = u_color;' : ''}
+        ${mesh.material.cube ? 'gl_FragColor = textureCube(u_texture,normalize(v_normal));' : ''}
+        ${mesh.material.image ? 'gl_FragColor = texture2D(u_sampler,v_textcoord);' : ''}
+    }
+ `
+
+    // 启用着色器
+    let shader = new ShaderObject(painter).compile(vertexShader, fragmentShader).use()
+
+    shaders[uniqueName] = shader
+    return shader
+}