KaneAI - World’s First E2E Software Testing Agent.Book a Demo 
How to use InkAnnotationElement method in wpt
Best JavaScript code snippet using wpt
annotation_layer.js
Source:annotation_layer.js 
...70 return new CircleAnnotationElement(parameters);71 case _util.AnnotationType.POLYLINE:72 return new PolylineAnnotationElement(parameters);73 case _util.AnnotationType.INK:74 return new InkAnnotationElement(parameters);75 case _util.AnnotationType.POLYGON:76 return new PolygonAnnotationElement(parameters);77 case _util.AnnotationType.HIGHLIGHT:78 return new HighlightAnnotationElement(parameters);79 case _util.AnnotationType.UNDERLINE:80 return new UnderlineAnnotationElement(parameters);81 case _util.AnnotationType.SQUIGGLY:82 return new SquigglyAnnotationElement(parameters);83 case _util.AnnotationType.STRIKEOUT:84 return new StrikeOutAnnotationElement(parameters);85 case _util.AnnotationType.STAMP:86 return new StampAnnotationElement(parameters);87 case _util.AnnotationType.FILEATTACHMENT:88 return new FileAttachmentAnnotationElement(parameters);89 default:90 return new AnnotationElement(parameters);91 }92 }93 }]);94 return AnnotationElementFactory;95}();96var AnnotationElement = function () {97 function AnnotationElement(parameters) {98 var isRenderable = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;99 var ignoreBorder = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;100 _classCallCheck(this, AnnotationElement);101 this.isRenderable = isRenderable;102 this.data = parameters.data;103 this.layer = parameters.layer;104 this.page = parameters.page;105 this.viewport = parameters.viewport;106 this.linkService = parameters.linkService;107 this.downloadManager = parameters.downloadManager;108 this.imageResourcesPath = parameters.imageResourcesPath;109 this.renderInteractiveForms = parameters.renderInteractiveForms;110 this.svgFactory = parameters.svgFactory;111 if (isRenderable) {112 this.container = this._createContainer(ignoreBorder);113 }114 }115 _createClass(AnnotationElement, [{116 key: '_createContainer',117 value: function _createContainer() {118 var ignoreBorder = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;119 var data = this.data,120 page = this.page,121 viewport = this.viewport;122 var container = document.createElement('section');123 var width = data.rect[2] - data.rect[0];124 var height = data.rect[3] - data.rect[1];125 container.setAttribute('data-annotation-id', data.id);126 var rect = _util.Util.normalizeRect([data.rect[0], page.view[3] - data.rect[1] + page.view[1], data.rect[2], page.view[3] - data.rect[3] + page.view[1]]);127 container.style.transform = 'matrix(' + viewport.transform.join(',') + ')';128 container.style.transformOrigin = -rect[0] + 'px ' + -rect[1] + 'px';129 if (!ignoreBorder && data.borderStyle.width > 0) {130 container.style.borderWidth = data.borderStyle.width + 'px';131 if (data.borderStyle.style !== _util.AnnotationBorderStyleType.UNDERLINE) {132 width = width - 2 * data.borderStyle.width;133 height = height - 2 * data.borderStyle.width;134 }135 var horizontalRadius = data.borderStyle.horizontalCornerRadius;136 var verticalRadius = data.borderStyle.verticalCornerRadius;137 if (horizontalRadius > 0 || verticalRadius > 0) {138 var radius = horizontalRadius + 'px / ' + verticalRadius + 'px';139 container.style.borderRadius = radius;140 }141 switch (data.borderStyle.style) {142 case _util.AnnotationBorderStyleType.SOLID:143 container.style.borderStyle = 'solid';144 break;145 case _util.AnnotationBorderStyleType.DASHED:146 container.style.borderStyle = 'dashed';147 break;148 case _util.AnnotationBorderStyleType.BEVELED:149 (0, _util.warn)('Unimplemented border style: beveled');150 break;151 case _util.AnnotationBorderStyleType.INSET:152 (0, _util.warn)('Unimplemented border style: inset');153 break;154 case _util.AnnotationBorderStyleType.UNDERLINE:155 container.style.borderBottomStyle = 'solid';156 break;157 default:158 break;159 }160 if (data.color) {161 container.style.borderColor = _util.Util.makeCssRgb(data.color[0] | 0, data.color[1] | 0, data.color[2] | 0);162 } else {163 container.style.borderWidth = 0;164 }165 }166 container.style.left = rect[0] + 'px';167 container.style.top = rect[1] + 'px';168 container.style.width = width + 'px';169 container.style.height = height + 'px';170 return container;171 }172 }, {173 key: '_createPopup',174 value: function _createPopup(container, trigger, data) {175 if (!trigger) {176 trigger = document.createElement('div');177 trigger.style.height = container.style.height;178 trigger.style.width = container.style.width;179 container.appendChild(trigger);180 }181 var popupElement = new PopupElement({182 container: container,183 trigger: trigger,184 color: data.color,185 title: data.title,186 contents: data.contents,187 hideWrapper: true188 });189 var popup = popupElement.render();190 popup.style.left = container.style.width;191 container.appendChild(popup);192 }193 }, {194 key: 'render',195 value: function render() {196 (0, _util.unreachable)('Abstract method `AnnotationElement.render` called');197 }198 }]);199 return AnnotationElement;200}();201var LinkAnnotationElement = function (_AnnotationElement) {202 _inherits(LinkAnnotationElement, _AnnotationElement);203 function LinkAnnotationElement(parameters) {204 _classCallCheck(this, LinkAnnotationElement);205 var isRenderable = !!(parameters.data.url || parameters.data.dest || parameters.data.action);206 return _possibleConstructorReturn(this, (LinkAnnotationElement.__proto__ || Object.getPrototypeOf(LinkAnnotationElement)).call(this, parameters, isRenderable));207 }208 _createClass(LinkAnnotationElement, [{209 key: 'render',210 value: function render() {211 this.container.className = 'linkAnnotation';212 var data = this.data,213 linkService = this.linkService;214 var link = document.createElement('a');215 (0, _dom_utils.addLinkAttributes)(link, {216 url: data.url,217 target: data.newWindow ? _dom_utils.LinkTarget.BLANK : linkService.externalLinkTarget,218 rel: linkService.externalLinkRel219 });220 if (!data.url) {221 if (data.action) {222 this._bindNamedAction(link, data.action);223 } else {224 this._bindLink(link, data.dest);225 }226 }227 this.container.appendChild(link);228 return this.container;229 }230 }, {231 key: '_bindLink',232 value: function _bindLink(link, destination) {233 var _this2 = this;234 link.href = this.linkService.getDestinationHash(destination);235 link.onclick = function () {236 if (destination) {237 _this2.linkService.navigateTo(destination);238 }239 return false;240 };241 if (destination) {242 link.className = 'internalLink';243 }244 }245 }, {246 key: '_bindNamedAction',247 value: function _bindNamedAction(link, action) {248 var _this3 = this;249 link.href = this.linkService.getAnchorUrl('');250 link.onclick = function () {251 _this3.linkService.executeNamedAction(action);252 return false;253 };254 link.className = 'internalLink';255 }256 }]);257 return LinkAnnotationElement;258}(AnnotationElement);259var TextAnnotationElement = function (_AnnotationElement2) {260 _inherits(TextAnnotationElement, _AnnotationElement2);261 function TextAnnotationElement(parameters) {262 _classCallCheck(this, TextAnnotationElement);263 var isRenderable = !!(parameters.data.hasPopup || parameters.data.title || parameters.data.contents);264 return _possibleConstructorReturn(this, (TextAnnotationElement.__proto__ || Object.getPrototypeOf(TextAnnotationElement)).call(this, parameters, isRenderable));265 }266 _createClass(TextAnnotationElement, [{267 key: 'render',268 value: function render() {269 this.container.className = 'textAnnotation';270 var image = document.createElement('img');271 image.style.height = this.container.style.height;272 image.style.width = this.container.style.width;273 image.src = this.imageResourcesPath + 'annotation-' + this.data.name.toLowerCase() + '.svg';274 image.alt = '[{{type}} Annotation]';275 image.dataset.l10nId = 'text_annotation_type';276 image.dataset.l10nArgs = JSON.stringify({ type: this.data.name });277 if (!this.data.hasPopup) {278 this._createPopup(this.container, image, this.data);279 }280 this.container.appendChild(image);281 return this.container;282 }283 }]);284 return TextAnnotationElement;285}(AnnotationElement);286var WidgetAnnotationElement = function (_AnnotationElement3) {287 _inherits(WidgetAnnotationElement, _AnnotationElement3);288 function WidgetAnnotationElement() {289 _classCallCheck(this, WidgetAnnotationElement);290 return _possibleConstructorReturn(this, (WidgetAnnotationElement.__proto__ || Object.getPrototypeOf(WidgetAnnotationElement)).apply(this, arguments));291 }292 _createClass(WidgetAnnotationElement, [{293 key: 'render',294 value: function render() {295 return this.container;296 }297 }]);298 return WidgetAnnotationElement;299}(AnnotationElement);300var TextWidgetAnnotationElement = function (_WidgetAnnotationElem) {301 _inherits(TextWidgetAnnotationElement, _WidgetAnnotationElem);302 function TextWidgetAnnotationElement(parameters) {303 _classCallCheck(this, TextWidgetAnnotationElement);304 var isRenderable = parameters.renderInteractiveForms || !parameters.data.hasAppearance && !!parameters.data.fieldValue;305 return _possibleConstructorReturn(this, (TextWidgetAnnotationElement.__proto__ || Object.getPrototypeOf(TextWidgetAnnotationElement)).call(this, parameters, isRenderable));306 }307 _createClass(TextWidgetAnnotationElement, [{308 key: 'render',309 value: function render() {310 var TEXT_ALIGNMENT = ['left', 'center', 'right'];311 this.container.className = 'textWidgetAnnotation';312 var element = null;313 if (this.renderInteractiveForms) {314 if (this.data.multiLine) {315 element = document.createElement('textarea');316 element.textContent = this.data.fieldValue;317 } else {318 element = document.createElement('input');319 element.type = 'text';320 element.setAttribute('value', this.data.fieldValue);321 }322 element.disabled = this.data.readOnly;323 if (this.data.maxLen !== null) {324 element.maxLength = this.data.maxLen;325 }326 if (this.data.comb) {327 var fieldWidth = this.data.rect[2] - this.data.rect[0];328 var combWidth = fieldWidth / this.data.maxLen;329 element.classList.add('comb');330 element.style.letterSpacing = 'calc(' + combWidth + 'px - 1ch)';331 }332 } else {333 element = document.createElement('div');334 element.textContent = this.data.fieldValue;335 element.style.verticalAlign = 'middle';336 element.style.display = 'table-cell';337 var font = null;338 if (this.data.fontRefName) {339 font = this.page.commonObjs.getData(this.data.fontRefName);340 }341 this._setTextStyle(element, font);342 }343 if (this.data.textAlignment !== null) {344 element.style.textAlign = TEXT_ALIGNMENT[this.data.textAlignment];345 }346 this.container.appendChild(element);347 return this.container;348 }349 }, {350 key: '_setTextStyle',351 value: function _setTextStyle(element, font) {352 var style = element.style;353 style.fontSize = this.data.fontSize + 'px';354 style.direction = this.data.fontDirection < 0 ? 'rtl' : 'ltr';355 if (!font) {356 return;357 }358 style.fontWeight = font.black ? font.bold ? '900' : 'bold' : font.bold ? 'bold' : 'normal';359 style.fontStyle = font.italic ? 'italic' : 'normal';360 var fontFamily = font.loadedName ? '"' + font.loadedName + '", ' : '';361 var fallbackName = font.fallbackName || 'Helvetica, sans-serif';362 style.fontFamily = fontFamily + fallbackName;363 }364 }]);365 return TextWidgetAnnotationElement;366}(WidgetAnnotationElement);367var CheckboxWidgetAnnotationElement = function (_WidgetAnnotationElem2) {368 _inherits(CheckboxWidgetAnnotationElement, _WidgetAnnotationElem2);369 function CheckboxWidgetAnnotationElement(parameters) {370 _classCallCheck(this, CheckboxWidgetAnnotationElement);371 return _possibleConstructorReturn(this, (CheckboxWidgetAnnotationElement.__proto__ || Object.getPrototypeOf(CheckboxWidgetAnnotationElement)).call(this, parameters, parameters.renderInteractiveForms));372 }373 _createClass(CheckboxWidgetAnnotationElement, [{374 key: 'render',375 value: function render() {376 this.container.className = 'buttonWidgetAnnotation checkBox';377 var element = document.createElement('input');378 element.disabled = this.data.readOnly;379 element.type = 'checkbox';380 if (this.data.fieldValue && this.data.fieldValue !== 'Off') {381 element.setAttribute('checked', true);382 }383 this.container.appendChild(element);384 return this.container;385 }386 }]);387 return CheckboxWidgetAnnotationElement;388}(WidgetAnnotationElement);389var RadioButtonWidgetAnnotationElement = function (_WidgetAnnotationElem3) {390 _inherits(RadioButtonWidgetAnnotationElement, _WidgetAnnotationElem3);391 function RadioButtonWidgetAnnotationElement(parameters) {392 _classCallCheck(this, RadioButtonWidgetAnnotationElement);393 return _possibleConstructorReturn(this, (RadioButtonWidgetAnnotationElement.__proto__ || Object.getPrototypeOf(RadioButtonWidgetAnnotationElement)).call(this, parameters, parameters.renderInteractiveForms));394 }395 _createClass(RadioButtonWidgetAnnotationElement, [{396 key: 'render',397 value: function render() {398 this.container.className = 'buttonWidgetAnnotation radioButton';399 var element = document.createElement('input');400 element.disabled = this.data.readOnly;401 element.type = 'radio';402 element.name = this.data.fieldName;403 if (this.data.fieldValue === this.data.buttonValue) {404 element.setAttribute('checked', true);405 }406 this.container.appendChild(element);407 return this.container;408 }409 }]);410 return RadioButtonWidgetAnnotationElement;411}(WidgetAnnotationElement);412var PushButtonWidgetAnnotationElement = function (_LinkAnnotationElemen) {413 _inherits(PushButtonWidgetAnnotationElement, _LinkAnnotationElemen);414 function PushButtonWidgetAnnotationElement() {415 _classCallCheck(this, PushButtonWidgetAnnotationElement);416 return _possibleConstructorReturn(this, (PushButtonWidgetAnnotationElement.__proto__ || Object.getPrototypeOf(PushButtonWidgetAnnotationElement)).apply(this, arguments));417 }418 _createClass(PushButtonWidgetAnnotationElement, [{419 key: 'render',420 value: function render() {421 var container = _get(PushButtonWidgetAnnotationElement.prototype.__proto__ || Object.getPrototypeOf(PushButtonWidgetAnnotationElement.prototype), 'render', this).call(this);422 container.className = 'buttonWidgetAnnotation pushButton';423 return container;424 }425 }]);426 return PushButtonWidgetAnnotationElement;427}(LinkAnnotationElement);428var ChoiceWidgetAnnotationElement = function (_WidgetAnnotationElem4) {429 _inherits(ChoiceWidgetAnnotationElement, _WidgetAnnotationElem4);430 function ChoiceWidgetAnnotationElement(parameters) {431 _classCallCheck(this, ChoiceWidgetAnnotationElement);432 return _possibleConstructorReturn(this, (ChoiceWidgetAnnotationElement.__proto__ || Object.getPrototypeOf(ChoiceWidgetAnnotationElement)).call(this, parameters, parameters.renderInteractiveForms));433 }434 _createClass(ChoiceWidgetAnnotationElement, [{435 key: 'render',436 value: function render() {437 this.container.className = 'choiceWidgetAnnotation';438 var selectElement = document.createElement('select');439 selectElement.disabled = this.data.readOnly;440 if (!this.data.combo) {441 selectElement.size = this.data.options.length;442 if (this.data.multiSelect) {443 selectElement.multiple = true;444 }445 }446 for (var i = 0, ii = this.data.options.length; i < ii; i++) {447 var option = this.data.options[i];448 var optionElement = document.createElement('option');449 optionElement.textContent = option.displayValue;450 optionElement.value = option.exportValue;451 if (this.data.fieldValue.includes(option.displayValue)) {452 optionElement.setAttribute('selected', true);453 }454 selectElement.appendChild(optionElement);455 }456 this.container.appendChild(selectElement);457 return this.container;458 }459 }]);460 return ChoiceWidgetAnnotationElement;461}(WidgetAnnotationElement);462var PopupAnnotationElement = function (_AnnotationElement4) {463 _inherits(PopupAnnotationElement, _AnnotationElement4);464 function PopupAnnotationElement(parameters) {465 _classCallCheck(this, PopupAnnotationElement);466 var isRenderable = !!(parameters.data.title || parameters.data.contents);467 return _possibleConstructorReturn(this, (PopupAnnotationElement.__proto__ || Object.getPrototypeOf(PopupAnnotationElement)).call(this, parameters, isRenderable));468 }469 _createClass(PopupAnnotationElement, [{470 key: 'render',471 value: function render() {472 var IGNORE_TYPES = ['Line', 'Square', 'Circle', 'PolyLine', 'Polygon', 'Ink'];473 this.container.className = 'popupAnnotation';474 if (IGNORE_TYPES.includes(this.data.parentType)) {475 return this.container;476 }477 var selector = '[data-annotation-id="' + this.data.parentId + '"]';478 var parentElement = this.layer.querySelector(selector);479 if (!parentElement) {480 return this.container;481 }482 var popup = new PopupElement({483 container: this.container,484 trigger: parentElement,485 color: this.data.color,486 title: this.data.title,487 contents: this.data.contents488 });489 var parentLeft = parseFloat(parentElement.style.left);490 var parentWidth = parseFloat(parentElement.style.width);491 this.container.style.transformOrigin = -(parentLeft + parentWidth) + 'px -' + parentElement.style.top;492 this.container.style.left = parentLeft + parentWidth + 'px';493 this.container.appendChild(popup.render());494 return this.container;495 }496 }]);497 return PopupAnnotationElement;498}(AnnotationElement);499var PopupElement = function () {500 function PopupElement(parameters) {501 _classCallCheck(this, PopupElement);502 this.container = parameters.container;503 this.trigger = parameters.trigger;504 this.color = parameters.color;505 this.title = parameters.title;506 this.contents = parameters.contents;507 this.hideWrapper = parameters.hideWrapper || false;508 this.pinned = false;509 }510 _createClass(PopupElement, [{511 key: 'render',512 value: function render() {513 var BACKGROUND_ENLIGHT = 0.7;514 var wrapper = document.createElement('div');515 wrapper.className = 'popupWrapper';516 this.hideElement = this.hideWrapper ? wrapper : this.container;517 this.hideElement.setAttribute('hidden', true);518 var popup = document.createElement('div');519 popup.className = 'popup';520 var color = this.color;521 if (color) {522 var r = BACKGROUND_ENLIGHT * (255 - color[0]) + color[0];523 var g = BACKGROUND_ENLIGHT * (255 - color[1]) + color[1];524 var b = BACKGROUND_ENLIGHT * (255 - color[2]) + color[2];525 popup.style.backgroundColor = _util.Util.makeCssRgb(r | 0, g | 0, b | 0);526 }527 var contents = this._formatContents(this.contents);528 var title = document.createElement('h1');529 title.textContent = this.title;530 this.trigger.addEventListener('click', this._toggle.bind(this));531 this.trigger.addEventListener('mouseover', this._show.bind(this, false));532 this.trigger.addEventListener('mouseout', this._hide.bind(this, false));533 popup.addEventListener('click', this._hide.bind(this, true));534 popup.appendChild(title);535 popup.appendChild(contents);536 wrapper.appendChild(popup);537 return wrapper;538 }539 }, {540 key: '_formatContents',541 value: function _formatContents(contents) {542 var p = document.createElement('p');543 var lines = contents.split(/(?:\r\n?|\n)/);544 for (var i = 0, ii = lines.length; i < ii; ++i) {545 var line = lines[i];546 p.appendChild(document.createTextNode(line));547 if (i < ii - 1) {548 p.appendChild(document.createElement('br'));549 }550 }551 return p;552 }553 }, {554 key: '_toggle',555 value: function _toggle() {556 if (this.pinned) {557 this._hide(true);558 } else {559 this._show(true);560 }561 }562 }, {563 key: '_show',564 value: function _show() {565 var pin = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;566 if (pin) {567 this.pinned = true;568 }569 if (this.hideElement.hasAttribute('hidden')) {570 this.hideElement.removeAttribute('hidden');571 this.container.style.zIndex += 1;572 }573 }574 }, {575 key: '_hide',576 value: function _hide() {577 var unpin = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;578 if (unpin) {579 this.pinned = false;580 }581 if (!this.hideElement.hasAttribute('hidden') && !this.pinned) {582 this.hideElement.setAttribute('hidden', true);583 this.container.style.zIndex -= 1;584 }585 }586 }]);587 return PopupElement;588}();589var LineAnnotationElement = function (_AnnotationElement5) {590 _inherits(LineAnnotationElement, _AnnotationElement5);591 function LineAnnotationElement(parameters) {592 _classCallCheck(this, LineAnnotationElement);593 var isRenderable = !!(parameters.data.hasPopup || parameters.data.title || parameters.data.contents);594 return _possibleConstructorReturn(this, (LineAnnotationElement.__proto__ || Object.getPrototypeOf(LineAnnotationElement)).call(this, parameters, isRenderable, true));595 }596 _createClass(LineAnnotationElement, [{597 key: 'render',598 value: function render() {599 this.container.className = 'lineAnnotation';600 var data = this.data;601 var width = data.rect[2] - data.rect[0];602 var height = data.rect[3] - data.rect[1];603 var svg = this.svgFactory.create(width, height);604 var line = this.svgFactory.createElement('svg:line');605 line.setAttribute('x1', data.rect[2] - data.lineCoordinates[0]);606 line.setAttribute('y1', data.rect[3] - data.lineCoordinates[1]);607 line.setAttribute('x2', data.rect[2] - data.lineCoordinates[2]);608 line.setAttribute('y2', data.rect[3] - data.lineCoordinates[3]);609 line.setAttribute('stroke-width', data.borderStyle.width);610 line.setAttribute('stroke', 'transparent');611 svg.appendChild(line);612 this.container.append(svg);613 this._createPopup(this.container, line, data);614 return this.container;615 }616 }]);617 return LineAnnotationElement;618}(AnnotationElement);619var SquareAnnotationElement = function (_AnnotationElement6) {620 _inherits(SquareAnnotationElement, _AnnotationElement6);621 function SquareAnnotationElement(parameters) {622 _classCallCheck(this, SquareAnnotationElement);623 var isRenderable = !!(parameters.data.hasPopup || parameters.data.title || parameters.data.contents);624 return _possibleConstructorReturn(this, (SquareAnnotationElement.__proto__ || Object.getPrototypeOf(SquareAnnotationElement)).call(this, parameters, isRenderable, true));625 }626 _createClass(SquareAnnotationElement, [{627 key: 'render',628 value: function render() {629 this.container.className = 'squareAnnotation';630 var data = this.data;631 var width = data.rect[2] - data.rect[0];632 var height = data.rect[3] - data.rect[1];633 var svg = this.svgFactory.create(width, height);634 var borderWidth = data.borderStyle.width;635 var square = this.svgFactory.createElement('svg:rect');636 square.setAttribute('x', borderWidth / 2);637 square.setAttribute('y', borderWidth / 2);638 square.setAttribute('width', width - borderWidth);639 square.setAttribute('height', height - borderWidth);640 square.setAttribute('stroke-width', borderWidth);641 square.setAttribute('stroke', 'transparent');642 square.setAttribute('fill', 'none');643 svg.appendChild(square);644 this.container.append(svg);645 this._createPopup(this.container, square, data);646 return this.container;647 }648 }]);649 return SquareAnnotationElement;650}(AnnotationElement);651var CircleAnnotationElement = function (_AnnotationElement7) {652 _inherits(CircleAnnotationElement, _AnnotationElement7);653 function CircleAnnotationElement(parameters) {654 _classCallCheck(this, CircleAnnotationElement);655 var isRenderable = !!(parameters.data.hasPopup || parameters.data.title || parameters.data.contents);656 return _possibleConstructorReturn(this, (CircleAnnotationElement.__proto__ || Object.getPrototypeOf(CircleAnnotationElement)).call(this, parameters, isRenderable, true));657 }658 _createClass(CircleAnnotationElement, [{659 key: 'render',660 value: function render() {661 this.container.className = 'circleAnnotation';662 var data = this.data;663 var width = data.rect[2] - data.rect[0];664 var height = data.rect[3] - data.rect[1];665 var svg = this.svgFactory.create(width, height);666 var borderWidth = data.borderStyle.width;667 var circle = this.svgFactory.createElement('svg:ellipse');668 circle.setAttribute('cx', width / 2);669 circle.setAttribute('cy', height / 2);670 circle.setAttribute('rx', width / 2 - borderWidth / 2);671 circle.setAttribute('ry', height / 2 - borderWidth / 2);672 circle.setAttribute('stroke-width', borderWidth);673 circle.setAttribute('stroke', 'transparent');674 circle.setAttribute('fill', 'none');675 svg.appendChild(circle);676 this.container.append(svg);677 this._createPopup(this.container, circle, data);678 return this.container;679 }680 }]);681 return CircleAnnotationElement;682}(AnnotationElement);683var PolylineAnnotationElement = function (_AnnotationElement8) {684 _inherits(PolylineAnnotationElement, _AnnotationElement8);685 function PolylineAnnotationElement(parameters) {686 _classCallCheck(this, PolylineAnnotationElement);687 var isRenderable = !!(parameters.data.hasPopup || parameters.data.title || parameters.data.contents);688 var _this15 = _possibleConstructorReturn(this, (PolylineAnnotationElement.__proto__ || Object.getPrototypeOf(PolylineAnnotationElement)).call(this, parameters, isRenderable, true));689 _this15.containerClassName = 'polylineAnnotation';690 _this15.svgElementName = 'svg:polyline';691 return _this15;692 }693 _createClass(PolylineAnnotationElement, [{694 key: 'render',695 value: function render() {696 this.container.className = this.containerClassName;697 var data = this.data;698 var width = data.rect[2] - data.rect[0];699 var height = data.rect[3] - data.rect[1];700 var svg = this.svgFactory.create(width, height);701 var vertices = data.vertices;702 var points = [];703 for (var i = 0, ii = vertices.length; i < ii; i++) {704 var x = vertices[i].x - data.rect[0];705 var y = data.rect[3] - vertices[i].y;706 points.push(x + ',' + y);707 }708 points = points.join(' ');709 var borderWidth = data.borderStyle.width;710 var polyline = this.svgFactory.createElement(this.svgElementName);711 polyline.setAttribute('points', points);712 polyline.setAttribute('stroke-width', borderWidth);713 polyline.setAttribute('stroke', 'transparent');714 polyline.setAttribute('fill', 'none');715 svg.appendChild(polyline);716 this.container.append(svg);717 this._createPopup(this.container, polyline, data);718 return this.container;719 }720 }]);721 return PolylineAnnotationElement;722}(AnnotationElement);723var PolygonAnnotationElement = function (_PolylineAnnotationEl) {724 _inherits(PolygonAnnotationElement, _PolylineAnnotationEl);725 function PolygonAnnotationElement(parameters) {726 _classCallCheck(this, PolygonAnnotationElement);727 var _this16 = _possibleConstructorReturn(this, (PolygonAnnotationElement.__proto__ || Object.getPrototypeOf(PolygonAnnotationElement)).call(this, parameters));728 _this16.containerClassName = 'polygonAnnotation';729 _this16.svgElementName = 'svg:polygon';730 return _this16;731 }732 return PolygonAnnotationElement;733}(PolylineAnnotationElement);734var InkAnnotationElement = function (_AnnotationElement9) {735 _inherits(InkAnnotationElement, _AnnotationElement9);736 function InkAnnotationElement(parameters) {737 _classCallCheck(this, InkAnnotationElement);738 var isRenderable = !!(parameters.data.hasPopup || parameters.data.title || parameters.data.contents);739 var _this17 = _possibleConstructorReturn(this, (InkAnnotationElement.__proto__ || Object.getPrototypeOf(InkAnnotationElement)).call(this, parameters, isRenderable, true));740 _this17.containerClassName = 'inkAnnotation';741 _this17.svgElementName = 'svg:polyline';742 return _this17;743 }744 _createClass(InkAnnotationElement, [{745 key: 'render',746 value: function render() {747 this.container.className = this.containerClassName;748 var data = this.data;749 var width = data.rect[2] - data.rect[0];750 var height = data.rect[3] - data.rect[1];...
Using AI Code Generation
1var wptoolkit = require('wptoolkit');2var inkAnnotation = new wptoolkit.InkAnnotationElement();3var inkAnnotationElement = inkAnnotation.createInkAnnotationElement();4console.log(inkAnnotationElement);5var wptoolkit = require('wptoolkit');6var inkAnnotation = new wptoolkit.InkAnnotationElement();7var inkAnnotationElement = inkAnnotation.createInkAnnotationElement();8console.log(inkAnnotationElement);9var wptoolkit = require('wptoolkit');10var inkAnnotation = new wptoolkit.InkAnnotationElement();11var inkAnnotationElement = inkAnnotation.createInkAnnotationElement();12console.log(inkAnnotationElement);13var wptoolkit = require('wptoolkit');14var inkAnnotation = new wptoolkit.InkAnnotationElement();15var inkAnnotationElement = inkAnnotation.createInkAnnotationElement();16console.log(inkAnnotationElement);17var wptoolkit = require('wptoolkit');18var inkAnnotation = new wptoolkit.InkAnnotationElement();19var inkAnnotationElement = inkAnnotation.createInkAnnotationElement();20console.log(inkAnnotationElement);21var wptoolkit = require('wptoolkit');22var inkAnnotation = new wptoolkit.InkAnnotationElement();23var inkAnnotationElement = inkAnnotation.createInkAnnotationElement();24console.log(inkAnnotationElement);25var wptoolkit = require('wptoolkit');26var inkAnnotation = new wptoolkit.InkAnnotationElement();27var inkAnnotationElement = inkAnnotation.createInkAnnotationElement();28console.log(inkAnnotationElement);29var wptoolkit = require('wptoolkit');30var inkAnnotation = new wptoolkit.InkAnnotationElement();
Using AI Code Generation
1const wptools = require('wptools');2const path = require('path');3const test = async () => {4 let filepath = path.join(__dirname, 'test.png');5 let ink = await wptools.InkAnnotationElement(filepath);6 console.log(ink);7}8test();9const wptools = require('wptools');10const path = require('path');11const test = async () => {12 let filepath = path.join(__dirname, 'test.png');13 let ink = await wptools.InkAnnotationElement(filepath);14 console.log(ink);15}16test();17const wptools = require('wptools');18const path = require('path');19const test = async () => {20 let filepath = path.join(__dirname, 'test.png');21 let ink = await wptools.InkAnnotationElement(filepath);22 console.log(ink);23}24test();
Using AI Code Generation
1var doc = app.activeDocument;2var page = doc.pages[0];3var inkAnnotation = new InkAnnotationElement();4inkAnnotation.page = page;5inkAnnotation.setInkList([[100,100],[200,200],[300,300]]);6inkAnnotation.draw();7function InkAnnotationElement() {8 this.inkList = [];9}10InkAnnotationElement.prototype.setInkList = function (inkList) {11 this.inkList = inkList;12}13InkAnnotationElement.prototype.draw = function () {14 var inkList = this.inkList;15 var page = this.page;16 var inkAnnotation = page.inkAnnotations.add();17 inkAnnotation.inkList = inkList;18}
Using AI Code Generation
1var inkElement = new WPT.InkAnnotationElement();2inkElement.setStrokes(strokes);3var inkElement = new WPT.InkAnnotationElement();4inkElement.setStrokes(strokes);5var inkElement = new WPT.InkAnnotationElement();6inkElement.setStrokes(strokes);7var inkElement = new WPT.InkAnnotationElement();8inkElement.setStrokes(strokes);9var inkElement = new WPT.InkAnnotationElement();10inkElement.setStrokes(strokes);11var inkElement = new WPT.InkAnnotationElement();12inkElement.setStrokes(strokes);13var inkElement = new WPT.InkAnnotationElement();14inkElement.setStrokes(strokes);15var inkElement = new WPT.InkAnnotationElement();16inkElement.setStrokes(strokes);17var inkElement = new WPT.InkAnnotationElement();18inkElement.setStrokes(strokes);
Using AI Code Generation
1var element = new WPF.InkAnnotationElement();2element.setInkData("InkData");3element.setInkWidth(50);4element.setInkHeight(50);5element.setInkStrokeWidth(10);6element.setInkStrokeColor("red");7element.setInkStrokeStyle("Dot");8element.setInkStrokeDashStyle("Dash");9element.setInkStrokeDashCap("Round");10element.setInkStrokeDashOffset(10);11element.setInkStrokeStartLineCap("Round");12element.setInkStrokeEndLineCap("Round");13element.setInkStrokeLineJoin("Round");14element.setInkStrokeMiterLimit(5);15element.setInkStrokeOpacity(0.8);16element.setInkStrokeTransform("Matrix(1, 0, 0, 1, 0, 0)");17element.setInkStrokeTransformOrigin("50, 50");18element.setInkStrokeThickness(10);19element.setInkStrokeMode("Copy");20element.setInkStrokeUnit("Pixel");21element.setInkStrokeAlignment("Center");22element.setInkStrokeTrimStart(10);23element.setInkStrokeTrimEnd(10);24element.setInkStrokeTrimOffset(10);25element.setInkStrokeIsHighlighter(false);26element.setInkStrokeIsHitTestVisible(true);27element.setInkStrokeIsVisible(true);28element.setInkStrokeIsEnabled(true);29element.setInkStrokeIsManipulationEnabled(true);30element.setInkStrokeIsTapEnabled(true);31element.setInkStrokeIsDoubleTapEnabled(true);32element.setInkStrokeIsRightTapEnabled(true);33element.setInkStrokeIsHoldingEnabled(true);34element.setInkStrokeIsRightHoldingEnabled(true);35element.setInkStrokeIsFlickEnabled(true);36element.setInkStrokeIsManipulationInertiaEnabled(true);37element.setInkStrokeIsTwoFingerManipulationEnabled(true);38element.setInkStrokeIsTwoFingerTapEnabled(true);39element.setInkStrokeIsCrossSlideEnabled(true);40element.setInkStrokeIsDragEnabled(true);41element.setInkStrokeIsScaleEnabled(true);42element.setInkStrokeIsRotationEnabled(true);43element.setInkStrokeIsTranslateXEnabled(true);44element.setInkStrokeIsTranslateYEnabled(true);45element.setInkStrokeIsTranslateZEnabled(true);46element.setInkStrokeIsTranslateInertiaEnabled(true);
Automation Testing Tutorials
Learn to execute automation testing from scratch with LambdaTest Learning Hub. Right from setting up the prerequisites to run your first automation test, to following best practices and diving deeper into advanced test scenarios. LambdaTest Learning Hubs compile a list of step-by-step guides to help you be proficient with different test automation frameworks i.e. Selenium, Cypress, TestNG etc.
LambdaTest Learning Hubs:
- JUnit Tutorial
- TestNG Tutorial
- Webdriver Tutorial
- WebDriverIO Tutorial
- Protractor Tutorial
- Selenium 4 Tutorial
- Jenkins Tutorial
- NUnit Tutorial
- Jest Tutorial
- Playwright Tutorial
- Cypress Tutorial
- PyTest Tutorial
YouTube
You could also refer to video tutorials over LambdaTest YouTube channel to get step by step demonstration from industry experts.
Run wpt automation tests on LambdaTest cloud grid
Perform automation testing on 3000+ real desktop and mobile devices online.
Try LambdaTest Now !!
Get 100 minutes of automation test minutes FREE!!
Was this article helpful?
