\n {active && hasMinted &&\n <>\n
Members Only
\n \n\n \n \n
\n\n \n {setImageLoaded(props.svg ?? \"\")}}/>\n
\n\n {item.forkAdditions === 0 ? \"Create fork\" : item.forkAdditions}
);\n } else {\n return (Pending
\n| # | \nCreator | \n {props.forksEnabled &&Fork length | }\n
|---|---|---|
{props.history[index].tokenId} | \n {item.author}{getTimeStringFromEpoch(item.timestamp)} | \n {props.forksEnabled && {renderLink(item, index)} | }\n
... | \n {props.loading ? \"Loading...\" : \"Load more\"} | \n \n |
);\n else return (<>);\n }\n\n function renderErrorStatus() {\n if (errorStatus !== '') {\n return (\n 
\n
\n\n {renderErrorStatus()}\n ); \n}","import { InjectedConnector } from '@web3-react/injected-connector'\nimport { NetworkConnector } from '@web3-react/network-connector'\nimport { WalletConnectConnector } from '@web3-react/walletconnect-connector'\n//import { WalletLinkConnector } from '@web3-react/walletlink-connector'\n//import { LedgerConnector } from '@web3-react/ledger-connector'\n\n//const POLLING_INTERVAL = 12000\n//const RPC_URLS: { [chainId: number]: string } = {\n// 1: process.env.RPC_URL_1 as string,\n// 4: process.env.RPC_URL_4 as string\n//}\n\nexport const injected = new InjectedConnector({ supportedChainIds: [1, 3, 4, 5, 31337, 1337] })\n\nexport const network = new NetworkConnector({\n urls: { 31337: \"http://127.0.0.1:8545/\", 1: \"https://eth-mainnet.alchemyapi.io/v2/d8bS6AkSFaAq0gKGhBTNSZBjDjtx9L9u\" },\n defaultChainId: 1\n})\n\nexport const walletconnect = new WalletConnectConnector({\n rpc: { 1: \"https://mainnet.infura.io/v3/84842078b09946638c03157f83405213\" },\n qrcode: true\n})\n\n//export const walletlink = new WalletLinkConnector({\n// url: RPC_URLS[1],\n// appName: 'web3-react example',\n// supportedChainIds: [1, 3, 4, 5, 42, 10, 137, 69, 420, 80001]\n//})\n\n//export const ledger = new LedgerConnector({ chainId: 1, url: RPC_URLS[1], pollingInterval: POLLING_INTERVAL })\n","export default __webpack_public_path__ + \"static/media/metamask.c901ad35.svg\";","export default __webpack_public_path__ + \"static/media/walletconnect.66f98648.svg\";","export default \"data:image/png;base64,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\"","import {useEffect} from 'react';\nimport { useWeb3React } from '@web3-react/core';\nimport { network } from './connectors';\n\nexport const useEthNetwork = () => {\n const { active, library, activate } = useWeb3React(\"network\");\n\n useEffect(() => {\n async function connectToWeb3Network() {\n if (!active) await activate(network);\n }\n\n console.log(\"useEthNetwork: \" + active);\n setTimeout(connectToWeb3Network, 1);\n }, [active, activate]);\n\n return [active, library];\n};\n\nexport async function fetchJson(request: string): Promise {\n if (request.startsWith(\"ipfs://ipfs\")) {\n request = \"https://ipfs.io/ipfs\" + request.substr(\"ipfs://ipfs\".length);\n } else if (request.startsWith(\"ipfs://\")) {\n request = \"https://ipfs.io/ipfs/\" + request.substr(\"ipfs://\".length);\n }\n\n if (request.startsWith(\"https://api.artblocks.io/token\")) {\n request = \"https://token.artblocks.io\" + request.substr(\"https://api.artblocks.io/token\".length);\n }\n\n const response = await fetch(request);\n const body = await response.json();\n return body;\n}\n","import { useWeb3React } from \"@web3-react/core\";\nimport { Col, Row, Button, Modal } from \"react-bootstrap\";\nimport { useCallback, useEffect, useState } from 'react';\nimport ConnectWalletForm from \"./ConnectWalletForm\";\nimport { AutonomousSubArt, AutonomousSubArt__factory, CollectiveCanvas, CollectiveCanvas__factory } from \"./typechain\";\nimport { CANVAS_CONTRACT_ADDRESS, SUB_ART_CONTRACT_ADDRESS } from \"./Constsnts\";\nimport { toUtf8Bytes } from \"@ethersproject/strings\";\nimport { BigNumber } from \"ethers\";\nimport { formatEther } from \"ethers/lib/utils\";\nimport { useEthNetwork } from \"./NetworkConnector\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { debounce } from \"ts-debounce\";\nimport {dispatch} from 'use-bus';\n\ninterface MintButtonProps {\n serializedLayer: string;\n parentId: string | undefined;\n isMintable: boolean;\n}\n\nexport default function MintButton(props: MintButtonProps) {\n\n const [showModal, setShowModal] = useState(false);\n const [estimatedGas, setEstimatedGas] = useState(BigNumber.from(0));\n const { active : signerActive, library : signerLibrary } = useWeb3React()\n const [active, library ] = useEthNetwork();\n const [isMinting, setIsMinting] = useState(false);\n const [mintingStatus, setMintingStatus] = useState(\"\");\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n const updateEstimate = useCallback(debounce(async (serializedLayer: string, library: any) => {\n const gasPrice = BigNumber.from(100000000000);//await library.getSigner().getGasPrice();\n\n if (props.parentId == null) {\n const contract : CollectiveCanvas = CollectiveCanvas__factory.connect(CANVAS_CONTRACT_ADDRESS, library);\n\n const price = await contract.currentPriceToMint();\n const estimatedGas = await contract.estimateGas.mint(toUtf8Bytes(serializedLayer), {value: price, from: \"0x73bceb1cd57c711feac4224d062b0f6ff338501e\"});\n\n setEstimatedGas(estimatedGas.mul(gasPrice));\n } else {\n const contract : AutonomousSubArt = AutonomousSubArt__factory.connect(SUB_ART_CONTRACT_ADDRESS, library);\n\n const price = await contract.currentPriceToMint(props.parentId);\n const estimatedGas = await contract.estimateGas.mint(BigNumber.from(props.parentId), toUtf8Bytes(serializedLayer), {value: price, from: \"0x73bceb1cd57c711feac4224d062b0f6ff338501e\"});\n\n setEstimatedGas(estimatedGas.mul(gasPrice));\n }\n }, 1000), []);\n\n useEffect(() => {\n if (active && props.isMintable) {\n console.log(\"Callign with layer: \" + props.serializedLayer);\n updateEstimate(props.serializedLayer, library);\n }\n }, [active, updateEstimate, library, props.serializedLayer, props.parentId, props.isMintable]);\n\n async function onMint() {\n if (isMinting) return;\n setIsMinting(true);\n setMintingStatus(\"\");\n\n console.log(\"Would mint layer: \" + props.serializedLayer);\n try {\n if (props.parentId == null) {\n const contract : CollectiveCanvas = CollectiveCanvas__factory.connect(CANVAS_CONTRACT_ADDRESS, signerLibrary.getSigner());\n const price = await contract.currentPriceToMint();\n const token = await contract.mint(toUtf8Bytes(props.serializedLayer), {value: price});\n await token.wait(1);\n } else {\n const contract : AutonomousSubArt = AutonomousSubArt__factory.connect(SUB_ART_CONTRACT_ADDRESS, signerLibrary.getSigner());\n const price = await contract.currentPriceToMint(props.parentId);\n const token = await contract.mint(BigNumber.from(props.parentId), toUtf8Bytes(props.serializedLayer), {value: price});\n await token.wait(1);\n }\n\n dispatch('MintButton/onMinted'); \n } catch (error) {\n console.error(error);\n setMintingStatus(\"Minting failed!\");\n }\n\n setIsMinting(false);\n }\n\n return ( \n \n setShowModal(false)} aria-labelledby=\"contained-modal-title-vcenter\" size=\"lg\" centered>\n \n Connect wallet \n \n \n \n \n \n \n \n \n
\n )\n\n}","import { BigNumber } from \"@ethersproject/bignumber\";\nimport { formatEther } from \"@ethersproject/units\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { Card, Col, Row } from \"react-bootstrap\";\nimport { useParams } from \"react-router-dom\";\n\ninterface PriceCardProps {\n price: BigNumber;\n}\n\nexport default function PriceCard(props: PriceCardProps) {\n\n const { forkId } = useParams();\n\n return (\n \n \n \n
\n \n \n );\n\n\n}","export enum Tools {\n CURSOR, RECTANGLE, CIRCLE, POLYGON\n}","import { ListGroup } from \"react-bootstrap\";\nimport { Tools } from \"./util/Tools\";\n\ninterface ShapeToolbarProps {\n selectedTool : Tools;\n updateSelectedTool : (selected : Tools) => void;\n}\n\n\nexport default function ShapeToolbar(props : ShapeToolbarProps) {\n\n return (\n
{errorStatus}
);\n } else {\n return (<>);\n }\n }\n\n return (\n <>\n Ledger
\nConnect your Ledger wallet
\n {renderConnectingStatus(connectingLedger)}\n \n */ }\n\n
\n\n \n Estimated gas cost: {formatEther(estimatedGas)} \n
\n\n { mintingStatus !== \"\" && {mintingStatus}
}\n\n { signerActive ? props.isMintable ? : \n :\n \n }\nCurrent price to mint {forkId != null && \" on fork\"}
\n {formatEther(props.price)} \n\n
\n );\n}","import Element from \"./Element\";\n\nexport default class PolygonElement extends Element {\n\n constructor(readonly points: PolygonElementPoint[], \n readonly _editing: boolean, readonly closed: boolean, \n rotation: Number, fillColor: string, strokeColor: string, strokeWidth: Number) \n {\n super(\"polygon\", 0, 0, 0, 0, 0, rotation, fillColor, strokeColor, strokeWidth);\n }\n\n static newDefault(points: PolygonElementPoint[]) {\n return new PolygonElement(points, false, false, 0, \"#ffffff\", \"#000000\", 1);\n }\n\n withUpdatedCoordinates(x : Number, y: Number) : PolygonElement {\n const diffX = x.valueOf() - this.x.valueOf();\n const diffY = y.valueOf() - this.y.valueOf();\n\n const translatedPoints = this.points.map((point) => {\n return {...point, x: point.x.valueOf() + diffX, y: point.y.valueOf() + diffY, \n cx1: point.cx1 ? point.cx1.valueOf() + diffX : point.cx1,\n cy1: point.cy1 ? point.cy1.valueOf() + diffY : point.cy1,\n cx2: point.cx2 ? point.cx2.valueOf() + diffX : point.cx2,\n cy2: point.cy2 ? point.cy2.valueOf() + diffY : point.cy2};\n })\n\n return new PolygonElement(translatedPoints, this.editing, this.closed, this.rotation, this.fillColor, this.strokeColor, this.strokeWidth);\n }\n\n withUpdatedDimensions(width : Number, height : Number) : PolygonElement {\n throw Error(\"Unable to scale path\");\n }\n\n withUpdatedRotation(rotation : Number) : PolygonElement {\n return new PolygonElement(this.points, this.editing, this.closed, rotation, this.fillColor, this.strokeColor, this.strokeWidth);\n }\n\n withUpdatedFillColor(fillColor : string): PolygonElement {\n return new PolygonElement(this.points, this.editing, this.closed, this.rotation, fillColor, this.strokeColor, this.strokeWidth);\n }\n\n withUpdatedStrokeColor(strokeColor : string) : PolygonElement {\n return new PolygonElement(this.points, this.editing, this.closed, this.rotation, this.fillColor, strokeColor, this.strokeWidth);\n }\n\n withUpdatedStrokeWidth(strokeWidth : Number) : PolygonElement {\n return new PolygonElement(this.points, this.editing, this.closed, this.rotation, this.fillColor, this.strokeColor, strokeWidth);\n }\n\n withUpdatedRadius(radius : Number) : PolygonElement {\n throw Error(\"Unable to update radius of path\");\n }\n\n withEditing(editing: boolean) : PolygonElement {\n return new PolygonElement(this.points, editing, this.closed, this.rotation, this.fillColor, this.strokeColor, this.strokeWidth);\n }\n\n withPointType(index : number, type : PolygonPointType) : PolygonElement {\n const points = this.points.map((point, i) => {\n if (index === i) return {...point, type: type};\n else return point;\n });\n\n return new PolygonElement(points, this.editing, this.closed, this.rotation, this.fillColor, this.strokeColor, this.strokeWidth);\n }\n\n withSelectedPoint(index : number) : PolygonElement {\n const points = this.points.map((point, i) => {\n if (index === i) return {...point, selected: true};\n else return {...point, selected: false};\n });\n\n return new PolygonElement(points, this.editing, this.closed, this.rotation, this.fillColor, this.strokeColor, this.strokeWidth);\n }\n\n withPoints(points : PolygonElementPoint[]) {\n return new PolygonElement(points, this.editing, this.closed, this.rotation, this.fillColor, this.strokeColor, this.strokeWidth);\n }\n\n getPointType(index : number): PolygonPointType {\n return this.points[index].type;\n }\n\n get selectedPoint() : number {\n return this.points.map(point => point.selected).indexOf(true);\n }\n\n get x(): Number {\n return Math.min(...this.points.map((point) => point.x.valueOf()));\n }\n\n get y(): Number {\n return Math.min(...this.points.map((point) => point.y.valueOf()));\n }\n\n get width(): Number {\n const maxX = Math.max(...this.points.map((point) => point.x.valueOf()));\n return maxX - this.x.valueOf();\n }\n\n get height(): Number {\n const maxY = Math.max(...this.points.map((point) => point.y.valueOf()));\n return maxY - this.y.valueOf();\n }\n\n get supportsRadius() : boolean {\n return false;\n }\n\n get supportsScale() : boolean {\n return false;\n }\n\n get editing() : boolean {\n return this._editing;\n }\n\n get deletable() : boolean {\n return !this.editing || this.selectedPoint === -1 || this.points.length < 2;\n }\n\n}\n\nexport enum PolygonPointType {\n LINE, CURVE\n}\n\nexport interface PolygonElementPoint {\n x: Number;\n y: Number;\n\n cx1?: Number;\n cy1?: Number;\n\n cx2?: Number;\n cy2?: Number;\n\n type: PolygonPointType;\n\n selected: boolean;\n}","import { PolygonPointType } from \"./PolygonElement\";\n\nexport default class Element {\n\n constructor(readonly type: string, \n readonly _x : Number, readonly _y : Number, \n readonly _width : Number, readonly _height : Number,\n readonly radius : Number, readonly rotation : Number,\n readonly fillColor : string, readonly strokeColor : string,\n readonly strokeWidth: Number) \n {\n }\n\n get x() : Number {\n return this._x;\n }\n\n get y() : Number {\n return this._y;\n }\n\n get width() : Number {\n return this._width;\n }\n\n get height() : Number {\n return this._height;\n }\n\n get supportsRadius() : boolean {\n return true;\n }\n\n get supportsScale() : boolean {\n return true;\n }\n\n get editing() : boolean {\n return false;\n }\n\n get deletable() : boolean {\n return true;\n }\n\n getPointType(index : number) : PolygonPointType {\n throw Error(\"not supported\");\n }\n\n get selectedPoint() : number {\n return -1;\n }\n\n withUpdatedDimensions(width : Number, height : Number) : Element {\n return new Element(this.type, this.x, this.y, width, height, this.radius, this.rotation, this.fillColor, this.strokeColor, this.strokeWidth);\n }\n\n withUpdatedCoordinates(x : Number, y : Number) : Element {\n return new Element(this.type, x, y, this.width, this.height, this.radius, this.rotation, this.fillColor, this.strokeColor, this.strokeWidth);\n }\n\n withUpdatedRotation(rotation : Number) : Element {\n return new Element(this.type, this.x, this.y, this.width, this.height, this.radius, rotation, this.fillColor, this.strokeColor, this.strokeWidth);\n }\n\n withUpdatedFillColor(fillColor : string) : Element {\n return new Element(this.type, this.x, this.y, this.width, this.height, this.radius, this.rotation, fillColor, this.strokeColor, this.strokeWidth);\n }\n\n withUpdatedStrokeColor(strokeColor : string) : Element {\n return new Element(this.type, this.x, this.y, this.width, this.height, this.radius, this.rotation, this.fillColor, strokeColor, this.strokeWidth);\n }\n \n withUpdatedStrokeWidth(strokeWidth : Number) : Element {\n return new Element(this.type, this.x, this.y, this.width, this.height, this.radius, this.rotation, this.fillColor, this.strokeColor, strokeWidth);\n }\n\n withUpdatedRadius(radius : Number) : Element {\n return new Element(this.type, this.x, this.y, this.width, this.height, radius, this.rotation, this.fillColor, this.strokeColor, this.strokeWidth);\n }\n\n withEditing(editing : boolean) : Element {\n return this;\n }\n\n withPointType(index : number, type : PolygonPointType) : Element {\n throw Error(\"assertion\");\n }\n}","import CSS from 'csstype';\nimport React, {useState} from 'react';\nimport { Row, Col, InputGroup, FormControl, Card, ListGroup, Button } from 'react-bootstrap';\nimport Element from './elements/Element';\nimport { SketchPicker } from 'react-color'\nimport { PolygonPointType } from './elements/PolygonElement';\n\ninterface ShapeInspectorProps {\n element : Element;\n onElementChanged: (element : Element) => void;\n onSendBackward: () => void;\n onBringForward: () => void;\n}\n\nexport default function ShapeInspector(props : ShapeInspectorProps) {\n\n const [isFillPickerVisible, setFillPickerVisible] = useState(false);\n const [isStrokePickerVisible, setStrokePickerVisible] = useState(false);\n\n const swatchStyle : CSS.Properties = {\n padding: \"5px\",\n background: \"#fff\",\n borderRadius: '1px',\n boxShadow: '0 0 0 1px rgba(0,0,0,.1)',\n display: 'inline-block',\n cursor: 'pointer'\n }\n\n const colorStyle : CSS.Properties = {\n width: '36px',\n height: '14px',\n borderRadius: '2px',\n }\n\n const popoverStyle : CSS.Properties = {\n position: 'absolute',\n zIndex: '2',\n }\n\n const coverStyle : CSS.Properties = {\n position: 'fixed',\n top: '0px',\n right: '0px',\n bottom: '0px',\n left: '0px',\n }\n \n return (\n - \n
\n \n \n \n \n w \n props.onElementChanged(props.element.withUpdatedDimensions(Number(value.target.value), props.element.height))} />\n \n \n \n h \n props.onElementChanged(props.element.withUpdatedDimensions(props.element.width, Number(value.target.value)))} aria-label=\"Small\" aria-describedby=\"inputGroup-sizing-sm\" />\n \n \n
\n\n \n \n x \n props.onElementChanged(props.element.withUpdatedCoordinates(Number(value.target.value), props.element.y))} aria-label=\"Small\" aria-describedby=\"inputGroup-sizing-sm\" />\n \n \n \n y \n props.onElementChanged(props.element.withUpdatedCoordinates(props.element.x, Number(value.target.value)))} aria-label=\"Small\" aria-describedby=\"inputGroup-sizing-sm\" />\n \n \n
\n\n \n \n angle \n props.onElementChanged(props.element.withUpdatedRotation(Number(value.target.value)))} aria-label=\"Small\" aria-describedby=\"inputGroup-sizing-sm\" />\n \n \n
\n \n \n\n { props.element.type === \"polygon\" && props.element.selectedPoint !== -1 && \n \n \n \n \n props.onElementChanged(props.element.withPointType(props.element.selectedPoint, PolygonPointType.LINE))} action>Line \n props.onElementChanged(props.element.withPointType(props.element.selectedPoint, PolygonPointType.CURVE))} action>Curve \n \n \n
\n\n \n \n }\n\n \n \n \n
Size
\n \nPosition
\n \nRotation
\n \nType
\n \nFill
\n \n setFillPickerVisible(!isFillPickerVisible)}>\n \n
\n { isFillPickerVisible ? \n \n \n scrollX : number\n scrollY : number\n onMouseOut : () => void;\n onUpdate : (element : Element) => void;\n onSelect : () => void;\n onEdit : () => void;\n}\n\ninterface AnchorProps {\n width: Number\n height: Number\n onMouseDown: (event : React.MouseEvent) => void;\n onMouseUp: (event : React.MouseEvent) => void;\n}\n\nconst hoverBoxStyle : CSS.Properties = {\n position: 'absolute',\n border: '2px solid #dedede',\n zIndex: 9999999\n}\n\nconst scaleAnchorStyle : CSS.Properties = {\n position: 'absolute',\n borderRight: '2px solid #dedede',\n borderBottom: '2px solid #dedede',\n zIndex: '-1'\n}\n\nconst rotateAnchorStyle : CSS.Properties = {\n position: 'absolute',\n borderRight: '2px solid #dedede',\n borderTop: '2px solid #dedede',\n zIndex: -1,\n borderTopRightRadius: '4px'\n}\n\nfunction ScaleAnchor(props: AnchorProps) {\n\n const [isHover, setHover] = useState(false);\n\n function anchorStyle() {\n return {...scaleAnchorStyle,\n top: props.height.valueOf() - 4,\n left: props.width.valueOf() - 4,\n width: 10,\n height: 10,\n borderColor: isHover ? 'gray' : '#dedede'\n }\n }\n\n return (
setFillPickerVisible(false) }/>\n {props.onElementChanged(props.element.withUpdatedFillColor(color.hex))}} />\n
: null \n }\n \n \n\n Stroke
\n \n setStrokePickerVisible(!isStrokePickerVisible)}>\n \n
\n { isStrokePickerVisible ? \n \n \n width \n props.onElementChanged(props.element.withUpdatedStrokeWidth(Number(value.target.value)))} aria-label=\"Small\" aria-describedby=\"inputGroup-sizing-sm\" />\n \n \n \n radius \n props.onElementChanged(props.element.withUpdatedRadius(Number(value.target.value)))} aria-label=\"Small\" aria-describedby=\"inputGroup-sizing-sm\" />\n \n \n\n
\n\n\n \n \n\n \n \n \n
\n\n \n \n\n\n\n\n
\n );\n}","export function getViewPortClickPosition(canvas : SVGSVGElement, event : React.MouseEvent | MouseEvent) : [number, number] {\n let point = canvas.createSVGPoint();\n point.x = event.clientX;\n point.y = event.clientY;\n\n let transformation = point.matrixTransform(canvas.getScreenCTM()!.inverse());\n\n return [transformation.x, transformation.y];\n}","import CSS from 'csstype';\nimport React, {useState, useEffect, RefObject} from 'react';\nimport Element from '../elements/Element';\nimport { getViewPortClickPosition } from '../util/ViewPort';\n\ninterface HoverBoxProps {\n element : Element\n canvas : RefObject setStrokePickerVisible(false) }/>\n {props.onElementChanged(props.element.withUpdatedStrokeColor(color.hex))}} />\n
: null \n }\n \n \n\n Arrange
\n \n\n \n \n
\n \n setHover(true)} onPointerOut={() => setHover(false)} onMouseDown={props.onMouseDown} onMouseUp={props.onMouseUp}/>);\n}\n\nfunction RotateAnchor(props: AnchorProps) {\n\n const [isHover, setHover] = useState(false);\n\n function anchorStyle() {\n return {...rotateAnchorStyle,\n top: -8,\n left: props.width.valueOf() - 4,\n width: 10,\n height: 10,\n borderColor: isHover ? 'gray' : '#dedede'}\n }\n\n return (
setHover(true)} onPointerOut={() => setHover(false)} onMouseDown={props.onMouseDown} onMouseUp={props.onMouseUp} />);\n}\n\nexport default function HoverBox(props : HoverBoxProps) {\n\n const [isDragging, setDragging] = useState(false);\n const [isResizing, setResizing] = useState(false);\n const [isRotating, setRotating] = useState(false);\n\n const [dragOffset, setDragOffset] = useState([0, 0]);\n const [resizeOffset, setResizeOffset] = useState([0, 0]);\n const [rotateOffset, setRotateOffset] = useState([0, 0]);\n\n useEffect(() => {\n if (isDragging || isResizing || isRotating) {\n window.addEventListener(\"mousemove\", handleMouseMove);\n window.addEventListener(\"mouseup\", handleMouseUp);\n }\n\n return () => {\n window.removeEventListener(\"mousemove\", handleMouseMove);\n window.removeEventListener(\"mouseup\", handleMouseUp);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [isDragging, isResizing, isRotating]);\n\n function getViewPortScale(dimension: number) {\n let rootPoint = props.canvas.current!.createSVGPoint();\n let point = props.canvas.current!.createSVGPoint();\n\n point.x = dimension;\n point.y = 0;\n\n rootPoint.x = 0;\n rootPoint.y = 0;\n\n let screenCoordinate = point.matrixTransform(props.canvas.current!.getScreenCTM()!).x;\n let rootCoordinate = rootPoint.matrixTransform(props.canvas.current!.getScreenCTM()!).x;\n\n return screenCoordinate - rootCoordinate;\n }\n\n function getElementAbsoluteXPosition() {\n let point = props.canvas.current!.createSVGPoint();\n point.x = props.element.x.valueOf();\n point.y = props.element.y.valueOf();\n\n return point.matrixTransform(props.canvas.current!.getScreenCTM()!).x + props.scrollX;\n }\n\n function getElementAbsoluteYPosition() {\n let point = props.canvas.current!.createSVGPoint();\n point.x = props.element.x.valueOf();\n point.y = props.element.y.valueOf();\n\n return point.matrixTransform(props.canvas.current!.getScreenCTM()!).y + props.scrollY;\n //return props.canvas.current!.getBoundingClientRect().y;\n }\n\n function handleMouseMove(event : MouseEvent) {\n if (isDragging) {\n const [clientX, clientY] = getViewPortClickPosition(props.canvas.current!, event);\n const mouseX = clientX - dragOffset[0];\n const mouseY = clientY - dragOffset[1];\n\n props.onUpdate(props.element.withUpdatedCoordinates(mouseX, mouseY));\n } else if (isResizing) {\n const [clientX, clientY] = getViewPortClickPosition(props.canvas.current!, event);\n\n const targetX = clientX - resizeOffset[0];\n const targetY = clientY - resizeOffset[1];\n\n const width = targetX - props.element.x.valueOf();\n const height = targetY - props.element.y.valueOf();\n\n props.onUpdate(props.element.withUpdatedDimensions(width, height));\n } else if (isRotating) {\n const [clientX, clientY] = getViewPortClickPosition(props.canvas.current!, event);\n\n const angle = Math.atan2(rotateOffset[0] + (props.element.width.valueOf()) / 2 - clientX,\n rotateOffset[1] + (props.element.height.valueOf()) / 2 - clientY);\n\n const asDegree = angle * 180 / Math.PI;\n const rotation = (asDegree + 45) * -1;\n\n props.onUpdate(props.element.withUpdatedRotation(rotation));\n }\n }\n\n function handleMouseUp(event : MouseEvent) {\n setDragging(false);\n setResizing(false);\n setRotating(false);\n }\n\n function handleStartDrag(event: React.MouseEvent) {\n props.onSelect();\n\n setDragging(true);\n setResizing(false);\n setRotating(false);\n\n const [clientX, clientY] = getViewPortClickPosition(props.canvas.current!, event);\n\n const offsetX = clientX - props.element.x.valueOf();\n const offsetY = clientY - props.element.y.valueOf();\n\n setDragOffset([offsetX, offsetY]);\n }\n\n function handleStartResize(event: React.MouseEvent) {\n event.stopPropagation();\n\n setResizing(true);\n setDragging(false);\n setRotating(false);\n\n const [clientX, clientY] = getViewPortClickPosition(props.canvas.current!, event);\n\n const offsetX = clientX - (props.element.x.valueOf() + props.element.width.valueOf());\n const offsetY = clientY - (props.element.y.valueOf() + props.element.height.valueOf());\n\n setResizeOffset([offsetX, offsetY]);\n }\n\n function handleStartRotate(event: React.MouseEvent) {\n event.stopPropagation();\n\n setRotating(true);\n setResizing(false);\n setDragging(false);\n\n// setRotateOffset([getElementAbsoluteXPosition(),\n// getElementAbsoluteYPosition()]);\n setRotateOffset([props.element.x.valueOf(), props.element.y.valueOf()])\n }\n\n return ( {props.onMouseOver()}}\n onMouseDown={() => {props.onSelected()}}\n />\n );\n\n}\n","import Element from './Element';\n\ninterface CircleProps {\n element: Element;\n onMouseOver: () => void;\n onSelected: () => void;\n}\n\nexport default function Circle(props : CircleProps) {\n\n function rx() {\n return props.element.width.valueOf() / 2;\n }\n\n function ry() { \n return props.element.height.valueOf() / 2;\n }\n\n function cx() {\n return props.element.x.valueOf() + props.element.width.valueOf() / 2;\n }\n\n function cy() {\n return props.element.y.valueOf() + props.element.height.valueOf() / 2;\n }\n\n function rotation() {\n return props.element.rotation ?? 0;\n }\n\n return (\n {props.onMouseOver()}}\n onMouseDown={() => {props.onSelected()}}\n />\n );\n\n}\n","import React, { useState, useEffect } from 'react';\nimport { getViewPortClickPosition } from '../util/ViewPort';\n//import useKeyPress from '../util/useKeyPress';\nimport PolygonElement, { PolygonElementPoint, PolygonPointType } from './PolygonElement';\n\ninterface PolygonProps {\n element: PolygonElement;\n canvas: SVGSVGElement;\n onMouseOver: () => void;\n onSelected: () => void;\n onClosed: () => void;\n onUpdate: (element : PolygonElement) => void;\n}\n\nexport default function Polygon(props : PolygonProps) {\n\n const [hoverNode, setHoverNode] = useState(null);\n const [draggingPoint, setDraggingPoint] = useState<[number, number] | null>(null);\n\n useEffect(() => {\n if (draggingPoint != null) {\n window.addEventListener(\"mousemove\", handleMouseMove);\n window.addEventListener(\"mouseup\", handleMouseUp);\n }\n\n return () => {\n window.removeEventListener(\"mousemove\", handleMouseMove);\n window.removeEventListener(\"mouseup\", handleMouseUp);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [draggingPoint]);\n\n useEffect(() => {\n document.addEventListener('keyup', handleKeyPress)\n \n return () => {\n document.removeEventListener('keyup', handleKeyPress)\n } \n });\n\n const instructions = [\n `M ${props.element.points[0].x} ${props.element.points[0].y}`,\n props.element.points.slice(1).map((point) => {\n if (point.type === PolygonPointType.LINE) return `L ${point.x} ${point.y}`;\n else if (point.type === PolygonPointType.CURVE) return `C ${cx1(point)} ${cy1(point)} ${cx2(point)} ${cy2(point)} ${point.x} ${point.y}`;\n else throw Error(\"assertion\");\n }),\n props.element.closed ? 'Z' : \"\"\n ];\n\n function onPointMouseDown(event: React.MouseEvent, index: number, subIndex: number) {\n event.stopPropagation();\n\n if (!props.element.closed) {\n props.onClosed();\n return;\n }\n\n props.onUpdate(props.element.withSelectedPoint(index));\n setDraggingPoint([index, subIndex]);\n }\n\n function handleMouseMove(event: MouseEvent) {\n const [x, y] = getViewPortClickPosition(props.canvas, event);\n\n const points : PolygonElementPoint[] = props.element.points.map((point, index) => {\n if (draggingPoint != null && index === draggingPoint[0]) {\n if (draggingPoint[1] === 0) return {...point, x: x, y: y};\n else if (draggingPoint[1] === 1) return {...point, cx1: x, cy1: y};\n else if (draggingPoint[1] === 2) return {...point, cx2: x, cy2: y};\n else throw Error(\"Unknown point\");\n } else {\n return point;\n }\n });\n\n props.onUpdate(props.element.withPoints(points));\n }\n\n function handleMouseUp(event: MouseEvent) {\n setDraggingPoint(null);\n }\n\n function handleKeyPress(event: KeyboardEvent) {\n if (event.key === \"Delete\" || event.key === \"Backspace\") {\n if (props.element.editing && props.element.selectedPoint !== -1) {\n props.onUpdate(props.element.withPoints(props.element.points.filter((point) => !point.selected)));\n }\n }\n }\n\n function cx1(point : PolygonElementPoint) {\n return point.cx1 ?? point.x.valueOf() - 10;\n }\n\n function cy1(point : PolygonElementPoint) {\n return point.cy1 ?? point.y.valueOf();\n }\n\n function cx2(point : PolygonElementPoint) {\n return point.cx2 ?? point.x.valueOf() + 10;\n }\n\n function cy2(point : PolygonElementPoint) {\n return point.cy2 ?? point.y.valueOf();\n }\n\n function renderEditingItems() {\n const width = 10;\n let points : PolygonElementPoint[];\n\n if (!props.element.editing && props.element.closed) points = [];\n else if (props.element.editing && props.element.closed) points = props.element.points;\n else if (!props.element.editing && !props.element.closed) points = props.element.points.slice(0, 1);\n else points = props.element.points.slice(0, -1);\n\n return [...points.map((point, index) => {\n return setHoverNode(index)}\n onMouseOut={() => setHoverNode(null)}\n onMouseDown={(event) => onPointMouseDown(event, index, 0)}\n /> \n }),\n points.map((point, index, source) => {\n if (point.type !== PolygonPointType.CURVE) {\n return <>\n }\n\n return (\n \n \n \n onPointMouseDown(event, index, 1)}\n />\n onPointMouseDown(event, index, 2)}\n /> \n \n )\n })];\n }\n\n const centerX = (props.element.width.valueOf() / 2) + props.element.x.valueOf();\n const centerY = (props.element.height.valueOf() / 2) + props.element.y.valueOf();\n\n return (\n \n {props.onMouseOver()}}\n onMouseDown={() => { if (props.element.closed) props.onSelected()}}\n />\n\n {\n renderEditingItems()\n }\n \n );\n\n}\n","import React, {useRef, useState, useEffect} from 'react';\nimport HoverBox from './decorators/HoverBox';\nimport Element from './elements/Element';\nimport Rectangle from './elements/Rectangle';\nimport Circle from './elements/Circle';\nimport { Tools } from './util/Tools';\nimport PolygonElement, { PolygonPointType } from './elements/PolygonElement';\nimport Polygon from './elements/Polygon';\nimport { getViewPortClickPosition } from './util/ViewPort';\nimport { optimize } from 'svgo';\n\ninterface SvgCanvasProps {\n elements : Element[];\n currentTool : Tools;\n backgroundUri : string | null;\n onElementChange : (index : number, element : Element) => void;\n onElementSelected : (index : number) => void;\n onElementAdded : (element : Element) => void;\n onSerialized : (serialized : string) => void;\n}\n\nexport default function SvgCanvas(props : SvgCanvasProps) {\n\n const canvasElement = useRef(null);\n const layerElement = useRef(null);\n const [hoverElement, setHoverElement] = useState(null);\n const [creatingElement, setCreatingElement] = useState(null);\n\n const [scrollX, setScrollX] = useState(0);\n const [scrollY, setScrollY] = useState(0);\n\n useEffect(() => {\n document.addEventListener('keyup', handleKeyPress)\n \n return () => {\n document.removeEventListener('keyup', handleKeyPress)\n } \n });\n\n useEffect(() => {\n if (canvasElement.current != null) {\n const serialized = new XMLSerializer().serializeToString(canvasElement.current);\n const optimized = optimize(serialized, {plugins: [{name: 'preset-default', params: {overrides: {convertPathData: false}}}]}).data;\n\n console.log(\"Original: \" + serialized);\n console.log(\"Optimized: \" + optimized);\n\n const layerMatch = optimized.match(\"^
{if (!isDragging && !isResizing && !isRotating) props.onMouseOut();}}\n onMouseDown={handleStartDrag}\n onDoubleClick={() => props.onEdit()}\n >\n\n { props.element.supportsScale && \n setResizing(false)}\n />\n }\n\n setRotating(false)}\n\n />\n\n
\n )\n\n\n}","import Element from './Element';\n\ninterface RectangleProps {\n element: Element;\n onMouseOver: () => void;\n onSelected: () => void;\n}\n\nexport default function Rectangle(props : RectangleProps) {\n\n function width() {\n return props.element.width ?? 100;\n }\n\n function height() { \n return props.element.height ?? 100;\n }\n\n function x() {\n return props.element.x ?? 0;\n }\n\n function y() {\n return props.element.y ?? 0;\n }\n\n function rotation() {\n return props.element.rotation ?? 0;\n }\n\n const centerX = (width().valueOf() / 2) + x().valueOf();\n const centerY = (height().valueOf() / 2) + y().valueOf();\n\n return (\n