@realsee/dnalogel 0.1.7 → 2.0.0-alpha.11

package/libs/typings/math.type.d.ts

@@ -0,0 +1,44 @@
+/**
+ * 三维向量
+ */
+export interface Vector3Position {
+    x: number;
+    y: number;
+    z: number;
+}
+/**
+ * 三维向量数组表示
+ */
+export declare type Vector3WithArray = [number, number, number];
+/**
+ * 二维向量
+ */
+export interface Vector2Position {
+    x: number;
+    y: number;
+}
+/**
+ * 二维向量数组展示
+ */
+export declare type Vector2WithArray = [number, number];
+/**
+ * 4 * 4 矩阵数组表示
+ */
+export declare type Matrix4_4 = [
+    number,
+    number,
+    number,
+    number,
+    number,
+    number,
+    number,
+    number,
+    number,
+    number,
+    number,
+    number,
+    number,
+    number,
+    number,
+    number
+];

package/libs/typings/math.type.js

@@ -0,0 +1 @@
+export {};

package/libs/typings/utils.type.d.ts

@@ -0,0 +1,2 @@
+export declare type Omit<T, K> = Pick<T, Exclude<keyof T, K>>;
+export declare type Overwrite<T, K> = Omit<T, keyof K> & K;

package/libs/typings/utils.type.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,23 +1,61 @@
 {
   "name": "@realsee/dnalogel",
-  "version": "0.1.7",
-  "description": "如视前端 Componets、Plugins 兼部分 SDKs \"Dnalogel\" 库。",
-  "author": "BEIKE REALSEE TECHNOLOGY (HK) LIMITED",
-  "peerDependencies": {
-    "@realsee/five": "^5.0.0-alpha.52",
-    "@tweenjs/tween.js": "^18.6.4",
-    "@types/styled-jsx": "^2.2.9",
-    "hammerjs": "^2.0.8",
-    "react": "^16.14.0",
-    "styled-jsx": "^3.4.6",
+  "main": "libs/index.js",
+  "typings": "./lib/index.d.ts",
+  "type": "module",
+  "author": "REALSEE-DEVELOPER",
+  "repository": "https://github.com/realsee-developer/dnalogel.git",
+  "private": false,
+  "version": "2.0.0-alpha.11",
+  "license": "SEE LICENSE IN TERMS.txt",
+  "scripts": {
+    "build": "yarn run tsb && yarn run build:rollup && yarn build:docs",
+    "build:dev": "yarn build:svelte && tsc --watch",
+    "build:rollup": " rollup --config rollup.config.js",
+    "tsb": "tsc && yarn build:svelte && ./bin/svelte-compile.js",
+    "build:svelte": "svelte-strip strip src/ libs -m=false",
+    "build:docs": "typedoc --options ./typedoc.json",
+    "preview": "vite preview",
+    "check": "svelte-check --tsconfig ./tsconfig.json"
+  },
+  "files": [
+    "libs",
+    "dist",
+    "docs",
+    "TERMS.txt"
+  ],
+  "devDependencies": {
+    "@babel/core": "^7.17.5",
+    "@realsee/five": "^5.0.0-alpha.120",
+    "@rollup/plugin-alias": "^3.1.9",
+    "@rollup/plugin-commonjs": "^21.1.0",
+    "@rollup/plugin-typescript": "^8.3.2",
+    "@tsconfig/svelte": "^2.0.1",
+    "@typescript-eslint/eslint-plugin": "^5.12.1",
+    "@typescript-eslint/parser": "^5.12.1",
+    "@vitejs/plugin-react-refresh": "^1.3.6",
+    "autoprefixer": "^10.4.2",
+    "classnames": "^2.3.1",
+    "eslint": "^8.9.0",
+    "eslint-config-alloy": "^4.5.1",
+    "glob": "^8.0.1",
+    "postcss": "^8.4.6",
+    "postcss-plugin-px2rem": "^0.8.1",
+    "replace": "^1.2.1",
+    "rollup-plugin-multi-input": "^1.3.1",
+    "rollup-plugin-svelte": "^7.1.0",
+    "svelte-check": "^2.2.7",
+    "svelte-preprocess": "^4.10.6",
+    "svelte-strip": "^1.0.1",
     "three": "0.117.1",
-    "tslib": "^2.3.0",
-    "typescript": "^4.3.5"
+    "tslib": "^2.3.1",
+    "typedoc": "^0.22.11",
+    "typescript": "^4.5.5",
+    "vite": "^2.8.0"
   },
-  "main": "index.js",
-  "repository": "git@git.lianjia.com:vrlab_frontend/dnalogel.git",
-  "license": "SEE LICENSE IN TERMS.txt",
   "dependencies": {
-    "core-js": "^3.20.0"
+    "@tweenjs/tween.js": "^18.6.4",
+    "hammerjs": "^2.0.8",
+    "svelte": "^3.47.0"
   }
-}
+}

