plot-plan-designer
Version:
Design Editor Tools with React.js + ant.design + fabric.js
297 lines (296 loc) • 7.3 kB
JavaScript
export const descriptors = {
MARKER: [
{
name: 'Marker',
trans: 'marker',
description: '',
type: 'marker',
icon: {
prefix: 'fas',
name: 'map-marker-alt',
},
option: {
type: 'i-text',
text: '\uf3c5',
fontFamily: 'Font Awesome 5 Free',
fontWeight: 900,
fontSize: 60,
width: 30,
height: 30,
editable: false,
name: 'New marker',
trans: 'new-marker',
},
},
],
TEXT: [
{
name: 'Text',
trans: 'text',
description: '',
type: 'text',
icon: {
prefix: 'fas',
name: 'font',
},
option: {
type: 'textbox',
text: '',
width: 60,
height: 30,
fontSize: 32,
trans: 'new-text',
name: 'New text',
},
},
],
IMAGE: [
{
name: 'Image',
trans: 'image',
description: '',
type: 'image',
icon: {
prefix: 'fas',
name: 'image',
},
option: {
type: 'image',
name: 'New image',
trans: 'new-image',
src: './images/sample/transparentBg.png',
},
},
{
name: 'GIF',
trans: 'gif',
description: '',
type: 'gif',
icon: {
prefix: 'fas',
name: 'image',
},
option: {
type: 'gif',
width: 400,
height: 400,
name: 'New gif',
trans: 'new-gif',
src: '',
},
},
],
SHAPE: [
{
name: 'Triangle',
trans: 'triangle',
description: '',
type: 'shape',
icon: {
prefix: 'fas',
name: 'play',
style: {
transform: 'rotate(270deg)',
},
},
option: {
type: 'triangle',
width: 30,
height: 30,
name: 'Triangle',
trans: 'new-triangle',
fill: 'rgba(255,0,0,0.3)',
stroke: 'rgb(255,0,0)',
},
},
{
name: 'Rectangle',
trans: 'rectangle',
description: '',
type: 'shape',
icon: {
prefix: 'fas',
name: 'stop',
},
option: {
type: 'rect',
width: 40,
height: 40,
name: 'Rectangle',
trans: 'new-rectangle',
fill: 'rgba(255,0,0,0.3)',
stroke: 'rgb(255,0,0)',
},
},
{
name: 'Circle',
trans: 'circle',
description: '',
type: 'shape',
icon: {
prefix: 'fas',
name: 'circle',
},
option: {
type: 'circle',
radius: 30,
name: 'Circle',
trans: 'new-circle',
fill: 'rgba(255,0,0,0.3)',
stroke: 'rgb(255,0,0)',
},
},
{
name: 'Cube',
trans: 'cube',
description: '',
type: 'shape',
icon: {
prefix: 'fas',
name: 'cube',
},
option: {
type: 'cube',
width: 80,
height: 80,
trans: 'new-cube',
name: 'New Cube',
},
},
],
DRAWING: [
{
name: 'Polygon',
trans: 'polygon',
description: '',
type: 'drawing',
icon: {
prefix: 'fas',
name: 'draw-polygon',
},
option: {
type: 'polygon',
trans: 'new-polygon',
name: 'New polygon',
},
},
{
name: 'Line',
trans: 'line',
description: '',
type: 'drawing',
icon: {
prefix: 'fas',
name: 'minus',
},
option: {
type: 'line',
trans: 'new-line',
name: 'New line',
},
},
{
name: 'Arrow',
trans: 'arrow',
description: '',
type: 'drawing',
icon: {
prefix: 'fas',
name: 'long-arrow-alt-right',
},
option: {
type: 'arrow',
trans: 'new-arrow',
name: 'New arrow',
},
},
],
// ELEMENT: [
// {
// name: 'Chart',
// description: '',
// type: 'element',
// icon: {
// prefix: 'fas',
// name: 'chart-line',
// },
// option: {
// superType: 'element',
// type: 'chart',
// name: 'New chart',
// width: 356,
// height: 356,
// },
// },
// {
// name: 'Element',
// description: '',
// type: 'element',
// icon: {
// prefix: 'fab',
// name: 'html5',
// },
// option: {
// superType: 'element',
// type: 'element',
// width: 480,
// height: 270,
// name: 'New element',
// },
// },
// {
// name: 'Iframe',
// description: '',
// type: 'element',
// icon: {
// prefix: 'fas',
// name: 'window-maximize',
// },
// option: {
// superType: 'element',
// type: 'iframe',
// width: 480,
// height: 270,
// name: 'New iframe',
// },
// },
// {
// name: 'Video',
// description: '',
// type: 'element',
// icon: {
// prefix: 'fab',
// name: 'youtube',
// },
// option: {
// superType: 'element',
// type: 'video',
// width: 480,
// height: 270,
// name: 'New video',
// autoplay: true,
// muted: true,
// loop: true,
// },
// },
// ],
SVG: [
{
name: 'Default',
trans: 'svg',
description: '',
type: 'default',
icon: {
prefix: 'fas',
name: 'bezier-curve',
},
option: {
type: 'svg',
superType: 'svg',
name: 'New SVG',
trans: 'new-svg',
loadType: 'svg',
},
},
],
};