@leafer-in/stroke-sides 2.3.0

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2023-present, Chao (Leafer) Wan
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/README.md

@@ -0,0 +1 @@
+# @leafer-in/stroke-sides

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@leafer-in/stroke-sides",
+  "version": "2.3.0",
+  "description": "@leafer-in/stroke-sides",
+  "author": "Chao (Leafer) Wan",
+  "license": "MIT",
+  "type": "module",
+  "main": "dist/stroke-sides.esm.js",
+  "exports": {
+    "import": "./dist/stroke-sides.esm.js",
+    "require": "./dist/stroke-sides.cjs",
+    "types": "./types/index.d.ts"
+  },
+  "types": "types/index.d.ts",
+  "unpkg": "dist/stroke-sides.js",
+  "jsdelivr": "dist/stroke-sides.js",
+  "files": [
+    "src",
+    "types",
+    "dist"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/leaferjs/leafer-in.git"
+  },
+  "homepage": "https://github.com/leaferjs/leafer-in/tree/main/packages/stroke-sides",
+  "bugs": "https://github.com/leaferjs/leafer-in/issues",
+  "keywords": [
+    "leafer stroke-sides",
+    "leafer-stroke-sides",
+    "leafer-in",
+    "stroke-sides",
+    "leafer-ui",
+    "leaferjs"
+  ],
+  "peerDependencies": {
+    "@leafer-ui/draw": "^2.0.0",
+    "@leafer-ui/interface": "^2.0.0"
+  }
+}

package/src/decorator.ts

@@ -0,0 +1,19 @@
+import { IUIData, IValue } from '@leafer-ui/interface'
+import { decorateLeafAttr, attr, doStrokeType, doBoundsType, isArray, DataHelper } from '@leafer-ui/core'
+
+export function strokeWidthType(defaultValue?: IValue) {
+    return decorateLeafAttr(defaultValue, (key: string) => attr({
+        set(value: IValue) {
+            if (this.__setAttr(key, value)) {
+                doStrokeType(this)
+                const data = this.__
+                data.__useStroke = true
+                let hasStrokeSides
+                DataHelper.stintSet(data as IUIData, '__hasStrokeSides', hasStrokeSides = isArray(value) && Math.max(...value))
+                if (hasStrokeSides) {
+                    doBoundsType(this)
+                } else if ((data as IUIData).__pathForStroke) (data as IUIData).__pathForStroke = undefined
+            }
+        }
+    }))
+}

package/src/fillSroke.ts

@@ -0,0 +1,50 @@
+import { ILeaferCanvas, IRenderOptions } from '@leafer/interface'
+import { isObject, PathDrawer } from "@leafer/core"
+
+import { IUI, ILeafPaint, ILeafStrokePaint } from '@leafer-ui/interface'
+import { PaintImage } from "@leafer-ui/draw"
+
+
+export function fillStroke(stroke: string | ILeafPaint[], ui: IUI, canvas: ILeaferCanvas, renderOptions: IRenderOptions): void {
+
+    canvas.beginPath()
+    const { data, windingRule } = ui.__.__pathForStroke
+    PathDrawer.drawPathByData(canvas, data)
+
+    if (isObject(stroke)) {
+        drawStrokesStyle(stroke, ui, canvas, renderOptions)
+    } else {
+
+        canvas.fillStyle = stroke
+        windingRule ? canvas.fill(windingRule) : canvas.fill()
+
+    }
+
+    if (ui.__.__fillAfterStroke) ui.__drawRenderPath(canvas)
+}
+
+
+function drawStrokesStyle(strokes: ILeafStrokePaint[], ui: IUI, canvas: ILeaferCanvas, renderOptions: IRenderOptions): void {
+    let item: ILeafStrokePaint
+
+    for (let i = 0, len = strokes.length; i < len; i++) {
+        item = strokes[i]
+
+        if (item.image && PaintImage.checkImage(item, false, ui, canvas, renderOptions)) continue
+
+        if (item.style) {
+
+            const { windingRule } = ui.__.__pathForStroke
+
+            if (item.originPaint.blendMode) {
+                canvas.saveBlendMode(item.originPaint.blendMode)
+                canvas.fillStyle = item.style
+                windingRule ? canvas.fill(windingRule) : canvas.fill()
+                canvas.restoreBlendMode()
+            } else {
+                canvas.fillStyle = item.style
+                windingRule ? canvas.fill(windingRule) : canvas.fill()
+            }
+        }
+    }
+}

package/src/index.ts

@@ -0,0 +1,27 @@
+import { Paint, Plugin, Rect, Box, RectData, DataHelper, MathHelper, BoxData } from '@leafer-ui/draw'
+import { fillStroke } from './fillSroke'
+import { createRectStrokePath } from './path'
+import { strokeWidthType } from './decorator'
+import { IRectData } from '@leafer-ui/interface'
+
+Plugin.add('stroke-sides')
+
+Rect.addAttr('strokeWidth', 1, strokeWidthType)
+Box.addAttr('strokeWidth', 1, strokeWidthType)
+
+Paint.fillStroke = fillStroke
+
+const { stintSet } = DataHelper
+
+Rect.prototype.__updatePath = Box.prototype.__updatePath = function (): void {
+    const data = this.__
+    if (data.__hasStrokeSides) {
+        const { width, height, cornerRadius, strokeWidth, strokeAlign } = data
+        data.__pathForStroke = data.__pathInputed ? undefined : createRectStrokePath(width, height, cornerRadius && MathHelper.fourNumber(cornerRadius), MathHelper.fourNumber(strokeWidth), strokeAlign)
+    }
+}
+
+BoxData.prototype.__checkComplex = RectData.prototype.__checkComplex = function (): void {
+    const t = this as IRectData
+    stintSet(t, '__complex', (t.__isFills || t.__isStrokes || t.cornerRadius || t.__hasStrokeSides || t.__useEffect) as boolean)
+}