package/components/ARVideoFigure/ARVideoFigureMesh.d.ts

@@ -1,44 +0,0 @@
-import * as THREE from 'three';
-export interface ARVideoFigureMeshOptions {
-    videoInstance?: HTMLVideoElement;
-}
-export declare class ARVideoFigureMesh extends THREE.Mesh {
-    options: ARVideoFigureMeshOptions;
-    videoUrl?: string;
-    freeze: boolean;
-    get paused(): boolean;
-    get videoInstance(): HTMLVideoElement;
-    /**
-     *
-     * @param width
-     * @param height
-     * @param widthSegments
-     * @param heightSegments
-     * @param options
-     */
-    constructor(width: number, height: number, widthSegments: number, heightSegments: number, options?: ARVideoFigureMeshOptions);
-    private get uniforms();
-    update(videoUrl: string): Promise<void>;
-    updateUniforms({ range, edge0, edge1 }: {
-        range: number;
-        edge0: number;
-        edge1: number;
-    }): void;
-    /**
-     * 暂停视频播放
-     * @returns
-     */
-    pause(): Promise<void>;
-    /**
-     * 播放视频：
-     * - 如果没有提供 `videoUrl`，则播放上一个视频
-     * - 如果提供 `videoUrl`，则重头开始播放
-     * @param videoUrl 视频地址
-     * @returns
-     */
-    play(videoUrl?: string): Promise<unknown>;
-    /**
-     * 转成毫秒，保障精准度
-     */
-    get currentTime(): number;
-}

package/components/ARVideoFigure/ARVideoFigureMesh.js

