From 90d0fcf7e3e4a650eb4d308fb3cef94866113ed0 Mon Sep 17 00:00:00 2001 From: "Paper.js Bot" Date: Thu, 1 Dec 2022 20:03:44 +0000 Subject: [PATCH] Prebuilt module for commit f5616781c57d22f2f710d8737203702d60bf4708 --- AUTHORS.md | 1 + CHANGELOG.md | 60 - README.md | 56 +- dist/.npmignore | 2 - dist/docs/assets/js/paper.js | 358 ++- dist/docs/classes/Color.html | 4 +- dist/docs/classes/CompoundPath.html | 53 +- dist/docs/classes/Curve.html | 4 +- dist/docs/classes/CurveLocation.html | 4 +- dist/docs/classes/Event.html | 4 +- dist/docs/classes/Gradient.html | 4 +- dist/docs/classes/GradientStop.html | 4 +- dist/docs/classes/Group.html | 53 +- dist/docs/classes/HitResult.html | 4 +- dist/docs/classes/Item.html | 53 +- dist/docs/classes/Key.html | 4 +- dist/docs/classes/KeyEvent.html | 4 +- dist/docs/classes/Layer.html | 53 +- dist/docs/classes/Matrix.html | 4 +- dist/docs/classes/MouseEvent.html | 4 +- dist/docs/classes/PaperScope.html | 4 +- dist/docs/classes/PaperScript.html | 4 +- dist/docs/classes/Path.html | 55 +- dist/docs/classes/PathItem.html | 53 +- dist/docs/classes/Point.html | 4 +- dist/docs/classes/PointText.html | 53 +- dist/docs/classes/Project.html | 4 +- dist/docs/classes/Raster.html | 187 +- dist/docs/classes/Rectangle.html | 4 +- dist/docs/classes/Segment.html | 4 +- dist/docs/classes/Shape.html | 53 +- dist/docs/classes/Size.html | 4 +- dist/docs/classes/Style.html | 4 +- dist/docs/classes/SymbolDefinition.html | 4 +- dist/docs/classes/SymbolItem.html | 53 +- dist/docs/classes/TextItem.html | 53 +- dist/docs/classes/Tool.html | 4 +- dist/docs/classes/ToolEvent.html | 4 +- dist/docs/classes/Tween.html | 4 +- dist/docs/classes/View.html | 4 +- dist/docs/classes/global.html | 4 +- dist/docs/classes/index.html | 4 +- dist/docs/index.html | 2 +- dist/paper-core.d.ts | 1 - dist/paper-core.js | 358 ++- dist/paper-core.min.js | 12 +- dist/paper-full.js | 358 ++- dist/paper-full.min.js | 13 +- dist/paper.d.ts | 683 ++-- package-lock.json | 3861 +++++++++++++---------- package.json | 98 +- 51 files changed, 3780 insertions(+), 2906 deletions(-) delete mode 100644 dist/.npmignore delete mode 100644 dist/paper-core.d.ts diff --git a/AUTHORS.md b/AUTHORS.md index d8cb5a3a..a5f025ab 100644 --- a/AUTHORS.md +++ b/AUTHORS.md @@ -13,5 +13,6 @@ - Justin Ridgewell - Andrew Wagenheim - Scott Kieronski +- DD Liu - Samuel Asensi - Takahiro Nishino diff --git a/CHANGELOG.md b/CHANGELOG.md index ea97134a..68cf659d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,65 +1,5 @@ # Change Log -## `0.12.15` - -### Fixed - -- Fix NPM installation problem with `husky` introduced in `v0.12.13` - -## `0.12.13` - -### Fixed - -- Fix faulty positioning regression in `Item#rasterize()` (#1905). - -## `0.12.12` - -### Fixed - -- Fix installation problems on Windows by switching from NPM to Yarn for development (#1833). - -### Changed - -- Change `Item#raster({ resolution, insert })` to receive options object, while remaining backward compatible. -- Change `Raster#smoothing` to support the values `'low'`, `'medium'`, `'high'` - and `'off'`. Setting to a boolean value is still supported, translating `false` → - `'off'` and `true` → `'low'`. - -### Added - -- Allow reusing of raster items in `Item#rasterize({ raster })`: By providing an existing raster in `options.raster`, the raster and maybe even its underlying canvas can be reused, as long as the rasterized size doesn't change between rasterizations. This allows for big performance improvements. - -## `0.12.11` - -### Fixed - -- Fix installation through Yarn (#1831). - -## `0.12.9` - -### Added - -- Export `CanvasProvider` to allow experimenting with - https://www.npmjs.com/package/canvaskit-wasm on Node.js - -### Fixed - -- Fix `Path.strokeBounds` that was incorrect for certain paths (#1824). -- Fix Gulp 3 issues to be able to run Travis CI tests on Node.js 10, 12, 13 and - 14. - -## `0.12.8` - -### Fixed - -- TypeScript: Fix returned instance type (#1796). -- Fix `Path#strokeBounds` for open paths (#1817). -- Fix animation progress handling in `Tween.update()`. -- Fix setting `Item#scaling` to a new value after it was set to zero (#1816). -- SVG Import: Fully support SVG strings with leading line-breaks (#1813). -- Docs: Improve `Raster#initialize(object)` documentation (#1815, #1782). -- Docs: Fix `Item#getItem(options)` documentation. - ## `0.12.7` ### Fixed diff --git a/README.md b/README.md index 5f54ece5..3d104586 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,10 @@ -# Paper.js - The Swiss Army Knife of Vector Graphics Scripting [![Build Status](https://travis-ci.org/paperjs/paper.js.svg?branch=develop)](https://travis-ci.org/paperjs/paper.js) [![NPM](https://img.shields.io/npm/v/paper.svg)](https://www.npmjs.com/package/paper) +# Scratch's fork of Paper.js [![Build Status](https://circleci.com/gh/LLK/paper.js.svg?style=shield)](https://app.circleci.com/pipelines/github/LLK/paper.js?branch=develop) [![NPM](https://img.shields.io/npm/v/@scratch/paper.svg)](https://www.npmjs.com/package/@scratch/paper) + +This is a fork of Paper.js for use in Scratch. Please do not contact the Paper.js authors to support this fork. + +_Original README.md below_ + +# Paper.js - The Swiss Army Knife of Vector Graphics Scripting If you want to work with Paper.js, simply download the latest "stable" version from [http://paperjs.org/download/](http://paperjs.org/download/) @@ -64,9 +70,8 @@ different projects: Homebrew is recommended on macOS also if you intend to install Paper.js with rendering to the Canvas on Node.js, as described in the next paragraph. -For Linux, see to locate 32-bit and 64-bit -Node.js binaries as well as sources, or use NVM, as described in the paragraph -above. +For Linux, see to locate 32-bit and 64-bit Node.js +binaries as well as sources, or use NVM, as described in the paragraph above. ### Installing Paper.js Using NPM @@ -168,20 +173,21 @@ run: ### Setting Up For Building -Paper.js uses [Gulp.js](https://gulpjs.com/) for building, and has a couple of -dependencies as NPM modules. Read the chapter [Installing Node.js and -NPM](#installing-nodejs-and-npm) if you still need to install these. - -Due to a conflict in Gulp 3 that could only be resolved using package -resolution, we recently switched from NPM to `yarn` for development, which also -needs to be installed now. See -[Installing Yarn](https://classic.yarnpkg.com/en/docs/install/) for details. +As of 2016, Paper.js uses [Gulp.js](https://gulpjs.com/) for building, and has a +couple of dependencies as NPM modules. Read the chapter [Installing +Node.js and NPM](#installing-nodejs-and-npm) if you still need to +install these. In order to be able to build Paper.js, after checking out the repository, paper has dependencies that need to be installed. Install them by issuing the following commands from the Paper.js directory: - yarn install + npm install + +It is also recommended to install Gulp.js globally, so you can easier execute +the build commands from anywhere in the command line: + + npm install -g gulp ### Building the Library @@ -189,7 +195,7 @@ The Paper.js sources are distributed across many separate files, organised in subfolders inside the `src` folder. To compile them all into distributable files, you can run the `build` task: - yarn build + gulp build You will then find the built library files inside the `dist` folder, named `paper-full.js` and `paper-core.js`, along with their minified versions. Read @@ -207,11 +213,11 @@ library. This means you can switch between loading from sources and loading a built library simply by running. - yarn load + gulp load And to go back to a built library - yarn build + gulp build Note that your PaperScripts examples do not need to change, they can keep loading `dist/paper-full.js`, which will always do the right thing. Note also @@ -221,7 +227,11 @@ that `src/load.js` handles both browsers and Node.js, as supported by Prepro.js. Create a final zipped distribution file inside the `dist` folder: - yarn dist + gulp dist + +And since `dist` is the default task, this is the same: + + gulp ### Branch structure @@ -232,7 +242,7 @@ only merged into [`master`](https://github.com/paperjs/paper.js/tree/master) when a new release occurs. As of version `0.9.26`, the `dist` folder is excluded on all branches, and the -building is now part of the `yarn publish` process by way of the `prepublish` +building is now part of the `npm publish` process by way of the `prepublish` script. We also offer prebuilt versions of the latest state of the `develop` branch on @@ -244,7 +254,7 @@ and [`prebuilt/dist`](https://github.com/paperjs/paper.js/tree/prebuilt/dist). Similarly to building the library, you can run the `docs` task to build the documentation: - yarn docs + gulp docs Your docs will then be located at `dist/docs`. @@ -262,20 +272,20 @@ CORS restrictions. In order to run the browser based tests on Chrome, you need to run a local web-server through Gulp.js. The following command will handle it for you, and will also open the browser at the right address straight away: - yarn test:browser + gulp test:browser You can also run the unit tests through PhantomJS in Gulp directly on the command line: - yarn test:phantom + gulp test:phantom To test the Node.js version of Paper.js, use this command: - yarn test:node + gulp test:node And to test both the PhantomJS and Node.js environments together, simply run: - yarn test + gulp test ### Contributing [![Open Source Helpers](https://www.codetriage.com/paperjs/paper.js/badges/users.svg)](https://www.codetriage.com/paperjs/paper.js) diff --git a/dist/.npmignore b/dist/.npmignore deleted file mode 100644 index 40d710d1..00000000 --- a/dist/.npmignore +++ /dev/null @@ -1,2 +0,0 @@ -paperjs.zip -serverdocs diff --git a/dist/docs/assets/js/paper.js b/dist/docs/assets/js/paper.js index 4f08f73a..a4c95517 100644 --- a/dist/docs/assets/js/paper.js +++ b/dist/docs/assets/js/paper.js @@ -1,5 +1,5 @@ /*! - * Paper.js v0.12.15-develop - The Swiss Army Knife of Vector Graphics Scripting. + * Paper.js v0.12.7 - The Swiss Army Knife of Vector Graphics Scripting. * http://paperjs.org/ * * Copyright (c) 2011 - 2020, Jürg Lehni & Jonathan Puckey @@ -9,7 +9,7 @@ * * All rights reserved. * - * Date: Mon Mar 22 17:03:39 2021 +0100 + * Date: Thu Dec 1 12:02:03 2022 -0800 * *** * @@ -33,7 +33,7 @@ var paper = function(self, undefined) { self = self || require('./node/self.js'); -var window = self.window, +var window = self.window ? self.window : self, document = self.document; var Base = new function() { @@ -821,7 +821,7 @@ var PaperScope = Base.extend({ } }, - version: "0.12.15-develop", + version: "0.12.7", getView: function() { var project = this.project; @@ -3455,7 +3455,8 @@ new function() { }, Base.each({ getStrokeBounds: { stroke: true }, getHandleBounds: { handle: true }, - getInternalBounds: { internal: true } + getInternalBounds: { internal: true }, + getDrawnBounds: { stroke: true, drawnTextBounds: true }, }, function(options, key) { this[key] = function(matrix) { @@ -3512,6 +3513,7 @@ new function() { return [ options.stroke ? 1 : 0, options.handle ? 1 : 0, + options.drawnTextBounds? 1 : 0, internal ? 1 : 0 ].join(''); }, @@ -3660,25 +3662,15 @@ new function() { var rotation = this.getRotation(), decomposed = this._decomposed, matrix = new Matrix(), - isZero = Numerical.isZero; - if (isZero(current.x) || isZero(current.y)) { - matrix.translate(decomposed.translation); - if (rotation) { - matrix.rotate(rotation); - } - matrix.scale(scaling.x, scaling.y); - this._matrix.set(matrix); - } else { - var center = this.getPosition(true); - matrix.translate(center); - if (rotation) - matrix.rotate(rotation); - matrix.scale(scaling.x / current.x, scaling.y / current.y); - if (rotation) - matrix.rotate(-rotation); - matrix.translate(center.negate()); - this.transform(matrix); - } + center = this.getPosition(true); + matrix.translate(center); + if (rotation) + matrix.rotate(rotation); + matrix.scale(scaling.x / current.x, scaling.y / current.y); + if (rotation) + matrix.rotate(-rotation); + matrix.translate(center.negate()); + this.transform(matrix); if (decomposed) { decomposed.scaling = scaling; this._decomposed = decomposed; @@ -3692,7 +3684,7 @@ new function() { setMatrix: function() { var matrix = this._matrix; - matrix.set.apply(matrix, arguments); + matrix.initialize.apply(matrix, arguments); }, getGlobalMatrix: function(_dontClone) { @@ -3891,45 +3883,28 @@ new function() { this.setName(name); }, - rasterize: function(arg0, arg1) { - var resolution, - insert, - raster; - if (Base.isPlainObject(arg0)) { - resolution = arg0.resolution; - insert = arg0.insert; - raster = arg0.raster; - } else { - resolution = arg0; - insert = arg1; - } - if (!raster) { - raster = new Raster(Item.NO_INSERT); - } - var bounds = this.getStrokeBounds(), + rasterize: function(resolution, insert, boundRect) { + var bounds = boundRect ? boundRect : this.getStrokeBounds(), scale = (resolution || this.getView().getResolution()) / 72, topLeft = bounds.getTopLeft().floor(), bottomRight = bounds.getBottomRight().ceil(), - boundsSize = new Size(bottomRight.subtract(topLeft)), - rasterSize = boundsSize.multiply(scale); - raster.setSize(rasterSize, true); - - if (!rasterSize.isZero()) { - var ctx = raster.getContext(true), + size = new Size(bottomRight.subtract(topLeft)), + raster = new Raster(Item.NO_INSERT); + if (!size.isZero()) { + var canvas = CanvasProvider.getCanvas(size.multiply(scale)), + ctx = canvas.getContext('2d'), matrix = new Matrix().scale(scale).translate(topLeft.negate()); + ctx.imageSmoothingEnabled = false; ctx.save(); matrix.applyToContext(ctx); this.draw(ctx, new Base({ matrices: [matrix] })); ctx.restore(); + raster.setCanvas(canvas); } - raster._matrix.set( - new Matrix() - .translate(topLeft.add(boundsSize.divide(2))) - .scale(1 / scale) - ); - if (insert === undefined || insert) { + raster.transform(new Matrix().translate(topLeft.add(size.divide(2))) + .scale(1 / scale)); + if (insert === undefined || insert) raster.insertAbove(this); - } return raster; }, @@ -4649,14 +4624,14 @@ new function() { } }), { - _setStyles: function(ctx, param, viewMatrix) { + _setStyles: function(ctx, param, viewMatrix, strokeMatrix) { var style = this._style, matrix = this._matrix; if (style.hasFill()) { - ctx.fillStyle = style.getFillColor().toCanvasStyle(ctx, matrix); + ctx.fillStyle = style.getFillColor().toCanvasStyle(ctx, matrix, strokeMatrix); } if (style.hasStroke()) { - ctx.strokeStyle = style.getStrokeColor().toCanvasStyle(ctx, matrix); + ctx.strokeStyle = style.getStrokeColor().toCanvasStyle(ctx, matrix, strokeMatrix); ctx.lineWidth = style.getStrokeWidth(); var strokeJoin = style.getStrokeJoin(), strokeCap = style.getStrokeCap(), @@ -4808,6 +4783,7 @@ new function() { half = size / 2; ctx.strokeStyle = ctx.fillStyle = color ? color.toCanvasStyle(ctx) : '#009dec'; + ctx.lineWidth=2.5; if (itemSelected) this._drawSelected(ctx, mx, selectionItems); if (positionSelected) { @@ -5200,7 +5176,7 @@ var Shape = Item.extend({ ctx.closePath(); } if (!dontPaint && (hasFill || hasStroke)) { - this._setStyles(ctx, param, viewMatrix); + this._setStyles(ctx, param, viewMatrix, strokeMatrix); if (hasFill) { ctx.fill(style.getFillRule()); ctx.shadowColor = 'rgba(0,0,0,0)'; @@ -5363,7 +5339,7 @@ var Raster = Item.extend({ source: null }, _prioritize: ['crossOrigin'], - _smoothing: 'low', + _smoothing: false, beans: true, initialize: function Raster(source, position) { @@ -5421,23 +5397,20 @@ var Raster = Item.extend({ this, 'setSize'); }, - setSize: function(_size, _clear) { + setSize: function() { var size = Size.read(arguments); if (!size.equals(this._size)) { if (size.width > 0 && size.height > 0) { - var element = !_clear && this.getElement(); + var element = this.getElement(); this._setImage(CanvasProvider.getCanvas(size)); - if (element) { + if (element) this.getContext(true).drawImage(element, 0, 0, size.width, size.height); - } } else { if (this._canvas) CanvasProvider.release(this._canvas); this._size = size.clone(); } - } else if (_clear) { - this.clear(); } }, @@ -5590,9 +5563,7 @@ var Raster = Item.extend({ }, setSmoothing: function(smoothing) { - this._smoothing = typeof smoothing === 'string' - ? smoothing - : smoothing ? 'low' : 'off'; + this._smoothing = smoothing; this._changed(257); }, @@ -5605,8 +5576,16 @@ var Raster = Item.extend({ getSubCanvas: function() { var rect = Rectangle.read(arguments), ctx = CanvasProvider.getContext(rect.getSize()); - ctx.drawImage(this.getCanvas(), rect.x, rect.y, - rect.width, rect.height, 0, 0, rect.width, rect.height); + var clippedStartX = Math.max(0, rect.x); + var clippedStartY = Math.max(0, rect.y); + var clippedEndX = Math.min(this.getCanvas().width, rect.x + rect.width); + var clippedEndY = Math.min(this.getCanvas().height, rect.y + rect.height); + ctx.drawImage(this.getCanvas(), + clippedStartX, clippedStartY, + clippedEndX - clippedStartX, clippedEndY - clippedStartY, + clippedStartX - rect.x, clippedStartY - rect.y, + clippedEndX - clippedStartX, clippedEndY - clippedStartY + ); return ctx.canvas; }, @@ -5731,16 +5710,11 @@ var Raster = Item.extend({ rect.width, rect.height); }, - putImageData: function(data ) { + setImageData: function(data ) { var point = Point.read(arguments, 1); this.getContext(true).putImageData(data, point.x, point.y); }, - setImageData: function(data) { - this.setSize(data); - this.getContext(true).putImageData(data, 0, 0); - }, - _getBounds: function(matrix, options) { var rect = new Rectangle(this._size).setCenter(0, 0); return matrix ? matrix._transformBounds(rect) : rect; @@ -5767,12 +5741,8 @@ var Raster = Item.extend({ this._setStyles(ctx, param, viewMatrix); - var smoothing = this._smoothing, - disabled = smoothing === 'off'; DomElement.setPrefixed( - ctx, - disabled ? 'imageSmoothingEnabled' : 'imageSmoothingQuality', - disabled ? false : smoothing + ctx, 'imageSmoothingEnabled', this._smoothing ); ctx.drawImage(element, @@ -6842,13 +6812,13 @@ statics: { } padding /= 2; - var minPad = min[coord] + padding, - maxPad = max[coord] - padding; + var minPad = min[coord] - padding, + maxPad = max[coord] + padding; if ( v0 < minPad || v1 < minPad || v2 < minPad || v3 < minPad || v0 > maxPad || v1 > maxPad || v2 > maxPad || v3 > maxPad) { if (v1 < v0 != v1 < v3 && v2 < v0 != v2 < v3) { - add(v0, 0); - add(v3, 0); + add(v0, padding); + add(v3, padding); } else { var a = 3 * (v1 - v2) - v0 + v3, b = 2 * (v0 + v2) - 4 * v1, @@ -9172,8 +9142,8 @@ var Path = PathItem.extend({ strokePadding = tolerancePadding, join, cap, miterLimit, area, loc, res, - hitStroke = options.stroke && style.hasStroke(), - hitFill = options.fill && style.hasFill(), + hitStroke = options.stroke && (style.hasStroke() || options.hitUnstrokedPaths), + hitFill = options.fill && (style.hasFill() || options.hitUnfilledPaths), hitCurves = options.curves, strokeRadius = hitStroke ? style.getStrokeWidth() / 2 @@ -9361,12 +9331,10 @@ var Path = PathItem.extend({ }), new function() { - function drawHandles(ctx, segments, matrix, size) { + function drawHandles(ctx, segments, matrix, size, isFullySelected) { if (size <= 0) return; var half = size / 2, - miniSize = size - 2, - miniHalf = half - 1, coords = new Array(6), pX, pY; @@ -9377,10 +9345,12 @@ new function() { ctx.beginPath(); ctx.moveTo(pX, pY); ctx.lineTo(hX, hY); + ctx.moveTo(hX - half, hY); + ctx.lineTo(hX, hY + half); + ctx.lineTo(hX + half, hY); + ctx.lineTo(hX, hY - half); + ctx.closePath(); ctx.stroke(); - ctx.beginPath(); - ctx.arc(hX, hY, half, 0, Math.PI * 2, true); - ctx.fill(); } } @@ -9390,17 +9360,19 @@ new function() { segment._transformCoordinates(matrix, coords); pX = coords[0]; pY = coords[1]; - if (selection & 2) + if (selection & 2 && !isFullySelected) drawHandle(2); - if (selection & 4) + if (selection & 4 && !isFullySelected) drawHandle(4); - ctx.fillRect(pX - half, pY - half, size, size); - if (miniSize > 0 && !(selection & 1)) { - var fillStyle = ctx.fillStyle; - ctx.fillStyle = '#ffffff'; - ctx.fillRect(pX - miniHalf, pY - miniHalf, miniSize, miniSize); - ctx.fillStyle = fillStyle; + ctx.beginPath(); + ctx.arc(pX, pY, half, 0, Math.PI * 2, true); + ctx.stroke(); + var fillStyle = ctx.fillStyle; + if (!(selection & 1)) { + ctx.fillStyle = 'rgba(255, 255, 255, 0.5)'; } + ctx.fill(); + ctx.fillStyle = fillStyle; } } @@ -9486,7 +9458,7 @@ new function() { } if (!dontPaint && (hasFill || hasStroke)) { - this._setStyles(ctx, param, viewMatrix); + this._setStyles(ctx, param, viewMatrix, strokeMatrix); if (hasFill) { ctx.fill(style.getFillRule()); ctx.shadowColor = 'rgba(0,0,0,0)'; @@ -9500,6 +9472,7 @@ new function() { length = flattener.length, from = -style.getDashOffset(), to, i = 0; + from = from % length; while (from > 0) { from -= getOffset(i--) + getOffset(i--); } @@ -9520,7 +9493,8 @@ new function() { ctx.beginPath(); drawSegments(ctx, this, matrix); ctx.stroke(); - drawHandles(ctx, this._segments, matrix, paper.settings.handleSize); + drawHandles(ctx, this._segments, matrix, paper.settings.handleSize, + this.isFullySelected()); } }; }, @@ -10240,7 +10214,7 @@ var CompoundPath = PathItem.extend({ _hitTestChildren: function _hitTestChildren(point, options, viewMatrix) { return _hitTestChildren.base.call(this, point, - options.class === Path || options.type === 'path' ? options + options.class === Path || options.type === 'path' || options.hitUnfilledPaths ? options : Base.set({}, options, { fill: false }), viewMatrix); }, @@ -10256,7 +10230,7 @@ var CompoundPath = PathItem.extend({ children[i].draw(ctx, param, strokeMatrix); if (!param.clip) { - this._setStyles(ctx, param, viewMatrix); + this._setStyles(ctx, param, viewMatrix, strokeMatrix); var style = this._style; if (style.hasFill()) { ctx.fill(style.getFillRule()); @@ -11628,6 +11602,11 @@ var PointText = TextItem.extend({ }, _getBounds: function(matrix, options) { + var rect = options.drawnTextBounds ? this._getDrawnTextSize() : this._getMeasuredTextSize(); + return matrix ? matrix._transformBounds(rect, rect) : rect; + }, + + _getMeasuredTextSize: function() { var style = this._style, lines = this._lines, numLines = lines.length, @@ -11637,10 +11616,67 @@ var PointText = TextItem.extend({ x = 0; if (justification !== 'left') x -= width / (justification === 'center' ? 2: 1); - var rect = new Rectangle(x, + return new Rectangle(x, numLines ? - 0.75 * leading : 0, width, numLines * leading); - return matrix ? matrix._transformBounds(rect, rect) : rect; + }, + + _getDrawnTextSize: function() { + var style = this._style; + var lines = this._lines; + var numLines = lines.length; + var leading = style.getLeading(); + var justification = style.getJustification(); + + var svg = SvgElement.create('svg', { + version: '1.1', + xmlns: SvgElement.svg + }); + var node = SvgElement.create('text'); + node.setAttributeNS('http://www.w3.org/XML/1998/namespace', 'xml:space', 'preserve'); + svg.appendChild(node); + for (var i = 0; i < numLines; i++) { + var tspanNode = SvgElement.create('tspan', { + x: '0', + dy: i === 0 ? '0' : leading + 'px' + }); + tspanNode.textContent = this._lines[i]; + node.appendChild(tspanNode); + } + + var element = document.createElement('span'); + element.style.visibility = ('hidden'); + element.style.whiteSpace = 'pre'; + element.style.fontSize = this.fontSize + 'px'; + element.style.fontFamily = this.font; + element.style.lineHeight = this.leading / this.fontSize; + + var bbox; + try { + element.appendChild(svg); + document.body.appendChild(element); + bbox = svg.getBBox(); + } finally { + document.body.removeChild(element); + } + + var halfStrokeWidth = this.strokeWidth / 2; + var width = bbox.width + (halfStrokeWidth * 2); + var height = bbox.height + (halfStrokeWidth * 2); + var x = bbox.x - halfStrokeWidth; + var y = bbox.y - halfStrokeWidth; + + if (justification !== 'left') { + var eltWidth = this.getView().getTextWidth(style.getFontStyle(), lines); + x -= eltWidth / (justification === 'center' ? 2: 1); + } + + return new Rectangle(x, y, width + 1, Math.max(height, numLines * leading)); + }, + + _hitTestSelf: function(point, options) { + if (options.fill && (this.hasFill() || options.hitUnfilledPaths) && this._contains(point)) + return new HitResult('fill', this); } }); @@ -12112,8 +12148,9 @@ var Color = Base.extend(new function() { + components.join(',') + ')'; }, - toCanvasStyle: function(ctx, matrix) { - if (this._canvasStyle) + toCanvasStyle: function(ctx, matrix, strokeMatrix) { + var strokeMayChange = this._type === 'gradient' && strokeMatrix; + if (this._canvasStyle && !strokeMayChange) return this._canvasStyle; if (this._type !== 'gradient') return this._canvasStyle = this.toCSS(); @@ -12131,6 +12168,12 @@ var Color = Base.extend(new function() { if (highlight) highlight = inverse._transformPoint(highlight); } + if (strokeMatrix) { + origin = strokeMatrix._transformPoint(origin); + destination = strokeMatrix._transformPoint(destination); + if (highlight) + highlight = strokeMatrix._transformPoint(highlight); + } if (gradient._radial) { var radius = destination.getDistance(origin); if (highlight) { @@ -12152,7 +12195,8 @@ var Color = Base.extend(new function() { offset == null ? i / (l - 1) : offset, stop._color.toCanvasStyle()); } - return this._canvasStyle = canvasGradient; + if (!strokeMayChange) this._canvasStyle = canvasGradient; + return canvasGradient; }, transform: function(matrix) { @@ -13168,7 +13212,7 @@ var View = Base.extend(Emitter, { setMatrix: function() { var matrix = this._matrix; - matrix.set.apply(matrix, arguments); + matrix.initialize.apply(matrix, arguments); }, transform: function(matrix) { @@ -14062,7 +14106,7 @@ var Tween = Base.extend(Emitter, { _class: 'Tween', statics: { - easings: new Base({ + easings: { linear: function(t) { return t; }, @@ -14122,7 +14166,7 @@ var Tween = Base.extend(Emitter, { ? 16 * t * t * t * t * t : 1 + 16 * (--t) * t * t * t * t; } - }) + } }, initialize: function Tween(object, from, to, duration, easing, start) { @@ -14168,7 +14212,7 @@ var Tween = Base.extend(Emitter, { update: function(progress) { if (this.running) { - if (progress >= 1) { + if (progress > 1) { progress = 1; this.running = false; } @@ -14190,15 +14234,15 @@ var Tween = Base.extend(Emitter, { this._setProperty(this._parsedKeys[key], value); } + if (!this.running && this._then) { + this._then(this.object); + } if (this.responds('update')) { this.emit('update', new Base({ progress: progress, factor: factor })); } - if (!this.running && this._then) { - this._then(this.object); - } } return this; }, @@ -14328,7 +14372,7 @@ var Http = { } }; -var CanvasProvider = Base.exports.CanvasProvider = { +var CanvasProvider = { canvases: [], getCanvas: function(width, height) { @@ -14896,7 +14940,7 @@ new function() { return SvgElement.create('use', attrs, formatter); } - function exportGradient(color) { + function exportGradient(color, item) { var gradientNode = getDefinition(color, 'color'); if (!gradientNode) { var gradient = color.getGradient(), @@ -14923,6 +14967,11 @@ new function() { y2: destination.y }; } + if (item instanceof paper.PointText) { + attrs.gradientTransform = getTransform( + item._matrix.clone().invert(), false, formatter).transform; + } + attrs.gradientUnits = 'userSpaceOnUse'; gradientNode = SvgElement.create((radial ? 'radial' : 'linear') + 'Gradient', attrs, formatter); @@ -14948,9 +14997,18 @@ new function() { } function exportText(item) { - var node = SvgElement.create('text', getTransform(item._matrix, true), + var node = SvgElement.create('text', getTransform(item._matrix, false), formatter); - node.textContent = item._content; + node.setAttribute('font-size', item.fontSize); + node.setAttribute('xml:space', 'preserve'); + for (var i = 0; i < item._lines.length; i++) { + var tspanNode = SvgElement.create('tspan', { + x: '0', + dy: i === 0 ? '0' : item.getLeading() + 'px' + }, formatter); + tspanNode.textContent = item._lines[i] ? item._lines[i] : ' '; + node.appendChild(tspanNode); + } return node; } @@ -14977,9 +15035,13 @@ new function() { var get = entry.get, type = entry.type, value = item[get](); + + if (value === undefined) return; + if (entry.exportFilter ? entry.exportFilter(item, value) - : !parent || !Base.equals(parent[get](), value)) { + : !parent || !Base.equals(parent[get](), value) || + item instanceof paper.PointText) { if (type === 'color' && value != null) { var alpha = value.getAlpha(); if (alpha < 1) @@ -15089,7 +15151,7 @@ new function() { rect = bounds === 'view' ? new Rectangle([0, 0], view.getViewSize()) : bounds === 'content' - ? Item._getBounds(children, matrix, { stroke: true }) + ? Item._getBounds(children, matrix, { stroke: true, drawnTextBounds: true }) .rect : Rectangle.read([bounds], 0, { readNull: true }), attrs = { @@ -15333,10 +15395,44 @@ new function() { }, text: function(node) { - var text = new PointText(getPoint(node).add( - getPoint(node, 'dx', 'dy'))); - text.setContent(node.textContent.trim() || ''); - return text; + + var fontSize = parseFloat(node.getAttribute("font-size")); + var alignmentBaseline = node.getAttribute("alignment-baseline"); + if (node.childElementCount === 0) { + var text = new PointText(); + text.setContent(node.textContent.trim() || ''); + text.translate(0, text._style.getLeading()); + if (!isNaN(fontSize)) text.setFontSize(fontSize); + return text; + } else { + var lines = []; + var spacing = 1.2; + for (var i = 0; i < node.childNodes.length; i++) { + var child = node.childNodes[i]; + if (!child.getAttribute) continue; + lines.push(child.textContent); + var dyString = child.getAttribute('dy'); + if (dyString) { + var dy = parseFloat(dyString); + if (!isNaN(dy)) { + if (dyString.endsWith('em')) { + spacing = dy; + } else if (dyString.endsWith('px') && !isNaN(fontSize)) { + spacing = dy / fontSize; + } + } + } + } + var text = new PointText(); + if (!isNaN(fontSize)) text.setFontSize(fontSize); + text.setLeading(text.fontSize * spacing); + if (alignmentBaseline === 'text-before-edge') { + text.setContent(' '); + text.translate(0, text.bounds.height); + } + text.setContent(lines.join('\n')); + return text; + } }, switch: importGroup @@ -15408,8 +15504,6 @@ new function() { }, {}), { id: function(item, value) { definitions[value] = item; - if (item.setName) - item.setName(value); }, 'clip-path': function(item, value) { @@ -15482,6 +15576,10 @@ new function() { if (matrix) group.transform(matrix); } + }, + + 'fill-rule': function(item, value) { + if (value === 'evenodd' || value === 'nonzero') item.fillRule = value; } }); @@ -15599,7 +15697,7 @@ new function() { var node = typeof svg === 'object' ? svg : new self.DOMParser().parseFromString( - svg.trim(), + svg, 'image/svg+xml' ); if (!node.nodeName) { diff --git a/dist/docs/classes/Color.html b/dist/docs/classes/Color.html index a0238d69..91a4b72a 100644 --- a/dist/docs/classes/Color.html +++ b/dist/docs/classes/Color.html @@ -2179,8 +2179,8 @@ circle.fillColor = Color.random();

-Paper.js v0.12.15 (develop)
-Copyright © 2011—2021 Jürg Lehni & Jonathan Puckey. All Rights Reserved.

+Paper.js v0.12.7
+Copyright © 2011—2022 Jürg Lehni & Jonathan Puckey. All Rights Reserved.

diff --git a/dist/docs/classes/CompoundPath.html b/dist/docs/classes/CompoundPath.html index 576c1382..a781ae78 100644 --- a/dist/docs/classes/CompoundPath.html +++ b/dist/docs/classes/CompoundPath.html @@ -3271,26 +3271,35 @@ for (var i = 0; i < 20; i++) {
-rasterize([options]) +rasterize([resolution[, insert[, boundRect]]])