VSinerva/freesewing
1
0
Fork 0
Code Activity

wip(lab): Work on porting lab/workbenck to named exports

Browse source
This commit is contained in:
joostdecock 2023-01-29 18:57:24 +01:00
parent db789180b6
commit 59708f534d
85 changed files with 1339 additions and 1149 deletions
Download patch file Download diff file Expand all files Collapse all files

78
sites/shared/components/workbench/draft/snippet/index.js
View file

@ -1,78 +0,0 @@
import React from 'react'
import { getProps } from '../utils'
import { Tr, KeyTd, ValTd, Attributes, pointCoords } from '../path/index'
const snippetInfo = (props) => {
return (
<div className="p-4 border bg-neutral bg-opacity-40 shadow rounded-lg">
<h5 className="text-neutral-content text-center pb-4">Snippet info</h5>
<table className="border-collapse h-fit">
<tbody>
<Tr>
<KeyTd>Def</KeyTd>
<ValTd>{props.snippet.def}</ValTd>
</Tr>
<Tr>
<KeyTd>Anchor</KeyTd>
<ValTd>{props.snippet.anchor.name}</ValTd>
</Tr>
<Tr>
<KeyTd>Coords</KeyTd>
<ValTd>{pointCoords(props.snippet.anchor)}</ValTd>
</Tr>
<Tr>
<KeyTd>Coords</KeyTd>
<ValTd>{pointCoords(props.snippet.anchor)}</ValTd>
</Tr>
<Tr>
<KeyTd>Attributes</KeyTd>
<ValTd><Attributes list={props.snippet.attributes.list}/></ValTd>
</Tr>
</tbody>
</table>
<div className="flex flex-col flex-wrap gap-2 mt-4">
<button
className="btn btn-success"
onClick={() => console.log(props.snippet)}
>console.log(snippet)</button>
<button
className="btn btn-success"
onClick={() => console.table(props.snippet)}
>console.table(snippet)</button>
</div>
</div>
)
}
const Snippet = (props) => {
if (!props.snippet?.anchor) return null
const snippetProps = {
xlinkHref: '#' + props.snippet.def,
x: props.snippet.anchor.x,
y: props.snippet.anchor.y
}
let scale = props.snippet.attributes.get('data-scale')
let rotate = props.snippet.attributes.get('data-rotate')
if (scale || rotate) {
snippetProps.transform = ''
if (scale) {
snippetProps.transform += `translate(${snippetProps.x}, ${snippetProps.y}) `
snippetProps.transform += `scale(${scale}) `
snippetProps.transform += `translate(${snippetProps.x * -1}, ${snippetProps.y * -1}) `
}
if (rotate) {
snippetProps.transform += `rotate(${rotate}, ${snippetProps.x}, ${snippetProps.y}) `
}
}
return <use
{...snippetProps}
{...getProps(props.snippet)}
color="currentColor"
className="hover:cursor-pointer hover:fill-primary hover:text-secondary"
onClick={(evt) => { evt.stopPropagation(); props.showInfo(snippetInfo(props)) }}
/>
}
export default Snippet