@@ -1,371 +0,0 @@
-"use strict";
-
-require("core-js/modules/es.reflect.construct.js");
-
-require("core-js/modules/es.weak-map.js");
-
-require("core-js/modules/es.object.define-property.js");
-
-require("core-js/modules/es.object.get-own-property-descriptor.js");
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _typeof = require("@babel/runtime/helpers/typeof");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ARVideoFigureMesh = void 0;
-
-var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-
-require("core-js/modules/es.array.map.js");
-
-require("core-js/modules/es.array.iterator.js");
-
-require("core-js/modules/es.object.to-string.js");
-
-require("core-js/modules/es.string.iterator.js");
-
-require("core-js/modules/web.dom-collections.iterator.js");
-
-require("core-js/modules/web.url.js");
-
-require("core-js/modules/web.url-search-params.js");
-
-require("core-js/modules/es.regexp.exec.js");
-
-require("core-js/modules/es.string.replace.js");
-
-require("core-js/modules/es.promise.js");
-
-require("core-js/modules/web.timers.js");
-
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-
-var THREE = _interopRequireWildcard(require("three"));
-
-var _Preloader = require("../../shared-utils/Preloader");
-
-var _fragmentShader = require("./fragmentShader");
-
-var _vertexShader = require("./vertexShader");
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-var ARVideoFigureMesh = /*#__PURE__*/function (_THREE$Mesh) {
-  (0, _inherits2["default"])(ARVideoFigureMesh, _THREE$Mesh);
-
-  var _super = _createSuper(ARVideoFigureMesh);
-
-  /**
-   *
-   * @param width
-   * @param height
-   * @param widthSegments
-   * @param heightSegments
-   * @param options
-   */
-  function ARVideoFigureMesh(width, height, widthSegments, heightSegments) {
-    var _this;
-
-    var options = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {};
-    (0, _classCallCheck2["default"])(this, ARVideoFigureMesh);
-
-    if (!options.videoInstance) {
-      var videoInstance = document.createElement('video');
-      videoInstance.style.opacity = '0';
-      videoInstance.style.display = 'none';
-      videoInstance.playsInline = true;
-      document.body.append(videoInstance);
-      options.videoInstance = videoInstance;
-    }
-
-    var geometry = new THREE.PlaneGeometry(width, height, widthSegments, heightSegments);
-    var videoTexture = new THREE.VideoTexture(options.videoInstance);
-    var material = new THREE.ShaderMaterial({
-      uniforms: {
-        map: {
-          value: videoTexture
-        },
-        enable: {
-          value: 0
-        },
-        range: {
-          value: 0.15
-        },
-        edge0: {
-          value: 0.1
-        },
-        edge1: {
-          value: 0.3
-        }
-      },
-      vertexShader: _vertexShader.vertexShader,
-      fragmentShader: (0, _fragmentShader.fragmentShaderTpl)(),
-      transparent: true
-    });
-    _this = _super.call(this, geometry, material);
-    _this.options = options;
-    _this.freeze = false;
-    return _this;
-  }
-
-  (0, _createClass2["default"])(ARVideoFigureMesh, [{
-    key: "paused",
-    get: function get() {
-      return !!this.videoInstance.paused;
-    }
-  }, {
-    key: "videoInstance",
-    get: function get() {
-      var uniforms = this.material.uniforms;
-      var videoInstance = uniforms.map.value.image;
-      return videoInstance;
-    }
-  }, {
-    key: "uniforms",
-    get: function get() {
-      var uniforms = this.material.uniforms;
-      return uniforms;
-    }
-  }, {
-    key: "update",
-    value: function () {
-      var _update = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(videoUrl) {
-        var _this2 = this;
-
-        var onStart;
-        return _regenerator["default"].wrap(function _callee$(_context) {
-          while (1) {
-            switch (_context.prev = _context.next) {
-              case 0:
-                if (!(this.videoUrl === videoUrl)) {
-                  _context.next = 2;
-                  break;
-                }
-
-                return _context.abrupt("return");
-
-              case 2:
-                this.videoUrl = videoUrl;
-                this.freeze = true;
-                _context.next = 6;
-                return this.videoInstance.pause();
-
-              case 6:
-                _context.t0 = URL;
-                _context.next = 9;
-                return _Preloader.Preloader.blob(this.videoUrl);
-
-              case 9:
-                _context.t1 = _context.sent;
-                _context.next = 12;
-                return _context.t0.createObjectURL.call(_context.t0, _context.t1);
-
-              case 12:
-                this.videoInstance.src = _context.sent;
-                this.videoInstance.setAttribute('data-src', this.videoUrl);
-
-                onStart = function onStart() {
-                  if (_this2.videoInstance.currentTime === 0) return;
-                  _this2.uniforms.enable.value = 1;
-                  _this2.freeze = false;
-
-                  _this2.videoInstance.removeEventListener('timeupdate', onStart, false);
-                };
-
-                this.videoInstance.addEventListener('timeupdate', onStart, false);
-
-              case 16:
-              case "end":
-                return _context.stop();
-            }
-          }
-        }, _callee, this);
-      }));
-
-      function update(_x) {
-        return _update.apply(this, arguments);
-      }
-
-      return update;
-    }()
-  }, {
-    key: "updateUniforms",
-    value: function updateUniforms(_ref) {
-      var range = _ref.range,
-          edge0 = _ref.edge0,
-          edge1 = _ref.edge1;
-      this.uniforms.range.value = isNaN(range) ? 0.15 : range;
-      this.uniforms.edge0.value = isNaN(edge0) ? 0.1 : edge0;
-      this.uniforms.edge1.value = isNaN(edge1) ? 0.1 : edge1;
-    }
-    /**
-     * 暂停视频播放
-     * @returns
-     */
-
-  }, {
-    key: "pause",
-    value: function () {
-      var _pause = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
-        return _regenerator["default"].wrap(function _callee2$(_context2) {
-          while (1) {
-            switch (_context2.prev = _context2.next) {
-              case 0:
-                _context2.next = 2;
-                return this.videoInstance.pause();
-
-              case 2:
-                return _context2.abrupt("return", _context2.sent);
-
-              case 3:
-              case "end":
-                return _context2.stop();
-            }
-          }
-        }, _callee2, this);
-      }));
-
-      function pause() {
-        return _pause.apply(this, arguments);
-      }
-
-      return pause;
-    }()
-    /**
-     * 播放视频：
-     * - 如果没有提供 `videoUrl`，则播放上一个视频
-     * - 如果提供 `videoUrl`，则重头开始播放
-     * @param videoUrl 视频地址
-     * @returns
-     */
-
-  }, {
-    key: "play",
-    value: function () {
-      var _play = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee4() {
-        var _this3 = this;
-
-        var videoUrl,
-            _args4 = arguments;
-        return _regenerator["default"].wrap(function _callee4$(_context4) {
-          while (1) {
-            switch (_context4.prev = _context4.next) {
-              case 0:
-                videoUrl = _args4.length > 0 && _args4[0] !== undefined ? _args4[0] : '';
-                videoUrl = (videoUrl || '').replace(/https*:/, '');
-
-                if (videoUrl) {
-                  _context4.next = 10;
-                  break;
-                }
-
-                if (!this.videoUrl) {
-                  _context4.next = 8;
-                  break;
-                }
-
-                _context4.next = 6;
-                return this.videoInstance.play();
-
-              case 6:
-                _context4.next = 9;
-                break;
-
-              case 8:
-                console.warn('警告：视频资源未初始化。');
-
-              case 9:
-                return _context4.abrupt("return", true);
-
-              case 10:
-                if (!(videoUrl === this.videoUrl)) {
-                  _context4.next = 15;
-                  break;
-                }
-
-                this.videoInstance.currentTime = 0;
-                _context4.next = 14;
-                return this.videoInstance.play();
-
-              case 14:
-                return _context4.abrupt("return", true);
-
-              case 15:
-                _context4.next = 17;
-                return this.update(videoUrl);
-
-              case 17:
-                this.videoInstance.pause();
-                _context4.next = 20;
-                return new Promise(function (resolve) {
-                  return setTimeout( /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3() {
-                    return _regenerator["default"].wrap(function _callee3$(_context3) {
-                      while (1) {
-                        switch (_context3.prev = _context3.next) {
-                          case 0:
-                            _this3.videoInstance.currentTime = 0;
-                            _context3.next = 3;
-                            return _this3.videoInstance.play();
-
-                          case 3:
-                            resolve(true);
-
-                          case 4:
-                          case "end":
-                            return _context3.stop();
-                        }
-                      }
-                    }, _callee3);
-                  })), 20);
-                });
-
-              case 20:
-                return _context4.abrupt("return", _context4.sent);
-
-              case 21:
-              case "end":
-                return _context4.stop();
-            }
-          }
-        }, _callee4, this);
-      }));
-
-      function play() {
-        return _play.apply(this, arguments);
-      }
-
-      return play;
-    }()
-    /**
-     * 转成毫秒，保障精准度
-     */
-
-  }, {
-    key: "currentTime",
-    get: function get() {
-      return this.videoInstance.currentTime * 1000;
-    }
-  }]);
-  return ARVideoFigureMesh;
-}(THREE.Mesh);
-
-exports.ARVideoFigureMesh = ARVideoFigureMesh;

