https://github.com/p-x9/sdcalayer
Server-Driven CALayer.
https://github.com/p-x9/sdcalayer
hot-reload server-driven-ui serverdrivenui
Last synced: 11 months ago
JSON representation
Server-Driven CALayer.
- Host: GitHub
- URL: https://github.com/p-x9/sdcalayer
- Owner: p-x9
- License: mit
- Created: 2022-11-03T11:48:20.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-04-09T04:40:27.000Z (almost 2 years ago)
- Last Synced: 2025-03-01T19:04:19.605Z (12 months ago)
- Topics: hot-reload, server-driven-ui, serverdrivenui
- Language: Swift
- Homepage:
- Size: 138 KB
- Stars: 13
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# SDCALayer
Server-Driven CALayer
## Demo
## Document
### Supported Layer
- CALayer
- CAShapeLayer
- CATextLayer
- CAScrollLayer
- CAGradientLayer
- CAReplicatorLayer
### JSON to CALayer
```swift
let json: String = ""
let model = SDCALayer.load(fromJSON: json)
let layer: CALayer = model?.convertToLayer()
```
### YAML to CALayer
```swift
let model = SDCALayer.load(fromYAML: yaml)
```
### CALayer to JSON
```swift
let layer = CAShapeLayer()
/* ~ customize layer ~ */
let model = SDCALayer(model: layer.codable())
let json: String = model?.json
```
### CALayer to YAML
```swift
let yaml: String = model?.yaml
```
### Formats of Layer Model
Layer's models are defined in the following directory.
[Models](./Sources/SDCALayer/Model/)
```json
{
"frame": [
[
0,
0
],
[
100,
50
]
],
"cornerRadius": 5.0,
"borderColor": {
"code": "#FF0088"
},
// other properties
}
```
Since we need to know the actual class of the Layer, we need to receive a model with the class name and a model for each class, as follows
```json
{
"class": "CAShapeLayer",
"layerModel": {
// CAShapeLayer Model
}
}
```
By using the [p-x9/IndirectlyCodable](https://github.com/p-x9/IndirectlyCodable) library, CALayer indirectly conforms to the `Codable` protocol, allowing inter-conversion with json.
#### Support for custom layer classes
Suppose we have the following customized layer class.
```swift
class AALayer: CALayer {
var newProperty: String? = "AAAA"
}
```
create layer model like this.
click to expand
```swift
class JAALayer: JCALayer {
typealias Target = AALayer // alias for target layer class
// Coding key (codable)
private enum CodingKeys: String, CodingKey {
case newProperty
}
// Target class name to exact layer class
// You must specify the class name including the product name and package name.
// (ex. MyApp.AALayer)
public override class var targetTypeName: String {
String(reflecting: Target.self)
}
override init() {
super.init()
}
// Decodable
public required init(from decoder: Decoder) throws {
try super.init(from: decoder)
let container = try decoder.container(keyedBy: CodingKeys.self)
newProperty = try container.decodeIfPresent(String.self, forKey: .newProperty)
}
public required convenience init(with object: CALayer) {
self.init()
reverseApplyProperties(with: object)
}
// Encodable
public override func encode(to encoder: Encoder) throws {
try super.encode(to: encoder)
var container = encoder.container(keyedBy: CodingKeys.self)
try container.encode(newProperty, forKey: .newProperty)
}
// apply properties to taget from model
// model -> target
public override func applyProperties(to target: CALayer) {
super.applyProperties(to: target)
guard let target = target as? AALayer else { return }
target.newProperty = newProperty
}
// apply properties to model from target
// targe -> model
public override func applyProperties(with target: CALayer) {
super.applyProperties(with: target)
guard let target = target as? AALayer else { return }
newProperty = target.newProperty
}
public override func convertToLayer() -> CALayer? {
let layer = AALayer()
self.applyProperties(to: layer)
return layer
}
}
```
Finally, specify the model class in the layer class extension
```swift
extension AALayer {
public typealias Target = JAALayer
public override class var codableTypeName: String {
String(reflecting: Target.self)
}
}
```
## Example
### Websocket HotReload
Start the server, change the json, save it, and it will be reflected in the app.
install [calayer-ws app](./Example/calayer-ws/) to yor iphone (or simulator) and connect your server.
| A | B |
| ---- | ---- |
|  |  |
```sh
python ./server/ws-hotreload-server.py ""
```
example json file is [here](./Example/json/).
```sh
python ./server/ws-hotreload-server.py "./Example/json/star.json"
```
## Licenses
[MIT License](./LICENSE)