├── img ├── preview.png └── preview_dark.png ├── Package.swift ├── README_zh.md ├── README.md ├── .gitignore ├── LICENSE └── Sources └── MatrixColorSelector └── MatrixColorSelector.swift /img/preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lihaoyun6/MatrixColorSelector/HEAD/img/preview.png -------------------------------------------------------------------------------- /img/preview_dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lihaoyun6/MatrixColorSelector/HEAD/img/preview_dark.png -------------------------------------------------------------------------------- /Package.swift: -------------------------------------------------------------------------------- 1 | // swift-tools-version: 5.7 2 | // The swift-tools-version declares the minimum version of Swift required to build this package. 3 | 4 | import PackageDescription 5 | 6 | let package = Package( 7 | name: "MatrixColorSelector", 8 | platforms: [ 9 | .macOS(.v11) 10 | ], 11 | products: [ 12 | // Products define the executables and libraries a package produces, making them visible to other packages. 13 | .library( 14 | name: "MatrixColorSelector", 15 | targets: ["MatrixColorSelector"]), 16 | ], 17 | targets: [ 18 | // Targets are the basic building blocks of a package, defining a module or a test suite. 19 | // Targets can depend on other targets in this package and products from dependencies. 20 | .target( 21 | name: "MatrixColorSelector"), 22 | 23 | ] 24 | ) 25 | -------------------------------------------------------------------------------- /README_zh.md: -------------------------------------------------------------------------------- 1 |

2 | 3 | 4 |

MatrixColorSelector

5 |

适用于 macOS 矩阵式颜色选择器
[English Version]

6 |

7 | 8 | ## 简介 9 | 利用此扩展包, 你可以在 macOS 上使用类似 iOS 的矩阵式颜色选择器 10 | 11 | ## 系统要求 12 | macOS 11.0+ 13 | 14 | ## 安装 15 | 使用 Xcode 内置的 [Swift Package Manager](https://developer.apple.com/documentation/xcode/adding_package_dependencies_to_your_app) 将 `https://github.com/lihaoyun6/MatrixColorSelector` 添加到你的项目中 16 | 17 | ## Usage 18 | 19 | 添加完成后首先引入 `MatrixColorSelector`: 20 | 21 | ```swift 22 | import MatrixColorSelector 23 | ``` 24 | 25 | 然后可以这样创建一个颜色选择器按钮: 26 | 27 | ```swift 28 | import SwiftUI 29 | import MatrixColorSelector 30 | 31 | struct ContentView: View { 32 | @State var color: Color = .black 33 | 34 | var body: some View { 35 | MatrixColorSelector("Select Color:", selection: $color) 36 | } 37 | } 38 | ``` 39 | 当用户点击此按钮时, 将会弹出包含颜色选择界面的气泡卡片 (popover). 如果你想自定义按钮样式的话, 也可以调用 `MatrixColorSelectorView()` 作为内容视图, 并自行编写触发按钮. 40 | 41 | 如果你不想在颜色选择器中显示 "Show Colors..." 按钮的话 (点击此按钮将会打开系统内置的颜色选择面板), 可以添加参数 `noMoreColors`: 42 | 43 | ```swift 44 | ... 45 | MatrixColorSelector("some-text", selection: $color, noMoreColors: false) 46 | ... 47 | ``` 48 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 | 3 | 4 |

MatrixColorSelector

5 |

A simpler color picker for SwiftUI on macOS
[中文版本]

6 |

