1.1.165 • Published 3 years ago

@whalecloud/magic-box-lite v1.1.165

Weekly downloads
168
License
MIT
Repository
-
Last release
3 years ago

MagicBox Decorator - 魔方装修工具

MagicBox(魔方) 是装修工具的名称,也是核心组件的名称。

1.Usage

yarn add @whalecloud/magic-box
  • 设计态使用 Designer 组件
  • 预览态使用 Previewer 组件

Designer & Previewer 是两个巨型 React 组件,所有功能都封装在组件内部,所有必备的参数和定制都通过 props 传递进来。

2. Screen Shots

3. Architecture

3.1 Grid Layout

设计器整体采用行列布局,也就是 Row( MRow 类) 和 Column( MCol 类) 模型,此设计参考了 Bootstrap 的栅格布局模型。

MRow 表示一行,MCol 表示一列,MRow 中只能放置 MCol。虽然组件没有约束一行中最多放多少列,但是建议参考 Bootstrap 的思路,最多放 12 列。

MCol 内部可以放真正的业务组件,也可以继续放置 MRow,可以形成无限嵌套。

3.2 Data Driven & UI isolation

Designer 和 Renderer 都基于数据驱动模式工作,整体是一份巨大的 JSON 数据。

数据中只记录组件类型和数据,不记录组件具体的展示逻辑,UI 展示逻辑由不同类型的 Render 具体负责,在对页面布局要求不高的场景下,PC、手机端、Pad 可以共用一份数据。

数据格式示例:

{
    index: 0,
    id: 'df019a54-e3fb-40f8-b916-d2cde8325475',
    pid: -1,
    childNodes: [
        {
            type: 'MRow',
            id: '9c40cfe6-c6ff-418f-8ae6-5e1818189172',
            title: 'MRow',
            pid: 'df019a54-e3fb-40f8-b916-d2cde8325475',
            index: 0,
            childNodes: [
                {
                    type: 'MCol',
                    id: '9d027c88-ad6d-43c3-850e-ab8bae6b8ab4',
                    title: 'MCol',
                    pid: '9c40cfe6-c6ff-418f-8ae6-5e1818189172',
                    index: 0,
                    childNodes: [
                        {
                            type: 'GalaryTemplate4',
                            id: '80c970f7-5f30-4f72-b6a9-455399ac2aea',
                            title: '4 Images',
                            pid: '9d027c88-ad6d-43c3-850e-ab8bae6b8ab4',
                            index: 0,
                        },
                    ],
                },
            ],
        }
...

3.3. Directory Structure

document updating...

3.4. Core Components

核心组件只有2个:

  • MagicBox: 是整个设计器和渲染器的核心,MagicBox 在逻辑上可以看成超级 DIV,它在 DIV 的基础上增加了拖拽布局和渲染功能。重要:因为 react-dnd 目前只能支持函数式组件,所以这里只能写成函数形式。MagicBox 在 designer 模式和 renderer 模式下具有不同的外观和功能。MagicBox 切分成2个内部组件分别实现设计器和渲染器功能 DesignerBox 和 RendererBox。在 designer 模式下,具有拖拽布局功能。在 renderer 模式下纯展现,其功能退化成一层空的容器 div,不再具有拖拽交互功能。
  • DropZone: 封装放置区域逻辑,当把对象拖动到 DropZone 并放开鼠标时,会触发 drop 动作。 MagicBox 和 DropZone 基于 react-dnd 进行了再次封装,它们是内部核心机制,设计器的外部调用方不需要关心这两个类的实现细节,只要关注暴露的参数即可,下是 MagicBox 的核心参数:
id,
pid,
index,
nodeData,
children,
onHover,
onDrop,
componentMap,
acceptTypes = ['MagicBox', 'MRow'], //盒子内部可以接受的类型只有 MagicBox 和 MRow,MagicBox 默认可以接受自己,形成无限嵌套。
isValidDest = false,
canDrag = true,
isLeaf = false,
isSelected = false,
innerDirection = 'vertical',
1.1.100

3 years ago

1.1.107

3 years ago

1.1.106

3 years ago

1.1.105

3 years ago

1.1.104

3 years ago

1.1.103

3 years ago

1.1.102

3 years ago

1.1.101

3 years ago

1.1.122

3 years ago

1.1.121

3 years ago

1.1.120

3 years ago

1.1.129

3 years ago

1.1.99

3 years ago

1.1.128

3 years ago

1.1.127

3 years ago

1.1.126

3 years ago

1.1.125

3 years ago

1.1.124

3 years ago

1.1.123

3 years ago

1.1.109

3 years ago

1.1.111

3 years ago

1.1.119

3 years ago

1.1.118

3 years ago

1.1.117

3 years ago

1.1.116

3 years ago

1.1.115

3 years ago

1.1.114

3 years ago

1.1.113

3 years ago

1.1.112

3 years ago

1.1.70

3 years ago

1.1.74

3 years ago

1.1.73

3 years ago

1.1.72

3 years ago

1.1.71

3 years ago

1.1.78

3 years ago

1.1.77

3 years ago

1.1.76

3 years ago

1.1.75

3 years ago

1.1.79

3 years ago

1.1.81

3 years ago

1.1.80

3 years ago

1.1.83

3 years ago

1.1.82

3 years ago

1.1.52

3 years ago

1.1.51

3 years ago

1.1.50

3 years ago

1.1.56

3 years ago

1.1.55

3 years ago

1.1.53

3 years ago

1.1.59

3 years ago

1.1.58

3 years ago

1.1.57

3 years ago

1.1.63

3 years ago

1.1.62

3 years ago

1.1.61

3 years ago

1.1.60

3 years ago

1.1.67

3 years ago

1.1.66

3 years ago

1.1.65

3 years ago

1.1.64

3 years ago

1.1.69

3 years ago

1.1.68

3 years ago

1.1.34

3 years ago

1.1.38

3 years ago

1.1.37

3 years ago

1.1.35

3 years ago

1.1.39

3 years ago

1.1.41

3 years ago

1.1.40

3 years ago

1.1.45

3 years ago

1.1.44

3 years ago

1.1.43

3 years ago

1.1.42

3 years ago

1.1.49

3 years ago

1.1.48

3 years ago

1.1.47

3 years ago

1.1.46

3 years ago

1.1.144

3 years ago

1.1.143

3 years ago

1.1.142

3 years ago

1.1.141

3 years ago

1.1.140

3 years ago

1.1.149

3 years ago

1.1.148

3 years ago

1.1.147

3 years ago

1.1.146

3 years ago

1.1.145

3 years ago

1.1.133

3 years ago

1.1.132

3 years ago

1.1.131

3 years ago

1.1.130

3 years ago

1.1.139

3 years ago

1.1.138

3 years ago

1.1.137

3 years ago

1.1.136

3 years ago

1.1.135

3 years ago

1.1.134

3 years ago

1.1.165

3 years ago

1.1.164

3 years ago

1.1.163

3 years ago

1.1.162

3 years ago

1.1.161

3 years ago

1.1.160

3 years ago

1.1.155

3 years ago

1.1.154

3 years ago

1.1.153

3 years ago

1.1.152

3 years ago

1.1.151

3 years ago

1.1.150

3 years ago

1.1.159

3 years ago

1.1.158

3 years ago

1.1.156

3 years ago

0.0.1

3 years ago

0.0.3

3 years ago

0.0.5

3 years ago

0.0.4

3 years ago

1.2.2

3 years ago

1.0.305

4 years ago

1.0.304

4 years ago

1.0.307

4 years ago

1.0.306

4 years ago

1.0.301

4 years ago

1.0.300

4 years ago

1.0.303

4 years ago

1.0.302

4 years ago

1.0.321

4 years ago

1.0.320

4 years ago

1.0.323

4 years ago

1.0.322

4 years ago

1.0.319

4 years ago

1.0.310

4 years ago

1.0.316

4 years ago

1.0.315

4 years ago

1.0.318

4 years ago

1.0.317

4 years ago

1.0.312

4 years ago

1.0.311

4 years ago

1.0.314

4 years ago

1.0.313

4 years ago

1.0.309

4 years ago

1.0.308

4 years ago

1.0.297

4 years ago

1.0.296

4 years ago

1.0.299

4 years ago

1.0.298

4 years ago

1.0.293

4 years ago

1.0.292

4 years ago

1.0.295

4 years ago

1.0.294

4 years ago

1.0.291

4 years ago

1.0.290

4 years ago

1.0.385

3 years ago

1.0.384

3 years ago

1.0.387

3 years ago

1.1.28

3 years ago

1.0.386

3 years ago

1.0.381

3 years ago

1.0.380

3 years ago

1.0.383

3 years ago

1.0.382

3 years ago

1.0.389

3 years ago

1.0.388

3 years ago

1.1.30

3 years ago

1.1.32

3 years ago

1.1.31

3 years ago

1.0.374

4 years ago

1.0.373

4 years ago

1.0.376

4 years ago

1.0.375

4 years ago

1.0.370

4 years ago

1.0.372

4 years ago

1.0.371

4 years ago

1.0.378

3 years ago

1.0.377

4 years ago

1.0.286

4 years ago

1.0.285

4 years ago

1.0.288

4 years ago

1.0.287

4 years ago

1.0.282

4 years ago

1.0.281

4 years ago

1.0.284

4 years ago

1.0.283

4 years ago

1.1.9

3 years ago

1.1.8

3 years ago

1.1.7

3 years ago

1.1.6

3 years ago

1.1.5

3 years ago

1.1.4

3 years ago

1.0.289

4 years ago

1.1.3

3 years ago

1.1.2

3 years ago

1.1.12

3 years ago

1.1.10

3 years ago

1.0.280

4 years ago

1.1.16

3 years ago

1.1.14

3 years ago

1.1.13

3 years ago

1.0.396

3 years ago

1.0.275

4 years ago

1.1.19

3 years ago

1.0.395

3 years ago

1.0.274

4 years ago

1.1.18

3 years ago

1.0.277

4 years ago

1.1.17

3 years ago

1.0.276

4 years ago

1.0.392

3 years ago

1.0.391

3 years ago

1.0.394

3 years ago

1.0.273

4 years ago

1.0.393

3 years ago

1.0.279

4 years ago

1.0.278

4 years ago

1.1.22

3 years ago

1.1.21

3 years ago

1.0.390

3 years ago

1.1.20

3 years ago

1.1.27

3 years ago

1.1.26

3 years ago

1.1.25

3 years ago

1.1.24

3 years ago

1.0.369

4 years ago

1.0.269

4 years ago

1.0.271

4 years ago

1.0.270

4 years ago

1.0.272

4 years ago

1.0.264

4 years ago

1.0.263

4 years ago

1.0.266

4 years ago

1.0.265

4 years ago

1.0.262

4 years ago

1.0.261

4 years ago

1.0.268

4 years ago

1.0.267

4 years ago

1.0.260

4 years ago

1.0.259

4 years ago

1.0.258

4 years ago

1.0.257

4 years ago

1.0.256

4 years ago

1.0.255

4 years ago

1.0.253

4 years ago

1.0.252

4 years ago

1.0.254

4 years ago

1.0.251

4 years ago

1.0.250

4 years ago

1.0.249

4 years ago

1.0.248

4 years ago

1.0.244

4 years ago

1.0.246

4 years ago

1.0.245

4 years ago

1.0.247

4 years ago

1.0.242

4 years ago

1.0.241

4 years ago

1.0.243

4 years ago

1.0.240

4 years ago

1.0.239

4 years ago

1.0.238

4 years ago

1.0.235

4 years ago

1.0.237

4 years ago

1.0.236

4 years ago

1.0.228

4 years ago

1.0.227

4 years ago

1.0.229

4 years ago

1.0.226

4 years ago

1.0.231

4 years ago

1.0.230

4 years ago

1.0.233

4 years ago

1.0.232

4 years ago

1.0.234

4 years ago

1.0.224

4 years ago

1.0.223

4 years ago

1.0.225

4 years ago

1.0.220

4 years ago

1.0.221

4 years ago

1.0.219

4 years ago

1.0.217

4 years ago

1.0.216

4 years ago

1.0.218

4 years ago

1.0.211

4 years ago

1.0.210

4 years ago

1.0.213

4 years ago

1.0.212

4 years ago

1.0.215

4 years ago

1.0.214

4 years ago

1.0.206

4 years ago

1.0.205

4 years ago

1.0.208

4 years ago

1.0.207

4 years ago

1.0.204

4 years ago

1.0.203

4 years ago

1.0.209

4 years ago

1.0.200

4 years ago

1.0.202

4 years ago

1.0.201

4 years ago

1.0.198

4 years ago

1.0.197

4 years ago

1.0.199

4 years ago

1.0.194

4 years ago

1.0.193

4 years ago

1.0.196

4 years ago

1.0.195

4 years ago

1.0.190

4 years ago

1.0.192

4 years ago

1.0.191

4 years ago

1.0.187

4 years ago

1.0.186

4 years ago

1.0.189

4 years ago

1.0.188

4 years ago

1.0.183

4 years ago

1.0.182

4 years ago

1.0.185

4 years ago

1.0.184

4 years ago

1.0.181

4 years ago

1.0.180

4 years ago

1.0.176

4 years ago

1.0.175

4 years ago

1.0.178

4 years ago

1.0.177

4 years ago

1.0.179

4 years ago

1.0.172

4 years ago

1.0.174

4 years ago

1.0.173

4 years ago

1.0.171

4 years ago

1.0.170

4 years ago

1.0.169

4 years ago

1.0.168

4 years ago

1.0.167

4 years ago

1.0.166

4 years ago

1.0.165

4 years ago

1.0.164

4 years ago

1.0.161

4 years ago

1.0.160

4 years ago

1.0.163

4 years ago

1.0.162

4 years ago

1.0.156

4 years ago

1.0.158

4 years ago

1.0.157

4 years ago

1.0.159

4 years ago

1.0.154

4 years ago

1.0.153

4 years ago

1.0.155

4 years ago

1.0.152

4 years ago

1.0.151

4 years ago

1.0.149

4 years ago

1.0.150

4 years ago

1.0.148

4 years ago

1.0.143

4 years ago

1.0.145

4 years ago

1.0.144

4 years ago

1.0.147

4 years ago

1.0.146

4 years ago

1.0.142

4 years ago

1.0.141

4 years ago

1.0.140

4 years ago

1.0.121

4 years ago

1.0.120

4 years ago

1.0.123

4 years ago

1.0.122

4 years ago

1.0.129

4 years ago

1.0.128

4 years ago

1.0.125

4 years ago

1.0.124

4 years ago

1.0.127

4 years ago

1.0.126

4 years ago

1.0.132

4 years ago

1.0.110

4 years ago

1.0.131

4 years ago

1.0.134

4 years ago

1.0.112

4 years ago

1.0.133

4 years ago

1.0.111

4 years ago

1.0.130

4 years ago

1.0.118

4 years ago

1.0.139

4 years ago

1.0.117

4 years ago

1.0.119

4 years ago

1.0.136

4 years ago

1.0.114

4 years ago

1.0.135

4 years ago

1.0.113

4 years ago

1.0.138

4 years ago

1.0.137

4 years ago

1.0.115

4 years ago

1.0.109

4 years ago

1.0.108

4 years ago

1.0.107

4 years ago

1.0.106

4 years ago

1.0.103

4 years ago

1.0.105

4 years ago

1.0.102

4 years ago

1.0.101

4 years ago