package/src/path.ts

@@ -0,0 +1,106 @@
+import { IPathCommandData, IPathCommandDataWithWindingRule } from '@leafer/interface'
+import { PathCommandDataHelper } from "@leafer/core"
+import { IStrokeAlign } from '@leafer-ui/interface'
+
+/**
+ * 矩形描边路径生成器
+ * 支持非均匀描边（上右下左宽度不同）与圆角逻辑
+ */
+export function createRectStrokePath(width: number, height: number, cornerRadius: number[] | undefined, strokeWidth: number[], strokeAlign: IStrokeAlign): IPathCommandDataWithWindingRule {
+
+    if (cornerRadius) {
+        const [r0, r1, r2, r3] = cornerRadius
+        const [t, r_w, b, l] = strokeWidth
+
+        const hasRadius = (r0 + r1 + r2 + r3) > 0
+
+        // 场景 A: 包含圆角，必须使用 evenodd 挖空法
+        if (hasRadius) {
+            const data: IPathCommandData = []
+            const expand = strokeAlign === 'inside' ? 0 : (strokeAlign === 'center' ? 0.5 : 1)
+            const shrink = 1 - expand
+
+            // 外边界参数
+            const ox = -l * expand, oy = -t * expand
+            const ow = width + (l + r_w) * expand
+            const oh = height + (t + b) * expand
+            const outerR = [
+                r0 + Math.max(t, l) * expand,
+                r1 + Math.max(t, r_w) * expand,
+                r2 + Math.max(b, r_w) * expand,
+                r3 + Math.max(b, l) * expand
+            ]
+
+            // 内边界参数
+            const ix = l * shrink, iy = t * shrink
+            const iw = width - (l + r_w) * shrink
+            const ih = height - (t + b) * shrink
+
+            // 绘制外框
+            PathCommandDataHelper.roundRect(data, ox, oy, ow, oh, outerR)
+
+            // 只有内框有空间时才绘制内框（进行掏空）
+            if (iw > 0 && ih > 0) {
+                const innerR = [
+                    Math.max(0, r0 - Math.max(t, l) * shrink),
+                    Math.max(0, r1 - Math.max(t, r_w) * shrink),
+                    Math.max(0, r2 - Math.max(b, r_w) * shrink),
+                    Math.max(0, r3 - Math.max(b, l) * shrink)
+                ]
+                PathCommandDataHelper.roundRect(data, ix, iy, iw, ih, innerR)
+            }
+
+            return { data, windingRule: 'evenodd' }
+        }
+    }
+
+
+
+    // 场景 B: 纯直角，采用四边拼接法 (性能最优，无 WindingRule 依赖)
+    return createRectStrokePathNoRadius(width, height, strokeWidth, strokeAlign)
+}
+
+/**
+ * 纯直角矩形描边生成器 (拼接法)
+ */
+function createRectStrokePathNoRadius(
+    width: number,
+    height: number,
+    strokeWidth: number[],
+    strokeAlign: IStrokeAlign
+): IPathCommandDataWithWindingRule {
+    const data: IPathCommandData = []
+    const [t, r_w, b, l] = strokeWidth
+
+    const ext = strokeAlign === 'inside' ? 0 : (strokeAlign === 'center' ? 0.5 : 1)
+    const ins = 1 - ext
+
+    // 计算外部极值边界坐标
+    const xL = -l * ext
+    const xR = width + r_w * ext
+    const yT = -t * ext
+    const yB = height + b * ext
+
+    // 计算内部裁剪边界坐标 (用于侧边填充高度)
+    const innerYStart = t * ins
+    const innerYEnd = height - b * ins
+    const innerHeight = Math.max(0, innerYEnd - innerYStart)
+
+    // 1. Top Bar: 覆盖全宽
+    if (t > 0) PathCommandDataHelper.rect(data, xL, yT, xR - xL, t)
+
+    // 2. Bottom Bar: 覆盖全宽
+    if (b > 0) PathCommandDataHelper.rect(data, xL, yB - b, xR - xL, b)
+
+    // 3. Left Bar: 填充中间高度，避免与 Top/Bottom 重合
+    if (l > 0 && innerHeight > 0) {
+        PathCommandDataHelper.rect(data, xL, innerYStart, l, innerHeight)
+    }
+
+    // 4. Right Bar: 填充中间高度
+    if (r_w > 0 && innerHeight > 0) {
+        PathCommandDataHelper.rect(data, xR - r_w, innerYStart, r_w, innerHeight)
+    }
+
+    return { data }
+}

package/types/index.d.ts

@@ -0,0 +1,2 @@
+
+export { };