@idraw/board
Advanced tools
@idraw/board - npm Package Compare versions
Comparing version 0.0.4-alpha.15 to 0.0.4-alpha.16
| 'use strict'; | ||
| /*! ***************************************************************************** | ||
| Copyright (c) Microsoft Corporation. | ||
| Permission to use, copy, modify, and/or distribute this software for any | ||
| purpose with or without fee is hereby granted. | ||
| THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH | ||
| REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY | ||
| AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, | ||
| INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM | ||
| LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR | ||
| OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR | ||
| PERFORMANCE OF THIS SOFTWARE. | ||
| ***************************************************************************** */ | ||
| var __assign = function() { | ||
@@ -31,6 +16,4 @@ __assign = Object.assign || function __assign(t) { | ||
| return function (context, next) { | ||
| // let index = -1; | ||
| return dispatch(0); | ||
| function dispatch(i) { | ||
| // index = i | ||
| var fn = middleware[i]; | ||
@@ -74,3 +57,2 @@ if (i === middleware.length && next) { | ||
| } | ||
| function downloadImageFromCanvas(canvas, opts) { | ||
@@ -86,3 +68,2 @@ var filename = opts.filename, _a = opts.type, type = _a === void 0 ? 'image/jpeg' : _a; | ||
| } | ||
| function toColorHexNum(color) { | ||
@@ -97,3 +78,2 @@ return parseInt(color.replace(/^\#/, '0x')); | ||
| } | ||
| function createUUID() { | ||
@@ -105,3 +85,2 @@ function str4() { | ||
| } | ||
| function deepClone(target) { | ||
@@ -134,3 +113,2 @@ function _clone(t) { | ||
| } | ||
| function parsePrototype(data) { | ||
@@ -180,3 +158,2 @@ var typeStr = Object.prototype.toString.call(data) || ''; | ||
| }; | ||
| var Image = window.Image, Blob = window.Blob, FileReader = window.FileReader; | ||
@@ -194,18 +171,4 @@ function loadImage(src) { | ||
| } | ||
| function loadSVG(svg, opts) { | ||
| function loadSVG(svg) { | ||
| return new Promise(function (resolve, reject) { | ||
| // let style = ''; | ||
| // if (opts) { | ||
| // style = `min-height: ${opts.height}px; min-width: ${opts.width}px` | ||
| // } | ||
| // const _svg = ` | ||
| // <svg xmlns="http://www.w3.org/2000/svg" | ||
| // width="${opts?.width || ''}" | ||
| // height="${opts?.height || ''}" | ||
| // style="${style}" > | ||
| // <foreignObject width="100%" height="100%"> | ||
| // ${svg} | ||
| // </foreignObject> | ||
| // </svg> | ||
| // `; | ||
| var _svg = svg; | ||
@@ -229,3 +192,23 @@ var image = new Image(); | ||
| } | ||
| function loadHTML(html, opts) { | ||
| var width = opts.width, height = opts.height; | ||
| return new Promise(function (resolve, reject) { | ||
| var _svg = "\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"" + (width || '') + "\" height = \"" + (height || '') + "\">\n <foreignObject width=\"100%\" height=\"100%\">\n <div xmlns = \"http://www.w3.org/1999/xhtml\">\n " + html + "\n </div>\n </foreignObject>\n </svg>\n "; | ||
| var image = new Image(); | ||
| var blob = new Blob([_svg], { type: 'image/svg+xml;charset=utf-8' }); | ||
| var reader = new FileReader(); | ||
| reader.readAsDataURL(blob); | ||
| reader.onload = function (event) { | ||
| var _a; | ||
| var base64 = (_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.result; | ||
| image.onload = function () { | ||
| resolve(image); | ||
| }; | ||
| image.src = base64; | ||
| }; | ||
| reader.onerror = function (err) { | ||
| reject(err); | ||
| }; | ||
| }); | ||
| } | ||
| var index = { | ||
@@ -240,2 +223,3 @@ time: { | ||
| loadSVG: loadSVG, | ||
| loadHTML: loadHTML, | ||
| }, | ||
@@ -259,3 +243,3 @@ file: { | ||
| var BoardEvent = /** @class */ (function () { | ||
| var BoardEvent = (function () { | ||
| function BoardEvent() { | ||
@@ -312,3 +296,3 @@ this._listeners = new Map(); | ||
| var Watcher = /** @class */ (function () { | ||
| var Watcher = (function () { | ||
| function Watcher(canvas) { | ||
@@ -395,5 +379,3 @@ this._isMoving = false; | ||
| var y = 0; | ||
| // @ts-ignore | ||
| if (e && e.touches && e.touches.length > 0) { | ||
| // @ts-ignore | ||
| var touch = e.touches[0]; | ||
@@ -406,5 +388,3 @@ if (touch) { | ||
| else { | ||
| // @ts-ignore | ||
| x = e.clientX; | ||
| // @ts-ignore | ||
| y = e.clientY; | ||
@@ -448,6 +428,3 @@ } | ||
| var Context = /** @class */ (function () { | ||
| // private _scale: number; | ||
| // private _scrollX: number; | ||
| // private _scrollY: number; | ||
| var Context = (function () { | ||
| function Context(ctx, opts) { | ||
@@ -588,3 +565,3 @@ this._opts = opts; | ||
| var strList = []; | ||
| if (opts.fontWeight) { | ||
| if (opts.fontWeight === 'bold') { | ||
| strList.push("" + opts.fontWeight); | ||
@@ -595,3 +572,2 @@ } | ||
| this._ctx.font = "" + strList.join(' '); | ||
| // console.log('this._ctx.font =',this._ctx.font); | ||
| }; | ||
@@ -604,2 +580,11 @@ Context.prototype.setTextBaseline = function (baseline) { | ||
| }; | ||
| Context.prototype.save = function () { | ||
| this._ctx.save(); | ||
| }; | ||
| Context.prototype.restore = function () { | ||
| this._ctx.restore(); | ||
| }; | ||
| Context.prototype.scale = function (ratioX, ratioY) { | ||
| this._ctx.scale(ratioX, ratioY); | ||
| }; | ||
| Context.prototype._doSize = function (num) { | ||
@@ -625,3 +610,3 @@ return this._opts.devicePixelRatio * num; | ||
| }; | ||
| var Scroller = /** @class */ (function () { | ||
| var Scroller = (function () { | ||
| function Scroller(ctx, opts) { | ||
@@ -638,6 +623,4 @@ this._displayCtx = ctx; | ||
| ctx.fillStyle = wrapper.color; | ||
| // x-line | ||
| ctx.fillRect(0, this._doSize(height - wrapper.lineSize), this._doSize(width), this._doSize(wrapper.lineSize)); | ||
| ctx.globalAlpha = 1; | ||
| // x-slider | ||
| drawBox(ctx, { | ||
@@ -655,6 +638,4 @@ x: this._doSize(wrapper.translateX), | ||
| ctx.fillStyle = wrapper.color; | ||
| // y-line | ||
| ctx.fillRect(this._doSize(width - wrapper.lineSize), 0, this._doSize(wrapper.lineSize), this._doSize(height)); | ||
| ctx.globalAlpha = 1; | ||
| // y-slider | ||
| drawBox(ctx, { | ||
@@ -720,4 +701,2 @@ x: this._doSize(width - wrapper.lineSize), | ||
| translateX = Math.min(Math.max(0, translateX - xSize / 2), width - xSize); | ||
| // const xUnit = this.calcScreenScrollUnit(position.left, position.right, xSize, width); | ||
| // translateX = translateX * xUnit; | ||
| } | ||
@@ -728,4 +707,2 @@ var translateY = 0; | ||
| translateY = Math.min(Math.max(0, translateY - ySize / 2), height - ySize); | ||
| // const yUnit = this.calcScreenScrollUnit(position.top, position.bottom, ySize, height); | ||
| // translateY = translateY * yUnit; | ||
| } | ||
@@ -781,3 +758,3 @@ var scrollWrapper = { | ||
| var _ctx$1 = Symbol('_ctx'); | ||
| var Screen = /** @class */ (function () { | ||
| var Screen = (function () { | ||
| function Screen(ctx, opts) { | ||
@@ -793,5 +770,3 @@ this[_opts$1] = opts; | ||
| var _a = this[_opts$1], width = _a.width, height = _a.height, contextWidth = _a.contextWidth, contextHeight = _a.contextHeight, pxRatio = _a.devicePixelRatio; | ||
| // init scroll | ||
| if (contextWidth * scaleRatio <= width) { | ||
| // make context center | ||
| this[_ctx$1].setTransform({ | ||
@@ -802,3 +777,2 @@ scrollX: (width - contextWidth * scaleRatio) / 2, | ||
| if (contextHeight * scaleRatio <= height) { | ||
| // make context center | ||
| this[_ctx$1].setTransform({ | ||
@@ -819,3 +793,2 @@ scrollY: (height - contextHeight * scaleRatio) / 2, | ||
| var _b = this[_ctx$1].getTransform(), _scrollX = _b.scrollX, _scrollY = _b.scrollY; | ||
| // reset scroll | ||
| if (_scrollX < 0 && Math.abs(_scrollX) > Math.abs(contextWidth * scaleRatio - width)) { | ||
@@ -831,3 +804,2 @@ this[_ctx$1].setTransform({ | ||
| } | ||
| // result size | ||
| var _c = this[_ctx$1].getTransform(), scrollX = _c.scrollX, scrollY = _c.scrollY; | ||
@@ -898,3 +870,3 @@ var size = { | ||
| var throttle = index.time.throttle; | ||
| var Board = /** @class */ (function () { | ||
| var Board = (function () { | ||
| function Board(mount, opts) { | ||
@@ -901,0 +873,0 @@ this[_a] = false; |
@@ -117,6 +117,9 @@ import { TypeBoardOptions } from '@idraw/types'; | ||
| fontFamily?: string; | ||
| fontWeight?: string; | ||
| fontWeight?: 'bold'; | ||
| }): void; | ||
| setTextBaseline(baseline: CanvasTextBaseline): void; | ||
| setGlobalAlpha(alpha: number): void; | ||
| save(): void; | ||
| restore(): void; | ||
| scale(ratioX: number, ratioY: number): void; | ||
| private _doSize; | ||
@@ -123,0 +126,0 @@ private _doX; |
@@ -1,16 +0,1 @@ | ||
| /*! ***************************************************************************** | ||
| Copyright (c) Microsoft Corporation. | ||
| Permission to use, copy, modify, and/or distribute this software for any | ||
| purpose with or without fee is hereby granted. | ||
| THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH | ||
| REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY | ||
| AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, | ||
| INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM | ||
| LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR | ||
| OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR | ||
| PERFORMANCE OF THIS SOFTWARE. | ||
| ***************************************************************************** */ | ||
| var __assign = function() { | ||
@@ -29,6 +14,4 @@ __assign = Object.assign || function __assign(t) { | ||
| return function (context, next) { | ||
| // let index = -1; | ||
| return dispatch(0); | ||
| function dispatch(i) { | ||
| // index = i | ||
| var fn = middleware[i]; | ||
@@ -72,3 +55,2 @@ if (i === middleware.length && next) { | ||
| } | ||
| function downloadImageFromCanvas(canvas, opts) { | ||
@@ -84,3 +66,2 @@ var filename = opts.filename, _a = opts.type, type = _a === void 0 ? 'image/jpeg' : _a; | ||
| } | ||
| function toColorHexNum(color) { | ||
@@ -95,3 +76,2 @@ return parseInt(color.replace(/^\#/, '0x')); | ||
| } | ||
| function createUUID() { | ||
@@ -103,3 +83,2 @@ function str4() { | ||
| } | ||
| function deepClone(target) { | ||
@@ -132,3 +111,2 @@ function _clone(t) { | ||
| } | ||
| function parsePrototype(data) { | ||
@@ -178,3 +156,2 @@ var typeStr = Object.prototype.toString.call(data) || ''; | ||
| }; | ||
| var Image = window.Image, Blob = window.Blob, FileReader = window.FileReader; | ||
@@ -192,18 +169,4 @@ function loadImage(src) { | ||
| } | ||
| function loadSVG(svg, opts) { | ||
| function loadSVG(svg) { | ||
| return new Promise(function (resolve, reject) { | ||
| // let style = ''; | ||
| // if (opts) { | ||
| // style = `min-height: ${opts.height}px; min-width: ${opts.width}px` | ||
| // } | ||
| // const _svg = ` | ||
| // <svg xmlns="http://www.w3.org/2000/svg" | ||
| // width="${opts?.width || ''}" | ||
| // height="${opts?.height || ''}" | ||
| // style="${style}" > | ||
| // <foreignObject width="100%" height="100%"> | ||
| // ${svg} | ||
| // </foreignObject> | ||
| // </svg> | ||
| // `; | ||
| var _svg = svg; | ||
@@ -227,3 +190,23 @@ var image = new Image(); | ||
| } | ||
| function loadHTML(html, opts) { | ||
| var width = opts.width, height = opts.height; | ||
| return new Promise(function (resolve, reject) { | ||
| var _svg = "\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"" + (width || '') + "\" height = \"" + (height || '') + "\">\n <foreignObject width=\"100%\" height=\"100%\">\n <div xmlns = \"http://www.w3.org/1999/xhtml\">\n " + html + "\n </div>\n </foreignObject>\n </svg>\n "; | ||
| var image = new Image(); | ||
| var blob = new Blob([_svg], { type: 'image/svg+xml;charset=utf-8' }); | ||
| var reader = new FileReader(); | ||
| reader.readAsDataURL(blob); | ||
| reader.onload = function (event) { | ||
| var _a; | ||
| var base64 = (_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.result; | ||
| image.onload = function () { | ||
| resolve(image); | ||
| }; | ||
| image.src = base64; | ||
| }; | ||
| reader.onerror = function (err) { | ||
| reject(err); | ||
| }; | ||
| }); | ||
| } | ||
| var index = { | ||
@@ -238,2 +221,3 @@ time: { | ||
| loadSVG: loadSVG, | ||
| loadHTML: loadHTML, | ||
| }, | ||
@@ -257,3 +241,3 @@ file: { | ||
| var BoardEvent = /** @class */ (function () { | ||
| var BoardEvent = (function () { | ||
| function BoardEvent() { | ||
@@ -310,3 +294,3 @@ this._listeners = new Map(); | ||
| var Watcher = /** @class */ (function () { | ||
| var Watcher = (function () { | ||
| function Watcher(canvas) { | ||
@@ -393,5 +377,3 @@ this._isMoving = false; | ||
| var y = 0; | ||
| // @ts-ignore | ||
| if (e && e.touches && e.touches.length > 0) { | ||
| // @ts-ignore | ||
| var touch = e.touches[0]; | ||
@@ -404,5 +386,3 @@ if (touch) { | ||
| else { | ||
| // @ts-ignore | ||
| x = e.clientX; | ||
| // @ts-ignore | ||
| y = e.clientY; | ||
@@ -446,6 +426,3 @@ } | ||
| var Context = /** @class */ (function () { | ||
| // private _scale: number; | ||
| // private _scrollX: number; | ||
| // private _scrollY: number; | ||
| var Context = (function () { | ||
| function Context(ctx, opts) { | ||
@@ -586,3 +563,3 @@ this._opts = opts; | ||
| var strList = []; | ||
| if (opts.fontWeight) { | ||
| if (opts.fontWeight === 'bold') { | ||
| strList.push("" + opts.fontWeight); | ||
@@ -593,3 +570,2 @@ } | ||
| this._ctx.font = "" + strList.join(' '); | ||
| // console.log('this._ctx.font =',this._ctx.font); | ||
| }; | ||
@@ -602,2 +578,11 @@ Context.prototype.setTextBaseline = function (baseline) { | ||
| }; | ||
| Context.prototype.save = function () { | ||
| this._ctx.save(); | ||
| }; | ||
| Context.prototype.restore = function () { | ||
| this._ctx.restore(); | ||
| }; | ||
| Context.prototype.scale = function (ratioX, ratioY) { | ||
| this._ctx.scale(ratioX, ratioY); | ||
| }; | ||
| Context.prototype._doSize = function (num) { | ||
@@ -623,3 +608,3 @@ return this._opts.devicePixelRatio * num; | ||
| }; | ||
| var Scroller = /** @class */ (function () { | ||
| var Scroller = (function () { | ||
| function Scroller(ctx, opts) { | ||
@@ -636,6 +621,4 @@ this._displayCtx = ctx; | ||
| ctx.fillStyle = wrapper.color; | ||
| // x-line | ||
| ctx.fillRect(0, this._doSize(height - wrapper.lineSize), this._doSize(width), this._doSize(wrapper.lineSize)); | ||
| ctx.globalAlpha = 1; | ||
| // x-slider | ||
| drawBox(ctx, { | ||
@@ -653,6 +636,4 @@ x: this._doSize(wrapper.translateX), | ||
| ctx.fillStyle = wrapper.color; | ||
| // y-line | ||
| ctx.fillRect(this._doSize(width - wrapper.lineSize), 0, this._doSize(wrapper.lineSize), this._doSize(height)); | ||
| ctx.globalAlpha = 1; | ||
| // y-slider | ||
| drawBox(ctx, { | ||
@@ -718,4 +699,2 @@ x: this._doSize(width - wrapper.lineSize), | ||
| translateX = Math.min(Math.max(0, translateX - xSize / 2), width - xSize); | ||
| // const xUnit = this.calcScreenScrollUnit(position.left, position.right, xSize, width); | ||
| // translateX = translateX * xUnit; | ||
| } | ||
@@ -726,4 +705,2 @@ var translateY = 0; | ||
| translateY = Math.min(Math.max(0, translateY - ySize / 2), height - ySize); | ||
| // const yUnit = this.calcScreenScrollUnit(position.top, position.bottom, ySize, height); | ||
| // translateY = translateY * yUnit; | ||
| } | ||
@@ -779,3 +756,3 @@ var scrollWrapper = { | ||
| var _ctx$1 = Symbol('_ctx'); | ||
| var Screen = /** @class */ (function () { | ||
| var Screen = (function () { | ||
| function Screen(ctx, opts) { | ||
@@ -791,5 +768,3 @@ this[_opts$1] = opts; | ||
| var _a = this[_opts$1], width = _a.width, height = _a.height, contextWidth = _a.contextWidth, contextHeight = _a.contextHeight, pxRatio = _a.devicePixelRatio; | ||
| // init scroll | ||
| if (contextWidth * scaleRatio <= width) { | ||
| // make context center | ||
| this[_ctx$1].setTransform({ | ||
@@ -800,3 +775,2 @@ scrollX: (width - contextWidth * scaleRatio) / 2, | ||
| if (contextHeight * scaleRatio <= height) { | ||
| // make context center | ||
| this[_ctx$1].setTransform({ | ||
@@ -817,3 +791,2 @@ scrollY: (height - contextHeight * scaleRatio) / 2, | ||
| var _b = this[_ctx$1].getTransform(), _scrollX = _b.scrollX, _scrollY = _b.scrollY; | ||
| // reset scroll | ||
| if (_scrollX < 0 && Math.abs(_scrollX) > Math.abs(contextWidth * scaleRatio - width)) { | ||
@@ -829,3 +802,2 @@ this[_ctx$1].setTransform({ | ||
| } | ||
| // result size | ||
| var _c = this[_ctx$1].getTransform(), scrollX = _c.scrollX, scrollY = _c.scrollY; | ||
@@ -896,3 +868,3 @@ var size = { | ||
| var throttle = index.time.throttle; | ||
| var Board = /** @class */ (function () { | ||
| var Board = (function () { | ||
| function Board(mount, opts) { | ||
@@ -899,0 +871,0 @@ this[_a] = false; |
@@ -5,17 +5,2 @@ this.iDraw = this.iDraw || {}; | ||
| /*! ***************************************************************************** | ||
| Copyright (c) Microsoft Corporation. | ||
| Permission to use, copy, modify, and/or distribute this software for any | ||
| purpose with or without fee is hereby granted. | ||
| THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH | ||
| REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY | ||
| AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, | ||
| INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM | ||
| LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR | ||
| OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR | ||
| PERFORMANCE OF THIS SOFTWARE. | ||
| ***************************************************************************** */ | ||
| var __assign = function() { | ||
@@ -34,6 +19,4 @@ __assign = Object.assign || function __assign(t) { | ||
| return function (context, next) { | ||
| // let index = -1; | ||
| return dispatch(0); | ||
| function dispatch(i) { | ||
| // index = i | ||
| var fn = middleware[i]; | ||
@@ -77,3 +60,2 @@ if (i === middleware.length && next) { | ||
| } | ||
| function downloadImageFromCanvas(canvas, opts) { | ||
@@ -89,3 +71,2 @@ var filename = opts.filename, _a = opts.type, type = _a === void 0 ? 'image/jpeg' : _a; | ||
| } | ||
| function toColorHexNum(color) { | ||
@@ -100,3 +81,2 @@ return parseInt(color.replace(/^\#/, '0x')); | ||
| } | ||
| function createUUID() { | ||
@@ -108,3 +88,2 @@ function str4() { | ||
| } | ||
| function deepClone(target) { | ||
@@ -137,3 +116,2 @@ function _clone(t) { | ||
| } | ||
| function parsePrototype(data) { | ||
@@ -183,3 +161,2 @@ var typeStr = Object.prototype.toString.call(data) || ''; | ||
| }; | ||
| var Image = window.Image, Blob = window.Blob, FileReader = window.FileReader; | ||
@@ -197,18 +174,4 @@ function loadImage(src) { | ||
| } | ||
| function loadSVG(svg, opts) { | ||
| function loadSVG(svg) { | ||
| return new Promise(function (resolve, reject) { | ||
| // let style = ''; | ||
| // if (opts) { | ||
| // style = `min-height: ${opts.height}px; min-width: ${opts.width}px` | ||
| // } | ||
| // const _svg = ` | ||
| // <svg xmlns="http://www.w3.org/2000/svg" | ||
| // width="${opts?.width || ''}" | ||
| // height="${opts?.height || ''}" | ||
| // style="${style}" > | ||
| // <foreignObject width="100%" height="100%"> | ||
| // ${svg} | ||
| // </foreignObject> | ||
| // </svg> | ||
| // `; | ||
| var _svg = svg; | ||
@@ -232,3 +195,23 @@ var image = new Image(); | ||
| } | ||
| function loadHTML(html, opts) { | ||
| var width = opts.width, height = opts.height; | ||
| return new Promise(function (resolve, reject) { | ||
| var _svg = "\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"" + (width || '') + "\" height = \"" + (height || '') + "\">\n <foreignObject width=\"100%\" height=\"100%\">\n <div xmlns = \"http://www.w3.org/1999/xhtml\">\n " + html + "\n </div>\n </foreignObject>\n </svg>\n "; | ||
| var image = new Image(); | ||
| var blob = new Blob([_svg], { type: 'image/svg+xml;charset=utf-8' }); | ||
| var reader = new FileReader(); | ||
| reader.readAsDataURL(blob); | ||
| reader.onload = function (event) { | ||
| var _a; | ||
| var base64 = (_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.result; | ||
| image.onload = function () { | ||
| resolve(image); | ||
| }; | ||
| image.src = base64; | ||
| }; | ||
| reader.onerror = function (err) { | ||
| reject(err); | ||
| }; | ||
| }); | ||
| } | ||
| var index = { | ||
@@ -243,2 +226,3 @@ time: { | ||
| loadSVG: loadSVG, | ||
| loadHTML: loadHTML, | ||
| }, | ||
@@ -262,3 +246,3 @@ file: { | ||
| var BoardEvent = /** @class */ (function () { | ||
| var BoardEvent = (function () { | ||
| function BoardEvent() { | ||
@@ -315,3 +299,3 @@ this._listeners = new Map(); | ||
| var Watcher = /** @class */ (function () { | ||
| var Watcher = (function () { | ||
| function Watcher(canvas) { | ||
@@ -398,5 +382,3 @@ this._isMoving = false; | ||
| var y = 0; | ||
| // @ts-ignore | ||
| if (e && e.touches && e.touches.length > 0) { | ||
| // @ts-ignore | ||
| var touch = e.touches[0]; | ||
@@ -409,5 +391,3 @@ if (touch) { | ||
| else { | ||
| // @ts-ignore | ||
| x = e.clientX; | ||
| // @ts-ignore | ||
| y = e.clientY; | ||
@@ -451,6 +431,3 @@ } | ||
| var Context = /** @class */ (function () { | ||
| // private _scale: number; | ||
| // private _scrollX: number; | ||
| // private _scrollY: number; | ||
| var Context = (function () { | ||
| function Context(ctx, opts) { | ||
@@ -591,3 +568,3 @@ this._opts = opts; | ||
| var strList = []; | ||
| if (opts.fontWeight) { | ||
| if (opts.fontWeight === 'bold') { | ||
| strList.push("" + opts.fontWeight); | ||
@@ -598,3 +575,2 @@ } | ||
| this._ctx.font = "" + strList.join(' '); | ||
| // console.log('this._ctx.font =',this._ctx.font); | ||
| }; | ||
@@ -607,2 +583,11 @@ Context.prototype.setTextBaseline = function (baseline) { | ||
| }; | ||
| Context.prototype.save = function () { | ||
| this._ctx.save(); | ||
| }; | ||
| Context.prototype.restore = function () { | ||
| this._ctx.restore(); | ||
| }; | ||
| Context.prototype.scale = function (ratioX, ratioY) { | ||
| this._ctx.scale(ratioX, ratioY); | ||
| }; | ||
| Context.prototype._doSize = function (num) { | ||
@@ -628,3 +613,3 @@ return this._opts.devicePixelRatio * num; | ||
| }; | ||
| var Scroller = /** @class */ (function () { | ||
| var Scroller = (function () { | ||
| function Scroller(ctx, opts) { | ||
@@ -641,6 +626,4 @@ this._displayCtx = ctx; | ||
| ctx.fillStyle = wrapper.color; | ||
| // x-line | ||
| ctx.fillRect(0, this._doSize(height - wrapper.lineSize), this._doSize(width), this._doSize(wrapper.lineSize)); | ||
| ctx.globalAlpha = 1; | ||
| // x-slider | ||
| drawBox(ctx, { | ||
@@ -658,6 +641,4 @@ x: this._doSize(wrapper.translateX), | ||
| ctx.fillStyle = wrapper.color; | ||
| // y-line | ||
| ctx.fillRect(this._doSize(width - wrapper.lineSize), 0, this._doSize(wrapper.lineSize), this._doSize(height)); | ||
| ctx.globalAlpha = 1; | ||
| // y-slider | ||
| drawBox(ctx, { | ||
@@ -723,4 +704,2 @@ x: this._doSize(width - wrapper.lineSize), | ||
| translateX = Math.min(Math.max(0, translateX - xSize / 2), width - xSize); | ||
| // const xUnit = this.calcScreenScrollUnit(position.left, position.right, xSize, width); | ||
| // translateX = translateX * xUnit; | ||
| } | ||
@@ -731,4 +710,2 @@ var translateY = 0; | ||
| translateY = Math.min(Math.max(0, translateY - ySize / 2), height - ySize); | ||
| // const yUnit = this.calcScreenScrollUnit(position.top, position.bottom, ySize, height); | ||
| // translateY = translateY * yUnit; | ||
| } | ||
@@ -784,3 +761,3 @@ var scrollWrapper = { | ||
| var _ctx$1 = Symbol('_ctx'); | ||
| var Screen = /** @class */ (function () { | ||
| var Screen = (function () { | ||
| function Screen(ctx, opts) { | ||
@@ -796,5 +773,3 @@ this[_opts$1] = opts; | ||
| var _a = this[_opts$1], width = _a.width, height = _a.height, contextWidth = _a.contextWidth, contextHeight = _a.contextHeight, pxRatio = _a.devicePixelRatio; | ||
| // init scroll | ||
| if (contextWidth * scaleRatio <= width) { | ||
| // make context center | ||
| this[_ctx$1].setTransform({ | ||
@@ -805,3 +780,2 @@ scrollX: (width - contextWidth * scaleRatio) / 2, | ||
| if (contextHeight * scaleRatio <= height) { | ||
| // make context center | ||
| this[_ctx$1].setTransform({ | ||
@@ -822,3 +796,2 @@ scrollY: (height - contextHeight * scaleRatio) / 2, | ||
| var _b = this[_ctx$1].getTransform(), _scrollX = _b.scrollX, _scrollY = _b.scrollY; | ||
| // reset scroll | ||
| if (_scrollX < 0 && Math.abs(_scrollX) > Math.abs(contextWidth * scaleRatio - width)) { | ||
@@ -834,3 +807,2 @@ this[_ctx$1].setTransform({ | ||
| } | ||
| // result size | ||
| var _c = this[_ctx$1].getTransform(), scrollX = _c.scrollX, scrollY = _c.scrollY; | ||
@@ -901,3 +873,3 @@ var size = { | ||
| var throttle = index.time.throttle; | ||
| var Board = /** @class */ (function () { | ||
| var Board = (function () { | ||
| function Board(mount, opts) { | ||
@@ -904,0 +876,0 @@ this[_a] = false; |
| { | ||
| "name": "@idraw/board", | ||
| "version": "0.0.4-alpha.15", | ||
| "version": "0.0.4-alpha.16", | ||
| "description": "", | ||
@@ -26,6 +26,6 @@ "main": "dist/index.cjs.js", | ||
| "devDependencies": { | ||
| "@idraw/types": "^0.0.4-alpha.15" | ||
| "@idraw/types": "^0.0.4-alpha.16" | ||
| }, | ||
| "dependencies": { | ||
| "@idraw/util": "^0.0.4-alpha.15" | ||
| "@idraw/util": "^0.0.4-alpha.16" | ||
| }, | ||
@@ -35,3 +35,3 @@ "publishConfig": { | ||
| }, | ||
| "gitHead": "4125d5dd3aefb61e970606058b6cd26cb7967b53" | ||
| "gitHead": "d584bbed8599c289bd39740061c2108c4cfa74de" | ||
| } |
Worsened metrics
- Total package byte prevSize
- decreased by-2.42%
132781
- Lines of code
- decreased by-1.5%
3342
Dependency changes
Updated@idraw/util@^0.0.4-alpha.16