+ var clazz = this.defaultView.customElements.get(tagName);
+ if (!clazz) {
+ console.warn('Unsupported tagName: ', tagName);
+ clazz = tagName === 'tspan' ? Text : Group;
+ }
+ var shape = new clazz(options);
+ shape.ownerDocument = this;
+ return shape;
+ };
+ _proto.createElementNS = function createElementNS(namespaceURI, tagName, options) {
+ return this.createElement(tagName, options);
+ };
+ _proto.cloneNode = function cloneNode(deep) {
+ throw new Error(ERROR_MSG_METHOD_NOT_IMPLEMENTED);
+ };
+ _proto.destroy = function destroy() {
+ try {
+ this.documentElement.destroyChildren();
+ this.timeline.destroy();
+ } catch (e) {}
+ }
+ /**
+ * Picking 2D graphics with RBush based on BBox, fast but inaccurate.
+ */;
+ _proto.elementsFromBBox = function elementsFromBBox(minX, minY, maxX, maxY) {
+ var rBush = this.defaultView.context.rBushRoot;
+ var rBushNodes = rBush.search({
+ minX: minX,
+ minY: minY,
+ maxX: maxX,
+ maxY: maxY
+ });
+ var hitTestList = [];
+ rBushNodes.forEach(function (_ref2) {
+ var displayObject = _ref2.displayObject;
+ var pointerEvents = displayObject.parsedStyle.pointerEvents;
+ // account for `visibility`
+ // @see https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events
+ var isVisibilityAffected = ['auto', 'visiblepainted', 'visiblefill', 'visiblestroke', 'visible'].includes(pointerEvents);
+ if ((!isVisibilityAffected || isVisibilityAffected && displayObject.isVisible()) && !displayObject.isCulled() && displayObject.isInteractive()) {
+ hitTestList.push(displayObject);
+ }
+ });
+ // find group with max z-index
+ hitTestList.sort(function (a, b) {
+ return b.sortable.renderOrder - a.sortable.renderOrder;
+ });
+ return hitTestList;
+ };
+ _proto.elementFromPointSync = function elementFromPointSync(x, y) {
+ var _this$defaultView$can = this.defaultView.canvas2Viewport({
+ x: x,
+ y: y
+ }),
+ viewportX = _this$defaultView$can.x,
+ viewportY = _this$defaultView$can.y;
+ var _this$defaultView$get = this.defaultView.getConfig(),
+ width = _this$defaultView$get.width,
+ height = _this$defaultView$get.height;
+ // outside canvas' viewport
+ if (viewportX < 0 || viewportY < 0 || viewportX > width || viewportY > height) {
+ return null;
+ }
+ var _this$defaultView$vie = this.defaultView.viewport2Client({
+ x: viewportX,
+ y: viewportY
+ }),
+ clientX = _this$defaultView$vie.x,
+ clientY = _this$defaultView$vie.y;
+ var _this$defaultView$get2 = this.defaultView.getRenderingService().hooks.pickSync.call({
+ topmost: true,
+ position: {
+ x: x,
+ y: y,
+ viewportX: viewportX,
+ viewportY: viewportY,
+ clientX: clientX,
+ clientY: clientY
+ },
+ picked: []
+ }),
+ picked = _this$defaultView$get2.picked;
+ return picked && picked[0] || this.documentElement;
+ }
+ /**
+ * Do picking with API instead of triggering interactive events.
+ *
+ * @see https://developer.mozilla.org/zh-CN/docs/Web/API/Document/elementFromPoint
+ */;
+ _proto.elementFromPoint =
+ /*#__PURE__*/
+ function () {
+ var _elementFromPoint = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(x, y) {
+ var _this$defaultView$can2, viewportX, viewportY, _this$defaultView$get3, width, height, _this$defaultView$vie2, clientX, clientY, _yield$this$defaultVi, picked;
+ return _regeneratorRuntime().wrap(function _callee$(_context) {
+ while (1) switch (_context.prev = _context.next) {
+ case 0:
+ _this$defaultView$can2 = this.defaultView.canvas2Viewport({
+ x: x,
+ y: y
+ }), viewportX = _this$defaultView$can2.x, viewportY = _this$defaultView$can2.y;
+ _this$defaultView$get3 = this.defaultView.getConfig(), width = _this$defaultView$get3.width, height = _this$defaultView$get3.height; // outside canvas' viewport
+ if (!(viewportX < 0 || viewportY < 0 || viewportX > width || viewportY > height)) {
+ _context.next = 4;
+ break;
+ }
+ return _context.abrupt("return", null);
+ case 4:
+ _this$defaultView$vie2 = this.defaultView.viewport2Client({
+ x: viewportX,
+ y: viewportY
+ }), clientX = _this$defaultView$vie2.x, clientY = _this$defaultView$vie2.y;
+ _context.next = 7;
+ return this.defaultView.getRenderingService().hooks.pick.promise({
+ topmost: true,
+ position: {
+ x: x,
+ y: y,
+ viewportX: viewportX,
+ viewportY: viewportY,
+ clientX: clientX,
+ clientY: clientY
+ },
+ picked: []
+ });
+ case 7:
+ _yield$this$defaultVi = _context.sent;
+ picked = _yield$this$defaultVi.picked;
+ return _context.abrupt("return", picked && picked[0] || this.documentElement);
+ case 10:
+ case "end":
+ return _context.stop();
+ }
+ }, _callee, this);
+ }));
+ function elementFromPoint(_x, _x2) {
+ return _elementFromPoint.apply(this, arguments);
+ }
+ return elementFromPoint;
+ }();
+ _proto.elementsFromPointSync = function elementsFromPointSync(x, y) {
+ var _this$defaultView$can3 = this.defaultView.canvas2Viewport({
+ x: x,
+ y: y
+ }),
+ viewportX = _this$defaultView$can3.x,
+ viewportY = _this$defaultView$can3.y;
+ var _this$defaultView$get4 = this.defaultView.getConfig(),
+ width = _this$defaultView$get4.width,
+ height = _this$defaultView$get4.height;
+ // outside canvas' viewport
+ if (viewportX < 0 || viewportY < 0 || viewportX > width || viewportY > height) {
+ return [];
+ }
+ var _this$defaultView$vie3 = this.defaultView.viewport2Client({
+ x: viewportX,
+ y: viewportY
+ }),
+ clientX = _this$defaultView$vie3.x,
+ clientY = _this$defaultView$vie3.y;
+ var _this$defaultView$get5 = this.defaultView.getRenderingService().hooks.pickSync.call({
+ topmost: false,
+ position: {
+ x: x,
+ y: y,
+ viewportX: viewportX,
+ viewportY: viewportY,
+ clientX: clientX,
+ clientY: clientY
+ },
+ picked: []
+ }),
+ picked = _this$defaultView$get5.picked;
+ if (picked[picked.length - 1] !== this.documentElement) {
+ picked.push(this.documentElement);
+ }
+ return picked;
+ }
+ /**
+ * Do picking with API instead of triggering interactive events.
+ *
+ * @see https://developer.mozilla.org/zh-CN/docs/Web/API/Document/elementsFromPoint
+ */;
+ _proto.elementsFromPoint =
+ /*#__PURE__*/
+ function () {
+ var _elementsFromPoint = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(x, y) {
+ var _this$defaultView$can4, viewportX, viewportY, _this$defaultView$get6, width, height, _this$defaultView$vie4, clientX, clientY, _yield$this$defaultVi2, picked;
+ return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+ while (1) switch (_context2.prev = _context2.next) {
+ case 0:
+ _this$defaultView$can4 = this.defaultView.canvas2Viewport({
+ x: x,
+ y: y
+ }), viewportX = _this$defaultView$can4.x, viewportY = _this$defaultView$can4.y;
+ _this$defaultView$get6 = this.defaultView.getConfig(), width = _this$defaultView$get6.width, height = _this$defaultView$get6.height; // outside canvas' viewport
+ if (!(viewportX < 0 || viewportY < 0 || viewportX > width || viewportY > height)) {
+ _context2.next = 4;
+ break;
+ }
+ return _context2.abrupt("return", []);
+ case 4:
+ _this$defaultView$vie4 = this.defaultView.viewport2Client({
+ x: viewportX,
+ y: viewportY
+ }), clientX = _this$defaultView$vie4.x, clientY = _this$defaultView$vie4.y;
+ _context2.next = 7;
+ return this.defaultView.getRenderingService().hooks.pick.promise({
+ topmost: false,
+ position: {
+ x: x,
+ y: y,
+ viewportX: viewportX,
+ viewportY: viewportY,
+ clientX: clientX,
+ clientY: clientY
+ },
+ picked: []
+ });
+ case 7:
+ _yield$this$defaultVi2 = _context2.sent;
+ picked = _yield$this$defaultVi2.picked;
+ if (picked[picked.length - 1] !== this.documentElement) {
+ picked.push(this.documentElement);
+ }
+ return _context2.abrupt("return", picked);
+ case 11:
+ case "end":
+ return _context2.stop();
+ }
+ }, _callee2, this);
+ }));
+ function elementsFromPoint(_x3, _x4) {
+ return _elementsFromPoint.apply(this, arguments);
+ }
+ return elementsFromPoint;
+ }()
+ /**
+ * eg. Uncaught DOMException: Failed to execute 'appendChild' on 'Node': Only one element on document allowed.
+ */
+ ;
+ _proto.appendChild = function appendChild(newChild, index) {
+ throw new Error(ERROR_MSG_USE_DOCUMENT_ELEMENT);
+ };
+ _proto.insertBefore = function insertBefore(newChild, refChild) {
+ throw new Error(ERROR_MSG_USE_DOCUMENT_ELEMENT);
+ };
+ _proto.removeChild = function removeChild(oldChild, destroy) {
+ throw new Error(ERROR_MSG_USE_DOCUMENT_ELEMENT);
+ };
+ _proto.replaceChild = function replaceChild(newChild, oldChild, destroy) {
+ throw new Error(ERROR_MSG_USE_DOCUMENT_ELEMENT);
+ };
+ _proto.append = function append() {
+ throw new Error(ERROR_MSG_USE_DOCUMENT_ELEMENT);
+ };
+ _proto.prepend = function prepend() {
+ throw new Error(ERROR_MSG_USE_DOCUMENT_ELEMENT);
+ }
+ /**
+ * Execute query on documentElement.
+ */;
+ _proto.getElementById = function getElementById(id) {
+ return this.documentElement.getElementById(id);
+ };
+ _proto.getElementsByName = function getElementsByName(name) {
+ return this.documentElement.getElementsByName(name);
+ };
+ _proto.getElementsByTagName = function getElementsByTagName(tagName) {
+ return this.documentElement.getElementsByTagName(tagName);
+ };
+ _proto.getElementsByClassName = function getElementsByClassName(className) {
+ return this.documentElement.getElementsByClassName(className);
+ };
+ _proto.querySelector = function querySelector(selectors) {
+ return this.documentElement.querySelector(selectors);
+ };
+ _proto.querySelectorAll = function querySelectorAll(selectors) {
+ return this.documentElement.querySelectorAll(selectors);
+ };
+ _proto.find = function find(filter) {
+ return this.documentElement.find(filter);
+ };
+ _proto.findAll = function findAll(filter) {
+ return this.documentElement.findAll(filter);
+ };
+ _createClass(Document, [{
+ key: "children",
+ get: function get() {
+ return this.childNodes;
+ }
+ }, {
+ key: "childElementCount",
+ get: function get() {
+ return this.childNodes.length;
+ }
+ }, {
+ key: "firstElementChild",
+ get: function get() {
+ return this.firstChild;
+ }
+ }, {
+ key: "lastElementChild",
+ get: function get() {
+ return this.lastChild;
+ }
+ }]);
+ return Document;
+ }(Node$1);
+
+ /**
+ * @see https://doc.babylonjs.com/how_to/optimizing_your_scene#changing-mesh-culling-strategy
+ */
+ var Strategy;
+ (function (Strategy) {
+ Strategy[Strategy["Standard"] = 0] = "Standard";
+ })(Strategy || (Strategy = {}));
+
+ /**
+ * built-in events for element
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/MutationEvent
+ *
+ * TODO: use MutationObserver instead
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
+ */
+ var ElementEvent;
+ (function (ElementEvent) {
+ ElementEvent["REPARENT"] = "reparent";
+ ElementEvent["DESTROY"] = "destroy";
+ /**
+ * @see https://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMAttrModified
+ */
+ ElementEvent["ATTR_MODIFIED"] = "DOMAttrModified";
+ /**
+ * it has been inserted
+ * @see https://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMNodeInserted
+ */
+ ElementEvent["INSERTED"] = "DOMNodeInserted";
+ /**
+ * it is being removed
+ * @see https://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMNodeRemoved
+ */
+ ElementEvent["REMOVED"] = "removed";
+ /**
+ * @see https://www.w3.org/TR/DOM-Level-3-Events/#domnodeinsertedintodocument
+ */
+ ElementEvent["MOUNTED"] = "DOMNodeInsertedIntoDocument";
+ /**
+ * @see https://www.w3.org/TR/DOM-Level-3-Events/#domnoderemovedfromdocument
+ */
+ ElementEvent["UNMOUNTED"] = "DOMNodeRemovedFromDocument";
+ ElementEvent["BOUNDS_CHANGED"] = "bounds-changed";
+ // GEOMETRY_BOUNDS_CHANGED = 'geometry-bounds-changed',
+ /**
+ * trigger when z-index changed
+ */
+ ElementEvent["RENDER_ORDER_CHANGED"] = "render-order-changed";
+ ElementEvent["CULLED"] = "culled";
+ })(ElementEvent || (ElementEvent = {}));
+
+ var MutationEvent = /*#__PURE__*/function (_FederatedEvent) {
+ _inheritsLoose(MutationEvent, _FederatedEvent);
+ function MutationEvent(typeArg, relatedNode, prevValue, newValue, attrName, attrChange, prevParsedValue, newParsedValue) {
+ var _this;
+ _this = _FederatedEvent.call(this, null) || this;
+ _this.relatedNode = void 0;
+ _this.prevValue = void 0;
+ _this.newValue = void 0;
+ _this.attrName = void 0;
+ _this.attrChange = void 0;
+ _this.prevParsedValue = void 0;
+ _this.newParsedValue = void 0;
+ _this.relatedNode = relatedNode;
+ _this.prevValue = prevValue;
+ _this.newValue = newValue;
+ _this.attrName = attrName;
+ _this.attrChange = attrChange;
+ _this.prevParsedValue = prevParsedValue;
+ _this.newParsedValue = newParsedValue;
+ _this.type = typeArg;
+ return _this;
+ }
+ return MutationEvent;
+ }(FederatedEvent);
+ MutationEvent.ADDITION = 2;
+ MutationEvent.MODIFICATION = 1;
+ MutationEvent.REMOVAL = 3;
+
+ var entityCounter = 0;
+ var insertedEvent = new MutationEvent(ElementEvent.INSERTED, null, '', '', '', 0, '', '');
+ var removedEvent = new MutationEvent(ElementEvent.REMOVED, null, '', '', '', 0, '', '');
+ var destroyEvent = new CustomEvent(ElementEvent.DESTROY);
+ /**
+ * Has following capabilities:
+ * * Node insert/remove, eg. appendChild, removeChild, remove...
+ * * Query eg. querySelector getElementById...
+ * * Animation
+ */
+ var Element = /*#__PURE__*/function (_Node) {
+ _inheritsLoose(Element, _Node);
+ function Element() {
+ var _this;
+ for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+ args[_key] = arguments[_key];
+ }
+ _this = _Node.call.apply(_Node, [this].concat(args)) || this;
+ /**
+ * Unique id.
+ */
+ _this.entity = entityCounter++;
+ _this.renderable = {
+ bounds: undefined,
+ boundsDirty: true,
+ renderBounds: undefined,
+ renderBoundsDirty: true,
+ dirtyRenderBounds: undefined,
+ dirty: false,
+ proxyNodeName: undefined
+ };
+ _this.cullable = {
+ strategy: Strategy.Standard,
+ visibilityPlaneMask: -1,
+ visible: true,
+ enable: true
+ };
+ _this.transformable = {
+ dirtyFlag: false,
+ localDirtyFlag: false,
+ frozen: false,
+ // localPosition: vec3.fromValues(0, 0, 0),
+ // localRotation: quat.fromValues(0, 0, 0, 1),
+ // localScale: vec3.fromValues(1, 1, 1),
+ // localTransform: mat4.create(),
+ // localSkew: vec2.fromValues(0, 0),
+ // position: vec3.fromValues(0, 0, 0),
+ // rotation: quat.fromValues(0, 0, 0, 1),
+ // scaling: vec3.fromValues(1, 1, 1),
+ // worldTransform: mat4.create(),
+ // origin: vec3.fromValues(0, 0, 0),
+ localPosition: [0, 0, 0],
+ localRotation: [0, 0, 0, 1],
+ localScale: [1, 1, 1],
+ localTransform: [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1],
+ localSkew: [0, 0],
+ position: [0, 0, 0],
+ rotation: [0, 0, 0, 1],
+ scaling: [1, 1, 1],
+ worldTransform: [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1],
+ origin: [0, 0, 0]
+ };
+ _this.sortable = {
+ dirty: false,
+ sorted: undefined,
+ lastSortedIndex: undefined,
+ renderOrder: 0
+ };
+ _this.geometry = {
+ contentBounds: undefined,
+ renderBounds: undefined
+ };
+ _this.rBushNode = {
+ aabb: undefined
+ };
+ /**
+ * used with `getElementById()`
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/id
+ */
+ _this.id = void 0;
+ /**
+ * used in `getElementsByName`
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByName
+ */
+ _this.name = void 0;
+ /**
+ * https://developer.mozilla.org/zh-CN/docs/Web/API/Element/namespaceURI
+ */
+ _this.namespaceURI = 'g';
+ _this.scrollLeft = 0;
+ _this.scrollTop = 0;
+ /**
+ * We don't support border now
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/clientTop
+ */
+ _this.clientTop = 0;
+ _this.clientLeft = 0;
+ /**
+ * is destroyed or not
+ */
+ _this.destroyed = false;
+ /**
+ * compatible with `style`
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style
+ */
+ _this.style = {};
+ _this.computedStyle = runtime.enableCSSParsing ? {
+ anchor: unsetKeywordValue,
+ opacity: unsetKeywordValue,
+ fillOpacity: unsetKeywordValue,
+ strokeOpacity: unsetKeywordValue,
+ fill: unsetKeywordValue,
+ stroke: unsetKeywordValue,
+ transform: unsetKeywordValue,
+ transformOrigin: unsetKeywordValue,
+ visibility: unsetKeywordValue,
+ pointerEvents: unsetKeywordValue,
+ lineWidth: unsetKeywordValue,
+ lineCap: unsetKeywordValue,
+ lineJoin: unsetKeywordValue,
+ increasedLineWidthForHitTesting: unsetKeywordValue,
+ fontSize: unsetKeywordValue,
+ fontFamily: unsetKeywordValue,
+ fontStyle: unsetKeywordValue,
+ fontWeight: unsetKeywordValue,
+ fontVariant: unsetKeywordValue,
+ textAlign: unsetKeywordValue,
+ textBaseline: unsetKeywordValue,
+ textTransform: unsetKeywordValue,
+ zIndex: unsetKeywordValue,
+ filter: unsetKeywordValue,
+ shadowType: unsetKeywordValue
+ } : null;
+ /**
+ * Renderers will use these used values.
+ */
+ _this.parsedStyle = {
+ // opacity: '',
+ // fillOpacity: '',
+ // strokeOpacity: '',
+ // transformOrigin: '',
+ // visibility: '',
+ // pointerEvents: '',
+ // lineWidth: '',
+ // lineCap: '',
+ // lineJoin: '',
+ // increasedLineWidthForHitTesting: '',
+ // fontSize: '',
+ // fontFamily: '',
+ // fontStyle: '',
+ // fontWeight: '',
+ // fontVariant: '',
+ // textAlign: '',
+ // textBaseline: '',
+ // textTransform: '',
+ };
+ /**
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/attributes
+ */
+ _this.attributes = {};
+ return _this;
+ }
+ Element.isElement = function isElement(target) {
+ return !!target.getAttribute;
+ };
+ var _proto = Element.prototype;
+ _proto.cloneNode = function cloneNode(deep) {
+ throw new Error(ERROR_MSG_METHOD_NOT_IMPLEMENTED);
+ };
+ _proto.appendChild = function appendChild(child, index) {
+ var _this$ownerDocument;
+ if (child.destroyed) {
+ throw new Error(ERROR_MSG_APPEND_DESTROYED_ELEMENT);
+ }
+ runtime.sceneGraphService.attach(child, this, index);
+ if ((_this$ownerDocument = this.ownerDocument) === null || _this$ownerDocument === void 0 ? void 0 : _this$ownerDocument.defaultView) {
+ this.ownerDocument.defaultView.mountChildren(child);
+ }
+ insertedEvent.relatedNode = this;
+ child.dispatchEvent(insertedEvent);
+ return child;
+ };
+ _proto.insertBefore = function insertBefore(newChild, refChild) {
+ if (!refChild) {
+ this.appendChild(newChild);
+ } else {
+ var index = this.childNodes.indexOf(refChild);
+ this.appendChild(newChild, index - 1);
+ }
+ return newChild;
+ };
+ _proto.replaceChild = function replaceChild(newChild, oldChild) {
+ var index = this.childNodes.indexOf(oldChild);
+ this.removeChild(oldChild);
+ this.appendChild(newChild, index);
+ return oldChild;
+ };
+ _proto.removeChild = function removeChild(child) {
+ var _child$ownerDocument;
+ // should emit on itself before detach
+ removedEvent.relatedNode = this;
+ child.dispatchEvent(removedEvent);
+ if ((_child$ownerDocument = child.ownerDocument) === null || _child$ownerDocument === void 0 ? void 0 : _child$ownerDocument.defaultView) {
+ child.ownerDocument.defaultView.unmountChildren(child);
+ }
+ // remove from scene graph
+ runtime.sceneGraphService.detach(child);
+ return child;
+ }
+ /**
+ * Remove all children which can be appended to its original parent later again.
+ */;
+ _proto.removeChildren = function removeChildren() {
+ for (var i = this.childNodes.length - 1; i >= 0; i--) {
+ var child = this.childNodes[i];
+ this.removeChild(child);
+ }
+ }
+ /**
+ * Recursively destroy all children which can not be appended to its original parent later again.
+ */;
+ _proto.destroyChildren = function destroyChildren() {
+ for (var i = this.childNodes.length - 1; i >= 0; i--) {
+ var child = this.childNodes[i];
+ if (child.childNodes.length) {
+ child.destroyChildren();
+ }
+ child.destroy();
+ }
+ }
+ /**
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/matches
+ */;
+ _proto.matches = function matches(selector) {
+ return runtime.sceneGraphService.matches(selector, this);
+ };
+ _proto.getElementById = function getElementById(id) {
+ return runtime.sceneGraphService.querySelector("#" + id, this);
+ };
+ _proto.getElementsByName = function getElementsByName(name) {
+ return runtime.sceneGraphService.querySelectorAll("[name=\"" + name + "\"]", this);
+ };
+ _proto.getElementsByClassName = function getElementsByClassName(className) {
+ return runtime.sceneGraphService.querySelectorAll("." + className, this);
+ };
+ _proto.getElementsByTagName = function getElementsByTagName(tagName) {
+ return runtime.sceneGraphService.querySelectorAll(tagName, this);
+ };
+ _proto.querySelector = function querySelector(selectors) {
+ return runtime.sceneGraphService.querySelector(selectors, this);
+ };
+ _proto.querySelectorAll = function querySelectorAll(selectors) {
+ return runtime.sceneGraphService.querySelectorAll(selectors, this);
+ }
+ /**
+ * should traverses the element and its parents (heading toward the document root)
+ * until it finds a node that matches the specified CSS selector.
+ * @see https://developer.mozilla.org/zh-CN/docs/Web/API/Element/closest
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/closest#polyfill
+ */;
+ _proto.closest = function closest(selectors) {
+ var el = this;
+ do {
+ if (runtime.sceneGraphService.matches(selectors, el)) return el;
+ el = el.parentElement;
+ } while (el !== null);
+ return null;
+ }
+ /**
+ * search in scene group, but should not include itself
+ */;
+ _proto.find = function find(filter) {
+ var _this2 = this;
+ var target = null;
+ this.forEach(function (object) {
+ if (object !== _this2 && filter(object)) {
+ target = object;
+ return true;
+ }
+ return false;
+ });
+ return target;
+ };
+ _proto.findAll = function findAll(filter) {
+ var _this3 = this;
+ var objects = [];
+ this.forEach(function (object) {
+ if (object !== _this3 && filter(object)) {
+ objects.push(object);
+ }
+ });
+ return objects;
+ }
+ /**
+ * @see https://developer.mozilla.org/zh-CN/docs/Web/API/Element/after
+ */;
+ _proto.after = function after() {
+ var _this4 = this;
+ if (this.parentNode) {
+ var index = this.parentNode.childNodes.indexOf(this);
+ for (var _len2 = arguments.length, nodes = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+ nodes[_key2] = arguments[_key2];
+ }
+ nodes.forEach(function (node, i) {
+ var _this4$parentNode;
+ return (_this4$parentNode = _this4.parentNode) === null || _this4$parentNode === void 0 ? void 0 : _this4$parentNode.appendChild(node, index + i + 1);
+ });
+ }
+ }
+ /**
+ * @see https://developer.mozilla.org/zh-CN/docs/Web/API/Element/before
+ */;
+ _proto.before = function before() {
+ if (this.parentNode) {
+ var index = this.parentNode.childNodes.indexOf(this);
+ for (var _len3 = arguments.length, nodes = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+ nodes[_key3] = arguments[_key3];
+ }
+ var first = nodes[0],
+ rest = nodes.slice(1);
+ this.parentNode.appendChild(first, index);
+ first.after.apply(first, rest);
+ }
+ }
+ /**
+ * @see https://developer.mozilla.org/zh-CN/docs/Web/API/Element/replaceWith
+ */;
+ _proto.replaceWith = function replaceWith() {
+ this.after.apply(this, arguments);
+ this.remove();
+ }
+ /**
+ * @see https://developer.mozilla.org/zh-CN/docs/Web/API/Element/append
+ */;
+ _proto.append = function append() {
+ var _this5 = this;
+ for (var _len4 = arguments.length, nodes = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
+ nodes[_key4] = arguments[_key4];
+ }
+ nodes.forEach(function (node) {
+ return _this5.appendChild(node);
+ });
+ }
+ /**
+ * @see https://developer.mozilla.org/zh-CN/docs/Web/API/Element/prepend
+ */;
+ _proto.prepend = function prepend() {
+ var _this6 = this;
+ for (var _len5 = arguments.length, nodes = new Array(_len5), _key5 = 0; _key5 < _len5; _key5++) {
+ nodes[_key5] = arguments[_key5];
+ }
+ nodes.forEach(function (node, i) {
+ return _this6.appendChild(node, i);
+ });
+ }
+ /**
+ * @see https://developer.mozilla.org/zh-CN/docs/Web/API/Element/replaceChildren
+ */;
+ _proto.replaceChildren = function replaceChildren() {
+ while (this.childNodes.length && this.firstChild) {
+ this.removeChild(this.firstChild);
+ }
+ this.append.apply(this, arguments);
+ }
+ /**
+ * @see https://developer.mozilla.org/zh-CN/docs/Web/API/Element/remove
+ */;
+ _proto.remove = function remove() {
+ if (this.parentNode) {
+ return this.parentNode.removeChild(this);
+ }
+ return this;
+ };
+ _proto.destroy = function destroy() {
+ // destroy itself before remove
+ this.dispatchEvent(destroyEvent);
+ // remove from scenegraph first
+ this.remove();
+ // remove event listeners
+ this.emitter.removeAllListeners();
+ this.destroyed = true;
+ };
+ _proto.getGeometryBounds = function getGeometryBounds() {
+ return runtime.sceneGraphService.getGeometryBounds(this);
+ };
+ _proto.getRenderBounds = function getRenderBounds() {
+ return runtime.sceneGraphService.getBounds(this, true);
+ }
+ /**
+ * get bounds in world space, account for children
+ */;
+ _proto.getBounds = function getBounds() {
+ return runtime.sceneGraphService.getBounds(this);
+ }
+ /**
+ * get bounds in local space, account for children
+ */;
+ _proto.getLocalBounds = function getLocalBounds() {
+ return runtime.sceneGraphService.getLocalBounds(this);
+ }
+ /**
+ * account for context's bounds in client space,
+ * but not accounting for children
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect
+ */;
+ _proto.getBoundingClientRect = function getBoundingClientRect() {
+ return runtime.sceneGraphService.getBoundingClientRect(this);
+ }
+ /**
+ * @see https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getClientRects
+ */;
+ _proto.getClientRects = function getClientRects() {
+ return [this.getBoundingClientRect()];
+ };
+ /**
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/computedStyleMap
+ * eg. circle.computedStyleMap().get('fill');
+ */
+ _proto.computedStyleMap = function computedStyleMap() {
+ return new Map(Object.entries(this.computedStyle));
+ };
+ /**
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttributeNames
+ */
+ _proto.getAttributeNames = function getAttributeNames() {
+ return Object.keys(this.attributes);
+ }
+ /**
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute
+ */;
+ _proto.getAttribute = function getAttribute(name) {
+ // @see https://github.com/antvis/G/issues/1267
+ if (isSymbol(name)) {
+ return runtime.enableCSSParsing ? null : undefined;
+ }
+ var value = this.attributes[name];
+ if (value === undefined) {
+ var attributeName = formatAttributeName(name);
+ value = this.attributes[attributeName];
+ // if the given attribute does not exist, the value returned will either be null or ""
+ return runtime.enableCSSParsing ? isNil(value) ? null : value : value;
+ } else {
+ return value;
+ }
+ }
+ /**
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/hasAttribute
+ */;
+ _proto.hasAttribute = function hasAttribute(qualifiedName) {
+ return this.getAttributeNames().includes(qualifiedName);
+ }
+ /**
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/hasAttributes
+ */;
+ _proto.hasAttributes = function hasAttributes() {
+ return !!this.getAttributeNames().length;
+ }
+ /**
+ * should use removeAttribute() instead of setting the attribute value to null either directly or using setAttribute(). Many attributes will not behave as expected if you set them to null.
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/removeAttribute
+ */;
+ _proto.removeAttribute = function removeAttribute(attributeName) {
+ this.setAttribute(attributeName, null);
+ delete this.attributes[attributeName];
+ }
+ /**
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute
+ */;
+ _proto.setAttribute = function setAttribute(attributeName, value, force) {
+ this.attributes[attributeName] = value;
+ };
+ _proto.getAttributeNS = function getAttributeNS(namespace, localName) {
+ throw new Error(ERROR_MSG_METHOD_NOT_IMPLEMENTED);
+ };
+ _proto.getAttributeNode = function getAttributeNode(qualifiedName) {
+ throw new Error(ERROR_MSG_METHOD_NOT_IMPLEMENTED);
+ };
+ _proto.getAttributeNodeNS = function getAttributeNodeNS(namespace, localName) {
+ throw new Error(ERROR_MSG_METHOD_NOT_IMPLEMENTED);
+ };
+ _proto.hasAttributeNS = function hasAttributeNS(namespace, localName) {
+ throw new Error(ERROR_MSG_METHOD_NOT_IMPLEMENTED);
+ };
+ _proto.removeAttributeNS = function removeAttributeNS(namespace, localName) {
+ throw new Error(ERROR_MSG_METHOD_NOT_IMPLEMENTED);
+ };
+ _proto.removeAttributeNode = function removeAttributeNode(attr) {
+ throw new Error(ERROR_MSG_METHOD_NOT_IMPLEMENTED);
+ };
+ _proto.setAttributeNS = function setAttributeNS(namespace, qualifiedName, value) {
+ throw new Error(ERROR_MSG_METHOD_NOT_IMPLEMENTED);
+ };
+ _proto.setAttributeNode = function setAttributeNode(attr) {
+ throw new Error(ERROR_MSG_METHOD_NOT_IMPLEMENTED);
+ };
+ _proto.setAttributeNodeNS = function setAttributeNodeNS(attr) {
+ throw new Error(ERROR_MSG_METHOD_NOT_IMPLEMENTED);
+ };
+ _proto.toggleAttribute = function toggleAttribute(qualifiedName, force) {
+ throw new Error(ERROR_MSG_METHOD_NOT_IMPLEMENTED);
+ };
+ _createClass(Element, [{
+ key: "className",
+ get:
+ /**
+ * used in `getElementsByClassName`
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName
+ */
+ function get() {
+ // @ts-ignore
+ return this.getAttribute('class') || '';
+ },
+ set: function set(className) {
+ this.setAttribute('class', className);
+ }
+ }, {
+ key: "classList",
+ get:
+ /**
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/classList
+ */
+ function get() {
+ return this.className.split(' ').filter(function (c) {
+ return c !== '';
+ });
+ }
+ }, {
+ key: "tagName",
+ get: function get() {
+ return this.nodeName;
+ }
+ }, {
+ key: "children",
+ get: function get() {
+ return this.childNodes;
+ }
+ }, {
+ key: "childElementCount",
+ get: function get() {
+ return this.childNodes.length;
+ }
+ }, {
+ key: "firstElementChild",
+ get: function get() {
+ return this.firstChild;
+ }
+ }, {
+ key: "lastElementChild",
+ get: function get() {
+ return this.lastChild;
+ }
+ }, {
+ key: "parentElement",
+ get: function get() {
+ return this.parentNode;
+ }
+ }, {
+ key: "nextSibling",
+ get: function get() {
+ if (this.parentNode) {
+ var index = this.parentNode.childNodes.indexOf(this);
+ return this.parentNode.childNodes[index + 1] || null;
+ }
+ return null;
+ }
+ }, {
+ key: "previousSibling",
+ get: function get() {
+ if (this.parentNode) {
+ var index = this.parentNode.childNodes.indexOf(this);
+ return this.parentNode.childNodes[index - 1] || null;
+ }
+ return null;
+ }
+ }]);
+ return Element;
+ }(Node$1);
+
+ var FederatedMouseEvent = /*#__PURE__*/function (_FederatedEvent) {
+ _inheritsLoose(FederatedMouseEvent, _FederatedEvent);
+ function FederatedMouseEvent() {
+ var _this;
+ for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+ args[_key] = arguments[_key];
+ }
+ _this = _FederatedEvent.call.apply(_FederatedEvent, [this].concat(args)) || this;
+ /** Whether the "alt" key was pressed when this mouse event occurred. */
+ _this.altKey = void 0;
+ /** The specific button that was pressed in this mouse event. */
+ _this.button = void 0;
+ /** The button depressed when this event occurred. */
+ _this.buttons = void 0;
+ /** Whether the "control" key was pressed when this mouse event occurred. */
+ _this.ctrlKey = void 0;
+ /** Whether the "meta" key was pressed when this mouse event occurred. */
+ _this.metaKey = void 0;
+ /** This is currently not implemented in the Federated Events API. */
+ _this.relatedTarget = void 0;
+ /** Whether the "shift" key was pressed when this mouse event occurred. */
+ _this.shiftKey = void 0;
+ /**
+ * The coordinates of the mouse event relative to the canvas.
+ */
+ _this.client = new Point();
+ /**
+ * The movement in this pointer relative to the last `mousemove` event.
+ */
+ _this.movement = new Point();
+ /**
+ * The offset of the pointer coordinates w.r.t. target DisplayObject in world space. This is
+ * not supported at the moment.
+ */
+ _this.offset = new Point();
+ /**
+ * The pointer coordinates in world space.
+ */
+ _this.global = new Point();
+ /**
+ * The pointer coordinates in sceen space.
+ */
+ _this.screen = new Point();
+ return _this;
+ }
+ var _proto = FederatedMouseEvent.prototype;
+ _proto.getModifierState = function getModifierState(key) {
+ return 'getModifierState' in this.nativeEvent && this.nativeEvent.getModifierState(key);
+ };
+ _proto.initMouseEvent = function initMouseEvent() {
+ throw new Error(ERROR_MSG_METHOD_NOT_IMPLEMENTED);
+ };
+ _createClass(FederatedMouseEvent, [{
+ key: "clientX",
+ get: function get() {
+ return this.client.x;
+ }
+ }, {
+ key: "clientY",
+ get: function get() {
+ return this.client.y;
+ }
+ }, {
+ key: "movementX",
+ get: function get() {
+ return this.movement.x;
+ }
+ }, {
+ key: "movementY",
+ get: function get() {
+ return this.movement.y;
+ }
+ }, {
+ key: "offsetX",
+ get: function get() {
+ return this.offset.x;
+ }
+ }, {
+ key: "offsetY",
+ get: function get() {
+ return this.offset.y;
+ }
+ }, {
+ key: "globalX",
+ get: function get() {
+ return this.global.x;
+ }
+ }, {
+ key: "globalY",
+ get: function get() {
+ return this.global.y;
+ }
+ }, {
+ key: "screenX",
+ get: function get() {
+ return this.screen.x;
+ }
+ }, {
+ key: "screenY",
+ get: function get() {
+ return this.screen.y;
+ }
+ }]);
+ return FederatedMouseEvent;
+ }(FederatedEvent);
+
+ var FederatedPointerEvent = /*#__PURE__*/function (_FederatedMouseEvent) {
+ _inheritsLoose(FederatedPointerEvent, _FederatedMouseEvent);
+ function FederatedPointerEvent() {
+ var _this;
+ for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+ args[_key] = arguments[_key];
+ }
+ _this = _FederatedMouseEvent.call.apply(_FederatedMouseEvent, [this].concat(args)) || this;
+ /**
+ * The unique identifier of the pointer.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pointerId
+ */
+ _this.pointerId = void 0;
+ /**
+ * The width of the pointer's contact along the x-axis, measured in CSS pixels.
+ * radiusX of TouchEvents will be represented by this value.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/width
+ */
+ _this.width = 0;
+ /**
+ * The height of the pointer's contact along the y-axis, measured in CSS pixels.
+ * radiusY of TouchEvents will be represented by this value.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/height
+ */
+ _this.height = 0;
+ /**
+ * Indicates whether or not the pointer device that created the event is the primary pointer.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/isPrimary
+ */
+ _this.isPrimary = false;
+ /**
+ * The type of pointer that triggered the event.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pointerType
+ */
+ _this.pointerType = void 0;
+ /**
+ * Pressure applied by the pointing device during the event.
+ *s
+ * A Touch's force property will be represented by this value.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pressure
+ */
+ _this.pressure = void 0;
+ /**
+ * Barrel pressure on a stylus pointer.
+ *
+ * @see https://w3c.github.io/pointerevents/#pointerevent-interface
+ */
+ _this.tangentialPressure = void 0;
+ /**
+ * The angle, in degrees, between the pointer device and the screen.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/tiltX
+ */
+ _this.tiltX = void 0;
+ /**
+ * The angle, in degrees, between the pointer device and the screen.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/tiltY
+ */
+ _this.tiltY = void 0;
+ /**
+ * Twist of a stylus pointer.
+ *
+ * @see https://w3c.github.io/pointerevents/#pointerevent-interface
+ */
+ _this.twist = void 0;
+ return _this;
+ }
+ var _proto = FederatedPointerEvent.prototype;
+ /**
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/getCoalescedEvents
+ */
+ _proto.getCoalescedEvents = function getCoalescedEvents() {
+ if (this.type === 'pointermove' || this.type === 'mousemove' || this.type === 'touchmove') {
+ return [this];
+ }
+ return [];
+ }
+ /**
+ * @see https://chromestatus.com/feature/5765569655603200
+ */;
+ _proto.getPredictedEvents = function getPredictedEvents() {
+ throw new Error('getPredictedEvents is not supported!');
+ }
+ /**
+ * @see https://github.com/antvis/G/issues/1115
+ * We currently reuses event objects in the event system,
+ * avoiding the creation of a large number of event objects.
+ * Reused objects are only used to carry different data,
+ * such as coordinate information, native event objects,
+ * and therefore the lifecycle is limited to the event handler,
+ * which can lead to unintended consequences if an attempt is made to cache the entire event object.
+ *
+ * Therefore, while keeping the above performance considerations in mind, it is possible to provide a clone method that creates a new object when the user really wants to cache it, e.g.
+ */;
+ _proto.clone = function clone() {
+ return this.manager.clonePointerEvent(this);
+ };
+ return FederatedPointerEvent;
+ }(FederatedMouseEvent);
+
+ var FederatedWheelEvent = /*#__PURE__*/function (_FederatedMouseEvent) {
+ _inheritsLoose(FederatedWheelEvent, _FederatedMouseEvent);
+ function FederatedWheelEvent() {
+ var _this;
+ for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+ args[_key] = arguments[_key];
+ }
+ _this = _FederatedMouseEvent.call.apply(_FederatedMouseEvent, [this].concat(args)) || this;
+ /**
+ * The units of `deltaX`, `deltaY`, and `deltaZ`. This is one of `DOM_DELTA_LINE`,
+ * `DOM_DELTA_PAGE`, `DOM_DELTA_PIXEL`.
+ */
+ _this.deltaMode = void 0;
+ /** Horizontal scroll amount */
+ _this.deltaX = void 0;
+ /** Vertical scroll amount */
+ _this.deltaY = void 0;
+ /** z-axis scroll amount. */
+ _this.deltaZ = void 0;
+ /** Units specified in lines. */
+ _this.DOM_DELTA_LINE = 0;
+ /** Units specified in pages. */
+ _this.DOM_DELTA_PAGE = 1;
+ /** Units specified in pixels. */
+ _this.DOM_DELTA_PIXEL = 2;
+ return _this;
+ }
+ var _proto = FederatedWheelEvent.prototype;
+ _proto.clone = function clone() {
+ return this.manager.cloneWheelEvent(this);
+ };
+ return FederatedWheelEvent;
+ }(FederatedMouseEvent);
+
+ function isDisplayObject(value) {
+ return !!(value === null || value === void 0 ? void 0 : value.nodeName);
+ }
+ var mutationEvent = new MutationEvent(ElementEvent.ATTR_MODIFIED, null, null, null, null, MutationEvent.MODIFICATION, null, null);
+ var DEFAULT_STYLE_PROPS = {
+ anchor: '',
+ opacity: '',
+ fillOpacity: '',
+ strokeOpacity: '',
+ fill: '',
+ stroke: '',
+ transform: '',
+ transformOrigin: '',
+ visibility: '',
+ pointerEvents: '',
+ lineWidth: '',
+ lineCap: '',
+ lineJoin: '',
+ increasedLineWidthForHitTesting: '',
+ fontSize: '',
+ fontFamily: '',
+ fontStyle: '',
+ fontWeight: '',
+ fontVariant: '',
+ textAlign: '',
+ textBaseline: '',
+ textTransform: '',
+ zIndex: '',
+ filter: '',
+ shadowType: ''
+ };
+ var DEFAULT_PARSED_STYLE_PROPS = {
+ anchor: [0, 0],
+ fill: noneColor,
+ stroke: noneColor,
+ transform: [],
+ zIndex: 0,
+ filter: [],
+ shadowType: 'outer',
+ miterLimit: 10
+ };
+ var DEFAULT_PARSED_STYLE_PROPS_CSS_DISABLED = _extends({}, DEFAULT_PARSED_STYLE_PROPS, {
+ opacity: 1,
+ fillOpacity: 1,
+ strokeOpacity: 1,
+ visibility: 'visible',
+ pointerEvents: 'auto',
+ lineWidth: 1,
+ lineCap: 'butt',
+ lineJoin: 'miter',
+ increasedLineWidthForHitTesting: 0,
+ fillRule: 'nonzero'
+ // TODO: transformOrigin
+ });
+
+ var INHERITABLE_BASE_STYLE_PROPS = ['opacity', 'fillOpacity', 'strokeOpacity', 'transformOrigin', 'visibility', 'pointerEvents', 'lineWidth', 'lineCap', 'lineJoin', 'increasedLineWidthForHitTesting'];
+ var INHERITABLE_STYLE_PROPS = [].concat(INHERITABLE_BASE_STYLE_PROPS, ['fontSize', 'fontFamily', 'fontStyle', 'fontWeight', 'fontVariant', 'textAlign', 'textBaseline', 'textTransform']);
+ var DATASET_PREFIX = 'data-';
+ /**
+ * prototype chains: DisplayObject -> Element -> Node -> EventTarget
+ *
+ * mixins: Animatable, Transformable, Visible
+ * @see https://github.com/tannerntannern/ts-mixer/blob/master/README.md#mixing-generic-classes
+ *
+ * Provide abilities in scene graph, such as:
+ * * transform `translate/rotate/scale`
+ * * add/remove child
+ * * visibility and z-index
+ *
+ * Those abilities are implemented with those components: `Transform/Sortable/Visible`.
+ *
+ * Emit following events:
+ * * init
+ * * destroy
+ * * attributeChanged
+ */
+ var DisplayObject = /*#__PURE__*/function (_Element) {
+ _inheritsLoose(DisplayObject, _Element);
+ /**
+ * contains style props in constructor's params, eg. fill, stroke...
+ */
+
+ /**
+ * push to active animations after calling `animate()`
+ */
+
+ /**
+ * Use data-* attribute.
+ * @see https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes
+ * @example
+ * group.dataset.prop1 = 1;
+ * group.getAttribute('data-prop1'); // 1
+ */
+
+ function DisplayObject(config) {
+ var _this$config$capture;
+ var _this;
+ _this = _Element.call(this) || this;
+ // assign name, id to config
+ // eg. group.get('name')
+ _this.config = void 0;
+ _this.isCustomElement = false;
+ _this.isMutationObserved = false;
+ _this.activeAnimations = [];
+ _this.dataset = void 0;
+ /**
+ * Use `this.style.clipPath` instead.
+ * @deprecated
+ */
+ _this.getClip = function () {
+ return this.style.clipPath || null;
+ };
+ _this.config = config;
+ // compatible with G 3.0
+ _this.config.interactive = (_this$config$capture = _this.config.capture) !== null && _this$config$capture !== void 0 ? _this$config$capture : _this.config.interactive;
+ // init scene graph node
+ _this.id = _this.config.id || '';
+ _this.name = _this.config.name || '';
+ if (_this.config.className || _this.config.class) {
+ _this.className = _this.config.className || _this.config.class;
+ }
+ _this.nodeName = _this.config.type || Shape.GROUP;
+ // compatible with G 3.0
+ _this.config.style = _this.config.style || _this.config.attrs || {};
+ Object.assign(_this.config.style, _this.config.attrs);
+ // this.config.style = {
+ // // ...DEFAULT_STYLE_PROPS,
+ // ...this.config.style,
+ // ...this.config.attrs,
+ // };
+ if (_this.config.visible != null) {
+ _this.config.style.visibility = _this.config.visible === false ? 'hidden' : 'visible';
+ }
+ if (_this.config.interactive != null) {
+ _this.config.style.pointerEvents = _this.config.interactive === false ? 'none' : 'auto';
+ }
+ // merge parsed value
+ Object.assign(_this.parsedStyle, runtime.enableCSSParsing ? DEFAULT_PARSED_STYLE_PROPS : DEFAULT_PARSED_STYLE_PROPS_CSS_DISABLED, _this.config.initialParsedStyle);
+ if (runtime.enableCSSParsing) {
+ Object.assign(_this.attributes, DEFAULT_STYLE_PROPS);
+ }
+ // start to process attributes
+ _this.initAttributes(_this.config.style);
+ var Proxy = runtime.globalThis.Proxy ? runtime.globalThis.Proxy : function () {};
+ _this.dataset = new Proxy({}, {
+ get: function get(target, name) {
+ var formattedName = "" + DATASET_PREFIX + kebabize(name);
+ if (target[formattedName] !== undefined) {
+ return target[formattedName];
+ }
+ return _this.getAttribute(formattedName);
+ },
+ set: function set(_, prop, value) {
+ _this.setAttribute("" + DATASET_PREFIX + kebabize(prop), value);
+ return true;
+ }
+ });
+ _this.style = new Proxy(
+ // @ts-ignore
+ {
+ // ...this.attributes,
+ setProperty: function setProperty(propertyName, value) {
+ _this.setAttribute(propertyName, value);
+ },
+ getPropertyValue: function getPropertyValue(propertyName) {
+ return _this.getAttribute(propertyName);
+ },
+ removeProperty: function removeProperty(propertyName) {
+ _this.removeAttribute(propertyName);
+ },
+ item: function item() {
+ return '';
+ }
+ }, {
+ get: function get(target, name) {
+ if (target[name] !== undefined) {
+ // if (name in target) {
+ return target[name];
+ }
+ return _this.getAttribute(name);
+ },
+ set: function set(_, prop, value) {
+ _this.setAttribute(prop, value);
+ return true;
+ }
+ });
+ return _this;
+ }
+ var _proto = DisplayObject.prototype;
+ _proto.destroy = function destroy() {
+ _Element.prototype.destroy.call(this);
+ // stop all active animations
+ this.getAnimations().forEach(function (animation) {
+ animation.cancel();
+ });
+ // FIXME
+ // this.renderable = null;
+ // this.cullable = null;
+ // this.transformable = null;
+ // this.rBushNode = null;
+ // this.geometry = null;
+ // this.sortable = null;
+ };
+ _proto.cloneNode = function cloneNode(deep, customCloneFunc) {
+ var clonedStyle = _extends({}, this.attributes);
+ for (var attributeName in clonedStyle) {
+ var attribute = clonedStyle[attributeName];
+ // @see https://github.com/antvis/G/issues/1095
+ if (isDisplayObject(attribute) &&
+ // share the same clipPath if possible
+ attributeName !== 'clipPath' && attributeName !== 'offsetPath' && attributeName !== 'textPath') {
+ clonedStyle[attributeName] = attribute.cloneNode(deep);
+ }
+ // TODO: clone other type
+ if (customCloneFunc) {
+ clonedStyle[attributeName] = customCloneFunc(attributeName, attribute);
+ }
+ }
+ var cloned = new this.constructor({
+ // copy id & name
+ // @see https://developer.mozilla.org/en-US/docs/Web/API/Node/cloneNode#notes
+ id: this.id,
+ name: this.name,
+ className: this.name,
+ interactive: this.interactive,
+ style: clonedStyle
+ });
+ // apply transform
+ cloned.setLocalTransform(this.getLocalTransform());
+ if (deep) {
+ this.children.forEach(function (child) {
+ // skip marker
+ if (!child.style.isMarker) {
+ var clonedChild = child.cloneNode(deep);
+ cloned.appendChild(clonedChild);
+ }
+ });
+ }
+ return cloned;
+ };
+ _proto.initAttributes = function initAttributes(attributes) {
+ if (attributes === void 0) {
+ attributes = {};
+ }
+ var renderable = this.renderable;
+ var options = {
+ forceUpdateGeometry: true
+ // usedAttributes:
+ // // only Group / Text should account for text relative props
+ // this.tagName === Shape.GROUP || this.tagName === Shape.TEXT
+ // ? INHERITABLE_STYLE_PROPS
+ // : INHERITABLE_BASE_STYLE_PROPS,
+ };
+
+ if (runtime.enableCSSParsing) {
+ // @ts-ignore
+ options.usedAttributes = INHERITABLE_STYLE_PROPS;
+ }
+ // account for FCP, process properties as less as possible
+ var formattedAttributes = {};
+ for (var name in attributes) {
+ var attributeName = formatAttributeName(name);
+ formattedAttributes[attributeName] = attributes[name];
+ }
+ runtime.styleValueRegistry.processProperties(this, formattedAttributes, options);
+ // redraw at next frame
+ renderable.dirty = true;
+ };
+ _proto.setAttribute = function setAttribute(name, value, force) {
+ if (force === void 0) {
+ force = false;
+ }
+ var attributeName = formatAttributeName(name);
+ // ignore undefined value
+ if (isUndefined(value)) {
+ return;
+ }
+ if (force || value !== this.attributes[attributeName]) {
+ this.internalSetAttribute(attributeName, value);
+ _Element.prototype.setAttribute.call(this, attributeName, value);
+ }
+ }
+ /**
+ * called when attributes get changed or initialized
+ */;
+ _proto.internalSetAttribute = function internalSetAttribute(name, value, parseOptions) {
+ var _runtime$styleValueRe;
+ if (parseOptions === void 0) {
+ parseOptions = {};
+ }
+ var renderable = this.renderable;
+ var oldValue = this.attributes[name];
+ var oldParsedValue = this.parsedStyle[name];
+ runtime.styleValueRegistry.processProperties(this, (_runtime$styleValueRe = {}, _runtime$styleValueRe[name] = value, _runtime$styleValueRe), parseOptions);
+ // redraw at next frame
+ renderable.dirty = true;
+ var newParsedValue = this.parsedStyle[name];
+ if (this.isConnected) {
+ mutationEvent.relatedNode = this;
+ mutationEvent.prevValue = oldValue;
+ mutationEvent.newValue = value;
+ mutationEvent.attrName = name;
+ mutationEvent.prevParsedValue = oldParsedValue;
+ mutationEvent.newParsedValue = newParsedValue;
+ if (this.isMutationObserved) {
+ this.dispatchEvent(mutationEvent);
+ } else {
+ mutationEvent.target = this;
+ this.ownerDocument.defaultView.dispatchEvent(mutationEvent, true);
+ }
+ }
+ if ((this.isCustomElement && this.isConnected || !this.isCustomElement) && this.attributeChangedCallback) {
+ this.attributeChangedCallback(name, oldValue, value, oldParsedValue, newParsedValue);
+ }
+ }
+ // #region transformable
+ /**
+ * returns different values than getBoundingClientRect(), as the latter returns value relative to the viewport
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/SVGGraphicsElement/getBBox
+ *
+ * FIXME: It is worth noting that getBBox responds to original untransformed values of a drawn object.
+ * @see https://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html#getBBox
+ */;
+ _proto.getBBox = function getBBox() {
+ var aabb = this.getBounds();
+ var _aabb$getMin = aabb.getMin(),
+ left = _aabb$getMin[0],
+ top = _aabb$getMin[1];
+ var _aabb$getMax = aabb.getMax(),
+ right = _aabb$getMax[0],
+ bottom = _aabb$getMax[1];
+ return new Rectangle(left, top, right - left, bottom - top);
+ };
+ _proto.setOrigin = function setOrigin(position, y, z) {
+ if (y === void 0) {
+ y = 0;
+ }
+ if (z === void 0) {
+ z = 0;
+ }
+ runtime.sceneGraphService.setOrigin(this, createVec3(position, y, z));
+ return this;
+ };
+ _proto.getOrigin = function getOrigin() {
+ return runtime.sceneGraphService.getOrigin(this);
+ }
+ /**
+ * set position in world space
+ */;
+ _proto.setPosition = function setPosition(position, y, z) {
+ if (y === void 0) {
+ y = 0;
+ }
+ if (z === void 0) {
+ z = 0;
+ }
+ runtime.sceneGraphService.setPosition(this, createVec3(position, y, z));
+ return this;
+ }
+ /**
+ * set position in local space
+ */;
+ _proto.setLocalPosition = function setLocalPosition(position, y, z) {
+ if (y === void 0) {
+ y = 0;
+ }
+ if (z === void 0) {
+ z = 0;
+ }
+ runtime.sceneGraphService.setLocalPosition(this, createVec3(position, y, z));
+ return this;
+ }
+ /**
+ * translate in world space
+ */;
+ _proto.translate = function translate(position, y, z) {
+ if (y === void 0) {
+ y = 0;
+ }
+ if (z === void 0) {
+ z = 0;
+ }
+ runtime.sceneGraphService.translate(this, createVec3(position, y, z));
+ return this;
+ }
+ /**
+ * translate in local space
+ */;
+ _proto.translateLocal = function translateLocal(position, y, z) {
+ if (y === void 0) {
+ y = 0;
+ }
+ if (z === void 0) {
+ z = 0;
+ }
+ runtime.sceneGraphService.translateLocal(this, createVec3(position, y, z));
+ return this;
+ };
+ _proto.getPosition = function getPosition() {
+ return runtime.sceneGraphService.getPosition(this);
+ };
+ _proto.getLocalPosition = function getLocalPosition() {
+ return runtime.sceneGraphService.getLocalPosition(this);
+ }
+ /**
+ * compatible with G 3.0
+ *
+ * scaling in local space
+ * scale(10) = scale(10, 10, 10)
+ *
+ * we can't set scale in world space
+ */;
+ _proto.scale = function scale(scaling, y, z) {
+ return this.scaleLocal(scaling, y, z);
+ };
+ _proto.scaleLocal = function scaleLocal(scaling, y, z) {
+ if (typeof scaling === 'number') {
+ y = y || scaling;
+ z = z || scaling;
+ scaling = createVec3(scaling, y, z);
+ }
+ runtime.sceneGraphService.scaleLocal(this, scaling);
+ return this;
+ }
+ /**
+ * set scaling in local space
+ */;
+ _proto.setLocalScale = function setLocalScale(scaling, y, z) {
+ if (typeof scaling === 'number') {
+ y = y || scaling;
+ z = z || scaling;
+ scaling = createVec3(scaling, y, z);
+ }
+ runtime.sceneGraphService.setLocalScale(this, scaling);
+ return this;
+ }
+ /**
+ * get scaling in local space
+ */;
+ _proto.getLocalScale = function getLocalScale() {
+ return runtime.sceneGraphService.getLocalScale(this);
+ }
+ /**
+ * get scaling in world space
+ */;
+ _proto.getScale = function getScale() {
+ return runtime.sceneGraphService.getScale(this);
+ }
+ /**
+ * only return degrees of Z axis in world space
+ */;
+ _proto.getEulerAngles = function getEulerAngles() {
+ var _getEuler = getEuler(create$2(), runtime.sceneGraphService.getWorldTransform(this)),
+ ez = _getEuler[2];
+ return rad2deg(ez);
+ }
+ /**
+ * only return degrees of Z axis in local space
+ */;
+ _proto.getLocalEulerAngles = function getLocalEulerAngles() {
+ var _getEuler2 = getEuler(create$2(), runtime.sceneGraphService.getLocalRotation(this)),
+ ez = _getEuler2[2];
+ return rad2deg(ez);
+ }
+ /**
+ * set euler angles(degrees) in world space
+ */;
+ _proto.setEulerAngles = function setEulerAngles(z) {
+ runtime.sceneGraphService.setEulerAngles(this, 0, 0, z);
+ return this;
+ }
+ /**
+ * set euler angles(degrees) in local space
+ */;
+ _proto.setLocalEulerAngles = function setLocalEulerAngles(z) {
+ runtime.sceneGraphService.setLocalEulerAngles(this, 0, 0, z);
+ return this;
+ };
+ _proto.rotateLocal = function rotateLocal(x, y, z) {
+ if (isNil(y) && isNil(z)) {
+ runtime.sceneGraphService.rotateLocal(this, 0, 0, x);
+ } else {
+ runtime.sceneGraphService.rotateLocal(this, x, y, z);
+ }
+ return this;
+ };
+ _proto.rotate = function rotate(x, y, z) {
+ if (isNil(y) && isNil(z)) {
+ runtime.sceneGraphService.rotate(this, 0, 0, x);
+ } else {
+ runtime.sceneGraphService.rotate(this, x, y, z);
+ }
+ return this;
+ };
+ _proto.setRotation = function setRotation(rotation, y, z, w) {
+ runtime.sceneGraphService.setRotation(this, rotation, y, z, w);
+ return this;
+ };
+ _proto.setLocalRotation = function setLocalRotation(rotation, y, z, w) {
+ runtime.sceneGraphService.setLocalRotation(this, rotation, y, z, w);
+ return this;
+ };
+ _proto.setLocalSkew = function setLocalSkew(skew, y) {
+ runtime.sceneGraphService.setLocalSkew(this, skew, y);
+ return this;
+ };
+ _proto.getRotation = function getRotation() {
+ return runtime.sceneGraphService.getRotation(this);
+ };
+ _proto.getLocalRotation = function getLocalRotation() {
+ return runtime.sceneGraphService.getLocalRotation(this);
+ };
+ _proto.getLocalSkew = function getLocalSkew() {
+ return runtime.sceneGraphService.getLocalSkew(this);
+ };
+ _proto.getLocalTransform = function getLocalTransform() {
+ return runtime.sceneGraphService.getLocalTransform(this);
+ };
+ _proto.getWorldTransform = function getWorldTransform() {
+ return runtime.sceneGraphService.getWorldTransform(this);
+ };
+ _proto.setLocalTransform = function setLocalTransform(transform) {
+ runtime.sceneGraphService.setLocalTransform(this, transform);
+ return this;
+ };
+ _proto.resetLocalTransform = function resetLocalTransform() {
+ runtime.sceneGraphService.resetLocalTransform(this);
+ }
+ // #endregion transformable
+ // #region animatable
+ /**
+ * returns an array of all Animation objects affecting this element
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/getAnimations
+ */;
+ _proto.getAnimations = function getAnimations() {
+ return this.activeAnimations;
+ }
+ /**
+ * create an animation with WAAPI
+ * @see https://developer.mozilla.org/zh-CN/docs/Web/API/Element/animate
+ */;
+ _proto.animate = function animate(keyframes, options) {
+ var _this$ownerDocument;
+ var timeline = (_this$ownerDocument = this.ownerDocument) === null || _this$ownerDocument === void 0 ? void 0 : _this$ownerDocument.timeline;
+ if (timeline) {
+ return timeline.play(this, keyframes, options);
+ }
+ return null;
+ }
+ // #endregion animatable
+ // #region visible
+ /**
+ * shortcut for Used value of `visibility`
+ */;
+ _proto.isVisible = function isVisible() {
+ var _this$parsedStyle;
+ return ((_this$parsedStyle = this.parsedStyle) === null || _this$parsedStyle === void 0 ? void 0 : _this$parsedStyle.visibility) === 'visible';
+ };
+ _proto.isInteractive = function isInteractive() {
+ var _this$parsedStyle2;
+ return ((_this$parsedStyle2 = this.parsedStyle) === null || _this$parsedStyle2 === void 0 ? void 0 : _this$parsedStyle2.pointerEvents) !== 'none';
+ };
+ _proto.isCulled = function isCulled() {
+ return !!(this.cullable && this.cullable.enable && !this.cullable.visible);
+ }
+ /**
+ * bring to front in current group
+ */;
+ _proto.toFront = function toFront() {
+ if (this.parentNode) {
+ this.style.zIndex = Math.max.apply(Math, this.parentNode.children.map(function (child) {
+ return Number(child.style.zIndex);
+ })) + 1;
+ }
+ return this;
+ }
+ /**
+ * send to back in current group
+ */;
+ _proto.toBack = function toBack() {
+ if (this.parentNode) {
+ this.style.zIndex = Math.min.apply(Math, this.parentNode.children.map(function (child) {
+ return Number(child.style.zIndex);
+ })) - 1;
+ }
+ return this;
+ }
+ // #endregion visible
+ // #region deprecated
+ /**
+ * compatible with G 3.0
+ * @alias object.config
+ * @deprecated
+ */;
+ _proto.getConfig = function getConfig() {
+ return this.config;
+ };
+ _proto.attr = function attr() {
+ var _this2 = this;
+ for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+ args[_key] = arguments[_key];
+ }
+ var name = args[0],
+ value = args[1];
+ if (!name) {
+ return this.attributes;
+ }
+ if (isObject(name)) {
+ Object.keys(name).forEach(function (key) {
+ _this2.setAttribute(key, name[key]);
+ });
+ return this;
+ }
+ if (args.length === 2) {
+ this.setAttribute(name, value);
+ return this;
+ }
+ return this.attributes[name];
+ }
+ /**
+ * return 3x3 matrix in world space
+ * @deprecated
+ */;
+ _proto.getMatrix = function getMatrix(transformMat4) {
+ var transform = transformMat4 || this.getWorldTransform();
+ var _mat4$getTranslation = getTranslation(create$2(), transform),
+ tx = _mat4$getTranslation[0],
+ ty = _mat4$getTranslation[1];
+ var _mat4$getScaling = getScaling(create$2(), transform),
+ sx = _mat4$getScaling[0],
+ sy = _mat4$getScaling[1];
+ var rotation = getRotation(create$4(), transform);
+ var _getEuler3 = getEuler(create$2(), rotation),
+ eux = _getEuler3[0],
+ euz = _getEuler3[2];
+ // gimbal lock at 90 degrees
+ return fromRotationTranslationScale$1(eux || euz, tx, ty, sx, sy);
+ }
+ /**
+ * return 3x3 matrix in local space
+ * @deprecated
+ */;
+ _proto.getLocalMatrix = function getLocalMatrix() {
+ return this.getMatrix(this.getLocalTransform());
+ }
+ /**
+ * set 3x3 matrix in world space
+ * @deprecated
+ */;
+ _proto.setMatrix = function setMatrix(mat) {
+ var _decompose = decompose(mat),
+ tx = _decompose[0],
+ ty = _decompose[1],
+ scalingX = _decompose[2],
+ scalingY = _decompose[3],
+ angle = _decompose[4];
+ this.setEulerAngles(angle).setPosition(tx, ty).setLocalScale(scalingX, scalingY);
+ }
+ /**
+ * set 3x3 matrix in local space
+ * @deprecated
+ */;
+ _proto.setLocalMatrix = function setLocalMatrix(mat) {
+ var _decompose2 = decompose(mat),
+ tx = _decompose2[0],
+ ty = _decompose2[1],
+ scalingX = _decompose2[2],
+ scalingY = _decompose2[3],
+ angle = _decompose2[4];
+ this.setLocalEulerAngles(angle).setLocalPosition(tx, ty).setLocalScale(scalingX, scalingY);
+ }
+ /**
+ * Use `visibility: visible` instead.
+ * @deprecated
+ */;
+ _proto.show = function show() {
+ if (runtime.enableCSSParsing) {
+ this.style.visibility = 'visible';
+ } else {
+ this.forEach(function (object) {
+ object.style.visibility = 'visible';
+ });
+ }
+ }
+ /**
+ * Use `visibility: hidden` instead.
+ * @deprecated
+ */;
+ _proto.hide = function hide() {
+ if (runtime.enableCSSParsing) {
+ this.style.visibility = 'hidden';
+ } else {
+ this.forEach(function (object) {
+ object.style.visibility = 'hidden';
+ });
+ }
+ }
+ /**
+ * Use `childElementCount` instead.
+ * @deprecated
+ */;
+ _proto.getCount = function getCount() {
+ return this.childElementCount;
+ }
+ /**
+ * Use `parentElement` instead.
+ * @deprecated
+ */;
+ _proto.getParent = function getParent() {
+ return this.parentElement;
+ }
+ /**
+ * Use `children` instead.
+ * @deprecated
+ */;
+ _proto.getChildren = function getChildren() {
+ return this.children;
+ }
+ /**
+ * Use `firstElementChild` instead.
+ * @deprecated
+ */;
+ _proto.getFirst = function getFirst() {
+ return this.firstElementChild;
+ }
+ /**
+ * Use `lastElementChild` instead.
+ * @deprecated
+ */;
+ _proto.getLast = function getLast() {
+ return this.lastElementChild;
+ }
+ /**
+ * Use `this.children[index]` instead.
+ * @deprecated
+ */;
+ _proto.getChildByIndex = function getChildByIndex(index) {
+ return this.children[index] || null;
+ }
+ /**
+ * Use `appendChild` instead.
+ * @deprecated
+ */;
+ _proto.add = function add(child, index) {
+ return this.appendChild(child, index);
+ }
+ /**
+ * Use `this.style.clipPath` instead.
+ * @deprecated
+ */;
+ _proto.setClip = function setClip(clipPath) {
+ this.style.clipPath = clipPath;
+ };
+ /**
+ * @deprecated
+ */
+ _proto.set = function set(name, value) {
+ // @ts-ignore
+ this.config[name] = value;
+ }
+ /**
+ * @deprecated
+ */;
+ _proto.get = function get(name) {
+ return this.config[name];
+ }
+ /**
+ * Use `setPosition` instead.
+ * @deprecated
+ */;
+ _proto.moveTo = function moveTo(position, y, z) {
+ if (y === void 0) {
+ y = 0;
+ }
+ if (z === void 0) {
+ z = 0;
+ }
+ this.setPosition(position, y, z);
+ return this;
+ }
+ /**
+ * Use `setPosition` instead.
+ * @deprecated
+ */;
+ _proto.move = function move(position, y, z) {
+ if (y === void 0) {
+ y = 0;
+ }
+ if (z === void 0) {
+ z = 0;
+ }
+ this.setPosition(position, y, z);
+ return this;
+ }
+ /**
+ * Use `this.style.zIndex` instead.
+ * @deprecated
+ */;
+ _proto.setZIndex = function setZIndex(zIndex) {
+ this.style.zIndex = zIndex;
+ return this;
+ };
+ _createClass(DisplayObject, [{
+ key: "interactive",
+ get: function get() {
+ return this.isInteractive();
+ },
+ set: function set(b) {
+ this.style.pointerEvents = b ? 'auto' : 'none';
+ }
+ }]);
+ return DisplayObject;
+ }(Element);
+
+ var _excluded = ["style"];
+ var Circle = /*#__PURE__*/function (_DisplayObject) {
+ _inheritsLoose(Circle, _DisplayObject);
+ function Circle(_temp) {
+ var _ref = _temp === void 0 ? {} : _temp,
+ style = _ref.style,
+ rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+ return _DisplayObject.call(this, _extends({
+ type: Shape.CIRCLE,
+ style: runtime.enableCSSParsing ? _extends({
+ cx: '',
+ cy: '',
+ r: ''
+ }, style) : _extends({}, style),
+ initialParsedStyle: {
+ anchor: [0.5, 0.5],
+ transformOrigin: runtime.enableCSSParsing ? null : [PECENTAGE_50, PECENTAGE_50]
+ }
+ }, rest)) || this;
+ }
+ return Circle;
+ }(DisplayObject);
+
+ var _excluded$2 = ["style"];
+ var Ellipse = /*#__PURE__*/function (_DisplayObject) {
+ _inheritsLoose(Ellipse, _DisplayObject);
+ function Ellipse(_temp) {
+ var _ref = _temp === void 0 ? {} : _temp,
+ style = _ref.style,
+ rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
+ return _DisplayObject.call(this, _extends({
+ type: Shape.ELLIPSE,
+ style: runtime.enableCSSParsing ? _extends({
+ cx: '',
+ cy: '',
+ rx: '',
+ ry: ''
+ }, style) : _extends({}, style),
+ initialParsedStyle: {
+ anchor: [0.5, 0.5],
+ transformOrigin: runtime.enableCSSParsing ? null : [PECENTAGE_50, PECENTAGE_50]
+ }
+ }, rest)) || this;
+ }
+ return Ellipse;
+ }(DisplayObject);
+
+ var _excluded$3 = ["style"];
+ /**
+ * its attributes are inherited by its children.
+ * @see https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element/g
+ *
+ * @example
+ *
+
+
+
+ */
+ var Group = /*#__PURE__*/function (_DisplayObject) {
+ _inheritsLoose(Group, _DisplayObject);
+ function Group(_temp) {
+ var _ref = _temp === void 0 ? {} : _temp,
+ style = _ref.style,
+ rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
+ return _DisplayObject.call(this, _extends({
+ type: Shape.GROUP,
+ style: runtime.enableCSSParsing ? _extends({
+ x: '',
+ y: '',
+ width: '',
+ height: ''
+ }, style) : _extends({}, style)
+ }, rest)) || this;
+ }
+ return Group;
+ }(DisplayObject);
+
+ var _excluded$4 = ["style"];
+ /**
+ * HTML container
+ * @see https://github.com/pmndrs/drei#html
+ */
+ var HTML = /*#__PURE__*/function (_DisplayObject) {
+ _inheritsLoose(HTML, _DisplayObject);
+ function HTML(_temp) {
+ var _this;
+ var _ref = _temp === void 0 ? {} : _temp,
+ style = _ref.style,
+ rest = _objectWithoutPropertiesLoose(_ref, _excluded$4);
+ _this = _DisplayObject.call(this, _extends({
+ type: Shape.HTML,
+ style: runtime.enableCSSParsing ? _extends({
+ x: '',
+ y: '',
+ width: 'auto',
+ height: 'auto',
+ innerHTML: ''
+ }, style) : _extends({}, style)
+ }, rest)) || this;
+ _this.cullable.enable = false;
+ return _this;
+ }
+ /**
+ * return wrapper HTMLElement
+ * * in g-webgl/canvas
+ * * in g-svg
+ */
+ var _proto = HTML.prototype;
+ _proto.getDomElement = function getDomElement() {
+ return this.parsedStyle.$el;
+ }
+ /**
+ * override with $el.getBoundingClientRect
+ * @see https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getBoundingClientRect
+ */;
+ _proto.getBoundingClientRect = function getBoundingClientRect() {
+ return this.parsedStyle.$el.getBoundingClientRect();
+ };
+ _proto.getClientRects = function getClientRects() {
+ return [this.getBoundingClientRect()];
+ };
+ _proto.getBounds = function getBounds() {
+ var _this$ownerDocument, _this$ownerDocument$d;
+ var clientRect = this.getBoundingClientRect();
+ // calc context's offset
+ // @ts-ignore
+ var canvasRect = (_this$ownerDocument = this.ownerDocument) === null || _this$ownerDocument === void 0 ? void 0 : (_this$ownerDocument$d = _this$ownerDocument.defaultView) === null || _this$ownerDocument$d === void 0 ? void 0 : _this$ownerDocument$d.getContextService().getBoundingClientRect();
+ if (canvasRect) {
+ var minX = clientRect.left - canvasRect.left;
+ var minY = clientRect.top - canvasRect.top;
+ var aabb = new AABB();
+ // aabb.setMinMax(
+ // vec3.fromValues(minX, minY, 0),
+ // vec3.fromValues(minX + clientRect.width, minY + clientRect.height, 0),
+ // );
+ aabb.setMinMax([minX, minY, 0], [minX + clientRect.width, minY + clientRect.height, 0]);
+ return aabb;
+ }
+ return null;
+ };
+ _proto.getLocalBounds = function getLocalBounds() {
+ if (this.parentNode) {
+ var parentInvert = invert(create$1(), this.parentNode.getWorldTransform());
+ var bounds = this.getBounds();
+ if (!AABB.isEmpty(bounds)) {
+ var localBounds = new AABB();
+ localBounds.setFromTransformedAABB(bounds, parentInvert);
+ return localBounds;
+ }
+ }
+ return this.getBounds();
+ };
+ return HTML;
+ }(DisplayObject);
+
+ var _excluded$5 = ["style"];
+ var Image = /*#__PURE__*/function (_DisplayObject) {
+ _inheritsLoose(Image, _DisplayObject);
+ function Image(_temp) {
+ var _ref = _temp === void 0 ? {} : _temp,
+ style = _ref.style,
+ rest = _objectWithoutPropertiesLoose(_ref, _excluded$5);
+ return _DisplayObject.call(this, _extends({
+ type: Shape.IMAGE,
+ style: runtime.enableCSSParsing ? _extends({
+ x: '',
+ y: '',
+ img: '',
+ width: '',
+ height: ''
+ }, style) : _extends({}, style)
+ }, rest)) || this;
+ }
+ return Image;
+ }(DisplayObject);
+
+ var _excluded$6 = ["style"];
+ /**
+ * Create a line connecting two points.
+ * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Element/line
+ *
+ * Also support for using marker.
+ */
+ var Line = /*#__PURE__*/function (_DisplayObject) {
+ _inheritsLoose(Line, _DisplayObject);
+ function Line(_temp) {
+ var _this;
+ var _ref = _temp === void 0 ? {} : _temp,
+ style = _ref.style,
+ rest = _objectWithoutPropertiesLoose(_ref, _excluded$6);
+ _this = _DisplayObject.call(this, _extends({
+ type: Shape.LINE,
+ style: _extends({
+ x1: 0,
+ y1: 0,
+ x2: 0,
+ y2: 0,
+ z1: 0,
+ z2: 0,
+ isBillboard: false
+ }, style)
+ }, rest)) || this;
+ _this.markerStartAngle = 0;
+ _this.markerEndAngle = 0;
+ var _this$parsedStyle = _this.parsedStyle,
+ markerStart = _this$parsedStyle.markerStart,
+ markerEnd = _this$parsedStyle.markerEnd;
+ if (markerStart && isDisplayObject(markerStart)) {
+ _this.markerStartAngle = markerStart.getLocalEulerAngles();
+ _this.appendChild(markerStart);
+ }
+ if (markerEnd && isDisplayObject(markerEnd)) {
+ _this.markerEndAngle = markerEnd.getLocalEulerAngles();
+ _this.appendChild(markerEnd);
+ }
+ _this.transformMarker(true);
+ _this.transformMarker(false);
+ return _this;
+ }
+ var _proto = Line.prototype;
+ _proto.attributeChangedCallback = function attributeChangedCallback(attrName, oldValue, newValue, prevParsedValue, newParsedValue) {
+ if (attrName === 'x1' || attrName === 'y1' || attrName === 'x2' || attrName === 'y2' || attrName === 'markerStartOffset' || attrName === 'markerEndOffset') {
+ this.transformMarker(true);
+ this.transformMarker(false);
+ } else if (attrName === 'markerStart') {
+ if (prevParsedValue && isDisplayObject(prevParsedValue)) {
+ this.markerStartAngle = 0;
+ prevParsedValue.remove();
+ }
+ // CSSKeyword 'unset'
+ if (newParsedValue && isDisplayObject(newParsedValue)) {
+ this.markerStartAngle = newParsedValue.getLocalEulerAngles();
+ this.appendChild(newParsedValue);
+ this.transformMarker(true);
+ }
+ } else if (attrName === 'markerEnd') {
+ if (prevParsedValue && isDisplayObject(prevParsedValue)) {
+ this.markerEndAngle = 0;
+ prevParsedValue.remove();
+ }
+ if (newParsedValue && isDisplayObject(newParsedValue)) {
+ this.markerEndAngle = newParsedValue.getLocalEulerAngles();
+ this.appendChild(newParsedValue);
+ this.transformMarker(false);
+ }
+ }
+ };
+ _proto.transformMarker = function transformMarker(isStart) {
+ var _this$parsedStyle2 = this.parsedStyle,
+ markerStart = _this$parsedStyle2.markerStart,
+ markerEnd = _this$parsedStyle2.markerEnd,
+ markerStartOffset = _this$parsedStyle2.markerStartOffset,
+ markerEndOffset = _this$parsedStyle2.markerEndOffset,
+ x1 = _this$parsedStyle2.x1,
+ x2 = _this$parsedStyle2.x2,
+ y1 = _this$parsedStyle2.y1,
+ y2 = _this$parsedStyle2.y2,
+ defX = _this$parsedStyle2.defX,
+ defY = _this$parsedStyle2.defY;
+ var marker = isStart ? markerStart : markerEnd;
+ if (!marker || !isDisplayObject(marker)) {
+ return;
+ }
+ var rad = 0;
+ var x;
+ var y;
+ var ox;
+ var oy;
+ var offset;
+ var originalAngle;
+ if (isStart) {
+ ox = x1 - defX;
+ oy = y1 - defY;
+ x = x2 - x1;
+ y = y2 - y1;
+ offset = markerStartOffset || 0;
+ originalAngle = this.markerStartAngle;
+ } else {
+ ox = x2 - defX;
+ oy = y2 - defY;
+ x = x1 - x2;
+ y = y1 - y2;
+ offset = markerEndOffset || 0;
+ originalAngle = this.markerEndAngle;
+ }
+ rad = Math.atan2(y, x);
+ // account for markerOffset
+ marker.setLocalEulerAngles(rad * 180 / Math.PI + originalAngle);
+ marker.setLocalPosition(ox + Math.cos(rad) * offset, oy + Math.sin(rad) * offset);
+ };
+ _proto.getPoint = function getPoint(ratio, inWorldSpace) {
+ if (inWorldSpace === void 0) {
+ inWorldSpace = false;
+ }
+ // TODO: account for z1/z2 in 3D line
+ var _this$parsedStyle3 = this.parsedStyle,
+ x1 = _this$parsedStyle3.x1,
+ y1 = _this$parsedStyle3.y1,
+ x2 = _this$parsedStyle3.x2,
+ y2 = _this$parsedStyle3.y2,
+ defX = _this$parsedStyle3.defX,
+ defY = _this$parsedStyle3.defY;
+ var _LineUtil$pointAt = line.pointAt(x1, y1, x2, y2, ratio),
+ x = _LineUtil$pointAt.x,
+ y = _LineUtil$pointAt.y;
+ var transformed = transformMat4(create$2(), fromValues$2(x - defX, y - defY, 0), inWorldSpace ? this.getWorldTransform() : this.getLocalTransform());
+ // apply local transformation
+ return new Point(transformed[0], transformed[1]);
+ };
+ _proto.getPointAtLength = function getPointAtLength(distance, inWorldSpace) {
+ if (inWorldSpace === void 0) {
+ inWorldSpace = false;
+ }
+ return this.getPoint(distance / this.getTotalLength(), inWorldSpace);
+ };
+ _proto.getTotalLength = function getTotalLength() {
+ // TODO: account for z1/z2 in 3D line
+ var _this$parsedStyle4 = this.parsedStyle,
+ x1 = _this$parsedStyle4.x1,
+ y1 = _this$parsedStyle4.y1,
+ x2 = _this$parsedStyle4.x2,
+ y2 = _this$parsedStyle4.y2;
+ return line.length(x1, y1, x2, y2);
+ };
+ return Line;
+ }(DisplayObject);
+
+ var _excluded$7 = ["style"];
+ var EMPTY_PARSED_PATH = {
+ absolutePath: [],
+ hasArc: false,
+ segments: [],
+ polygons: [],
+ polylines: [],
+ curve: null,
+ totalLength: 0,
+ rect: new Rectangle(0, 0, 0, 0)
+ };
+ var Path = /*#__PURE__*/function (_DisplayObject) {
+ _inheritsLoose(Path, _DisplayObject);
+ /**
+ * markers placed at the mid
+ */
+
+ function Path(_temp) {
+ var _this;
+ var _ref = _temp === void 0 ? {} : _temp,
+ style = _ref.style,
+ rest = _objectWithoutPropertiesLoose(_ref, _excluded$7);
+ _this = _DisplayObject.call(this, _extends({
+ type: Shape.PATH,
+ style: runtime.enableCSSParsing ? _extends({
+ path: '',
+ miterLimit: ''
+ }, style) : _extends({}, style),
+ initialParsedStyle: runtime.enableCSSParsing ? null : {
+ miterLimit: 4,
+ path: _extends({}, EMPTY_PARSED_PATH)
+ }
+ }, rest)) || this;
+ _this.markerStartAngle = 0;
+ _this.markerEndAngle = 0;
+ _this.markerMidList = [];
+ var _this$parsedStyle = _this.parsedStyle,
+ markerStart = _this$parsedStyle.markerStart,
+ markerEnd = _this$parsedStyle.markerEnd,
+ markerMid = _this$parsedStyle.markerMid;
+ if (markerStart && isDisplayObject(markerStart)) {
+ _this.markerStartAngle = markerStart.getLocalEulerAngles();
+ _this.appendChild(markerStart);
+ }
+ if (markerMid && isDisplayObject(markerMid)) {
+ _this.placeMarkerMid(markerMid);
+ }
+ if (markerEnd && isDisplayObject(markerEnd)) {
+ _this.markerEndAngle = markerEnd.getLocalEulerAngles();
+ _this.appendChild(markerEnd);
+ }
+ _this.transformMarker(true);
+ _this.transformMarker(false);
+ return _this;
+ }
+ var _proto = Path.prototype;
+ _proto.attributeChangedCallback = function attributeChangedCallback(attrName, oldValue, newValue, prevParsedValue, newParsedValue) {
+ if (attrName === 'path') {
+ // recalc markers
+ this.transformMarker(true);
+ this.transformMarker(false);
+ this.placeMarkerMid(this.parsedStyle.markerMid);
+ } else if (attrName === 'markerStartOffset' || attrName === 'markerEndOffset') {
+ this.transformMarker(true);
+ this.transformMarker(false);
+ } else if (attrName === 'markerStart') {
+ if (prevParsedValue && isDisplayObject(prevParsedValue)) {
+ this.markerStartAngle = 0;
+ prevParsedValue.remove();
+ }
+ // CSSKeyword 'unset'
+ if (newParsedValue && isDisplayObject(newParsedValue)) {
+ this.markerStartAngle = newParsedValue.getLocalEulerAngles();
+ this.appendChild(newParsedValue);
+ this.transformMarker(true);
+ }
+ } else if (attrName === 'markerEnd') {
+ if (prevParsedValue && isDisplayObject(prevParsedValue)) {
+ this.markerEndAngle = 0;
+ prevParsedValue.remove();
+ }
+ if (newParsedValue && isDisplayObject(newParsedValue)) {
+ this.markerEndAngle = newParsedValue.getLocalEulerAngles();
+ this.appendChild(newParsedValue);
+ this.transformMarker(false);
+ }
+ } else if (attrName === 'markerMid') {
+ this.placeMarkerMid(newParsedValue);
+ }
+ };
+ _proto.transformMarker = function transformMarker(isStart) {
+ var _this$parsedStyle2 = this.parsedStyle,
+ markerStart = _this$parsedStyle2.markerStart,
+ markerEnd = _this$parsedStyle2.markerEnd,
+ markerStartOffset = _this$parsedStyle2.markerStartOffset,
+ markerEndOffset = _this$parsedStyle2.markerEndOffset,
+ defX = _this$parsedStyle2.defX,
+ defY = _this$parsedStyle2.defY;
+ var marker = isStart ? markerStart : markerEnd;
+ if (!marker || !isDisplayObject(marker)) {
+ return;
+ }
+ var rad = 0;
+ var x;
+ var y;
+ var ox;
+ var oy;
+ var offset;
+ var originalAngle;
+ if (isStart) {
+ var _this$getStartTangent = this.getStartTangent(),
+ p1 = _this$getStartTangent[0],
+ p2 = _this$getStartTangent[1];
+ ox = p2[0] - defX;
+ oy = p2[1] - defY;
+ x = p1[0] - p2[0];
+ y = p1[1] - p2[1];
+ offset = markerStartOffset || 0;
+ originalAngle = this.markerStartAngle;
+ } else {
+ var _this$getEndTangent = this.getEndTangent(),
+ _p = _this$getEndTangent[0],
+ _p2 = _this$getEndTangent[1];
+ ox = _p2[0] - defX;
+ oy = _p2[1] - defY;
+ x = _p[0] - _p2[0];
+ y = _p[1] - _p2[1];
+ offset = markerEndOffset || 0;
+ originalAngle = this.markerEndAngle;
+ }
+ rad = Math.atan2(y, x);
+ // account for markerOffset
+ marker.setLocalEulerAngles(rad * 180 / Math.PI + originalAngle);
+ marker.setLocalPosition(ox + Math.cos(rad) * offset, oy + Math.sin(rad) * offset);
+ };
+ _proto.placeMarkerMid = function placeMarkerMid(marker) {
+ var _this$parsedStyle3 = this.parsedStyle,
+ segments = _this$parsedStyle3.path.segments,
+ defX = _this$parsedStyle3.defX,
+ defY = _this$parsedStyle3.defY;
+ // clear all existed markers
+ this.markerMidList.forEach(function (marker) {
+ marker.remove();
+ });
+ if (marker && isDisplayObject(marker)) {
+ for (var i = 1; i < segments.length - 1; i++) {
+ var _segments$i$currentPo = segments[i].currentPoint,
+ ox = _segments$i$currentPo[0],
+ oy = _segments$i$currentPo[1];
+ var cloned = i === 1 ? marker : marker.cloneNode(true);
+ this.markerMidList.push(cloned);
+ this.appendChild(cloned);
+ cloned.setLocalPosition(ox - defX, oy - defY);
+ // TODO: orient of marker
+ }
+ }
+ }
+ /**
+ * Returns the total length of the path.
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/SVGGeometryElement/getTotalLength
+ */;
+ _proto.getTotalLength = function getTotalLength() {
+ return getOrCalculatePathTotalLength(this);
+ }
+ /**
+ * Returns the point at a given distance along the path.
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/SVGGeometryElement/getPointAtLength
+ */;
+ _proto.getPointAtLength = function getPointAtLength$1(distance, inWorldSpace) {
+ if (inWorldSpace === void 0) {
+ inWorldSpace = false;
+ }
+ var _this$parsedStyle4 = this.parsedStyle,
+ defX = _this$parsedStyle4.defX,
+ defY = _this$parsedStyle4.defY,
+ absolutePath = _this$parsedStyle4.path.absolutePath;
+ var _getPointAtLength2 = getPointAtLength(absolutePath, distance),
+ x = _getPointAtLength2.x,
+ y = _getPointAtLength2.y;
+ var transformed = transformMat4(create$2(), fromValues$2(x - defX, y - defY, 0), inWorldSpace ? this.getWorldTransform() : this.getLocalTransform());
+ // apply local transformation
+ return new Point(transformed[0], transformed[1]);
+ }
+ /**
+ * Returns the point at a given ratio of the total length in path.
+ */;
+ _proto.getPoint = function getPoint(ratio, inWorldSpace) {
+ if (inWorldSpace === void 0) {
+ inWorldSpace = false;
+ }
+ return this.getPointAtLength(ratio * getOrCalculatePathTotalLength(this), inWorldSpace);
+ }
+ /**
+ * Get start tangent vector
+ */;
+ _proto.getStartTangent = function getStartTangent() {
+ var segments = this.parsedStyle.path.segments;
+ var result = [];
+ if (segments.length > 1) {
+ var startPoint = segments[0].currentPoint;
+ var endPoint = segments[1].currentPoint;
+ var tangent = segments[1].startTangent;
+ result = [];
+ if (tangent) {
+ result.push([startPoint[0] - tangent[0], startPoint[1] - tangent[1]]);
+ result.push([startPoint[0], startPoint[1]]);
+ } else {
+ result.push([endPoint[0], endPoint[1]]);
+ result.push([startPoint[0], startPoint[1]]);
+ }
+ }
+ return result;
+ }
+ /**
+ * Get end tangent vector
+ */;
+ _proto.getEndTangent = function getEndTangent() {
+ var segments = this.parsedStyle.path.segments;
+ var length = segments.length;
+ var result = [];
+ if (length > 1) {
+ var startPoint = segments[length - 2].currentPoint;
+ var endPoint = segments[length - 1].currentPoint;
+ var tangent = segments[length - 1].endTangent;
+ result = [];
+ if (tangent) {
+ result.push([endPoint[0] - tangent[0], endPoint[1] - tangent[1]]);
+ result.push([endPoint[0], endPoint[1]]);
+ } else {
+ result.push([startPoint[0], startPoint[1]]);
+ result.push([endPoint[0], endPoint[1]]);
+ }
+ }
+ return result;
+ };
+ return Path;
+ }(DisplayObject);
+
+ var _excluded$8 = ["style"];
+ var Polygon = /*#__PURE__*/function (_DisplayObject) {
+ _inheritsLoose(Polygon, _DisplayObject);
+ /**
+ * markers placed at the mid
+ */
+
+ function Polygon(_temp) {
+ var _this;
+ var _ref = _temp === void 0 ? {} : _temp,
+ style = _ref.style,
+ rest = _objectWithoutPropertiesLoose(_ref, _excluded$8);
+ _this = _DisplayObject.call(this, _extends({
+ type: Shape.POLYGON,
+ style: runtime.enableCSSParsing ? _extends({
+ points: '',
+ miterLimit: '',
+ isClosed: true
+ }, style) : _extends({}, style),
+ initialParsedStyle: runtime.enableCSSParsing ? null : {
+ points: {
+ points: [],
+ totalLength: 0,
+ segments: []
+ },
+ miterLimit: 4,
+ isClosed: true
+ }
+ }, rest)) || this;
+ _this.markerStartAngle = 0;
+ _this.markerEndAngle = 0;
+ _this.markerMidList = [];
+ var _this$parsedStyle = _this.parsedStyle,
+ markerStart = _this$parsedStyle.markerStart,
+ markerEnd = _this$parsedStyle.markerEnd,
+ markerMid = _this$parsedStyle.markerMid;
+ if (markerStart && isDisplayObject(markerStart)) {
+ _this.markerStartAngle = markerStart.getLocalEulerAngles();
+ _this.appendChild(markerStart);
+ }
+ if (markerMid && isDisplayObject(markerMid)) {
+ _this.placeMarkerMid(markerMid);
+ }
+ if (markerEnd && isDisplayObject(markerEnd)) {
+ _this.markerEndAngle = markerEnd.getLocalEulerAngles();
+ _this.appendChild(markerEnd);
+ }
+ _this.transformMarker(true);
+ _this.transformMarker(false);
+ return _this;
+ }
+ var _proto = Polygon.prototype;
+ _proto.attributeChangedCallback = function attributeChangedCallback(attrName, oldValue, newValue, prevParsedValue, newParsedValue) {
+ if (attrName === 'points') {
+ // recalc markers
+ this.transformMarker(true);
+ this.transformMarker(false);
+ this.placeMarkerMid(this.parsedStyle.markerMid);
+ } else if (attrName === 'markerStartOffset' || attrName === 'markerEndOffset') {
+ this.transformMarker(true);
+ this.transformMarker(false);
+ } else if (attrName === 'markerStart') {
+ if (prevParsedValue && isDisplayObject(prevParsedValue)) {
+ this.markerStartAngle = 0;
+ prevParsedValue.remove();
+ }
+ // CSSKeyword 'unset'
+ if (newParsedValue && isDisplayObject(newParsedValue)) {
+ this.markerStartAngle = newParsedValue.getLocalEulerAngles();
+ this.appendChild(newParsedValue);
+ this.transformMarker(true);
+ }
+ } else if (attrName === 'markerEnd') {
+ if (prevParsedValue && isDisplayObject(prevParsedValue)) {
+ this.markerEndAngle = 0;
+ prevParsedValue.remove();
+ }
+ if (newParsedValue && isDisplayObject(newParsedValue)) {
+ this.markerEndAngle = newParsedValue.getLocalEulerAngles();
+ this.appendChild(newParsedValue);
+ this.transformMarker(false);
+ }
+ } else if (attrName === 'markerMid') {
+ this.placeMarkerMid(newParsedValue);
+ }
+ };
+ _proto.transformMarker = function transformMarker(isStart) {
+ var _this$parsedStyle2 = this.parsedStyle,
+ markerStart = _this$parsedStyle2.markerStart,
+ markerEnd = _this$parsedStyle2.markerEnd,
+ markerStartOffset = _this$parsedStyle2.markerStartOffset,
+ markerEndOffset = _this$parsedStyle2.markerEndOffset,
+ points = _this$parsedStyle2.points.points,
+ defX = _this$parsedStyle2.defX,
+ defY = _this$parsedStyle2.defY;
+ var marker = isStart ? markerStart : markerEnd;
+ if (!marker || !isDisplayObject(marker)) {
+ return;
+ }
+ var rad = 0;
+ var x;
+ var y;
+ var ox;
+ var oy;
+ var offset;
+ var originalAngle;
+ ox = points[0][0] - defX;
+ oy = points[0][1] - defY;
+ if (isStart) {
+ x = points[1][0] - points[0][0];
+ y = points[1][1] - points[0][1];
+ offset = markerStartOffset || 0;
+ originalAngle = this.markerStartAngle;
+ } else {
+ var length = points.length;
+ if (!this.parsedStyle.isClosed) {
+ ox = points[length - 1][0] - defX;
+ oy = points[length - 1][1] - defY;
+ x = points[length - 2][0] - points[length - 1][0];
+ y = points[length - 2][1] - points[length - 1][1];
+ } else {
+ x = points[length - 1][0] - points[0][0];
+ y = points[length - 1][1] - points[0][1];
+ }
+ offset = markerEndOffset || 0;
+ originalAngle = this.markerEndAngle;
+ }
+ rad = Math.atan2(y, x);
+ // account for markerOffset
+ marker.setLocalEulerAngles(rad * 180 / Math.PI + originalAngle);
+ marker.setLocalPosition(ox + Math.cos(rad) * offset, oy + Math.sin(rad) * offset);
+ };
+ _proto.placeMarkerMid = function placeMarkerMid(marker) {
+ var _this$parsedStyle3 = this.parsedStyle,
+ points = _this$parsedStyle3.points.points,
+ defX = _this$parsedStyle3.defX,
+ defY = _this$parsedStyle3.defY;
+ // clear all existed markers
+ this.markerMidList.forEach(function (marker) {
+ marker.remove();
+ });
+ this.markerMidList = [];
+ if (marker && isDisplayObject(marker)) {
+ for (var i = 1; i < (this.parsedStyle.isClosed ? points.length : points.length - 1); i++) {
+ var ox = points[i][0] - defX;
+ var oy = points[i][1] - defY;
+ var cloned = i === 1 ? marker : marker.cloneNode(true);
+ this.markerMidList.push(cloned);
+ this.appendChild(cloned);
+ cloned.setLocalPosition(ox, oy);
+ // TODO: orient of marker
+ }
+ }
+ };
+ return Polygon;
+ }(DisplayObject);
+
+ var _excluded$9 = ["style"];
+ /**
+ * Polyline inherits the marker-related capabilities of Polygon.
+ */
+ var Polyline = /*#__PURE__*/function (_Polygon) {
+ _inheritsLoose(Polyline, _Polygon);
+ function Polyline(_temp) {
+ var _ref = _temp === void 0 ? {} : _temp,
+ style = _ref.style,
+ rest = _objectWithoutPropertiesLoose(_ref, _excluded$9);
+ return _Polygon.call(this, _extends({
+ type: Shape.POLYLINE,
+ style: runtime.enableCSSParsing ? _extends({
+ points: '',
+ miterLimit: '',
+ isClosed: false
+ }, style) : _extends({}, style),
+ initialParsedStyle: runtime.enableCSSParsing ? null : {
+ points: {
+ points: [],
+ totalLength: 0,
+ segments: []
+ },
+ miterLimit: 4,
+ isClosed: false
+ }
+ }, rest)) || this;
+ }
+ var _proto = Polyline.prototype;
+ _proto.getTotalLength = function getTotalLength() {
+ return this.parsedStyle.points.totalLength;
+ };
+ _proto.getPointAtLength = function getPointAtLength(distance, inWorldSpace) {
+ if (inWorldSpace === void 0) {
+ inWorldSpace = false;
+ }
+ return this.getPoint(distance / this.getTotalLength(), inWorldSpace);
+ };
+ _proto.getPoint = function getPoint(ratio, inWorldSpace) {
+ if (inWorldSpace === void 0) {
+ inWorldSpace = false;
+ }
+ var _this$parsedStyle = this.parsedStyle,
+ defX = _this$parsedStyle.defX,
+ defY = _this$parsedStyle.defY,
+ _this$parsedStyle$poi = _this$parsedStyle.points,
+ points = _this$parsedStyle$poi.points,
+ segments = _this$parsedStyle$poi.segments;
+ var subt = 0;
+ var index = 0;
+ segments.forEach(function (v, i) {
+ if (ratio >= v[0] && ratio <= v[1]) {
+ subt = (ratio - v[0]) / (v[1] - v[0]);
+ index = i;
+ }
+ });
+ var _LineUtil$pointAt = line.pointAt(points[index][0], points[index][1], points[index + 1][0], points[index + 1][1], subt),
+ x = _LineUtil$pointAt.x,
+ y = _LineUtil$pointAt.y;
+ var transformed = transformMat4(create$2(), fromValues$2(x - defX, y - defY, 0), inWorldSpace ? this.getWorldTransform() : this.getLocalTransform());
+ // apply local transformation
+ return new Point(transformed[0], transformed[1]);
+ };
+ _proto.getStartTangent = function getStartTangent() {
+ var points = this.parsedStyle.points.points;
+ var result = [];
+ result.push([points[1][0], points[1][1]]);
+ result.push([points[0][0], points[0][1]]);
+ return result;
+ };
+ _proto.getEndTangent = function getEndTangent() {
+ var points = this.parsedStyle.points.points;
+ var l = points.length - 1;
+ var result = [];
+ result.push([points[l - 1][0], points[l - 1][1]]);
+ result.push([points[l][0], points[l][1]]);
+ return result;
+ };
+ return Polyline;
+ }(Polygon);
+
+ var _excluded$a = ["style"];
+ var Rect = /*#__PURE__*/function (_DisplayObject) {
+ _inheritsLoose(Rect, _DisplayObject);
+ function Rect(_temp) {
+ var _ref = _temp === void 0 ? {} : _temp,
+ style = _ref.style,
+ rest = _objectWithoutPropertiesLoose(_ref, _excluded$a);
+ return _DisplayObject.call(this, _extends({
+ type: Shape.RECT,
+ style: runtime.enableCSSParsing ? _extends({
+ x: '',
+ y: '',
+ width: '',
+ height: '',
+ radius: ''
+ }, style) : _extends({}, style)
+ }, rest)) || this;
+ }
+ return Rect;
+ }(DisplayObject);
+
+ var _excluded$b = ["style"];
+ /**
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/SVGTextElement
+ */
+ var Text = /*#__PURE__*/function (_DisplayObject) {
+ _inheritsLoose(Text, _DisplayObject);
+ /**
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/SVGTextContentElement#constants
+ */
+ // LENGTHADJUST_SPACING: number = 1;
+ // LENGTHADJUST_SPACINGANDGLYPHS: number = 2;
+ // LENGTHADJUST_UNKNOWN: number = 0;
+ function Text(_temp) {
+ var _ref = _temp === void 0 ? {} : _temp,
+ style = _ref.style,
+ rest = _objectWithoutPropertiesLoose(_ref, _excluded$b);
+ return _DisplayObject.call(this, _extends({
+ type: Shape.TEXT,
+ style: runtime.enableCSSParsing ? _extends({
+ x: '',
+ y: '',
+ text: '',
+ fontSize: '',
+ fontFamily: '',
+ fontStyle: '',
+ fontWeight: '',
+ fontVariant: '',
+ textAlign: '',
+ textBaseline: '',
+ textTransform: '',
+ fill: 'black',
+ letterSpacing: '',
+ lineHeight: '',
+ miterLimit: '',
+ // whiteSpace: 'pre',
+ wordWrap: false,
+ wordWrapWidth: 0,
+ leading: 0,
+ dx: '',
+ dy: ''
+ }, style) : _extends({
+ fill: 'black'
+ }, style),
+ initialParsedStyle: runtime.enableCSSParsing ? {} : {
+ x: 0,
+ y: 0,
+ fontSize: 16,
+ fontFamily: 'sans-serif',
+ fontStyle: 'normal',
+ fontWeight: 'normal',
+ fontVariant: 'normal',
+ lineHeight: 0,
+ letterSpacing: 0,
+ textBaseline: 'alphabetic',
+ textAlign: 'start',
+ wordWrap: false,
+ wordWrapWidth: 0,
+ leading: 0,
+ dx: 0,
+ dy: 0
+ }
+ }, rest)) || this;
+ }
+ // lengthAdjust: SVGAnimatedEnumeration;
+ // textLength: SVGAnimatedLength;
+ // getCharNumAtPosition(point?: DOMPointInit): number {
+ // throw new Error('Method not implemented.');
+ // }
+ /**
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/SVGTextContentElement
+ */
+ var _proto = Text.prototype;
+ _proto.getComputedTextLength = function getComputedTextLength() {
+ var _this$parsedStyle$met;
+ return ((_this$parsedStyle$met = this.parsedStyle.metrics) === null || _this$parsedStyle$met === void 0 ? void 0 : _this$parsedStyle$met.maxLineWidth) || 0;
+ }
+ // getEndPositionOfChar(charnum: number): DOMPoint {
+ // throw new Error('Method not implemented.');
+ // }
+ // getExtentOfChar(charnum: number): DOMRect {
+ // throw new Error('Method not implemented.');
+ // }
+ // getNumberOfChars(): number {
+ // throw new Error('Method not implemented.');
+ // }
+ // getRotationOfChar(charnum: number): number {
+ // throw new Error('Method not implemented.');
+ // }
+ // getStartPositionOfChar(charnum: number): DOMPoint {
+ // throw new Error('Method not implemented.');
+ // }
+ // getSubStringLength(charnum: number, nchars: number): number {
+ // throw new Error('Method not implemented.');
+ // }
+ // selectSubString(charnum: number, nchars: number): void {
+ // throw new Error('Method not implemented.');
+ // }
+ ;
+ _proto.getLineBoundingRects = function getLineBoundingRects() {
+ var _this$parsedStyle$met2;
+ return ((_this$parsedStyle$met2 = this.parsedStyle.metrics) === null || _this$parsedStyle$met2 === void 0 ? void 0 : _this$parsedStyle$met2.lineMetrics) || [];
+ };
+ _proto.isOverflowing = function isOverflowing() {
+ return !!this.parsedStyle.isOverflowing;
+ };
+ return Text;
+ }(DisplayObject);
+
+ /**
+ * Blink used them in code generation(css_properties.json5)
+ */
+ var BUILT_IN_PROPERTIES = [{
+ /**
+ * used in CSS Layout API
+ * eg. `display: 'flex'`
+ */
+ n: 'display',
+ k: ['none']
+ }, {
+ /**
+ * range [0.0, 1.0]
+ * @see https://developer.mozilla.org/en-US/docs/Web/CSS/opacity
+ */
+ n: 'opacity',
+ int: true,
+ inh: true,
+ d: '1',
+ syntax: PropertySyntax.OPACITY_VALUE
+ }, {
+ /**
+ * inheritable, range [0.0, 1.0]
+ * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill-opacity
+ * @see https://svgwg.org/svg2-draft/painting.html#FillOpacity
+ */
+ n: 'fillOpacity',
+ int: true,
+ inh: true,
+ d: '1',
+ syntax: PropertySyntax.OPACITY_VALUE
+ }, {
+ /**
+ * inheritable, range [0.0, 1.0]
+ * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-opacity
+ * @see https://svgwg.org/svg2-draft/painting.html#StrokeOpacity
+ */
+ n: 'strokeOpacity',
+ int: true,
+ inh: true,
+ d: '1',
+ syntax: PropertySyntax.OPACITY_VALUE
+ }, {
+ /**
+ * background-color is not inheritable
+ * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Fills_and_Strokes
+ */
+ n: 'fill',
+ int: true,
+ k: ['none'],
+ d: 'none',
+ syntax: PropertySyntax.PAINT
+ }, {
+ n: 'fillRule',
+ k: ['nonzero', 'evenodd'],
+ d: 'nonzero'
+ },
+ /**
+ * default to none
+ * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke#usage_notes
+ */
+ {
+ n: 'stroke',
+ int: true,
+ k: ['none'],
+ d: 'none',
+ syntax: PropertySyntax.PAINT,
+ /**
+ * Stroke 'none' won't affect geometry but others will.
+ */
+ l: true
+ }, {
+ n: 'shadowType',
+ k: ['inner', 'outer', 'both'],
+ d: 'outer',
+ l: true
+ }, {
+ n: 'shadowColor',
+ int: true,
+ syntax: PropertySyntax.COLOR
+ }, {
+ n: 'shadowOffsetX',
+ int: true,
+ l: true,
+ d: '0',
+ syntax: PropertySyntax.LENGTH_PERCENTAGE
+ }, {
+ n: 'shadowOffsetY',
+ int: true,
+ l: true,
+ d: '0',
+ syntax: PropertySyntax.LENGTH_PERCENTAGE
+ }, {
+ n: 'shadowBlur',
+ int: true,
+ l: true,
+ d: '0',
+ syntax: PropertySyntax.SHADOW_BLUR
+ }, {
+ /**
+ * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-width
+ */
+ n: 'lineWidth',
+ int: true,
+ inh: true,
+ d: '1',
+ l: true,
+ a: ['strokeWidth'],
+ syntax: PropertySyntax.LENGTH_PERCENTAGE
+ }, {
+ n: 'increasedLineWidthForHitTesting',
+ inh: true,
+ d: '0',
+ l: true,
+ syntax: PropertySyntax.LENGTH_PERCENTAGE
+ }, {
+ n: 'lineJoin',
+ inh: true,
+ l: true,
+ a: ['strokeLinejoin'],
+ k: ['miter', 'bevel', 'round'],
+ d: 'miter'
+ }, {
+ n: 'lineCap',
+ inh: true,
+ l: true,
+ a: ['strokeLinecap'],
+ k: ['butt', 'round', 'square'],
+ d: 'butt'
+ }, {
+ n: 'lineDash',
+ int: true,
+ inh: true,
+ k: ['none'],
+ a: ['strokeDasharray'],
+ syntax: PropertySyntax.LENGTH_PERCENTAGE_12
+ }, {
+ n: 'lineDashOffset',
+ int: true,
+ inh: true,
+ d: '0',
+ a: ['strokeDashoffset'],
+ syntax: PropertySyntax.LENGTH_PERCENTAGE
+ }, {
+ n: 'offsetPath',
+ syntax: PropertySyntax.DEFINED_PATH
+ }, {
+ n: 'offsetDistance',
+ int: true,
+ syntax: PropertySyntax.OFFSET_DISTANCE
+ }, {
+ n: 'dx',
+ int: true,
+ l: true,
+ d: '0',
+ syntax: PropertySyntax.LENGTH_PERCENTAGE
+ }, {
+ n: 'dy',
+ int: true,
+ l: true,
+ d: '0',
+ syntax: PropertySyntax.LENGTH_PERCENTAGE
+ }, {
+ n: 'zIndex',
+ ind: true,
+ int: true,
+ d: '0',
+ k: ['auto'],
+ syntax: PropertySyntax.Z_INDEX
+ }, {
+ n: 'visibility',
+ k: ['visible', 'hidden'],
+ ind: true,
+ inh: true,
+ /**
+ * support interpolation
+ * @see https://developer.mozilla.org/en-US/docs/Web/CSS/visibility#interpolation
+ */
+ int: true,
+ d: 'visible'
+ }, {
+ n: 'pointerEvents',
+ inh: true,
+ k: ['none', 'auto', 'stroke', 'fill', 'painted', 'visible', 'visiblestroke', 'visiblefill', 'visiblepainted',
+ // 'bounding-box',
+ 'all'],
+ d: 'auto'
+ }, {
+ n: 'filter',
+ ind: true,
+ l: true,
+ k: ['none'],
+ d: 'none',
+ syntax: PropertySyntax.FILTER
+ }, {
+ n: 'clipPath',
+ syntax: PropertySyntax.DEFINED_PATH
+ }, {
+ n: 'textPath',
+ syntax: PropertySyntax.DEFINED_PATH
+ }, {
+ n: 'textPathSide',
+ k: ['left', 'right'],
+ d: 'left'
+ }, {
+ n: 'textPathStartOffset',
+ l: true,
+ d: '0',
+ syntax: PropertySyntax.LENGTH_PERCENTAGE
+ }, {
+ n: 'transform',
+ p: 100,
+ int: true,
+ k: ['none'],
+ d: 'none',
+ syntax: PropertySyntax.TRANSFORM
+ }, {
+ n: 'transformOrigin',
+ p: 100,
+ // int: true,
+ d: function d(nodeName) {
+ if (nodeName === Shape.CIRCLE || nodeName === Shape.ELLIPSE) {
+ return 'center';
+ }
+ if (nodeName === Shape.TEXT) {
+ return 'text-anchor';
+ }
+ return 'left top';
+ },
+ l: true,
+ syntax: PropertySyntax.TRANSFORM_ORIGIN
+ }, {
+ n: 'anchor',
+ p: 99,
+ d: function d(nodeName) {
+ if (nodeName === Shape.CIRCLE || nodeName === Shape.ELLIPSE) {
+ return '0.5 0.5';
+ }
+ return '0 0';
+ },
+ l: true,
+ syntax: PropertySyntax.LENGTH_PERCENTAGE_12
+ },
+ // &
+ {
+ n: 'cx',
+ int: true,
+ d: '0',
+ syntax: PropertySyntax.COORDINATE
+ }, {
+ n: 'cy',
+ int: true,
+ d: '0',
+ syntax: PropertySyntax.COORDINATE
+ }, {
+ n: 'r',
+ int: true,
+ l: true,
+ d: '0',
+ syntax: PropertySyntax.LENGTH_PERCENTAGE
+ }, {
+ n: 'rx',
+ int: true,
+ l: true,
+ d: '0',
+ syntax: PropertySyntax.LENGTH_PERCENTAGE
+ }, {
+ n: 'ry',
+ int: true,
+ l: true,
+ d: '0',
+ syntax: PropertySyntax.LENGTH_PERCENTAGE
+ },
+ // Rect Image Group
+ {
+ // x in local space
+ n: 'x',
+ int: true,
+ d: '0',
+ syntax: PropertySyntax.COORDINATE
+ }, {
+ // y in local space
+ n: 'y',
+ int: true,
+ d: '0',
+ syntax: PropertySyntax.COORDINATE
+ }, {
+ // z in local space
+ n: 'z',
+ int: true,
+ d: '0',
+ syntax: PropertySyntax.COORDINATE
+ }, {
+ n: 'width',
+ int: true,
+ l: true,
+ /**
+ * @see https://developer.mozilla.org/zh-CN/docs/Web/CSS/width
+ */
+ k: ['auto', 'fit-content', 'min-content', 'max-content'],
+ d: '0',
+ syntax: PropertySyntax.LENGTH_PERCENTAGE
+ }, {
+ n: 'height',
+ int: true,
+ l: true,
+ /**
+ * @see https://developer.mozilla.org/zh-CN/docs/Web/CSS/height
+ */
+ k: ['auto', 'fit-content', 'min-content', 'max-content'],
+ d: '0',
+ syntax: PropertySyntax.LENGTH_PERCENTAGE
+ }, {
+ n: 'radius',
+ int: true,
+ l: true,
+ d: '0',
+ syntax: PropertySyntax.LENGTH_PERCENTAGE_14
+ },
+ // Line
+ {
+ n: 'x1',
+ int: true,
+ l: true,
+ syntax: PropertySyntax.COORDINATE
+ }, {
+ n: 'y1',
+ int: true,
+ l: true,
+ syntax: PropertySyntax.COORDINATE
+ }, {
+ n: 'z1',
+ int: true,
+ l: true,
+ syntax: PropertySyntax.COORDINATE
+ }, {
+ n: 'x2',
+ int: true,
+ l: true,
+ syntax: PropertySyntax.COORDINATE
+ }, {
+ n: 'y2',
+ int: true,
+ l: true,
+ syntax: PropertySyntax.COORDINATE
+ }, {
+ n: 'z2',
+ int: true,
+ l: true,
+ syntax: PropertySyntax.COORDINATE
+ },
+ // Path
+ {
+ n: 'path',
+ int: true,
+ l: true,
+ d: '',
+ a: ['d'],
+ syntax: PropertySyntax.PATH,
+ p: 50
+ },
+ // Polyline & Polygon
+ {
+ n: 'points',
+ /**
+ * support interpolation
+ */
+ int: true,
+ l: true,
+ syntax: PropertySyntax.LIST_OF_POINTS,
+ p: 50
+ },
+ // Text
+ {
+ n: 'text',
+ l: true,
+ d: '',
+ syntax: PropertySyntax.TEXT,
+ p: 50
+ }, {
+ n: 'textTransform',
+ l: true,
+ inh: true,
+ k: ['capitalize', 'uppercase', 'lowercase', 'none'],
+ d: 'none',
+ syntax: PropertySyntax.TEXT_TRANSFORM,
+ p: 51 // it must get parsed after text
+ }, {
+ n: 'font',
+ l: true
+ }, {
+ n: 'fontSize',
+ int: true,
+ inh: true,
+ /**
+ * @see https://www.w3schools.com/css/css_font_size.asp
+ */
+ d: '16px',
+ l: true,
+ syntax: PropertySyntax.LENGTH_PERCENTAGE
+ }, {
+ n: 'fontFamily',
+ l: true,
+ inh: true,
+ d: 'sans-serif'
+ }, {
+ n: 'fontStyle',
+ l: true,
+ inh: true,
+ k: ['normal', 'italic', 'oblique'],
+ d: 'normal'
+ }, {
+ n: 'fontWeight',
+ l: true,
+ inh: true,
+ k: ['normal', 'bold', 'bolder', 'lighter'],
+ d: 'normal'
+ }, {
+ n: 'fontVariant',
+ l: true,
+ inh: true,
+ k: ['normal', 'small-caps'],
+ d: 'normal'
+ }, {
+ n: 'lineHeight',
+ l: true,
+ syntax: PropertySyntax.LENGTH,
+ int: true,
+ d: '0'
+ }, {
+ n: 'letterSpacing',
+ l: true,
+ syntax: PropertySyntax.LENGTH,
+ int: true,
+ d: '0'
+ }, {
+ n: 'miterLimit',
+ l: true,
+ syntax: PropertySyntax.NUMBER,
+ d: function d(nodeName) {
+ if (nodeName === Shape.PATH || nodeName === Shape.POLYGON || nodeName === Shape.POLYLINE) {
+ return '4';
+ }
+ return '10';
+ }
+ }, {
+ n: 'wordWrap',
+ l: true
+ }, {
+ n: 'wordWrapWidth',
+ l: true
+ }, {
+ n: 'maxLines',
+ l: true
+ }, {
+ n: 'textOverflow',
+ l: true,
+ d: 'clip'
+ }, {
+ n: 'leading',
+ l: true
+ }, {
+ n: 'textBaseline',
+ l: true,
+ inh: true,
+ k: ['top', 'hanging', 'middle', 'alphabetic', 'ideographic', 'bottom'],
+ d: 'alphabetic'
+ }, {
+ n: 'textAlign',
+ l: true,
+ inh: true,
+ k: ['start', 'center', 'middle', 'end', 'left', 'right'],
+ d: 'start'
+ },
+ // {
+ // n: 'whiteSpace',
+ // l: true,
+ // },
+ {
+ n: 'markerStart',
+ syntax: PropertySyntax.MARKER
+ }, {
+ n: 'markerEnd',
+ syntax: PropertySyntax.MARKER
+ }, {
+ n: 'markerMid',
+ syntax: PropertySyntax.MARKER
+ }, {
+ n: 'markerStartOffset',
+ syntax: PropertySyntax.LENGTH,
+ l: true,
+ int: true,
+ d: '0'
+ }, {
+ n: 'markerEndOffset',
+ syntax: PropertySyntax.LENGTH,
+ l: true,
+ int: true,
+ d: '0'
+ }];
+ var GEOMETRY_ATTRIBUTE_NAMES = BUILT_IN_PROPERTIES.filter(function (n) {
+ return !!n.l;
+ }).map(function (n) {
+ return n.n;
+ });
+ var propertyMetadataCache = {};
+ var unresolvedProperties = new WeakMap();
+ // const uniqueAttributeSet = new Set();
+ // const tmpVec3a = vec3.create();
+ // const tmpVec3b = vec3.create();
+ // const tmpVec3c = vec3.create();
+ var isPropertyResolved = function isPropertyResolved(object, name) {
+ var properties = unresolvedProperties.get(object);
+ if (!properties || properties.length === 0) {
+ return true;
+ }
+ return properties.includes(name);
+ };
+ var DefaultStyleValueRegistry = /*#__PURE__*/function () {
+ /**
+ * need recalc later
+ */
+ // dirty = false;
+ function DefaultStyleValueRegistry() {
+ var _this = this;
+ BUILT_IN_PROPERTIES.forEach(function (property) {
+ _this.registerMetadata(property);
+ });
+ }
+ var _proto = DefaultStyleValueRegistry.prototype;
+ _proto.registerMetadata = function registerMetadata(metadata) {
+ [metadata.n].concat(metadata.a || []).forEach(function (name) {
+ propertyMetadataCache[name] = metadata;
+ });
+ };
+ _proto.unregisterMetadata = function unregisterMetadata(name) {
+ delete propertyMetadataCache[name];
+ };
+ _proto.getPropertySyntax = function getPropertySyntax(syntax) {
+ return runtime.CSSPropertySyntaxFactory[syntax];
+ }
+ /**
+ * * parse value, eg.
+ * fill: 'red' => CSSRGB
+ * translateX: '10px' => CSSUnitValue { unit: 'px', value: 10 }
+ * fontSize: '2em' => { unit: 'px', value: 32 }
+ *
+ * * calculate used value
+ * * post process
+ */;
+ _proto.processProperties = function processProperties(object, attributes, options) {
+ var _this2 = this;
+ if (options === void 0) {
+ options = {
+ skipUpdateAttribute: false,
+ skipParse: false,
+ forceUpdateGeometry: false,
+ usedAttributes: []
+ };
+ }
+ if (!runtime.enableCSSParsing) {
+ Object.assign(object.attributes, attributes);
+ var _attributeNames = Object.keys(attributes);
+ // clipPath
+ var oldClipPath = object.parsedStyle.clipPath;
+ var oldOffsetPath = object.parsedStyle.offsetPath;
+ object.parsedStyle = Object.assign(object.parsedStyle, attributes);
+ var _needUpdateGeometry = !!options.forceUpdateGeometry;
+ if (!_needUpdateGeometry) {
+ for (var i = 0; i < GEOMETRY_ATTRIBUTE_NAMES.length; i++) {
+ if (GEOMETRY_ATTRIBUTE_NAMES[i] in attributes) {
+ _needUpdateGeometry = true;
+ break;
+ }
+ }
+ }
+ if (attributes.fill) {
+ object.parsedStyle.fill = parseColor(attributes.fill);
+ }
+ if (attributes.stroke) {
+ object.parsedStyle.stroke = parseColor(attributes.stroke);
+ }
+ if (attributes.shadowColor) {
+ object.parsedStyle.shadowColor = parseColor(attributes.shadowColor);
+ }
+ if (attributes.filter) {
+ object.parsedStyle.filter = parseFilter(attributes.filter);
+ }
+ // Rect
+ // @ts-ignore
+ if (!isNil(attributes.radius)) {
+ // @ts-ignore
+ object.parsedStyle.radius = parseDimensionArrayFormat(
+ // @ts-ignore
+ attributes.radius, 4);
+ }
+ // Polyline
+ if (!isNil(attributes.lineDash)) {
+ object.parsedStyle.lineDash = parseDimensionArrayFormat(attributes.lineDash, 2);
+ }
+ // @ts-ignore
+ if (attributes.points) {
+ // @ts-ignore
+ object.parsedStyle.points = parsePoints(attributes.points, object);
+ }
+ // Path
+ // @ts-ignore
+ if (attributes.path === '') {
+ object.parsedStyle.path = _extends({}, EMPTY_PARSED_PATH);
+ }
+ // @ts-ignore
+ if (attributes.path) {
+ object.parsedStyle.path = parsePath(
+ // @ts-ignore
+ attributes.path, object);
+ }
+ // Text
+ if (attributes.textTransform) {
+ runtime.CSSPropertySyntaxFactory[''].calculator(null, null, {
+ value: attributes.textTransform
+ }, object, null);
+ }
+ if (attributes.clipPath) {
+ runtime.CSSPropertySyntaxFactory[''].calculator('clipPath', oldClipPath, attributes.clipPath, object, this);
+ }
+ if (attributes.offsetPath) {
+ runtime.CSSPropertySyntaxFactory[''].calculator('offsetPath', oldOffsetPath, attributes.offsetPath, object, this);
+ }
+ if (attributes.anchor) {
+ object.parsedStyle.anchor = parseDimensionArrayFormat(
+ // @ts-ignorex
+ attributes.anchor, 2);
+ }
+ if (attributes.transform) {
+ object.parsedStyle.transform = parseTransform(attributes.transform);
+ }
+ if (attributes.transformOrigin) {
+ object.parsedStyle.transformOrigin = parseTransformOrigin(attributes.transformOrigin);
+ }
+ // Marker
+ // @ts-ignore
+ if (attributes.markerStart) {
+ // @ts-ignore
+ object.parsedStyle.markerStart = runtime.CSSPropertySyntaxFactory[''].calculator(null,
+ // @ts-ignore
+ attributes.markerStart,
+ // @ts-ignore
+ attributes.markerStart, null, null);
+ }
+ // @ts-ignore
+ if (attributes.markerEnd) {
+ // @ts-ignore
+ object.parsedStyle.markerEnd = runtime.CSSPropertySyntaxFactory[''].calculator(null,
+ // @ts-ignore
+ attributes.markerEnd,
+ // @ts-ignore
+ attributes.markerEnd, null, null);
+ }
+ // @ts-ignore
+ if (attributes.markerMid) {
+ // @ts-ignore
+ object.parsedStyle.markerMid = runtime.CSSPropertySyntaxFactory[''].calculator('',
+ // @ts-ignore
+ attributes.markerMid,
+ // @ts-ignore
+ attributes.markerMid, null, null);
+ }
+ if (
+ // Circle & Ellipse
+ (object.nodeName === Shape.CIRCLE || object.nodeName === Shape.ELLIPSE) && (
+ // @ts-ignore
+ !isNil(attributes.cx) ||
+ // @ts-ignore
+ !isNil(attributes.cy)) || (object.nodeName === Shape.RECT || object.nodeName === Shape.IMAGE || object.nodeName === Shape.GROUP || object.nodeName === Shape.HTML || object.nodeName === Shape.TEXT || object.nodeName === Shape.MESH) && (
+ // @ts-ignore
+ !isNil(attributes.x) ||
+ // @ts-ignore
+ !isNil(attributes.y) ||
+ // @ts-ignore
+ !isNil(attributes.z)) ||
+ // Line
+ object.nodeName === Shape.LINE && (
+ // @ts-ignore
+ !isNil(attributes.x1) ||
+ // @ts-ignore
+ !isNil(attributes.y1) ||
+ // @ts-ignore
+ !isNil(attributes.z1) ||
+ // @ts-ignore
+ !isNil(attributes.x2) ||
+ // @ts-ignore
+ !isNil(attributes.y2) ||
+ // @ts-ignore
+ !isNil(attributes.z2))) {
+ runtime.CSSPropertySyntaxFactory[''].postProcessor(object, _attributeNames);
+ }
+ if (!isNil(attributes.zIndex)) {
+ runtime.CSSPropertySyntaxFactory[''].postProcessor(object, _attributeNames);
+ }
+ // @ts-ignore
+ if (attributes.path) {
+ runtime.CSSPropertySyntaxFactory['