7 | 8 | ## Introduction 9 | This package lets you to add grid-style color picker on macOS (similar to the one on iOS) 10 | 11 | ## Requirements 12 | macOS 11.0+ 13 | 14 | ## Install 15 | Add `https://github.com/lihaoyun6/MatrixColorSelector` to your project using [Swift Package Manager](https://developer.apple.com/documentation/xcode/adding_package_dependencies_to_your_app) in Xcode 16 | 17 | ## Usage 18 | 19 | First, import `MatrixColorSelector` into your code: 20 | 21 | ```swift 22 | import MatrixColorSelector 23 | ``` 24 | 25 | Then you can: 26 | 27 | ```swift 28 | import SwiftUI 29 | import MatrixColorSelector 30 | 31 | struct ContentView: View { 32 | @State var color: Color = .black 33 | 34 | var body: some View { 35 | MatrixColorSelector("Select Color:", selection: $color) 36 | } 37 | } 38 | ``` 39 | This will generate a MatrixColorSelector button, and when you click it, it will bring up the popover. Or you can use `MatrixColorSelectorView()` as the content view and wrap it yourself, this will allow you to customize the style of the button. 40 | 41 | If you don't want the color picker to include the "Show Colors..." button (clicking it will open the macOS built-in color picker panel), you can do this: 42 | 43 | ```swift 44 | ... 45 | MatrixColorSelector("some-text", selection: $color, noMoreColors: false) 46 | ... 47 | ``` 48 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Xcode 2 | # 3 | # gitignore contributors: remember to update Global/Xcode.gitignore, Objective-C.gitignore & Swift.gitignore 4 | 5 | ## User settings 6 | xcuserdata/ 7 | 8 | ## Obj-C/Swift specific 9 | *.hmap 10 | 11 | ## App packaging 12 | *.ipa 13 | *.dSYM.zip 14 | *.dSYM 15 | 16 | ## Playgrounds 17 | timeline.xctimeline 18 | playground.xcworkspace 19 | 20 | # Swift Package Manager 21 | # 22 | # Add this line if you want to avoid checking in source code from Swift Package Manager dependencies. 23 | # Packages/ 24 | # Package.pins 25 | # Package.resolved 26 | # *.xcodeproj 27 | # 28 | # Xcode automatically generates this directory with a .xcworkspacedata file and xcuserdata 29 | # hence it is not needed unless you have added a package configuration file to your project 30 | # .swiftpm 31 | 32 | .build/ 33 | 34 | # CocoaPods 35 | # 36 | # We recommend against adding the Pods directory to your .gitignore. However 37 | # you should judge for yourself, the pros and cons are mentioned at: 38 | # https://guides.cocoapods.org/using/using-cocoapods.html#should-i-check-the-pods-directory-into-source-control 39 | # 40 | # Pods/ 41 | # 42 | # Add this line if you want to avoid checking in source code from the Xcode workspace 43 | # *.xcworkspace 44 | 45 | # Carthage 46 | # 47 | # Add this line if you want to avoid checking in source code from Carthage dependencies. 48 | # Carthage/Checkouts 49 | 50 | Carthage/Build/ 51 | 52 | # fastlane 53 | # 54 | # It is recommended to not store the screenshots in the git repo. 55 | # Instead, use fastlane to re-generate the screenshots whenever they are needed. 56 | # For more information about the recommended setup visit: 57 | # https://docs.fastlane.tools/best-practices/source-control/#source-control 58 | 59 | fastlane/report.xml 60 | fastlane/Preview.html 61 | fastlane/screenshots/**/*.png 62 | fastlane/test_output 63 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Apache License 2 | Version 2.0, January 2004 3 | http://www.apache.org/licenses/ 4 | 5 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 6 | 7 | 1. Definitions. 8 | 9 | "License" shall mean the terms and conditions for use, reproduction, 10 | and distribution as defined by Sections 1 through 9 of this document. 11 | 12 | "Licensor" shall mean the copyright owner or entity authorized by 13 | the copyright owner that is granting the License. 14 | 15 | "Legal Entity" shall mean the union of the acting entity and all 16 | other entities that control, are controlled by, or are under common 17 | control with that entity. For the purposes of this definition, 18 | "control" means (i) the power, direct or indirect, to cause the 19 | direction or management of such entity, whether by contract or 20 | otherwise, or (ii) ownership of fifty percent (50%) or more of the 21 | outstanding shares, or (iii) beneficial ownership of such entity. 22 | 23 | "You" (or "Your") shall mean an individual or Legal Entity 24 | exercising permissions granted by this License. 25 | 26 | "Source" form shall mean the preferred form for making modifications, 27 | including but not limited to software source code, documentation 28 | source, and configuration files. 29 | 30 | "Object" form shall mean any form resulting from mechanical 31 | transformation or translation of a Source form, including but 32 | not limited to compiled object code, generated documentation, 33 | and conversions to other media types. 34 | 35 | "Work" shall mean the work of authorship, whether in Source or 36 | Object form, made available under the License, as indicated by a 37 | copyright notice that is included in or attached to the work 38 | (an example is provided in the Appendix below). 39 | 40 | "Derivative Works" shall mean any work, whether in Source or Object 41 | form, that is based on (or derived from) the Work and for which the 42 | editorial revisions, annotations, elaborations, or other modifications 43 | represent, as a whole, an original work of authorship. For the purposes 44 | of this License, Derivative Works shall not include works that remain 45 | separable from, or merely link (or bind by name) to the interfaces of, 46 | the Work and Derivative Works thereof. 47 | 48 | "Contribution" shall mean any work of authorship, including 49 | the original version of the Work and any modifications or additions 50 | to that Work or Derivative Works thereof, that is intentionally 51 | submitted to Licensor for inclusion in the Work by the copyright owner 52 | or by an individual or Legal Entity authorized to submit on behalf of 53 | the copyright owner. For the purposes of this definition, "submitted" 54 | means any form of electronic, verbal, or written communication sent 55 | to the Licensor or its representatives, including but not limited to 56 | communication on electronic mailing lists, source code control systems, 57 | and issue tracking systems that are managed by, or on behalf of, the 58 | Licensor for the purpose of discussing and improving the Work, but 59 | excluding communication that is conspicuously marked or otherwise 60 | designated in writing by the copyright owner as "Not a Contribution." 61 | 62 | "Contributor" shall mean Licensor and any individual or Legal Entity 63 | on behalf of whom a Contribution has been received by Licensor and 64 | subsequently incorporated within the Work. 65 | 66 | 2. Grant of Copyright License. Subject to the terms and conditions of 67 | this License, each Contributor hereby grants to You a perpetual, 68 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 69 | copyright license to reproduce, prepare Derivative Works of, 70 | publicly display, publicly perform, sublicense, and distribute the 71 | Work and such Derivative Works in Source or Object form. 72 | 73 | 3. Grant of Patent License. Subject to the terms and conditions of 74 | this License, each Contributor hereby grants to You a perpetual, 75 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 76 | (except as stated in this section) patent license to make, have made, 77 | use, offer to sell, sell, import, and otherwise transfer the Work, 78 | where such license applies only to those patent claims licensable 79 | by such Contributor that are necessarily infringed by their 80 | Contribution(s) alone or by combination of their Contribution(s) 81 | with the Work to which such Contribution(s) was submitted. If You 82 | institute patent litigation against any entity (including a 83 | cross-claim or counterclaim in a lawsuit) alleging that the Work 84 | or a Contribution incorporated within the Work constitutes direct 85 | or contributory patent infringement, then any patent licenses 86 | granted to You under this License for that Work shall terminate 87 | as of the date such litigation is filed. 88 | 89 | 4. Redistribution. You may reproduce and distribute copies of the 90 | Work or Derivative Works thereof in any medium, with or without 91 | modifications, and in Source or Object form, provided that You 92 | meet the following conditions: 93 | 94 | (a) You must give any other recipients of the Work or 95 | Derivative Works a copy of this License; and 96 | 97 | (b) You must cause any modified files to carry prominent notices 98 | stating that You changed the files; and 99 | 100 | (c) You must retain, in the Source form of any Derivative Works 101 | that You distribute, all copyright, patent, trademark, and 102 | attribution notices from the Source form of the Work, 103 | excluding those notices that do not pertain to any part of 104 | the Derivative Works; and 105 | 106 | (d) If the Work includes a "NOTICE" text file as part of its 107 | distribution, then any Derivative Works that You distribute must 108 | include a readable copy of the attribution notices contained 109 | within such NOTICE file, excluding those notices that do not 110 | pertain to any part of the Derivative Works, in at least one 111 | of the following places: within a NOTICE text file distributed 112 | as part of the Derivative Works; within the Source form or 113 | documentation, if provided along with the Derivative Works; or, 114 | within a display generated by the Derivative Works, if and 115 | wherever such third-party notices normally appear. The contents 116 | of the NOTICE file are for informational purposes only and 117 | do not modify the License. You may add Your own attribution 118 | notices within Derivative Works that You distribute, alongside 119 | or as an addendum to the NOTICE text from the Work, provided 120 | that such additional attribution notices cannot be construed 121 | as modifying the License. 122 | 123 | You may add Your own copyright statement to Your modifications and 124 | may provide additional or different license terms and conditions 125 | for use, reproduction, or distribution of Your modifications, or 126 | for any such Derivative Works as a whole, provided Your use, 127 | reproduction, and distribution of the Work otherwise complies with 128 | the conditions stated in this License. 129 | 130 | 5. Submission of Contributions. Unless You explicitly state otherwise, 131 | any Contribution intentionally submitted for inclusion in the Work 132 | by You to the Licensor shall be under the terms and conditions of 133 | this License, without any additional terms or conditions. 134 | Notwithstanding the above, nothing herein shall supersede or modify 135 | the terms of any separate license agreement you may have executed 136 | with Licensor regarding such Contributions. 137 | 138 | 6. Trademarks. This License does not grant permission to use the trade 139 | names, trademarks, service marks, or product names of the Licensor, 140 | except as required for reasonable and customary use in describing the 141 | origin of the Work and reproducing the content of the NOTICE file. 142 | 143 | 7. Disclaimer of Warranty. Unless required by applicable law or 144 | agreed to in writing, Licensor provides the Work (and each 145 | Contributor provides its Contributions) on an "AS IS" BASIS, 146 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or 147 | implied, including, without limitation, any warranties or conditions 148 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A 149 | PARTICULAR PURPOSE. You are solely responsible for determining the 150 | appropriateness of using or redistributing the Work and assume any 151 | risks associated with Your exercise of permissions under this License. 152 | 153 | 8. Limitation of Liability. In no event and under no legal theory, 154 | whether in tort (including negligence), contract, or otherwise, 155 | unless required by applicable law (such as deliberate and grossly 156 | negligent acts) or agreed to in writing, shall any Contributor be 157 | liable to You for damages, including any direct, indirect, special, 158 | incidental, or consequential damages of any character arising as a 159 | result of this License or out of the use or inability to use the 160 | Work (including but not limited to damages for loss of goodwill, 161 | work stoppage, computer failure or malfunction, or any and all 162 | other commercial damages or losses), even if such Contributor 163 | has been advised of the possibility of such damages. 164 | 165 | 9. Accepting Warranty or Additional Liability. While redistributing 166 | the Work or Derivative Works thereof, You may choose to offer, 167 | and charge a fee for, acceptance of support, warranty, indemnity, 168 | or other liability obligations and/or rights consistent with this 169 | License. However, in accepting such obligations, You may act only 170 | on Your own behalf and on Your sole responsibility, not on behalf 171 | of any other Contributor, and only if You agree to indemnify, 172 | defend, and hold each Contributor harmless for any liability 173 | incurred by, or claims asserted against, such Contributor by reason 174 | of your accepting any such warranty or additional liability. 175 | 176 | END OF TERMS AND CONDITIONS 177 | 178 | APPENDIX: How to apply the Apache License to your work. 179 | 180 | To apply the Apache License to your work, attach the following 181 | boilerplate notice, with the fields enclosed by brackets "[]" 182 | replaced with your own identifying information. (Don't include 183 | the brackets!) The text should be enclosed in the appropriate 184 | comment syntax for the file format. We also recommend that a 185 | file or class name and description of purpose be included on the 186 | same "printed page" as the copyright notice for easier 187 | identification within third-party archives. 188 | 189 | Copyright [yyyy] [name of copyright owner] 190 | 191 | Licensed under the Apache License, Version 2.0 (the "License"); 192 | you may not use this file except in compliance with the License. 193 | You may obtain a copy of the License at 194 | 195 | http://www.apache.org/licenses/LICENSE-2.0 196 | 197 | Unless required by applicable law or agreed to in writing, software 198 | distributed under the License is distributed on an "AS IS" BASIS, 199 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 200 | See the License for the specific language governing permissions and 201 | limitations under the License. 202 | -------------------------------------------------------------------------------- /Sources/MatrixColorSelector/MatrixColorSelector.swift: -------------------------------------------------------------------------------- 1 | // The Swift Programming Language 2 | // https://docs.swift.org/swift-book 3 | 4 | import SwiftUI 5 | import AppKit 6 | 7 | public struct MatrixColorSelector: View { 8 | @Binding var selection: Color 9 | @State private var popover: Bool = false 10 | var titleKey: LocalizedStringKey 11 | var noMoreColors: Bool 12 | 13 | public init(_ titleKey: LocalizedStringKey, selection: Binding, noMoreColors: Bool = false) { 14 | self.titleKey = titleKey 15 | self._selection = selection 16 | self.noMoreColors = noMoreColors 17 | } 18 | 19 | public var body: some View { 20 | HStack { 21 | if titleKey != "" { Text(titleKey) } 22 | Button(action: { 23 | popover = true 24 | }, label: { 25 | ZStack { 26 | if selection != .clear { 27 | RoundedRectangle(cornerRadius: 2, style: .continuous) 28 | .fill(selection) 29 | .frame(width: 38, height: 17) 30 | .overlay( 31 | RoundedRectangle(cornerRadius: 2.5, style: .continuous) 32 | .stroke(lineWidth: 1) 33 | .opacity(0.25) 34 | ) 35 | .mask(RoundedRectangle(cornerRadius: 2.5, style: .continuous)) 36 | .padding([.leading, .trailing], -5).padding([.top, .bottom], 2) 37 | } else { 38 | RoundedRectangle(cornerRadius: 2, style: .continuous) 39 | .fill(.white) 40 | .frame(width: 38, height: 17) 41 | .overlay( 42 | ZStack { 43 | RoundedRectangle(cornerRadius: 2.5, style: .continuous) 44 | .stroke(lineWidth: 1) 45 | .opacity(0.25) 46 | Rectangle() 47 | .fill(.red) 48 | .frame(height: 1) 49 | .rotationEffect(Angle(degrees: -22)) 50 | } 51 | ) 52 | .mask(RoundedRectangle(cornerRadius: 2.5, style: .continuous)) 53 | .padding([.leading, .trailing], -5).padding([.top, .bottom], 2) 54 | } 55 | } 56 | }) 57 | .foregroundColor(.red) 58 | .frame(width: 44, height: 23) 59 | .popover(isPresented: $popover, arrowEdge: .bottom) { 60 | MatrixColorSelectorView(selection: $selection, noMoreColors: noMoreColors).padding(10) 61 | } 62 | } 63 | } 64 | } 65 | 66 | public struct MatrixColorSelectorView: View { 67 | @Environment(\.presentationMode) var presentationMode 68 | @State private var panel: Bool = false 69 | @Binding var selection: Color 70 | var noMoreColors: Bool 71 | private var colorPreset: [Color] = [.red, Color(.orange), Color(.yellow), Color(.green), Color(.cyan), Color(.blue), Color(NSColor.magenta), Color(.purple), Color(.brown), .white, .gray, .black] 72 | private var colorMatrix: [[Color?]] = [ 73 | [.clear, "133648".color, "1f4d62".color, "2f6c8c".color, "3c8ab1".color, "48a0d2".color, "59c4f7".color, "79d2f8".color, "a6e2fa".color, "d2f0fd".color], 74 | [.white, "071d54".color, "0f2d77".color, "1942a3".color, "2255ce".color, "285ff6".color, "4e86f6".color, "7fa6f7".color, "aec4f9".color, "d6e2fc".color], 75 | [Color(NSColor(white: 0.9, alpha: 1)), "0f0639".color, "180b4f".color, "281371".color, "331b8f".color, "4724ac".color, "5832e2".color, "7f52f5".color, "ab8ef6".color, "d6cafa".color], 76 | [Color(NSColor(white: 0.8, alpha: 1)), "2a093b".color, "3f1256".color, "591e78".color, "702899".color, "8d32b7".color, "b042eb".color, "c55ff6".color, "d796f8".color, "eacbfb".color], 77 | [Color(NSColor(white: 0.7, alpha: 1)), "370c1b".color, "4e162a".color, "6f223e".color, "8e2e4f".color, "aa395d".color, "d54a7a".color, "de789d".color, "e8a6c0".color, "f2d4df".color], 78 | [Color(NSColor(white: 0.6, alpha: 1)), "541107".color, "771e0e".color, "a72c18".color, "d13a20".color, "ea512e".color, "ed6c59".color, "ef9286".color, "f4b8b1".color, "f9dcd8".color], 79 | [Color(NSColor(white: 0.5, alpha: 1)), "532009".color, "722f10".color, "a0451a".color, "c95b24".color, "ed742e".color, "ef8d55".color, "f2a984".color, "f6c7af".color, "fae4d8".color], 80 | [Color(NSColor(white: 0.4, alpha: 1)), "53360e".color, "734b17".color, "a06a23".color, "c9882f".color, "f3ae3c".color, "f4b757".color, "f6c882".color, "f9daae".color, "fcedd7".color], 81 | [Color(NSColor(white: 0.3, alpha: 1)), "523e0f".color, "735919".color, "a07d27".color, "caa035".color, "f5c944".color, "f7cd5b".color, "f9da85".color, "fbe5af".color, "fcf2d7".color], 82 | [Color(NSColor(white: 0.2, alpha: 1)), "65611c".color, "8c8628".color, "c2bd3c".color, "f3ec4e".color, "fefc66".color, "fff781".color, "fefaa1".color, "fffcc0".color, "fdfde0".color], 83 | [Color(NSColor(white: 0.1, alpha: 1)), "505518".color, "707624".color, "9da537".color, "c6d046".color, "dceb5c".color, "e6ef79".color, "edf29b".color, "f3f6bf".color, "f8fadf".color], 84 | [.black, "2b3d16".color, "3f5623".color, "587933".color, "729b45".color, "86b954".color, "a3d16e".color, "badd95".color, "d2e6b9".color, "e3ecd6".color]] 85 | 86 | public init(selection: Binding, noMoreColors: Bool = false) { 87 | self._selection = selection 88 | self.noMoreColors = noMoreColors 89 | } 90 | 91 | public var body: some View { 92 | VStack(spacing: 6) { 93 | HStack(spacing: 1) { 94 | ForEach(colorPreset, id: \.self) { color in 95 | ColorCellButton(color: color, selection: $selection) 96 | .focusable(false) 97 | } 98 | } 99 | HStack(spacing: 1) { 100 | ForEach(colorMatrix, id: \.self) { colors in 101 | VStack(spacing:1) { 102 | ForEach(colors, id: \.self) { color in 103 | if let color = color { 104 | ColorCellButton(color: color, selection: $selection) 105 | .focusable(false) 106 | } 107 | } 108 | } 109 | } 110 | } 111 | if !noMoreColors { 112 | Button(action: { 113 | panel = true 114 | }, label: { 115 | Text("Show Colors...").frame(width: 165) 116 | }) 117 | .focusable(false) 118 | .sheet(isPresented: $panel) { 119 | ColorPanelWrapper(selection: $selection) 120 | .frame(width: 0, height: 0) 121 | .onAppear { 122 | NotificationCenter.default.addObserver( 123 | forName: NSWindow.willCloseNotification, 124 | object: NSColorPanel.shared, 125 | queue: .main 126 | ) { _ in 127 | NotificationCenter.default.removeObserver(self, name: NSWindow.willCloseNotification, object: NSColorPanel.shared) 128 | panel = false 129 | } 130 | DispatchQueue.main.asyncAfter(deadline: .now() + 0.1) { 131 | NSColorPanel.shared.makeKeyAndOrderFront(nil) 132 | } 133 | } 134 | } 135 | } 136 | } 137 | } 138 | } 139 | 140 | struct ColorCellButton: View { 141 | var color: Color 142 | @Binding var selection: Color 143 | @State var mouseOver: Bool = false 144 | 145 | var body: some View { 146 | Button(action: { 147 | selection = color 148 | }, label: { 149 | ZStack { 150 | ZStack { 151 | if color == .clear { 152 | Color.white 153 | .overlay( 154 | Rectangle() 155 | .fill(.red) 156 | .frame(height: 1) 157 | .rotationEffect(Angle(degrees: -45)) 158 | ) 159 | if mouseOver { 160 | Rectangle() 161 | .stroke(.black.opacity(0.25), lineWidth: 1) 162 | .padding(0.5) 163 | } 164 | } else { 165 | color 166 | .overlay( 167 | Rectangle() 168 | .stroke((mouseOver ? .black.opacity(0.25) : .primary.opacity(0.3)), lineWidth: 1) 169 | .padding(0.5) 170 | ) 171 | } 172 | }.frame(width: mouseOver ? 10: 14, height: mouseOver ? 10: 14) 173 | if mouseOver { 174 | ZStack { 175 | RoundedRectangle(cornerRadius: 2, style: .continuous) 176 | .fill(.white) 177 | .overlay( 178 | RoundedRectangle(cornerRadius: 2, style: .continuous) 179 | .stroke(lineWidth: 1) 180 | .opacity(0.4) 181 | ) 182 | Rectangle() 183 | .fill(.black) 184 | .frame(width: 10, height: 10) 185 | .blendMode(.destinationOut) 186 | } 187 | .compositingGroup() 188 | .frame(width: 15, height: 15) 189 | } 190 | } 191 | }) 192 | .buttonStyle(.plain) 193 | .onHover { hovering in mouseOver = hovering } 194 | .frame(width: 14, height: 14) 195 | } 196 | } 197 | 198 | extension String { 199 | var color: Color? { 200 | var hexSanitized = self.trimmingCharacters(in: .whitespacesAndNewlines).uppercased() 201 | 202 | if hexSanitized.hasPrefix("#") { hexSanitized.remove(at: hexSanitized.startIndex) } 203 | 204 | guard hexSanitized.count == 6 else { return nil } 205 | 206 | var rgbValue: UInt64 = 0 207 | Scanner(string: hexSanitized).scanHexInt64(&rgbValue) 208 | 209 | let red = CGFloat((rgbValue & 0xFF0000) >> 16) / 255.0 210 | let green = CGFloat((rgbValue & 0x00FF00) >> 8) / 255.0 211 | let blue = CGFloat(rgbValue & 0x0000FF) / 255.0 212 | 213 | return Color(NSColor(displayP3Red: red, green: green, blue: blue, alpha: 1.0)) 214 | } 215 | } 216 | 217 | struct ColorPanelWrapper: NSViewRepresentable { 218 | @Binding var selection: Color 219 | 220 | func makeCoordinator() -> Coordinator { Coordinator(self) } 221 | 222 | func makeNSView(context: Context) -> NSView { 223 | let nsView = NSView() 224 | let colorPanel = NSColorPanel.shared 225 | colorPanel.setTarget(context.coordinator) 226 | colorPanel.setAction(#selector(Coordinator.colorDidChange)) 227 | colorPanel.isContinuous = true 228 | colorPanel.makeKeyAndOrderFront(nil) 229 | return nsView 230 | } 231 | 232 | func updateNSView(_ nsView: NSView, context: Context) {} 233 | 234 | class Coordinator: NSObject { 235 | var parent: ColorPanelWrapper 236 | 237 | init(_ parent: ColorPanelWrapper) { 238 | self.parent = parent 239 | } 240 | 241 | @objc func colorDidChange() { 242 | let nsColor = NSColorPanel.shared.color 243 | parent.selection = Color(nsColor) 244 | } 245 | } 246 | } 247 | --------------------------------------------------------------------------------