package/components/ARVideoFigure/ARVideoFigureScene.d.ts

@@ -1,11 +0,0 @@
-import * as THREE from 'three';
-import { ARVideoFigureMesh } from './ARVideoFigureMesh';
-export declare class ARVideoFigureScene {
-    scene: THREE.Scene;
-    renderer: THREE.WebGLRenderer;
-    camera: THREE.OrthographicCamera;
-    mesh: ARVideoFigureMesh;
-    get videoInstance(): HTMLVideoElement;
-    constructor(container: HTMLElement);
-    run: () => void;
-}

package/components/ARVideoFigure/ARVideoFigureScene.js

@@ -1,85 +0,0 @@
-"use strict";
-
-require("core-js/modules/es.array.iterator.js");
-
-require("core-js/modules/es.object.to-string.js");
-
-require("core-js/modules/es.string.iterator.js");
-
-require("core-js/modules/es.weak-map.js");
-
-require("core-js/modules/web.dom-collections.iterator.js");
-
-require("core-js/modules/es.object.define-property.js");
-
-require("core-js/modules/es.object.get-own-property-descriptor.js");
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _typeof = require("@babel/runtime/helpers/typeof");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ARVideoFigureScene = void 0;
-
-require("core-js/modules/es.array.concat.js");
-
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var THREE = _interopRequireWildcard(require("three"));
-
-var _ARVideoFigureMesh = require("./ARVideoFigureMesh");
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-var ARVideoFigureScene = /*#__PURE__*/function () {
-  function ARVideoFigureScene(container) {
-    var _this = this;
-
-    (0, _classCallCheck2["default"])(this, ARVideoFigureScene);
-    (0, _defineProperty2["default"])(this, "scene", new THREE.Scene());
-    (0, _defineProperty2["default"])(this, "renderer", new THREE.WebGLRenderer({
-      alpha: true
-    }));
-    (0, _defineProperty2["default"])(this, "run", function () {
-      if (!_this.mesh.freeze) {
-        _this.renderer.render(_this.scene, _this.camera);
-      }
-
-      requestAnimationFrame(_this.run);
-    });
-    var state = {
-      width: container.offsetWidth,
-      height: container.offsetHeight
-    };
-    this.camera = new THREE.OrthographicCamera(-state.width / 2, state.width / 2, state.height / 2, -state.height / 2);
-    this.camera.position.set(0, 0, 10);
-    this.camera.lookAt(0, 0, 0);
-    var domElement = this.renderer.domElement;
-    domElement.classList.add('ARVideoFigureScene-canvas');
-    this.renderer.setSize(state.width * window.devicePixelRatio, state.height * window.devicePixelRatio);
-    domElement.setAttribute('style', "width: ".concat(state.width, "px;height: ").concat(state.height, "px;"));
-    this.mesh = new _ARVideoFigureMesh.ARVideoFigureMesh(state.width, state.height, 1, 1);
-    container.append(domElement);
-    this.scene.add(this.mesh);
-    this.renderer.render(this.scene, this.camera);
-    this.run();
-  }
-
-  (0, _createClass2["default"])(ARVideoFigureScene, [{
-    key: "videoInstance",
-    get: function get() {
-      return this.mesh.videoInstance;
-    }
-  }]);
-  return ARVideoFigureScene;
-}();
-
-exports.ARVideoFigureScene = ARVideoFigureScene;

package/components/ARVideoFigure/ImgBgTransparent.d.ts

@@ -1,16 +0,0 @@
-/// <reference types="react" />
-import { ImgBgTransparentScene } from './ImgBgTransparentMesh';
-export interface ImgBgTransparentProps {
-    imgUrl: string;
-    className?: string;
-    imgBgTransparentSceneRef?: (imgBgTransparentScene: ImgBgTransparentScene) => void;
-}
-/**
- * **透明背景** 与 **AR 视频形象** `ARVideoFigure` 实现原理一致，不过此组件仅针对图片。
- *
- * 生产环境中还是建议直接采用 `png` 这类支持透明背景的图片。在实际业务落地过程中，如果视频文件生成比较滞后，你可以先通过对应图片来预览效果，调试相关参数。
- *
- * @param props
- * @returns
- */
-export declare function ImgBgTransparent(props: ImgBgTransparentProps): JSX.Element;