ahri-cloud-projects/X6
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: ♻️ refactor standard shape definitions

Browse Source
This commit is contained in:
bubkoo
2021-01-21 09:57:20 +08:00
parent 8fe321591a
commit c1b4da0bcf
7 changed files with 33 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
packages/x6/src/shape/base.ts
View File

@ -33,18 +33,24 @@ export class Base<
}
export namespace Base {
export const bodyAttr = {
fill: '#ffffff',
stroke: '#333333',
strokeWidth: 2,
}
export const labelAttr = {
fontSize: 14,
fill: '#000000',
refX: 0.5,
refY: 0.5,
textAnchor: 'middle',
textVerticalAnchor: 'middle',
fontFamily: 'Arial, helvetica, sans-serif',
}
Base.config({
attrs: {
text: {
fontSize: 14,
fill: '#000000',
refX: 0.5,
refY: 0.5,
textAnchor: 'middle',
textVerticalAnchor: 'middle',
fontFamily: 'Arial, helvetica, sans-serif',
},
},
attrs: { text: { ...labelAttr } },
propHooks(metadata) {
const { label, ...others } = metadata
if (label) {

5
packages/x6/src/shape/standard/cylinder.ts
View File

@ -1,5 +1,4 @@
import { NumberExt } from '../../util'
import { bodyAttr } from './util'
import { Base } from '../base'
const CYLINDER_TILT = 10
@ -23,11 +22,11 @@ export const Cylinder = Base.define({
],
attrs: {
body: {
...bodyAttr,
...Base.bodyAttr,
lateral: CYLINDER_TILT,
},
top: {
...bodyAttr,
...Base.bodyAttr,
refCx: '50%',
refRx: '50%',
cy: CYLINDER_TILT,

4
packages/x6/src/shape/standard/edge.ts
View File

@ -1,6 +1,6 @@
import { Edge as E } from '../../model/edge'
import { Edge as EdgeBase } from '../../model/edge'
export const Edge = E.define({
export const Edge = EdgeBase.define({
shape: 'edge',
markup: [
{

12
packages/x6/src/shape/standard/path.ts
View File

@ -1,8 +1,7 @@
import { Node } from '../../model/node'
import { ObjectExt } from '../../util'
import { labelAttr } from './util'
import { Base } from '../base'
export const Path = Node.define({
export const Path = Base.define({
shape: 'path',
markup: [
{
@ -31,16 +30,13 @@ export const Path = Node.define({
stroke: '#000',
strokeWidth: 2,
},
label: labelAttr,
},
propHooks(metadata) {
const { path, label, ...others } = metadata
const { path, ...others } = metadata
if (path) {
ObjectExt.setByPath(others, 'attrs/body/refD', path)
}
if (label) {
ObjectExt.setByPath(others, 'attrs/text/text', label)
}
return others
},
})

10
packages/x6/src/shape/standard/rect-headered.ts
View File

@ -1,5 +1,5 @@
import { bodyAttr, labelAttr } from './util'
import { Node } from '../../model/node'
import { Base } from '../base'
export const HeaderedRect = Node.define({
shape: 'rect-headered',
@ -23,24 +23,24 @@ export const HeaderedRect = Node.define({
],
attrs: {
body: {
...bodyAttr,
...Base.bodyAttr,
refWidth: '100%',
refHeight: '100%',
},
header: {
...bodyAttr,
...Base.bodyAttr,
refWidth: '100%',
height: 30,
stroke: '#000000',
},
headerText: {
...labelAttr,
...Base.labelAttr,
refX: '50%',
refY: 15,
fontSize: 16,
},
bodyText: {
...labelAttr,
...Base.labelAttr,
refY2: 15,
},
},

3
packages/x6/src/shape/standard/text-block.ts
View File

@ -1,6 +1,5 @@
import { Platform, Dom, FunctionExt, ObjectExt } from '../../util'
import { Attr } from '../../registry'
import { bodyAttr } from './util'
import { Base } from '../base'
export const TextBlock = Base.define({
@ -45,7 +44,7 @@ export const TextBlock = Base.define({
],
attrs: {
body: {
...bodyAttr,
...Base.bodyAttr,
refWidth: '100%',
refHeight: '100%',
},

23
packages/x6/src/shape/standard/util.ts
View File

@ -1,7 +1,7 @@
import { ObjectExt } from '../../util'
import { Markup } from '../../view/markup'
import { Node } from '../../model/node'
import { Base } from '../base'
import { ObjectExt } from '../../util'
export function getMarkup(tagName: string, selector: string = 'body'): Markup {
return [
@ -16,21 +16,6 @@ export function getMarkup(tagName: string, selector: string = 'body'): Markup {
]
}
export const bodyAttr = {
fill: '#ffffff',
stroke: '#333333',
strokeWidth: 2,
}
export const labelAttr = {
fontSize: 14,
fill: '#333333',
refX: '50%',
refY: '50%',
textAnchor: 'middle',
textVerticalAnchor: 'middle',
}
export function createShape(
shape: string,
config: Node.Config,
@ -43,11 +28,7 @@ export function createShape(
constructorName: shape,
markup: getMarkup(shape, options.selector),
attrs: {
[shape]: {
fill: '#ffffff',
stroke: '#333333',
strokeWidth: 2,
},
[shape]: { ...Base.bodyAttr },
},
}