Authors:Zhicheng Wang

• html
• ts
• scss
• spec.ts

<h4>SVG Movable</h4>
<div class="playground">
  <svg viewBox="0 0 300 300" width="100%" height="600">
    <g uiMovableTransform>
      <rect x="0" y="0" width="60" height="60" fill="green"></rect>
      <circle class="drag-handle" fill="yellow" [attr.cx]="10" [attr.cy]="10" r="5" uiMovable
              #svgMovable="uiMovable"></circle>
      <text x="30" y="30" fill="white" text-anchor="middle" alignment-baseline="middle">Text</text>
    </g>
  </svg>
</div>
<div class="alert alert-info">
  <div class="row">
    <div class="col-md-6">
      <span i18n>offset</span>
      ( x: {{svgMovable.offset.x}}, y: {{svgMovable.offset.y}} )
    </div>
  </div>
</div>
<h4>HTML Movable</h4>
<div [class.no-selectable]="htmlMovable.moving">
  <div class="playground">
    <div class="movable" uiMovable #htmlMovable="uiMovable" uiMovablePosition></div>
  </div>
  <div class="alert alert-info">
    <div class="row">
      <div class="col-md-6">
        <span i18n>offset</span>
        ( x: {{htmlMovable.offset.x}}, y: {{htmlMovable.offset.y}} )
      </div>
    </div>
  </div>
</div>