@gedit/editor-2d 0.1.114 → 0.2.0

package/src/browser/style/extend-edit-layer.less

@@ -0,0 +1,127 @@
+.gedit-extend-edit-layer {
+  z-index: 20;
+  .gedit-extend-edit-item {
+    position: absolute;
+  }
+}
+
+.gedit-extend-range-point {
+  position: absolute;
+  left: -5px;
+  top: -5px;
+  width: 10px;
+  height: 10px;
+}
+.gedit-extend-range-point,
+.gedit-extend-color-point {
+  > div {
+    content: "";
+    display: block;
+    width: 10px;
+    height: 10px;
+    position: relative;
+    border: 1px solid #fff;
+    background-color: #ccc;
+    box-shadow: 0 0 4px fade(#262626, 50);
+    transition: transform 0.3s;
+    cursor: pointer;
+    &:hover {
+      transform: scale(1.2);
+    }
+  }
+}
+
+.gedit-extend-center-point > div {
+  top: -5px;
+}
+.gedit-extend-radius-point {
+  > div {
+    top: 5px;
+  }
+}
+.gedit-extend-color-point-active {
+  transform: scale(1.3);
+}
+
+.gedit-extend-color-point {
+  width: 8px;
+  height: 8px;
+  position: absolute;
+  left: -4px;
+  top: -4px;
+  cursor: pointer;
+  > div {
+    width: 8px;
+    height: 8px;
+    border-radius: 100%;
+    top: 0;
+  }
+}
+
+.gedit-extend-range-line {
+  background-color: #fff;
+  background-clip: padding-box;
+  height: 5px;
+  position: absolute;
+  left: 0;
+  top: -2.5px;
+  border: 2px solid transparent;
+  border-left: none;
+  border-right: none;
+  transform-origin: 0 2.5px;
+  cursor: copy;
+}
+.gedit-extend-radial-box {
+  border: 1px solid #fff;
+  border-radius: 100%;
+  position: absolute;
+  box-shadow: 0 0 1px 0 fade(#262626, 50) inset;
+}
+.gedit-extend-radial-point {
+  width: 10px;
+  height: 10px;
+  left: -5px;
+  top: 50%;
+  margin-top: -5px;
+  position: absolute;
+  background-color: #ccc;
+  border-radius: 100%;
+  border: 1px solid #fff;
+  transition: transform 0.45s;
+  :hover {
+    transform: scale(1.2);
+  }
+}
+
+.gedit-extend-origin {
+  &-wrapper {
+    position: absolute;
+    margin-left: -7px;
+    margin-top: -7px;
+    width: 14px;
+    height: 14px;
+  }
+  background-color: #fff;
+  -webkit-mask: var(--g-playground-icon-origin);
+  mask: var(--g-playground-icon-origin);
+  width: 14px;
+  height: 14px;
+  cursor: move;
+}
+
+.gedit-extend-angle {
+  &-wrapper {
+    width: 14px;
+    height: 14px;
+    margin-left: -7px;
+    margin-top: -7px;
+  }
+  width: 14px;
+  height: 14px;
+  margin-left: 7px;
+  border: 1px solid #fff;
+  background-color: #ccc;
+  box-shadow: 0 0 4px #262626;
+  clip-path: path("M0 7 L14 0 L14 14z");
+  cursor: pointer;
+}

package/src/browser/style/index.less

@@ -1,7 +1,8 @@
 @import './engine2d.css';
 @import './canvas-layer.css';
-@import './canvas-draw-layer.less';
+@import './path-edit-layer.less';
 @import './selector-extend.less';
+@import './extend-edit-layer.less';
 
 :root {
     --g-mask-transparent: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAADKADAAQAAAABAAAADAAAAAATDPpdAAAAfUlEQVQoFbVQQQ7AIAgD7Sf8/8s8+gd1s0vIptMlHkZiUGyBVmOMRwux4B2AhBDEOWflK6uqgICRYLVn3Zh9C6t+5G3CcqXVkKYPnQYCvfdSSpFaa8ejaM05N223S0QQmFJ6NeIfaN1I4JtnNmFb9L8Ergm6MWrg7jP36NIJC0BbmAiDWGoAAAAASUVORK5CYII=');;

package/src/browser/style/path-edit-layer.less

@@ -0,0 +1,72 @@
+.gedit-path-edit-layer {
+  position: absolute;
+  left: 0;
+  top: 0;
+  overflow: visible;
+  z-index: 20;
+  &-point {
+    position: absolute;
+    width: 8px;
+    height: 8px;
+    border-radius: 100%;
+    top: -4px;
+    left: -4px;
+    background-color: #fff; //var(--g-playground-select);
+    border: 1px solid #ccc;
+    cursor: pointer;
+    z-index: 50;
+    &-move {
+      z-index: 0;
+    }
+  }
+  &-point-bezier {
+    position: absolute;
+    width: 6px;
+    height: 6px;
+    top: -3px;
+    left: -3px;
+    background-color: #fff;//var(--g-playground-select);
+    border: 1px solid #ccc;
+    border-radius: 100%;
+    cursor: pointer;
+    z-index: 50;
+    &-line {
+      height: 1px;
+      position: absolute;
+      top: 0;
+      left: 0;
+      transform-origin: 0% 50%;
+      background-color: #bbb;
+    }
+  }
+  &-pen {
+    // 移出画布
+    cursor: url(../svg/pen+.svg), copy;
+  }
+  &-line {
+    height: 1px;
+    background-color: #ccc;
+    position: absolute;
+    top: 0;
+    left: 0;
+    transform-origin: 0% 50%;
+    z-index: 0;
+  }
+  &-svg {
+    position: absolute;
+    overflow: visible;
+    left: 0;
+    top: 0;
+    cursor: url(../svg/pen+.svg), copy;
+    z-index: 1;
+  }
+  &-path {
+    stroke: #fff000;
+    fill: none;
+    // stroke-width: 1px;
+    pointer-events: auto;
+    &:hover {
+      stroke: var(--g-playground-select);
+    }
+  }
+}

package/src/browser/svg/pen+.svg

@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组 2</title>
+    <defs>
+        <rect id="path-1" x="0" y="0" width="20" height="20"></rect>
+    </defs>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="3-Pen-+-形状结合-蒙版">
+            <mask id="mask-2" fill="white">
+                <use xlink:href="#path-1"></use>
+            </mask>
+            <g id="蒙版"></g>
+            <g id="3-Pen" mask="url(#mask-2)">
+                <g transform="translate(-8.950265, -5.827689)">
+                    <g id="编组-3" stroke="none" fill="none" fill-rule="evenodd" transform="translate(15.908060, 15.908060) rotate(-33.000000) translate(-15.908060, -15.908060) translate(4.408060, 4.408060)">
+                        <path d="M15.2636045,3.54128301 C15.1463591,3.42389369 14.9824898,3.36270075 14.8080946,3.37118409 C14.6336994,3.37966742 14.4630852,3.45713108 14.3338359,3.58651099 L11.6470455,6.26392495 C11.5176657,6.39317434 11.440202,6.5637885 11.4317187,6.73818372 C11.4232353,6.91257893 11.4844283,7.07644824 11.6018176,7.1936937 L11.8768691,7.46874527 C10.5668432,8.45506005 9.02084742,9.03767617 7.45291352,9.13593476 C7.17991393,9.16129804 6.93457934,9.35190929 6.83636102,9.61496155 L3.41043657,18.7950899 C3.33416882,18.998745 3.35731687,19.2172739 3.47265178,19.3824321 C3.58798669,19.5475903 3.78145241,19.6392496 3.9926312,19.6287856 C4.06292863,19.6255581 4.13335027,19.6110664 4.20120966,19.5858632 L13.3818161,16.1500821 C13.6415844,16.0533232 13.8312241,15.8129004 13.8603634,15.5433857 C13.9604921,13.9787315 14.5428258,12.4364838 15.5270733,11.1292857 L15.8021248,11.4043373 C15.9193778,11.5205354 16.0825735,11.5809356 16.2560971,11.5723565 C16.4307018,11.5648704 16.6019069,11.488138 16.7318934,11.3591093 L19.4089874,8.67888942 C19.5435052,8.54879031 19.6244033,8.37447287 19.6330845,8.19600994 C19.6417657,8.01754702 19.5774832,7.8502918 19.4550144,7.73269363 L15.2636045,3.54128301 Z" id="路径" stroke="#FFFFFF" fill="#000000" fill-rule="nonzero" transform="translate(11.500000, 11.500000) rotate(-225.000000) translate(-11.500000, -11.500000) "></path>
+                        <path d="M14.0272692,11.6425806 L7.59746366,14.049758 L10.7844497,10.8596464 C11.2245552,10.9666111 11.7106572,10.7537469 11.9661762,10.3421679 C12.2216953,9.93058893 12.1818754,9.42460131 11.869373,9.11209895 C11.5568707,8.79959659 11.050883,8.75977669 10.6393041,9.01529573 C10.2277251,9.27081477 10.0148608,9.7569168 10.1218256,10.1970223 L6.93171401,13.3840083 L9.33889138,6.9542028 C11.0769116,6.75281121 12.7662565,6.04449073 14.1937478,4.91862422 L16.0690989,6.79397534 C14.9422125,8.21892537 14.2317635,9.90598413 14.0272692,11.6425806 L14.0272692,11.6425806 Z" id="路径" fill="#FFFFFF" fill-rule="nonzero" transform="translate(11.500406, 9.484191) rotate(-225.000000) translate(-11.500406, -9.484191) "></path>
+                    </g>
+                    <path d="M23.1879258,6.71185268 C24.3227683,6.31096118 24.4529395,6.56265282 24.6021394,6.71185268 C24.7831038,6.89281709 24.8950326,7.14281709 24.8950326,7.41915954 L24.8950326,7.41915954 L24.8942326,9.41815943 L26.8950326,9.41895946 C27.171175,9.41895946 27.421175,9.53088827 27.6021394,9.71185268 C27.7831038,9.89281709 27.8950326,10.1428171 27.8950326,10.4189595 C27.8950326,10.6951018 27.7831038,10.9451018 27.6021394,11.1260662 C27.421175,11.3070306 27.171175,11.4189595 26.8948327,11.4189594 L26.8948327,11.4189594 L24.8942326,11.4181595 L24.8950326,13.4189595 C24.8950326,13.6951018 24.7831038,13.9451018 24.6021394,14.1260662 C24.421175,14.3070306 24.171175,14.4189595 23.8950326,14.4189595 C23.6188902,14.4189595 23.3688902,14.3070306 23.1879258,14.1260662 C23.0069614,13.9451018 22.8950326,13.6951018 22.8950326,13.4191594 L22.8950326,13.4191594 L22.8942326,11.4181595 L20.8950326,11.4189595 C20.6188902,11.4189595 20.3688902,11.3070306 20.1879258,11.1260662 C20.0069614,10.9451018 19.8950326,10.6951018 19.8950326,10.4189595 C19.8950326,10.1428171 20.0069614,9.89281709 20.1879258,9.71185268 C20.3688902,9.53088827 20.6188902,9.41895946 20.8948325,9.4189595 L20.8948325,9.4189595 L22.8942326,9.41815942 L22.8950326,7.41895946 C22.8950326,7.14281709 23.0069614,6.89281709 23.1879258,6.71185268 Z" id="形状结合" stroke="#FFFFFF" fill="#000000" fill-rule="nonzero"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/browser/utils/snapshot.ts

@@ -80,6 +80,7 @@ export class SnapshotCreator extends DisposableImpl {
     }
     this.drawer = new CanvasDraw({
       host,
+      isSnapshot: true,
       ...opts,
     });
     this.toDispose.pushAll([

package/lib/browser/playground/canvas-draw-layer.d.ts

@@ -1,22 +0,0 @@
-/// <reference types="react" />
-import { EditorStateConfigEntity, Layer, PositionSchema } from '@gedit/playground';
-import { DocumentEntity } from './entities/document-entity';
-import { Editor2dDocument, Editor2dPathNode } from '../model';
-/**
- * 动态绘制层
- */
-export declare class CanvasDrawLayer extends Layer {
-    node: HTMLDivElement;
-    protected editorState: EditorStateConfigEntity;
-    documentEntity: DocumentEntity;
-    currentPathNode?: Editor2dPathNode;
-    onReady(): void;
-    /**
-     * 创建路径
-     * @param pos - 当前鼠标点击的位置
-     */
-    drawPath(pos: PositionSchema): void;
-    get document(): Editor2dDocument | undefined;
-    draw(): JSX.Element;
-}
-//# sourceMappingURL=canvas-draw-layer.d.ts.map

package/lib/browser/playground/canvas-draw-layer.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"canvas-draw-layer.d.ts","sourceRoot":"","sources":["../../../src/browser/playground/canvas-draw-layer.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,uBAAuB,EAAU,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAC3F,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAG5D,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAG9D;;GAEG;AACH,qBAAa,eAAgB,SAAQ,KAAK;IACxC,IAAI,iBAA0D;IAC7B,SAAS,CAAC,WAAW,EAAE,uBAAuB,CAAC;IACxD,cAAc,EAAE,cAAc,CAAC;IAEvD,eAAe,CAAC,EAAE,gBAAgB,CAAC;IAEnC,OAAO,IAAI,IAAI;IAoBf;;;OAGG;IACH,QAAQ,CAAC,GAAG,EAAE,cAAc,GAAG,IAAI;IAanC,IAAI,QAAQ,IAAI,gBAAgB,GAAG,SAAS,CAE3C;IAED,IAAI,IAAI,GAAG,CAAC,OAAO;CA4BpB"}

package/lib/browser/playground/canvas-draw-layer.js

@@ -1,126 +0,0 @@
-"use strict";
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-var __metadata = (this && this.__metadata) || function (k, v) {
-    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CanvasDrawLayer = void 0;
-var React = require("react");
-var playground_1 = require("@gedit/playground");
-var document_entity_1 = require("./entities/document-entity");
-var browser_1 = require("@gedit/utils/lib/browser");
-var render_engine_1 = require("@gedit/render-engine");
-var EDIT_PATH_STATE = 'STATE_PATH';
-/**
- * 动态绘制层
- */
-var CanvasDrawLayer = /** @class */ (function (_super) {
-    __extends(CanvasDrawLayer, _super);
-    function CanvasDrawLayer() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.node = browser_1.domUtils.createDivWithClass('gedit-canvas-draw-layer');
-        return _this;
-    }
-    CanvasDrawLayer.prototype.onReady = function () {
-        var _this = this;
-        this.toDispose.pushAll([
-            // 退出路径编辑
-            this.editorState.onCancel(EDIT_PATH_STATE, function () {
-                var _a;
-                // 如果只有一个点代表绘制不成功，则删除
-                if (_this.currentPathNode && _this.currentPathNode.path.paths.length <= 1) {
-                    (_a = _this.document) === null || _a === void 0 ? void 0 : _a.delNode(_this.currentPathNode);
-                }
-                _this.currentPathNode = undefined;
-            }),
-            this.listenPlaygroundEvent('mousedown', function (e) {
-                // 当前编辑模式为路径编辑
-                if (_this.editorState.is(EDIT_PATH_STATE)) {
-                    var pos = _this.getPosFromMouseEvent(e);
-                    _this.drawPath(pos);
-                }
-            }, 10)
-        ]);
-    };
-    /**
-     * 创建路径
-     * @param pos - 当前鼠标点击的位置
-     */
-    CanvasDrawLayer.prototype.drawPath = function (pos) {
-        if (!this.document)
-            return;
-        // 创建一个空的路径节点，用于存储数据
-        if (!this.currentPathNode) {
-            this.currentPathNode = this.document.createDisplayNode(render_engine_1.GameObjectBaseType.PATH);
-        }
-        this.currentPathNode.path.paths.push({
-            x: pos.x,
-            y: pos.y,
-        });
-        this.document.updateNode(this.currentPathNode, {}, true);
-    };
-    Object.defineProperty(CanvasDrawLayer.prototype, "document", {
-        get: function () {
-            return this.documentEntity.config.document;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    CanvasDrawLayer.prototype.draw = function () {
-        var _this = this;
-        if (!this.document)
-            return React.createElement(React.Fragment, null);
-        var allPoints = [];
-        var document = this.document;
-        this.document.queryNodesByTypes([render_engine_1.GameObjectBaseType.PATH]).forEach(function (node) {
-            node.path.paths.forEach(function (p, i) {
-                var onMouseDown = function (e) {
-                    _this.startDrag(e.clientX, e.clientY, {
-                        // 拖动
-                        onDrag: function (dragEvent) {
-                            var pos = dragEvent.endPos;
-                            p.x = pos.x;
-                            p.y = pos.y;
-                            document.updateNode(node, {}, true);
-                        }
-                    });
-                    e.preventDefault();
-                    e.stopPropagation();
-                };
-                allPoints.push(React.createElement("div", { className: "gedit-canvas-draw-layer-point", key: "".concat(node.id, ".").concat(i), style: { left: p.x, top: p.y }, onMouseDown: onMouseDown }));
-            });
-        });
-        return React.createElement(React.Fragment, null, allPoints);
-    };
-    __decorate([
-        (0, playground_1.entity)(playground_1.EditorStateConfigEntity),
-        __metadata("design:type", playground_1.EditorStateConfigEntity)
-    ], CanvasDrawLayer.prototype, "editorState", void 0);
-    __decorate([
-        (0, playground_1.entity)(document_entity_1.DocumentEntity),
-        __metadata("design:type", document_entity_1.DocumentEntity)
-    ], CanvasDrawLayer.prototype, "documentEntity", void 0);
-    return CanvasDrawLayer;
-}(playground_1.Layer));
-exports.CanvasDrawLayer = CanvasDrawLayer;
-//# sourceMappingURL=canvas-draw-layer.js.map

package/lib/browser/playground/canvas-draw-layer.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"canvas-draw-layer.js","sourceRoot":"","sources":["../../../src/browser/playground/canvas-draw-layer.tsx"],"names":[],"mappings":"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"}

package/src/browser/playground/canvas-draw-layer.tsx

@@ -1,88 +0,0 @@
-import * as React from 'react';
-import { EditorStateConfigEntity, entity, Layer, PositionSchema } from '@gedit/playground';
-import { DocumentEntity } from './entities/document-entity';
-import { domUtils } from '@gedit/utils/lib/browser';
-import { GameObjectBaseType } from '@gedit/render-engine';
-import { Editor2dDocument, Editor2dPathNode } from '../model';
-
-const EDIT_PATH_STATE = 'STATE_PATH';
-/**
- * 动态绘制层
- */
-export class CanvasDrawLayer extends Layer {
-  node = domUtils.createDivWithClass('gedit-canvas-draw-layer');
-  @entity(EditorStateConfigEntity) protected editorState: EditorStateConfigEntity;
-  @entity(DocumentEntity) documentEntity: DocumentEntity;
-
-  currentPathNode?: Editor2dPathNode;
-
-  onReady(): void {
-    this.toDispose.pushAll([
-      // 退出路径编辑
-      this.editorState.onCancel(EDIT_PATH_STATE, () => {
-        // 如果只有一个点代表绘制不成功，则删除
-        if (this.currentPathNode && this.currentPathNode.path.paths.length <= 1) {
-          this.document?.delNode(this.currentPathNode);
-        }
-        this.currentPathNode = undefined;
-      }),
-      this.listenPlaygroundEvent('mousedown', (e: MouseEvent) => {
-        // 当前编辑模式为路径编辑
-        if (this.editorState.is(EDIT_PATH_STATE)) {
-          const pos = this.getPosFromMouseEvent(e);
-          this.drawPath(pos);
-        }
-      }, 10)
-    ]);
-  }
-
-  /**
-   * 创建路径
-   * @param pos - 当前鼠标点击的位置
-   */
-  drawPath(pos: PositionSchema): void {
-    if (!this.document) return;
-    // 创建一个空的路径节点，用于存储数据
-    if (!this.currentPathNode) {
-      this.currentPathNode = this.document.createDisplayNode<Editor2dPathNode>(GameObjectBaseType.PATH);
-    }
-    this.currentPathNode.path.paths.push({
-      x: pos.x,
-      y: pos.y,
-    });
-    this.document.updateNode(this.currentPathNode, {}, true);
-  }
-
-  get document(): Editor2dDocument | undefined {
-    return this.documentEntity.config.document;
-  }
-
-  draw(): JSX.Element {
-    if (!this.document) return <></>;
-    const allPoints: JSX.Element[] = [];
-    const document = this.document!;
-    this.document.queryNodesByTypes([GameObjectBaseType.PATH]).forEach((node: Editor2dPathNode) => {
-      node.path.paths.forEach((p, i) => {
-        const onMouseDown = (e: React.MouseEvent) => {
-          this.startDrag(e.clientX, e.clientY, {
-            // 拖动
-            onDrag(dragEvent): void {
-              const pos = dragEvent.endPos;
-              p.x = pos.x;
-              p.y = pos.y;
-              document.updateNode(node, {}, true);
-            }
-          });
-          e.preventDefault();
-          e.stopPropagation();
-        };
-        allPoints.push(
-          <div className="gedit-canvas-draw-layer-point" key={`${node.id}.${i}`} style={{ left: p.x, top: p.y }}onMouseDown={onMouseDown}/>
-        );
-      });
-    });
-    return <>
-      {allPoints}
-    </>;
-  }
-}

package/src/browser/style/canvas-draw-layer.less

@@ -1,24 +0,0 @@
-.gedit-canvas-draw-layer {
-  position: absolute;
-  left: 0;
-  top: 0;
-  overflow: visible;
-  z-index: 20;
-  &-point {
-    position: absolute;
-    width: 8px;
-    height: 8px;
-    border-radius: var(--g-small-radius);
-    margin-top: -4px;
-    margin-left: -4px;
-    background-color: var(--g-playground-select);
-    cursor: pointer;
-    z-index: 50;
-  }
-  &-svg {
-    position: absolute;
-    overflow: visible;
-    left: 0;
-    top: 0;
-  }
-}